rough layout for home

src/components/Header/style.css

@@ -90,7 +90,7 @@ label:before {
   width: 325px; 
   font-size: 1em; 
   text-transform: lowercase;
-  background-color: #4b4b4b;
+  background-color: #2f3136;
 }
 
 .title {
@@ -104,7 +104,7 @@ label:before {
 
 
 .nav-container {
-  background-color: #4b4b4b;
+  background-color: #2f3136;
   padding: 10px 0;
   width: 100%;
   display: flex;

src/components/Separator/WithAnchor/index.tsx

@@ -3,7 +3,7 @@ import './style.css';
 type SeparatorProps = {
   pageName: String,
   pageLink: string,
-  secondLink: string
+  secondLink?: string
 }
 
 function SeparatorWithAnchor(props: SeparatorProps) {
@@ -12,7 +12,9 @@ function SeparatorWithAnchor(props: SeparatorProps) {
       <h1 className="text-sm font-bold" style={{ textTransform: 'uppercase' }}>
         <a href={props.pageLink}>{props.pageName}</a>
       </h1>
-      <a href={props.secondLink} className={"text-sm"}>View all</a>
+      {props.secondLink &&
+        <a href={props.secondLink} className={"text-sm"}>View all</a>
+      }
     </div>
   )
 }

src/datas/critics_users_best_pick.json

@@ -0,0 +1,102 @@
+{
+  "critics": [
+    {
+      "id": 1,
+      "name": "Warung Sate Kambing",
+      "thumbnail": "https://fatahilaharis.files.wordpress.com/2017/07/wp-1499292117215.jpeg",
+      "location": "Bandung",
+      "critic_rating": 78,
+      "critic_voters": 10
+    },
+    {
+      "id": 2,
+      "name": "Pantai Balekambang",
+      "thumbnail": "https://www.nativeindonesia.com/foto/pantai-balekambang/Lokasi-Pura-Yang-Berada-Di-Atas-Pulau-Karang.jpg",
+      "location": "Malang",
+      "critic_rating": 82,
+      "critic_voters": 14
+    },
+    {
+      "id": 3,
+      "name": "Bebek Sinjay",
+      "thumbnail": "https://i0.wp.com/harga.web.id/wp-content/uploads/bebek-sinjay-surabaya-1.jpg?resize=680%2C300&ssl=1",
+      "location": "Surabaya",
+      "critic_rating": 70,
+      "critic_voters": 8
+    },
+    {
+      "id": 4,
+      "name": "Taman Pelangi",
+      "thumbnail": "https://tempat.org/wp-content/uploads/2016/11/57488321_255018015317182_1189210435487115990_n.jpg",
+      "location": "Surabaya",
+      "critic_rating": 75,
+      "critic_voters": 6
+    },
+    {
+      "id": 5,
+      "thumbnail": "https://ak-d.tripcdn.com/images/1i61t22348mz2uz9cB9FF.jpg?proc=source/trip",
+      "name": "Ragunan Zoo",
+      "location": "Jakarta",
+      "critic_rating": 88,
+      "critic_voters": 20
+    },
+    {
+      "id": 6,
+      "name": "Sate Lilit Bali",
+      "thumbnail": "https://lh3.googleusercontent.com/p/AF1QipNX3DCZxF8MOuyptvxPGfTT4-KNw0BTEqYqeled=s680-w680-h510",
+      "location": "Denpasar",
+      "critic_rating": 83,
+      "critic_voters": 12
+    }
+  ],
+  "users": [
+    {
+      "id": 1,
+      "name": "Warung Sate Kambing",
+      "thumbnail": "https://fatahilaharis.files.wordpress.com/2017/07/wp-1499292117215.jpeg",
+      "location": "Bandung",
+      "user_rating": 78,
+      "user_voters": 10
+    },
+    {
+      "id": 2,
+      "name": "Pantai Balekambang",
+      "thumbnail": "https://www.nativeindonesia.com/foto/pantai-balekambang/Lokasi-Pura-Yang-Berada-Di-Atas-Pulau-Karang.jpg",
+      "location": "Malang",
+      "user_rating": 82,
+      "user_voters": 14
+    },
+    {
+      "id": 3,
+      "name": "Bebek Sinjay",
+      "thumbnail": "https://i0.wp.com/harga.web.id/wp-content/uploads/bebek-sinjay-surabaya-1.jpg?resize=680%2C300&ssl=1",
+      "location": "Surabaya",
+      "user_rating": 70,
+      "user_voters": 8
+    },
+    {
+      "id": 4,
+      "name": "Taman Pelangi",
+      "thumbnail": "https://tempat.org/wp-content/uploads/2016/11/57488321_255018015317182_1189210435487115990_n.jpg",
+      "location": "Surabaya",
+      "user_rating": 75,
+      "user_voters": 6
+    },
+    {
+      "id": 5,
+      "thumbnail": "https://ak-d.tripcdn.com/images/1i61t22348mz2uz9cB9FF.jpg?proc=source/trip",
+      "name": "Ragunan Zoo",
+      "location": "Jakarta",
+      "user_rating": 88,
+      "user_voters": 20
+    },
+    {
+      "id": 6,
+      "name": "Sate Lilit Bali",
+      "thumbnail": "https://lh3.googleusercontent.com/p/AF1QipNX3DCZxF8MOuyptvxPGfTT4-KNw0BTEqYqeled=s680-w680-h510",
+      "location": "Denpasar",
+      "user_rating": 83,
+      "user_voters": 12
+    }
+  ]
+}

src/datas/popular.json

@@ -0,0 +1,70 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "name": "Warung Sate Kambing",
+      "thumbnail": "https://fatahilaharis.files.wordpress.com/2017/07/wp-1499292117215.jpeg",
+      "location": "Bandung",
+      "critic_rating": 78,
+      "visited": 48,
+      "critic_voters": 10,
+      "user_rating": 85,
+      "user_voters": 180
+    },
+    {
+      "id": 2,
+      "name": "Pantai Balekambang",
+      "thumbnail": "https://www.nativeindonesia.com/foto/pantai-balekambang/Lokasi-Pura-Yang-Berada-Di-Atas-Pulau-Karang.jpg",
+      "location": "Malang",
+      "critic_rating": 82,
+      "visited": 48,
+      "critic_voters": 14,
+      "user_rating": 90,
+      "user_voters": 250
+    },
+    {
+      "id": 3,
+      "name": "Bebek Sinjay",
+      "thumbnail": "https://i0.wp.com/harga.web.id/wp-content/uploads/bebek-sinjay-surabaya-1.jpg?resize=680%2C300&ssl=1",
+      "location": "Surabaya",
+      "critic_rating": 70,
+      "visited": 48,
+      "critic_voters": 8,
+      "user_rating": 92,
+      "user_voters": 320
+    },
+    {
+      "id": 4,
+      "name": "Taman Pelangi",
+      "thumbnail": "https://tempat.org/wp-content/uploads/2016/11/57488321_255018015317182_1189210435487115990_n.jpg",
+      "location": "Surabaya",
+      "critic_rating": 75,
+      "visited": 48,
+      "critic_voters": 6,
+      "user_rating": 82,
+      "user_voters": 135
+    },
+    {
+      "id": 5,
+      "thumbnail": "https://ak-d.tripcdn.com/images/1i61t22348mz2uz9cB9FF.jpg?proc=source/trip",
+      "name": "Ragunan Zoo",
+      "location": "Jakarta",
+      "critic_rating": 88,
+      "visited": 48,
+      "critic_voters": 20,
+      "user_rating": 76,
+      "user_voters": 190
+    },
+    {
+      "id": 6,
+      "name": "Sate Lilit Bali",
+      "thumbnail": "https://lh3.googleusercontent.com/p/AF1QipNX3DCZxF8MOuyptvxPGfTT4-KNw0BTEqYqeled=s680-w680-h510",
+      "location": "Denpasar",
+      "critic_rating": 83,
+      "visited": 48,
+      "critic_voters": 12,
+      "user_rating": 88,
+      "user_voters": 210
+    }
+  ]
+}

src/datas/popular_user_reviews.json

@@ -0,0 +1,43 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "place_name": "Pantai Teluk selubung",
+      "location": "Malang",
+      "message": "I recently had the opportunity to visit a breathtaking beach that left me in awe. Nestled between rolling waves and golden sands, this hidden gem is a true paradise for beach lovers and nature enthusiasts alike.\n\nFrom the moment I set foot on the powdery shoreline, I was captivated by the crystal-clear azure waters that stretched as far as the eye could see. The gentle caress of the ocean breeze and the soothing sound of waves crashing created an instant sense of relaxation.\nOne of the most remarkable features of this beach is its untouched beauty. The absence of crowds and commercialization allowed for an authentic and serene experience. I was able to walk along the shoreline, feeling the soft sand beneath my feet, and listen to the symphony of seagulls above. It was a refreshing escape from the hustle and bustle of daily life.",
+      "user_id": 1,
+      "username": "halo",
+      "place_id": 1,
+      "thumbnail": "https://www.nativeindonesia.com/foto/pantai-balekambang/Lokasi-Pura-Yang-Berada-Di-Atas-Pulau-Karang.jpg",
+      "rating": 74,
+      "comment": 24,
+      "like": 44
+    },
+    {
+      "id": 3,
+      "message": "I recently had the opportunity to visit a breathtaking beach that left me in awe. Nestled between rolling waves and golden sands, this hidden gem is a true paradise for beach lovers and nature enthusiasts alike.\nFrom the moment I set foot on the powdery shoreline, I was captivated by the crystal-clear azure waters that stretched as far as the eye could see. The gentle caress of the ocean breeze and the soothing sound of waves crashing created an instant sense of relaxation.\nOne of the most remarkable features of this beach is its untouched beauty. The absence of crowds and commercialization allowed for an authentic and serene experience. I was able to walk along the shoreline, feeling the soft sand beneath my feet, and listen to the symphony of seagulls above. It was a refreshing escape from the hustle and bustle of daily life.",
+      "user_id": 1,
+      "username": "halo",
+      "place_name": "Pantai Teluk selubung",
+      "location": "Malang",
+      "place_id": 1,
+      "thumbnail": "https://www.nativeindonesia.com/foto/pantai-balekambang/Lokasi-Pura-Yang-Berada-Di-Atas-Pulau-Karang.jpg",
+      "rating": 74,
+      "comment": 24,
+      "like": 44
+    },
+    {
+      "id": 2,
+      "message": "I recently had the opportunity to visit a breathtaking beach that left me in awe. Nestled between rolling waves and golden sands, this hidden gem is a true paradise for beach lovers and nature enthusiasts alike.\nFrom the moment I set foot on the powdery shoreline, I was captivated by the crystal-clear azure waters that stretched as far as the eye could see. The gentle caress of the ocean breeze and the soothing sound of waves crashing created an instant sense of relaxation\nOne of the most remarkable features of this beach is its untouched beauty. The absence of crowds and commercialization allowed for an authentic and serene experience. I was able to walk along the shoreline, feeling the soft sand beneath my feet, and listen to the symphony of seagulls above. It was a refreshing escape from the hustle and bustle of daily life.",
+      "user_id": 1,
+      "username": "halo",
+      "place_name": "Pantai Teluk selubung",
+      "location": "Malang",
+      "place_id": 1,
+      "thumbnail": "https://www.nativeindonesia.com/foto/pantai-balekambang/Lokasi-Pura-Yang-Berada-Di-Atas-Pulau-Karang.jpg",
+      "rating": 74,
+      "comment": 24,
+      "like": 44
+    }
+  ]
+}

src/datas/recent_news_event.json

@@ -0,0 +1,46 @@
+{
+  "data": [
+    {
+      "header": "Resor Pantai Baru Terungkap",
+      "thumbnail": "http://static.demilked.com/wp-content/uploads/2018/03/5aaa1cb841280-funny-weird-wtf-stock-photos-1-5a39121d2fd9b__700.jpg",
+      "link": "https://qanon.pub/",
+      "comments_count": 24,
+      "likes_count": 12
+    },
+    {
+      "header": "Tempat Wisata Tersembunyi: Puncak Gunung",
+      "comments_count": 24,
+      "thumbnail": "http://static.demilked.com/wp-content/uploads/2018/03/5aaa1cc654a2d-5aa6627814ed8_0wpenz3anzj01__700.jpg",
+      "link": "https://www.unqualified-reservations.org/2009/01/gentle-introduction-to-unqualified/",
+      "likes_count": 12
+    },
+    {
+      "header": "Penampilan Live Band Terkini",
+      "thumbnail": "https://milalink.ru/uploads/posts/2019-01/1547408002_kakie-byvajut-mineraly-i-v-chem-ih-polza-dlja-zdorovja-cheloveka.jpg",
+      "link": "https://slatestarcodex.com/",
+      "comments_count": 24,
+      "likes_count": 12
+    },
+    {
+      "header": "Konser Pop Spektakuler Datang",
+      "thumbnail": "https://64.media.tumblr.com/27ec4dfb259ec74e9ae1d8d8c6f935cf/tumblr_pdf4obI7B21uj48r4o1_1280.jpg",
+      "link":"https://lainchan.org/",
+      "comments_count": 24,
+      "likes_count": 12
+    },
+    {
+      "header": "Destinasi Eksotis Menanti Petualang",
+      "thumbnail": "https://www.boredpanda.com/blog/wp-content/uploads/2022/05/120-627a279454c97__700.jpg",
+      "link": "http://phrack.org/issues/7/3.html",
+      "comments_count": 24,
+      "likes_count": 12
+    },
+    {
+      "header": "Malam Jazz Intim: Nada Mellow",
+      "thumbnail": "https://www.boredpanda.com/blog/wp-content/uploads/2022/05/17-627a1abab8a1f__700.jpg",
+      "link": "https://pagedout.institute/",
+      "comments_count": 24,
+      "likes_count": 12
+    }
+  ] 
+}

src/index.css

@@ -9,7 +9,7 @@
 
   /* color-scheme: light dark; */
   color: rgba(255, 255, 255, 0.87);
-  background-color: #3d3d3d;
+  background-color: #202225;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;

src/layouts/Default/Default.tsx

@@ -12,6 +12,38 @@ function DefaultLayout({ children }: ChildrenProps) {
       <main>
         {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>
     </>
   )
 }

src/pages/Home/index.tsx

@@ -4,7 +4,10 @@ import { useEffect, useState } from "preact/hooks";
 import { DefaultLayout } from '../../layouts/';
 import { SeparatorWithAnchor } from '../../components';
 import data from '../../datas/home.json';
-import axios from 'axios';
+import news from '../../datas/recent_news_event.json';
+import popular from '../../datas/popular.json';
+import critics_users_pick from '../../datas/critics_users_best_pick.json';
+import popular_user_review from '../../datas/popular_user_reviews.json';
 import './style.css';
 
 type NewPlaces = {
@@ -18,12 +21,19 @@ type NewPlaces = {
   user_voters: Number
 }
 
+type News = {
+  header: string,
+  thumbnail: string,
+  link: string,
+  comments_count: Number
+  likes_count: Number
+}
+
 function Home() {
   const [count, setCount] = useState(0)
 
   const getUrl = async () => {
-    const {data} = await axios("https://www.detik.com/sumut/wisata/d-6902796/melihat-koleksi-museum-juang-45-medan-yang-baru-diresmikan-gubsu");
+
-    console.log(data);
   }
 
   useEffect(() => {
@@ -33,14 +43,14 @@ function Home() {
   return (
     <DefaultLayout>
       <div className="content main-content mt-3">
-        
+
         {/* RECENTLY ADDED SECTION */}
         <section about={"Recently added places"} className={'mt-3'}>
           <SeparatorWithAnchor pageLink='#' pageName='recently added' secondLink='#' />
           {data.new_places.map((x: NewPlaces) => (
-            <div style={{ padding: '10px 1% 15px', display: 'inline-block', margin: ' 0 0 15px', verticalAlign: 'top', width: '16.6%' }}>
+            <div className={"recently-added-section-card"}>
               {/* <p>{x.id}</p> */}
-              <div style={{ width: 200, height: 200, overflow: 'hidden' }}>
+              <div style={{ width: 200, height: 200, overflow: 'hidden', borderRadius: 7 }}>
                 <img alt={x.name} src={x.thumbnail} style={{ width: '100%', height: '100%' }} />
               </div>
               <div style={{ textAlign: 'left', borderBottomWidth: 1 }}>
@@ -71,12 +81,119 @@ function Home() {
         {/* END RECENTLY ADDED SECTION */}
 
         {/* START RECENT NEWS / EVENT SECTION */}
-        <section>
+        {/* USE OPEN GRAPH PARSER TO READ OG DATA FROM HTML */}
+        {/* https://github.com/dyatlov/go-opengraph */}
+        <section className={"mt-10"}>
           <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 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>
+                <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>
+                </div>
+              </div>
+            ))
+            }
+          </div>
         </section>
         {/* END RECENT NEWS / EVENT SECTION */}
 
+
+        {/* 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'}>
+              <SeparatorWithAnchor pageLink='#' pageName={"Trending Now"} secondLink='#' />
+              <div className={'grid 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>
+                    <p>{x.name}</p>
+                    <p>{x.location}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div>
+              <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>
+                  <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" }}>
+                      <div style={{ height: 4, width: `${x.critic_rating}%`, backgroundColor: 'green' }} />
+                    </div>
+                  </div>
+                </div>
+              ))
+              }
+            </div>
+            <div>
+              <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>
+                  <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" }}>
+                      <div style={{ height: 4, width: `${x.user_rating}%`, backgroundColor: 'green' }} />
+                    </div>
+                  </div>
+                </div>
+              ))
+              }
+            </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 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'}>{x.username}</p>
+                <div style={{ display: 'inline-block', overflow: 'hidden', verticalAlign: 'middle' }}>
+                  <p>{x.rating}</p>
+                  <div style={{ height: 4, width: 40, 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>
+                </div>
+              </div>
+            ))
+
+            }
+          </div>
+        </section>
+
         <div className="flex flex-row">
           <a href="https://vitejs.dev" target="_blank">
             <img src={viteLogo} class="logo" alt="Vite logo" />

src/pages/Home/style.css

@@ -1,4 +1,35 @@
 .main-content {
   padding: 20px 30px;
   text-align: left;
+}
+
+.recently-added-section-card {
+  padding: 10px 1% 15px;
+  display: inline-block; 
+  margin: 0 0 15px; 
+  vertical-align: top; 
+  width: 16.6%;
+}
+
+
+@media screen and (max-width: 1300px) {
+  .recently-added-section-card {
+    width: 24.3%;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .recently-added-section-card {
+    width: 33.3%;
+  }
+}
+
+@media screen and (max-width: 625px) {
+  .recently-added-section-card {
+    width: 50%;
+  }
+}
+
+@media screen and (max-width: 425px) {
+  
 }

tailwind.config.js

@@ -5,8 +5,8 @@ export default {
     colors: {
       transparent: 'transparent',
       current: 'currentColor',
-      primary: '#3d3d3d',
+      primary: '#202225',
-      secondary: '#4b4b4b'
+      secondary: '#2f3136'
     },
     fontSize: {
       xs: ['0.75rem', { lineHeight: '1rem' }],

yarn.lock

@@ -484,13 +484,6 @@ autoprefixer@^10.4.15:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
-axios@^0.24.0:
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
-  integrity sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==
-  dependencies:
-    follow-redirects "^1.14.4"
-
 axios@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/axios/-/axios-1.5.0.tgz#f02e4af823e2e46a9768cfc74691fdd0517ea267"
@@ -515,11 +508,6 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
-boolbase@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
-  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -613,22 +601,6 @@ convert-source-map@^1.7.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
 
-css-select@^4.2.1:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
-  integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
-  dependencies:
-    boolbase "^1.0.0"
-    css-what "^6.0.1"
-    domhandler "^4.3.1"
-    domutils "^2.8.0"
-    nth-check "^2.0.1"
-
-css-what@^6.0.1:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
-  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
-
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -656,46 +628,11 @@ dlv@^1.1.3:
   resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
   integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
 
-dom-serializer@^1.0.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
-  integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==
-  dependencies:
-    domelementtype "^2.0.1"
-    domhandler "^4.2.0"
-    entities "^2.0.0"
-
-domelementtype@^2.0.1, domelementtype@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
-  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
-
-domhandler@^4.2.0, domhandler@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
-  integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
-  dependencies:
-    domelementtype "^2.2.0"
-
-domutils@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
-  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
-  dependencies:
-    dom-serializer "^1.0.1"
-    domelementtype "^2.2.0"
-    domhandler "^4.2.0"
-
 electron-to-chromium@^1.4.477:
   version "1.4.499"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.499.tgz#dc36b67f4c8e273524e8d2080c5203a6a76987b6"
   integrity sha512-0NmjlYBLKVHva4GABWAaHuPJolnDuL0AhV3h1hES6rcLCWEIbRL6/8TghfsVwkx6TEroQVdliX7+aLysUpKvjw==
 
-entities@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
-  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
-
 esbuild@^0.18.10:
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
@@ -764,7 +701,7 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-follow-redirects@^1.14.4, follow-redirects@^1.15.0:
+follow-redirects@^1.15.0:
   version "1.15.2"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
@@ -846,19 +783,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-he@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
-  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
-
-html-metadata-parser@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/html-metadata-parser/-/html-metadata-parser-2.0.4.tgz#74d74f4361631d2d9f4e2221219371e0db5d343d"
-  integrity sha512-pBjST/bbe3nuy/fNmvyY4G+ypukQ/QHiGc+YnS4up2OVnT4vI0CZA4x2J0Ri77sQkQGH2IMAAug0fE78FfDrLw==
-  dependencies:
-    axios "^0.24.0"
-    node-html-parser "^5.2.0"
-
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -996,14 +920,6 @@ nanoid@^3.3.6:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
   integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
 
-node-html-parser@^5.2.0:
-  version "5.4.2"
-  resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-5.4.2.tgz#93e004038c17af80226c942336990a0eaed8136a"
-  integrity sha512-RaBPP3+51hPne/OolXxcz89iYvQvKOydaqoePpOgXcrOKZhjVIzmpKZz+Hd/RBO2/zN2q6CNJhQzucVz+u3Jyw==
-  dependencies:
-    css-select "^4.2.1"
-    he "1.2.0"
-
 node-releases@^2.0.13:
   version "2.0.13"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d"
@@ -1019,13 +935,6 @@ normalize-range@^0.1.2:
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
 
-nth-check@^2.0.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
-  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
-  dependencies:
-    boolbase "^1.0.0"
-
 object-assign@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"