Initial Changes

components/sliders/BannerSlider.jsx

@@ -4,13 +4,8 @@ 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 = () => {
+const BannerSlider = ({ data, categories }) => {
+  const { heading3, heading4, description3 } = data || {};
   return (
     <section className="relative h-fit bg-gradient-to-br from-yellow-800 to-yellow-700 overflow-hidden">
       {/* Background image */}
@@ -32,14 +27,14 @@ const BannerSlider = () => {
             className="lg:w-1/3 text-center lg:text-left"
           >
             <h2 className="text-2xl font-medium text-primary-foreground mb-4">
-              Discover Your Path
+              {heading3 ?? "Discover Your Path"}
             </h2>
             <h1 className="text-4xl lg:text-5xl font-bold text-white mb-6">
-              Astrology-Guided Personal Growth
+              {heading4 ?? "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.
+              {description3 ??
+                "Unlock your potential with our expert-led consultations and sacred Rudraksha beads."}
             </p>
             <a
               href="#consultation"