Ben newItems

package.json

@@ -6,12 +6,16 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.9",
     "firebase": "^9.8.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
+    "react-owl-carousel": "^2.3.3",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
+    "react-slick": "^0.30.3",
+    "slick-carousel": "^1.8.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.jsx

@@ -14,7 +14,7 @@ function App() {
         <Route path="/" element={<Home />} />
         <Route path="/explore" element={<Explore />} />
         <Route path="/author" element={<Author />} />
-        <Route path="/item-details" element={<ItemDetails />} />
+        <Route path="/item-details/:id" element={<ItemDetails />} />
       </Routes>
       <Footer />
     </Router>

src/components/CountDown.jsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react"
+
+const Countdown = ({ expiryDate }) => {
+    const [timeText, setTimeText] = useState("");
+    const [intervalId, setIntervalId] = useState();
+
+    React.useEffect(() => {
+        calculateTime();
+
+        const intervalId = setInterval(() => {
+          calculateTime();
+        }, 1000);
+
+        setIntervalId(intervalId);
+
+        return () => {
+          clearInterval(intervalId);
+        }
+      }, []);
+
+      function calculateTime() {
+        const millisLeft = expiryDate - Date.now();
+
+        if (millisLeft < 0) {
+          clearInterval(intervalId);
+          setTimeText("EXPIRED");
+          return;
+        }
+
+        const secondsLeft = millisLeft / 1000;
+        const minutesLeft = secondsLeft / 60;
+        const hoursLeft = minutesLeft / 60;
+
+        setTimeText(
+          `${Math.floor(hoursLeft)}h ${Math.floor(minutesLeft % 60)}m ${Math.floor(
+            secondsLeft % 60
+          )}s`
+        );
+      }
+  return (
+    <div className="de_countdown"> 
+      {timeText}
+    </div>
+  )
+};
+
+export default Countdown;

src/components/home/HotCollections.jsx

@@ -1,42 +1,124 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-import AuthorImage from "../../images/author_thumbnail.jpg";
-import nftImage from "../../images/nftImage.jpg";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import axios from "axios";
+import Slider from "react-slick";
 
 const HotCollections = () => {
+  const [collection, setCollection] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  async function fetchCollections() {
+    const { data } = await axios.get(
+      "https://us-central1-nft-cloud-functions.cloudfunctions.net/hotCollections"
+    );
+    setCollection(data);
+    setLoading(false);
+  }
+  useEffect(() => {
+    fetchCollections();
+  }, []);
+
+  const sliderSettings = {
+    dots: true,
+    lazyLoad: true,
+    infinite: true,
+    autoplay: true,
+    speed: 500,
+    slidesToShow: 4,
+    slidesToScroll: 1,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 3,
+        },
+      },
+      {
+        breakpoint: 768,
+        settings: {
+          slidesToShow: 2,
+        },
+      },
+      {
+        breakpoint: 480,
+        settings: {
+          slidesToShow: 1,
+        },
+      },
+    ],
+  };
+
   return (
     <section id="section-collections" className="no-bottom">
       <div className="container">
-        <div className="row">
+        <div className="row ">
           <div className="col-lg-12">
             <div className="text-center">
-              <h2>Hot Collections</h2>
+              <h2>Hot Collection</h2>
               <div className="small-border bg-color-2"></div>
             </div>
           </div>
-          {new Array(4).fill(0).map((_, index) => (
-            <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12" key={index}>
-              <div className="nft_coll">
-                <div className="nft_wrap">
-                  <Link to="/item-details">
-                    <img src={nftImage} className="lazy img-fluid" alt="" />
-                  </Link>
-                </div>
-                <div className="nft_coll_pp">
-                  <Link to="/author">
-                    <img className="lazy pp-coll" src={AuthorImage} alt="" />
-                  </Link>
-                  <i className="fa fa-check"></i>
-                </div>
-                <div className="nft_coll_info">
-                  <Link to="/explore">
-                    <h4>Pinky Ocean</h4>
-                  </Link>
-                  <span>ERC-192</span>
-                </div>
-              </div>
-            </div>
-          ))}
+          <div className="slider-container">
+            {loading ? (
+              <Slider {...sliderSettings}>
+                {new Array(4).fill(0).map((_, index) => (
+                  <div className="nft_coll" key={index}>
+                    <div className="nft_wrap__skeleton shimmer">
+                      <Link to="/item-details">
+                        <img className="lazy img-fluid" />
+                      </Link>
+                    </div>
+                    <div className="nft_coll_pp__skeleton shimmer">
+                      <Link to="/author">
+                        <img className="lazy__skeleton pp-coll" />
+                      </Link>
+                      <i className="fa fa-check"></i>
+                    </div>
+                    <div className="nft_coll_info">
+                      <Link to="/explore">
+                        <h4 className="title__skeleton shimmer"></h4>
+                      </Link>
+                      <span className="span__skeleton shimmer"></span>
+                    </div>
+                  </div>
+                ))}
+              </Slider>
+            ) : (
+              <Slider {...sliderSettings}>
+                {collection.map((item, index) => (
+                  <div className="nft_coll" key={index}>
+                    <div className="nft_wrap">
+                      <Link to="/item-details">
+                        <img
+                          src={item.nftImage}
+                          className="lazy img-fluid"
+                          alt={item.title}
+                        />
+                      </Link>
+                    </div>
+                    <div className="nft_coll_pp">
+                      <Link to="/author">
+                        <img
+                          className="lazy pp-coll"
+                          src={item.authorImage}
+                          alt={item.author}
+                        />
+                      </Link>
+                      <i className="fa fa-check"></i>
+                    </div>
+                    <div className="nft_coll_info">
+                      <Link to="/explore">
+                        <h4>{item.title}</h4>
+                      </Link>
+                      <span>ERC-{item.code}</span>
+                    </div>
+                  </div>
+                ))}
+              </Slider>
+            )}
+          </div>
         </div>
       </div>
     </section>