From e4d8b2cf581304c9da53d435887cec62acdc430a Mon Sep 17 00:00:00 2001
From: Aritra Ghorai <aritra1521@gmail.com>
Date: Sat, 1 Mar 2025 15:29:32 +0530
Subject: [PATCH] Initial Changes

---
 app/accounts/login/page.jsx                   | 37 +++++++++--
 app/contexts/mainContext.js                   | 36 ++++++-----
 app/layout.js                                 | 13 ++--
 app/page.js                                   | 36 +++++++++--
 .../page.jsx                                  | 64 +++++++++++++++----
 components/hero-page/Hero.jsx                 |  6 +-
 components/hero-page/HeroFour.jsx             | 11 ++--
 components/hero-page/HeroSix.jsx              | 12 ++--
 .../premium-rudraksha/PremiumBanner.jsx       | 26 +++++---
 .../premium-rudraksha/PremiumBannerLast.jsx   | 48 ++------------
 .../premium-rudraksha/PremiumBannerOne.jsx    | 35 +++++++---
 .../premium-rudraksha/PremiumBannerTwo.jsx    |  7 +-
 .../premium-rudraksha/PremuimBannerThree.jsx  | 45 +++++++------
 components/product-category/SecondGallery.jsx | 38 +++++++----
 components/products/RelatedProductCards.jsx   |  4 +-
 components/siddha-mala/categoryHero.jsx       | 10 ++-
 components/sliders/BannerSlider.jsx           | 17 ++---
 package-lock.json                             |  7 +-
 utils/axios.js                                |  6 ++
 utils/index.js                                | 47 ++++++++++++++
 20 files changed, 330 insertions(+), 175 deletions(-)

diff --git a/app/accounts/login/page.jsx b/app/accounts/login/page.jsx
index 68a1695..a357598 100644
--- a/app/accounts/login/page.jsx
+++ b/app/accounts/login/page.jsx
@@ -1,12 +1,27 @@
 "use client";
 
 import MainContext from "@/app/contexts/mainContext";
+import { backendUrl, serAxios } from "@/utils/axios";
 import Image from "next/image";
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
+
+const getAuthPageData = async () => {
+  // Fetch data from external API
+  try {
+    const res = await serAxios.get("/dynamic-ui/page/auth/");
+    const data = res.data;
+    return data.data;
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    return null;
+  }
+  // Pass data to the page via props
+};
 
 const LoginSignup = () => {
   const [isLogin, setIsLogin] = useState(true);
   const { loginUser, registerUser } = useContext(MainContext);
+  const [loginPageData, setLoginPageData] = useState(null);
   const [formData, setFormData] = useState({
     email: "",
     password: "",
@@ -34,12 +49,22 @@ const LoginSignup = () => {
     setFormData({ email: "", password: "", confirmPassword: "" });
   };
 
+  useEffect(() => {
+    getAuthPageData().then((data) => {
+      setLoginPageData(data);
+    });
+  }, []);
+
   return (
     <div className="flex h-screen bg-gray-100">
       {/* Left section with video */}
       <div className="hidden lg:flex lg:w-[60%] bg-cover bg-center">
         <video
-          src="/loginvideo.mp4"
+          src={`${
+            loginPageData?.bannerVideo?.path
+              ? backendUrl + loginPageData?.bannerVideo?.path
+              : "/loginvideo.mp4"
+          }`}
           className="object-cover w-full h-full"
           autoPlay
           loop
@@ -130,13 +155,13 @@ const LoginSignup = () => {
             </div>
           </form>
           <div className="text-center">
-            <h2 className="text-[#AC8C6B] font-semibold">
+            {/* <h2 className="text-[#AC8C6B] font-semibold">
               Manage subscriptions
-            </h2>
-            <h2 className="text-xl my-3">or</h2>
+            </h2> */}
+            {/* <h2 className="text-xl my-3">or</h2>
             <h2 className="capitalize border-2 px-5 py-3">
               Continue with google
-            </h2>
+            </h2> */}
             <button
               onClick={toggleMode}
               className="font-medium text-[#C19A5B] mt-10"
diff --git a/app/contexts/mainContext.js b/app/contexts/mainContext.js
index 071e708..c667ccc 100644
--- a/app/contexts/mainContext.js
+++ b/app/contexts/mainContext.js
@@ -13,48 +13,49 @@ export const ContextProvider = ({ children }) => {
     const router = useRouter()
     const [token, setToken] = useState(() => {
         if (typeof window !== 'undefined' && localStorage.getItem('token')) {
-          return localStorage.getItem('token');
+            return localStorage.getItem('token');
         }
         return null;
-      });
+    });
+    const [isOtpSend, setIsOtpSend] = useState(false);
     const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL;
 
-    
+
     const loginUser = async (credentials) => {
         try {
             const response = await axios.post(`${backendUrl}/account/login/`, credentials);
             console.log("Login Successful:", response.data);
             setToken(response.data.token)
-            localStorage.setItem('token',response.data.token)
-            toast.success('Login Successful');
+            localStorage.setItem('token', response.data.token)
+            toast.success('Otp Sent Successfully');
             router.push('/')
 
             return response.data
         } catch (error) {
             if (error.response) {
-                
+
                 console.error("Error during login:", error.response.data);
                 const message = error.response.data.message || "Login failed. Please try again.";
                 toast.error(message);
             } else if (error.request) {
-                
+
                 console.error("No response during login:", error.request);
                 toast.error("Unable to connect to the server. Please try again later.");
             } else {
-                
+
                 console.error("Unexpected error during login:", error.message);
                 toast.error("An unexpected error occurred. Please try again.");
             }
-            throw error; 
+            throw error;
         }
     };
-    
+
     const registerUser = async (credentials) => {
         try {
             const response = await axios.post(`${backendUrl}/account/register/`, credentials);
             console.log("Register Successful:", response.data);
             setToken(response.data.token)
-            localStorage.setItem('token',response.data.token)
+            localStorage.setItem('token', response.data.token)
             toast.success('Registration Successful');
             router.push('/')
 
@@ -65,28 +66,29 @@ export const ContextProvider = ({ children }) => {
                 const message = error.response.data.message || "Registration failed. Please try again.";
                 toast.error(message);
             } else if (error.request) {
-                
+
                 console.error("No response during registration:", error.request);
                 toast.error("Unable to connect to the server. Please try again later.");
             } else {
-                
+
                 console.error("Unexpected error during registration:", error.message);
                 toast.error("An unexpected error occurred. Please try again.");
             }
-            throw error; 
+            throw error;
         }
     };
-    
+
     return (
         <MainContext.Provider value={{
             loginUser,
             registerUser,
             token,
-            setToken
+            setToken,
+            isOtpSend
         }}>
             {children}
         </MainContext.Provider>
     )
 }
 
-export default MainContext
\ No newline at end of file
+export default MainContext
diff --git a/app/layout.js b/app/layout.js
index e70eb81..6e37196 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -12,6 +12,7 @@ export const metadata = {
   description: "Powered by Rudraksha",
 };
 
+
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
@@ -27,12 +28,12 @@ export default function RootLayout({ children }) {
 
         <ContextProvider>
           <CurrencyProvider>
-          <ProductContextProvider>
-            <NavigationWrapper />
-            {children}
-            <WrapperFooter />
-          </ProductContextProvider>
-        </CurrencyProvider>
+            <ProductContextProvider>
+              <NavigationWrapper />
+              {children}
+              <WrapperFooter />
+            </ProductContextProvider>
+          </CurrencyProvider>
         </ContextProvider>
       </body>
     </html>
diff --git a/app/page.js b/app/page.js
index 8798a34..6d1d754 100644
--- a/app/page.js
+++ b/app/page.js
@@ -4,16 +4,40 @@ import HeroSix from "@/components/hero-page/HeroSix";
 import SecondGallery from "@/components/product-category/SecondGallery";
 import BannerSlider from "@/components/sliders/BannerSlider";
 import SliderTwo from "@/components/sliders/SliderTwo";
+import { backendUrl, serAxios } from "@/utils/axios";
+import { guranteeData, categories } from "@/utils";
 
-export default function Home() {
+const getDashboardData = async () => {
+  // Fetch data from external API
+  try {
+    const res = await serAxios.get('/dynamic-ui/page/dashboard/')
+    const data = res.data
+    return data.data
+  } catch (error) {
+    return null
+  }
+  // Pass data to the page via props
+}
+export default async function Home({ page }) {
+  const data = await getDashboardData();
   return (
     <>
-      <Hero />
-      <HeroFour />
-      <HeroSix />
-      <BannerSlider />
+      <Hero data={data ? data.images.map((image) => ({
+        type: "image",
+        src: `${backendUrl}${image.path}`,
+      })) : null} />
+      <HeroFour data={data} />
+      <HeroSix data={data} guranteeData={data?.org_item?.map((item, index) => ({
+        id: index,
+        title: item.title,
+        imageUrl: `${backendUrl}${item.image?.path}`,
+      })) ?? guranteeData} />
+      <BannerSlider data={data} categories={data?.discover_item?.map((item) => ({
+        title: item.title,
+        image: `${backendUrl}${item.image?.path}`,
+      })) ?? categories} />
       <SliderTwo />
-      <SecondGallery />
+      <SecondGallery data={data} />
     </>
   );
 }
diff --git a/app/products/premium-rudraksha-consultation-astrology/page.jsx b/app/products/premium-rudraksha-consultation-astrology/page.jsx
index 4ed397f..d149cdd 100644
--- a/app/products/premium-rudraksha-consultation-astrology/page.jsx
+++ b/app/products/premium-rudraksha-consultation-astrology/page.jsx
@@ -1,26 +1,62 @@
-import PremiumBanner from '@/components/premium-rudraksha/PremiumBanner'
-import PremiumBannerLast from '@/components/premium-rudraksha/PremiumBannerLast'
-import PremiumBannerOne from '@/components/premium-rudraksha/PremiumBannerOne'
-import PremiumBannerTwo from '@/components/premium-rudraksha/PremiumBannerTwo'
-import PremuimBannerThree from '@/components/premium-rudraksha/PremuimBannerThree'
-import React from 'react'
+import PremiumBanner from "@/components/premium-rudraksha/PremiumBanner";
+import PremiumBannerLast from "@/components/premium-rudraksha/PremiumBannerLast";
+import PremiumBannerOne from "@/components/premium-rudraksha/PremiumBannerOne";
+import PremiumBannerTwo from "@/components/premium-rudraksha/PremiumBannerTwo";
+import PremuimBannerThree from "@/components/premium-rudraksha/PremuimBannerThree";
+import { categoriesForPremiumThree, services } from "@/utils";
+import { backendUrl, serAxios } from "@/utils/axios";
+import React from "react";
 
 export const metadata = {
   title: "Premium Rudraksha Consultation Astrology",
   description: "Generated by create next app",
 };
 
+const getConsultantPageData = async () => {
+  // Fetch data from external API
+  try {
+    const res = await serAxios.get("/dynamic-ui/page/consultation/");
+    const data = res.data;
+    return data.data;
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    return null;
+  }
+  // Pass data to the page via props
+};
 
-const Page = () => {
+async function Page() {
+  const data = await getConsultantPageData();
   return (
     <div>
-      <PremiumBanner />
-      <PremiumBannerOne />
-      <PremiumBannerTwo />
-      <PremuimBannerThree />
-      <PremiumBannerLast />
+      <PremiumBanner data={data} />
+      <PremiumBannerOne data={data} />
+      <PremiumBannerTwo data={data} />
+      <PremuimBannerThree
+        data={data}
+        categoriesForPremiumThree={
+          data?.consultation_reasons?.map((item, index) => ({
+            title: item.title,
+            description: item.description,
+            logo: (
+              <img src={`${backendUrl}${item.image?.path}`} alt={item.title} />
+            ),
+          })) ?? categoriesForPremiumThree
+        }
+      />
+      <PremiumBannerLast
+        services={data?.perks?.map((item) => ({
+          title: item.title,
+          description: item.description,
+          imageUrl: [
+            `${backendUrl}${item.image1?.path}`,
+            `${backendUrl}${item.image2?.path}`,
+          ],
+        }))}
+        data={data}
+      />
     </div>
-  )
+  );
 }
 
-export default Page
+export default Page;
diff --git a/components/hero-page/Hero.jsx b/components/hero-page/Hero.jsx
index d0fd4c3..0b89c13 100644
--- a/components/hero-page/Hero.jsx
+++ b/components/hero-page/Hero.jsx
@@ -14,7 +14,8 @@ import Autoplay from "embla-carousel-autoplay";
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
 
-const Hero = () => {
+const Hero = ({ data }) => {
+  console.log(data);
   const plugin = React.useRef(
     Autoplay({ delay: 4000, stopOnInteraction: true })
   );
@@ -32,7 +33,7 @@ const Hero = () => {
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
 
-  const heroData = [
+  const heroData = data || [
     {
       type: "image",
       src: "/rudraksh banner image 2.avif",
@@ -84,7 +85,6 @@ const Hero = () => {
                   className="object-cover brightness-75"
                   priority={index === 0}
                 />
-
               </div>
             </CarouselItem>
           ))}
diff --git a/components/hero-page/HeroFour.jsx b/components/hero-page/HeroFour.jsx
index 4222dc8..1feea95 100644
--- a/components/hero-page/HeroFour.jsx
+++ b/components/hero-page/HeroFour.jsx
@@ -1,20 +1,21 @@
 import React from "react";
 
-const HeroFour = () => {
+const HeroFour = ({ data }) => {
+  const { header1, description1, video_link1 } = data ?? {};
   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
+            {header1 ?? "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.
+            {description1 ??
+              "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"
+          src={`${video_link1 ?? "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"
diff --git a/components/hero-page/HeroSix.jsx b/components/hero-page/HeroSix.jsx
index 99baf08..7d373aa 100644
--- a/components/hero-page/HeroSix.jsx
+++ b/components/hero-page/HeroSix.jsx
@@ -1,10 +1,10 @@
-'use client'
-import { guranteeData } from "@/utils";
+"use client";
 import Image from "next/image";
 import React from "react";
 import { motion } from "framer-motion";
 
-const HeroSix = () => {
+const HeroSix = ({ guranteeData, data }) => {
+  const { heading2, description2 } = data | {};
   return (
     <section className="py-16 bg-gradient-to-b from-background to-muted">
       <div className="container px-4 mx-auto">
@@ -15,11 +15,11 @@ const HeroSix = () => {
           className="text-center mb-12"
         >
           <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
-            Our Sacred Commitment
+            {heading2 ?? "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
+            {description2 ??
+              "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">
diff --git a/components/premium-rudraksha/PremiumBanner.jsx b/components/premium-rudraksha/PremiumBanner.jsx
index 2bc29ad..07cd660 100644
--- a/components/premium-rudraksha/PremiumBanner.jsx
+++ b/components/premium-rudraksha/PremiumBanner.jsx
@@ -4,7 +4,15 @@ import { ChevronRight, Gem } from "lucide-react";
 import authAxios from "@/utils/axios";
 import Image from "next/image";
 
-const PremiumBanner = () => {
+const PremiumBanner = ({ data }) => {
+  const {
+    header1,
+    description1,
+    header_quote1,
+    header_quote2,
+    header_quote3,
+    header_quote4,
+  } = data || {};
   const [formData, setFormData] = useState({
     first_name: "",
     last_name: "",
@@ -118,31 +126,33 @@ const PremiumBanner = () => {
           {/* Right: Benefits & App Download */}
           <div className="p-14 flex flex-col justify-center">
             <h2 className="text-4xl font-serif text-[#AC8C6B] text-center">
-              Why Choose Our Consultation?
+              {header1 ?? "Why Choose Our Consultation?"}
             </h2>
             <p className="text-center text-gray-600 text-sm mt-2">
-              Gain expert insights and personalized guidance.
+              {description1 ??
+                "Gain expert insights and personalized guidance."}
             </p>
 
             <ul className="mt-6 space-y-4 text-gray-700 text-lg">
               <li className="flex items-center">
                 <ChevronRight className="text-[#AC8C6B] mr-2" />
-                Expert guidance from experienced professionals
+                {header_quote1 ??
+                  "Expert guidance from experienced professionals"}
               </li>
               <li className="flex items-center">
                 <ChevronRight className="text-[#AC8C6B] mr-2" />
-                Tailored advice for your specific needs
+                {header_quote2 ?? "Tailored advice for your specific needs"}
               </li>
               <li className="flex items-center">
                 <ChevronRight className="text-[#AC8C6B] mr-2" />
-                Unlock clarity and direction in life
+                {header_quote3 ?? "Unlock clarity and direction in life"}
               </li>
               <li className="flex items-center">
                 <ChevronRight className="text-[#AC8C6B] mr-2" />
-                Free initial text-based consultation
+                {header_quote3 ?? "Free initial text-based consultation"}
               </li>
             </ul>
-         </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/premium-rudraksha/PremiumBannerLast.jsx b/components/premium-rudraksha/PremiumBannerLast.jsx
index 34b3b52..067ba89 100644
--- a/components/premium-rudraksha/PremiumBannerLast.jsx
+++ b/components/premium-rudraksha/PremiumBannerLast.jsx
@@ -3,48 +3,10 @@ import React, { useState } from "react";
 import { ChevronRight } from "lucide-react";
 import Image from "next/image";
 
-const PremiumBannerLast = () => {
+const PremiumBannerLast = ({ data, services }) => {
+  const { header5 } = data || {};
   const [selectedService, setSelectedService] = useState(0);
 
-  const services = [
-    {
-      title: "Expert Guidance",
-      description:
-        "Consultation provides access to expert advice and guidance from professionals who have in-depth knowledge and experience in their respective fields. We can offer valuable insights, strategies, and solutions tailored to your specific needs.",
-      imageUrl: ["/expert_guidance_1.jpg", "/expert_guidance_2.jpg"],
-    },
-    {
-      title: "Mantras For You",
-      description:
-        "Rudraksha experts can recommend specific mantras that align with your spiritual goals and intentions. Mantras are considered powerful tools for spiritual growth, and the right mantra can enhance the effectiveness of your Rudraksha.",
-      imageUrl: ["/mantra_1.jpg", "/mantra_2.jpg"],
-    },
-    {
-      title: "Your Birth Chart",
-      description:
-        "Rudraksha experts may also have knowledge of Vedic astrology. By analyzing your birth chart, they can provide insights into the planetary influences on your life and suggest Rudraksha combinations that may help balance and harmonize these influences.",
-      imageUrl: ["/birth_chart_1.jpg", "/birth_chart2.jpg"],
-    },
-    {
-      title: "Your Family Birth Chart",
-      description:
-        "Understanding the birth charts of family members can offer a holistic view of the energy dynamics within the family. Rudraksha experts can provide guidance on selecting Rudraksha beads that complement the energy of the entire family, fostering a harmonious environment.",
-      imageUrl: ["/family_chart1.jpg", "/family_chart_2.jpg"],
-    },
-    {
-      title: "Pooja Service Recommendation",
-      description:
-        "Rudraksha experts may recommend specific pooja services or rituals based on your spiritual needs and challenges. These rituals can be tailored to address specific concerns and promote positive energy flow in your life.",
-      imageUrl: ["/pooja_1.jpg", "/pooja_2.jpg"],
-    },
-    {
-      title: "Client Confidentiality",
-      description:
-        "Rudraksha experts, like other spiritual and holistic practitioners, typically uphold a strong code of client confidentiality. This ensures that personal and sensitive information shared during consultations is kept private and secure.",
-      imageUrl: ["/confidentiality_1.jpg", "/client_confidentiality_2.jpg"],
-    },
-  ];
-
   const handleServiceClick = (index) => {
     setSelectedService(index);
   };
@@ -52,7 +14,7 @@ const PremiumBannerLast = () => {
   return (
     <div className="min-h-screen bg-slate-50 p-4">
       <h1 className="sm:text-5xl sm:mt-24 text-2xl font-serif text-center tracking-wide mb-12">
-        Perks of Consulting an Expert
+        {header5 ?? "Perks of Consulting an Expert"}
       </h1>
       <div className="grid sm:grid-cols-3 gap-8">
         <div className="flex flex-col gap-4 sm:pl-10">
@@ -97,8 +59,8 @@ const PremiumBannerLast = () => {
                       key={index}
                       src={url}
                       alt={`${services[selectedService].title} - ${index + 1}`}
-                      width={230} 
-                      height={350} 
+                      width={230}
+                      height={350}
                       className="sm:w-[230px] sm:h-[350px] w-[130px] h-[250px] object-cover"
                     />
                   ))}
diff --git a/components/premium-rudraksha/PremiumBannerOne.jsx b/components/premium-rudraksha/PremiumBannerOne.jsx
index 1d253fc..400591b 100644
--- a/components/premium-rudraksha/PremiumBannerOne.jsx
+++ b/components/premium-rudraksha/PremiumBannerOne.jsx
@@ -1,21 +1,36 @@
-'use client'
+"use client";
 import { FaArrowRightLong } from "react-icons/fa6";
 import { FaWhatsapp } from "react-icons/fa";
 import { useRouter } from "next/navigation";
 
-const PremiumBannerOne = () => {
-  const router = useRouter()
+const PremiumBannerOne = ({ data }) => {
+  const { header2, description2 } = data ?? {};
+  const router = useRouter();
   return (
     <div className="h-[65vh] bg-[url('/consultation_banner_1.webp')]  ">
       <div className="flex flex-col justify-start sm:w-3/4 p-4 sm:pl-52 sm:pt-28 ">
-      <h1 className="sm:text-5xl text-3xl sm:text-left text-center mb-5 tracking-wider sm:w-3/4 font-serif">Personalized Rudraksha Consultation for Your Sacred Journey</h1>
-      <h3 className="sm:text-xl sm:text-left text-center text-zinc-800 sm:w-3/4">Whether you seek clarity on selecting the right Rudraksha for your spiritual goals or a deeper understanding of the sacred beads, our consultations are crafted to provide you with the wisdom and direction you seek .</h3>
-      <div className="mt-6 flex gap-6 ">
-        <button onClick={()=> router.push('/products/premium-rudraksha-consultation-astrology')} className="bg-[#b68d40] sm:py-2 p-2 sm:px-5 font-bold text-white sm:text-xl justify-center sm:whitespace-nowrap flex items-center sm:gap-3">Book a consultation <FaArrowRightLong className="sm:my-3" size={26}/></button>
-      </div>
+        <h1 className="sm:text-5xl text-3xl sm:text-left text-center mb-5 tracking-wider sm:w-3/4 font-serif">
+          {header2 ??
+            "Personalized Rudraksha Consultation for Your Sacred Journey"}
+        </h1>
+        <h3 className="sm:text-xl sm:text-left text-center text-zinc-800 sm:w-3/4">
+          {description2 ??
+            "Whether you seek clarity on selecting the right Rudraksha for your spiritual goals or a deeper understanding of the sacred beads, our consultations are crafted to provide you with the wisdom and direction you seek ."}
+        </h3>
+        {/* <div className="mt-6 flex gap-6 ">
+          <button
+            onClick={() =>
+              router.push("/products/premium-rudraksha-consultation-astrology")
+            }
+            className="bg-[#b68d40] sm:py-2 p-2 sm:px-5 font-bold text-white sm:text-xl justify-center sm:whitespace-nowrap flex items-center sm:gap-3"
+          >
+            Book a consultation{" "}
+            <FaArrowRightLong className="sm:my-3" size={26} />
+          </button>
+        </div> */}
       </div>
     </div>
-  )
-}
+  );
+};
 
 export default PremiumBannerOne;
diff --git a/components/premium-rudraksha/PremiumBannerTwo.jsx b/components/premium-rudraksha/PremiumBannerTwo.jsx
index 5a907e3..f65f4ee 100644
--- a/components/premium-rudraksha/PremiumBannerTwo.jsx
+++ b/components/premium-rudraksha/PremiumBannerTwo.jsx
@@ -1,16 +1,17 @@
 import React from "react";
 
-const PremiumBannerTwo = () => {
+const PremiumBannerTwo = ({ data }) => {
+  const { header3, video_link1 } = data || {};
   return (
     <div className="min-h-[60vh] mx-auto">
       <h2 className="text-center sm:text-5xl mt-3  text-3xl font-serif sm:mt-16 tracking-wider mb-11">
-        Three Generations of Expertise
+        {header3 ?? "Three Generations of Expertise"}
       </h2>
       <iframe
         width="800"
         className="mx-auto sm:h-[350px] h-[160px]  mb-5 w-[300px] sm:w-[600px]"
         height="450"
-        src="https://www.youtube.com/embed/_drMO01Mjtc"
+        src={`${video_link1 ?? "https://www.youtube.com/embed/_drMO01Mjtc"}`}
         title="Everything you need to know about Rudraksh | Keerthi History with Sukritya from Gupta Rudraksha"
         frameBorder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
diff --git a/components/premium-rudraksha/PremuimBannerThree.jsx b/components/premium-rudraksha/PremuimBannerThree.jsx
index 94e984c..9e60053 100644
--- a/components/premium-rudraksha/PremuimBannerThree.jsx
+++ b/components/premium-rudraksha/PremuimBannerThree.jsx
@@ -1,26 +1,35 @@
-import { categoriesForPremiumThree } from '@/utils'
-import React from 'react'
+import React from "react";
 
-const PremuimBannerThree = () => {
+const PremuimBannerThree = ({ data, categoriesForPremiumThree }) => {
+  const { header4 } = data || {};
 
   return (
-    <div className='min-h-[75vh]'>
-       <h2 className="text-center sm:text-5xl mt-3 font-[500] text-zinc-800 text-3xl font-serif sm:pt-20 pt-7 tracking-wide mb-11">
-       Who Should Book A Consultation?
+    <div className="min-h-[75vh]">
+      <h2 className="text-center sm:text-5xl mt-3 font-[500] text-zinc-800 text-3xl font-serif sm:pt-20 pt-7 tracking-wide mb-11">
+        {header4 ?? "Who Should Book A Consultation?"}
       </h2>
       <div className="container mx-auto px-4">
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
-        {categoriesForPremiumThree.map((category, index) => (
-          <div key={index} className=" p-4 flex flex-col items-center text-center ">
-            <h2 className=' rounded-full h-20 w-20 bg-gradient-to-b from-[#E7DBC8] to-pink-50 flex items-center justify-center'>{category.logo}</h2>
-            <h3 className=" sm:text-lg text-sm font-semibold">{category.title}</h3>
-            <p className="mt-2 text-xs sm:text-[0.96rem] text-gray-600">{category.description}</p>
-          </div>
-        ))}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+          {categoriesForPremiumThree.map((category, index) => (
+            <div
+              key={index}
+              className=" p-4 flex flex-col items-center text-center "
+            >
+              <h2 className=" rounded-full h-20 w-20 bg-gradient-to-b from-[#E7DBC8] to-pink-50 flex items-center justify-center">
+                {category.logo}
+              </h2>
+              <h3 className=" sm:text-lg text-sm font-semibold">
+                {category.title}
+              </h3>
+              <p className="mt-2 text-xs sm:text-[0.96rem] text-gray-600">
+                {category.description}
+              </p>
+            </div>
+          ))}
+        </div>
       </div>
     </div>
-    </div>
-  )
-}
+  );
+};
 
-export default PremuimBannerThree
+export default PremuimBannerThree;
diff --git a/components/product-category/SecondGallery.jsx b/components/product-category/SecondGallery.jsx
index e2a4781..1f2dc22 100644
--- a/components/product-category/SecondGallery.jsx
+++ b/components/product-category/SecondGallery.jsx
@@ -1,13 +1,27 @@
 import React from "react";
 import Image from "next/image";
+import { backendUrl } from "@/utils/axios";
 
-const SecondGallery = () => {
+const SecondGallery = ({ data }) => {
+  const {
+    heading5,
+    heading6,
+    heading7,
+    heading8,
+    description5,
+    footer_image1,
+    footer_image2,
+  } = data || {};
   return (
     <div className="bg-[#f9f3f5c8] flex flex-col sm:flex-row justify-center items-center text-[#896C42] p-6 sm:p-12">
       {/* Left Image */}
       <div className="w-full sm:w-1/3 flex justify-center items-center p-4">
         <Image
-          src="/product_swami.jpeg"
+          src={`${
+            footer_image1
+              ? backendUrl + footer_image1.path
+              : "/product_swami.jpeg"
+          }`}
           alt="Gupta Rudraksha"
           width={300}
           height={300}
@@ -18,28 +32,28 @@ const SecondGallery = () => {
       {/* Right content */}
       <div className="w-full sm:w-1/3 flex flex-col justify-center items-center text-center p-4 sm:p-8">
         <h2 className="text-3xl sm:text-4xl mb-5 font-serif tracking-wide">
-          Nepal&#39;s 1st & only
+          {heading5 ?? "Nepal&#39;s 1st & only"}
           <span className="text-4xl sm:text-6xl block my-5 tracking-wider">
-            ISO Certified
+            {heading6 ?? "ISO Certified"}
           </span>
-          Rudraksha Organization
+          {heading7 ?? "Rudraksha Organization"}
         </h2>
         <p className="text-zinc-800 text-lg sm:text-xl mb-5 sm:w-3/4">
-          Explore the largest collection of authentic Gupta Rudraksha energized
-          as per our vedic process. For nearly 3+ generations Gupta Rudraksha
-          has been the pioneer of Rudraksha and Shaligram and has supported
-          millions of devotees attain spiritual and professional goals.
+          {description5 ??
+            "Explore the largest collection of authentic Gupta Rudraksha energized as per our vedic process. For nearly 3+ generations Gupta Rudraksha has been the pioneer of Rudraksha and Shaligram and has supported millions of devotees attain spiritual and professional goals."}
         </p>
         <h2 className="text-xl sm:text-2xl sm:w-3/4">
-          Gupta Rudraksha - The Only Vendor in the World To 100% Lifetime Money
-          Back Authenticity Guarantee.
+          {heading8 ??
+            "Gupta Rudraksha - The Only Vendor in the World To 100% Lifetime Money Back Authenticity Guarantee."}
         </h2>
       </div>
 
       {/* Right Image */}
       <div className="w-full sm:w-1/3 flex justify-center items-center p-4">
         <Image
-          src="/temple.jpeg"
+          src={`${
+            footer_image2 ? backendUrl + footer_image2.path : "/temple.jpeg"
+          }`}
           alt="Gupta Rudraksha Collection"
           width={300}
           height={300}
diff --git a/components/products/RelatedProductCards.jsx b/components/products/RelatedProductCards.jsx
index dade42d..04812dc 100644
--- a/components/products/RelatedProductCards.jsx
+++ b/components/products/RelatedProductCards.jsx
@@ -15,7 +15,9 @@ const RelatedProductCards = ({ productId }) => {
 
   const product = products?.find((pr) => pr.id == productId);
   const relatedProducts = products?.filter(
-    (prod) => prod.product_category.id == product.id && prod.id != productId
+    (prod) =>
+      prod.product_category.id == product.product_category.id &&
+      prod.id != productId
   );
 
   if (relatedProducts.length == 0) {
diff --git a/components/siddha-mala/categoryHero.jsx b/components/siddha-mala/categoryHero.jsx
index 55dd0df..dc6a1a1 100644
--- a/components/siddha-mala/categoryHero.jsx
+++ b/components/siddha-mala/categoryHero.jsx
@@ -5,6 +5,7 @@ import Image from "next/image";
 import { motion } from "framer-motion";
 import ProductContext from "@/app/contexts/productContext";
 import { Button } from "@/components/ui/button";
+import { backendUrl } from "@/utils/axios";
 
 const cleanHTML = (html) => {
   if (!html) return "";
@@ -15,6 +16,8 @@ const CategoryHero = ({ params }) => {
   const { category } = useContext(ProductContext);
   const selectedCategory = category?.find((cat) => cat.id == params.id);
 
+  console.log(selectedCategory);
+
   // Fallback values
   const fallbackImage = "/placeholder-image.jpg";
   const fallbackDescription =
@@ -25,7 +28,11 @@ const CategoryHero = ({ params }) => {
     <section className="relative h-[50vh] flex items-center justify-center overflow-hidden">
       <div className="absolute inset-0 z-0">
         <Image
-          src="/sidhi-mala/Artboard_1_bf5ccd46-7152-4355-82a8-9e9f27c1bfc2.jpg"
+          src={`${
+            selectedCategory?.image
+              ? backendUrl + selectedCategory?.image
+              : "/sidhi-mala/Artboard_1_bf5ccd46-7152-4355-82a8-9e9f27c1bfc2.jpg"
+          }`}
           alt="Category Background"
           layout="fill"
           objectFit="cover"
@@ -56,7 +63,6 @@ const CategoryHero = ({ params }) => {
             ),
           }}
         />
-
       </div>
     </section>
   );
diff --git a/components/sliders/BannerSlider.jsx b/components/sliders/BannerSlider.jsx
index 0be222a..a34f35b 100644
--- a/components/sliders/BannerSlider.jsx
+++ b/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"
diff --git a/package-lock.json b/package-lock.json
index c9c58a4..8809f07 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6577,11 +6577,10 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
-      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
+      "version": "5.7.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
+      "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
       "dev": true,
-      "license": "Apache-2.0",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
diff --git a/utils/axios.js b/utils/axios.js
index 66627e7..3b958cf 100644
--- a/utils/axios.js
+++ b/utils/axios.js
@@ -20,4 +20,10 @@ authAxios.interceptors.request.use(
   }
 );
 
+export const serAxios = axios.create({
+  baseURL: backendUrl,
+});
+
+
+
 export default authAxios;
diff --git a/utils/index.js b/utils/index.js
index c273408..27b8ac8 100644
--- a/utils/index.js
+++ b/utils/index.js
@@ -185,3 +185,50 @@ export const testimonials = [
     name: "Charlie Wilson",
   },
 ];
+
+
+export const categories = [
+  { title: "Spirituality", image: "/one-two.jpg" },
+  { title: "Meditation", image: "/gallery1.jpg" },
+  { title: "Wellness", image: "/pooja_image.webp" },
+];
+
+
+export const services = [
+  {
+    title: "Expert Guidance",
+    description:
+      "Consultation provides access to expert advice and guidance from professionals who have in-depth knowledge and experience in their respective fields. We can offer valuable insights, strategies, and solutions tailored to your specific needs.",
+    imageUrl: ["/expert_guidance_1.jpg", "/expert_guidance_2.jpg"],
+  },
+  {
+    title: "Mantras For You",
+    description:
+      "Rudraksha experts can recommend specific mantras that align with your spiritual goals and intentions. Mantras are considered powerful tools for spiritual growth, and the right mantra can enhance the effectiveness of your Rudraksha.",
+    imageUrl: ["/mantra_1.jpg", "/mantra_2.jpg"],
+  },
+  {
+    title: "Your Birth Chart",
+    description:
+      "Rudraksha experts may also have knowledge of Vedic astrology. By analyzing your birth chart, they can provide insights into the planetary influences on your life and suggest Rudraksha combinations that may help balance and harmonize these influences.",
+    imageUrl: ["/birth_chart_1.jpg", "/birth_chart2.jpg"],
+  },
+  {
+    title: "Your Family Birth Chart",
+    description:
+      "Understanding the birth charts of family members can offer a holistic view of the energy dynamics within the family. Rudraksha experts can provide guidance on selecting Rudraksha beads that complement the energy of the entire family, fostering a harmonious environment.",
+    imageUrl: ["/family_chart1.jpg", "/family_chart_2.jpg"],
+  },
+  {
+    title: "Pooja Service Recommendation",
+    description:
+      "Rudraksha experts may recommend specific pooja services or rituals based on your spiritual needs and challenges. These rituals can be tailored to address specific concerns and promote positive energy flow in your life.",
+    imageUrl: ["/pooja_1.jpg", "/pooja_2.jpg"],
+  },
+  {
+    title: "Client Confidentiality",
+    description:
+      "Rudraksha experts, like other spiritual and holistic practitioners, typically uphold a strong code of client confidentiality. This ensures that personal and sensitive information shared during consultations is kept private and secure.",
+    imageUrl: ["/confidentiality_1.jpg", "/client_confidentiality_2.jpg"],
+  },
+];