Skip to content

sujata / Akruti-Frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 31403dc9 by Ravindra Kanojiya
Options

all pages updated

1 parent ccdaaa27
Expand all
Inline Side-by-side
Showing 115 changed files with 2427 additions and 101 deletions
components/About/AboutAkruti.js 0 → 100644
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import Heading from "@/components/Heading";
const AboutAkruti = () => {
return (
<>
<section className='about-section'>
<div className='custom_container'>
<Row className='text-center'>
<Col>
<Heading el="h2" heading="About akruti luxe" />
<p className='mb-0 gray-text'>At Akruti Luxe, every space begins with a story. a story of aspiration, design, and purpose. With extensive experience in luxury interiors,
we've mastered the art of creating bespoke modular kitchens and wardrobes that blend beauty, innovation, and practicality.</p>
<p className='mb-0 gray-text'>Our design philosophy is built on thoughtful detailing, precise craftsmanship, and an unwavering commitment to quality.
</p>
<p className='mb-0 gray-text'>In collaboration with the renowned Italian brands Valcucine and Rimadesio,
</p>
<p className='mb-0 gray-text'>we bring the finest global design sensibilities to Indian homes. Each project is a curated experience from the first conversation to the final installation,
shaped around our clients' lifestyles and aspirations. At Akruti Luxe, we go beyond creating interiors;
we craft experiences that reflect individuality, celebrate timeless aesthetics, and elevate everyday living.</p>
</Col>
</Row>
</div>
</section>
</>
)
}
export default AboutAkruti
components/About/Experience.js 0 → 100644
import FadeInStagger from "@/components/FadeInStagger";
import Heading from "@/components/Heading";
import Image from "next/image";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
const CollectionData = [
{ image: "/image/experience/01.png" },
{ image: "/image/experience/02.png" },
{ image: "/image/experience/03.png" },
{ image: "/image/experience/01.png" },
{ image: "/image/experience/02.png" },
];
const Experience = () => {
return (
<section className="experience_sec sec_padd ">
<Container className="custom_container">
{/* Make row full height and align items center */}
<Row className="align-items-center">
<Col md={7} className="d-flex flex-column justify-content-center">
<Heading el="h2" heading="Experience Our New Showroom" />
<FadeInStagger direction="left">
{/* <h2 className="heading mb-2">About</h2> */}
<p className="gray-text">
Our newly revamped Akruti Luxe showroom in Lower Parel, Mumbai, is a celebration of design, craftsmanship, and modern luxury.
<br />
The space showcases an inspiring new display of Valcucine and Rimadesio collections — where innovation meets timeless Italian elegance.
<br />
Every corner has been thoughtfully curated to offer an immersive experience of refined living, allowing visitors to explore materials, finishes,
<br />
and details that define true sophistication. Step into our world of design excellence and
discover how Akruti Luxe transforms everyday spaces into extraordinary expressions of style.
</p>
{/* <div className="my-5"> <button className="btn4">Read More</button> </div> */}
</FadeInStagger>
</Col>
<Col md={5} className="d-flex justify-content-center">
{/* Swiper */}
<Swiper
slidesPerView={1}
spaceBetween={30}
loop={true}
allowTouchMove={true}
autoplay={false}
// speed={6000}
navigation={{
nextEl: ".cust-swiper-button-next",
prevEl: ".cust-swiper-button-prev",
}}
pagination={{ clickable: true }}
modules={[Navigation, Autoplay, Pagination]}
className="collectionSwiper"
breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 },
640: { slidesPerView: 1, spaceBetween: 15 },
992: { slidesPerView: 1, spaceBetween: 15 },
1200: { slidesPerView: 1, spaceBetween: 15 },
}}
>
{CollectionData.map((item, index) => (
<SwiperSlide key={index}>
<div className="collection-card">
<img
src={item.image}
alt={item.title}
className="img-fluid rounded-lg hover-zoom"
/>
</div>
</SwiperSlide>
))}
<div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-between align-items-center w-100">
<button className="cust-swiper-button-prev">
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
>
<rect
y="48"
width="48"
height="48"
rx="24"
transform="rotate(-90 0 48)"
fill="white"
fill-opacity="0.25"
/>
<rect
x="0.5"
y="47.5"
width="47"
height="47"
rx="23.5"
transform="rotate(-90 0.5 47.5)"
stroke="black"
stroke-opacity="0.2"
/>
<path
d="M20.6667 31L22.4375 29.1406L18.7917 25.3125H34V22.6875H18.7917L22.4375 18.8594L20.6667 17L14 24L20.6667 31Z"
fill="black"
/>
</svg>
</button>
<button className="cust-swiper-button-next">
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
>
<rect
width="48"
height="48"
rx="24"
transform="matrix(0 -1 -1 0 48 48)"
fill="white"
fill-opacity="0.25"
/>
<rect
x="-0.5"
y="-0.5"
width="47"
height="47"
rx="23.5"
transform="matrix(0 -1 -1 0 47 47)"
stroke="black"
stroke-opacity="0.2"
/>
<path
d="M27.3333 31L25.5625 29.1406L29.2083 25.3125H14V22.6875H29.2083L25.5625 18.8594L27.3333 17L34 24L27.3333 31Z"
fill="black"
/>
</svg>
</button>
</div>
</Swiper>
</Col>
</Row>
</Container>
</section>
);
};
export default Experience;
components/About/StudioHighlight.js 0 → 100644
import React from "react";
import Heading from "@/components/Heading";
import { Col, Row } from "react-bootstrap";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
const CollectionData = [
{ image: "/image/studio-highlights/01.png" },
{ image: "/image/studio-highlights/02.png" },
{ image: "/image/studio-highlights/03.png" },
{ image: "/image/studio-highlights/01.png" },
{ image: "/image/studio-highlights/02.png" },
];
const StudioHighlight = () => {
return (
<>
<section className="studiohighlight-section catalogues-sec sec_padd">
<div className="custom_container_leftAuto container">
<Row className="text-center">
<Col>
<Heading el="h2" heading="Studio Highlights" />
</Col>
</Row>
<Row>
<Col>
{/* Swiper */}
<Swiper
slidesPerView={4}
spaceBetween={30}
loop={true}
allowTouchMove={true}
autoplay={{
delay: 0,
disableOnInteraction: false,
pauseOnMouseEnter: true,
}}
speed={6000}
navigation={{
nextEl: ".cust-swiper-button-next",
prevEl: ".cust-swiper-button-prev",
}}
pagination={{ clickable: true }}
modules={[Navigation, Autoplay, Pagination]}
className="collectionSwiper"
breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 },
640: { slidesPerView: 2, spaceBetween: 20 },
992: { slidesPerView: 3, spaceBetween: 25 },
1200: { slidesPerView: 3.7, spaceBetween: 30 },
}}
>
{CollectionData.map((item, index) => (
<SwiperSlide key={index}>
<div className="collection-card">
<img
src={item.image}
alt={item.title}
className="img-fluid rounded-lg hover-zoom"
/>
</div>
</SwiperSlide>
))}
<div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-between align-items-center w-100">
<button className="cust-swiper-button-prev">
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
>
<rect
y="48"
width="48"
height="48"
rx="24"
transform="rotate(-90 0 48)"
fill="white"
fill-opacity="0.25"
/>
<rect
x="0.5"
y="47.5"
width="47"
height="47"
rx="23.5"
transform="rotate(-90 0.5 47.5)"
stroke="black"
stroke-opacity="0.2"
/>
<path
d="M20.6667 31L22.4375 29.1406L18.7917 25.3125H34V22.6875H18.7917L22.4375 18.8594L20.6667 17L14 24L20.6667 31Z"
fill="black"
/>
</svg>
</button>
<button className="cust-swiper-button-next">
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
>
<rect
width="48"
height="48"
rx="24"
transform="matrix(0 -1 -1 0 48 48)"
fill="white"
fill-opacity="0.25"
/>
<rect
x="-0.5"
y="-0.5"
width="47"
height="47"
rx="23.5"
transform="matrix(0 -1 -1 0 47 47)"
stroke="black"
stroke-opacity="0.2"
/>
<path
d="M27.3333 31L25.5625 29.1406L29.2083 25.3125H14V22.6875H29.2083L25.5625 18.8594L27.3333 17L34 24L27.3333 31Z"
fill="black"
/>
</svg>
</button>
</div>
</Swiper>
</Col>
</Row>
</div>
</section>
</>
);
};
export default StudioHighlight;
components/Brands/AboutInfoBrands.js 0 → 100644
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import Heading from "@/components/Heading";
import Image from 'next/image';
const AboutInfoBrands = () => {
return (
<>
<section className='about-section about-info-section'>
<div className='container'>
<Row className='text-center justify-content-center'>
<Col md={8}>
<Heading el="h2" heading="Where Lines Define Luxury" />
<p className='mb-3 gray-text'>The Arco Door embodies the essence of refined minimalism, where clean lines meet timeless elegance.
Crafted with precision, its sleek design brings harmony and sophistication to modern interiors. Every detail, from material selection to finish, reflects our commitment to quality and artistry.</p>
<p className='mb-3 gray-text'>The door is not just an entrance, but a seamless architectural element that elevates the entire space.
Its linear patterns create balance and rhythm, enhancing both functionality and aesthetic appeal.</p>
<p className='mb-3 gray-text'>Perfect for contemporary homes and luxury offices, it blends innovation with enduring style.
The Linéa Door transforms movement between spaces into a refined experience of design.
It is more than a door—it is a statement of modern luxury, crafted to inspire and endure.</p>
</Col>
</Row>
<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 AboutInfoBrands
components/Brands/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">
<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</button>
</div>
</Col>
</Row>
</Container>
</section>
);
};
export default Explore;
components/Brands/InnerBannerBrands.js 0 → 100644
import Image from 'next/image'
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import { cleanImage } from '../services/imageHandling'
import Heading from "@/components/Heading";
const InnerBannerBrands = ({subCategoryData}) => {
console.log("bannerData", subCategoryData)
return (
<>
<section className='innerbanner-section'>
<div className='innerbanner product-details'>
<Row>
<Col>
<div className='product-banner'>
<Image width={1856} height={1086} src={cleanImage(subCategoryData?.subCategoryImage)} alt="" />
<div className='info'>
<Heading el="h2" heading="About akruti luxe" />
<p>The Akruti Lux Collection brings together iconic brands, bespoke designs, and architectural excellence—crafted to inspire refined living.</p>
</div>
</div>
</Col>
</Row>
</div>
</section>
</>
)
}
export default InnerBannerBrands
components/Brands/InnerDetailsBrands.js 0 → 100644
import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";
import { Col, Row } from "react-bootstrap";
import { useRouter } from "next/router";
const InnerDetailsBrands = ({ subCategories }) => {
const router = useRouter();
const { category } = router.query;
const [sort, setSort] = useState("");
const handleChange = (e) => {
setSort(e.target.value);
console.log("Selected sort:", e.target.value);
};
// Safety check
if (!subCategories || !category) return null;
return (
<section className="collection-m-section sec_padd">
<div className="custom_container">
{/* Header Row */}
<Row>
<Col xs={6}>
<h3>
{category
.split("-")
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
.join(" ")}
</h3>
</Col>
<Col xs={6} className="d-flex justify-content-end">
<div className="sortby-wrapper">
<select
className="sortby-select"
value={sort}
onChange={handleChange}
>
<option value="">Sort By</option>
<option value="latest">Latest</option>
<option value="name-asc">Name: A–Z</option>
<option value="name-desc">Name: Z–A</option>
</select>
</div>
</Col>
</Row>
{/* Sub-category cards */}
<Row>
{subCategories.map((sub) => (
<Col md={6} key={sub.subCategorySlug}>
<div className="collections-item">
<Link
href={`/brands/${category}/${sub.subCategorySlug}`}
>
<Image
width={868}
height={560}
src={sub.subCategoryImage}
alt={sub.subCategoryName}
/>
<div className="title">{sub.subCategoryName}</div>
</Link>
</div>
</Col>
))}
</Row>
<Row>
<Col>
<div className="text-center">
<button className="btn3">View More</button>
</div>
</Col>
</Row>
</div>
</section>
);
};
export default InnerDetailsBrands;
components/Brands/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/Brands/Video.js 0 → 100644
import Image from "next/image";
import React, { useRef, useEffect, useState } from "react";
import { Container } from "react-bootstrap";
const Video = () => {
const videoRef = useRef(null);
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
setIsVisible(entry.isIntersecting);
},
{ threshold: 0.5 }
);
if (videoRef.current) observer.observe(videoRef.current);
return () => {
if (videoRef.current) observer.unobserve(videoRef.current);
};
}, []);
return (
<section className="video_sec sec_padd ">
<Container className="custom_container">
<Image className="w-100" width={1760} height={704} src="/image/Frame.png" />
{/* <video
ref={videoRef}
autoPlay
muted
loop
playsInline
className={`w-100 video-animate ${isVisible ? "video-visible" : ""}`}
>
<source src="/video/Akruti Video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video> */}
</Container>
</section>
);
};
export default Video;
components/Catalogue/InnerDetailsCatalogue.js 0 → 100644
import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";
import { Col, Row } from "react-bootstrap";
const CatalogueData = [
{
productSlug: "ecosophia",
title: "Ecosophia",
image: "/image/Catalogue/01.png",
},
{
productSlug: "architectural-scenarios",
title: "Architectural Scenarios",
image: "/image/Catalogue/02.png",
},
{
productSlug: "vitrum-arte",
title: "Vitrum Arte",
image: "/image/Catalogue/03.png",
},
{
productSlug: "genius-loci",
title: "Genius Loci",
image: "/image/Catalogue/04.png",
},
{
productSlug: "essenza",
title: "Essenza",
image: "/image/Catalogue/05.png",
},
{
productSlug: "domus-anthology",
title: "Domus Anthology",
image: "/image/Catalogue/06.png",
},
{
productSlug: "vitrum-arte",
title: "Vitrum Arte",
image: "/image/Catalogue/07.png",
},
{
productSlug: "ecosophia",
title: "Ecosophia",
image: "/image/Catalogue/08.png",
},
{
productSlug: "architectural-scenarios",
title: "Architectural Scenarios",
image: "/image/Catalogue/09.png",
},
];
const InnerDetailsCatalogue = ({ subCategory = "indoor-kitchen" }) => {
const [sort, setSort] = useState("");
const handleChange = (e) => {
setSort(e.target.value);
};
const sortedProducts = [...CatalogueData].sort((a, b) => {
if (sort === "name-asc") return a.title.localeCompare(b.title);
if (sort === "name-desc") return b.title.localeCompare(a.title);
return 0;
});
return (
<section className="collection-m-section sec_padd">
<div className="custom_container">
<Row>
<Col xs={6}>
<h3>
{subCategory
.split("-")
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
.join(" ")}
</h3>
</Col>
<Col xs={6} className="d-flex justify-content-end">
<select
className="sortby-select"
value={sort}
onChange={handleChange}
>
<option value="">Sort By</option>
<option value="name-asc">Name: A–Z</option>
<option value="name-desc">Name: Z–A</option>
</select>
</Col>
</Row>
<Row>
{sortedProducts.map((product, index) => (
<Col md={4} key={`${product.productSlug}-${index}`}>
<div className="collections-item">
<Link href="#">
<Image
width={868}
height={560}
src={product.image}
alt={product.title}
/>
<div className="title">{product.title}</div>
</Link>
</div>
</Col>
))}
</Row>
<Row>
<Col>
<div className="text-center">
<button className="btn3">View More</button>
</div>
</Col>
</Row>
</div>
</section>
);
};
export default InnerDetailsCatalogue;
components/Collection/AboutInfo.js 0 → 100644
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import Heading from "@/components/Heading";
const AboutInfo = () => {
return (
<>
<section className='about-section about-info-section'>
<div className='custom_container'>
<Row className='text-center justify-content-center'>
<Col md={8}>
<Heading el="h2" heading="Every person is unique," />
<Heading el="h2" heading="Every kitchen too." />
<p className='mb-0 gray-text'>Each of our kitchen collections has been designed with man in mind, focusing on his wellness and needs,
creating products that contribute to the pleasures of everyday life. Luxury, design and modern kitchens
made to last generations, impervious to trends and ageless.</p>
</Col>
</Row>
</div>
</section>
</>
)
}
export default AboutInfo
components/Collection/Gallery.js 0 → 100644
import React, { useEffect } from "react";
import { Col, Container, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";
const galleryData = [
{ id: 1, src: "/image/gallery/01.png", col: 6 },
{ id: 2, src: "/image/gallery/02.png", col: 6 },
{ id: 3, src: "/image/gallery/03.png", col: 12 },
{ id: 4, src: "/image/gallery/04.png", col: 6 },
{ id: 5, src: "/image/gallery/05.png", col: 6 },
];
const Gallery = () => {
useEffect(() => {
Fancybox.bind("[data-fancybox='gallery']", {
Hash: false,
Thumbs: false,
});
return () => {
Fancybox.destroy();
};
}, []);
return (
<section className="gallery-section sec_padd">
<Container className="custom_container">
<Row>
<Col className="d-flex justify-content-center">
<Heading el="h2" heading="Gallery" />
</Col>
</Row>
<Row className="gallery-items">
{galleryData.map((item) => (
<Col key={item.id} xs={item.col} className="mb-4">
<div className="gallery-image-wrapper">
<a
href={item.src}
data-fancybox="gallery"
>
<Image
src={item.src}
alt={`Gallery image ${item.id}`}
fill
className="gallery-image"
/>
</a>
</div>
</Col>
))}
</Row>
</Container>
</section>
);
};
export default Gallery;
components/Collection/InnerBannerproduct.js 0 → 100644
import Image from 'next/image'
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import { cleanImage } from '../services/imageHandling'
import Heading from "@/components/Heading";
const InnerBannerproduct = ({productData}) => {
console.log("bannerData", productData)
return (
<>
<section className='innerbanner-section'>
<div className='innerbanner product-details'>
<Row>
<Col>
<div className='product-banner'>
<Image width={1856} height={1086} src={cleanImage(productData?.image)} alt="" />
<div className='info'>
<Heading el="h2" heading="About akruti luxe" />
<p>The Akruti Lux Collection brings together iconic brands, bespoke designs, and architectural excellence—crafted to inspire refined living.</p>
</div>
</div>
</Col>
</Row>
</div>
</section>
</>
)
}
export default InnerBannerproduct
components/Collection/InnerDetails.js 0 → 100644
import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";
import { Col, Row } from "react-bootstrap";
import { useRouter } from "next/router";
const InnerDetails = ({ subCategories }) => {
const router = useRouter();
const { category } = router.query;
const [sort, setSort] = useState("");
const handleChange = (e) => {
setSort(e.target.value);
console.log("Selected sort:", e.target.value);
};
// Safety check
if (!subCategories || !category) return null;
return (
<section className="collection-m-section sec_padd">
<div className="custom_container">
{/* Header Row */}
<Row>
<Col xs={6}>
<h3>
{category
.split("-")
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
.join(" ")}
</h3>
</Col>
<Col xs={6} className="d-flex justify-content-end">
<div className="sortby-wrapper">
<select
className="sortby-select"
value={sort}
onChange={handleChange}
>
<option value="">Sort By</option>
<option value="latest">Latest</option>
<option value="name-asc">Name: A–Z</option>
<option value="name-desc">Name: Z–A</option>
</select>
</div>
</Col>
</Row>
{/* Sub-category cards */}
<Row>
{subCategories.map((sub) => (
<Col md={6} key={sub.subCategorySlug}>
<div className="collections-item">
<Link
href={`/collections/${category}/${sub.subCategorySlug}`}
>
<Image
width={868}
height={560}
src={sub.subCategoryImage}
alt={sub.subCategoryName}
/>
<div className="title">{sub.subCategoryName}</div>
</Link>
</div>
</Col>
))}
</Row>
<Row>
<Col>
<div className="text-center">
<button className="btn3">View More</button>
</div>
</Col>
</Row>
</div>
</section>
);
};
export default InnerDetails;
components/Collection/InnerDetailsSubCategory.js 0 → 100644
import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";
import { Col, Row } from "react-bootstrap";
import { useRouter } from "next/router";
const InnerDetailsSubCategory = ({ products }) => {
const router = useRouter();
const { category, subCategory } = router.query;
const [sort, setSort] = useState("");
if (!products || !category || !subCategory) return null;
const handleChange = (e) => {
setSort(e.target.value);
};
// Optional sorting
const sortedProducts = [...products].sort((a, b) => {
if (sort === "name-asc") return a.title.localeCompare(b.title);
if (sort === "name-desc") return b.title.localeCompare(a.title);
return 0;
});
return (
<section className="collection-m-section sec_padd">
<div className="custom_container">
{/* Header */}
<Row>
<Col xs={6}>
<h3>
{subCategory
.split("-")
.map(w => w.charAt(0).toUpperCase() + w.slice(1))
.join(" ")}
</h3>
</Col>
<Col xs={6} className="d-flex justify-content-end">
<select
className="sortby-select"
value={sort}
onChange={handleChange}
>
<option value="">Sort By</option>
<option value="name-asc">Name: A–Z</option>
<option value="name-desc">Name: Z–A</option>
</select>
</Col>
</Row>
{/* Products */}
<Row>
{sortedProducts.map((product) => (
<Col md={6} key={product.productSlug}>
<div className="collections-item">
<Link
href={`/collections/${category}/${subCategory}/${product.productSlug}`}
>
<Image
width={868}
height={560}
src={product.image}
alt={product.title}
/>
<div className="title">{product.title}</div>
</Link>
</div>
</Col>
))}
</Row>
</div>
</section>
);
};
export default InnerDetailsSubCategory;
components/Collection/Video.js 0 → 100644
import React, { useRef, useEffect, useState } from "react";
import { Container } from "react-bootstrap";
const Video = () => {
const videoRef = useRef(null);
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
setIsVisible(entry.isIntersecting);
},
{ threshold: 0.5 }
);
if (videoRef.current) observer.observe(videoRef.current);
return () => {
if (videoRef.current) observer.unobserve(videoRef.current);
};
}, []);
return (
<section className="video_sec sec_padd collection-section">
<Container className="custom_container">
<video
ref={videoRef}
autoPlay
muted
loop
playsInline
className={`w-100 video-animate ${isVisible ? "video-visible" : ""}`}
>
<source src="/video/Akruti Video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</Container>
</section>
);
};
export default Video;
components/Common/Breadcrumb.js 0 → 100644
import Link from 'next/link';
import React from 'react'
const Breadcrumb = ({breadcrumbData}) => {
return (
<>
<section className='breadcrumb-section'>
<div className='custom_container'>
<div className='row'>
<div className='col'>
<nav aria-label="Breadcrumb" className="breadcrumb" role="navigation">
<ol>
{breadcrumbData.map((it, idx) => {
const isLast = idx === breadcrumbData?.length - 1;
return (
<li key={idx} className="breadcrumb-item">
{isLast || !it.href ? (
<span>{it.label}</span>
) : (
<Link href={it.href}>{it.label}</Link>
)}
{/* slash separator */}
{!isLast && <span className="breadcrumb-separator"> </span>}
</li>
);
})}
</ol>
</nav>
</div>
</div>
</div>
</section>
</>
)
}
export default Breadcrumb
\ No newline at end of file \ No newline at end of file
components/Common/HeadTitle.js 0 → 100644
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import Heading from "@/components/Heading";
const HeadTitle = ({headTitleData}) => {
console.log("headTitleData", headTitleData)
return (
<>
<section className='let-connect-section'>
<div className='custom_container'>
<Row className='text-center'>
<Col>
<Heading el="h2" heading={headTitleData?.title} />
<p className='mb-0 gray-text'>{headTitleData?.descrition1}</p>
<p className='mb-0 gray-text'>{headTitleData?.descrition2}</p>
</Col>
</Row>
</div>
</section>
</>
)
}
export default HeadTitle
components/Common/InnerBanner.js 0 → 100644
import Image from 'next/image'
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import { cleanImage } from '../services/imageHandling'
const InnerBanner = ({bannerData}) => {
console.log("bannerData", bannerData)
return (
<>
<section className='innerbanner-section'>
<div className='innerbanner'>
<Row>
<Col>
<div className=''>
<Image width={1856} height={1086} src={cleanImage(bannerData?.image)} alt="" />
</div>
</Col>
</Row>
</div>
</section>
</>
)
}
export default InnerBanner
components/Contacts/GetInTouchForm.js 0 → 100644
import React from "react";
import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
const GetInTouchForm = () => {
return (
<>
<div className="">
<Row>
<Col>
<Heading el="h2" heading="Get in touch" />
</Col>
</Row>
<form action="" className="get-in-touch-form">
<Row>
<Col md={6} className="mb-3">
<div>
<input
type="text"
placeholder="Select Request Type*"
name="selectRequestType"
className="inputField nameInput"
/>
</div>
</Col>
<Col md={6} className="mb-3">
<div>
<input
type="text"
placeholder="Full Name*"
name="Full Name"
className="inputField nameInput"
/>
</div>
</Col>
</Row>
<Row>
<Col md={6} className="mb-3">
<div>
<input
type="text"
placeholder="Mobile Number*"
name="Mobile Number"
className="inputField nameInput"
/>
</div>
</Col>
<Col md={6} className="mb-3">
<div>
<input
type="text"
placeholder="Email Address*"
name="Email Address"
className="inputField nameInput"
/>
</div>
</Col>
</Row>
<Row>
<Col md={6} className="mb-3">
<div>
<input
type="text"
placeholder="City*"
name="City"
className="inputField nameInput"
/>
</div>
</Col>
<Col md={6} className="mb-3">
<div>
<input
type="text"
placeholder="Country*"
name="Country"
className="inputField nameInput"
/>
</div>
</Col>
</Row>
<Row>
<Col md={12} className="mb-3">
<div>
<input
type="text"
placeholder="Message*"
name="Message"
className="inputField nameInput"
/>
</div>
</Col>
</Row>
<Row>
<Col className="mb-3">
<div className="form-check">
<input
className="form-check-input"
type="checkbox"
value=""
id="checkChecked"
/>
<label className="form-check-label" for="checkChecked">
By Continuing, I Declare that i have read the privacy policy of akurti luxe.
</label>
</div>
</Col>
</Row>
<Row>
<Col className="mb-3">
<div className="d-flex gap-3">
<button className="btn2">Submit</button>
</div>
</Col>
</Row>
</form>
</div>
</>
);
};
export default GetInTouchForm;
components/Contacts/InnerContent.js 0 → 100644
import React from "react";
import { Col, Row } from "react-bootstrap";
import GetInTouchForm from "./GetInTouchForm";
const InnerContent = () => {
return (
<>
<section className="innercontent-section sec_padd">
<div className="custom_container">
<Row>
<Col md={6}>
<GetInTouchForm />
</Col>
<Col md={6}>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3772.622369717272!2d72.82162147608882!3d18.992277882195175!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7ce8ba2a8a937%3A0xa2e451544551ba7a!2sRaghuvanshi%20Mills!5e0!3m2!1sen!2sin!4v1767959872758!5m2!1sen!2sin"
width="100%"
height="520"
style={{ border: 0 }}
allowFullScreen
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
title=""
className="contact-map"
></iframe>
</Col>
</Row>
</div>
</section>
</>
);
};
export default InnerContent;
components/Fancybox.js 0 → 100644
import React, { useRef, useEffect } from "react";
import { Fancybox as NativeFancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";
function Fancybox(props) {
const containerRef = useRef(null);
useEffect(() => {
const container = containerRef.current;
const delegate = props.delegate || "[data-fancybox]";
const options = props.options || {};
NativeFancybox.bind(container, delegate, options);
return () => {
NativeFancybox.unbind(container);
NativeFancybox.close();
};
});
return <div ref={containerRef}>{props.children}</div>;
}
export default Fancybox;
components/Layout/Footer.js
...@@ -7,15 +7,15 @@ const Footer = () => { ...@@ -7,15 +7,15 @@ const Footer = () => {
return ( return (
<footer className="footer"> <footer className="footer">
<Container className="custom_container py-5"> <Container className="custom_container py-5">
<Row className="gy-4"> <Row className="gy-4 justify-content-between">
{/* Left - Logo + Contact Info */} {/* Left - Logo + Contact Info */}
<Col lg={3} md={6} className="footer-cotent"> <Col lg={3} md={6} className="footer-cotent">
<Image <Image
src="/image/footer-logo.png" src="/image/footer-logo.png"
alt="logo" alt="logo"
width={180} width={278}
height={40} height={51}
className="mb-3" className="mb-3"
/> />
<ul className="list-unstyled"> <ul className="list-unstyled">
...@@ -42,8 +42,10 @@ const Footer = () => { ...@@ -42,8 +42,10 @@ const Footer = () => {
</Col> </Col>
<Col lg={5}>
<Row>
{/* Quick Links */} {/* Quick Links */}
<Col lg={3} md={6} className="footer-cotent ps-md-4"> <Col lg={4} xs={6} className="footer-cotent ps-md-4">
<h6 className="fw-bold mb-3">Quick Links</h6> <h6 className="fw-bold mb-3">Quick Links</h6>
<ul className="list-unstyled"> <ul className="list-unstyled">
<li className="mb-3"> <li className="mb-3">
...@@ -75,7 +77,7 @@ const Footer = () => { ...@@ -75,7 +77,7 @@ const Footer = () => {
</Col> </Col>
{/* Collections */} {/* Collections */}
<Col lg={3} md={6} className="footer-cotent ps-md-4"> <Col lg={4} xs={6} className="footer-cotent ps-md-4">
<h6 className="fw-bold mb-3">Collections</h6> <h6 className="fw-bold mb-3">Collections</h6>
<ul className="list-unstyled"> <ul className="list-unstyled">
<li className="mb-3"> <li className="mb-3">
...@@ -97,7 +99,7 @@ const Footer = () => { ...@@ -97,7 +99,7 @@ const Footer = () => {
</Col> </Col>
{/* Policies */} {/* Policies */}
<Col lg={3} md={6} className="ps-md-4"> <Col lg={4} md={6} className="ps-md-4">
<h6 className="fw-bold mb-3">Policies</h6> <h6 className="fw-bold mb-3">Policies</h6>
<ul className="list-unstyled"> <ul className="list-unstyled">
<li className="mb-3"> <li className="mb-3">
...@@ -123,11 +125,15 @@ const Footer = () => { ...@@ -123,11 +125,15 @@ const Footer = () => {
</ul> </ul>
</Col> </Col>
</Row> </Row>
</Col>
</Row>
</Container> </Container>
{/* Bottom bar */} {/* Bottom bar */}
<div className="footer-bottom py-3"> <div className="footer-bottom py-3">
<Container className="d-flex flex-column flex-md-row justify-content-between align-items-center"> <Container className="custom_container d-flex flex-column flex-md-row justify-content-between align-items-center">
<span>Copyright ©2025 Akruti Luxe. All rights reserved.</span> <span>Copyright ©2025 Akruti Luxe. All rights reserved.</span>
<div className="social-icons d-flex gap-3 mt-3 mt-md-0"> <div className="social-icons d-flex gap-3 mt-3 mt-md-0">
<Link href="https://linkedin.com" target="_blank"> <Link href="https://linkedin.com" target="_blank">
......
components/Layout/SubMenu.js
...@@ -2,7 +2,7 @@ import Image from 'next/image' ...@@ -2,7 +2,7 @@ import Image from 'next/image'
import Link from 'next/link' import Link from 'next/link'
import React from 'react' import React from 'react'
import { Col, Row } from 'react-bootstrap' import { Col, Row } from 'react-bootstrap'
import { cleanImage } from '../imageHandling' import { cleanImage } from '../services/imageHandling'
export const SubMenu = ({ data, menuTitle }) => { export const SubMenu = ({ data, menuTitle }) => {
// console.log(data, 'menudata'); // console.log(data, 'menudata');
......
components/Seo/Seo.js
import { cleanImage } from "../../components/imageHandling"; import { cleanImage } from "../services/imageHandling";
import Head from "next/head"; import Head from "next/head";
import React from "react"; import React from "react";
const Seo = (props) => { const Seo = (props) => {
......
components/imageHandling.js → components/services/imageHandling.js
export const cleanImage = (originalImage) => { export const cleanImage = (originalImage) => {
let imageUrl = "/image/default.svg"; let imageUrl = "/images/default.svg";
if (originalImage) { if (originalImage) {
// /** When the AWS S3 plugin is activated, images are uploaded to S3 rather than local file system. */ // /** When the AWS S3 plugin is activated, images are uploaded to S3 rather than local file system. */
// if (originalImage.url.startsWith("http")) { // if (originalImage.url.startsWith("http")) {
...@@ -8,23 +8,15 @@ export const cleanImage = (originalImage) => { ...@@ -8,23 +8,15 @@ export const cleanImage = (originalImage) => {
// /** If now S3, then images are stored under the public/uploads directory of Strapi */ // /** If now S3, then images are stored under the public/uploads directory of Strapi */
// imageUrl = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}${originalImage.url}`; // imageUrl = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}${originalImage.url}`;
// } // }
// If CDN specified then we serve from there...
// imageUrl = `https://d2edd7fnfghsl3.cloudfront.net${originalImage}`
if (process.env.NEXT_PUBLIC_CDN_URL) {
imageUrl = `${process.env.NEXT_PUBLIC_CDN_URL}${originalImage}`;
}
else {
imageUrl = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}${originalImage}`; imageUrl = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}${originalImage}`;
} }
}
return imageUrl; return imageUrl;
}; };
export const webFullurl = (originalImage) => { export const webFullurl = (originalImage) => {
let homeUrl = `${process.env.NEXT_PUBLIC_WEBSITE_HOME_URL}`; let homeUrl = `${process.env.NEXT_PUBLIC_WEBSITE_HOME_URL}`;
if (originalImage) { if (originalImage) {
homeUrl = `${process.env.NEXT_PUBLIC_WEBSITE_HOME_URL}${originalImage}`; homeUrl = `${process.env.NEXT_PUBLIC_WEBSITE_HOME_URL}${originalImage}`;
} }
// console.log("homeUrl", homeUrl); // console.log("homeUrl", homeUrl);
return homeUrl; return homeUrl;
};
\ No newline at end of file \ No newline at end of file
};
container/Home/BlogHome.js
...@@ -20,16 +20,16 @@ const BlogHome = () => { ...@@ -20,16 +20,16 @@ const BlogHome = () => {
]; ];
return ( return (
<section className="sec_padd"> <section className="blog-section sec_padd">
<Container className="custom_container"> <Container className="custom_container">
{/* Heading Row */} {/* Heading Row */}
<Row className="align-items-center justify-content-between mb-4"> <Row className="align-items-center justify-content-between mb-4">
<Col lg={8} md={8}> <Col lg={8} md={8}>
<h2 className="heading mb-2">Blogs / News</h2> <h2 className="heading mb-2">Blogs / News</h2>
</Col> </Col>
<Col lg={4} md={4} className="d-flex justify-content-md-end"> {/* <Col lg={4} md={4} className="d-flex justify-content-md-end">
<button className="btn3">Explore More</button> <button className="btn3">Explore More</button>
</Col> </Col> */}
</Row> </Row>
<Row className="g-4"> <Row className="g-4">
...@@ -55,7 +55,8 @@ const BlogHome = () => { ...@@ -55,7 +55,8 @@ const BlogHome = () => {
of Parisian charm viewed through a contemporary lens. of Parisian charm viewed through a contemporary lens.
</p> </p>
<button className="read-more-btn"> <button className="read-more-btn">
Read More <i className="fa-solid fa-arrow-right"></i> Read More
{/* <i className="fa-solid fa-arrow-right"></i> */}
</button> </button>
</FadeInStagger> </FadeInStagger>
</div> </div>
...@@ -82,7 +83,8 @@ const BlogHome = () => { ...@@ -82,7 +83,8 @@ const BlogHome = () => {
<h5 className="mb-1">{blog.title}</h5> <h5 className="mb-1">{blog.title}</h5>
<p className="blog_desc">{blog.desc}</p> <p className="blog_desc">{blog.desc}</p>
<button className="read-more-btn"> <button className="read-more-btn">
Read More <i className="fa-solid fa-arrow-right"></i> Read More
{/* <i className="fa-solid fa-arrow-right"></i> */}
</button> </button>
</div> </div>
</div> </div>
......
container/Home/Catalogues.js
...@@ -9,10 +9,10 @@ import SwiperBtn from "@/components/Layout/SwiperBtn"; ...@@ -9,10 +9,10 @@ import SwiperBtn from "@/components/Layout/SwiperBtn";
import FadeInStagger from "@/components/FadeInStagger"; import FadeInStagger from "@/components/FadeInStagger";
import Heading from "@/components/Heading"; import Heading from "@/components/Heading";
const CollectionData = [ const CollectionData = [
{ image: "/image/img1.png", title: "Design Studio" }, { image: "/image/catalogues/01.png", title: "Ecosophia" },
{ image: "/image/img2.png", title: "Kitchen" }, { image: "/image/catalogues/02.png", title: "Architectural Scenarios" },
{ image: "/image/img3.png", title: "Micro Creatices" }, { image: "/image/catalogues/03.png", title: "Vitrum Arte" },
{ image: "/image/img1.png", title: "Design Studio" }, { image: "/image/catalogues/02.png", title: "Design Studio" },
]; ];
const Catalogues = () => { const Catalogues = () => {
...@@ -47,9 +47,9 @@ const Catalogues = () => { ...@@ -47,9 +47,9 @@ const Catalogues = () => {
nextEl: ".cust-swiper-button-next", nextEl: ".cust-swiper-button-next",
prevEl: ".cust-swiper-button-prev", prevEl: ".cust-swiper-button-prev",
}} }}
pagination={{ clickable: true }} // pagination={{ clickable: true }}
loop={true} loop={true}
modules={[Navigation, Pagination]} modules={[Navigation]}
className="collectionSwiper pb-5" className="collectionSwiper pb-5"
breakpoints={{ breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 }, 320: { slidesPerView: 1, spaceBetween: 15 },
...@@ -72,38 +72,75 @@ const Catalogues = () => { ...@@ -72,38 +72,75 @@ const Catalogues = () => {
))} ))}
</Swiper> </Swiper>
</FadeInStagger> </FadeInStagger>
<div className="text-center mt-5"> <div className="text-center">
<button className="btn3">Explore More</button> <button className="btn3">View More</button>
</div> </div>
</Col> </Col>
</Row> </Row>
</Container> </Container>
<div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-between px-5 align-items-center w-100 "> <div className="position-absolute swiperbtn1 d-flex d-nones justify-content-between px-5 align-items-center w-100 ">
<button className="hm-swpr-btn cust-swiper-button-prev"> <button className="cust-swiper-button-prev">
<svg <svg
width="15"
height="13"
viewBox="0 0 15 13"
fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
> >
<path <rect
d="M14.9688 7C14.9688 7.5625 14.5312 8 14 8H4.40625L7.6875 11.3125C8.09375 11.6875 8.09375 12.3438 7.6875 12.7188C7.5 12.9062 7.25 13 7 13C6.71875 13 6.46875 12.9062 6.28125 12.7188L1.28125 7.71875C0.875 7.34375 0.875 6.6875 1.28125 6.3125L6.28125 1.3125C6.65625 0.90625 7.3125 0.90625 7.6875 1.3125C8.09375 1.6875 8.09375 2.34375 7.6875 2.71875L4.40625 6H14C14.5312 6 14.9688 6.46875 14.9688 7Z" y="48"
width="48"
height="48"
rx="24"
transform="rotate(-90 0 48)"
fill="white" fill="white"
fill-opacity="0.25"
/>
<rect
x="0.5"
y="47.5"
width="47"
height="47"
rx="23.5"
transform="rotate(-90 0.5 47.5)"
stroke="black"
stroke-opacity="0.2"
/>
<path
d="M20.6667 31L22.4375 29.1406L18.7917 25.3125H34V22.6875H18.7917L22.4375 18.8594L20.6667 17L14 24L20.6667 31Z"
fill="black"
/> />
</svg> </svg>
</button> </button>
<button className="hm-swpr-btn cust-swiper-button-next"> <button className="cust-swiper-button-next">
<svg <svg
width="15"
height="13"
viewBox="0 0 15 13"
fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
> >
<path <rect
d="M0.03125 7C0.03125 7.5625 0.46875 8 1 8H10.5938L7.3125 11.3125C6.90625 11.6875 6.90625 12.3438 7.3125 12.7188C7.5 12.9062 7.75 13 8 13C8.28125 13 8.53125 12.9062 8.71875 12.7188L13.7188 7.71875C14.125 7.34375 14.125 6.6875 13.7188 6.3125L8.71875 1.3125C8.34375 0.90625 7.6875 0.90625 7.3125 1.3125C6.90625 1.6875 6.90625 2.34375 7.3125 2.71875L10.5938 6H1C0.46875 6 0.03125 6.46875 0.03125 7Z" width="48"
height="48"
rx="24"
transform="matrix(0 -1 -1 0 48 48)"
fill="white" fill="white"
fill-opacity="0.25"
/>
<rect
x="-0.5"
y="-0.5"
width="47"
height="47"
rx="23.5"
transform="matrix(0 -1 -1 0 47 47)"
stroke="black"
stroke-opacity="0.2"
/>
<path
d="M27.3333 31L25.5625 29.1406L29.2083 25.3125H14V22.6875H29.2083L25.5625 18.8594L27.3333 17L34 24L27.3333 31Z"
fill="black"
/> />
</svg> </svg>
</button> </button>
......
container/Home/Collection.js
...@@ -19,7 +19,7 @@ const CollectionData = [ ...@@ -19,7 +19,7 @@ const CollectionData = [
const CollectionSlider = () => { const CollectionSlider = () => {
return ( return (
<div className="collection-section sec_padd"> <div className="collection-section sec_padd">
<Container className="custom_container"> <Container className="custom_container_leftAuto">
{/* Heading + Nav Row */} {/* Heading + Nav Row */}
<Row className="align-items-center justify-content-md-between mb-4"> <Row className="align-items-center justify-content-md-between mb-4">
<Col lg={8} md={8}> <Col lg={8} md={8}>
...@@ -33,7 +33,7 @@ const CollectionSlider = () => { ...@@ -33,7 +33,7 @@ const CollectionSlider = () => {
</p> </p>
</FadeInStagger> </FadeInStagger>
</Col> </Col>
<Col lg={4} md={4} className="d-flex justify-content-md-around mt-2"> <Col lg={4} md={4} className="d-flex justify-content-md-end pe-5 mt-2">
<div className="d-flex gap-2"> <div className="d-flex gap-2">
<button className="cust-swiper-button-prev"> <button className="cust-swiper-button-prev">
<svg <svg
...@@ -120,7 +120,8 @@ const CollectionSlider = () => { ...@@ -120,7 +120,8 @@ const CollectionSlider = () => {
nextEl: ".cust-swiper-button-next", nextEl: ".cust-swiper-button-next",
prevEl: ".cust-swiper-button-prev", prevEl: ".cust-swiper-button-prev",
}} }}
modules={[Navigation, Autoplay]} pagination={{ clickable: true }}
modules={[Navigation, Autoplay,Pagination]}
className="collectionSwiper" className="collectionSwiper"
breakpoints={{ breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 }, 320: { slidesPerView: 1, spaceBetween: 15 },
......
container/Home/Contact.js
...@@ -6,27 +6,93 @@ export const Contact = () => { ...@@ -6,27 +6,93 @@ export const Contact = () => {
return ( return (
<> <>
<section className="contact_sec sec_padd"> <section className="contact_sec sec_padd">
<Container> <Container className="custom_container">
<Row> <Row className="justify-content-end">
<Col md={12}> <Col md={5}>
<div className="text-center"> <div className="">
<FadeInStagger direction="top"> <FadeInStagger direction="top">
<h2 className="heading">Contact Us</h2> <h2 className="heading">Let’s Connect</h2>
<p> <p>Create your Dream space together, Visit Us Today!</p>
Every great space starts with a conversation. From luxurious
homes to bespoke workspaces,
<br />
we’re here to bring your vision to life.
</p>
<p>
Reach out today, and let’s turn your ideas into a masterpiece.
</p>
</FadeInStagger> </FadeInStagger>
<form action="" className="let-connect-form">
<Row>
<Col md={6} className="mb-3">
<div className="mb-1">Name</div>
<div>
<input
type="text"
placeholder="Type here"
name="name"
class="inputField nameInput"
/>
</div>
</Col>
<Col md={6} className="mb-3">
<div className="mb-1">Mobile Number</div>
<div>
<input
type="text"
placeholder="Type here"
name="Mobile Number"
class="inputField nameInput"
/>
</div>
</Col>
</Row>
<Row>
<Col md={12} className="mb-3">
<div className="mb-1">Email Address</div>
<div>
<input
type="text"
placeholder="Type here"
name="Email Address"
class="inputField nameInput"
/>
</div>
</Col>
</Row>
<Row>
<Col md={12} className="mb-3">
<div className="mb-1">Message</div>
<div>
<textarea
rows="5"
type="text"
placeholder="Type here"
name="name"
class="inputField nameInput"
/>
</div> </div>
<div className="d-flex justify-content-center gap-3"> </Col>
<button className="btn2">Get in Touch</button> </Row>
<button className="btn1">Book a Consultation</button> <Row>
<Col className="mb-3">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="checkChecked"
/>
<label class="form-check-label" for="checkChecked">
I accept the processing of my personal data for
traditional and automated direct marketing purposes.
</label>
</div>
</Col>
</Row>
<Row>
<Col className="mb-3">
<div className="d-flex gap-3">
<button className="btn3">Submit</button>
</div>
</Col>
</Row>
</form>
</div> </div>
</Col> </Col>
</Row> </Row>
</Container> </Container>
......
container/Home/Overview.js
...@@ -40,22 +40,27 @@ const Overview = () => { ...@@ -40,22 +40,27 @@ const Overview = () => {
only beautiful, but functional. Environments that enhance only beautiful, but functional. Environments that enhance
lifestyles, elevate brands, and create lasting impressions. lifestyles, elevate brands, and create lasting impressions.
</p> </p>
<div className="my-5"> <button className="btn4">Read More</button> </div>
</FadeInStagger> </FadeInStagger>
</Col> </Col>
<Col md={5} className="d-flex justify-content-center"> <Col md={5} className="d-flex justify-content-center">
<div className="shine-wrapper"> <div className="video-wrapper">
<Image <video src="/video/about.mp4" autoPlay muted loop playsInline />
src="/image/about.png" {/* <Image
src="/video/about.mp4"
alt="About" alt="About"
width={600} width={600}
height={600} height={600}
className="img-fluid" className="img-fluid"
/> /> */}
<div className="shine-overlay"></div> {/* <div className="shine-overlay"></div> */}
</div> </div>
</Col> </Col>
</Row> </Row>
</Container> </Container>
</section> </section>
); );
......
container/Home/ProjectSlider.js
...@@ -29,8 +29,10 @@ const ProjectSlider = () => { ...@@ -29,8 +29,10 @@ const ProjectSlider = () => {
<Heading el="h2" heading="Projects" /> <Heading el="h2" heading="Projects" />
{/* <h2 className="heading mb-2">Projects</h2> */} {/* <h2 className="heading mb-2">Projects</h2> */}
<p className="mb-0 gray-text"> <p className="mb-0 gray-text">
Our Exclusive Collections Blend Creativity, Comfort, And Over the years, Akruti Lux Contract has carried out hundreds of projects
Craftsmanship For Your Perfect Home. </p>
<p className="mb-0 gray-text">
in different sectors all over the world.
</p> </p>
</FadeInStagger> </FadeInStagger>
</Col> </Col>
...@@ -43,16 +45,12 @@ const ProjectSlider = () => { ...@@ -43,16 +45,12 @@ const ProjectSlider = () => {
autoplay={{ delay: 5000, disableOnInteraction: false }} autoplay={{ delay: 5000, disableOnInteraction: false }}
speed={1000} speed={1000}
loop={true} loop={true}
pagination={{ clickable: true }} // pagination={{ clickable: true }}
navigation={{ navigation={{
prevEl: prevRef.current, nextEl: ".cust-swiper-button-next",
nextEl: nextRef.current, prevEl: ".cust-swiper-button-prev",
}}
onBeforeInit={(swiper) => {
swiper.params.navigation.prevEl = prevRef.current;
swiper.params.navigation.nextEl = nextRef.current;
}} }}
modules={[Navigation, Pagination, Autoplay]} modules={[Navigation, Autoplay]}
className="projectSwiper pb-5" className="projectSwiper pb-5"
breakpoints={{ breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 }, 320: { slidesPerView: 1, spaceBetween: 15 },
...@@ -74,36 +72,143 @@ const ProjectSlider = () => { ...@@ -74,36 +72,143 @@ const ProjectSlider = () => {
</SwiperSlide> </SwiperSlide>
))} ))}
</Swiper> </Swiper>
{/* <div className="d-flex gap-2">
<button className="cust-swiper-button-prev">
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
>
<rect
y="48"
width="48"
height="48"
rx="24"
transform="rotate(-90 0 48)"
fill="white"
fill-opacity="0.25"
/>
<rect
x="0.5"
y="47.5"
width="47"
height="47"
rx="23.5"
transform="rotate(-90 0.5 47.5)"
stroke="black"
stroke-opacity="0.2"
/>
<path
d="M20.6667 31L22.4375 29.1406L18.7917 25.3125H34V22.6875H18.7917L22.4375 18.8594L20.6667 17L14 24L20.6667 31Z"
fill="black"
/>
</svg>
</button>
<button className="cust-swiper-button-next">
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
>
<rect
width="48"
height="48"
rx="24"
transform="matrix(0 -1 -1 0 48 48)"
fill="white"
fill-opacity="0.25"
/>
<rect
x="-0.5"
y="-0.5"
width="47"
height="47"
rx="23.5"
transform="matrix(0 -1 -1 0 47 47)"
stroke="black"
stroke-opacity="0.2"
/>
<path
d="M27.3333 31L25.5625 29.1406L29.2083 25.3125H14V22.6875H29.2083L25.5625 18.8594L27.3333 17L34 24L27.3333 31Z"
fill="black"
/>
</svg>
</button>
</div> */}
<Row className="">
<Col className="d-flex justify-content-center" ><button className="btn3">View More</button></Col>
</Row>
</Container> </Container>
{/* Swiper buttons outside container */} {/* Swiper buttons outside container */}
<div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-between px-5 align-items-center w-100"> <div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-between px-5 align-items-center w-100">
{/* Attach refs to buttons */} {/* Attach refs to buttons */}
<button ref={prevRef} className="hm-swpr-btn cust-swiper-button-prev"> <button className="cust-swiper-button-prev">
<svg <svg
width="15"
height="13"
viewBox="0 0 15 13"
fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
> >
<path <rect
d="M14.9688 7C14.9688 7.5625 14.5312 8 14 8H4.40625L7.6875 11.3125C8.09375 11.6875 8.09375 12.3438 7.6875 12.7188C7.5 12.9062 7.25 13 7 13C6.71875 13 6.46875 12.9062 6.28125 12.7188L1.28125 7.71875C0.875 7.34375 0.875 6.6875 1.28125 6.3125L6.28125 1.3125C6.65625 0.90625 7.3125 0.90625 7.6875 1.3125C8.09375 1.6875 8.09375 2.34375 7.6875 2.71875L4.40625 6H14C14.5312 6 14.9688 6.46875 14.9688 7Z" y="48"
width="48"
height="48"
rx="24"
transform="rotate(-90 0 48)"
fill="white" fill="white"
fill-opacity="0.25"
/>
<rect
x="0.5"
y="47.5"
width="47"
height="47"
rx="23.5"
transform="rotate(-90 0.5 47.5)"
stroke="black"
stroke-opacity="0.2"
/>
<path
d="M20.6667 31L22.4375 29.1406L18.7917 25.3125H34V22.6875H18.7917L22.4375 18.8594L20.6667 17L14 24L20.6667 31Z"
fill="black"
/> />
</svg> </svg>
</button> </button>
<button ref={nextRef} className="hm-swpr-btn cust-swiper-button-next"> <button className="cust-swiper-button-next">
<svg <svg
width="15"
height="13"
viewBox="0 0 15 13"
fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
> >
<path <rect
d="M0.03125 7C0.03125 7.5625 0.46875 8 1 8H10.5938L7.3125 11.3125C6.90625 11.6875 6.90625 12.3438 7.3125 12.7188C7.5 12.9062 7.75 13 8 13C8.28125 13 8.53125 12.9062 8.71875 12.7188L13.7188 7.71875C14.125 7.34375 14.125 6.6875 13.7188 6.3125L8.71875 1.3125C8.34375 0.90625 7.6875 0.90625 7.3125 1.3125C6.90625 1.6875 6.90625 2.34375 7.3125 2.71875L10.5938 6H1C0.46875 6 0.03125 6.46875 0.03125 7Z" width="48"
height="48"
rx="24"
transform="matrix(0 -1 -1 0 48 48)"
fill="white" fill="white"
fill-opacity="0.25"
/>
<rect
x="-0.5"
y="-0.5"
width="47"
height="47"
rx="23.5"
transform="matrix(0 -1 -1 0 47 47)"
stroke="black"
stroke-opacity="0.2"
/>
<path
d="M27.3333 31L25.5625 29.1406L29.2083 25.3125H14V22.6875H29.2083L25.5625 18.8594L27.3333 17L34 24L27.3333 31Z"
fill="black"
/> />
</svg> </svg>
</button> </button>
......
package-lock.json
{ {
"name": "Akruti-frontend", "name": "Akruti-Frontend",
"version": "0.1.0", "version": "0.1.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "Akruti-frontend", "name": "Akruti-Frontend",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@fancyapps/ui": "^5.0.36", "@fancyapps/ui": "^5.0.36",
......
pages/about.js 0 → 100644
"use client";
import AboutAkruti from "@/components/About/AboutAkruti";
import Experience from "@/components/About/Experience";
import StudioHighlight from "@/components/About/StudioHighlight";
import Breadcrumb from "@/components/Common/Breadcrumb";
import InnerBanner from "@/components/Common/InnerBanner";
import { Contact } from "@/container/Home/Contact";
import Head from "next/head";
const bannerData = [
{
image: "/image/inner-banner/about.png",
title: "Banner",
}
];
console.log("bannerData113", bannerData)
const breadcrumbData = [
{
href: "/",
label: "About"
},
];
const AboutPage = () => {
return (
<>
<Head>
<title>Akruti </title>
<meta name="description" content="Akruti" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBanner bannerData={bannerData[0] || []} />
<AboutAkruti />
<StudioHighlight />
<Experience />
<Contact/>
</>
);
};
export default AboutPage;
pages/brands/[category]/[slug].js 0 → 100644
import { useRouter } from "next/router";
import Breadcrumb from "@/components/Common/Breadcrumb";
import { brandsData } from "@/pages/data/brandsData";
import InnerBannerBrands from "@/components/Brands/InnerBannerBrands";
import AboutInfoBrands from "@/components/Brands/AboutInfoBrands";
import Video from "@/components/Brands/Video";
import TechnicalDetails from "@/components/Brands/TechnicalDetails";
import Gallery from "@/components/Collection/Gallery";
import Explore from "@/components/Brands/Explore";
import { Contact } from "@/container/Home/Contact";
const BrandDetailsPage = () => {
const router = useRouter();
const { category, slug } = router.query;
if (!router.isReady) return null;
const categoryData = brandsData.find(
item => item.categorySlug === category
);
const subCategoryData = categoryData?.subCategories.find(
sub => sub.subCategorySlug === slug
);
if (!categoryData || !subCategoryData) {
return <h1>Details not found</h1>;
}
const breadcrumbData=[
{ href: "/brands", label: "Brands" },
{ href: `/brands/${category}`, label: categoryData.categoryName },
{ href: router.asPath, label: subCategoryData.subCategoryName },
]
return (
<>
<Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerBrands subCategoryData={subCategoryData || []} />
<AboutInfoBrands />
<Video />
<TechnicalDetails />
<Gallery />
<Explore />
<Contact />
{/* <h1>{subCategoryData.subCategoryName}</h1>
<img
src={subCategoryData.subCategoryImage}
alt={subCategoryData.subCategoryName}
style={{ maxWidth: "400px" }}
/> */}
</>
);
};
export default BrandDetailsPage;
pages/brands/[category]/index.js 0 → 100644
import { useRouter } from "next/router";
import Breadcrumb from "@/components/Common/Breadcrumb";
import HeadTitle from "@/components/Common/HeadTitle";
import InnerDetailsBrands from "@/components/Brands/InnerDetailsBrands";
import { brandsData } from "@/pages/data/brandsData";
const BrandCategoryPage = () => {
const router = useRouter();
const { category } = router.query;
if (!router.isReady) return null;
const categoryData = brandsData.find(
item => item.categorySlug === category
);
if (!categoryData) return <h1>Category not found</h1>;
return (
<>
<Breadcrumb
breadcrumbData={[
{ href: "/brands", label: "Brands" },
{ href: router.asPath, label: categoryData.categoryName },
]}
/>
<HeadTitle
headTitleData={{
title: categoryData.categoryName,
descrition1: "Premium brand collections",
descrition2: "Explore luxury sub-categories",
}}
/>
<InnerDetailsBrands subCategories={categoryData.subCategories} />
</>
);
};
export default BrandCategoryPage;
pages/catalogue.js 0 → 100644
"use client";
import InnerDetailsCatalogue from "@/components/Catalogue/InnerDetailsCatalogue";
import Breadcrumb from "@/components/Common/Breadcrumb";
import HeadTitle from "@/components/Common/HeadTitle";
import InnerBanner from "@/components/Common/InnerBanner";
import InnerContent from "@/components/Contacts/InnerContent";
import Head from "next/head";
const bannerData = [
{
image: "/image/inner-banner/contacts.png",
title: "Banner",
}
];
const headTitleData = [
{
title: "Catalogue",
descrition1:"Our Akruti Luxe Catalogue brings together iconic designs, premium materials, and",
descrition2:"Contemporary elegance—your guide to living beautifully."
}
];
const breadcrumbData = [
{
href: "/",
label: "Catalogue"
},
];
const ContactsPage = () => {
return (
<>
<Head>
<title>Akruti </title>
<meta name="description" content="Akruti" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Breadcrumb breadcrumbData={breadcrumbData} />
<HeadTitle headTitleData={headTitleData[0] || []} />
<InnerDetailsCatalogue />
</>
);
};
export default ContactsPage;
pages/collections/[category]/[subCategory]/[productSlug].js 0 → 100644
import { useRouter } from "next/router";
import Breadcrumb from "@/components/Common/Breadcrumb";
import { collectionsData } from "@/pages/data/collectionsData";
import InnerBanner from "@/components/Common/InnerBanner";
import InnerBannerproduct from "@/components/Collection/InnerBannerproduct";
import AboutInfo from "@/components/Collection/AboutInfo";
import Video from "@/components/Collection/Video";
import Gallery from "@/components/Collection/Gallery";
import Catalogues from "@/container/Home/Catalogues";
import { Contact } from "@/container/Home/Contact";
const ProductPage = () => {
const router = useRouter();
const { category, subCategory, productSlug } = router.query;
if (!router.isReady) return null;
// Find category
const categoryData = collectionsData.find(
item => item.categorySlug === category
);
// Find sub-category
const subCategoryData = categoryData?.subCategories.find(
sub => sub.subCategorySlug === subCategory
);
// Find product
const productData = subCategoryData?.products.find(
product => product.productSlug === productSlug
);
console.log("productData222", productData)
if (!categoryData || !subCategoryData || !productData) {
return <h1>Product not found</h1>;
}
/* ---------------- Breadcrumb ---------------- */
const breadcrumbData = [
{
href: "/collections",
label: "Collections",
},
{
href: `/collections/${category}`,
label: categoryData.categoryName,
},
{
href: `/collections/${category}/${subCategory}`,
label: subCategoryData.subCategoryName,
},
{
href: `/collections/${category}/${subCategory}/${productSlug}`,
label: productData.title,
},
];
const bannerData = [
{
image: "/image/inner-banner/about.png",
title: "Banner",
}
];
return (
<>
<Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerproduct productData={productData || []} />
<AboutInfo />
<Video />
<Gallery />
<Catalogues />
<Contact />
{/* <div className="custom_container">
<h1>{productData.title}</h1>
{productData.image && (
<img
src={productData.image}
alt={productData.title}
style={{ maxWidth: "100%", marginBottom: 20 }}
/>
)}
{productData.description && <p>{productData.description}</p>}
</div> */}
</>
);
};
export default ProductPage;
pages/collections/[category]/[subCategory]/index.js 0 → 100644
import { useRouter } from "next/router";
import Breadcrumb from "@/components/Common/Breadcrumb";
import HeadTitle from "@/components/Common/HeadTitle";
import InnerDetailsSubCategory from "@/components/Collection/InnerDetailsSubCategory";
import { collectionsData } from "@/pages/data/collectionsData";
const SubCategoryPage = () => {
const router = useRouter();
const { category, subCategory } = router.query;
console.log('subCategory',subCategory)
if (!router.isReady) return null;
const categoryData = collectionsData.find(
item => item.categorySlug === category
);
const subCategoryData = categoryData?.subCategories.find(
sub => sub.subCategorySlug === subCategory
);
// console.log("subCategoryData666", subCategoryData)
if (!categoryData || !subCategoryData) {
return <h1>Sub Category not found</h1>;
}
const breadcrumbData = [
{ href: "/collections", label: "Collections" },
{
href: `/collections/${category}`,
label: categoryData.categoryName,
},
{
href: `/collections/${category}/${subCategory}`,
label: subCategoryData.subCategoryName,
},
];
const headTitleData = {
title: subCategoryData.subCategoryName,
descrition1: "The Akruti Lux Collection brings together iconic brands, bespoke designs, ",
descrition2: "and architectural excellence—crafted to inspire refined living.",
};
return (
<>
<Breadcrumb breadcrumbData={breadcrumbData} />
<HeadTitle headTitleData={headTitleData} />
<InnerDetailsSubCategory products={subCategoryData.products} />
</>
);
};
export default SubCategoryPage;
pages/collections/[category]/index.js 0 → 100644
import InnerDetails from "@/components/Collection/InnerDetails";
import Breadcrumb from "@/components/Common/Breadcrumb";
import HeadTitle from "@/components/Common/HeadTitle";
import { collectionsData } from "@/pages/data/collectionsData";
import { useRouter } from "next/router";
const breadcrumbData = [
{
href: "/",
label: "Collections"
},
{
href: "/",
label: "All Kitchens"
},
];
const headTitleData = [
{
title: "Kitchens",
descrition1:"The Akruti Lux Collection brings together iconic brands, bespoke designs,",
descrition2:"And architectural excellence—crafted to inspire refined living."
}
];
const CategoryPage = () => {
const router = useRouter();
const { category } = router.query;
if (!router.isReady) return null;
const categoryData = collectionsData.find(
item => item.categorySlug === category
);
if (!categoryData) {
return <h1>Category not found</h1>;
}
return (
<>
<Breadcrumb breadcrumbData={breadcrumbData} />
<HeadTitle headTitleData={headTitleData[0] || []} />
<InnerDetails subCategories={categoryData.subCategories} />
</>
// <div>
// <h1>{categoryData.categoryName}</h1>
// <ul>
// {categoryData.subCategories.map(sub => (
// <li key={sub.subCategorySlug}>
// <Link href={`/collections/${category}/${sub.subCategorySlug}`}>
// {sub.subCategoryName}
// </Link>
// </li>
// ))}
// </ul>
// </div>
);
};
export default CategoryPage;
pages/contacts.js 0 → 100644
"use client";
import Breadcrumb from "@/components/Common/Breadcrumb";
import HeadTitle from "@/components/Common/HeadTitle";
import InnerBanner from "@/components/Common/InnerBanner";
import InnerContent from "@/components/Contacts/InnerContent";
import Head from "next/head";
const bannerData = [
{
image: "/image/inner-banner/contacts.png",
title: "Banner",
}
];
const headTitleData = [
{
title: "Let’s Connect",
descrition1:"Every strong project begins with clarity.",
descrition2:"Tell us what you’re imagining,we’ll help shape it into a finished reality."
}
];
const breadcrumbData = [
{
href: "/",
label: "Connect"
},
];
const ContactsPage = () => {
return (
<>
<Head>
<title>Akruti </title>
<meta name="description" content="Akruti" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Breadcrumb breadcrumbData={breadcrumbData} />
<HeadTitle headTitleData={headTitleData[0] || []} />
<InnerBanner bannerData={bannerData[0] || []} />
<InnerContent />
</>
);
};
export default ContactsPage;
pages/data/brandsData.js 0 → 100644
export const brandsData = [
{
categorySlug: "doors",
categoryName: "Doors",
subCategories: [
{
subCategorySlug: "porta-aurea",
subCategoryName: "Porta Aurea",
subCategoryImage: "/image/doors/01.png",
},
{
subCategorySlug: "linea-door",
subCategoryName: "Linea Door",
subCategoryImage: "/image/doors/02.png",
},
{
subCategorySlug: "vista-door",
subCategoryName: "Vista Door",
subCategoryImage: "/image/doors/03.png",
},
{
subCategorySlug: "arco-door",
subCategoryName: "Arco Door",
subCategoryImage: "/image/doors/04.png",
},
{
subCategorySlug: "lume-door",
subCategoryName: "Lume Door",
subCategoryImage: "/image/doors/05.png",
},
{
subCategorySlug: "serra-door",
subCategoryName: "Serra Door",
subCategoryImage: "/image/doors/06.png",
},
],
},
];
pages/data/collectionsData.js 0 → 100644
export const collectionsData = [
{
categorySlug: "kitchens",
categoryName: "Kitchens",
subCategories: [
{
subCategorySlug: "indoor-kitchens",
subCategoryName: "Indoor Kitchens",
subCategoryImage: "/image/collection-page/indoor-kitchens.png",
products: [
{
productSlug: "artematica",
title: "Artematica",
image: "/image/collection-page/indoor-kitchen/01.png",
},
{
productSlug: "artematica-soft-outline",
title: "Artematica Soft Outline",
image: "/image/collection-page/indoor-kitchen/02.png",
},
{
productSlug: "riciclantica",
title: "Riciclantica",
image: "/image/collection-page/indoor-kitchen/03.png",
},
{
productSlug: "riciclantica-outline",
title: "Riciclantica Outline",
image: "/image/collection-page/indoor-kitchen/04.png",
},
{
productSlug: "frame-classic",
title: "Frame Classic",
image: "/image/collection-page/indoor-kitchen/01.png",
},
],
},
{
subCategorySlug: "outdoor-kitchens",
subCategoryName: "Outdoor Kitchens",
subCategoryImage: "/image/collection-page/outdoor-kitchens.png",
products: [
{
productSlug: "sunstone-pro",
title: "Sunstone Pro",
description: "Premium outdoor kitchen setup.",
},
],
},
{
subCategorySlug: "pantry-and-coffee-bar",
subCategoryName: "Pantry and coffee bar",
subCategoryImage: "/image/collection-page/pantry.png",
products: [
{
productSlug: "sunstone-pro",
title: "Sunstone Pro",
description: "Premium outdoor kitchen setup.",
},
],
},
{
subCategorySlug: "sepecial-elements",
subCategoryName: "Sepecial Elements",
subCategoryImage: "/image/collection-page/special-elements.png",
products: [
{
productSlug: "sunstone-pro",
title: "Sunstone Pro",
description: "Premium outdoor kitchen setup.",
},
],
},
{
subCategorySlug: "kitchen-accessories",
subCategoryName: "Kitchen Accessories",
subCategoryImage: "/image/collection-page/kitchchen-Accessories.png",
products: [
{
productSlug: "sunstone-pro",
title: "Sunstone Pro",
description: "Premium outdoor kitchen setup.",
},
],
},
],
},
{
categorySlug: "wardrobes",
categoryName: "Wardrobes",
subCategories: [
{
subCategorySlug: "indoor-kitchens",
subCategoryName: "Indoor Kitchens",
subCategoryImage: "/image/collection-page/indoor-kitchens.png",
products: [
{
productSlug: "artematica",
title: "Artematica",
image: "/image/collection-page/indoor-kitchen/01.png",
},
{
productSlug: "artematica-soft-outline",
title: "Artematica Soft Outline",
image: "/image/collection-page/indoor-kitchen/02.png",
},
{
productSlug: "riciclantica",
title: "Riciclantica",
image: "/image/collection-page/indoor-kitchen/03.png",
},
{
productSlug: "riciclantica-outline",
title: "Riciclantica Outline",
image: "/image/collection-page/indoor-kitchen/04.png",
},
{
productSlug: "frame-classic",
title: "Frame Classic",
image: "/image/collection-page/indoor-kitchen/01.png",
},
],
},
{
subCategorySlug: "outdoor-kitchens",
subCategoryName: "Outdoor Kitchens",
subCategoryImage: "/image/collection-page/outdoor-kitchens.png",
products: [
{
productSlug: "sunstone-pro",
title: "Sunstone Pro",
description: "Premium outdoor kitchen setup.",
},
],
},
{
subCategorySlug: "pantry-and-coffee-bar",
subCategoryName: "Pantry and coffee bar",
subCategoryImage: "/image/collection-page/pantry.png",
products: [
{
productSlug: "sunstone-pro",
title: "Sunstone Pro",
description: "Premium outdoor kitchen setup.",
},
],
},
{
subCategorySlug: "sepecial-elements",
subCategoryName: "Sepecial Elements",
subCategoryImage: "/image/collection-page/special-elements.png",
products: [
{
productSlug: "sunstone-pro",
title: "Sunstone Pro",
description: "Premium outdoor kitchen setup.",
},
],
},
{
subCategorySlug: "kitchen-accessories",
subCategoryName: "Kitchen Accessories",
subCategoryImage: "/image/collection-page/kitchchen-Accessories.png",
products: [
{
productSlug: "sunstone-pro",
title: "Sunstone Pro",
description: "Premium outdoor kitchen setup.",
},
],
},
],
},
];
pages/index.js
...@@ -23,9 +23,9 @@ const Home = ({ homepage }) => { ...@@ -23,9 +23,9 @@ const Home = ({ homepage }) => {
<Video /> <Video />
<Overview /> <Overview />
<ProjectSlider /> <ProjectSlider />
<Contact />
<BlogHome /> <BlogHome />
<Catalogues /> <Catalogues />
<Contact />
</> </>
); );
......
public/image/footer-logo.png
public/image/footer-logo.png

6.36 KB | W: | H:

public/image/footer-logo.png

7.51 KB | W: | H:

public/image/footer-logo.png
public/image/footer-logo.png
public/image/footer-logo.png
public/image/footer-logo.png
  • 2-up
  • Swipe
  • Onion skin
public/image/icons/arrow-down.svg 0 → 100644
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 20.5L8 12.5L9.86667 10.6333L16 16.7333L22.1333 10.6333L24 12.5L16 20.5Z" fill="black"/>
</svg>
public/image/icons/nav-arrow-left.svg 0 → 100644
<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-9.77516e-05 6L5.9999 12L7.3999 10.6L2.7999 6L7.3999 1.4L5.9999 0L-9.77516e-05 6Z" fill="black"/>
</svg>
public/image/icons/nav-arrow.svg 0 → 100644
<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.4 6L1.4 12L0 10.6L4.6 6L0 1.4L1.4 0L7.4 6Z" fill="black"/>
</svg>
public/image/icons/toggle-btn-close.svg 0 → 100644
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="#E0E0E0"/>
<path d="M14.4 28L13 26.6L18.6 21L13 15.4L14.4 14L20 19.6L25.6 14L27 15.4L21.4 21L27 26.6L25.6 28L20 22.4L14.4 28Z" fill="#D1A358"/>
</svg>
public/image/icons/toggle-btn.svg 0 → 100644
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="#E0E0E0"/>
<path d="M12 15H28" stroke="#D1A358" stroke-width="1.5"/>
<path d="M14 20L26 20" stroke="#D1A358" stroke-width="1.5"/>
<path d="M12 25H28" stroke="#D1A358" stroke-width="1.5"/>
</svg>
public/image/sketch-bg 1.svg 0 → 100644
This diff could not be displayed because it is too large.
public/video/Akruti Video.mp4 0 → 100644
This file is too large to display.
public/video/about.mp4 0 → 100644
This file is too large to display.
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!