Skip to content

sujata / Akruti-Frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 73297b7f by Ravindra Kanojiya
Options

updated pages

1 parent ed0e8671
Inline Side-by-side
Showing 33 changed files with 366 additions and 332 deletions
components/Collection/AboutInfo.js
...@@ -33,7 +33,6 @@ function splitAfterParagraphs(html = "", count = 2) { ...@@ -33,7 +33,6 @@ function splitAfterParagraphs(html = "", count = 2) {
} }
const AboutInfo = ({ productData }) => { const AboutInfo = ({ productData }) => {
console.log("productData-333", productData)
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
const { preview, rest } = splitAfterParagraphs(productData?.description, 2); const { preview, rest } = splitAfterParagraphs(productData?.description, 2);
......
components/Collection/CompanyOverview.js
...@@ -5,14 +5,14 @@ import Image from "next/image"; ...@@ -5,14 +5,14 @@ import Image from "next/image";
import { cleanImage } from "../services/imageHandling"; import { cleanImage } from "../services/imageHandling";
const CompanyOverview = ({ companyOverviewData }) => { const CompanyOverview = ({ companyOverviewData }) => {
console.log(companyOverviewData,"companyOverviewData")
return ( return (
<> <>
<section className="about-section about-info-section p-0"> <section className="about-section about-info-section p-0">
<div className="container"> <div className="container">
<Row className="my-5"> <Row className="my-5">
{companyOverviewData?.map((item, index) => ( {companyOverviewData?.map((item, index) => (
<Col md={6} key={item.id || index}> <Col md={6} key={item?.id || index}>
<div <div
className={`luxury-items ${ className={`luxury-items ${
index % 2 !== 0 ? "option02" : "" index % 2 !== 0 ? "option02" : ""
......
components/Collection/Explore.js
...@@ -62,12 +62,12 @@ const Explore = ({productData}) => { ...@@ -62,12 +62,12 @@ const Explore = ({productData}) => {
<SwiperSlide key={index}> <SwiperSlide key={index}>
<div className="collections-item"> <div className="collections-item">
<Link href={`/collections/${item.slug}`} className="d-block"> <Link href={`/collections/${item?.slug}`} className="d-block">
<Image <Image
src={cleanImage(item.image.url)} src={cleanImage(item?.image?.url)}
width={868} width={868}
height={560} height={560}
alt={item.name} alt={item?.name}
className="img-fluid" className="img-fluid"
/> />
<div className="title">{item?.title}</div> <div className="title">{item?.title}</div>
......
components/Collection/Gallery.js
...@@ -15,7 +15,6 @@ const galleryData = [ ...@@ -15,7 +15,6 @@ const galleryData = [
]; ];
const Gallery = ({ productData }) => { const Gallery = ({ productData }) => {
console.log(productData,"productData-gallery")
useEffect(() => { useEffect(() => {
Fancybox.bind("[data-fancybox='gallery']", { Fancybox.bind("[data-fancybox='gallery']", {
...@@ -43,8 +42,8 @@ const Gallery = ({ productData }) => { ...@@ -43,8 +42,8 @@ const Gallery = ({ productData }) => {
return ( return (
<Col <Col
key={item.id} key={item?.id}
xs={6} // xs={6}
xs={isFullWidth ? 12 : 6} xs={isFullWidth ? 12 : 6}
className="mb-4" className="mb-4"
> >
...@@ -55,7 +54,7 @@ const Gallery = ({ productData }) => { ...@@ -55,7 +54,7 @@ const Gallery = ({ productData }) => {
> >
<Image <Image
src={cleanImage(item?.image?.url)} src={cleanImage(item?.image?.url)}
alt={`Gallery image ${item.id}`} alt={`Gallery image ${item?.id}`}
fill fill
className="gallery-image" className="gallery-image"
/> />
......
components/Collection/InnerBannerproduct.js
...@@ -10,7 +10,6 @@ import Image from "next/image"; ...@@ -10,7 +10,6 @@ import Image from "next/image";
import React from "react"; import React from "react";
const InnerBannerproduct = ({ productData }) => { const InnerBannerproduct = ({ productData }) => {
console.log("productData", productData)
return ( return (
<> <>
<section className="innerbanner-section"> <section className="innerbanner-section">
......
components/Collection/InnerDetails.js
...@@ -6,8 +6,6 @@ import { useRouter } from "next/router"; ...@@ -6,8 +6,6 @@ import { useRouter } from "next/router";
import { cleanImage } from "../services/imageHandling"; import { cleanImage } from "../services/imageHandling";
const InnerDetails = ({ subCategories }) => { const InnerDetails = ({ subCategories }) => {
console.log("subCategories", subCategories)
const router = useRouter(); const router = useRouter();
const { category } = router.query; const { category } = router.query;
......
components/Collection/InnerDetailsSubCategory.js
...@@ -7,10 +7,9 @@ import FilterButton from "../Common/FilterButton"; ...@@ -7,10 +7,9 @@ import FilterButton from "../Common/FilterButton";
import { cleanImage } from "../services/imageHandling"; import { cleanImage } from "../services/imageHandling";
const InnerDetailsSubCategory = ({ products }) => { const InnerDetailsSubCategory = ({ products }) => {
console.log("products 123", products)
const router = useRouter(); const router = useRouter();
const { category, subCategory } = router.query; const { category, subCategory } = router.query;
const [showFilter, setShowFilter] = useState(false); const [showFilter, setShowFilter] = useState(false);
const [sort, setSort] = useState(""); const [sort, setSort] = useState("");
if (!products || !category || !subCategory) return null; if (!products || !category || !subCategory) return null;
...@@ -26,11 +25,11 @@ const [showFilter, setShowFilter] = useState(false); ...@@ -26,11 +25,11 @@ const [showFilter, setShowFilter] = useState(false);
// return 0; // return 0;
// }); // });
const sortedSubCategories = [...products].sort((a, b) => { const sortedSubCategories = [...products].sort((a, b) => {
if (sort === "name-asc") return a.title.localeCompare(b.title); if (sort === "name-asc") return a.title.localeCompare(b.title);
if (sort === "name-desc") return b.title.localeCompare(a.title); if (sort === "name-desc") return b.title.localeCompare(a.title);
// Default: sort by rank // Default: sort by rank
return (Number(a.rank) || 999) - (Number(b.rank) || 999); return (Number(a.rank) || 999) - (Number(b.rank) || 999);
}); });
return ( return (
<section className="collection-m-section sec_padd"> <section className="collection-m-section sec_padd">
<div className="custom_container container"> <div className="custom_container container">
...@@ -47,12 +46,12 @@ const [showFilter, setShowFilter] = useState(false); ...@@ -47,12 +46,12 @@ const [showFilter, setShowFilter] = useState(false);
</Col> </Col>
<Col xs={6} className="d-flex justify-content-end"> <Col xs={6} className="d-flex justify-content-end">
<> <>
{/* <FilterButton {/* <FilterButton
onClick={() => setShowFilter(true)} onClick={() => setShowFilter(true)}
/> */} /> */}
{/* {showFilter && ( {/* {showFilter && (
<div className="filter-panel"> <div className="filter-panel">
Filter Content Here Filter Content Here
<button <button
...@@ -61,7 +60,7 @@ const [showFilter, setShowFilter] = useState(false); ...@@ -61,7 +60,7 @@ const [showFilter, setShowFilter] = useState(false);
Close</button> Close</button>
</div> </div>
)} */} )} */}
</> </>
<select <select
className="sortby-select" className="sortby-select"
...@@ -78,19 +77,19 @@ const [showFilter, setShowFilter] = useState(false); ...@@ -78,19 +77,19 @@ const [showFilter, setShowFilter] = useState(false);
{/* Products */} {/* Products */}
<Row> <Row>
{sortedSubCategories.map((product) => ( {sortedSubCategories.map((product) => (
<Col md={6} key={product.productSlug}> <Col md={6} key={product?.productSlug}>
<div className="collections-item"> <div className="collections-item">
<Link <Link
href={`/collections/${category}/${subCategory}/${product.slug}`} href={`/collections/${category}/${subCategory}/${product?.slug}`}
> >
<Image <Image
width={868} width={868}
height={560} height={560}
src={cleanImage(product?.image?.[0]?.url)} src={cleanImage(product?.image?.[0]?.url)}
alt={product.title} alt={product?.title}
/> />
<div className="title">{product.title}</div> <div className="title">{product?.title}</div>
</Link> </Link>
</div> </div>
</Col> </Col>
......
components/Collection/TechnicalDetails.js
...@@ -45,7 +45,7 @@ const technicalDetailsData = [ ...@@ -45,7 +45,7 @@ const technicalDetailsData = [
id: "2", id: "2",
title: "WORKTOPS", title: "WORKTOPS",
image: "/image/technical-details/01.png", image: "/image/technical-details/01.png",
details: [ details: [
{ {
label: "Characteristics", label: "Characteristics",
value: value:
...@@ -81,7 +81,7 @@ const technicalDetailsData = [ ...@@ -81,7 +81,7 @@ const technicalDetailsData = [
id: "4", id: "4",
title: "FRONT FINISHES", title: "FRONT FINISHES",
image: "/image/technical-details/01.png", image: "/image/technical-details/01.png",
details: [ details: [
{ {
label: "Characteristics", label: "Characteristics",
value: value:
...@@ -97,8 +97,8 @@ const technicalDetailsData = [ ...@@ -97,8 +97,8 @@ const technicalDetailsData = [
}, },
]; ];
const TechnicalDetails = ({productData}) => { const TechnicalDetails = ({ productData }) => {
return ( return (
<> <>
<section className="technicalDetails-section catalogues-secs sec_padd collection-section"> <section className="technicalDetails-section catalogues-secs sec_padd collection-section">
...@@ -111,43 +111,43 @@ const TechnicalDetails = ({productData}) => { ...@@ -111,43 +111,43 @@ const TechnicalDetails = ({productData}) => {
<Row> <Row>
<Col> <Col>
<div className="accordion01"> <div className="accordion01">
<Accordion defaultActiveKey={productData?.[0]?.id?.toString()}> <Accordion defaultActiveKey={productData?.[0]?.id?.toString()}>
{productData?.map((item) => ( {productData?.map((item) => (
<Accordion.Item <Accordion.Item
eventKey={item.id.toString()} eventKey={item?.id?.toString()}
key={item.id} key={item?.id}
> >
<Accordion.Header>{item.title}</Accordion.Header> <Accordion.Header>{item?.title}</Accordion.Header>
<Accordion.Body> <Accordion.Body>
<Row> <Row>
<Col md={5}> <Col md={5}>
<div className="image"> <div className="image">
<Image <Image
src={cleanImage(item?.image?.url)} src={cleanImage(item?.image?.url)}
alt={item.title} alt={item?.title}
width={743} width={743}
height={500} height={500}
/> />
</div> </div>
</Col> </Col>
<Col md={7}> <Col md={7}>
{item?.details?.map((detail, index) => ( {item?.details?.map((detail, index) => (
<div className="item" key={index}> <div className="item" key={index}>
<div className="title">{detail?.label}</div> <div className="title">{detail?.label}</div>
<div <div
className="info" className="info"
dangerouslySetInnerHTML={{ __html: detail?.value }} dangerouslySetInnerHTML={{ __html: detail?.value }}
/> />
</div> </div>
))} ))}
</Col> </Col>
</Row> </Row>
</Accordion.Body> </Accordion.Body>
</Accordion.Item> </Accordion.Item>
))} ))}
</Accordion> </Accordion>
</div> </div>
</Col> </Col>
</Row> </Row>
......
components/Collection/Video.js
...@@ -7,19 +7,15 @@ const Video = ({ productData }) => { ...@@ -7,19 +7,15 @@ const Video = ({ productData }) => {
const media = productData?.video; const media = productData?.video;
// ✅ 1. Hide component if no video
if (!media?.url) return null;
useEffect(() => { useEffect(() => {
// ✅ 2. Guard for SSR (Next.js safety) // ✅ Guard for missing video OR SSR
if (typeof window === "undefined") return; if (!media?.url || typeof window === "undefined") return;
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
([entry]) => { ([entry]) => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
setIsVisible(true); setIsVisible(true);
// ✅ Stop observing after first trigger
if (videoRef.current) { if (videoRef.current) {
observer.unobserve(videoRef.current); observer.unobserve(videoRef.current);
} }
...@@ -37,7 +33,10 @@ const Video = ({ productData }) => { ...@@ -37,7 +33,10 @@ const Video = ({ productData }) => {
observer.unobserve(videoRef.current); observer.unobserve(videoRef.current);
} }
}; };
}, []); }, [media?.url]); // ✅ dependency added (important)
// ✅ AFTER hooks → safe
if (!media?.url) return null;
return ( return (
<section className="video_sec"> <section className="video_sec">
...@@ -53,8 +52,8 @@ const Video = ({ productData }) => { ...@@ -53,8 +52,8 @@ const Video = ({ productData }) => {
}`} }`}
> >
<source <source
src={cleanImage(media.url)} src={cleanImage(media?.url)}
type={media.mime || "video/mp4"} type={media?.mime || "video/mp4"}
/> />
Your browser does not support the video tag. Your browser does not support the video tag.
</video> </video>
......
components/Common/Breadcrumb.js
...@@ -11,14 +11,14 @@ const Breadcrumb = ({breadcrumbData}) => { ...@@ -11,14 +11,14 @@ const Breadcrumb = ({breadcrumbData}) => {
<div className='col-12'> <div className='col-12'>
<nav aria-label="Breadcrumb" className="breadcrumb" role="navigation"> <nav aria-label="Breadcrumb" className="breadcrumb" role="navigation">
<ol> <ol>
{breadcrumbData.map((it, idx) => { {breadcrumbData?.map((it, idx) => {
const isLast = idx === breadcrumbData?.length - 1; const isLast = idx === breadcrumbData?.length - 1;
return ( return (
<li key={idx} className="breadcrumb-item"> <li key={idx} className="breadcrumb-item">
{isLast || !it.href ? ( {isLast || !it?.href ? (
<span>{it.label}</span> <span>{it?.label}</span>
) : ( ) : (
<Link href={it.href}>{it.label}</Link> <Link href={it?.href}>{it?.label}</Link>
)} )}
{/* slash separator */} {/* slash separator */}
......
components/Inalco/AboutInfoBrands.js
...@@ -4,18 +4,16 @@ import Heading from "@/components/Heading"; ...@@ -4,18 +4,16 @@ import Heading from "@/components/Heading";
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
const AboutInfoBrands = () => { const AboutInfoBrands = ({infoData}) => {
return ( return (
<> <>
<section className='about-section about-info-section'> <section className='about-section about-info-section'>
<div className='container'> <div className='container'>
<Row className='text-center justify-content-center'> <Row className='text-center justify-content-center'>
<Col md={10}> <Col md={10}>
<Heading el="h2" heading="THE STYLE-IN CONCEPT DEFINES OUR IDENTITY" /> <Heading el="h2" heading={infoData?.title} isHtml={true} />
<p className=''>INALCO'S OWN STYLE BASED ON THE CONCEPT OF EXCELLENCE</p> <div className='' dangerouslySetInnerHTML={{ __html: infoData?.description }}></div>
<p className=''>Our mission is to provoke change through global leadership in innovation, creating new solutions and technological and fashion trends to conquer the future, generating the greatest differentiation and maximum added value for our partners.</p>
<p className=''> Through sustainable innovation, we strive for excellence every day.</p>
</Col> </Col>
</Row> </Row>
......
components/Inalco/CompanyOverview.js
...@@ -3,33 +3,12 @@ import { Col, Row } from "react-bootstrap"; ...@@ -3,33 +3,12 @@ import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading"; import Heading from "@/components/Heading";
import Image from "next/image"; import Image from "next/image";
import { cleanImage } from "../services/imageHandling"; import { cleanImage } from "../services/imageHandling";
const overviewData =[
{ const CompanyOverview = ({companyOverviewData}) => {
title:"ETHICS",
image:"/image/brands/inalco/our-principles/01.png"
},
{
title:`SUSTAINABLE INNOVATION & </br> CREATIVITY`,
image:"/image/brands/inalco/our-principles/02.png"
},
{
title:`EXCELLENCE & MAXIMUM </br> QUALITY`,
image:"/image/brands/inalco/our-principles/03.png"
},
{
title:"SERVICE-MARKETING",
image:"/image/brands/inalco/our-principles/04.png"
},
{
title:"TAKE CARE OF STAKEHOLDERS",
image:"/image/brands/inalco/our-principles/05.png"
},
]
const CompanyOverview = () => {
return ( return (
<section className=" our-principle-section catalogues-sec sec_padd"> <section className=" our-principle-section catalogues-sec sec_padd">
<div className="custom_containers container"> <div className="custom_containers container">
{overviewData.map((item, index) => { {companyOverviewData?.map((item, index) => {
return ( return (
<Row className="mb-5" key={index}> <Row className="mb-5" key={index}>
...@@ -38,7 +17,7 @@ const CompanyOverview = () => { ...@@ -38,7 +17,7 @@ const CompanyOverview = () => {
<Image <Image
width={1510} width={1510}
height={352} height={352}
src={item?.image} src={cleanImage(item?.image?.url)}
alt={item?.title} alt={item?.title}
className="img-fluid w-100" className="img-fluid w-100"
/> />
......
components/Inalco/WeCare.js
...@@ -3,31 +3,12 @@ import { Col, Row } from "react-bootstrap"; ...@@ -3,31 +3,12 @@ import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading"; import Heading from "@/components/Heading";
import Image from "next/image"; import Image from "next/image";
import { cleanImage } from "../services/imageHandling"; import { cleanImage } from "../services/imageHandling";
const overviewData = [
{ const WeCare = ({weCareData}) => {
title: `We Care About</br> The Future`,
description:
"We have a public commitment to the environment and society. That's why we dedicate tireless resources to prevent the impact of our activity.",
image: "/image/brands/inalco/we-care/01.png",
},
{
title: `SUSTAINABLE </br> INNOVATION`,
description:
"Innovation is part of our DNA. Therefore, we continue to develop technologies and products that are game-changers, paving the way to the future for our partners.",
image: "/image/brands/inalco/we-care/02.png",
},
{
title: `DISCOVER </br> BEYOND NATURE`,
description:
"A concept that encapsulates our purest essence. We draw inspiration from nature and, through our innovative production process and the purest minerals, we create sustainable surfaces without overexploiting the environment.",
image: "/image/brands/inalco/we-care/03.png",
},
];
const WeCare = () => {
return ( return (
<section className=" we-care-section sec_padd"> <section className=" we-care-section sec_padd">
<div className="custom_containers container"> <div className="custom_containers container">
{overviewData?.map((item, index) => { {weCareData?.map((item, index) => {
const isEven = index % 2 === 0; const isEven = index % 2 === 0;
return ( return (
...@@ -43,7 +24,7 @@ const WeCare = () => { ...@@ -43,7 +24,7 @@ const WeCare = () => {
<Image <Image
width={868} width={868}
height={629} height={629}
src={item?.image} src={cleanImage(item?.image?.url)}
alt={item?.title} alt={item?.title}
className="img-fluid" className="img-fluid"
/> />
......
components/Layout/Footer.js
...@@ -152,19 +152,19 @@ const Footer = () => { ...@@ -152,19 +152,19 @@ const Footer = () => {
<span className="copyright">Copyright ©2026 Akruti Luxe. All rights reserved.</span> <span className="copyright">Copyright ©2026 Akruti Luxe. All rights reserved.</span>
<div className="social-icons d-flex gap-3 mt-3 mt-md-0"> <div className="social-icons d-flex gap-3 mt-3 mt-md-0">
<Link href="https://linkedin.com" target="_blank"> <Link href="https://linkedin.com" target="_blank">
<i class="fa-brands fa-linkedin"></i> <i className="fa-brands fa-linkedin"></i>
</Link> </Link>
<Link href="https://instagram.com" target="_blank"> <Link href="https://instagram.com" target="_blank">
<i class="fa-brands fa-instagram"></i> <i className="fa-brands fa-instagram"></i>
</Link> </Link>
<Link href="https://youtube.com" target="_blank"> <Link href="https://youtube.com" target="_blank">
<i class="fa-brands fa-youtube"></i> <i className="fa-brands fa-youtube"></i>
</Link> </Link>
<Link href="https://x.com" target="_blank"> <Link href="https://x.com" target="_blank">
<i class="fa-brands fa-square-twitter"></i> <i className="fa-brands fa-square-twitter"></i>
</Link> </Link>
<Link href="https://facebook.com" target="_blank"> <Link href="https://facebook.com" target="_blank">
<i class="fa-brands fa-square-facebook"></i> <i className="fa-brands fa-square-facebook"></i>
</Link> </Link>
</div> </div>
</Container> </Container>
......
components/Layout/Header.js
...@@ -130,7 +130,7 @@ import { cleanImage } from "../services/imageHandling"; ...@@ -130,7 +130,7 @@ import { cleanImage } from "../services/imageHandling";
export default function Navigation({ collectionsData = [] }) { export default function Navigation({ collectionsData = [] }) {
const [scrolled, setScrolled] = useState(false); const [scrolled, setScrolled] = useState(false);
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const [activeMenu, setActiveMenu] = useState(null); // const [activeMenu, setActiveMenu] = useState(null);
// const [level1, setLevel1] = useState(collectionsMenu[0] ?? null); // const [level1, setLevel1] = useState(collectionsMenu[0] ?? null);
// const [level2, setLevel2] = useState(collectionsMenu[0]?.subCategories[0] ?? null); // const [level2, setLevel2] = useState(collectionsMenu[0]?.subCategories[0] ?? null);
...@@ -160,10 +160,24 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -160,10 +160,24 @@ export default function Navigation({ collectionsData = [] }) {
const pathname = usePathname(); const pathname = usePathname();
const isActive = (path) => { // const isActive = (path) => {
if (!path) return false; // if (!path) return false;
return pathname === path || pathname.startsWith(path + "/"); // return pathname === path || pathname.startsWith(path + "/");
}; // };
// FLAGS
const path = pathname?.split("?")[0].replace(/\/$/, "") || "";
const segments = path.split("/").filter(Boolean);
// 🔥 ONLY ONE ACTIVE MENU
let activeMenu = "";
if (segments[0] === "collections") activeMenu = "collections";
else if (segments[0] === "brands") activeMenu = "brands";
else if (path === "/about") activeMenu = "about";
else if (path === "/catalogue") activeMenu = "catalogue";
else if (path === "/connect") activeMenu = "connect";
useEffect(() => { useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 50); const onScroll = () => setScrolled(window.scrollY > 50);
...@@ -171,9 +185,9 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -171,9 +185,9 @@ export default function Navigation({ collectionsData = [] }) {
return () => window.removeEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll);
}, []); }, []);
const handleMenuClick = (menu) => { // const handleMenuClick = (menu) => {
setActiveMenu((prev) => (prev === menu ? null : menu)); // setActiveMenu((prev) => (prev === menu ? null : menu));
}; // };
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
...@@ -212,14 +226,8 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -212,14 +226,8 @@ export default function Navigation({ collectionsData = [] }) {
}} }}
> >
<Link <Link
href={ href="/collections/kitchens"
collectionsData?.length className={`nav-link ${activeMenu === "collections" ? "active" : ""}`}
? `/collections/${collectionsData[0].categorySlug}`
: "#"
}
className={`nav-link ${pathname.startsWith("/collections") ? "active" : ""
}`}
onClick={() => setShow(false)}
> >
Collection Collection
</Link> </Link>
...@@ -242,7 +250,7 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -242,7 +250,7 @@ export default function Navigation({ collectionsData = [] }) {
setCollectionL2(cat.subCategories?.[0] ?? null); setCollectionL2(cat.subCategories?.[0] ?? null);
}} }}
className={ className={
isActive(`/collections/${cat.categorySlug}`) ? "active" : "" segments[1] === cat.categorySlug ? "active" : ""
} }
> >
{cat.categoryName} {cat.categoryName}
...@@ -263,11 +271,7 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -263,11 +271,7 @@ export default function Navigation({ collectionsData = [] }) {
href={`/collections/${collectionL1?.categorySlug}/${sub.subCategorySlug}`} href={`/collections/${collectionL1?.categorySlug}/${sub.subCategorySlug}`}
onMouseEnter={() => setCollectionL2(sub)} onMouseEnter={() => setCollectionL2(sub)}
className={ className={
isActive( segments[2] === sub.subCategorySlug ? "active" : ""
`/collections/${collectionL1?.categorySlug}/${sub.subCategorySlug}`
)
? "active"
: ""
} }
> >
{sub.subCategoryName} {sub.subCategoryName}
...@@ -288,11 +292,7 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -288,11 +292,7 @@ export default function Navigation({ collectionsData = [] }) {
<Link <Link
href={`/collections/${collectionL1?.categorySlug}/${collectionL2?.subCategorySlug}/${product.productSlug}`} href={`/collections/${collectionL1?.categorySlug}/${collectionL2?.subCategorySlug}/${product.productSlug}`}
className={ className={
isActive( segments[3] === product.productSlug ? "active" : ""
`/collections/${collectionL1?.categorySlug}/${collectionL2?.subCategorySlug}/${product.productSlug}`
)
? "active"
: ""
} }
> >
{product.title} {product.title}
...@@ -343,8 +343,7 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -343,8 +343,7 @@ export default function Navigation({ collectionsData = [] }) {
> >
<Link <Link
href="/brands/valcucine" href="/brands/valcucine"
className={`nav-link ${pathname.startsWith("/brands") ? "active" : "" className={`nav-link ${activeMenu === "brands" ? "active" : ""}`}
}`}
> >
Brands Brands
</Link> </Link>
...@@ -369,6 +368,7 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -369,6 +368,7 @@ export default function Navigation({ collectionsData = [] }) {
<Image <Image
width={177} width={177}
height={60} height={60}
alt="valcucine"
src="/image/header-logo/valcucine.png" src="/image/header-logo/valcucine.png"
/> />
</Link> </Link>
...@@ -376,6 +376,7 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -376,6 +376,7 @@ export default function Navigation({ collectionsData = [] }) {
<Image <Image
width={177} width={177}
height={60} height={60}
alt="rimadesio"
src="/image/header-logo/rimadesio.png" src="/image/header-logo/rimadesio.png"
/> />
</Link> </Link>
...@@ -383,6 +384,7 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -383,6 +384,7 @@ export default function Navigation({ collectionsData = [] }) {
<Image <Image
width={177} width={177}
height={60} height={60}
alt="inalco"
src="/image/header-logo/inalco.png" src="/image/header-logo/inalco.png"
/> />
</Link> </Link>
...@@ -395,29 +397,29 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -395,29 +397,29 @@ export default function Navigation({ collectionsData = [] }) {
{/* <Nav.Link as={Link} href="/brands/doors"> {/* <Nav.Link as={Link} href="/brands/doors">
Brands Brands
</Nav.Link> */} </Nav.Link> */}
<Nav.Link <Link
as={Link}
href="/about" href="/about"
className={isActive("/about") ? "active" : ""} className={`nav-link ${activeMenu === "about" ? "active" : ""}`}
> >
About About
</Nav.Link> </Link>
<Link
<Nav.Link
as={Link}
href="/catalogue" href="/catalogue"
className={isActive("/catalogue") ? "active" : ""} className={`nav-link ${activeMenu === "catalogue" ? "active" : ""}`}
> >
Catalogue Catalogue
</Nav.Link> </Link>
<Link
<Nav.Link
as={Link}
href="/connect" href="/connect"
className={isActive("/connect") ? "active" : ""} className={`nav-link ${activeMenu === "connect" ? "active" : ""}`}
> >
Connect Connect
</Nav.Link> </Link>
</Nav> </Nav>
</div> </div>
......
components/Layout/SubMenu.js
...@@ -5,13 +5,8 @@ import { cleanImage } from '../services/imageHandling' ...@@ -5,13 +5,8 @@ import { cleanImage } from '../services/imageHandling'
import Image from 'next/image' import Image from 'next/image'
export const SubMenu = ({ data, menuTitle }) => { export const SubMenu = ({ data, menuTitle }) => {
// console.log(data, 'menudata');
const { classname, headerLeft, headerRight } = data; const { classname, headerLeft, headerRight } = data;
return ( return (
<section className='submenu_header_desktop'> <section className='submenu_header_desktop'>
<div className='custom_container container'> <div className='custom_container container'>
......
components/Rimadesios/CompanyOverview.js
...@@ -45,11 +45,11 @@ const overviewData =[ ...@@ -45,11 +45,11 @@ const overviewData =[
image:"/image/brands/rimadesio/overview/06.png" image:"/image/brands/rimadesio/overview/06.png"
}, },
] ]
const CompanyOverview = () => { const CompanyOverview = ({companyOverviewData}) => {
return ( return (
<section className=" brands-overview-section catalogues-sec sec_padd"> <section className=" brands-overview-section catalogues-sec sec_padd">
<div className="custom_container container"> <div className="custom_container container">
{overviewData.map((item, index) => { {companyOverviewData?.map((item, index) => {
return ( return (
<Row className="my-5" key={index}> <Row className="my-5" key={index}>
...@@ -58,7 +58,7 @@ const CompanyOverview = () => { ...@@ -58,7 +58,7 @@ const CompanyOverview = () => {
<Image <Image
width={868} width={868}
height={538} height={538}
src={item?.image} src={cleanImage(item?.image?.url)}
alt={item?.title} alt={item?.title}
className="img-fluid" className="img-fluid"
/> />
......
components/StoneFinishCabinet/StoneFinishCabinet.js
...@@ -4,7 +4,6 @@ import AboutInfo from './AboutInfo' ...@@ -4,7 +4,6 @@ import AboutInfo from './AboutInfo'
import Details from './Details' import Details from './Details'
const StoneFinishCabinet = ({ StoneFinishCabinet }) => { const StoneFinishCabinet = ({ StoneFinishCabinet }) => {
console.log(StoneFinishCabinet, "StoneFinishCabinet")
return ( return (
<> <>
<AboutInfo productData={StoneFinishCabinet?.aboutInfo} /> <AboutInfo productData={StoneFinishCabinet?.aboutInfo} />
......
components/valcucines/AboutInfoBrands.js
...@@ -4,20 +4,18 @@ import Heading from "@/components/Heading"; ...@@ -4,20 +4,18 @@ import Heading from "@/components/Heading";
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
const AboutInfoBrands = () => { const AboutInfoBrands = ({infoData}) => {
return ( return (
<> <>
<section className='about-section about-info-section'> <section className='about-section about-info-section'>
<div className='container'> <div className='container'>
<Row className='text-center justify-content-center'> <Row className='text-center justify-content-center'>
<Col md={10}> <Col md={10}>
<Heading el="h2" heading="Company" /> <Heading el="h2" heading={infoData?.title} isHtml />
<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> <div className='mb-3 gray-text' dangerouslySetInnerHTML={{ __html: infoData?.description }} />
<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="#" className="btn4">Read More</Link> </div> */} {/* <div className="my-5"> <Link href="#" className="btn4">Read More</Link> </div> */}
</Col> </Col>
</Row> </Row>
......
components/valcucines/Certifications.js
...@@ -4,48 +4,8 @@ import Heading from "@/components/Heading"; ...@@ -4,48 +4,8 @@ import Heading from "@/components/Heading";
import Image from "next/image"; import Image from "next/image";
import { cleanImage } from "../services/imageHandling"; import { cleanImage } from "../services/imageHandling";
import Link from "next/link"; import Link from "next/link";
const CertificationsData = [
{ const Certifications = ({certificationsData}) => {
title: "LEED",
description:`<p>For over forty years, Valcucine has stood out for the design and production of high-end kitchens. Always committed to providing excellence in terms of sustainability, innovation, and craftsmanship, Valcucine once again raises the bar with the LEED v.4.1 mapping of kitchens.</p>
<p>LEED, Leadership in Energy and Environmental Design, is the most widely used third-party verification system for eco-friendly buildings. LEED provides a framework for healthy, efficient, low-carbon, and cost-effective green buildings.
The LEED v.4.1 certification is a globally recognized symbol of success and leadership in sustainability.</p>`,
download: "Download the LEED contribution matrix",
url: "#",
image: "/image/brands/certification/01.png",
},
{
title: "FSC",
description:`<p>As a testament to its environmental commitment, Valcucine has expanded its range of FSC® certified kitchen furniture, ensuring that the wood or its derivatives come from FSC® certified supplier chains.</p>
<p>FSC requires forest managers, whether on public or private lands, to involve members of local communities in decision-making processes and to protect the rights of indigenous populations, ensuring that their voices are an integral part of the certification process and that the impact of management operations is surpassed. FSC also mandates that the results of certification audits be made public, even in the case of private properties: this is a distinctive feature compared to other types of certification.</p>`,
download: "Download the FSC certification",
url: "#",
image: "/image/brands/certification/02.png",
},
{
title: "ISO 14001",
description:`<p>The ISO 14001 environmental certification ensures that the company complies with environmental laws regarding toxic emissions, noise, and water discharge. It requires the company to have a controlled and documented waste disposal system, commit to reducing energy consumption, and implement projects aimed at this purpose. The certification also mandates that the company participate in environmental projects.</p>`,
download: "Download the ISO 14001 certification",
url: "#",
image: "/image/brands/certification/03.png",
},
{
title: "ISO 45001",
description:`<p>In 2011, Valcucine obtained the OHSAS (Occupational Health and Safety Assessment Series) certification, identifying an international standard for a workers’ health and safety management system. Subsequently, it obtained, as a replacement, the new ISO 45001 certification.</p>`,
download: "Download the ISO 45001 certification",
url: "#",
image: "/image/brands/certification/04.png",
},
{
title: "F4 STARS",
description:`<p>The F4 STARS certification involves its own testing methods and sets a very restrictive limit of 0.04 ppm. By comparison, the limits are 0.09 ppm for the American CARB 2/TSCA Title VI, 0.1 ppm for the European E1, and the German UBA. This certification applies to both raw and coated wood-derived panels and attests to compliance with the requirements specified by Japan for formaldehyde emissions from products intended for construction and furniture.</p>`,
download: "Certification upon request.",
url: "#",
image: "/image/brands/certification/05.png",
},
];
const Certifications = () => {
return ( return (
<section className=" certifications-section sec_padd"> <section className=" certifications-section sec_padd">
<div className=" container"> <div className=" container">
...@@ -54,7 +14,7 @@ const Certifications = () => { ...@@ -54,7 +14,7 @@ const Certifications = () => {
<Heading el="h2" heading="Certifications" /> <Heading el="h2" heading="Certifications" />
</Col> </Col>
</Row> </Row>
{CertificationsData.map((item, index) => { {certificationsData?.cardItems?.map((item, index) => {
return ( return (
<> <>
<Row className="my-5 certifications-item" key={index}> <Row className="my-5 certifications-item" key={index}>
...@@ -62,7 +22,7 @@ const Certifications = () => { ...@@ -62,7 +22,7 @@ const Certifications = () => {
<Image <Image
width={348} width={348}
height={304} height={304}
src={item?.image} src={cleanImage(item?.image?.url)}
alt={item?.title} alt={item?.title}
className="img-fluid" className="img-fluid"
/> />
...@@ -71,14 +31,14 @@ const Certifications = () => { ...@@ -71,14 +31,14 @@ const Certifications = () => {
{/* FIXED HERE */} {/* FIXED HERE */}
<Col md={9}> <Col md={9}>
<div className="title">{item?.title}</div> <div className="title">{item?.title}</div>
<div className="sub-title">{item?.subTitle}</div> {/* <div className="sub-title">{item?.subTitle}</div> */}
<div <div
className="info" className="info"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: item?.description || "", __html: item?.description || "",
}} }}
/> />
<div className="download-content"><Link href={item?.url || "#"}>{item?.download} <i class="fa-solid fa-arrow-right ms-2"></i></Link></div> <div className="download-content"><Link href={item?.url || "#"}>{item?.download} <i className="fa-solid fa-arrow-right ms-2"></i></Link></div>
</Col> </Col>
</Row> </Row>
</> </>
......
components/valcucines/CompanyOverview.js
...@@ -3,47 +3,12 @@ import { Col, Row } from "react-bootstrap"; ...@@ -3,47 +3,12 @@ import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading"; import Heading from "@/components/Heading";
import Image from "next/image"; import Image from "next/image";
import { cleanImage } from "../services/imageHandling"; import { cleanImage } from "../services/imageHandling";
const overviewData =[
{
title:"Mission and values",
subTitle:"Well-being, innovation, sustainability, craftsmanship",
description:"We put people and their well-being at the centre of what we do, stimulating their senses to bring about joy in everyday activities. We design unique kitchens, made to last generations, impervious to trends, timeless: an expression of craftsmanship that is masterfully renewed in the present. We transform cooking into an extraordinary experience through the constant innovation of forms and materials. We use our planet’s resources in a responsible way, focusing on sustainability and respecting nature.",
image:"/image/brands/overview/01.png"
},
{
title:"Mission and values",
subTitle:"",
description: `<p>2025 Archello Product of the Year – Public vote – for New Logica</p>
<p>2025 Archiproducts Design Awards | Archigraphica + Vela Wall Unit</p>
<p>2025 iF Design Award | Architectural Scenarios</p>
<p>2025 iF Design Award GOLD | Artematica + New Logica </p>`,
image:"/image/brands/overview/02.png"
},
{
title:"Symbol and Philosophy",
subTitle:"",
description:"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.",
image:"/image/brands/overview/03.png"
},
{
title:"Environmental, Social and Governance",
subTitle:"",
description:"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.",
image:"/image/brands/overview/04.png"
},
{
title:"History",
subTitle:"",
description:"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.",
image:"/image/brands/overview/05.png"
},
] const CompanyOverview = ({companyOverviewData}) => {
const CompanyOverview = () => {
return ( return (
<section className=" brands-overview-section catalogues-sec sec_padd"> <section className=" brands-overview-section catalogues-sec sec_padd">
<div className="custom_container container"> <div className="custom_container container">
{overviewData.map((item, index) => { {companyOverviewData?.map((item, index) => {
return ( return (
<Row className="my-5" key={index}> <Row className="my-5" key={index}>
...@@ -52,7 +17,7 @@ const CompanyOverview = () => { ...@@ -52,7 +17,7 @@ const CompanyOverview = () => {
<Image <Image
width={868} width={868}
height={538} height={538}
src={item?.image} src={cleanImage(item?.image?.url)}
alt={item?.title} alt={item?.title}
className="img-fluid" className="img-fluid"
/> />
......
components/valcucines/InnerBannerBrands.js
...@@ -9,28 +9,28 @@ import Heading from "@/components/Heading"; ...@@ -9,28 +9,28 @@ import Heading from "@/components/Heading";
import Image from "next/image"; import Image from "next/image";
import React from "react"; import React from "react";
const InnerBannerBrands = ({data}) => { const InnerBannerBrands = ({ data }) => {
// return ( // return (
// <> // <>
// <section className='innerbanner-section'> // <section className='innerbanner-section'>
// <div className='innerbanner product-details'> // <div className='innerbanner product-details'>
// <Row> // <Row>
// <Col> // <Col>
// <div className='product-banner'> // <div className='product-banner'>
// <Image width={1920} height={948} src={data?.image?.url} alt="" /> // <Image width={1920} height={948} src={data?.image?.url} alt="" />
// <div className='info'> // <div className='info'>
// <Heading el="h2" heading={data?.title} /> // <Heading el="h2" heading={data?.title} />
// <div dangerouslySetInnerHTML={{__html: data?.description}}></div> // <div dangerouslySetInnerHTML={{__html: data?.description}}></div>
// </div> // </div>
// </div> // </div>
// </Col> // </Col>
// </Row> // </Row>
// </div> // </div>
// </section> // </section>
// </> // </>
// ) // )
return ( return (
<> <>
<section className="innerbanner-section"> <section className="innerbanner-section">
<div className="innerbanner product-details"> <div className="innerbanner product-details">
...@@ -52,7 +52,7 @@ const InnerBannerBrands = ({data}) => { ...@@ -52,7 +52,7 @@ const InnerBannerBrands = ({data}) => {
<Image <Image
width={1856} width={1856}
height={1086} height={1086}
src={item?.url} src={cleanImage(item?.url)}
alt="" alt=""
/> />
</SwiperSlide> </SwiperSlide>
...@@ -66,7 +66,7 @@ const InnerBannerBrands = ({data}) => { ...@@ -66,7 +66,7 @@ const InnerBannerBrands = ({data}) => {
)} )}
</div> </div>
<div className="info"> <div className="info">
<Heading el="h2" heading={data?.title} /> <Heading el="h2" heading={data?.title} isHtml />
<div <div
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: data?.description, __html: data?.description,
......
container/Home/Catalogues.js
...@@ -69,10 +69,10 @@ const Catalogues = ({cataloguesData}) => { ...@@ -69,10 +69,10 @@ const Catalogues = ({cataloguesData}) => {
<div className="collection-card"> <div className="collection-card">
<img <img
src={cleanImage(item?.image?.url)} src={cleanImage(item?.image?.url)}
alt={item.title} alt={item?.title}
className="img-fluid rounded-lg" className="img-fluid rounded-lg"
/> />
<p className="mt-3">{item.title}</p> <p className="mt-3">{item?.title}</p>
</div> </div>
</SwiperSlide> </SwiperSlide>
))} ))}
......
container/Home/Collection.js
...@@ -145,7 +145,7 @@ const CollectionSlider = ({CollectionData}) => { ...@@ -145,7 +145,7 @@ const CollectionSlider = ({CollectionData}) => {
alt={item?.title} alt={item?.title}
className="img-fluid rounded-lg hover-zooms" className="img-fluid rounded-lg hover-zooms"
/> />
<p className="mt-3">{item?.title} <i class="fa-solid fa-arrow-right"></i></p> <p className="mt-3">{item?.title} <i className="fa-solid fa-arrow-right"></i></p>
{/* </div> */} {/* </div> */}
</Link> </Link>
</SwiperSlide> </SwiperSlide>
......
pages/about.js
...@@ -13,7 +13,6 @@ const bannerData = [ ...@@ -13,7 +13,6 @@ const bannerData = [
title: "Banner", title: "Banner",
} }
]; ];
// console.log("bannerData113", bannerData)
const breadcrumbData = [ const breadcrumbData = [
{ {
href: "/", href: "/",
...@@ -22,7 +21,6 @@ const breadcrumbData = [ ...@@ -22,7 +21,6 @@ const breadcrumbData = [
]; ];
const AboutPage = ({ aboutData = {} }) => { const AboutPage = ({ aboutData = {} }) => {
console.log("aboutData", aboutData)
return ( return (
<> <>
<Head> <Head>
......
pages/brands/inalco.js
...@@ -7,6 +7,7 @@ import Head from "next/head"; ...@@ -7,6 +7,7 @@ import Head from "next/head";
import AboutInfoBrands from "@/components/Inalco/AboutInfoBrands"; import AboutInfoBrands from "@/components/Inalco/AboutInfoBrands";
import CompanyOverview from "@/components/Inalco/CompanyOverview"; import CompanyOverview from "@/components/Inalco/CompanyOverview";
import WeCare from "@/components/Inalco/WeCare"; import WeCare from "@/components/Inalco/WeCare";
import { getInalcoBySlug } from "@/services/inalcoApi";
const bannerData = [ const bannerData = [
{ {
id: 8, id: 8,
...@@ -24,9 +25,7 @@ import WeCare from "@/components/Inalco/WeCare"; ...@@ -24,9 +25,7 @@ import WeCare from "@/components/Inalco/WeCare";
} }
]; ];
console.log("bannerData", bannerData) export default function inalcoPage({ brandData, inalcoData }) {
export default function inalcoPage({ brandData }) {
console.log("brandData new", brandData)
const breadcrumbData = [ const breadcrumbData = [
{ {
href: "/brands", href: "/brands",
...@@ -45,13 +44,28 @@ export default function inalcoPage({ brandData }) { ...@@ -45,13 +44,28 @@ export default function inalcoPage({ brandData }) {
</Head> </Head>
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerBrands data={bannerData[0] || []} /> <InnerBannerBrands data={inalcoData?.banner || []} />
<AboutInfoBrands /> <AboutInfoBrands infoData={inalcoData?.info || []} />
<CompanyOverview /> <CompanyOverview companyOverviewData={inalcoData?.overviewItem || []} />
<WeCare /> <WeCare weCareData={inalcoData?.weCare || []} />
<Contact /> <Contact />
</> </>
); );
} }
export async function getServerSideProps({ params }) {
try {
const inalcoData = await getInalcoBySlug();
return {
props: {
inalcoData,
},
};
} catch (error) {
console.error("Product page SSR error:", error);
return { notFound: true };
}
}
pages/brands/rimadesio.js
...@@ -7,6 +7,7 @@ import { getBrandsBySlug } from "@/services/brandsApi"; ...@@ -7,6 +7,7 @@ import { getBrandsBySlug } from "@/services/brandsApi";
import Head from "next/head"; import Head from "next/head";
import AboutInfoBrands from "@/components/Rimadesios/AboutInfoBrands"; import AboutInfoBrands from "@/components/Rimadesios/AboutInfoBrands";
import CompanyOverview from "@/components/Rimadesios/CompanyOverview"; import CompanyOverview from "@/components/Rimadesios/CompanyOverview";
import { getRimadesioBySlug } from "@/services/rimadesioApi";
const bannerData = [ const bannerData = [
{ {
id: 8, id: 8,
...@@ -25,9 +26,7 @@ import CompanyOverview from "@/components/Rimadesios/CompanyOverview"; ...@@ -25,9 +26,7 @@ import CompanyOverview from "@/components/Rimadesios/CompanyOverview";
} }
]; ];
console.log("bannerData", bannerData) export default function rimadesiosPage({ brandData, rimadesioData }) {
export default function rimadesiosPage({ brandData }) {
console.log("brandData new", brandData)
const breadcrumbData = [ const breadcrumbData = [
{ {
href: "/brands", href: "/brands",
...@@ -46,12 +45,27 @@ export default function rimadesiosPage({ brandData }) { ...@@ -46,12 +45,27 @@ export default function rimadesiosPage({ brandData }) {
</Head> </Head>
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerBrands data={bannerData[0] || []} /> <InnerBannerBrands data={rimadesioData?.banner} />
<AboutInfoBrands /> <AboutInfoBrands info Data={rimadesioData?.info} />
<CompanyOverview /> <CompanyOverview companyOverviewData={rimadesioData?.companyOverview} />
<Contact /> <Contact />
</> </>
); );
} }
export async function getServerSideProps({ params }) {
try {
const rimadesioData = await getRimadesioBySlug();
return {
props: {
rimadesioData,
},
};
} catch (error) {
console.error("Product page SSR error:", error);
return { notFound: true };
}
}
pages/brands/valcucine.js
...@@ -7,6 +7,7 @@ import Breadcrumb from "@/components/Common/Breadcrumb"; ...@@ -7,6 +7,7 @@ import Breadcrumb from "@/components/Common/Breadcrumb";
import { Contact } from "@/container/Home/Contact"; import { Contact } from "@/container/Home/Contact";
import { getBrandsBySlug } from "@/services/brandsApi"; import { getBrandsBySlug } from "@/services/brandsApi";
import Head from "next/head"; import Head from "next/head";
import { getValcucineBySlug } from "@/services/valcucineApi";
const bannerData = [ const bannerData = [
{ {
id: 8, id: 8,
...@@ -25,9 +26,8 @@ import Head from "next/head"; ...@@ -25,9 +26,8 @@ import Head from "next/head";
} }
]; ];
console.log("bannerData", bannerData)
export default function valcucinesPage({ brandData }) { export default function valcucinesPage({ brandData, valcucineData }) {
console.log("brandData new", brandData)
const breadcrumbData = [ const breadcrumbData = [
{ {
href: "/brands", href: "/brands",
...@@ -46,13 +46,30 @@ export default function valcucinesPage({ brandData }) { ...@@ -46,13 +46,30 @@ export default function valcucinesPage({ brandData }) {
</Head> </Head>
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerBrands data={bannerData[0] || []} /> <InnerBannerBrands data={valcucineData?.banner} />
<AboutInfoBrands /> <AboutInfoBrands infoData={valcucineData?.info} />
<CompanyOverview /> <CompanyOverview companyOverviewData={valcucineData?.companyOverview} />
<Certifications /> <Certifications certificationsData={valcucineData?.certifications} />
<Contact /> <Contact />
</> </>
); );
} }
export async function getServerSideProps({ params }) {
try {
const valcucineData = await getValcucineBySlug();
return {
props: {
valcucineData,
},
};
} catch (error) {
console.error("Product page SSR error:", error);
return { notFound: true };
}
}
pages/collections/[category]/[subCategory]/[productSlug].js
...@@ -16,7 +16,6 @@ import { useEffect, useState } from "react"; ...@@ -16,7 +16,6 @@ import { useEffect, useState } from "react";
import StoneFinishCabinet from "@/components/StoneFinishCabinet/StoneFinishCabinet"; import StoneFinishCabinet from "@/components/StoneFinishCabinet/StoneFinishCabinet";
const ProductPage = ({ productData, cataloguesData }) => { const ProductPage = ({ productData, cataloguesData }) => {
console.log("productData-new", productData)
const router = useRouter(); const router = useRouter();
const { category, subCategory: subCategorySlug, productSlug } = router.query; const { category, subCategory: subCategorySlug, productSlug } = router.query;
......
pages/collections/[category]/[subCategory]/index.js
...@@ -35,7 +35,7 @@ const SubCategoryOrProductPage = ({ ...@@ -35,7 +35,7 @@ const SubCategoryOrProductPage = ({
🟢 IF PRODUCT (2 LEVEL PRODUCT PAGE) 🟢 IF PRODUCT (2 LEVEL PRODUCT PAGE)
====================================================== */ ====================================================== */
if (type === "product") { if (type === "product") {
const subCategoryData = productData.productData; const subCategoryData = productData?.productData;
const breadcrumbData = [ const breadcrumbData = [
{ href: "/", label: "Collections" }, { href: "/", label: "Collections" },
...@@ -45,7 +45,7 @@ const SubCategoryOrProductPage = ({ ...@@ -45,7 +45,7 @@ const SubCategoryOrProductPage = ({
}, },
{ {
href: router.asPath, href: router.asPath,
label: productData.title, label: productData?.title,
}, },
]; ];
const [activeTab, setActiveTab] = useState(null); const [activeTab, setActiveTab] = useState(null);
...@@ -53,7 +53,7 @@ const SubCategoryOrProductPage = ({ ...@@ -53,7 +53,7 @@ const SubCategoryOrProductPage = ({
const productTabs = productData?.productTabs; const productTabs = productData?.productTabs;
useEffect(() => { useEffect(() => {
if (productTabs?.length > 0) { if (productTabs?.length > 0) {
setActiveTab(productTabs[0].title); setActiveTab(productTabs[0]?.title);
} }
}, [productTabs]); }, [productTabs]);
const layoutType = productData?.LayoutsType; const layoutType = productData?.LayoutsType;
...@@ -79,7 +79,7 @@ const isStoneLayout = ...@@ -79,7 +79,7 @@ const isStoneLayout =
className="tab-01" className="tab-01"
> >
{productTabs?.map((tab) => ( {productTabs?.map((tab) => (
<Tab key={tab.id} eventKey={tab.title} title={tab.title}> <Tab key={tab?.id} eventKey={tab?.title} title={tab?.title}>
<AboutInfo productData={tab?.aboutInfo} /> <AboutInfo productData={tab?.aboutInfo} />
<CompanyOverview <CompanyOverview
companyOverviewData={tab?.companyOverview?.items} companyOverviewData={tab?.companyOverview?.items}
...@@ -125,7 +125,7 @@ const isStoneLayout = ...@@ -125,7 +125,7 @@ const isStoneLayout =
)} )}
{isDoorLayout && ( {isDoorLayout && (
<Explore productData={productData.exploreProducts} /> <Explore productData={productData?.exploreProducts} />
)} )}
{!isDoorLayout && ( {!isDoorLayout && (
......
services/inalcoApi.js 0 → 100644
import { fetchFromStrapi } from "./api";
export async function getInalcoBySlug() {
try {
const query = {
populate: {
banner: {
populate: {
image: true,
},
},
info: {
populate: true,
},
overviewItem:{
populate: {
image: true,
},
},
weCare: {
populate: {
image: true,
},
},
},
};
const response = await fetchFromStrapi(
"/api/inalco",
query
);
// return single category
return response?.data || [];
} catch (error) {
console.error("Inalco fetch error:", error);
return null;
}
}
services/rimadesioApi.js 0 → 100644
import { fetchFromStrapi } from "./api";
export async function getRimadesioBySlug() {
try {
const query = {
populate: {
banner: {
populate: {
image: true,
},
},
info: {
populate: true,
},
companyOverview: {
populate: {
image: true,
},
},
},
};
const response = await fetchFromStrapi(
"/api/rimadesio",
query
);
// return single category
return response?.data || [];
} catch (error) {
console.error("Rimadesio fetch error:", error);
return null;
}
}
services/valcucineApi.js 0 → 100644
import { fetchFromStrapi } from "./api";
export async function getValcucineBySlug() {
try {
const query = {
populate: {
banner: {
populate: {
image: true,
},
},
info: {
populate: true,
},
companyOverview: {
populate: {
image: true,
},
},
certifications: {
populate: {
cardItems: {
populate: {
image: true,
},
},
},
},
},
};
const response = await fetchFromStrapi(
"/api/valcucine",
query
);
// return single category
return response?.data || [];
} catch (error) {
console.error("Valcucine fetch error:", error);
return null;
}
}
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!