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) {
}
const AboutInfo = ({ productData }) => {
console.log("productData-333", productData)
const [expanded, setExpanded] = useState(false);
const { preview, rest } = splitAfterParagraphs(productData?.description, 2);
......
components/Collection/CompanyOverview.js
......@@ -5,14 +5,14 @@ import Image from "next/image";
import { cleanImage } from "../services/imageHandling";
const CompanyOverview = ({ companyOverviewData }) => {
console.log(companyOverviewData,"companyOverviewData")
return (
<>
<section className="about-section about-info-section p-0">
<div className="container">
<Row className="my-5">
{companyOverviewData?.map((item, index) => (
<Col md={6} key={item.id || index}>
<Col md={6} key={item?.id || index}>
<div
className={`luxury-items ${
index % 2 !== 0 ? "option02" : ""
......
components/Collection/Explore.js
......@@ -62,12 +62,12 @@ const Explore = ({productData}) => {
<SwiperSlide key={index}>
<div className="collections-item">
<Link href={`/collections/${item.slug}`} className="d-block">
<Link href={`/collections/${item?.slug}`} className="d-block">
<Image
src={cleanImage(item.image.url)}
src={cleanImage(item?.image?.url)}
width={868}
height={560}
alt={item.name}
alt={item?.name}
className="img-fluid"
/>
<div className="title">{item?.title}</div>
......
components/Collection/Gallery.js
......@@ -15,7 +15,6 @@ const galleryData = [
];
const Gallery = ({ productData }) => {
console.log(productData,"productData-gallery")
useEffect(() => {
Fancybox.bind("[data-fancybox='gallery']", {
......@@ -43,8 +42,8 @@ const Gallery = ({ productData }) => {
return (
<Col
key={item.id}
xs={6}
key={item?.id}
// xs={6}
xs={isFullWidth ? 12 : 6}
className="mb-4"
>
......@@ -55,7 +54,7 @@ const Gallery = ({ productData }) => {
>
<Image
src={cleanImage(item?.image?.url)}
alt={`Gallery image ${item.id}`}
alt={`Gallery image ${item?.id}`}
fill
className="gallery-image"
/>
......
components/Collection/InnerBannerproduct.js
......@@ -10,7 +10,6 @@ import Image from "next/image";
import React from "react";
const InnerBannerproduct = ({ productData }) => {
console.log("productData", productData)
return (
<>
<section className="innerbanner-section">
......
components/Collection/InnerDetails.js
......@@ -6,8 +6,6 @@ import { useRouter } from "next/router";
import { cleanImage } from "../services/imageHandling";
const InnerDetails = ({ subCategories }) => {
console.log("subCategories", subCategories)
const router = useRouter();
const { category } = router.query;
......
components/Collection/InnerDetailsSubCategory.js
......@@ -7,10 +7,9 @@ import FilterButton from "../Common/FilterButton";
import { cleanImage } from "../services/imageHandling";
const InnerDetailsSubCategory = ({ products }) => {
console.log("products 123", products)
const router = useRouter();
const { category, subCategory } = router.query;
const [showFilter, setShowFilter] = useState(false);
const [showFilter, setShowFilter] = useState(false);
const [sort, setSort] = useState("");
if (!products || !category || !subCategory) return null;
......@@ -26,11 +25,11 @@ const [showFilter, setShowFilter] = useState(false);
// return 0;
// });
const sortedSubCategories = [...products].sort((a, b) => {
if (sort === "name-asc") return a.title.localeCompare(b.title);
if (sort === "name-desc") return b.title.localeCompare(a.title);
// Default: sort by rank
return (Number(a.rank) || 999) - (Number(b.rank) || 999);
});
if (sort === "name-asc") return a.title.localeCompare(b.title);
if (sort === "name-desc") return b.title.localeCompare(a.title);
// Default: sort by rank
return (Number(a.rank) || 999) - (Number(b.rank) || 999);
});
return (
<section className="collection-m-section sec_padd">
<div className="custom_container container">
......@@ -47,12 +46,12 @@ const [showFilter, setShowFilter] = useState(false);
</Col>
<Col xs={6} className="d-flex justify-content-end">
<>
{/* <FilterButton
<>
{/* <FilterButton
onClick={() => setShowFilter(true)}
/> */}
{/* {showFilter && (
{/* {showFilter && (
<div className="filter-panel">
Filter Content Here
<button
......@@ -61,7 +60,7 @@ const [showFilter, setShowFilter] = useState(false);
Close</button>
</div>
)} */}
</>
</>
<select
className="sortby-select"
......@@ -78,19 +77,19 @@ const [showFilter, setShowFilter] = useState(false);
{/* Products */}
<Row>
{sortedSubCategories.map((product) => (
<Col md={6} key={product.productSlug}>
<Col md={6} key={product?.productSlug}>
<div className="collections-item">
<Link
href={`/collections/${category}/${subCategory}/${product.slug}`}
href={`/collections/${category}/${subCategory}/${product?.slug}`}
>
<Image
width={868}
height={560}
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>
</div>
</Col>
......
components/Collection/TechnicalDetails.js
......@@ -45,7 +45,7 @@ const technicalDetailsData = [
id: "2",
title: "WORKTOPS",
image: "/image/technical-details/01.png",
details: [
details: [
{
label: "Characteristics",
value:
......@@ -81,7 +81,7 @@ const technicalDetailsData = [
id: "4",
title: "FRONT FINISHES",
image: "/image/technical-details/01.png",
details: [
details: [
{
label: "Characteristics",
value:
......@@ -97,8 +97,8 @@ const technicalDetailsData = [
},
];
const TechnicalDetails = ({productData}) => {
const TechnicalDetails = ({ productData }) => {
return (
<>
<section className="technicalDetails-section catalogues-secs sec_padd collection-section">
......@@ -111,43 +111,43 @@ const TechnicalDetails = ({productData}) => {
<Row>
<Col>
<div className="accordion01">
<Accordion defaultActiveKey={productData?.[0]?.id?.toString()}>
{productData?.map((item) => (
<Accordion.Item
eventKey={item.id.toString()}
key={item.id}
>
<Accordion.Header>{item.title}</Accordion.Header>
<Accordion defaultActiveKey={productData?.[0]?.id?.toString()}>
{productData?.map((item) => (
<Accordion.Item
eventKey={item?.id?.toString()}
key={item?.id}
>
<Accordion.Header>{item?.title}</Accordion.Header>
<Accordion.Body>
<Row>
<Col md={5}>
<div className="image">
<Image
src={cleanImage(item?.image?.url)}
alt={item.title}
width={743}
height={500}
/>
</div>
</Col>
<Accordion.Body>
<Row>
<Col md={5}>
<div className="image">
<Image
src={cleanImage(item?.image?.url)}
alt={item?.title}
width={743}
height={500}
/>
</div>
</Col>
<Col md={7}>
{item?.details?.map((detail, index) => (
<div className="item" key={index}>
<div className="title">{detail?.label}</div>
<div
className="info"
dangerouslySetInnerHTML={{ __html: detail?.value }}
/>
</div>
))}
</Col>
</Row>
</Accordion.Body>
</Accordion.Item>
))}
</Accordion>
<Col md={7}>
{item?.details?.map((detail, index) => (
<div className="item" key={index}>
<div className="title">{detail?.label}</div>
<div
className="info"
dangerouslySetInnerHTML={{ __html: detail?.value }}
/>
</div>
))}
</Col>
</Row>
</Accordion.Body>
</Accordion.Item>
))}
</Accordion>
</div>
</Col>
</Row>
......
components/Collection/Video.js
......@@ -7,19 +7,15 @@ const Video = ({ productData }) => {
const media = productData?.video;
// ✅ 1. Hide component if no video
if (!media?.url) return null;
useEffect(() => {
// ✅ 2. Guard for SSR (Next.js safety)
if (typeof window === "undefined") return;
// ✅ Guard for missing video OR SSR
if (!media?.url || typeof window === "undefined") return;
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true);
// ✅ Stop observing after first trigger
if (videoRef.current) {
observer.unobserve(videoRef.current);
}
......@@ -37,7 +33,10 @@ const Video = ({ productData }) => {
observer.unobserve(videoRef.current);
}
};
}, []);
}, [media?.url]); // ✅ dependency added (important)
// ✅ AFTER hooks → safe
if (!media?.url) return null;
return (
<section className="video_sec">
......@@ -53,8 +52,8 @@ const Video = ({ productData }) => {
}`}
>
<source
src={cleanImage(media.url)}
type={media.mime || "video/mp4"}
src={cleanImage(media?.url)}
type={media?.mime || "video/mp4"}
/>
Your browser does not support the video tag.
</video>
......
components/Common/Breadcrumb.js
......@@ -11,14 +11,14 @@ const Breadcrumb = ({breadcrumbData}) => {
<div className='col-12'>
<nav aria-label="Breadcrumb" className="breadcrumb" role="navigation">
<ol>
{breadcrumbData.map((it, idx) => {
{breadcrumbData?.map((it, idx) => {
const isLast = idx === breadcrumbData?.length - 1;
return (
<li key={idx} className="breadcrumb-item">
{isLast || !it.href ? (
<span>{it.label}</span>
{isLast || !it?.href ? (
<span>{it?.label}</span>
) : (
<Link href={it.href}>{it.label}</Link>
<Link href={it?.href}>{it?.label}</Link>
)}
{/* slash separator */}
......
components/Inalco/AboutInfoBrands.js
......@@ -4,18 +4,16 @@ import Heading from "@/components/Heading";
import Image from 'next/image';
import Link from 'next/link';
const AboutInfoBrands = () => {
const AboutInfoBrands = ({infoData}) => {
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="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>
<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>
<div className='' dangerouslySetInnerHTML={{ __html: infoData?.description }}></div>
</Col>
</Row>
......
components/Inalco/CompanyOverview.js
......@@ -3,33 +3,12 @@ import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
import { cleanImage } from "../services/imageHandling";
const overviewData =[
{
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 = () => {
const CompanyOverview = ({companyOverviewData}) => {
return (
<section className=" our-principle-section catalogues-sec sec_padd">
<div className="custom_containers container">
{overviewData.map((item, index) => {
{companyOverviewData?.map((item, index) => {
return (
<Row className="mb-5" key={index}>
......@@ -38,7 +17,7 @@ const CompanyOverview = () => {
<Image
width={1510}
height={352}
src={item?.image}
src={cleanImage(item?.image?.url)}
alt={item?.title}
className="img-fluid w-100"
/>
......
components/Inalco/WeCare.js
......@@ -3,31 +3,12 @@ import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
import { cleanImage } from "../services/imageHandling";
const overviewData = [
{
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 = () => {
const WeCare = ({weCareData}) => {
return (
<section className=" we-care-section sec_padd">
<div className="custom_containers container">
{overviewData?.map((item, index) => {
{weCareData?.map((item, index) => {
const isEven = index % 2 === 0;
return (
......@@ -43,7 +24,7 @@ const WeCare = () => {
<Image
width={868}
height={629}
src={item?.image}
src={cleanImage(item?.image?.url)}
alt={item?.title}
className="img-fluid"
/>
......
components/Layout/Footer.js
......@@ -152,19 +152,19 @@ const Footer = () => {
<span className="copyright">Copyright ©2026 Akruti Luxe. All rights reserved.</span>
<div className="social-icons d-flex gap-3 mt-3 mt-md-0">
<Link href="https://linkedin.com" target="_blank">
<i class="fa-brands fa-linkedin"></i>
<i className="fa-brands fa-linkedin"></i>
</Link>
<Link href="https://instagram.com" target="_blank">
<i class="fa-brands fa-instagram"></i>
<i className="fa-brands fa-instagram"></i>
</Link>
<Link href="https://youtube.com" target="_blank">
<i class="fa-brands fa-youtube"></i>
<i className="fa-brands fa-youtube"></i>
</Link>
<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 href="https://facebook.com" target="_blank">
<i class="fa-brands fa-square-facebook"></i>
<i className="fa-brands fa-square-facebook"></i>
</Link>
</div>
</Container>
......
components/Layout/Header.js
......@@ -130,7 +130,7 @@ import { cleanImage } from "../services/imageHandling";
export default function Navigation({ collectionsData = [] }) {
const [scrolled, setScrolled] = 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 [level2, setLevel2] = useState(collectionsMenu[0]?.subCategories[0] ?? null);
......@@ -160,10 +160,24 @@ export default function Navigation({ collectionsData = [] }) {
const pathname = usePathname();
const isActive = (path) => {
if (!path) return false;
return pathname === path || pathname.startsWith(path + "/");
};
// const isActive = (path) => {
// if (!path) return false;
// 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(() => {
const onScroll = () => setScrolled(window.scrollY > 50);
......@@ -171,9 +185,9 @@ export default function Navigation({ collectionsData = [] }) {
return () => window.removeEventListener("scroll", onScroll);
}, []);
const handleMenuClick = (menu) => {
setActiveMenu((prev) => (prev === menu ? null : menu));
};
// const handleMenuClick = (menu) => {
// setActiveMenu((prev) => (prev === menu ? null : menu));
// };
const dispatch = useDispatch();
useEffect(() => {
......@@ -212,14 +226,8 @@ export default function Navigation({ collectionsData = [] }) {
}}
>
<Link
href={
collectionsData?.length
? `/collections/${collectionsData[0].categorySlug}`
: "#"
}
className={`nav-link ${pathname.startsWith("/collections") ? "active" : ""
}`}
onClick={() => setShow(false)}
href="/collections/kitchens"
className={`nav-link ${activeMenu === "collections" ? "active" : ""}`}
>
Collection
</Link>
......@@ -242,7 +250,7 @@ export default function Navigation({ collectionsData = [] }) {
setCollectionL2(cat.subCategories?.[0] ?? null);
}}
className={
isActive(`/collections/${cat.categorySlug}`) ? "active" : ""
segments[1] === cat.categorySlug ? "active" : ""
}
>
{cat.categoryName}
......@@ -263,11 +271,7 @@ export default function Navigation({ collectionsData = [] }) {
href={`/collections/${collectionL1?.categorySlug}/${sub.subCategorySlug}`}
onMouseEnter={() => setCollectionL2(sub)}
className={
isActive(
`/collections/${collectionL1?.categorySlug}/${sub.subCategorySlug}`
)
? "active"
: ""
segments[2] === sub.subCategorySlug ? "active" : ""
}
>
{sub.subCategoryName}
......@@ -288,11 +292,7 @@ export default function Navigation({ collectionsData = [] }) {
<Link
href={`/collections/${collectionL1?.categorySlug}/${collectionL2?.subCategorySlug}/${product.productSlug}`}
className={
isActive(
`/collections/${collectionL1?.categorySlug}/${collectionL2?.subCategorySlug}/${product.productSlug}`
)
? "active"
: ""
segments[3] === product.productSlug ? "active" : ""
}
>
{product.title}
......@@ -343,8 +343,7 @@ export default function Navigation({ collectionsData = [] }) {
>
<Link
href="/brands/valcucine"
className={`nav-link ${pathname.startsWith("/brands") ? "active" : ""
}`}
className={`nav-link ${activeMenu === "brands" ? "active" : ""}`}
>
Brands
</Link>
......@@ -369,6 +368,7 @@ export default function Navigation({ collectionsData = [] }) {
<Image
width={177}
height={60}
alt="valcucine"
src="/image/header-logo/valcucine.png"
/>
</Link>
......@@ -376,6 +376,7 @@ export default function Navigation({ collectionsData = [] }) {
<Image
width={177}
height={60}
alt="rimadesio"
src="/image/header-logo/rimadesio.png"
/>
</Link>
......@@ -383,6 +384,7 @@ export default function Navigation({ collectionsData = [] }) {
<Image
width={177}
height={60}
alt="inalco"
src="/image/header-logo/inalco.png"
/>
</Link>
......@@ -395,29 +397,29 @@ export default function Navigation({ collectionsData = [] }) {
{/* <Nav.Link as={Link} href="/brands/doors">
Brands
</Nav.Link> */}
<Nav.Link
as={Link}
<Link
href="/about"
className={isActive("/about") ? "active" : ""}
className={`nav-link ${activeMenu === "about" ? "active" : ""}`}
>
About
</Nav.Link>
</Link>
<Link
<Nav.Link
as={Link}
href="/catalogue"
className={isActive("/catalogue") ? "active" : ""}
className={`nav-link ${activeMenu === "catalogue" ? "active" : ""}`}
>
Catalogue
</Nav.Link>
</Link>
<Link
<Nav.Link
as={Link}
href="/connect"
className={isActive("/connect") ? "active" : ""}
className={`nav-link ${activeMenu === "connect" ? "active" : ""}`}
>
Connect
</Nav.Link>
</Link>
</Nav>
</div>
......
components/Layout/SubMenu.js
......@@ -5,13 +5,8 @@ import { cleanImage } from '../services/imageHandling'
import Image from 'next/image'
export const SubMenu = ({ data, menuTitle }) => {
// console.log(data, 'menudata');
const { classname, headerLeft, headerRight } = data;
return (
<section className='submenu_header_desktop'>
<div className='custom_container container'>
......
components/Rimadesios/CompanyOverview.js
......@@ -45,11 +45,11 @@ const overviewData =[
image:"/image/brands/rimadesio/overview/06.png"
},
]
const CompanyOverview = () => {
const CompanyOverview = ({companyOverviewData}) => {
return (
<section className=" brands-overview-section catalogues-sec sec_padd">
<div className="custom_container container">
{overviewData.map((item, index) => {
{companyOverviewData?.map((item, index) => {
return (
<Row className="my-5" key={index}>
......@@ -58,7 +58,7 @@ const CompanyOverview = () => {
<Image
width={868}
height={538}
src={item?.image}
src={cleanImage(item?.image?.url)}
alt={item?.title}
className="img-fluid"
/>
......
components/StoneFinishCabinet/StoneFinishCabinet.js
......@@ -4,7 +4,6 @@ import AboutInfo from './AboutInfo'
import Details from './Details'
const StoneFinishCabinet = ({ StoneFinishCabinet }) => {
console.log(StoneFinishCabinet, "StoneFinishCabinet")
return (
<>
<AboutInfo productData={StoneFinishCabinet?.aboutInfo} />
......
components/valcucines/AboutInfoBrands.js
......@@ -4,20 +4,18 @@ import Heading from "@/components/Heading";
import Image from 'next/image';
import Link from 'next/link';
const AboutInfoBrands = () => {
const AboutInfoBrands = ({infoData}) => {
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" />
<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> */}
</Col>
</Row>
......
components/valcucines/Certifications.js
......@@ -4,48 +4,8 @@ import Heading from "@/components/Heading";
import Image from "next/image";
import { cleanImage } from "../services/imageHandling";
import Link from "next/link";
const 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 = () => {
const Certifications = ({certificationsData}) => {
return (
<section className=" certifications-section sec_padd">
<div className=" container">
......@@ -54,7 +14,7 @@ const Certifications = () => {
<Heading el="h2" heading="Certifications" />
</Col>
</Row>
{CertificationsData.map((item, index) => {
{certificationsData?.cardItems?.map((item, index) => {
return (
<>
<Row className="my-5 certifications-item" key={index}>
......@@ -62,7 +22,7 @@ const Certifications = () => {
<Image
width={348}
height={304}
src={item?.image}
src={cleanImage(item?.image?.url)}
alt={item?.title}
className="img-fluid"
/>
......@@ -71,14 +31,14 @@ const Certifications = () => {
{/* FIXED HERE */}
<Col md={9}>
<div className="title">{item?.title}</div>
<div className="sub-title">{item?.subTitle}</div>
{/* <div className="sub-title">{item?.subTitle}</div> */}
<div
className="info"
dangerouslySetInnerHTML={{
__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>
</Row>
</>
......
components/valcucines/CompanyOverview.js
......@@ -3,47 +3,12 @@ import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
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 = () => {
const CompanyOverview = ({companyOverviewData}) => {
return (
<section className=" brands-overview-section catalogues-sec sec_padd">
<div className="custom_container container">
{overviewData.map((item, index) => {
{companyOverviewData?.map((item, index) => {
return (
<Row className="my-5" key={index}>
......@@ -52,7 +17,7 @@ const CompanyOverview = () => {
<Image
width={868}
height={538}
src={item?.image}
src={cleanImage(item?.image?.url)}
alt={item?.title}
className="img-fluid"
/>
......
components/valcucines/InnerBannerBrands.js
......@@ -9,28 +9,28 @@ import Heading from "@/components/Heading";
import Image from "next/image";
import React from "react";
const InnerBannerBrands = ({data}) => {
const InnerBannerBrands = ({ data }) => {
// return (
// <>
// <section className='innerbanner-section'>
// <div className='innerbanner product-details'>
// <Row>
// <Col>
// <div className='product-banner'>
// <Image width={1920} height={948} src={data?.image?.url} alt="" />
// <div className='info'>
// <Heading el="h2" heading={data?.title} />
// <div dangerouslySetInnerHTML={{__html: data?.description}}></div>
// </div>
// </div>
// </Col>
// </Row>
// </div>
// </section>
// </>
// )
return (
// return (
// <>
// <section className='innerbanner-section'>
// <div className='innerbanner product-details'>
// <Row>
// <Col>
// <div className='product-banner'>
// <Image width={1920} height={948} src={data?.image?.url} alt="" />
// <div className='info'>
// <Heading el="h2" heading={data?.title} />
// <div dangerouslySetInnerHTML={{__html: data?.description}}></div>
// </div>
// </div>
// </Col>
// </Row>
// </div>
// </section>
// </>
// )
return (
<>
<section className="innerbanner-section">
<div className="innerbanner product-details">
......@@ -52,7 +52,7 @@ const InnerBannerBrands = ({data}) => {
<Image
width={1856}
height={1086}
src={item?.url}
src={cleanImage(item?.url)}
alt=""
/>
</SwiperSlide>
......@@ -66,7 +66,7 @@ const InnerBannerBrands = ({data}) => {
)}
</div>
<div className="info">
<Heading el="h2" heading={data?.title} />
<Heading el="h2" heading={data?.title} isHtml />
<div
dangerouslySetInnerHTML={{
__html: data?.description,
......
container/Home/Catalogues.js
......@@ -69,10 +69,10 @@ const Catalogues = ({cataloguesData}) => {
<div className="collection-card">
<img
src={cleanImage(item?.image?.url)}
alt={item.title}
alt={item?.title}
className="img-fluid rounded-lg"
/>
<p className="mt-3">{item.title}</p>
<p className="mt-3">{item?.title}</p>
</div>
</SwiperSlide>
))}
......
container/Home/Collection.js
......@@ -145,7 +145,7 @@ const CollectionSlider = ({CollectionData}) => {
alt={item?.title}
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> */}
</Link>
</SwiperSlide>
......
pages/about.js
......@@ -13,7 +13,6 @@ const bannerData = [
title: "Banner",
}
];
// console.log("bannerData113", bannerData)
const breadcrumbData = [
{
href: "/",
......@@ -22,7 +21,6 @@ const breadcrumbData = [
];
const AboutPage = ({ aboutData = {} }) => {
console.log("aboutData", aboutData)
return (
<>
<Head>
......
pages/brands/inalco.js
......@@ -7,6 +7,7 @@ import Head from "next/head";
import AboutInfoBrands from "@/components/Inalco/AboutInfoBrands";
import CompanyOverview from "@/components/Inalco/CompanyOverview";
import WeCare from "@/components/Inalco/WeCare";
import { getInalcoBySlug } from "@/services/inalcoApi";
const bannerData = [
{
id: 8,
......@@ -24,9 +25,7 @@ import WeCare from "@/components/Inalco/WeCare";
}
];
console.log("bannerData", bannerData)
export default function inalcoPage({ brandData }) {
console.log("brandData new", brandData)
export default function inalcoPage({ brandData, inalcoData }) {
const breadcrumbData = [
{
href: "/brands",
......@@ -45,13 +44,28 @@ export default function inalcoPage({ brandData }) {
</Head>
<Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerBrands data={bannerData[0] || []} />
<AboutInfoBrands />
<CompanyOverview />
<WeCare />
<InnerBannerBrands data={inalcoData?.banner || []} />
<AboutInfoBrands infoData={inalcoData?.info || []} />
<CompanyOverview companyOverviewData={inalcoData?.overviewItem || []} />
<WeCare weCareData={inalcoData?.weCare || []} />
<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";
import Head from "next/head";
import AboutInfoBrands from "@/components/Rimadesios/AboutInfoBrands";
import CompanyOverview from "@/components/Rimadesios/CompanyOverview";
import { getRimadesioBySlug } from "@/services/rimadesioApi";
const bannerData = [
{
id: 8,
......@@ -25,9 +26,7 @@ import CompanyOverview from "@/components/Rimadesios/CompanyOverview";
}
];
console.log("bannerData", bannerData)
export default function rimadesiosPage({ brandData }) {
console.log("brandData new", brandData)
export default function rimadesiosPage({ brandData, rimadesioData }) {
const breadcrumbData = [
{
href: "/brands",
......@@ -46,12 +45,27 @@ export default function rimadesiosPage({ brandData }) {
</Head>
<Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerBrands data={bannerData[0] || []} />
<AboutInfoBrands />
<CompanyOverview />
<InnerBannerBrands data={rimadesioData?.banner} />
<AboutInfoBrands info Data={rimadesioData?.info} />
<CompanyOverview companyOverviewData={rimadesioData?.companyOverview} />
<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";
import { Contact } from "@/container/Home/Contact";
import { getBrandsBySlug } from "@/services/brandsApi";
import Head from "next/head";
import { getValcucineBySlug } from "@/services/valcucineApi";
const bannerData = [
{
id: 8,
......@@ -25,9 +26,8 @@ import Head from "next/head";
}
];
console.log("bannerData", bannerData)
export default function valcucinesPage({ brandData }) {
console.log("brandData new", brandData)
export default function valcucinesPage({ brandData, valcucineData }) {
const breadcrumbData = [
{
href: "/brands",
......@@ -46,13 +46,30 @@ export default function valcucinesPage({ brandData }) {
</Head>
<Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerBrands data={bannerData[0] || []} />
<AboutInfoBrands />
<CompanyOverview />
<Certifications />
<InnerBannerBrands data={valcucineData?.banner} />
<AboutInfoBrands infoData={valcucineData?.info} />
<CompanyOverview companyOverviewData={valcucineData?.companyOverview} />
<Certifications certificationsData={valcucineData?.certifications} />
<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";
import StoneFinishCabinet from "@/components/StoneFinishCabinet/StoneFinishCabinet";
const ProductPage = ({ productData, cataloguesData }) => {
console.log("productData-new", productData)
const router = useRouter();
const { category, subCategory: subCategorySlug, productSlug } = router.query;
......
pages/collections/[category]/[subCategory]/index.js
......@@ -35,7 +35,7 @@ const SubCategoryOrProductPage = ({
🟢 IF PRODUCT (2 LEVEL PRODUCT PAGE)
====================================================== */
if (type === "product") {
const subCategoryData = productData.productData;
const subCategoryData = productData?.productData;
const breadcrumbData = [
{ href: "/", label: "Collections" },
......@@ -45,7 +45,7 @@ const SubCategoryOrProductPage = ({
},
{
href: router.asPath,
label: productData.title,
label: productData?.title,
},
];
const [activeTab, setActiveTab] = useState(null);
......@@ -53,7 +53,7 @@ const SubCategoryOrProductPage = ({
const productTabs = productData?.productTabs;
useEffect(() => {
if (productTabs?.length > 0) {
setActiveTab(productTabs[0].title);
setActiveTab(productTabs[0]?.title);
}
}, [productTabs]);
const layoutType = productData?.LayoutsType;
......@@ -79,7 +79,7 @@ const isStoneLayout =
className="tab-01"
>
{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} />
<CompanyOverview
companyOverviewData={tab?.companyOverview?.items}
......@@ -125,7 +125,7 @@ const isStoneLayout =
)}
{isDoorLayout && (
<Explore productData={productData.exploreProducts} />
<Explore productData={productData?.exploreProducts} />
)}
{!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!