updated brands pages

components/Brands/AboutInfoBrands.js

@@ -2,21 +2,23 @@ import React from 'react'
 import { Col, Row } from 'react-bootstrap'
 import Heading from "@/components/Heading";
 import Image from 'next/image';
+import Link from 'next/link';
 
-const AboutInfoBrands = () => {
+const AboutInfoBrands = ({data}) => {
   return (
     <>
         <section className='about-section about-info-section'>
              <div className='container'>
               <Row className='text-center justify-content-center'>
                 <Col md={10}>
-                  <Heading el="h2" heading="Company" />
-                  <p className='mb-3 gray-text'>Valcucine has been standing out in the kitchen sector “Made in Italy” for over forty years, focusing on sustainability, wellbeing, innovation and timeless kitchens, that are made to last.</p>
+                  <Heading el="h2" heading={data?.title} />
+                  <div dangerouslySetInnerHTML={{__html: data?.description}}></div>
+                  {/* <p className='mb-3 gray-text'>Valcucine has been standing out in the kitchen sector “Made in Italy” for over forty years, focusing on sustainability, wellbeing, innovation and timeless kitchens, that are made to last.</p>
 
 <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"> <button className="btn4">Read More</button> </div> 
+<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> 
                 </Col>
               </Row>
              

components/Brands/CompanyOverview.js

@@ -2,118 +2,46 @@ import React from "react";
 import { Col, Row } from "react-bootstrap";
 import Heading from "@/components/Heading";
 import Image from "next/image";
+import { cleanImage } from "../services/imageHandling";
 
-const CompanyOverview = () => {
+const CompanyOverview = (data=[]) => {
+    const overviewData = Array.isArray(data)
+  ? data
+  : Array.isArray(data?.data)
+  ? data.data
+  : [];
   return (
     <>
       <section className="about-info-section company-overview-section">
         <div className="container">
-          <Row className="my-5">
-            <Col md={6}>
-              <div className="luxury-items">
-                <Image
-                  width={594}
-                  height={560}
-                  src="/image/brands-overviews/mission.png"
-                />
-                <div className="title">Mission and values</div>
-                <div className="info">
-                  We place people and their well-being at the heart of
-                  everything we do, creating timeless, handcrafted kitchens that
-                  bring joy to everyday life. Through innovative design, quality
-                  materials, and a deep commitment to sustainability, we
-                  transform cooking into an extraordinary experience while
-                  respecting our planet.
-                </div>
-              </div>
-            </Col>
-            <Col md={6}>
-              <div className="luxury-items option02">
-                <Image
-                  width={570}
-                  height={629}
-                  src="/image/brands-overviews/certification.png"
-                />
-                <div className="title">Certifications</div>
-                <div className="info">LEED, FSC, ISO 14001, F4 STARS</div>
-              </div>
-            </Col>
-            <Col md={6}>
-              <div className="luxury-items">
-                <Image
-                  width={594}
-                  height={629}
-                  src="/image/brands-overviews/awards.png"
-                />
-                <div className="title">Awards</div>
-                <div className="info">
-                  2025 Archello Product of the Year – Public vote – for New
-                  Logica 2025 Archiproducts Design Awards | Archigraphica + Vela
-                  Wall Unit 2025 iF Design Award | Architectural Scenarios 2025
-                  iF Design Award GOLD | Artematica + New Logica
-                </div>
-              </div>
-            </Col>
-            <Col md={6}>
-              <div className="luxury-items option02">
+       
+
+<Row className="my-5">
+  {overviewData.map((item, index) => {
+    const isAlt = index % 2 !== 0;
+
+    return (
+      <Col md={6} key={item?.id || index} className="mb-4">
+        <div className={`luxury-items ${isAlt ? "option02" : ""}`}>
           <Image
             width={594}
             height={560}
-                  src="/image/brands-overviews/symbol.png"
+            src={cleanImage(item?.image?.url)}
+            alt={item?.title}
           />
-                <div className="title">Symbol and Philosophy</div>
-                <div className="info">
-                  True well-being comes from living in harmony with our
-                  environment. This philosophy is reflected in our logo,
-                  inspired by an ancient symbol where the four petals represent
-                  Fire, Water, Earth, and Air united in balance. At the centre
-                  stands Man, symbolised by an unbroken circle, embodying
-                  harmony itself—echoing the timeless ideals of proportion and
-                  perfection seen in the Vitruvian Man.
-                </div>
-              </div>
-            </Col>
-            <Col md={6}>
-              <div className="luxury-items">
-                <Image
-                  width={594}
-                  height={629}
-                  src="/image/brands-overviews/esg.png"
-                />
-                <div className="title">
-                  Environmental, Social and Governance
-                </div>
-                <div className="info">
-                  We are committed to sustainable development through
-                  internationally recognized certifications and ESG principles
-                  aligned with the United Nations 2030 Agenda. By integrating
-                  environmental responsibility, social inclusion, and ethical
-                  governance into our operations, we promote transparency,
-                  protect natural resources, and foster a fair and responsible
-                  workplace. Our goal is continuous improvement toward a more
-                  sustainable and balanced future.
-                </div>
-              </div>
-            </Col>
-            <Col md={6}>
-              <div className="luxury-items option02">
-                <Image
-                  width={594}
-                  height={560}
-                  src="/image/brands-overviews/history.png"
+          <div className="title">{item?.title}</div>
+          <div
+            className="info"
+            dangerouslySetInnerHTML={{
+              __html: item?.description || "",
+            }}
           />
-                <div className="title">History</div>
-                <div className="info">
-                  We place people and their well-being at the heart of
-                  everything we do, creating timeless, handcrafted kitchens that
-                  bring joy to everyday life. Through innovative design, quality
-                  materials, and a deep commitment to sustainability, we
-                  transform cooking into an extraordinary experience while
-                  respecting our planet.
-                </div>
         </div>
       </Col>
-          </Row>
+    );
+  })}
+</Row>
+
         </div>
       </section>
     </>

components/Brands/InnerBannerBrands.js

@@ -3,8 +3,8 @@ import { Col, Row } from 'react-bootstrap'
 import { cleanImage } from '../services/imageHandling'
 import Heading from "@/components/Heading";
 import Image from 'next/image';
-const InnerBannerBrands = ({subCategoryData}) => {
-    console.log("bannerData", subCategoryData)
+const InnerBannerBrands = ({data}) => {
+    console.log("bannerData", data)
   return (
     <>
         <section className='innerbanner-section'>
@@ -12,10 +12,10 @@ const InnerBannerBrands = ({subCategoryData}) => {
                 <Row>
                     <Col>
                         <div className='product-banner'>
-                             <Image width={1920} height={948} src="/image/doors/valcucine.png" alt="" />
+                             <Image width={1920} height={948} src={cleanImage(data?.image?.url)} alt="" />
                              <div className='info'>
                                  <Heading el="h2" heading="Valcucine" />
-                                 <p>Our doors are more than entryways—they are crafted statements of design, blending timeless aesthetics with modern functionality. Each piece defines spaces with sophistication and enduring style.</p>
+                                 <div dangerouslySetInnerHTML={{__html: data?.description}}></div>
                              </div>
                         </div>
                     </Col>

pages/brands/[slug].js

+"use client";
+import AboutInfoBrands from "@/components/Brands/AboutInfoBrands";
+import CompanyOverview from "@/components/Brands/CompanyOverview";
+import InnerBannerBrands from "@/components/Brands/InnerBannerBrands";
+import Breadcrumb from "@/components/Common/Breadcrumb";
+import { Contact } from "@/container/Home/Contact";
+import { getBrandsBySlug } from "@/services/brandsApi";
+import Head from "next/head";
+
+export default function BrandDetailPage({ brandData }) {
+  console.log("brandData new", brandData)
+  const breadcrumbData = [
+    {
+      href: "/brands",
+      label: "Brands",
+    },
+    {
+      href: `/brands/${brandData?.slug}`,
+      label: brandData.banner?.title || brandData?.slug,
+    },
+  ];
+
+  return (
+    <>
+      <Head>
+        <title>{brandData.banner?.title}</title>
+      </Head>
+
+      <Breadcrumb breadcrumbData={breadcrumbData} />
+      <InnerBannerBrands data={brandData?.banner} />
+      <AboutInfoBrands data={brandData?.info} />
+      <CompanyOverview data={brandData?.companyOverview} />
+      <Contact />
+    </>
+  );
+}
+
+export async function getServerSideProps({ params }) {
+  try {
+    const { slug } = params;
+
+    const brandData = await getBrandsBySlug(slug);
+
+    if (!brandData) {
+      return { notFound: true };
+    }
+
+    return {
+      props: {
+        brandData,
+      },
+    };
+  } catch (error) {
+    return {
+      notFound: true,
+    };
+  }
+}

pages/brands/valcucine.js

-"use client";
-import AboutInfoBrands from "@/components/Brands/AboutInfoBrands";
-import CompanyOverview from "@/components/Brands/CompanyOverview";
-import InnerBannerBrands from "@/components/Brands/InnerBannerBrands";
-import Breadcrumb from "@/components/Common/Breadcrumb";
-import { Contact } from "@/container/Home/Contact";
-import Head from "next/head";
-  const bannerData = [
-    {
-      image: "/image/inner-banner/about.png",
-      title: "Banner",
-    }
-  ];
-  // console.log("bannerData113", bannerData)
-const breadcrumbData = [
-  {
-    href: "/",
-    label: "Brands"
-  },
-   {
-    href: "/",
-    label: "Valcucine"
-  },
-];
-const ValcucinePage = () => {
-  return (
-    <>
-      <Head>
-        <title>Akruti </title>
-        <meta name="description" content="Akruti" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <Breadcrumb breadcrumbData={breadcrumbData} />
-      <InnerBannerBrands />
-      <AboutInfoBrands />
-      <CompanyOverview />
-      <Contact/>
-    </>
-  );
-};
-export default ValcucinePage;

services/brandsApi.js

+import { fetchFromStrapi } from "./api";
+
+export async function getBrandsBySlug(slug) {
+  try {
+  const query = {
+  filters: {
+    slug: {
+      $eq: slug,
+    },
+  },
+  populate: {
+    banner: {
+      populate: {
+        image: true,
+      },
+    },
+    info: true,
+     companyOverview: {
+      populate: {
+        image: true,
+      },
+    },
+  },
+};
+
+
+
+    const response = await fetchFromStrapi("/api/brands", query);
+
+    // Return single brand
+    return response?.data?.[0] || null;
+  } catch (error) {
+    console.error("Brands fetch error:", error);
+    return null;
+  }
+}

styles/globals.css

@@ -197,6 +197,7 @@
   white-space: nowrap;
   display: inline-flex;
   align-items: center;
+  color: #000;
 }
 
 .btn4:hover {
@@ -780,6 +781,9 @@ aspect-ratio: 16 / 7;
 .about-info-section.company-overview-section .luxury-items .info {
   margin-top: 0.5rem;
 }
+.about-info-section.company-overview-section .luxury-items .info p{
+  margin-bottom: 0rem;
+}
 .about-info-section.company-overview-section .luxury-items {
   padding: 0rem 5rem 2rem 0rem;
 }