fix responsive news and user critics location

src/components/Footer/index.tsx

@@ -0,0 +1,40 @@
+import './style.css';
+
+function Footer() {
+  return (
+    <footer className={"bg-secondary footer-container"}>
+      <div className={"content text-left footer-section"}>
+        <div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0' }}>
+          <h2 className={'font-bold text-md'}>LOCATION</h2>
+          <a href={'#'} className={'text-sm block'}>Highest Rated</a>
+          <a href={'#'} className={'text-sm block'}>Lowest Rated</a>
+          <a href={'#'} className={'text-sm block'}>Recently Added</a>
+          <a href={'#'} className={'text-sm block'}>Random</a>
+        </div>
+        <div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0' }}>
+          <h2 className={'font-bold text-md'}>REGION</h2>
+          <a href={'#'} className={'text-sm block'}>Jawa</a>
+          <a href={'#'} className={'text-sm block'}>Kalimantan</a>
+          <a href={'#'} className={'text-sm block'}>Nusa Tenggara</a>
+          <a href={'#'} className={'text-sm block'}>Papua</a>
+          <a href={'#'} className={'text-sm block'}>Sulawesi</a>
+          <a href={'#'} className={'text-sm block'}>Sumatra</a>
+        </div>
+        <div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0' }}>
+          <h2 className={'font-bold text-md'}>MORE</h2>
+          <a href={"#"} className={'text-sm block'}>On this day</a>
+          <a href={"#"} className={'text-sm block'}>Site updates</a>
+        </div>
+        <div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0' }}>
+          <h2 className={'font-bold text-md'}>SITE DETAILS</h2>
+          <a href={'#'} className={'text-sm block'}>Faq</a>
+          <a href={'#'} className={'text-sm block'}>Privacy policy</a>
+          <a href={'#'} className={'text-sm block'}>Feedback</a>
+          <a href={'#'} className={'text-sm block'}>Contact Us</a>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer;

src/components/Footer/style.css

@@ -0,0 +1,10 @@
+.footer-container {
+  width: 100%;
+  clear: both; 
+  overflow: hidden;  
+  padding-bottom: 4vh;
+}
+
+.footer-section a {
+  line-height: 1.75;
+}

src/components/Header/index.tsx

@@ -30,7 +30,7 @@ function Header() {
   return (
     <header>
       <div className="flex flex-row content">
-        <h1 className={`title ${dropdown ? 'title-dropdown' : ""}`}>HilingRiviw</h1>
+        <h1 className={`title ${dropdown ? 'title-dropdown' : ""}`}>Hilingin</h1>
         <form onSubmit={onSearchSubmit} className={`search-input ${dropdown ? "search-input-dropdown" : ""}`}>
           <label>
             <input

src/components/Separator/WithAnchor/index.tsx

@@ -13,7 +13,7 @@ function SeparatorWithAnchor(props: SeparatorProps) {
         <a href={props.pageLink}>{props.pageName}</a>
       </h1>
       {props.secondLink &&
-        <a href={props.secondLink} className={"text-sm"}>View all</a>
+        <a href={props.secondLink} className={"text-xs"}>View all</a>
       }
     </div>
   )

src/components/Separator/WithAnchor/style.css

@@ -1,4 +1,9 @@
 .divider {
   border-bottom-width: 1px; 
   padding-bottom: 3px;
-}
+  border-color: #38444d;
+}
+
+a:hover {
+  color: #92a8b7;
+}

src/components/index.ts

@@ -1,7 +1,9 @@
 import Header from "./Header";
 import SeparatorWithAnchor from "./Separator/WithAnchor";
+import Footer from './Footer/';
 
 export {
   Header,
-  SeparatorWithAnchor
+  SeparatorWithAnchor,
+  Footer
 }

src/index.css

@@ -3,7 +3,7 @@
 /* @tailwind component; */
 
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Lato', sans-serif;
   line-height: 1.5;
   font-weight: 400;
 

src/lato.css

@@ -0,0 +1,88 @@
+@font-face {
+  font-family: 'Lato';
+  src: url('./fonts/Lato-Light.ttf') format('truetype');
+       font-weight: 300;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Lato';
+  src: url('./fonts/Lato-LightItalic.ttf') format('truetype');
+       font-weight: 300;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Lato';
+  src: url('./fonts/Lato-Regular.ttf') format('truetype');
+       font-weight: 400;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Lato';
+  src: url('./fonts/Lato-Italic.ttf') format('truetype');
+       font-weight: 400;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Lato';
+  src: url('./fonts/Lato-Medium.ttf') format('truetype');
+       font-weight: 500;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Lato';
+  src: url('./fonts/Lato-MediumItalic.ttf') format('truetype');
+       font-weight: 500;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Lato';
+  src: url('./fonts/Lato-Bold.ttf') format('truetype');
+       font-weight: 700;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Lato';
+  src: url('./fonts/Lato-BoldItalic.ttf') format('truetype');
+       font-weight: 700;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Lato';
+  src: url('./fonts/Lato-Black.ttf') format('truetype');
+       font-weight: 900;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Lato';
+  src: url('./fonts/Lato-BlackItalic.ttf') format('truetype');
+       font-weight: 900;
+       font-display: swap;
+       font-style: italic;
+}

src/layouts/Default/Default.tsx

@@ -1,5 +1,5 @@
 import { ComponentChildren } from "preact";
-import { Header } from "../../components";
+import { Footer, Header } from "../../components";
 
 type ChildrenProps = {
   children: ComponentChildren
@@ -12,38 +12,7 @@ function DefaultLayout({ children }: ChildrenProps) {
       <main style={{ overflow: 'hidden' }}>
         {children}
       </main>
-      <footer className={"bg-secondary"} style={{ width: "100%", clear: 'both', overflow: 'hidden', paddingBottom: 50}}>
-        <div className={"content text-left"}>
-          <div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0'}}>
-            <h2>Location</h2>
-            <p>Highest Rated</p>
-            <p>Lowest Rated</p>
-            <p>Recently Added</p>
-            <p>Random</p>
-          </div>
-          <div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0'}}>
-            <h2>IDK</h2>
-            <p>Jawa</p>
-            <p>Kalimantan</p>
-            <p>Nusa Tenggara</p>
-            <p>Papua</p>
-            <p>Sulawesi</p>
-            <p>Sumatra</p>
-          </div>
-          <div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0'}}>
-            <h2>MORE</h2>
-            <p>On this day</p>
-            <p>Site updates</p>
-          </div>
-          <div style={{ float: 'left', paddingRight: 30, margin: '0 30px 20px 0'}}>
-            <h2>SITE DETAILS</h2>
-            <p>FAQ</p>
-            <p>PRIVACY Policy</p>
-            <p>Feedback</p>
-            <p>Contact Us</p>
-          </div>
-        </div>
-      </footer>
+      <Footer />
     </>
   )
 }

src/main.tsx

@@ -1,5 +1,6 @@
 import { render } from 'preact'
 import { App } from './app.tsx'
 import './index.css'
+import './lato.css';
 
 render(<App />, document.getElementById('app')!)

src/pages/Home/index.tsx

@@ -30,16 +30,6 @@ type News = {
 }
 
 function Home() {
-  const [count, setCount] = useState(0)
-
-  const getUrl = async () => {
-
-  }
-
-  useEffect(() => {
-    getUrl();
-  }, [])
-
   return (
     <DefaultLayout>
       <div className="content main-content mt-3">
@@ -49,31 +39,30 @@ function Home() {
           <SeparatorWithAnchor pageLink='#' pageName='recently added' secondLink='#' />
           {data.new_places.map((x: NewPlaces) => (
             <div className={"recently-added-section-card"}>
-              {/* <p>{x.id}</p> */}
-              <div style={{ width: 200, height: 200, overflow: 'hidden', borderRadius: 7 }}>
+              <div className={'border-secondary'} style={{ width: 200, height: 200, overflow: 'hidden', borderRadius: 7, borderWidth: 1 }}>
                 <img alt={x.name} src={x.thumbnail} style={{ width: '100%', height: '100%' }} />
               </div>
-              <div style={{ textAlign: 'left', borderBottomWidth: 1 }}>
-                <p>{x.name}</p>
-                <p>{x.location}</p>
+              <div className={"border-primary pb-2 location-container text-sm mb-2 mt-2"}>
+                <p className={'location-title'}>{x.name}</p>
+                <p className={'text-xs mt-1'}>{x.location}</p>
               </div>
-              <div className={"flex flex-row"}>
-                <div>
-                  <p>{x.critic_rating}</p>
-                  <div style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
+              <div className={"flex flex-row items-center mb-3"}>
+                <div className={'mr-3'}>
+                  <p className={'text-sm text-center'}>{x.critic_rating}</p>
+                  <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
                     <div style={{ height: 4, width: `${x.critic_rating}%`, backgroundColor: 'green' }} />
                   </div>
                 </div>
-                <p>Critic Score ({x.critic_voters})</p>
+                <p className={"text-sm text-tertiary"}>critic score ({x.critic_voters})</p>
               </div>
-              <div className={"flex flex-row"}>
-                <div>
-                  <p>{x.user_rating}</p>
-                  <div style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
-                    <div style={{ height: 4, width: `${x.user_rating}%`, backgroundColor: 'green' }} />
+              <div className={"flex flex-row items-center"}>
+                <div className={'mr-3'}>
+                  <p className={'text-sm text-center'}>{x.user_rating}</p>
+                  <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
+                    <div style={{ height: 4, width: ` ${x.user_rating}%`, backgroundColor: 'green' }} />
                   </div>
                 </div>
-                <p>User score ({x.user_voters})</p>
+                <p className={'text-sm text-tertiary'}>user score ({x.user_voters})</p>
               </div>
             </div>
           ))}
@@ -87,17 +76,17 @@ function Home() {
           <SeparatorWithAnchor pageLink='#' pageName='Recent News / Event' secondLink='#' />
           <div className={"mt-5"}>
             {news.data.map((x: News) => (
-              <div style={{ display: 'inline-block', width: '33.3%', padding: '0 1% 15px', verticalAlign: 'top' }}>
+              <div class={"text-sm news-card"}>
                 <div style={{ height: 250, overflow: 'hidden', borderRadius: 7 }}>
                   <img src={x.thumbnail} style={{ width: "100%", height: '100%', objectFit: 'cover', objectPosition: 'top' }} />
                 </div>
-                <a target="_blank" href={x.link}>{x.link.split("/")[2].replace(/www\./, '')}</a>
-                <p>{x.header}</p>
+                <a className={'news-link'} target="_blank" href={x.link}>{x.link.split("/")[2].replace(/www\./, '')}</a>
+                <p className={'mt-2 mb-2'}>{x.header}</p>
                 <div className={"flex flex-row"}>
-                  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z" /></svg>
-                  <p>{x.likes_count}</p>
-                  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M880-80 720-240H160q-33 0-56.5-23.5T80-320v-480q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v720ZM160-320v-480 480Zm594 0 46 45v-525H160v480h594Z" /></svg>
-                  <p>{x.comments_count}</p>
+                  <svg xmlns="http://www.w3.org/2000/svg" fill={"gray"} height="18" viewBox="0 -960 960 960" width="18"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z" /></svg>
+                  <p className={"mr-3 ml-1"}>{x.likes_count}</p>
+                  <svg xmlns="http://www.w3.org/2000/svg" fill={"gray"} height="16" viewBox="0 -960 960 960" width="18"><path d="M880-80 720-240H160q-33 0-56.5-23.5T80-320v-480q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v720ZM160-320v-480 480Zm594 0 46 45v-525H160v480h594Z" /></svg>
+                  <p className={"ml-1"}>{x.comments_count}</p>
                 </div>
               </div>
             ))
@@ -109,55 +98,60 @@ function Home() {
 
         {/* START LOCATION CRITICS BEST AND USERS BEST SECTION */}
         <section className={"mt-10"}>
-          <div class={"grid grid-cols-4 gap-12"}>
-            <div className={'col-span-2 mr-5'}>
+          <div class={"grid grid-cols-4 lg:gap-12"}>
+            <div className={'col-span-4 lg:col-span-2 trending-section'}>
               <SeparatorWithAnchor pageLink='#' pageName={"Trending Now"} secondLink='#' />
-              <div className={'grid grid-cols-3'}>
+              <div className={'grid grid-cols-4 md:grid-cols-3'}>
                 {popular.data.map((x) => (
-                  <div className={"m-2"}>
-                    <div style={{ overflow: 'hidden', borderRadius: 7 }}>
-                      <img src={x.thumbnail} style={{ height: 200, width: '100%' }} />
-                    </div>
+                  <div className={"m-2 text-sm col-span-2 md:col-span-1"}>
+                    <div className={"mb-2 trending-image-container"}>
+                      <img src={x.thumbnail} style={{ width: '100%', height: '100%' }} />
+                    </div >
                     <p>{x.name}</p>
-                    <p>{x.location}</p>
+                    <p className={"text-xs"}>{x.location}</p>
+                    <div>
+
+                    </div>
                   </div>
                 ))}
               </div>
             </div>
-            <div>
+            <div className={'col-span-2 lg:col-span-1'}>
               <SeparatorWithAnchor pageLink='#' pageName={"Critic's Best"} />
               {critics_users_pick.critics.map((x) => (
-                <div className={"mt-1"}>
-                  <div style={{ width: 72, height: 72, float: 'left' }}>
-                    <img src={x.thumbnail} style={{ height: '100%', width: '100%', }} />
+                <div className={"pt-2 text-sm"}>
+                  <div className={'mr-2 critics-users-image'}>
+                    <img src={x.thumbnail} style={{ height: '100%', width: '100%', borderRadius: 3}} />
                   </div>
-                  <p>{x.name}</p>
-                  <p>{x.location}</p>
-                  <div style={{ display: 'inline-block' }}>
-                    <p>{x.critic_rating} ({x.critic_voters})</p>
-                    <div style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
+                  <p className={'location-title'}>{x.name}</p>
+                  <p className={'text-xs location-province location-title'}>{x.location}</p>
+                  <div className={'critics-users-rating-container'} style={{ display: 'inline-block' }}>
+                    <p className={'text-xs ml-2'}>{x.critic_rating}</p>
+                    <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
                       <div style={{ height: 4, width: `${x.critic_rating}%`, backgroundColor: 'green' }} />
                     </div>
                   </div>
+                  <div style={{ clear: 'both'}} />
                 </div>
               ))
               }
             </div>
-            <div>
+            <div className={'col-span-2 lg:col-span-1'}>
               <SeparatorWithAnchor pageLink='#' pageName={"User's Best"} />
               {critics_users_pick.users.map((x) => (
-                <div className={"mt-1"}>
-                  <div style={{ width: 72, height: 72, float: 'left' }}>
-                    <img src={x.thumbnail} style={{ height: '100%', width: '100%', }} />
+                <div className={"pt-2 text-sm"}>
+                  <div className={'mr-2 critics-users-image'}>
+                    <img src={x.thumbnail} style={{ height: '100%', width: '100%', borderRadius: 3}} />
                   </div>
-                  <p>{x.name}</p>
-                  <p>{x.location}</p>
-                  <div style={{ display: 'inline-block' }}>
-                    <p>{x.user_rating} ({x.user_rating})</p>
-                    <div style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
+                  <p className={'location-title'}>{x.name}</p>
+                  <p className={'text-xs location-province location-title'}>{x.location}</p>
+                  <div className={'critics-users-rating-container'} style={{ display: 'inline-block' }}>
+                    <p className={'text-xs ml-2'}>{x.user_rating}</p>
+                    <div style={{ height: 4, width: 30, backgroundColor: "#72767d"}}>
                       <div style={{ height: 4, width: `${x.user_rating}%`, backgroundColor: 'green' }} />
                     </div>
                   </div>
+                  <div style={{ clear: 'both'}} />
                 </div>
               ))
               }
@@ -170,22 +164,23 @@ function Home() {
           <SeparatorWithAnchor pageLink='#' pageName={"Popular user reviews"} secondLink='#' />
           <div>
             {popular_user_review.data.map((x) => (
-              <div style={{ display: 'inline-block', width: '33.3%', padding: '10px 2% 20px', verticalAlign: 'top', boxSizing: 'border-box' }}>
+              <div className={'text-sm'} style={{ display: 'inline-block', width: '33.3%', padding: '10px 2% 20px', verticalAlign: 'top', boxSizing: 'border-box' }}>
                 <div style={{ float: 'left', width: 120, margin: '0 12px 10px 0' }}>
                   <img src={x.thumbnail} style={{ width: '100%' }} />
                 </div>
-                <p style={{ whiteSpace: 'nowrap' }} className={"text-sm"}>{x.place_name}</p>
-                <p className={'text-sm'}>{x.location}</p>
+                <p className={"text-sm location-titles"}>{x.place_name}</p>
+                <p className={'text-xs mb-2'}>{x.location}</p>
                 <p className={'text-sm'}>{x.username}</p>
                 <div style={{ display: 'inline-block', overflow: 'hidden', verticalAlign: 'middle' }}>
-                  <p>{x.rating}</p>
-                  <div style={{ height: 4, width: 40, backgroundColor: "#72767d" }}>
+                  <p className={'text-xs ml-2 mt-1'}>{x.rating}</p>
+                  <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
                     <div style={{ height: 4, width: `${x.rating}%`, backgroundColor: 'green' }} />
                   </div>
                 </div>
                 <div  style={{ clear: 'both'}} className={'mb-3'}/>
                 <div>
-                  <p>{x.message}</p>
+                  {x.message}
+                  <a className={'text-tertiary ml-2'} style={{ cursor: 'pointer'}}>read more</a>
                 </div>
               </div>
             ))
@@ -193,30 +188,6 @@ function Home() {
             }
           </div>
         </section>
-
-        <div className="flex flex-row">
-          <a href="https://vitejs.dev" target="_blank">
-            <img src={viteLogo} class="logo" alt="Vite logo" />
-          </a>
-          <a href="https://preactjs.com" target="_blank">
-            <img src={preactLogo} class="logo preact" alt="Preact logo" />
-          </a>
-        </div>
-        <h1>Vite + Preact</h1>
-        <div class="card">
-          <button onClick={() => setCount((count) => count + 1)}>
-            count is {count}
-          </button>
-          <p>
-            Edit <code>src/app.tsx</code> and save to test HMR
-          </p>
-        </div>
-        <p class="read-the-docs">
-          Click on the Vite and Preact logos to learn more
-        </p>
-        <h1 className="text-3xl font-bold underline text-prime" >
-          Hello world!
-        </h1>
       </div>
     </DefaultLayout>
 

src/pages/Home/style.css

@@ -11,6 +11,50 @@
   width: 16.6%;
 }
 
+.location-container {
+  text-align: left;
+  border-bottom-width: 1px; 
+  margin-top: 5px; 
+}
+
+.location-title {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+}
+
+.news-link {
+  color: #fbc531;
+}
+
+.news-link:hover{
+  color: #b99229;
+}
+
+.news-card {
+  display: inline-block;
+  width: 33.3%; 
+  padding: 0 1% 15px;
+  vertical-align: top;
+}
+
+
+.trending-image-container {
+  overflow: hidden;
+  border-radius: 7px;
+  height: 200px;
+}
+
+.critics-users-image {
+  width: 72px; 
+  height: 72px;
+  float: left;
+}
+
+.critics-users-rating-container {
+  margin-top: 0.75rem;
+}
 
 @media screen and (max-width: 1300px) {
   .recently-added-section-card {
@@ -22,6 +66,13 @@
   .recently-added-section-card {
     width: 33.3%;
   }
+  .news-card {
+    width: 50%;
+  }
+
+  .trending-section {
+    margin-bottom: 1.75rem;
+  }
 }
 
 @media screen and (max-width: 625px) {
@@ -30,6 +81,28 @@
   }
 }
 
-/* @media screen and (max-width: 425px) {
-  
-} */
+@media screen and (max-width: 425px) {
+  .news-card {
+    width: 100%;
+  }
+
+  .location-title {
+    font-size: 10px;
+  }
+
+  .critics-users-image {
+    height: 60px;
+    width: 60px;
+  }
+
+  .location-province {
+    font-size: 10px !important;
+  }
+
+  .trending-image-container {
+    overflow: hidden;
+    border-radius: 7px;
+    height: 100px;
+  }
+
+}

tailwind.config.js

@@ -6,7 +6,15 @@ export default {
       transparent: 'transparent',
       current: 'currentColor',
       primary: '#202225',
-      secondary: '#2f3136'
+      secondary: '#2f3136',
+      tertiary: '#a8adb3'
+    },
+    borderColor: {
+      primary: '#38444d',
+      secondary: '#202225'
+    },
+    fontFamily: {
+      lato: ['Lato', 'sans-serif']
     },
     fontSize: {
       xs: ['0.75rem', { lineHeight: '1rem' }],