chore: setup project for production

components/hero-page/Hero.jsx

@@ -0,0 +1,99 @@
+"use client";
+
+import Image from "next/image";
+import React, { useState, useEffect } from "react";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Card, CardContent } from "@/components/ui/card";
+import Autoplay from "embla-carousel-autoplay";
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+
+const Hero = () => {
+  const plugin = React.useRef(
+    Autoplay({ delay: 4000, stopOnInteraction: true })
+  );
+
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  const heroData = [
+    {
+      type: "image",
+      src: "/rudraksh banner image 2.avif",
+      overlay: {
+        title: "Sacred Collection",
+        subtitle: "Discover Authentic Rudraksha",
+        description: "Explore our curated selection of premium spiritual items",
+        link: "/collection",
+      },
+    },
+    {
+      type: "image",
+      src: "/rudraksha banner 1.png",
+      overlay: {
+        title: "Quality Assured",
+        subtitle: "Lifetime Authenticity Guarantee",
+        description: "Every piece comes with our exclusive certification",
+        link: "/products/premium-rudraksha-consultation-astrology",
+      },
+    },
+    {
+      type: "image",
+      src: "/rudraksha banner 2.png",
+      overlay: {
+        title: "Sacred Ceremonies",
+        subtitle: "Traditional Prana Pratistha",
+        description: "Blessed at the ancient Pashupatinath temple",
+        link: "/collection/online-pooja",
+      },
+    },
+  ];
+
+  return (
+    <div className="relative w-full h-[55vh] bg-background">
+      <Carousel
+        plugins={[plugin.current]}
+        className="w-full h-full"
+        onMouseEnter={plugin.current.stop}
+        onMouseLeave={plugin.current.reset}
+      >
+        <CarouselContent>
+          {heroData.map((item, index) => (
+            <CarouselItem key={index}>
+              <div className="relative w-full h-[55vh] overflow-hidden">
+                <Image
+                  src={item.src || "/placeholder.svg"}
+                  alt={`Slide ${index + 1}`}
+                  fill
+                  className="object-cover brightness-75"
+                  priority={index === 0}
+                />
+
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious className="left-4 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white border-none" />
+        <CarouselNext className="right-4 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white border-none" />
+      </Carousel>
+    </div>
+  );
+};
+
+export default Hero;

components/hero-page/HeroFive.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { productsCards } from "@/utils";
+
+const ExclusiveProductCards = () => {
+  
+
+  return (
+    <div className="container mx-auto px-4 py-8 max-w-8xl">
+      <div className="text-center mb-12">
+        <h1 className="font-serif text-5xl text-slate-800 mb-4">
+          Only at Gupta Rudraksha™
+        </h1>
+        <h2 className="text-xl text-slate-700">
+          Explore divinity with Gupta Rudraksha&#39;s rare and authentic collection.
+          Step into a world of spiritual bliss.
+        </h2>
+      </div>
+      <div className="flex-wrap gap-5 flex items-center justify-center">
+        {productsCards.map((product) => (
+          <Link href={`/products/${product.title}`} key={product.id}>
+            <div
+              key={product.id}
+              className="relative bg-[#EDE8E0]  overflow-hidden h-[350px] w-[300px] "
+            >
+              <div className="absolute top-0 left-0 bg-[#C19A5B] text-white py-1 px-3 rounded-br-lg z-10">
+                Exclusive
+              </div>
+              <div className="h-[300px] w-[300px] flex items-center justify-center">
+                <Image
+                  src={"/one-one.jpg"}
+                  alt={`Logo for ${product.title}`}
+                  width={160}
+                  height={150}
+                  className="object-contain hover:scale-125 transition-all ease-in duration-300"
+                />
+              </div>
+              <div className="p-4 ">
+                <h3 className="text-center text-[1rem] uppercase  text-gray-800">
+                  {product.title}
+                </h3>
+              </div>
+            </div>
+          </Link>
+        ))}
+      </div>
+      <div className="py-4 border-y-2 mt-9">
+        <Link href={'/collections/only-in-nepa-rudraksha'}><h2 className="text-2xl text-center underline text-[#C19A5B]">Shop Exclusive Products</h2></Link>
+      </div> 
+    </div>
+  );
+};
+
+export default ExclusiveProductCards;

components/hero-page/HeroFour.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+const HeroFour = () => {
+  return (
+    <div className="min-h-[70vh] mt-10 pb-14 sm:px-6 lg:px-8">
+      <div className="max-w-8xl mx-auto">
+        <div className="text-center mb-12">
+          <h1 className="font-serif text-5xl text-slate-800 mb-4">
+            Explore Gupta Rudraksha
+          </h1>
+          <h2 className="text-xl text-slate-700">
+            Dive deep with us in our Gupta Rudraksha Journey and our get to know
+            us even more better.
+          </h2>
+        </div>
+        <iframe
+          src="https://www.youtube.com/embed/_drMO01Mjtc"
+          title="Rudraksha &amp; It’s REAL POWER explained, Jaap Benefits | Pashupatinath, Bhairav, Nepal’s History | TRS"
+          frameBorder="0"
+          className="mx-auto h-[180px] sm:h-[570px]  w-[300px] sm:w-3/4"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          referrerPolicy="strict-origin-when-cross-origin"
+          allowFullScreen
+        ></iframe>
+      </div>
+    </div>
+  );
+};
+
+export default HeroFour;

components/hero-page/HeroSeven.jsx

@@ -0,0 +1,30 @@
+import Link from "next/link";
+import React from "react";
+
+const HeroSeven = () => {
+  return (
+    <div className="min-h-screen bg-no-repeat flex flex-col sm:p-5 ">
+      <div className="text-center mb-6 mt-4 sm:mb-8 sm:mt-6 md:mb-12 md:mt-9 px-4">
+        <h1 className="font-serif text-3xl sm:text-4xl md:text-5xl text-slate-800 mb-2 sm:mb-3 md:mb-4">
+          Our Collections
+        </h1>
+        <h2 className="text-lg sm:text-xl text-slate-700 max-w-3xl mx-auto">
+          Explore divinity with Gupta Rudraksha&#39;s rare and authentic collection. Step into a world of spiritual bliss.
+        </h2>
+      </div>
+      
+      <div className="bg-[url('/pooja_banner_3.png')]  bg-no-repeat bg-cover bg-center mx-auto w-full sm:max-w-7xl flex-grow">
+        <div className="flex flex-col justify-end sm:ml-14 items-center sm:items-start gap-3 sm:gap-4 md:gap-5 h-full sm:h-[60%] w-full sm:w-1/2 p-6 sm:p-8 md:p-12">
+          <h2 className="font-serif text-lg sm:text-xl md:text-2xl">Experience Divine Blessings</h2>
+          <h2 className="text-3xl sm:text-4xl md:text-5xl font-serif text-slate-800 text-center sm:text-left">Anytime, Anywhere</h2>
+          <p className="text-base sm:text-lg w-full sm:w-[90%] text-center sm:text-left">
+            Online Pooja Services by Certified Brahmans, Using Premium Materials, with 100% Satisfaction Guaranteed.
+          </p>
+          <Link href={'/pooja-services'}><button className="border border-slate-800 px-4 py-4 mt-7 hover:bg-[#C19A5B] capitalize font-semibold transition-colors ease-in duration-300 font-serif sm:ml-10">explore pooja services</button></Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HeroSeven;

components/hero-page/HeroSix.jsx

@@ -0,0 +1,54 @@
+'use client'
+import { guranteeData } from "@/utils";
+import Image from "next/image";
+import React from "react";
+import { motion } from "framer-motion";
+
+const HeroSix = () => {
+  return (
+    <section className="py-16 bg-gradient-to-b from-background to-muted">
+      <div className="container px-4 mx-auto">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="text-center mb-12"
+        >
+          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
+            Our Sacred Commitment
+          </h2>
+          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+            Certified Excellence in Rudraksha - Nepal&apos;s Premier ISO 9001:2015
+            Accredited Organization
+          </p>
+        </motion.div>
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
+          {guranteeData.map((item, index) => (
+            <motion.div
+              key={item.id}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: index * 0.1 }}
+              className="flex flex-col items-center text-center"
+            >
+              <div className="relative w-24 h-24 mb-4">
+                <Image
+                  src={item.imageUrl || "/placeholder.svg"}
+                  alt={item.title}
+                  layout="fill"
+                  objectFit="contain"
+                  className="rounded-full bg-primary/10 p-4"
+                />
+              </div>
+              <h3 className="text-sm font-medium text-foreground uppercase tracking-wide">
+                {item.title}
+              </h3>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSix;

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;