chore: setup project for production

components/sliders/BannerSlider.jsx

@@ -0,0 +1,86 @@
+"use client";
+import React from "react";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+
+const categories = [
+  { title: "Spirituality", image: "/one-two.jpg" },
+  { title: "Meditation", image: "/gallery1.jpg" },
+  { title: "Wellness", image: "/pooja_image.webp" },
+];
+
+const BannerSlider = () => {
+  return (
+    <section className="relative h-fit bg-gradient-to-br from-yellow-800 to-yellow-700 overflow-hidden">
+      {/* Background image */}
+      <Image
+        src="/herothree.jpg"
+        alt="Background"
+        layout="fill"
+        objectFit="cover"
+        className="mix-blend-overlay opacity-30"
+      />
+
+      <div className="container mx-auto px-4 py-16 relative z-10">
+        <div className="flex flex-col lg:flex-row items-center justify-between gap-12">
+          {/* Text content */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="lg:w-1/3 text-center lg:text-left"
+          >
+            <h2 className="text-2xl font-medium text-primary-foreground mb-4">
+              Discover Your Path
+            </h2>
+            <h1 className="text-4xl lg:text-5xl font-bold text-white mb-6">
+              Astrology-Guided Personal Growth
+            </h1>
+            <p className="text-lg text-primary-foreground/80 mb-8">
+              Unlock your potential with our expert-led consultations and sacred
+              Rudraksha beads.
+            </p>
+            <a
+              href="#consultation"
+              className="inline-flex items-center gap-2 bg-white text-primary px-6 py-3 rounded-full hover:bg-primary-foreground hover:text-primary transition-colors"
+            >
+              Book a Consultation
+              <ArrowRight className="w-4 h-4" />
+            </a>
+          </motion.div>
+
+          {/* Static Cards */}
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.6, delay: 0.3 }}
+            className="lg:w-2/3 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+          >
+            {categories.map((category, index) => (
+              <div
+                key={index}
+                className="relative aspect-square rounded-lg overflow-hidden group"
+              >
+                <Image
+                  src={category.image || "/placeholder.svg"}
+                  alt={category.title}
+                  layout="fill"
+                  objectFit="cover"
+                  className="transition-transform duration-300 group-hover:scale-110"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4">
+                  <h3 className="text-white text-lg font-medium">
+                    {category.title}
+                  </h3>
+                </div>
+              </div>
+            ))}
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default BannerSlider;