Skip to content

sujata / Akruti-Frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 386b0221 by Ravindra Kanojiya
Options

updated pages

1 parent 4b1acb1a
Inline Side-by-side
Showing 73 changed files with 592 additions and 117 deletions
components/Brands/CompanyOverview.js
import React from 'react' import React from "react";
import { Col, Row } from 'react-bootstrap' 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";
const CompanyOverview = () => { const CompanyOverview = () => {
return ( return (
<> <>
<section className='about-info-section company-overview-section'> <section className="about-info-section company-overview-section">
<div className='container'> <div className="container">
<Row className='my-5'> <Row className="my-5">
<Col md={6}> <Col md={6}>
<div className='luxury-items'> <div className="luxury-items">
<Image width={594} height={560} src="/image/brands-overviews/mission.png" /> <Image
<div className='title'>Mission and values</div> width={594}
<div className='info'>We place people and their well-being at the heart of everything we do, creating timeless, handcrafted kitchens that bring joy to everyday life. Through innovative design, quality materials, and a deep commitment to sustainability, we transform cooking into an extraordinary experience while respecting our planet.</div> height={560}
src="/image/brands-overviews/mission.png"
/>
<div className="title">Mission and values</div>
<div className="info">
We place people and their well-being at the heart of
everything we do, creating timeless, handcrafted kitchens that
bring joy to everyday life. Through innovative design, quality
materials, and a deep commitment to sustainability, we
transform cooking into an extraordinary experience while
respecting our planet.
</div>
</div> </div>
</Col> </Col>
<Col md={6}> <Col md={6}>
<div className='luxury-items option02'> <div className="luxury-items option02">
<Image width={570} height={629} src="/image/brands-overviews/certification.png" /> <Image
<div className='title'>Certifications</div> width={570}
<div className='info'>LEED, FSC, ISO 14001, F4 STARS</div> height={629}
</div> src="/image/brands-overviews/certification.png"
/>
<div className="title">Certifications</div>
<div className="info">LEED, FSC, ISO 14001, F4 STARS</div>
</div>
</Col> </Col>
<Col md={6}> <Col md={6}>
<div className='luxury-items'> <div className="luxury-items">
<Image width={594} height={629} src="/image/brands-overviews/awards.png" /> <Image
<div className='title'>Awards</div> width={594}
<div className='info'>2025 Archello Product of the Year – Public vote – for New Logica height={629}
2025 Archiproducts Design Awards | Archigraphica + Vela Wall Unit src="/image/brands-overviews/awards.png"
2025 iF Design Award | Architectural Scenarios />
2025 iF Design Award GOLD | Artematica + New Logica <div className="title">Awards</div>
</div> <div className="info">
2025 Archello Product of the Year – Public vote – for New
Logica 2025 Archiproducts Design Awards | Archigraphica + Vela
Wall Unit 2025 iF Design Award | Architectural Scenarios 2025
iF Design Award GOLD | Artematica + New Logica
</div>
</div> </div>
</Col> </Col>
<Col md={6}> <Col md={6}>
<div className='luxury-items option02'> <div className="luxury-items option02">
<Image width={594} height={560} src="/image/brands-overviews/symbol.png" /> <Image
<div className='title'>Symbol and Philosophy</div> width={594}
<div className='info'>True well-being comes from living in harmony with our environment. This philosophy is reflected in our logo, inspired by an ancient symbol where the four petals represent Fire, Water, Earth, and Air united in balance. At the centre stands Man, symbolised by an unbroken circle, embodying harmony itself—echoing the timeless ideals of proportion and perfection seen in the Vitruvian Man.</div> height={560}
</div> src="/image/brands-overviews/symbol.png"
/>
<div className="title">Symbol and Philosophy</div>
<div className="info">
True well-being comes from living in harmony with our
environment. This philosophy is reflected in our logo,
inspired by an ancient symbol where the four petals represent
Fire, Water, Earth, and Air united in balance. At the centre
stands Man, symbolised by an unbroken circle, embodying
harmony itself—echoing the timeless ideals of proportion and
perfection seen in the Vitruvian Man.
</div>
</div>
</Col> </Col>
<Col md={6}> <Col md={6}>
<div className='luxury-items'> <div className="luxury-items">
<Image width={594} height={629} src="/image/brands-overviews/esg.png" /> <Image
<div className='title'>Environmental, Social and Governance</div> width={594}
<div className='info'>We are committed to sustainable development through internationally recognized certifications and ESG principles aligned with the United Nations 2030 Agenda. By integrating environmental responsibility, social inclusion, and ethical governance into our operations, we promote transparency, protect natural resources, and foster a fair and responsible workplace. Our goal is continuous improvement toward a more sustainable and balanced future. height={629}
</div> src="/image/brands-overviews/esg.png"
/>
<div className="title">
Environmental, Social and Governance
</div>
<div className="info">
We are committed to sustainable development through
internationally recognized certifications and ESG principles
aligned with the United Nations 2030 Agenda. By integrating
environmental responsibility, social inclusion, and ethical
governance into our operations, we promote transparency,
protect natural resources, and foster a fair and responsible
workplace. Our goal is continuous improvement toward a more
sustainable and balanced future.
</div>
</div> </div>
</Col> </Col>
<Col md={6}> <Col md={6}>
<div className='luxury-items option02'> <div className="luxury-items option02">
<Image width={594} height={560} src="/image/brands-overviews/history.png" /> <Image
<div className='title'>History</div> width={594}
<div className='info'>We place people and their well-being at the heart of everything we do, creating timeless, handcrafted kitchens that bring joy to everyday life. Through innovative design, quality materials, and a deep commitment to sustainability, we transform cooking into an extraordinary experience while respecting our planet.</div> height={560}
</div> src="/image/brands-overviews/history.png"
/>
<div className="title">History</div>
<div className="info">
We place people and their well-being at the heart of
everything we do, creating timeless, handcrafted kitchens that
bring joy to everyday life. Through innovative design, quality
materials, and a deep commitment to sustainability, we
transform cooking into an extraordinary experience while
respecting our planet.
</div>
</div>
</Col> </Col>
</Row> </Row>
</div> </div>
</section> </section>
</> </>
) );
} };
export default CompanyOverview export default CompanyOverview;
components/Collection/CompanyOverview.js 0 → 100644
import React from "react";
import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
const CompanyOverview = () => {
return (
<>
<section className="about-section about-info-section">
<div className="container">
<Row className='my-5'>
<Col md={6}>
<div className='luxury-items'>
<Image width={806} height={560} src="/image/luxury01.png" />
<div className='info'>Its minimalist design language allows it to complement both modern and classic interiors with ease.
From subtle matte finishes to high-gloss elegance, every variation reflects refined craftsmanship.</div>
</div>
</Col>
<Col md={6}>
<div className='luxury-items option02'>
<Image width={570} height={629} src="/image/luxury02.png" />
<div className='info'>Its minimalist design language allows it to complement both modern and classic interiors with ease.
From subtle matte finishes to high-gloss elegance, every variation reflects refined craftsmanship.</div>
</div>
</Col>
</Row>
</div>
</section>
</>
);
};
export default CompanyOverview;
components/Collection/Explore.js 0 → 100644
import Link from "next/link";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import Image from "next/image"; // ✅ MISSING IMPORT
import Heading from "@/components/Heading";
const exploreData = [
{
id: 1,
image: "/image/explore/01.png",
name: "ABS",
slug: "abs",
},
{
id: 2,
image: "/image/explore/02.png",
name: "Laminate",
slug: "laminate",
},
];
const Explore = () => {
return (
<section className="explore-section mb-5">
<Container className="custom_container">
<Row className="text-center justify-content-center">
<Col md={8}>
<Heading el="h2" heading="Explore Our Crafted Products" />
</Col>
</Row>
<Row>
{exploreData.map((item) => (
<Col md={6} key={item.id}>
<div className="collections-item">
<Link href={`/collections/${item.slug}`} className="d-block">
<Image
src={item.image}
width={868}
height={560}
alt={item.name}
className="img-fluid"
/>
<div className="title">{item.name}</div>
</Link>
</div>
</Col>
))}
</Row>
<Row>
<Col>
<div className="text-center">
<button className="btn3">View More <i className="fa-solid fa-arrow-right"></i></button>
</div>
</Col>
</Row>
</Container>
</section>
);
};
export default Explore;
components/Collection/Gallery.js
...@@ -14,8 +14,8 @@ const galleryData = [ ...@@ -14,8 +14,8 @@ const galleryData = [
{ id: 5, src: "/image/gallery/05.png", col: 6 }, { id: 5, src: "/image/gallery/05.png", col: 6 },
]; ];
const Gallery = ({productData}) => { const Gallery = ({ productData }) => {
console.log("productData - Gallery", productData) console.log("productData - Gallery", productData);
useEffect(() => { useEffect(() => {
Fancybox.bind("[data-fancybox='gallery']", { Fancybox.bind("[data-fancybox='gallery']", {
Hash: false, Hash: false,
...@@ -30,7 +30,6 @@ const Gallery = ({productData}) => { ...@@ -30,7 +30,6 @@ const Gallery = ({productData}) => {
return ( return (
<section className="gallery-section sec_padd"> <section className="gallery-section sec_padd">
<Container className="custom_container"> <Container className="custom_container">
<Row> <Row>
<Col className="d-flex justify-content-center"> <Col className="d-flex justify-content-center">
<Heading el="h2" heading="Gallery" /> <Heading el="h2" heading="Gallery" />
...@@ -38,11 +37,19 @@ const Gallery = ({productData}) => { ...@@ -38,11 +37,19 @@ const Gallery = ({productData}) => {
</Row> </Row>
<Row className="gallery-items"> <Row className="gallery-items">
{productData.map((item, index) => ( {productData.map((item, index) => {
<Col key={item.id} xs={index === 2 ? 12 : 6} className="mb-4"> const isFullWidth = index % 3 === 2;
return (
<Col
key={item.id}
xs={12}
md={isFullWidth ? 12 : 6}
className="mb-4"
>
<div className="gallery-image-wrapper"> <div className="gallery-image-wrapper">
<a <a
href={cleanImage((item?.image?.url))} href={cleanImage(item?.image?.url)}
data-fancybox="gallery" data-fancybox="gallery"
> >
<Image <Image
...@@ -54,9 +61,9 @@ const Gallery = ({productData}) => { ...@@ -54,9 +61,9 @@ const Gallery = ({productData}) => {
</a> </a>
</div> </div>
</Col> </Col>
))} );
})}
</Row> </Row>
</Container> </Container>
</section> </section>
); );
......
components/Collection/InnerDetails.js
...@@ -54,11 +54,11 @@ const InnerDetails = ({ subCategories }) => { ...@@ -54,11 +54,11 @@ const InnerDetails = ({ subCategories }) => {
{/* Sub-category cards */} {/* Sub-category cards */}
<Row> <Row>
{subCategories.map((sub) => ( {subCategories?.map((sub) => (
<Col md={6} key={sub.slug}> <Col md={6} key={sub.slug}>
<div className="collections-item"> <div className="collections-item">
<Link <Link
href={`/collections/${category}/${sub.slug}`} href={sub?.show_detail_page ? `collections/${category}/${sub?.show_detail_page?.slug}` : `/collections/${category}/${sub.slug}`}
> >
<Image <Image
width={868} width={868}
......
components/Collection/TechnicalDetails.js 0 → 100644
import React from "react";
import { Accordion, Col, Container, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
const technicalDetailsData = [
{
id: "0",
title: "CARCASS",
image: "/image/technical-details/01.png",
details: [
{
label: "Characteristics",
value:
"Crafted from 19 mm premium wood particle board panels, engineered for durability and performance. Specially treated with high-performance melamine resin, making it suitable for damp indoor spaces. Designed with low formaldehyde emission, ensuring a healthier and safer environment.",
},
{ label: "Height", value: "790 mm" },
{ label: "Depth Options", value: "320 mm / 600 mm" },
{
label: "Width Options",
value: "150 mm / 300 mm / 450 mm / 600 mm / 900 mm / 1200 mm",
},
],
},
{
id: "1",
title: "DOORS AND FRONT PANELS",
image: "/image/technical-details/01.png",
details: [
{
label: "Characteristics",
value:
"Crafted from 19 mm premium wood particle board panels, engineered for durability and performance.",
},
{ label: "Height", value: "790 mm" },
{ label: "Depth Options", value: "320 mm / 600 mm" },
{
label: "Width Options",
value: "150 mm / 300 mm / 450 mm / 600 mm / 900 mm / 1200 mm",
},
],
},
{
id: "2",
title: "WORKTOPS",
image: "/image/technical-details/01.png",
details: [
{
label: "Characteristics",
value:
"Crafted from 19 mm premium wood particle board panels, engineered for durability and performance. Specially treated with high-performance melamine resin, making it suitable for damp indoor spaces. Designed with low formaldehyde emission, ensuring a healthier and safer environment.",
},
{ label: "Height", value: "790 mm" },
{ label: "Depth Options", value: "320 mm / 600 mm" },
{
label: "Width Options",
value: "150 mm / 300 mm / 450 mm / 600 mm / 900 mm / 1200 mm",
},
],
},
{
id: "3",
title: "HANDLES",
image: "/image/technical-details/01.png",
details: [
{
label: "Characteristics",
value:
"Crafted from 19 mm premium wood particle board panels, engineered for durability and performance. Specially treated with high-performance melamine resin, making it suitable for damp indoor spaces. Designed with low formaldehyde emission, ensuring a healthier and safer environment.",
},
{ label: "Height", value: "790 mm" },
{ label: "Depth Options", value: "320 mm / 600 mm" },
{
label: "Width Options",
value: "150 mm / 300 mm / 450 mm / 600 mm / 900 mm / 1200 mm",
},
],
},
{
id: "4",
title: "FRONT FINISHES",
image: "/image/technical-details/01.png",
details: [
{
label: "Characteristics",
value:
"Crafted from 19 mm premium wood particle board panels, engineered for durability and performance. Specially treated with high-performance melamine resin, making it suitable for damp indoor spaces. Designed with low formaldehyde emission, ensuring a healthier and safer environment.",
},
{ label: "Height", value: "790 mm" },
{ label: "Depth Options", value: "320 mm / 600 mm" },
{
label: "Width Options",
value: "150 mm / 300 mm / 450 mm / 600 mm / 900 mm / 1200 mm",
},
],
},
];
const TechnicalDetails = () => {
return (
<>
<section className="technicalDetails-section catalogues-sec sec_padd">
<Container className="custom_container">
<Row>
<Col className="d-flex justify-content-center">
<Heading el="h2" heading="Technical Details" />
</Col>
</Row>
<Row>
<Col>
<div className="accordion01">
<Accordion defaultActiveKey="0">
{technicalDetailsData.map((item) => (
<Accordion.Item eventKey={item.id} key={item.id}>
<Accordion.Header>{item.title}</Accordion.Header>
<Accordion.Body>
<Row>
<Col md={5}>
<div className="image">
<Image
src={item.image}
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">{detail.value}</div>
</div>
))}
</Col>
</Row>
</Accordion.Body>
</Accordion.Item>
))}
</Accordion>
</div>
</Col>
</Row>
</Container>
</section>
</>
);
};
export default TechnicalDetails;
components/Common/InnerBanner.js
...@@ -12,7 +12,7 @@ const InnerBanner = ({bannerData}) => { ...@@ -12,7 +12,7 @@ const InnerBanner = ({bannerData}) => {
<Row> <Row>
<Col> <Col>
<div className='product-banner'> <div className='product-banner'>
<Image width={1856} height={1086} src={cleanImage(bannerData?.image)} alt="" /> <Image width={1856} height={1086} src={bannerData?.image} alt="" />
</div> </div>
</Col> </Col>
</Row> </Row>
......
components/Contacts/GetInTouchForm.js
...@@ -4,7 +4,7 @@ import Heading from "@/components/Heading"; ...@@ -4,7 +4,7 @@ import Heading from "@/components/Heading";
const GetInTouchForm = () => { const GetInTouchForm = () => {
return ( return (
<> <>
<div className=""> <div className="get-in-touch-sec">
<Row> <Row>
<Col> <Col>
<Heading el="h2" heading="Get in touch" /> <Heading el="h2" heading="Get in touch" />
...@@ -12,21 +12,22 @@ const GetInTouchForm = () => { ...@@ -12,21 +12,22 @@ const GetInTouchForm = () => {
</Row> </Row>
<form action="" className="get-in-touch-form"> <form action="" className="get-in-touch-form">
<Row> <Row>
<Col md={6} className="mb-3"> <Col md={12} className="mb-3">
<div> <div>
<input <select className="form-select" id="requestType">
type="text" <option value="">Select Request Type</option>
placeholder="Select Request Type*" <option value="general">General Inquiry</option>
name="selectRequestType" <option value="support">Support</option>
className="inputField nameInput" <option value="quotation">Request Quotation</option>
/> <option value="complaint">Complaint</option>
</select>
</div> </div>
</Col> </Col>
<Col md={6} className="mb-3"> <Col md={12} className="mb-3">
<div> <div>
<input <input
type="text" type="text"
placeholder="Full Name*" placeholder="Full Name"
name="Full Name" name="Full Name"
className="inputField nameInput" className="inputField nameInput"
/> />
...@@ -34,21 +35,21 @@ const GetInTouchForm = () => { ...@@ -34,21 +35,21 @@ const GetInTouchForm = () => {
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col md={6} className="mb-3"> <Col md={12} className="mb-3">
<div> <div>
<input <input
type="text" type="text"
placeholder="Mobile Number*" placeholder="Mobile Number"
name="Mobile Number" name="Mobile Number"
className="inputField nameInput" className="inputField nameInput"
/> />
</div> </div>
</Col> </Col>
<Col md={6} className="mb-3"> <Col md={12} className="mb-3">
<div> <div>
<input <input
type="text" type="text"
placeholder="Email Address*" placeholder="Email Address"
name="Email Address" name="Email Address"
className="inputField nameInput" className="inputField nameInput"
/> />
...@@ -57,24 +58,26 @@ const GetInTouchForm = () => { ...@@ -57,24 +58,26 @@ const GetInTouchForm = () => {
</Row> </Row>
<Row> <Row>
<Col md={6} className="mb-3"> <Col md={12} className="mb-3">
<div> <div>
<input <select className="form-select" id="requestType">
type="text" <option value="">City</option>
placeholder="City*" <option value="mumbai">Mumbai</option>
name="City" <option value="pune">Pune</option>
className="inputField nameInput" <option value="delhi">Delhi</option>
/> </select>
</div> </div>
</Col> </Col>
<Col md={6} className="mb-3"> <Col md={12} className="mb-3">
<div> <div>
<input <select className="form-select" id="requestType">
type="text" <option value="">Country</option>
placeholder="Country*" <option value="India">India</option>
name="Country" <option value="Dubai">Dubai</option>
className="inputField nameInput" <option value="Singapore">Singapore</option>
/> </select>
</div> </div>
</Col> </Col>
</Row> </Row>
...@@ -82,7 +85,7 @@ const GetInTouchForm = () => { ...@@ -82,7 +85,7 @@ const GetInTouchForm = () => {
<Row> <Row>
<Col md={12} className="mb-3"> <Col md={12} className="mb-3">
<div> <div>
<input <textarea rows="4"
type="text" type="text"
placeholder="Message*" placeholder="Message*"
name="Message" name="Message"
......
components/Contacts/InnerContent.js
import React from "react"; import React from "react";
import { Col, Row } from "react-bootstrap"; import { Col, Row } from "react-bootstrap";
import GetInTouchForm from "./GetInTouchForm"; import GetInTouchForm from "./GetInTouchForm";
import Image from "next/image";
import Heading from "@/components/Heading";
const InnerContent = () => { const InnerContent = () => {
return ( return (
<> <>
<section className="innercontent-section sec_padd"> <section className="innercontent-section sec_padd">
<div className="custom_container"> <div className="custom_container">
<Row> <Row className="align-items-center">
<Col md={6}> <Col md={6}>
<div className="">
<Image
className="img-fluid"
width={944}
height={1140}
src="/image/contact-us.png"
/>
</div>
</Col>
<Col md={6}>
<div className="contactPage-form">
<div className="top-head">
<Heading el="h2" heading="Let’s Connect" />
<div>
Every strong project begins with clarity. Tell us what
you’re imagining,we’ll help shape it into a finished
reality.
</div>
</div>
<GetInTouchForm /> <GetInTouchForm />
</div>
</Col>
</Row>
<Row className="mt-5 align-items-center">
<Col md={6} className="d-flex justify-content-md-center">
<div className="contactPage-address">
<Heading el="h2" heading="Akruti Luxe HEADQUARTERS" />
<ul className="list-unstyled">
<li className="d-flex mb-3 gap-3 align-items-baseline">
<i className="fa-solid fa-location-dot"></i>
<span>
Akruti Luxe Pvt. Ltd.<br />
8A Raghuvanshi Mill compound, Senapati Bapat Marg,<br /> Lower Parel, Mumbai, Maharashtra 400013
</span>
</li>
<li className="d-flex align-items-center mb-3 gap-3">
<i className="fa-solid fa-envelope"></i>
<a href="mailto:Info@akrutiliving.in">
Info@akrutiliving.in
</a>
</li>
<li className="d-flex align-items-center gap-3">
<i className="fa-solid fa-phone"></i>
<a href="tel:+9196460 01333">+91 | 96460 01333 </a> /
<a href="tel:+9184510 03207">+91 | 84510 03207</a>
</li>
</ul>
</div>
</Col> </Col>
<Col md={6}> <Col md={6}>
<iframe <iframe
......
components/Layout/Footer.js
...@@ -19,7 +19,7 @@ const Footer = () => { ...@@ -19,7 +19,7 @@ const Footer = () => {
className="mb-3" className="mb-3"
/> />
<ul className="list-unstyled"> <ul className="list-unstyled">
<li className="d-flex mb-3 gap-2"> <li className="d-flex mb-3 gap-2 align-items-baseline">
<i className="fa-solid fa-location-dot"></i> <i className="fa-solid fa-location-dot"></i>
<span> <span>
9th Floor, Nirmal Building, Nariman Point, 9th Floor, Nirmal Building, Nariman Point,
......
components/Layout/Header.js
...@@ -127,8 +127,8 @@ import { cleanImage } from "../services/imageHandling"; ...@@ -127,8 +127,8 @@ import { cleanImage } from "../services/imageHandling";
// }, // },
// ]; // ];
export default function Navigation({collectionsData = []}) { export default function Navigation({ collectionsData = [] }) {
console.log("Navigation", collectionsData) console.log("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);
...@@ -140,11 +140,12 @@ export default function Navigation({collectionsData = []}) { ...@@ -140,11 +140,12 @@ export default function Navigation({collectionsData = []}) {
// const [collectionL2, setCollectionL2] = useState( // const [collectionL2, setCollectionL2] = useState(
// collectionsData[0].subCategories[0], // collectionsData[0].subCategories[0],
// ); // );
const [collectionL1, setCollectionL1] = useState(collectionsData?.[0] ?? null); const [collectionL1, setCollectionL1] = useState(
const [collectionL2, setCollectionL2] = useState( collectionsData?.[0] ?? null,
collectionsData?.[0]?.subCategories?.[0] ?? null );
); const [collectionL2, setCollectionL2] = useState(
collectionsData?.[0]?.subCategories?.[0] ?? null,
);
// BRANDS // BRANDS
const [brandL1, setBrandL1] = useState(brandsData[0]); const [brandL1, setBrandL1] = useState(brandsData[0]);
...@@ -179,6 +180,9 @@ const [collectionL2, setCollectionL2] = useState( ...@@ -179,6 +180,9 @@ const [collectionL2, setCollectionL2] = useState(
const headerData = useSelector((state) => state.header.data); const headerData = useSelector((state) => state.header.data);
const showLevel3 = collectionL2?.products?.length > 0;
return ( return (
<> <>
<Navbar <Navbar
...@@ -221,7 +225,9 @@ const [collectionL2, setCollectionL2] = useState( ...@@ -221,7 +225,9 @@ const [collectionL2, setCollectionL2] = useState(
<div className="dropdown-menu"> <div className="dropdown-menu">
<div className="dropdown-menu-inner custom_container"> <div className="dropdown-menu-inner custom_container">
<Row> <Row>
<Col md={8}> <Col md={showLevel3 ? 8 : 8}>
<Row> <Row>
<Col md={4}> <Col md={4}>
<h6 className="nav-head01">Collections</h6> <h6 className="nav-head01">Collections</h6>
...@@ -249,7 +255,9 @@ const [collectionL2, setCollectionL2] = useState( ...@@ -249,7 +255,9 @@ const [collectionL2, setCollectionL2] = useState(
</ul> </ul>
</Col> </Col>
<Col md={4}> <Col md={4}>
<h6 className="nav-head01">{collectionL1?.categoryName}</h6> <h6 className="nav-head01">
{collectionL1?.categoryName}
</h6>
<ul className="navList01"> <ul className="navList01">
{collectionL1?.subCategories.map((sub) => ( {collectionL1?.subCategories.map((sub) => (
...@@ -270,14 +278,17 @@ const [collectionL2, setCollectionL2] = useState( ...@@ -270,14 +278,17 @@ const [collectionL2, setCollectionL2] = useState(
))} ))}
</ul> </ul>
</Col> </Col>
{showLevel3 && (
<Col md={4}> <Col md={4}>
<h6 className="nav-head01">{collectionL2?.subCategoryName}</h6> <h6 className="nav-head01">
{collectionL2?.subCategoryName}
</h6>
<ul className="navList01"> <ul className="navList01">
{collectionL2?.products.map((product) => ( {collectionL2?.products?.map((product) => (
<li key={product.productSlug}> <li key={product.productSlug}>
<Link <Link
href={`/collections/${collectionL1.categorySlug}/${collectionL2.subCategorySlug}/${product.productSlug}`} href={`/collections/${collectionL1?.categorySlug}/${collectionL2?.subCategorySlug}/${product.productSlug}`}
> >
{product.title} {product.title}
</Link> </Link>
...@@ -285,8 +296,11 @@ const [collectionL2, setCollectionL2] = useState( ...@@ -285,8 +296,11 @@ const [collectionL2, setCollectionL2] = useState(
))} ))}
</ul> </ul>
</Col> </Col>
)}
</Row> </Row>
</Col> </Col>
<Col md={4}> <Col md={4}>
<Row> <Row>
{collectionL1?.subCategories {collectionL1?.subCategories
...@@ -312,6 +326,8 @@ const [collectionL2, setCollectionL2] = useState( ...@@ -312,6 +326,8 @@ const [collectionL2, setCollectionL2] = useState(
))} ))}
</Row> </Row>
</Col> </Col>
</Row> </Row>
</div> </div>
</div> </div>
...@@ -332,17 +348,38 @@ const [collectionL2, setCollectionL2] = useState( ...@@ -332,17 +348,38 @@ const [collectionL2, setCollectionL2] = useState(
<Row className="justify-content-between"> <Row className="justify-content-between">
<Col md={6}> <Col md={6}>
<div className="m-para"> <div className="m-para">
Experience global luxury, curated by Akruti Luxe. Experience global luxury, curated by Akruti Luxe. From
From kitchens to wardrobes and surfaces, we bring premium international brands together under one roof. kitchens to wardrobes and surfaces, we bring premium
With a focus on quality, detailing, and design excellence, we offer refined solutions for modern luxury spaces. international brands together under one roof. With a
Designed to elevate every interior with timeless style and performance. focus on quality, detailing, and design excellence, we
offer refined solutions for modern luxury spaces.
Designed to elevate every interior with timeless style
and performance.
</div> </div>
</Col> </Col>
<Col md={5}> <Col md={5}>
<div className="m-link"> <div className="m-link">
<Link href="/brands/valcucine"><Image width={177} height={60} src="/image/header-logo/valcucine.png" /></Link> <Link href="/brands/valcucine">
<Link href="/brands/rimadesio"><Image width={177} height={60} src="/image/header-logo/rimadesio.png" /></Link> <Image
<Link href="/brands/inalco"><Image width={177} height={60} src="/image/header-logo/inalco.png" /></Link> width={177}
height={60}
src="/image/header-logo/valcucine.png"
/>
</Link>
<Link href="/brands/rimadesio">
<Image
width={177}
height={60}
src="/image/header-logo/rimadesio.png"
/>
</Link>
<Link href="/brands/inalco">
<Image
width={177}
height={60}
src="/image/header-logo/inalco.png"
/>
</Link>
</div> </div>
</Col> </Col>
</Row> </Row>
...@@ -509,7 +546,11 @@ Designed to elevate every interior with timeless style and performance. ...@@ -509,7 +546,11 @@ Designed to elevate every interior with timeless style and performance.
<span>{backLabel}</span> <span>{backLabel}</span>
</button> </button>
{activeCollection.subCategories.map((sub) => ( {activeCollection?.subCategories?.map((sub) => {
const hasProducts = sub?.products?.length > 0;
if (hasProducts) {
return (
<div <div
key={sub.subCategorySlug} key={sub.subCategorySlug}
className="menu-item" className="menu-item"
...@@ -521,7 +562,21 @@ Designed to elevate every interior with timeless style and performance. ...@@ -521,7 +562,21 @@ Designed to elevate every interior with timeless style and performance.
> >
{sub.subCategoryName} <span></span> {sub.subCategoryName} <span></span>
</div> </div>
))} );
}
return (
<Link
key={sub.subCategorySlug}
href={`/collections/${activeCollection?.categorySlug}/${sub.subCategorySlug}`}
className="menu-item"
onClick={() => setShow(false)}
>
{sub.subCategoryName}
</Link>
);
})}
</> </>
)} )}
...@@ -633,13 +688,13 @@ export async function getServerSideProps({ params }) { ...@@ -633,13 +688,13 @@ export async function getServerSideProps({ params }) {
return { return {
props: { props: {
collectionsData collectionsData,
}, },
}; };
} catch (error) { } catch (error) {
return { return {
props: { props: {
collectionsData:[] collectionsData: [],
}, },
}; };
} }
......
pages/collections/[category]/[subCategory]/[productSlug].js
...@@ -8,9 +8,12 @@ import Catalogues from "@/container/Home/Catalogues"; ...@@ -8,9 +8,12 @@ import Catalogues from "@/container/Home/Catalogues";
import { Contact } from "@/container/Home/Contact"; import { Contact } from "@/container/Home/Contact";
import { getCollectionDetailCategoryData } from "@/services/collectionDetailCategoryApi"; import { getCollectionDetailCategoryData } from "@/services/collectionDetailCategoryApi";
import { getCataloguesBySlug } from "@/services/cataloguesApi"; import { getCataloguesBySlug } from "@/services/cataloguesApi";
import CompanyOverview from "@/components/Collection/CompanyOverview";
import TechnicalDetails from "@/components/Collection/TechnicalDetails";
import Explore from "@/components/Collection/Explore";
const ProductPage = ({ productData, cataloguesData }) => { const ProductPage = ({ productData, cataloguesData }) => {
console.log("cataloguesData", productData) console.log("cataloguesData", productData);
const router = useRouter(); const router = useRouter();
const { category, subCategory: subCategorySlug, productSlug } = router.query; const { category, subCategory: subCategorySlug, productSlug } = router.query;
...@@ -34,15 +37,23 @@ const ProductPage = ({ productData, cataloguesData }) => { ...@@ -34,15 +37,23 @@ const ProductPage = ({ productData, cataloguesData }) => {
label: productData.title, label: productData.title,
}, },
]; ];
console.log("test");
return ( return (
<> <>
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerproduct productData={productData} /> <InnerBannerproduct productData={productData} />
<AboutInfo productData={productData?.aboutInfo} /> <AboutInfo productData={productData?.aboutInfo} />
{productData?.isDoorAndPartitionsLayouts === true && <CompanyOverview />}
<Video productData={productData?.video} /> <Video productData={productData?.video} />
{productData?.isDoorAndPartitionsLayouts === true && <TechnicalDetails />}
<Gallery productData={productData?.gallery} /> <Gallery productData={productData?.gallery} />
{productData?.isDoorAndPartitionsLayouts === true && <Explore />}
{!productData?.isDoorAndPartitionsLayout && (
<Catalogues cataloguesData={cataloguesData} /> <Catalogues cataloguesData={cataloguesData} />
)}
<Contact /> <Contact />
</> </>
); );
......
pages/collections/[category]/index.js
...@@ -6,7 +6,7 @@ import { getCollectionCategoryBySlug } from "@/services/collectionCategoryApi"; ...@@ -6,7 +6,7 @@ import { getCollectionCategoryBySlug } from "@/services/collectionCategoryApi";
import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi"; import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi";
export default function CategoryPage({ categoryData, categoriesSub,collectionDataa }) { export default function CategoryPage({ categoryData, categoriesSub,collectionDataa }) {
console.log("categoriesSub", collectionDataa) console.log("categoriesSub", categoriesSub)
if (!categoryData) { if (!categoryData) {
return <h1>Category not found</h1>; return <h1>Category not found</h1>;
} }
......
pages/contacts.js
...@@ -34,7 +34,7 @@ const ContactsPage = () => { ...@@ -34,7 +34,7 @@ const ContactsPage = () => {
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
<HeadTitle headTitleData={headTitleData[0] || []} /> {/* <HeadTitle headTitleData={headTitleData[0] || []} /> */}
<InnerBanner bannerData={bannerData[0] || []} /> <InnerBanner bannerData={bannerData[0] || []} />
<InnerContent /> <InnerContent />
</> </>
......
services/collectionDetailCategoryApi.js
...@@ -10,9 +10,11 @@ export async function getCollectionDetailCategoryData(productSlug) { ...@@ -10,9 +10,11 @@ export async function getCollectionDetailCategoryData(productSlug) {
}, },
populate: { populate: {
image: true, image: true,
// isDoorAndPartitionsLayouts:true,
collection_sub_category: { collection_sub_category: {
populate: true, populate: true,
}, },
gallery: { gallery: {
populate:{ populate:{
image: true, image: true,
...@@ -26,6 +28,7 @@ export async function getCollectionDetailCategoryData(productSlug) { ...@@ -26,6 +28,7 @@ export async function getCollectionDetailCategoryData(productSlug) {
video:true video:true
} }
}, },
}, },
}; };
......
services/collectionSubCategoryApi.js
...@@ -13,6 +13,7 @@ export async function getCollectionSubCategoryData(categorySlug) { ...@@ -13,6 +13,7 @@ export async function getCollectionSubCategoryData(categorySlug) {
populate: { populate: {
image: true, image: true,
collection_category: true, collection_category: true,
show_detail_page:true,
}, },
}; };
......
styles/globals.css
...@@ -308,7 +308,7 @@ button.cust-swiper-button-next { ...@@ -308,7 +308,7 @@ button.cust-swiper-button-next {
color: #fff; color: #fff;
} }
.inputField, .inputField,
select,
textarea { textarea {
padding: 0.6rem 1.2rem; padding: 0.6rem 1.2rem;
width: 100%; width: 100%;
...@@ -328,10 +328,24 @@ textarea { ...@@ -328,10 +328,24 @@ textarea {
color: #666666; color: #666666;
} }
.get-in-touch-form .inputField, .get-in-touch-form .inputField,
.get-in-touch-form textarea { .get-in-touch-form textarea,.get-in-touch-form .form-select {
border: 0; /* border: 0; */
border-bottom: 1px solid #cccccc; /* border-bottom: 1px solid #cccccc; */
color: #666666; color: #666666;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.20);
}
.get-in-touch-form .form-select{
width: 100%;
padding: 0.6rem 1.2rem;
border: 0.2px solid #fff;
color: #666666;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.20);
}
.form-select:focus{
box-shadow: none;
} }
input:focus-visible { input:focus-visible {
outline: 0 !important; outline: 0 !important;
...@@ -376,7 +390,7 @@ input:focus-visible { ...@@ -376,7 +390,7 @@ input:focus-visible {
padding: 2rem 0; padding: 2rem 0;
} }
.innerbanner { .innerbanner {
padding: 2rem; /* padding: 2rem; */
} }
.innerbanner img { .innerbanner img {
width: 100%; width: 100%;
...@@ -433,6 +447,7 @@ input:focus-visible { ...@@ -433,6 +447,7 @@ input:focus-visible {
} }
.about-section { .about-section {
margin-bottom: 3rem; margin-bottom: 3rem;
margin-top: 3rem;
} }
.about-info-section .headings { .about-info-section .headings {
margin-bottom: 0 !important; margin-bottom: 0 !important;
...@@ -729,6 +744,28 @@ padding-top: 1rem; ...@@ -729,6 +744,28 @@ padding-top: 1rem;
.about-info-section.company-overview-section .luxury-items.option02 { .about-info-section.company-overview-section .luxury-items.option02 {
padding: 5rem 2rem 5rem 4rem !important; padding: 5rem 2rem 5rem 4rem !important;
} }
.custom-navbar .nav-link{
font-size: 0.73vw;
}
.contactPage-form{
padding: 0 5rem 0 5rem;
}
.get-in-touch-sec{
padding: 3rem 0 0 0;
}
.get-in-touch-sec .heading{
font-size: 1.25vw;
font-weight: 500;
}
.contactPage-address{
padding: 0 5rem;
}
.contactPage-address a{
color: #666;
}
.heading{
font-size: 1.67vw;
}
@media only screen and (max-width: 1023px) { @media only screen and (max-width: 1023px) {
} }
/* ===== Mobile ===== */ /* ===== Mobile ===== */
...@@ -819,6 +856,12 @@ padding-top: 1rem; ...@@ -819,6 +856,12 @@ padding-top: 1rem;
} }
/* ===Media query==== */ /* ===Media query==== */
@media (max-width: 767px) { @media (max-width: 767px) {
.contactPage-address {
padding: 0;
}
.contactPage-form {
padding: 0;
}
.about-info-section.company-overview-section .luxury-items .title { .about-info-section.company-overview-section .luxury-items .title {
font-size: 14px; font-size: 14px;
} }
......
styles/style.css
...@@ -100,7 +100,7 @@ p { ...@@ -100,7 +100,7 @@ p {
/* ===Hedaing=== */ /* ===Hedaing=== */
.heading { .heading {
color: #000; color: #000;
font-size: 50px; /* font-size: 50px; */
text-transform: uppercase; text-transform: uppercase;
font-family: Roboto-Regular; font-family: Roboto-Regular;
} }
...@@ -148,6 +148,7 @@ p { ...@@ -148,6 +148,7 @@ p {
background: var(--secondary-color); background: var(--secondary-color);
transition: all 0.3s ease; transition: all 0.3s ease;
transform: translateX(-50%); transform: translateX(-50%);
} }
/* Hover on link */ /* Hover on link */
...@@ -158,6 +159,7 @@ p { ...@@ -158,6 +159,7 @@ p {
/* Keep active when dropdown is hovered */ /* Keep active when dropdown is hovered */
.custom-navbar .nav-item.dropdown-custom:hover > .nav-link { .custom-navbar .nav-item.dropdown-custom:hover > .nav-link {
color: var(--secondary-color); color: var(--secondary-color);
font-weight: 700;
} }
/* Animate underline */ /* Animate underline */
...@@ -283,7 +285,7 @@ footer h6 { ...@@ -283,7 +285,7 @@ footer h6 {
text-transform: uppercase; text-transform: uppercase;
} }
footer a, footer a,
li { footer li {
color: #0f0f0f !important; color: #0f0f0f !important;
font-size: 14px; font-size: 14px;
} }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!