updated

components/Brands/AboutInfoBrands.js

@@ -18,7 +18,7 @@ const AboutInfoBrands = ({data}) => {
 <p className='mb-3 gray-text'>Each collection is designed with people in mind to create products that contribute to the wellness and needs of the user. The company has earned a reputation for its dedication to improving the ergonomics and the use of space. This has led to the Logica System, which was created in the 90s. The innovative and ergonomic system features an equipped back section, jumbo drawers and wall units with lift-up doors that makes it easier to work in the kitchen because everything is within hand’s reach. The special New Logica System and Air Logica System units were developed as an evolved version of the equipped back section and the wall units. These systems blend aesthetics with functionality and are able to contain and conceal, when necessary, all the equipment required in the kitchen. To further contribute to the daily comfort of consumers, Valcucine has also designed specific details such as the luminous panel; when fitted in special units, the panel contributes to giving the kitchen a more airy appeal.</p>
 
 <p className='mb-3 gray-text'>Moreover, Valcucine constantly carries out performance tests on harmful volatile substances, artificial radioactivity, and adheres to the strictest regulations on formaldehyde emissions. Valcucine is synonymous with innovation. It has revolutionised the kitchen space with numerous ground-breaking solutions. Valcucine changed the whole concept of kitchen doors with Artematica, the first door in the world with an aluminium frame that is invisible from the outside, plus a 5mm thick, aesthetic, HPL panel. The glass version, presented in 2006 with Invitrum base units, was the first-ever 100% recyclable kitchen.</p> */}
-<div className="my-5"> <Link href={data?.readMoreUrl} className="btn4">Read More</Link> </div> 
+<div className="my-5"> <Link href={data?.readMoreUrl || "#"} className="btn4">Read More</Link> </div> 
                 </Col>
               </Row>
              

container/Home/Collection.js

@@ -7,16 +7,18 @@ import { Autoplay, Navigation, Pagination } from "swiper/modules";
 import { Container, Row, Col } from "react-bootstrap";
 import FadeInStagger from "@/components/FadeInStagger";
 import Heading from "@/components/Heading";
+import { cleanImage } from "@/components/services/imageHandling";
 
-const CollectionData = [
-  { image: "/image/collection/01.png", title: "Kitchen" },
-  { image: "/image/collection/02.png", title: "Wardrobes" },
-  { image: "/image/collection/03.png", title: "Surface" },
-  { image: "/image/collection/04.png", title: "Doors" },
-  { image: "/image/collection/02.png", title: "Living Room" },
-];
+// const CollectionData = [
+//   { image: "/image/collection/01.png", title: "Kitchen" },
+//   { image: "/image/collection/02.png", title: "Wardrobes" },
+//   { image: "/image/collection/03.png", title: "Surface" },
+//   { image: "/image/collection/04.png", title: "Doors" },
+//   { image: "/image/collection/02.png", title: "Living Room" },
+// ];
 
-const CollectionSlider = () => {
+const CollectionSlider = ({CollectionData}) => {
+  console.log("CollectionData 123", CollectionData)
   return (
     <div className="collection-section sec_padd">
       <Container className="custom_container_leftAuto">
@@ -24,13 +26,12 @@ const CollectionSlider = () => {
         <Row className="align-items-center justify-content-md-between mb-4">
           <Col lg={8} md={8}>
            
-              <Heading el="h2" heading="COLLECTION" />
+              <Heading el="h2" heading={CollectionData?.title} />
               {/* <h2 className="heading mb-2">COLLECTION</h2> */}
                <FadeInStagger direction="up" stagger={0.3} once={true}>
-              <p className="mb-0 gray-text">
-                Our Exclusive Collections Blend Creativity, Comfort, And
-                Craftsmanship For Your Perfect Home.
-              </p>
+              <div className="mb-0 gray-text" dangerouslySetInnerHTML={{__html: CollectionData?.description}}>
+                
+              </div>
             </FadeInStagger>
           </Col>
           <Col lg={4} md={4} className="d-flex justify-content-md-end pe-5 mt-2">
@@ -131,11 +132,11 @@ const CollectionSlider = () => {
             1200: { slidesPerView: 3.7, spaceBetween: 25 },
           }}
         >
-          {CollectionData.map((item, index) => (
+          {CollectionData?.item?.map((item, index) => (
             <SwiperSlide key={index}>
               <div className="collection-card">
                 <img
-                  src={item.image}
+                  src={cleanImage(item?.image?.url)}
                   alt={item.title}
                   className="img-fluid rounded-lg hover-zooms"
                 />

container/Home/HomeBanner.js

@@ -5,35 +5,37 @@ import "swiper/css/navigation";
 import "swiper/css/pagination";
 import { Navigation, Pagination, Autoplay } from "swiper/modules";
 import SwiperBtn from "@/components/Layout/SwiperBtn";
+import { cleanImage } from "@/components/services/imageHandling";
+import Link from "next/link";
 
-const BannerData = [
-  {
-    desktopImage: "/image/banner/banner1.png",
-    mobileImage: "/image/banner/mb2.png",
-    title: "KITCHENS",
-    description:
-      "Transform your cooking space into a modern kitchen oasis. With sleek cabinetry and state-of-the-art appliances, you can create a functional yet stylish environment.",
-      url:""
-  },
-  {
-    desktopImage: "/image/banner/banner1.png",
-    mobileImage: "/image/banner/mb2.png",
-    title: "LIVING ROOMS",
-    description:
-      "Experience comfort and elegance in your living space. Designed with premium furniture and modern décor to elevate your lifestyle.",
-      url:""
-  },
-  {
-    desktopImage: "/image/banner/banner1.png",
-    mobileImage: "/image/banner/mb2.png",
-    title: "BEDROOMS",
-    description:
-      "Create your dream retreat with cozy and stylish bedroom designs. A perfect balance of comfort, elegance, and tranquility.",
-      url:""
-  },
-];
+// const BannerData = [
+//   {
+//     desktopImage: "/image/banner/banner1.png",
+//     mobileImage: "/image/banner/mb2.png",
+//     title: "KITCHENS",
+//     description:
+//       "Transform your cooking space into a modern kitchen oasis. With sleek cabinetry and state-of-the-art appliances, you can create a functional yet stylish environment.",
+//       url:""
+//   },
+//   {
+//     desktopImage: "/image/banner/banner1.png",
+//     mobileImage: "/image/banner/mb2.png",
+//     title: "LIVING ROOMS",
+//     description:
+//       "Experience comfort and elegance in your living space. Designed with premium furniture and modern décor to elevate your lifestyle.",
+//       url:""
+//   },
+//   {
+//     desktopImage: "/image/banner/banner1.png",
+//     mobileImage: "/image/banner/mb2.png",
+//     title: "BEDROOMS",
+//     description:
+//       "Create your dream retreat with cozy and stylish bedroom designs. A perfect balance of comfort, elegance, and tranquility.",
+//       url:""
+//   },
+// ];
 
-const HomeBanner = () => {
+const HomeBanner = ({banner}) => {
   const [isMobile, setIsMobile] = useState(false);
 
   // Detect screen width
@@ -60,11 +62,11 @@ const HomeBanner = () => {
         <SwiperBtn />
       </div>
 
-      {BannerData.map((item, index) => (
+      {banner?.map((item, index) => (
         <SwiperSlide key={index}>
           <div className="slide-container">
             <img
-              src={isMobile ? item.mobileImage : item.desktopImage}
+              src={cleanImage(isMobile ? item?.mobileBanner?.url : item.desktopBanner?.url)}
               alt={item.title}
               className="slide-bg"
             />
@@ -72,8 +74,8 @@ const HomeBanner = () => {
               <div className="slide-content">
                 <h2>{item.title}</h2>
                 <div className="text-btn-row">
-                  <p>{item.description}</p>
-                  <button className="btn1">Explore More <i className="fa-solid fa-arrow-right"></i></button>
+                  <div dangerouslySetInnerHTML={{__html:item?.description}}></div>
+                  <Link href={item?.url || "#"} className="btn1">Explore More <i className="fa-solid fa-arrow-right"></i></Link>
                 </div>
               </div>
             </div>

container/Home/Overview.js

 import FadeInStagger from "@/components/FadeInStagger";
 import Heading from "@/components/Heading";
+import { cleanImage } from "@/components/services/imageHandling";
 import Image from "next/image";
+import Link from "next/link";
 import React from "react";
 import { Col, Container, Row } from "react-bootstrap";
 
-const Overview = () => {
+const Overview = ({aboutData}) => {
   return (
     <section className="overview_sec sec_padd ">
       <Container className="custom_container">
         {/* Make row full height and align items center */}
         <Row className="align-items-center">
           <Col md={7} className="d-flex flex-column justify-content-center">
-            <Heading el="h2" heading="About" />
+            <Heading el="h2" heading={aboutData?.title} />
             <FadeInStagger direction="left">
               {/* <h2 className="heading mb-2">About</h2> */}
-              <p className="gray-text">At Akruti Luxe, every space begins with a story.</p>
-              <p className="gray-text">a story of aspiration, design, and purpose. With extensive experience in luxury interiors, we’ve mastered the art of creating bespoke modular kitchens and wardrobes that blend beauty, innovation, and practicality. Our design philosophy is built on thoughtful detailing, precise craftsmanship, and an unwavering commitment to quality.</p>
-              <p className="gray-text">In collaboration with the renowned Italian brands Valcucine and Rimadesio, we bring the finest global design sensibilities to Indian homes. Each project is a curated experience from the first conversation to the final installation, shaped around our clients’ lifestyles and aspirations. At Akruti Luxe, we go beyond creating interiors; we craft experiences that reflect individuality, celebrate timeless aesthetics, and elevate everyday living.</p>
+              <div dangerouslySetInnerHTML={{__html: aboutData?.description}}></div>
+             
                
-               <div className="my-5"> <button className="btn4">Read More <i className="fa-solid fa-arrow-right"></i></button> </div>
+               <div className="my-5"> <Link href={aboutData?.readMoreUrl || "#"} className="btn4">Read More <i className="fa-solid fa-arrow-right"></i></Link> </div>
         
             </FadeInStagger>
           </Col>
 
           <Col md={5} className="d-flex justify-content-center">
             <div className="video-wrapper">
-              <video src="/video/about.mp4" autoPlay muted loop playsInline />
+              <video src={cleanImage(aboutData?.Video?.url)} autoPlay muted loop playsInline />
               {/* <Image
                 src="/video/about.mp4"
                 alt="About"

container/Home/ProjectSlider.js

@@ -8,15 +8,16 @@ import { Container, Row, Col } from "react-bootstrap";
 import FadeInStagger from "@/components/FadeInStagger";
 import Heading from "@/components/Heading";
 import { cleanImage } from "@/components/services/imageHandling";
+import Link from "next/link";
 
-const CollectionData = [
-  { image: "/image/project/01.png", title: "The Imperial – Mumbai" },
-  { image: "/image/project/02.png", title: "Azure Heights – Bengaluru" },
-  { image: "/image/project/01.png", title: "The Imperial – Mumbai" },
-  { image: "/image/project/02.png", title: "Azure Heights – Bengaluru" },
-];
-console.log("CollectionData - new", CollectionData)
-const ProjectSlider = () => {
+// const CollectionData = [
+//   { image: "/image/project/01.png", title: "The Imperial – Mumbai" },
+//   { image: "/image/project/02.png", title: "Azure Heights – Bengaluru" },
+//   { image: "/image/project/01.png", title: "The Imperial – Mumbai" },
+//   { image: "/image/project/02.png", title: "Azure Heights – Bengaluru" },
+// ];
+// console.log("CollectionData - new", CollectionData)
+const ProjectSlider = ({projectData}) => {
   const prevRef = useRef(null);
   const nextRef = useRef(null);
 
@@ -27,14 +28,9 @@ const ProjectSlider = () => {
         <Row className="text-md-center mb-4">
           <Col lg={12} md={12}>
             <FadeInStagger direction="top">
-              <Heading el="h2" heading="Projects" />
+              <Heading el="h2" heading={projectData?.title} />
             {/* <h2 className="heading mb-2">Projects</h2> */}
-            <p className="mb-0 gray-text">
-             Over the years, Akruti Lux Contract has carried out hundreds of projects 
-            </p>
-             <p className="mb-0 gray-text">
-             in different sectors all over the world.
-            </p>
+           <div dangerouslySetInnerHTML={{__html:projectData?.description}}></div>
             </FadeInStagger>
           </Col>
         </Row>
@@ -60,11 +56,11 @@ const ProjectSlider = () => {
             1200: { slidesPerView: 1.5, spaceBetween: 30 },
           }}
         >
-          {CollectionData.map((item, index) => (
+          {projectData?.items?.map((item, index) => (
             <SwiperSlide key={index}>
               <div className="project-card">
                 <img
-                  src={item?.image}
+                  src={cleanImage(item?.image?.url)}
                   alt={item.title}
                   className="img-fluid rounded-lg hover-zoom"
                 />
@@ -141,7 +137,9 @@ const ProjectSlider = () => {
               </button>
             </div> */}
         <Row className="">
-          <Col className="d-flex justify-content-center" ><button className="btn3">View More <i className="fa-solid fa-arrow-right"></i></button></Col>
+          <Col className="d-flex justify-content-center" >
+          <Link href={projectData?.viewMoreUrl || "#"} className="btn3">View More <i className="fa-solid fa-arrow-right"></i></Link>
+          </Col>
         </Row>
       </Container>
 

container/Home/Video.js

+import { cleanImage } from "@/components/services/imageHandling";
 import React, { useRef, useEffect, useState } from "react";
 import { Container } from "react-bootstrap";
 
-const Video = () => {
+const Video = ({video}) => {
+  console.log("video9999" ,video)
   const videoRef = useRef(null);
   const [isVisible, setIsVisible] = useState(false);
 
@@ -31,7 +33,7 @@ const Video = () => {
           playsInline
           className={`w-100 video-animate ${isVisible ? "video-visible" : ""}`}
         >
-          <source src="/image/dummy.mp4" type="video/mp4" />
+          <source src={cleanImage(video?.video?.url)} type="video/mp4" />
           Your browser does not support the video tag.
         </video>
       </div>

pages/index.js

@@ -9,8 +9,10 @@ import { Contact } from "@/container/Home/Contact";
 import BlogHome from "@/container/Home/BlogHome";
 import Catalogues from "@/container/Home/Catalogues";
 import { getCataloguesBySlug } from "@/services/cataloguesApi";
+import { getHomeSlug } from "@/services/homeApi";
 
-const Home = ({ homepage, cataloguesData={cataloguesData} }) => {
+const Home = ({ homepage, cataloguesData={cataloguesData}, homeData }) => {
+  console.log("homeData", homeData)
   return (
     <>
       <Head>
@@ -19,11 +21,11 @@ const Home = ({ homepage, cataloguesData={cataloguesData} }) => {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <HomeBanner />
-      <CollectionSlider />
-      <Video />
-      <Overview />
-      <ProjectSlider />
+      <HomeBanner banner={homeData?.banner} />
+      <CollectionSlider CollectionData={homeData?.collection} />
+      <Video video={homeData?.video} />
+      <Overview aboutData={homeData?.about} />
+      <ProjectSlider projectData={homeData?.project} />
       <BlogHome />
       <Catalogues cataloguesData={cataloguesData} />
       <Contact />
@@ -36,10 +38,12 @@ export default Home;
 export async function getServerSideProps({ params }) {
   try {
     const cataloguesData = await getCataloguesBySlug();
+    const homeData = await getHomeSlug();
 
     return {
       props: {
         cataloguesData,
+        homeData
       },
     };
   } catch (error) {

services/homeApi.js

+import { fetchFromStrapi } from "./api";
+
+export async function getHomeSlug() {
+  try {
+    const query = {
+      populate: {
+        banner: {
+          populate:{
+            desktopBanner:true,
+            mobileBanner:true
+          }
+        },
+        collection: {
+          populate: {
+            item: {
+              populate: {
+                image:true
+              }
+            }
+          }
+        },
+        video: {
+          populate: {
+            video:true
+          }
+        },
+        about: {
+          populate:{
+            Video:true
+          }
+        },
+        project: {
+          populate : {
+            items: {
+              populate:{
+                image:true
+              }
+            }
+          }
+        },
+      },
+    
+    // populate:'*',
+};
+    const response = await fetchFromStrapi(
+      "/api/home",
+      query
+    );
+
+    // return single category
+    return response?.data || [];
+  } catch (error) {
+    console.error("Home fetch error:", error);
+    return null;
+  }
+}