Skip to content

sujata / Akruti-Frontend

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

updated pages

1 parent da3a3bd2
Inline Side-by-side
Showing 12 changed files with 242 additions and 119 deletions
components/About/AboutAkruti.js
import React from 'react' import React from 'react'
import { Col, Row } from 'react-bootstrap' import { Col, Row } from 'react-bootstrap'
import Heading from "@/components/Heading"; import Heading from "@/components/Heading";
const AboutAkruti = () => { const AboutAkruti = ({aboutData}) => {
return ( return (
<> <>
<section className='about-section'> <section className='about-section'>
<div className='custom_container container'> <div className='custom_container container'>
<Row className='text-center justify-content-center'> <Row className='text-center justify-content-center'>
<Col md={8}> <Col md={8}>
<Heading el="h2" heading="About akruti luxe" /> <Heading el="h2" heading={aboutData?.title || ""} isHtml />
<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, <div className='mb-0 gray-text' dangerouslySetInnerHTML={{ __html: aboutData?.description }} />
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> </Col>
</Row> </Row>
</div> </div>
......
components/About/Experience.js
...@@ -8,50 +8,34 @@ import "swiper/css"; ...@@ -8,50 +8,34 @@ import "swiper/css";
import "swiper/css/navigation"; import "swiper/css/navigation";
import "swiper/css/pagination"; import "swiper/css/pagination";
import { Autoplay, Navigation, Pagination } from "swiper/modules"; import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { cleanImage } from "../services/imageHandling";
const CollectionDatas = [
{ 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 = () => { const Experience = ({experience}) => {
return ( return (
<section className="experience_sec es-cust sec_padd "> <section className="experience_sec es-cust sec_padd ">
<Container className="custom_container"> <Container className="custom_container">
{/* Make row full height and align items center */} {/* Make row full height and align items center */}
<Row className="align-items-center"> <Row className="align-items-center">
<Col md={5} className="d-flex flex-column justify-content-center"> <Col md={5} className="d-flex flex-column justify-content-center">
<Heading el="h2" heading="Experience Our New Showroom" /> <Heading el="h2" heading={experience?.title || ""} isHtml />
<FadeInStagger direction="left"> <FadeInStagger direction="left">
{/* <h2 className="heading mb-2">About</h2> */} {/* <h2 className="heading mb-2">About</h2> */}
<p className="gray-text"> <div className="gray-text" dangerouslySetInnerHTML={{ __html: experience?.description }} />
Our newly revamped Akruti Luxe showroom in Lower Parel, Mumbai,
is a celebration of design, craftsmanship, and modern luxury.
</p>
<p>
The space showcases an inspiring new display of Valcucine and
Rimadesio collections — where innovation meets timeless Italian
elegance.
</p>
<p>
Every corner has been thoughtfully curated to offer an immersive
experience of refined living, allowing visitors to explore
materials, finishes, 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> */} {/* <div className="my-5"> <button className="btn4">Read More</button> </div> */}
</FadeInStagger> </FadeInStagger>
</Col> </Col>
<Col md={7}> <Col md={7}>
<div className="exp-showroom-img"> <div className="exp-showroom-img">
<div className="img"><Image className="" width={448} height={624} alt="" src="/image/showroom/01.jpg"></Image></div> {
<div className="img"><Image className="" width={448} height={624} alt="" src="/image/showroom/02.jpg"></Image></div> experience?.images?.map((item, index) => (
<div className="img" key={index}><Image className="" width={448} height={624} alt="" src={cleanImage(item?.image?.url)}></Image></div>
))
}
{/* <div className="img"><Image className="" width={448} height={624} alt="" src="/image/showroom/01.jpg"></Image></div>
<div className="img"><Image className="" width={448} height={624} alt="" src="/image/showroom/02.jpg"></Image></div> */}
</div> </div>
</Col> </Col>
</Row> </Row>
......
components/About/StudioHighlight.js
...@@ -6,36 +6,16 @@ import "swiper/css"; ...@@ -6,36 +6,16 @@ import "swiper/css";
import "swiper/css/navigation"; import "swiper/css/navigation";
import "swiper/css/pagination"; import "swiper/css/pagination";
import { Autoplay, Navigation, Pagination } from "swiper/modules"; import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { cleanImage } from "../services/imageHandling";
const CollectionData = [ const StudioHighlight = ({studioHighlights}) => {
{ image: "/image/studio-highlights/05.png" },
{ image: "/image/studio-highlights/06.png" },
{ image: "/image/studio-highlights/07.png" },
{ image: "/image/studio-highlights/08.png" },
{ image: "/image/studio-highlights/09.png" },
{ image: "/image/studio-highlights/10.png" },
{ image: "/image/studio-highlights/11.png" },
{ image: "/image/studio-highlights/12.png" },
{ image: "/image/studio-highlights/13.png" },
{ image: "/image/studio-highlights/14.png" },
{ image: "/image/studio-highlights/15.png" },
{ image: "/image/studio-highlights/16.png" },
{ image: "/image/studio-highlights/17.png" },
{ 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 ( return (
<> <>
<section className="studiohighlight-section catalogues-sec sec_padd"> <section className="studiohighlight-section catalogues-sec sec_padd">
<div className="custom_container_leftAuto container position-relative"> <div className="custom_container_leftAuto container position-relative">
<Row className="text-center"> <Row className="text-center">
<Col> <Col>
<Heading el="h2" heading="Studio Highlights" /> <Heading el="h2" heading={studioHighlights?.title || ""} isHtml />
</Col> </Col>
</Row> </Row>
<Row> <Row>
...@@ -66,12 +46,12 @@ const StudioHighlight = () => { ...@@ -66,12 +46,12 @@ const StudioHighlight = () => {
1200: { slidesPerView: 3.7, spaceBetween: 20 }, 1200: { slidesPerView: 3.7, spaceBetween: 20 },
}} }}
> >
{CollectionData.map((item, index) => ( {studioHighlights?.Items?.image?.map((item, index) => (
<SwiperSlide key={index}> <SwiperSlide key={index}>
<div className="collection-card"> <div className="collection-card">
<img <img
src={item.image} src={cleanImage(item?.url)}
alt={item.title} alt={item?.title}
className="img-fluid rounded-lg hover-zooms" className="img-fluid rounded-lg hover-zooms"
/> />
</div> </div>
......
components/Layout/Header.js
...@@ -160,7 +160,10 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -160,7 +160,10 @@ export default function Navigation({ collectionsData = [] }) {
const pathname = usePathname(); const pathname = usePathname();
const isActive = (path) => pathname === path; const isActive = (path) => {
if (!path) return false;
return pathname === path || pathname.startsWith(path + "/");
};
useEffect(() => { useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 50); const onScroll = () => setScrolled(window.scrollY > 50);
...@@ -214,7 +217,8 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -214,7 +217,8 @@ export default function Navigation({ collectionsData = [] }) {
? `/collections/${collectionsData[0].categorySlug}` ? `/collections/${collectionsData[0].categorySlug}`
: "#" : "#"
} }
className="nav-link" className={`nav-link ${pathname.startsWith("/collections") ? "active" : ""
}`}
onClick={() => setShow(false)} onClick={() => setShow(false)}
> >
Collection Collection
...@@ -235,13 +239,10 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -235,13 +239,10 @@ export default function Navigation({ collectionsData = [] }) {
href={`/collections/${cat.categorySlug}`} href={`/collections/${cat.categorySlug}`}
onMouseEnter={() => { onMouseEnter={() => {
setCollectionL1(cat); setCollectionL1(cat);
setCollectionL2(cat.subCategories[0]); // reset level 2 setCollectionL2(cat.subCategories?.[0] ?? null);
}} }}
className={ className={
collectionL1.categorySlug === isActive(`/collections/${cat.categorySlug}`) ? "active" : ""
cat.categorySlug
? "active"
: ""
} }
> >
{cat.categoryName} {cat.categoryName}
...@@ -256,14 +257,15 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -256,14 +257,15 @@ export default function Navigation({ collectionsData = [] }) {
</h6> </h6>
<ul className="navList01"> <ul className="navList01">
{collectionL1?.subCategories.map((sub) => ( {collectionL1?.subCategories?.map((sub) => (
<li key={sub.subCategorySlug}> <li key={sub.subCategorySlug}>
<Link <Link
href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`} href={`/collections/${collectionL1?.categorySlug}/${sub.subCategorySlug}`}
onMouseEnter={() => setCollectionL2(sub)} onMouseEnter={() => setCollectionL2(sub)}
className={ className={
collectionL2.subCategorySlug === isActive(
sub.subCategorySlug `/collections/${collectionL1?.categorySlug}/${sub.subCategorySlug}`
)
? "active" ? "active"
: "" : ""
} }
...@@ -285,6 +287,13 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -285,6 +287,13 @@ export default function Navigation({ collectionsData = [] }) {
<li key={product.productSlug}> <li key={product.productSlug}>
<Link <Link
href={`/collections/${collectionL1?.categorySlug}/${collectionL2?.subCategorySlug}/${product.productSlug}`} href={`/collections/${collectionL1?.categorySlug}/${collectionL2?.subCategorySlug}/${product.productSlug}`}
className={
isActive(
`/collections/${collectionL1?.categorySlug}/${collectionL2?.subCategorySlug}/${product.productSlug}`
)
? "active"
: ""
}
> >
{product.title} {product.title}
</Link> </Link>
...@@ -332,7 +341,11 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -332,7 +341,11 @@ export default function Navigation({ collectionsData = [] }) {
setBrandL1(brandsData[0]); setBrandL1(brandsData[0]);
}} }}
> >
<Link href="/brands/valcucine" className="nav-link"> <Link
href="/brands/valcucine"
className={`nav-link ${pathname.startsWith("/brands") ? "active" : ""
}`}
>
Brands Brands
</Link> </Link>
...@@ -382,13 +395,27 @@ export default function Navigation({ collectionsData = [] }) { ...@@ -382,13 +395,27 @@ export default function Navigation({ collectionsData = [] }) {
{/* <Nav.Link as={Link} href="/brands/doors"> {/* <Nav.Link as={Link} href="/brands/doors">
Brands Brands
</Nav.Link> */} </Nav.Link> */}
<Nav.Link as={Link} href="/about"> <Nav.Link
as={Link}
href="/about"
className={isActive("/about") ? "active" : ""}
>
About About
</Nav.Link> </Nav.Link>
<Nav.Link as={Link} href="/catalogue">
<Nav.Link
as={Link}
href="/catalogue"
className={isActive("/catalogue") ? "active" : ""}
>
Catalogue Catalogue
</Nav.Link> </Nav.Link>
<Nav.Link as={Link} href="/connect">
<Nav.Link
as={Link}
href="/connect"
className={isActive("/connect") ? "active" : ""}
>
Connect Connect
</Nav.Link> </Nav.Link>
</Nav> </Nav>
......
components/valcucines/InnerBannerBrands.js
import React from 'react' import { Swiper, SwiperSlide } from "swiper/react";
import { Col, Row } from 'react-bootstrap' import "swiper/css";
import { cleanImage } from '../services/imageHandling' import "swiper/css/navigation";
import "swiper/css/pagination";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import SwiperBtn from "@/components/Layout/SwiperBtn";
import { cleanImage } from "../services/imageHandling";
import Heading from "@/components/Heading"; import Heading from "@/components/Heading";
import Image from 'next/image'; import Image from "next/image";
import React from "react";
const InnerBannerBrands = ({data}) => { const InnerBannerBrands = ({data}) => {
return ( // return (
<> // <>
<section className='innerbanner-section'> // <section className='innerbanner-section'>
<div className='innerbanner product-details'> // <div className='innerbanner product-details'>
<Row> // <Row>
<Col> // <Col>
<div className='product-banner'> // <div className='product-banner'>
<Image width={1920} height={948} src={data?.image?.url} alt="" /> // <Image width={1920} height={948} src={data?.image?.url} alt="" />
<div className='info'> // <div className='info'>
<Heading el="h2" heading={data?.title} /> // <Heading el="h2" heading={data?.title} />
<div dangerouslySetInnerHTML={{__html: data?.description}}></div> // <div dangerouslySetInnerHTML={{__html: data?.description}}></div>
</div> // </div>
// </div>
// </Col>
// </Row>
// </div>
// </section>
// </>
// )
return (
<>
<section className="innerbanner-section">
<div className="innerbanner product-details">
<div className="product-banner">
<div className="position-relative">
<Swiper
navigation={{
nextEl: ".cust-swiper-button-next",
prevEl: ".cust-swiper-button-prev",
}}
pagination={{ clickable: true }}
autoplay={{ delay: 5000, disableOnInteraction: false }}
loop={false}
modules={[Navigation, Pagination, Autoplay]}
className="homeBannerSwiper"
>
{data?.image?.map((item, index) => (
<SwiperSlide key={index}>
<Image
width={1856}
height={1086}
src={item?.url}
alt=""
/>
</SwiperSlide>
))}
</Swiper>
{/* Navigation buttons outside Swiper - hidden if only 1 image */}
{data?.image?.length > 1 && (
<div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-md-between wrapper-full align-items-center w-100">
<SwiperBtn />
</div>
)}
</div>
<div className="info">
<Heading el="h2" heading={data?.title} />
<div
dangerouslySetInnerHTML={{
__html: data?.description,
}}
></div>
</div> </div>
</Col> </div>
</Row> </div>
</div> </section>
</section> </>
</> );
)
} }
export default InnerBannerBrands export default InnerBannerBrands
pages/about.js
...@@ -5,22 +5,24 @@ import StudioHighlight from "@/components/About/StudioHighlight"; ...@@ -5,22 +5,24 @@ import StudioHighlight from "@/components/About/StudioHighlight";
import Breadcrumb from "@/components/Common/Breadcrumb"; import Breadcrumb from "@/components/Common/Breadcrumb";
import InnerBanner from "@/components/Common/InnerBanner"; import InnerBanner from "@/components/Common/InnerBanner";
import { Contact } from "@/container/Home/Contact"; import { Contact } from "@/container/Home/Contact";
import { getAboutBySlug } from "@/services/aboutApi";
import Head from "next/head"; import Head from "next/head";
const bannerData = [ const bannerData = [
{ {
image: "/image/inner-banner/about.png", image: "/image/inner-banner/about.png",
title: "Banner", title: "Banner",
} }
]; ];
// console.log("bannerData113", bannerData) // console.log("bannerData113", bannerData)
const breadcrumbData = [ const breadcrumbData = [
{ {
href: "/", href: "/",
label: "About" label: "About"
}, },
]; ];
const AboutPage = () => { const AboutPage = ({ aboutData = {} }) => {
console.log("aboutData", aboutData)
return ( return (
<> <>
<Head> <Head>
...@@ -31,11 +33,28 @@ const AboutPage = () => { ...@@ -31,11 +33,28 @@ const AboutPage = () => {
</Head> </Head>
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBanner bannerData={bannerData[0] || []} /> <InnerBanner bannerData={bannerData[0] || []} />
<AboutAkruti /> <AboutAkruti aboutData={aboutData?.aboutInfo} />
<StudioHighlight /> <StudioHighlight studioHighlights={aboutData?.studioHighlights} />
<Experience /> <Experience experience={aboutData?.experience} />
<Contact/> <Contact />
</> </>
); );
}; };
export default AboutPage; export default AboutPage;
export async function getServerSideProps({ params }) {
try {
const aboutData = await getAboutBySlug();
return {
props: {
aboutData,
},
};
} catch (error) {
console.error("Product page SSR error:", error);
return { notFound: true };
}
}
pages/brands/inalco.js
...@@ -12,10 +12,15 @@ import WeCare from "@/components/Inalco/WeCare"; ...@@ -12,10 +12,15 @@ import WeCare from "@/components/Inalco/WeCare";
id: 8, id: 8,
title: "Inalco", title: "Inalco",
description: "<p>INALCO Is Synonymous With Sustainable Innovation, Creativity, Elegance, Excellence, Exclusivity And Emotions.</p>", description: "<p>INALCO Is Synonymous With Sustainable Innovation, Creativity, Elegance, Excellence, Exclusivity And Emotions.</p>",
image: { image: [
{
url: "/image/brands/Inalco.png", url: "/image/brands/Inalco.png",
},
{
url: "/image/brands/Inalco.png",
} }
]
} }
]; ];
......
pages/brands/rimadesio.js
...@@ -12,10 +12,16 @@ import CompanyOverview from "@/components/Rimadesios/CompanyOverview"; ...@@ -12,10 +12,16 @@ import CompanyOverview from "@/components/Rimadesios/CompanyOverview";
id: 8, id: 8,
title: "Rimadesio", title: "Rimadesio",
description: "<p>Our doors are more than entryways—they are crafted statements of design, blending timeless aesthetics with modern functionality. Each piece defines spaces with sophistication and enduring style.</p>", description: "<p>Our doors are more than entryways—they are crafted statements of design, blending timeless aesthetics with modern functionality. Each piece defines spaces with sophistication and enduring style.</p>",
image: { image: [
{
url: "/image/brands/Rimadesio.png",
},
{
url: "/image/brands/Rimadesio.png", url: "/image/brands/Rimadesio.png",
} }
]
} }
]; ];
......
pages/brands/valcucine.js
...@@ -12,10 +12,16 @@ import Head from "next/head"; ...@@ -12,10 +12,16 @@ import Head from "next/head";
id: 8, id: 8,
title: "Valcucine", title: "Valcucine",
description: "<p>Our doors are more than entryways—they are crafted statements of design, blending timeless aesthetics with modern functionality. Each piece defines spaces with sophistication and enduring style.</p>", description: "<p>Our doors are more than entryways—they are crafted statements of design, blending timeless aesthetics with modern functionality. Each piece defines spaces with sophistication and enduring style.</p>",
image: { image: [
{
url: "/image/brands/valcucine.png",
},
{
url: "/image/brands/valcucine.png", url: "/image/brands/valcucine.png",
} }
]
} }
]; ];
......
services/aboutApi.js 0 → 100644
import { fetchFromStrapi } from "./api";
export async function getAboutBySlug() {
try {
const query = {
populate: {
banner: {
populate: {
image: true,
},
},
aboutInfo: {
populate: true,
},
studioHighlights: {
populate: {
Items: {
populate: {
image: true,
},
}
},
},
experience: {
populate: {
images: {
populate: {
image: true,
},
},
},
},
},
};
const response = await fetchFromStrapi(
"/api/about",
query
);
// return single category
return response?.data || [];
} catch (error) {
console.error("About fetch error:", error);
return null;
}
}
styles/globals.css
...@@ -906,6 +906,7 @@ opacity: 1; ...@@ -906,6 +906,7 @@ opacity: 1;
.navbar-nav .nav-link.active, .navbar-nav .nav-link.active,
.navbar-nav .nav-link.show { .navbar-nav .nav-link.show {
color: var(--secondary-color); color: var(--secondary-color);
font-weight: 700;
} }
.gry-img { .gry-img {
/* Set initial state to grayscale (100% grey) */ /* Set initial state to grayscale (100% grey) */
......
styles/style.css
...@@ -159,7 +159,7 @@ p { ...@@ -159,7 +159,7 @@ p {
} }
/* Keep active when dropdown is hovered */ /* Keep active when dropdown is hovered */
.custom-navbar .nav-item.dropdown-custom:hover > .nav-link { .custom-navbar .nav-item.dropdown-custom:hover > .nav-link,.custom-navbar .nav-link:hover {
color: var(--secondary-color); color: var(--secondary-color);
font-weight: 700; font-weight: 700;
} }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!