Initial Changes

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> */}
-            <h2 className="text-xl my-3">or</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"

app/contexts/mainContext.js

@@ -13,10 +13,11 @@ 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;
 
 
@@ -25,8 +26,8 @@ export const ContextProvider = ({ children }) => {
             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)
+            localStorage.setItem('token', response.data.token)
-            toast.success('Login Successful');
+            toast.success('Otp Sent Successfully');
             router.push('/')
 
             return response.data
@@ -54,7 +55,7 @@ export const ContextProvider = ({ children }) => {
             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('/')
 
@@ -82,7 +83,8 @@ export const ContextProvider = ({ children }) => {
             loginUser,
             registerUser,
             token,
-            setToken
+            setToken,
+            isOtpSend
         }}>
             {children}
         </MainContext.Provider>

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>
+            <ProductContextProvider>
-            <NavigationWrapper />
+              <NavigationWrapper />
-            {children}
+              {children}
-            <WrapperFooter />
+              <WrapperFooter />
-          </ProductContextProvider>
+            </ProductContextProvider>
-        </CurrencyProvider>
+          </CurrencyProvider>
         </ContextProvider>
       </body>
     </html>

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 />
+      <Hero data={data ? data.images.map((image) => ({
-      <HeroFour />
+        type: "image",
-      <HeroSix />
+        src: `${backendUrl}${image.path}`,
-      <BannerSlider />
+      })) : 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} />
     </>
   );
 }

app/products/premium-rudraksha-consultation-astrology/page.jsx

@@ -1,26 +1,62 @@
-import PremiumBanner from '@/components/premium-rudraksha/PremiumBanner'
+import PremiumBanner from "@/components/premium-rudraksha/PremiumBanner";
-import PremiumBannerLast from '@/components/premium-rudraksha/PremiumBannerLast'
+import PremiumBannerLast from "@/components/premium-rudraksha/PremiumBannerLast";
-import PremiumBannerOne from '@/components/premium-rudraksha/PremiumBannerOne'
+import PremiumBannerOne from "@/components/premium-rudraksha/PremiumBannerOne";
-import PremiumBannerTwo from '@/components/premium-rudraksha/PremiumBannerTwo'
+import PremiumBannerTwo from "@/components/premium-rudraksha/PremiumBannerTwo";
-import PremuimBannerThree from '@/components/premium-rudraksha/PremuimBannerThree'
+import PremuimBannerThree from "@/components/premium-rudraksha/PremuimBannerThree";
-import React from 'react'
+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 />
+      <PremiumBanner data={data} />
-      <PremiumBannerOne />
+      <PremiumBannerOne data={data} />
-      <PremiumBannerTwo />
+      <PremiumBannerTwo data={data} />
-      <PremuimBannerThree />
+      <PremuimBannerThree
-      <PremiumBannerLast />
+        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;

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>
           ))}

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
+            {description1 ??
-            us even more better.
+              "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"

components/hero-page/HeroSix.jsx

@@ -1,10 +1,10 @@
-'use client'
+"use client";
-import { guranteeData } from "@/utils";
 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
+            {description2 ??
-            Accredited Organization
+              "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">

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>

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">

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 PremiumBannerOne = ({ data }) => {
-  const router = useRouter()
+  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>
+        <h1 className="sm:text-5xl text-3xl sm:text-left text-center mb-5 tracking-wider sm:w-3/4 font-serif">
-      <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>
+          {header2 ??
-      <div className="mt-6 flex gap-6 ">
+            "Personalized Rudraksha Consultation for Your Sacred Journey"}
-        <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>
+        </h1>
-      </div>
+        <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;

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"

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]'>
+    <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">
+      <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?
+        {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">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
-        {categoriesForPremiumThree.map((category, index) => (
+          {categoriesForPremiumThree.map((category, index) => (
-          <div key={index} className=" p-4 flex flex-col items-center text-center ">
+            <div
-            <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>
+              key={index}
-            <h3 className=" sm:text-lg text-sm font-semibold">{category.title}</h3>
+              className=" p-4 flex flex-col items-center text-center "
-            <p className="mt-2 text-xs sm:text-[0.96rem] text-gray-600">{category.description}</p>
+            >
-          </div>
+              <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;

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
+          {description5 ??
-          as per our vedic process. For nearly 3+ generations Gupta Rudraksha
+            "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."}
-          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
+          {heading8 ??
-          Back Authenticity Guarantee.
+            "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}

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) {

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>
   );

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 = [
+const BannerSlider = ({ data, categories }) => {
-  { title: "Spirituality", image: "/one-two.jpg" },
+  const { heading3, heading4, description3 } = data || {};
-  { 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 */}
@@ -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
+              {description3 ??
-              Rudraksha beads.
+                "Unlock your potential with our expert-led consultations and sacred Rudraksha beads."}
             </p>
             <a
               href="#consultation"

package-lock.json

@@ -6577,11 +6577,10 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.6.2",
+      "version": "5.7.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
-      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
+      "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
       "dev": true,
-      "license": "Apache-2.0",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",

utils/axios.js

@@ -20,4 +20,10 @@ authAxios.interceptors.request.use(
   }
 );
 
+export const serAxios = axios.create({
+  baseURL: backendUrl,
+});
+
+
+
 export default authAxios;

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"],
+  },
+];