chore: setup project for production

2025-02-19 17:00:55 +05:30
commit 12caeee710
271 changed files with 16199 additions and 0 deletions
--- a/components/hero-page/HeroTwo.jsx
+++ b/components/hero-page/HeroTwo.jsx
@@ -0,0 +1,100 @@
+"use client";
+import React, { useState, useEffect } from "react";
+
+const CountdownUnit = ({ value, label }) => (
+  <div className="flex flex-col items-center mr-2 sm:mr-4">
+    <div className="text-2xl sm:text-xl md:text-xl font-bold mb-1 sm:mb-2 w-[50px] flex justify-center px-2 sm:px-4 py-1 sm:py-2 rounded bg-gradient-to-r from-[#96724f] to-yellow-700">
+      {value !== undefined ? value : "0"}{" "}
+      {/* Display '0' if value is undefined */}
+    </div>
+    <div className="text-xs sm:text-sm uppercase">{label}</div>
+  </div>
+);
+
+const Countdown = ({ targetDate }) => {
+  const [timeLeft, setTimeLeft] = useState(null); // Start with null
+
+  useEffect(() => {
+    const calculateTimeLeft = () => {
+      const difference = +new Date(targetDate) - +new Date();
+      let timeLeft = {};
+
+      if (difference > 0) {
+        timeLeft = {
+          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+          minutes: Math.floor((difference / 1000 / 60) % 60),
+          seconds: Math.floor((difference / 1000) % 60),
+        };
+      }
+
+      return timeLeft;
+    };
+
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    // Initial calculation
+    setTimeLeft(calculateTimeLeft());
+
+    return () => clearInterval(timer);
+  }, [targetDate]);
+
+  const timeUnits = [
+    { key: "days", label: "Days" },
+    { key: "hours", label: "Hours" },
+    { key: "minutes", label: "Min" },
+    { key: "seconds", label: "Sec" },
+  ];
+
+  return (
+    <div className="flex text-white">
+      {timeLeft &&
+        timeUnits.map(({ key, label }) => (
+          <CountdownUnit key={key} value={timeLeft[key]} label={label} />
+        ))}
+    </div>
+  );
+};
+
+const HeroTwo = () => {
+  return (
+    <div className="w-full h-[70vh] mx-auto relative flex justify-center items-center sm:my-14 my-9">
+      <div
+        className="mx-auto h-[90%] max-w-7xl bg-cover bg-center bg-no-repeat flex flex-col sm:flex-row justify-center sm:justify-end items-center relative"
+        style={{ backgroundImage: `url('/diwali.jpg')` }}
+      >
+        <div className="absolute inset-0 bg-black opacity-20"></div>
+        <div className="flex flex-col sm:flex-row justify-between items-center w-full relative z-10 px-4 sm:px-8">
+          {/* left count down */}
+          <div className="w-full sm:w-1/2 flex flex-col items-center sm:items-start mb-8 sm:mb-0">
+            <h1 className="text-xl sm:text-2xl text-white mb-2 sm:mb-4">
+              SHOP BEFORE
+            </h1>
+            <Countdown targetDate="2024-30-26T00:00:00" />
+          </div>
+          {/* right banner text content */}
+          <div className="w-full sm:w-[45%] text-zinc-50 p-4 rounded text-center sm:text-left">
+            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white my-3">
+              Celebrate Diwali with Early Access
+            </h1>
+            <p className="my-4 text-sm sm:text-base md:text-lg">
+              Place your orders by September 26th to receive your items in time
+              for Navaratri. Dive into the festive season with our exclusive
+              products!
+            </p>
+            <h2 className="mb-3 text-sm sm:text-base">
+              GUARANTEED DELIVERY BEFORE NAVARATRI
+            </h2>
+            <button className="px-3 py-2 text-lg sm:text-xl bg-gradient-to-r from-[#96724f] to-yellow-700">
+              Shop Now
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HeroTwo;