finishing index layout

src/components/Footer/index.tsx

@@ -4,29 +4,30 @@ 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' }}>
+        <div className={"menu-list"}>
-          <h2 className={'font-bold text-md'}>LOCATION</h2>
+          <h2 className={'font-bold text-base'}>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'}>Bali</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 className={'menu-list'}>
+          <h2 className={'font-bold text-base'}>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' }}>
+        <div className={"menu-list"}>
-          <h2 className={'font-bold text-md'}>REGION</h2>
+          <h2 className={'font-bold text-base'}>More</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' }}>
+        <div className={"menu-list"}>
-          <h2 className={'font-bold text-md'}>SITE DETAILS</h2>
+          <h2 className={'font-bold text-base'}>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>

src/components/Footer/style.css

@@ -7,4 +7,25 @@
 
 .footer-section a {
   line-height: 1.75;
+}
+
+.menu-list {
+  float: left; 
+  padding-right: 30px;
+  margin: 0 30px 20px 0;
+}
+
+.menu-list h2 {
+  color: #939393;
+}
+
+@media screen and (max-width: 425px) {
+  .menu-list a {
+    font-size:  .8rem;
+  }
+
+  .menu-list h2 {
+    font-size: 1rem;
+  }
+
 }

src/components/Header/index.tsx

@@ -42,7 +42,7 @@ function Header() {
             />
           </label>
         </form>
-        <button onClick={onDropdown} className="dropdown-menu" style={{ backgroundColor: "#4b4b4b", padding: 5, margin: 'auto 0', borderRadius: 10, marginLeft: 'auto' }}>
+        <button onClick={onDropdown} className="dropdown-menu bg-secondary" style={{ padding: 5, margin: 'auto 0', borderRadius: 10, marginLeft: 'auto' }}>
           <svg xmlns="http://www.w3.org/2000/svg" height="30" fill="white" viewBox="0 -960 960 960" width="30"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg>
         </button>
       </div>

src/pages/Home/index.tsx

@@ -39,7 +39,7 @@ function Home() {
           <SeparatorWithAnchor pageLink='#' pageName='recently added' secondLink='#' />
           {data.new_places.map((x: NewPlaces) => (
             <div className={"recently-added-section-card"}>
-              <div className={'border-secondary'} style={{ width: 200, height: 200, overflow: 'hidden', borderRadius: 7, borderWidth: 1 }}>
+              <div className={'border-secondary recently-img-container'}>
                 <img alt={x.name} src={x.thumbnail} loading="eager" style={{ width: '100%', height: '100%' }} />
               </div>
               <div className={"border-primary pb-2 location-container text-sm mb-2 mt-2"}>
@@ -47,22 +47,22 @@ function Home() {
                 <p className={'text-xs mt-1'}>{x.location}</p>
               </div>
               <div className={"flex flex-row items-center mb-3"}>
-                <div className={'mr-3'}>
+                <div className={'mr-3 users-score-bar'}>
                   <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 className={"text-sm text-tertiary"}>critic score ({x.critic_voters})</p>
+                <p className={"users-score"}>critic score ({x.critic_voters})</p>
               </div>
               <div className={"flex flex-row items-center"}>
-                <div className={'mr-3'}>
+                <div className={'mr-3 users-score-bar'}>
                   <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 className={'text-sm text-tertiary'}>user score ({x.user_voters})</p>
+                <p className={'users-score'}>user score ({x.user_voters})</p>
               </div>
             </div>
           ))}
@@ -85,7 +85,7 @@ function Home() {
                 <div className={"flex flex-row user-engagement"}>
                   <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>
+                  <svg style={{ marginTop: 2}} stroke="currentColor" fill="white" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32zM128 272c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg>
                   <p className={"ml-1"}>{x.comments_count}</p>
                 </div>
               </div>
@@ -95,9 +95,40 @@ function Home() {
         </section>
         {/* END RECENT NEWS / EVENT SECTION */}
 
+        {/* LOCATION CRITICS BEST AND USERS BEST SECTION  */}
+
+        <section className={"mt-10"}>
+          <SeparatorWithAnchor pageLink='#' pageName={"Popular user reviews"} secondLink='#' />
+          <div>
+            {popular_user_review.data.map((x) => (
+              <div className={'text-sm reviews-container'}>
+                <div style={{ float: 'left', width: 120, margin: '0 12px 10px 0' }}>
+                  <img src={x.thumbnail} style={{ width: '100%' }} />
+                </div>
+                <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 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 className={'text-sm'}>
+                  {x.message}
+                  <a className={'text-tertiary ml-2'} style={{ cursor: 'pointer'}}>read more</a>
+                </div>
+              </div>
+            ))
+
+            }
+          </div>
+        </section>
+
 
         {/* START LOCATION CRITICS BEST AND USERS BEST SECTION */}
-        <section className={"mt-10"}>
+        <section className={"mt-10 mb-10"}>
           <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='#' />
@@ -107,8 +138,8 @@ function Home() {
                     <div className={"mb-2 trending-image-container"}>
                       <img src={x.thumbnail} loading={"lazy"} style={{ width: '100%', height: '100%' }} />
                     </div >
-                    <p>{x.name}</p>
+                    <p className={"location-title"}>{x.name}</p>
-                    <p className={"text-xs"}>{x.location}</p>
+                    <p className={"text-xs location-title"}>{x.location}</p>
                     <div>
 
                     </div>
@@ -158,36 +189,6 @@ function Home() {
             </div>
           </div>
         </section>
-        {/* LOCATION CRITICS BEST AND USERS BEST SECTION  */}
-
-        <section className={"mt-10"}>
-          <SeparatorWithAnchor pageLink='#' pageName={"Popular user reviews"} secondLink='#' />
-          <div>
-            {popular_user_review.data.map((x) => (
-              <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 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 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>
-                  {x.message}
-                  <a className={'text-tertiary ml-2'} style={{ cursor: 'pointer'}}>read more</a>
-                </div>
-              </div>
-            ))
-
-            }
-          </div>
-        </section>
       </div>
     </DefaultLayout>
 

src/pages/Home/style.css

@@ -1,5 +1,5 @@
 .main-content {
-  padding: 20px 30px;
+  padding: 20px 25px;
   text-align: left;
 }
 
@@ -59,6 +59,12 @@
   float: left;
 }
 
+.users-score {
+  color: #a8adb3;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .critics-users-rating-container {
   margin-top: 0.75rem;
 }
@@ -69,6 +75,23 @@
   border-radius: 7px;
 }
 
+.recently-img-container {
+  width: 200px;
+  height: 200px; 
+  overflow: hidden;
+  border-radius: 7px; 
+  border-width: 1px;
+}
+
+
+.reviews-container {
+  display: inline-block;
+  width: 33.3%;
+  padding: 10px 2% 20px;
+  vertical-align: top;
+  box-sizing: border-box;
+}
+
 @media screen and (max-width: 1300px) {
   .recently-added-section-card {
     width: 24.3%;
@@ -86,6 +109,16 @@
   .trending-section {
     margin-bottom: 1.75rem;
   }
+
+  .reviews-container {
+    display: block;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+  .reviews-container:nth-child(-n+2) {
+    border-bottom: 1px solid #38444d;
+  }
 }
 
 @media screen and (max-width: 625px) {
@@ -116,6 +149,10 @@
     border: none;
     padding: 0;
   }
+
+  .main-content {
+    padding: 10px;
+  }
 }
 
 @media screen and (max-width: 425px) {
@@ -123,8 +160,14 @@
     width: 100%;
   }
 
-  .location-title {
+  .news-link {
-    font-size: 10px;
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .recently-img-container {
+    height: 120px;
+    width: 100%;
   }
 
   .critics-users-image {
@@ -142,4 +185,15 @@
     height: 100px;
   }
 
+
+  .users-score {
+    font-size: .75rem;
+    line-height: 1rem;
+  }
+
+  .users-score-bar p {
+    font-size: 0.75rem;;
+    line-height: 1rem;
+  }
+
 }