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 676 additions and 201 deletions
components/Brands/CompanyOverview.js
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import React from "react";
import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from 'next/image';
import Image from "next/image";
const CompanyOverview = () => {
return (
<>
<section className='about-info-section company-overview-section'>
<div className='container'>
<Row className='my-5'>
<Col md={6}>
<div className='luxury-items'>
<Image width={594} height={560} src="/image/brands-overviews/mission.png" />
<div className='title'>Mission and values</div>
<div className='info'>We place people and their well-being at the heart of everything we do, creating timeless, handcrafted kitchens that bring joy to everyday life. Through innovative design, quality materials, and a deep commitment to sustainability, we transform cooking into an extraordinary experience while respecting our planet.</div>
</div>
</Col>
<Col md={6}>
<div className='luxury-items option02'>
<Image width={570} height={629} src="/image/brands-overviews/certification.png" />
<div className='title'>Certifications</div>
<div className='info'>LEED, FSC, ISO 14001, F4 STARS</div>
</div>
</Col>
<Col md={6}>
<div className='luxury-items'>
<Image width={594} height={629} src="/image/brands-overviews/awards.png" />
<div className='title'>Awards</div>
<div className='info'>2025 Archello Product of the Year – Public vote – for New Logica
2025 Archiproducts Design Awards | Archigraphica + Vela Wall Unit
2025 iF Design Award | Architectural Scenarios
2025 iF Design Award GOLD | Artematica + New Logica
</div>
</div>
</Col>
<Col md={6}>
<div className='luxury-items option02'>
<Image width={594} height={560} 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 md={6}>
<div className='luxury-items'>
<Image width={594} height={629} src="/image/brands-overviews/esg.png" />
<div className='title'>Environmental, Social and Governance</div>
<div className='info'>We are committed to sustainable development through internationally recognized certifications and ESG principles aligned with the United Nations 2030 Agenda. By integrating environmental responsibility, social inclusion, and ethical governance into our operations, we promote transparency, protect natural resources, and foster a fair and responsible workplace. Our goal is continuous improvement toward a more sustainable and balanced future.
</div>
</div>
</Col>
<Col md={6}>
<div className='luxury-items option02'>
<Image width={594} height={560} src="/image/brands-overviews/history.png" />
<div className='title'>History</div>
<div className='info'>We place people and their well-being at the heart of everything we do, creating timeless, handcrafted kitchens that bring joy to everyday life. Through innovative design, quality materials, and a deep commitment to sustainability, we transform cooking into an extraordinary experience while respecting our planet.</div>
</div>
</Col>
</Row>
</div>
</section>
<section className="about-info-section company-overview-section">
<div className="container">
<Row className="my-5">
<Col md={6}>
<div className="luxury-items">
<Image
width={594}
height={560}
src="/image/brands-overviews/mission.png"
/>
<div className="title">Mission and values</div>
<div className="info">
We place people and their well-being at the heart of
everything we do, creating timeless, handcrafted kitchens that
bring joy to everyday life. Through innovative design, quality
materials, and a deep commitment to sustainability, we
transform cooking into an extraordinary experience while
respecting our planet.
</div>
</div>
</Col>
<Col md={6}>
<div className="luxury-items option02">
<Image
width={570}
height={629}
src="/image/brands-overviews/certification.png"
/>
<div className="title">Certifications</div>
<div className="info">LEED, FSC, ISO 14001, F4 STARS</div>
</div>
</Col>
<Col md={6}>
<div className="luxury-items">
<Image
width={594}
height={629}
src="/image/brands-overviews/awards.png"
/>
<div className="title">Awards</div>
<div className="info">
2025 Archello Product of the Year – Public vote – for New
Logica 2025 Archiproducts Design Awards | Archigraphica + Vela
Wall Unit 2025 iF Design Award | Architectural Scenarios 2025
iF Design Award GOLD | Artematica + New Logica
</div>
</div>
</Col>
<Col md={6}>
<div className="luxury-items option02">
<Image
width={594}
height={560}
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 md={6}>
<div className="luxury-items">
<Image
width={594}
height={629}
src="/image/brands-overviews/esg.png"
/>
<div className="title">
Environmental, Social and Governance
</div>
<div className="info">
We are committed to sustainable development through
internationally recognized certifications and ESG principles
aligned with the United Nations 2030 Agenda. By integrating
environmental responsibility, social inclusion, and ethical
governance into our operations, we promote transparency,
protect natural resources, and foster a fair and responsible
workplace. Our goal is continuous improvement toward a more
sustainable and balanced future.
</div>
</div>
</Col>
<Col md={6}>
<div className="luxury-items option02">
<Image
width={594}
height={560}
src="/image/brands-overviews/history.png"
/>
<div className="title">History</div>
<div className="info">
We place people and their well-being at the heart of
everything we do, creating timeless, handcrafted kitchens that
bring joy to everyday life. Through innovative design, quality
materials, and a deep commitment to sustainability, we
transform cooking into an extraordinary experience while
respecting our planet.
</div>
</div>
</Col>
</Row>
</div>
</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 = [
{ id: 5, src: "/image/gallery/05.png", col: 6 },
];
const Gallery = ({productData}) => {
console.log("productData - Gallery", productData)
const Gallery = ({ productData }) => {
console.log("productData - Gallery", productData);
useEffect(() => {
Fancybox.bind("[data-fancybox='gallery']", {
Hash: false,
......@@ -30,7 +30,6 @@ const Gallery = ({productData}) => {
return (
<section className="gallery-section sec_padd">
<Container className="custom_container">
<Row>
<Col className="d-flex justify-content-center">
<Heading el="h2" heading="Gallery" />
......@@ -38,25 +37,33 @@ const Gallery = ({productData}) => {
</Row>
<Row className="gallery-items">
{productData.map((item, index) => (
<Col key={item.id} xs={index === 2 ? 12 : 6} className="mb-4">
<div className="gallery-image-wrapper">
<a
href={cleanImage((item?.image?.url))}
data-fancybox="gallery"
>
<Image
src={cleanImage(item?.image?.url)}
alt={`Gallery image ${item.id}`}
fill
className="gallery-image"
/>
</a>
</div>
</Col>
))}
</Row>
{productData.map((item, index) => {
const isFullWidth = index % 3 === 2;
return (
<Col
key={item.id}
xs={12}
md={isFullWidth ? 12 : 6}
className="mb-4"
>
<div className="gallery-image-wrapper">
<a
href={cleanImage(item?.image?.url)}
data-fancybox="gallery"
>
<Image
src={cleanImage(item?.image?.url)}
alt={`Gallery image ${item.id}`}
fill
className="gallery-image"
/>
</a>
</div>
</Col>
);
})}
</Row>
</Container>
</section>
);
......
components/Collection/InnerDetails.js
......@@ -54,11 +54,11 @@ const InnerDetails = ({ subCategories }) => {
{/* Sub-category cards */}
<Row>
{subCategories.map((sub) => (
{subCategories?.map((sub) => (
<Col md={6} key={sub.slug}>
<div className="collections-item">
<Link
href={`/collections/${category}/${sub.slug}`}
href={sub?.show_detail_page ? `collections/${category}/${sub?.show_detail_page?.slug}` : `/collections/${category}/${sub.slug}`}
>
<Image
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}) => {
<Row>
<Col>
<div className='product-banner'>
<Image width={1856} height={1086} src={cleanImage(bannerData?.image)} alt="" />
<Image width={1856} height={1086} src={bannerData?.image} alt="" />
</div>
</Col>
</Row>
......
components/Contacts/GetInTouchForm.js
......@@ -4,7 +4,7 @@ import Heading from "@/components/Heading";
const GetInTouchForm = () => {
return (
<>
<div className="">
<div className="get-in-touch-sec">
<Row>
<Col>
<Heading el="h2" heading="Get in touch" />
......@@ -12,21 +12,22 @@ const GetInTouchForm = () => {
</Row>
<form action="" className="get-in-touch-form">
<Row>
<Col md={6} className="mb-3">
<Col md={12} className="mb-3">
<div>
<input
type="text"
placeholder="Select Request Type*"
name="selectRequestType"
className="inputField nameInput"
/>
<select className="form-select" id="requestType">
<option value="">Select Request Type</option>
<option value="general">General Inquiry</option>
<option value="support">Support</option>
<option value="quotation">Request Quotation</option>
<option value="complaint">Complaint</option>
</select>
</div>
</Col>
<Col md={6} className="mb-3">
<Col md={12} className="mb-3">
<div>
<input
type="text"
placeholder="Full Name*"
placeholder="Full Name"
name="Full Name"
className="inputField nameInput"
/>
......@@ -34,21 +35,21 @@ const GetInTouchForm = () => {
</Col>
</Row>
<Row>
<Col md={6} className="mb-3">
<Col md={12} className="mb-3">
<div>
<input
type="text"
placeholder="Mobile Number*"
placeholder="Mobile Number"
name="Mobile Number"
className="inputField nameInput"
/>
</div>
</Col>
<Col md={6} className="mb-3">
<Col md={12} className="mb-3">
<div>
<input
type="text"
placeholder="Email Address*"
placeholder="Email Address"
name="Email Address"
className="inputField nameInput"
/>
......@@ -57,24 +58,26 @@ const GetInTouchForm = () => {
</Row>
<Row>
<Col md={6} className="mb-3">
<Col md={12} className="mb-3">
<div>
<input
type="text"
placeholder="City*"
name="City"
className="inputField nameInput"
/>
<select className="form-select" id="requestType">
<option value="">City</option>
<option value="mumbai">Mumbai</option>
<option value="pune">Pune</option>
<option value="delhi">Delhi</option>
</select>
</div>
</Col>
<Col md={6} className="mb-3">
<Col md={12} className="mb-3">
<div>
<input
type="text"
placeholder="Country*"
name="Country"
className="inputField nameInput"
/>
<select className="form-select" id="requestType">
<option value="">Country</option>
<option value="India">India</option>
<option value="Dubai">Dubai</option>
<option value="Singapore">Singapore</option>
</select>
</div>
</Col>
</Row>
......@@ -82,7 +85,7 @@ const GetInTouchForm = () => {
<Row>
<Col md={12} className="mb-3">
<div>
<input
<textarea rows="4"
type="text"
placeholder="Message*"
name="Message"
......
components/Contacts/InnerContent.js
import React from "react";
import { Col, Row } from "react-bootstrap";
import GetInTouchForm from "./GetInTouchForm";
import Image from "next/image";
import Heading from "@/components/Heading";
const InnerContent = () => {
return (
<>
<section className="innercontent-section sec_padd">
<div className="custom_container">
<Row>
<Row className="align-items-center">
<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 />
</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 md={6}>
<iframe
......
components/Layout/Footer.js
......@@ -19,7 +19,7 @@ const Footer = () => {
className="mb-3"
/>
<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>
<span>
9th Floor, Nirmal Building, Nariman Point,
......
components/Layout/Header.js
......@@ -127,8 +127,8 @@ import { cleanImage } from "../services/imageHandling";
// },
// ];
export default function Navigation({collectionsData = []}) {
console.log("Navigation", collectionsData)
export default function Navigation({ collectionsData = [] }) {
console.log("Navigation", collectionsData);
const [scrolled, setScrolled] = useState(false);
const [show, setShow] = useState(false);
const [activeMenu, setActiveMenu] = useState(null);
......@@ -140,11 +140,12 @@ export default function Navigation({collectionsData = []}) {
// const [collectionL2, setCollectionL2] = useState(
// collectionsData[0].subCategories[0],
// );
const [collectionL1, setCollectionL1] = useState(collectionsData?.[0] ?? null);
const [collectionL2, setCollectionL2] = useState(
collectionsData?.[0]?.subCategories?.[0] ?? null
);
const [collectionL1, setCollectionL1] = useState(
collectionsData?.[0] ?? null,
);
const [collectionL2, setCollectionL2] = useState(
collectionsData?.[0]?.subCategories?.[0] ?? null,
);
// BRANDS
const [brandL1, setBrandL1] = useState(brandsData[0]);
......@@ -179,6 +180,9 @@ const [collectionL2, setCollectionL2] = useState(
const headerData = useSelector((state) => state.header.data);
const showLevel3 = collectionL2?.products?.length > 0;
return (
<>
<Navbar
......@@ -221,7 +225,9 @@ const [collectionL2, setCollectionL2] = useState(
<div className="dropdown-menu">
<div className="dropdown-menu-inner custom_container">
<Row>
<Col md={8}>
<Col md={showLevel3 ? 8 : 8}>
<Row>
<Col md={4}>
<h6 className="nav-head01">Collections</h6>
......@@ -249,7 +255,9 @@ const [collectionL2, setCollectionL2] = useState(
</ul>
</Col>
<Col md={4}>
<h6 className="nav-head01">{collectionL1?.categoryName}</h6>
<h6 className="nav-head01">
{collectionL1?.categoryName}
</h6>
<ul className="navList01">
{collectionL1?.subCategories.map((sub) => (
......@@ -270,48 +278,56 @@ const [collectionL2, setCollectionL2] = useState(
))}
</ul>
</Col>
<Col md={4}>
<h6 className="nav-head01">{collectionL2?.subCategoryName}</h6>
{showLevel3 && (
<Col md={4}>
<h6 className="nav-head01">
{collectionL2?.subCategoryName}
</h6>
<ul className="navList01">
{collectionL2?.products?.map((product) => (
<li key={product.productSlug}>
<Link
href={`/collections/${collectionL1?.categorySlug}/${collectionL2?.subCategorySlug}/${product.productSlug}`}
>
{product.title}
</Link>
</li>
))}
</ul>
</Col>
)}
<ul className="navList01">
{collectionL2?.products.map((product) => (
<li key={product.productSlug}>
<Link
href={`/collections/${collectionL1.categorySlug}/${collectionL2.subCategorySlug}/${product.productSlug}`}
>
{product.title}
</Link>
</li>
))}
</ul>
</Col>
</Row>
</Col>
<Col md={4}>
<Row>
{collectionL1?.subCategories
?.slice(0, 2)
.map((sub) => (
<Col md={6} key={sub.subCategorySlug}>
<Link
href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`}
onMouseEnter={() => setCollectionL2(sub)}
>
<Image
src={cleanImage(sub.subCategoryImage?.url)}
width={260}
height={280}
alt={sub.subCategoryName}
className="img-fluid"
/>
<p className="img-head mt-1">
{sub.subCategoryName}
</p>
</Link>
</Col>
))}
</Row>
</Col>
<Col md={4}>
<Row>
{collectionL1?.subCategories
?.slice(0, 2)
.map((sub) => (
<Col md={6} key={sub.subCategorySlug}>
<Link
href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`}
onMouseEnter={() => setCollectionL2(sub)}
>
<Image
src={cleanImage(sub.subCategoryImage?.url)}
width={260}
height={280}
alt={sub.subCategoryName}
className="img-fluid"
/>
<p className="img-head mt-1">
{sub.subCategoryName}
</p>
</Link>
</Col>
))}
</Row>
</Col>
</Row>
</div>
</div>
......@@ -331,19 +347,40 @@ const [collectionL2, setCollectionL2] = useState(
<div className="dropdown-menu-inner custom_container">
<Row className="justify-content-between">
<Col md={6}>
<div className="m-para">
Experience global luxury, curated by Akruti Luxe.
From kitchens to wardrobes and surfaces, we bring premium international brands together under one roof.
With a 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 className="m-para">
Experience global luxury, curated by Akruti Luxe. From
kitchens to wardrobes and surfaces, we bring premium
international brands together under one roof. With a
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>
</Col>
<Col md={5}>
<div className="m-link">
<Link href="/brands/valcucine"><Image 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 className="m-link">
<Link href="/brands/valcucine">
<Image
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>
</Col>
</Row>
</div>
......@@ -509,19 +546,37 @@ Designed to elevate every interior with timeless style and performance.
<span>{backLabel}</span>
</button>
{activeCollection.subCategories.map((sub) => (
<div
key={sub.subCategorySlug}
className="menu-item"
onClick={() => {
setActiveSubCollection(sub);
setBackLabel(activeCollection.categoryName);
setMobileStep("collection-products");
}}
>
{sub.subCategoryName} <span></span>
</div>
))}
{activeCollection?.subCategories?.map((sub) => {
const hasProducts = sub?.products?.length > 0;
if (hasProducts) {
return (
<div
key={sub.subCategorySlug}
className="menu-item"
onClick={() => {
setActiveSubCollection(sub);
setBackLabel(activeCollection.categoryName);
setMobileStep("collection-products");
}}
>
{sub.subCategoryName} <span></span>
</div>
);
}
return (
<Link
key={sub.subCategorySlug}
href={`/collections/${activeCollection?.categorySlug}/${sub.subCategorySlug}`}
className="menu-item"
onClick={() => setShow(false)}
>
{sub.subCategoryName}
</Link>
);
})}
</>
)}
......@@ -633,14 +688,14 @@ export async function getServerSideProps({ params }) {
return {
props: {
collectionsData
collectionsData,
},
};
} catch (error) {
return {
props: {
collectionsData:[]
collectionsData: [],
},
};
}
}
\ No newline at end of file
}
pages/collections/[category]/[subCategory]/[productSlug].js
......@@ -8,9 +8,12 @@ import Catalogues from "@/container/Home/Catalogues";
import { Contact } from "@/container/Home/Contact";
import { getCollectionDetailCategoryData } from "@/services/collectionDetailCategoryApi";
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 }) => {
console.log("cataloguesData", productData)
console.log("cataloguesData", productData);
const router = useRouter();
const { category, subCategory: subCategorySlug, productSlug } = router.query;
......@@ -34,15 +37,23 @@ const ProductPage = ({ productData, cataloguesData }) => {
label: productData.title,
},
];
console.log("test");
return (
<>
<Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerproduct productData={productData} />
<AboutInfo productData={productData?.aboutInfo} />
{productData?.isDoorAndPartitionsLayouts === true && <CompanyOverview />}
<Video productData={productData?.video} />
{productData?.isDoorAndPartitionsLayouts === true && <TechnicalDetails />}
<Gallery productData={productData?.gallery} />
<Catalogues cataloguesData={cataloguesData} />
{productData?.isDoorAndPartitionsLayouts === true && <Explore />}
{!productData?.isDoorAndPartitionsLayout && (
<Catalogues cataloguesData={cataloguesData} />
)}
<Contact />
</>
);
......
pages/collections/[category]/index.js
......@@ -6,7 +6,7 @@ import { getCollectionCategoryBySlug } from "@/services/collectionCategoryApi";
import { getCollectionSubCategoryData } from "@/services/collectionSubCategoryApi";
export default function CategoryPage({ categoryData, categoriesSub,collectionDataa }) {
console.log("categoriesSub", collectionDataa)
console.log("categoriesSub", categoriesSub)
if (!categoryData) {
return <h1>Category not found</h1>;
}
......
pages/contacts.js
......@@ -34,7 +34,7 @@ const ContactsPage = () => {
<link rel="icon" href="/favicon.ico" />
</Head>
<Breadcrumb breadcrumbData={breadcrumbData} />
<HeadTitle headTitleData={headTitleData[0] || []} />
{/* <HeadTitle headTitleData={headTitleData[0] || []} /> */}
<InnerBanner bannerData={bannerData[0] || []} />
<InnerContent />
</>
......
services/collectionDetailCategoryApi.js
......@@ -10,9 +10,11 @@ export async function getCollectionDetailCategoryData(productSlug) {
},
populate: {
image: true,
// isDoorAndPartitionsLayouts:true,
collection_sub_category: {
populate: true,
},
gallery: {
populate:{
image: true,
......@@ -26,6 +28,7 @@ export async function getCollectionDetailCategoryData(productSlug) {
video:true
}
},
},
};
......
services/collectionSubCategoryApi.js
......@@ -13,6 +13,7 @@ export async function getCollectionSubCategoryData(categorySlug) {
populate: {
image: true,
collection_category: true,
show_detail_page:true,
},
};
......
styles/globals.css
......@@ -308,7 +308,7 @@ button.cust-swiper-button-next {
color: #fff;
}
.inputField,
select,
textarea {
padding: 0.6rem 1.2rem;
width: 100%;
......@@ -328,10 +328,24 @@ textarea {
color: #666666;
}
.get-in-touch-form .inputField,
.get-in-touch-form textarea {
border: 0;
border-bottom: 1px solid #cccccc;
.get-in-touch-form textarea,.get-in-touch-form .form-select {
/* border: 0; */
/* border-bottom: 1px solid #cccccc; */
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 {
outline: 0 !important;
......@@ -376,7 +390,7 @@ input:focus-visible {
padding: 2rem 0;
}
.innerbanner {
padding: 2rem;
/* padding: 2rem; */
}
.innerbanner img {
width: 100%;
......@@ -433,6 +447,7 @@ input:focus-visible {
}
.about-section {
margin-bottom: 3rem;
margin-top: 3rem;
}
.about-info-section .headings {
margin-bottom: 0 !important;
......@@ -729,6 +744,28 @@ padding-top: 1rem;
.about-info-section.company-overview-section .luxury-items.option02 {
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) {
}
/* ===== Mobile ===== */
......@@ -819,6 +856,12 @@ padding-top: 1rem;
}
/* ===Media query==== */
@media (max-width: 767px) {
.contactPage-address {
padding: 0;
}
.contactPage-form {
padding: 0;
}
.about-info-section.company-overview-section .luxury-items .title {
font-size: 14px;
}
......
styles/style.css
......@@ -100,7 +100,7 @@ p {
/* ===Hedaing=== */
.heading {
color: #000;
font-size: 50px;
/* font-size: 50px; */
text-transform: uppercase;
font-family: Roboto-Regular;
}
......@@ -148,6 +148,7 @@ p {
background: var(--secondary-color);
transition: all 0.3s ease;
transform: translateX(-50%);
}
/* Hover on link */
......@@ -158,6 +159,7 @@ p {
/* Keep active when dropdown is hovered */
.custom-navbar .nav-item.dropdown-custom:hover > .nav-link {
color: var(--secondary-color);
font-weight: 700;
}
/* Animate underline */
......@@ -283,7 +285,7 @@ footer h6 {
text-transform: uppercase;
}
footer a,
li {
footer li {
color: #0f0f0f !important;
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!