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 { Col, Row } from 'react-bootstrap'
import Heading from "@/components/Heading";
const AboutAkruti = () => {
const AboutAkruti = ({aboutData}) => {
return (
<>
<section className='about-section'>
<div className='custom_container container'>
<Row className='text-center justify-content-center'>
<Col md={8}>
<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>
<Heading el="h2" heading={aboutData?.title || ""} isHtml />
<div className='mb-0 gray-text' dangerouslySetInnerHTML={{ __html: aboutData?.description }} />
</Col>
</Row>
</div>
......
components/About/Experience.js
......@@ -8,50 +8,34 @@ import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
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 (
<section className="experience_sec es-cust sec_padd ">
<Container className="custom_container">
{/* Make row full height and align items center */}
<Row className="align-items-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">
{/* <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.
</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="gray-text" dangerouslySetInnerHTML={{ __html: experience?.description }} />
{/* <div className="my-5"> <button className="btn4">Read More</button> </div> */}
</FadeInStagger>
</Col>
<Col md={7}>
<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>
</Col>
</Row>
......
components/About/StudioHighlight.js
......@@ -6,36 +6,16 @@ import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { cleanImage } from "../services/imageHandling";
const CollectionData = [
{ 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 = () => {
const StudioHighlight = ({studioHighlights}) => {
return (
<>
<section className="studiohighlight-section catalogues-sec sec_padd">
<div className="custom_container_leftAuto container position-relative">
<Row className="text-center">
<Col>
<Heading el="h2" heading="Studio Highlights" />
<Heading el="h2" heading={studioHighlights?.title || ""} isHtml />
</Col>
</Row>
<Row>
......@@ -66,12 +46,12 @@ const StudioHighlight = () => {
1200: { slidesPerView: 3.7, spaceBetween: 20 },
}}
>
{CollectionData.map((item, index) => (
{studioHighlights?.Items?.image?.map((item, index) => (
<SwiperSlide key={index}>
<div className="collection-card">
<img
src={item.image}
alt={item.title}
src={cleanImage(item?.url)}
alt={item?.title}
className="img-fluid rounded-lg hover-zooms"
/>
</div>
......
components/Layout/Header.js
......@@ -160,7 +160,10 @@ export default function Navigation({ collectionsData = [] }) {
const pathname = usePathname();
const isActive = (path) => pathname === path;
const isActive = (path) => {
if (!path) return false;
return pathname === path || pathname.startsWith(path + "/");
};
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 50);
......@@ -214,7 +217,8 @@ export default function Navigation({ collectionsData = [] }) {
? `/collections/${collectionsData[0].categorySlug}`
: "#"
}
className="nav-link"
className={`nav-link ${pathname.startsWith("/collections") ? "active" : ""
}`}
onClick={() => setShow(false)}
>
Collection
......@@ -235,13 +239,10 @@ export default function Navigation({ collectionsData = [] }) {
href={`/collections/${cat.categorySlug}`}
onMouseEnter={() => {
setCollectionL1(cat);
setCollectionL2(cat.subCategories[0]); // reset level 2
setCollectionL2(cat.subCategories?.[0] ?? null);
}}
className={
collectionL1.categorySlug ===
cat.categorySlug
? "active"
: ""
isActive(`/collections/${cat.categorySlug}`) ? "active" : ""
}
>
{cat.categoryName}
......@@ -256,14 +257,15 @@ export default function Navigation({ collectionsData = [] }) {
</h6>
<ul className="navList01">
{collectionL1?.subCategories.map((sub) => (
{collectionL1?.subCategories?.map((sub) => (
<li key={sub.subCategorySlug}>
<Link
href={`/collections/${collectionL1.categorySlug}/${sub.subCategorySlug}`}
href={`/collections/${collectionL1?.categorySlug}/${sub.subCategorySlug}`}
onMouseEnter={() => setCollectionL2(sub)}
className={
collectionL2.subCategorySlug ===
sub.subCategorySlug
isActive(
`/collections/${collectionL1?.categorySlug}/${sub.subCategorySlug}`
)
? "active"
: ""
}
......@@ -285,6 +287,13 @@ export default function Navigation({ collectionsData = [] }) {
<li key={product.productSlug}>
<Link
href={`/collections/${collectionL1?.categorySlug}/${collectionL2?.subCategorySlug}/${product.productSlug}`}
className={
isActive(
`/collections/${collectionL1?.categorySlug}/${collectionL2?.subCategorySlug}/${product.productSlug}`
)
? "active"
: ""
}
>
{product.title}
</Link>
......@@ -332,7 +341,11 @@ export default function Navigation({ collectionsData = [] }) {
setBrandL1(brandsData[0]);
}}
>
<Link href="/brands/valcucine" className="nav-link">
<Link
href="/brands/valcucine"
className={`nav-link ${pathname.startsWith("/brands") ? "active" : ""
}`}
>
Brands
</Link>
......@@ -382,13 +395,27 @@ export default function Navigation({ collectionsData = [] }) {
{/* <Nav.Link as={Link} href="/brands/doors">
Brands
</Nav.Link> */}
<Nav.Link as={Link} href="/about">
<Nav.Link
as={Link}
href="/about"
className={isActive("/about") ? "active" : ""}
>
About
</Nav.Link>
<Nav.Link as={Link} href="/catalogue">
<Nav.Link
as={Link}
href="/catalogue"
className={isActive("/catalogue") ? "active" : ""}
>
Catalogue
</Nav.Link>
<Nav.Link as={Link} href="/connect">
<Nav.Link
as={Link}
href="/connect"
className={isActive("/connect") ? "active" : ""}
>
Connect
</Nav.Link>
</Nav>
......
components/valcucines/InnerBannerBrands.js
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import { cleanImage } from '../services/imageHandling'
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
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 Image from 'next/image';
import Image from "next/image";
import React from "react";
const InnerBannerBrands = ({data}) => {
return (
<>
<section className='innerbanner-section'>
<div className='innerbanner product-details'>
<Row>
<Col>
<div className='product-banner'>
<Image width={1920} height={948} src={data?.image?.url} alt="" />
<div className='info'>
<Heading el="h2" heading={data?.title} />
<div dangerouslySetInnerHTML={{__html: data?.description}}></div>
</div>
// return (
// <>
// <section className='innerbanner-section'>
// <div className='innerbanner product-details'>
// <Row>
// <Col>
// <div className='product-banner'>
// <Image width={1920} height={948} src={data?.image?.url} alt="" />
// <div className='info'>
// <Heading el="h2" heading={data?.title} />
// <div dangerouslySetInnerHTML={{__html: data?.description}}></div>
// </div>
// </div>
// </Col>
// </Row>
// </div>
// </section>
// </>
// )
return (
<>
<section className="innerbanner-section">
<div className="innerbanner product-details">
<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>
</Col>
</Row>
</div>
</section>
</>
)
</div>
</div>
</section>
</>
);
}
export default InnerBannerBrands
pages/about.js
......@@ -5,22 +5,24 @@ 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 { getAboutBySlug } from "@/services/aboutApi";
import Head from "next/head";
const bannerData = [
{
image: "/image/inner-banner/about.png",
title: "Banner",
}
];
// console.log("bannerData113", bannerData)
const bannerData = [
{
image: "/image/inner-banner/about.png",
title: "Banner",
}
];
// console.log("bannerData113", bannerData)
const breadcrumbData = [
{
href: "/",
label: "About"
},
];
const AboutPage = () => {
const AboutPage = ({ aboutData = {} }) => {
console.log("aboutData", aboutData)
return (
<>
<Head>
......@@ -31,11 +33,28 @@ const AboutPage = () => {
</Head>
<Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBanner bannerData={bannerData[0] || []} />
<AboutAkruti />
<StudioHighlight />
<Experience />
<Contact/>
<AboutAkruti aboutData={aboutData?.aboutInfo} />
<StudioHighlight studioHighlights={aboutData?.studioHighlights} />
<Experience experience={aboutData?.experience} />
<Contact />
</>
);
};
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";
id: 8,
title: "Inalco",
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",
}
]
}
];
......
pages/brands/rimadesio.js
......@@ -12,10 +12,16 @@ import CompanyOverview from "@/components/Rimadesios/CompanyOverview";
id: 8,
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>",
image: {
image: [
{
url: "/image/brands/Rimadesio.png",
},
{
url: "/image/brands/Rimadesio.png",
}
]
}
];
......
pages/brands/valcucine.js
......@@ -12,10 +12,16 @@ import Head from "next/head";
id: 8,
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>",
image: {
image: [
{
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;
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
color: var(--secondary-color);
font-weight: 700;
}
.gry-img {
/* Set initial state to grayscale (100% grey) */
......
styles/style.css
......@@ -159,7 +159,7 @@ p {
}
/* 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);
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!