faqs completed

src/components/Card.js

@@ -7,7 +7,7 @@ const Card = ({src,desc,price}) => {
       <div className="p-2 mx-auto">
       <div class="rounded-2xl shadow-lg overflow-hidden">
       <img
-        class="rounded-lg h-80 w-96 object-cover"
+        class="rounded-lg h-80 w-96 object-contain"
         src={src}
         alt="jacket"
       />

src/components/Collections.js

@@ -0,0 +1,43 @@
+import ProductCard from "./ProductCard";
+import { useState } from "react";
+
+const Collections = () => {
+    const [active, setActive] = useState(null);
+
+  const list = [
+    "All Products",
+    "High Rated",
+    "Men's Clothing",
+    "Women's Clothing",
+    "Jewellery",
+    "Electronics",
+  ];
+  const handleActive=((e)=>{
+    setActive(e);
+  })
+  return (
+    <div className="flex flex-col items-center mt-12">
+      <div className="flex items-center my-6">
+        <div className=" bg-app-yellow h-1 w-8 rounded-xl mx-7"></div>
+        <div className="font-medium text-3xl">Our Products</div>
+        <div className=" bg-app-yellow h-1 w-8 rounded-xl mx-7"></div>
+      </div>
+      <div>
+        <h2 className="text-5xl font-bold mb-10">
+          Our <span className="text-app-green">Products Collections</span>
+        </h2>
+      </div>
+      <div className="flex gap-8 mb-10">
+        {list.map((val) => (
+          <div className={`cursor-pointer px-4 py-2 border-gray-400 border rounded-full ${active===val && 'bg-app-green text-white border-none border-app-green'}`} onClick={()=>handleActive(val)}>
+            {val}
+          </div>
+        ))}
+      </div>
+      <div>
+        <ProductCard />
+      </div>
+    </div>
+  );
+};
+export default Collections;

src/components/Faq.js

@@ -0,0 +1,17 @@
+const Faq = () => {
+  return (
+    <div className="flex flex-col items-center mt-12">
+      <div className="flex items-center my-6">
+        <div className=" bg-app-yellow h-1 w-8 rounded-xl mx-7"></div>
+        <div className="font-medium text-3xl">FAQs</div>
+        <div className=" bg-app-yellow h-1 w-8 rounded-xl mx-7"></div>
+      </div>
+      <div>
+        <h2 className="text-5xl font-bold mb-10">
+          Question? <span className="text-app-green">Look here.</span>
+        </h2>
+      </div>
+    </div>
+  );
+};
+export default Faq;

src/components/Homepage.js

@@ -1,13 +1,19 @@
 import Navbar from "./Navbar";
 import Banner from "./Banner";
 import DetailsStrip from "./DetailsStrip";
+import Collections from "./Collections";
+import SaleBanner from "./SaleBanner";
+import Faq from "./Faq";
 
 const Homepage = () => {
   return (
     <div>
       <Navbar/>
       <Banner/>
       <DetailsStrip/>
+      <Collections/>
+      <SaleBanner/>
+      <Faq/>
     </div>
   );
 };

src/components/ProductCard.js

@@ -0,0 +1,59 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faStar } from "@fortawesome/free-solid-svg-icons";
+import React, { useState, useEffect } from "react";
+
+const ProductCard = () => {
+  const [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    fetchProducts();
+  }, []);
+
+  const fetchProducts = () => {
+    fetch("http://localhost:3000/products")
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+        setProducts(data);
+      })
+      .catch((error) => console.error("Error fetching products:", error));
+  };
+  return (
+    <div className="flex flex-wrap gap-8 pb-8">
+      {products.map((item) => (
+        <div
+          key={item.id}
+          className="w-96  shadow-lg flex flex-col rounded-3xl overflow-hidden"
+        >
+          <div className="h-72 p-3">
+            <img
+              className="object-contain w-full h-full rounded-3xl"
+              src={item.image}
+              alt={item.title}
+            />
+          </div>
+          <div className="flex flex-col justify-between h-full">
+            <div className="px-4 flex-grow">
+              <div className="flex justify-between items-center py-1">
+                <p className="text-gray-500">{item.category}</p>
+                <div className="flex items-center">
+                  <FontAwesomeIcon className="text-app-yellow" icon={faStar} />
+                  <p className="font-semibold px-2">
+                    {item.rating.rate} ({item.rating.count}+)
+                  </p>
+                </div>
+              </div>
+              <h1 className="py-2 font-semibold text-xl overflow-hidden whitespace-nowrap text-ellipsis">{item.title}</h1>
+            </div>
+            <div className="px-4 pb-4">
+              <h2 className="font-semibold text-2xl">
+                ₹{Math.round(item.price * 84)}
+              </h2>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+export default ProductCard;

src/components/SaleBanner.js

@@ -0,0 +1,94 @@
+import React, { useState, useRef, useEffect } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+
+const SaleBanner = () => {
+  const dayRef = useRef(null);
+  const hourRef = useRef(null);
+  const minutesRef = useRef(null);
+  const secondsRef = useRef(null);
+  const [day, setDay] = useState("02");
+  const [hour, setHour] = useState("14");
+  const [minute, setMinute] = useState("45");
+  const [second, setSecond] = useState("04");
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      let curDay = parseInt(dayRef.current.textContent);
+      let curHour = parseInt(hourRef.current.textContent);
+      let curMin = parseInt(minutesRef.current.textContent);
+      let curSec = parseInt(secondsRef.current.textContent);
+
+      if (curSec > 0) {
+        curSec--;
+      } else if (curMin > 0) {
+        curMin--;
+        curSec = 59;
+      } else if (curHour > 0) {
+        curHour--;
+        curMin = 59;
+        curSec = 59;
+      } else if (curDay > 0) {
+        curDay--;
+        curHour = 23;
+        curMin = 59;
+        curSec = 59;
+      } else {
+        clearInterval(interval);
+      }
+
+      setDay(curDay < 10 ? "0" + curDay.toString() : curDay.toString());
+      setHour(curHour < 10 ? "0" + curHour.toString() : curHour.toString());
+      setMinute(curMin < 10 ? "0" + curMin.toString() : curMin.toString());
+      setSecond(curSec < 10 ? "0" + curSec.toString() : curSec.toString());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="flex w-5/6 mx-auto gap-4 my-10">
+      <div className="flex flex-col items-center bg-[url('assets/bg.jpg')] py-12 rounded-xl w-1/2 bg-cover	">
+        <h1 className="font-bold text-5xl">
+          Flash <span className="text-app-green">Sale!</span>
+        </h1>
+        <h2 className="py-4 text-2xl">Get 20% off - Limited Time Offer!</h2>
+        <div className="flex items-center gap-5 mb-10">
+          <div className="flex items-center flex-col">
+            <p className="font-bold text-5xl" ref={dayRef}>
+              {day}
+            </p>
+            <p className="text-gray-500">Days</p>
+          </div>
+          <p className="font-bold text-5xl">:</p>
+          <div className="flex items-center flex-col">
+            <p className="font-bold text-5xl" ref={hourRef}>
+              {hour}
+            </p>
+            <p className="text-gray-500">Hours</p>
+          </div>
+          <p className="font-bold text-5xl">:</p>
+          <div className="flex items-center flex-col">
+            <p className="font-bold text-5xl" ref={minutesRef}>
+              {minute}
+            </p>
+            <p className="text-gray-500">Minutes</p>
+          </div>
+          <p className="font-bold text-5xl">:</p>
+          <div className="flex items-center flex-col">
+            <p className="font-bold text-5xl" ref={secondsRef}>
+              {second}
+            </p>
+            <p className="text-gray-500">Seconds</p>
+          </div>
+        </div>
+        <button className="bg-app-green px-6 py-2 text-white rounded-3xl text-lg font-medium">
+          Shop Now <FontAwesomeIcon icon={faArrowRight} />
+        </button>
+      </div>
+      <div class="bg-[url('assets/package.jpg')] py-12 rounded-xl w-1/2 bg-cover"></div>
+    </div>
+  );
+};
+
+export default SaleBanner;

tailwind.config.js

@@ -10,6 +10,9 @@ module.exports = {
           spacing:{
             '112': '28rem',
             '128': '32rem',
+          },
+          backgroundImage: {
+            'grey-bg': "url('./src/assets/bg.jpg')",
           }
       },
     },