Skip to content

sujata / Akruti-Frontend

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

updated brands and pages

1 parent 54aac07a
Inline Side-by-side
Showing 28 changed files with 196 additions and 193 deletions
components/Brands/AboutInfoBrands.js
......@@ -9,33 +9,17 @@ const AboutInfoBrands = () => {
<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 md={10}>
<Heading el="h2" heading="Company" />
<p className='mb-3 gray-text'>Valcucine has been standing out in the kitchen sector “Made in Italy” for over forty years, focusing on sustainability, wellbeing, innovation and timeless kitchens, that are made to last.</p>
<p className='mb-3 gray-text'>Each collection is designed with people in mind to create products that contribute to the wellness and needs of the user. The company has earned a reputation for its dedication to improving the ergonomics and the use of space. This has led to the Logica System, which was created in the 90s. The innovative and ergonomic system features an equipped back section, jumbo drawers and wall units with lift-up doors that makes it easier to work in the kitchen because everything is within hand’s reach. The special New Logica System and Air Logica System units were developed as an evolved version of the equipped back section and the wall units. These systems blend aesthetics with functionality and are able to contain and conceal, when necessary, all the equipment required in the kitchen. To further contribute to the daily comfort of consumers, Valcucine has also designed specific details such as the luminous panel; when fitted in special units, the panel contributes to giving the kitchen a more airy appeal.</p>
<p className='mb-3 gray-text'>Moreover, Valcucine constantly carries out performance tests on harmful volatile substances, artificial radioactivity, and adheres to the strictest regulations on formaldehyde emissions. Valcucine is synonymous with innovation. It has revolutionised the kitchen space with numerous ground-breaking solutions. Valcucine changed the whole concept of kitchen doors with Artematica, the first door in the world with an aluminium frame that is invisible from the outside, plus a 5mm thick, aesthetic, HPL panel. The glass version, presented in 2006 with Invitrum base units, was the first-ever 100% recyclable kitchen.</p>
<div className="my-5"> <button className="btn4">Read More</button> </div>
</Col>
</Row>
</div>
</section>
</>
......
components/Brands/CompanyOverview.js 0 → 100644
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import Heading from "@/components/Heading";
import Image from 'next/image';
const CompanyOverview = () => {
return (
<>
<section className='about-info-section company-overview-section'>
<div className='container'>
<Row className='my-5'>
<Col md={6}>
<div className='luxury-items'>
<Image width={594} height={560} src="/image/brands-overviews/mission.png" />
<div className='title'>Mission and values</div>
<div className='info'>We place people and their well-being at the heart of everything we do, creating timeless, handcrafted kitchens that bring joy to everyday life. Through innovative design, quality materials, and a deep commitment to sustainability, we transform cooking into an extraordinary experience while respecting our planet.</div>
</div>
</Col>
<Col md={6}>
<div className='luxury-items option02'>
<Image width={570} height={629} src="/image/brands-overviews/certification.png" />
<div className='title'>Certifications</div>
<div className='info'>LEED, FSC, ISO 14001, F4 STARS</div>
</div>
</Col>
<Col md={6}>
<div className='luxury-items'>
<Image width={594} height={629} src="/image/brands-overviews/awards.png" />
<div className='title'>Awards</div>
<div className='info'>2025 Archello Product of the Year – Public vote – for New Logica
2025 Archiproducts Design Awards | Archigraphica + Vela Wall Unit
2025 iF Design Award | Architectural Scenarios
2025 iF Design Award GOLD | Artematica + New Logica
</div>
</div>
</Col>
<Col md={6}>
<div className='luxury-items option02'>
<Image width={594} height={560} src="/image/brands-overviews/symbol.png" />
<div className='title'>Symbol and Philosophy</div>
<div className='info'>True well-being comes from living in harmony with our environment. This philosophy is reflected in our logo, inspired by an ancient symbol where the four petals represent Fire, Water, Earth, and Air united in balance. At the centre stands Man, symbolised by an unbroken circle, embodying harmony itself—echoing the timeless ideals of proportion and perfection seen in the Vitruvian Man.</div>
</div>
</Col>
<Col md={6}>
<div className='luxury-items'>
<Image width={594} height={629} src="/image/brands-overviews/esg.png" />
<div className='title'>Environmental, Social and Governance</div>
<div className='info'>We are committed to sustainable development through internationally recognized certifications and ESG principles aligned with the United Nations 2030 Agenda. By integrating environmental responsibility, social inclusion, and ethical governance into our operations, we promote transparency, protect natural resources, and foster a fair and responsible workplace. Our goal is continuous improvement toward a more sustainable and balanced future.
</div>
</div>
</Col>
<Col md={6}>
<div className='luxury-items option02'>
<Image width={594} height={560} src="/image/brands-overviews/history.png" />
<div className='title'>History</div>
<div className='info'>We place people and their well-being at the heart of everything we do, creating timeless, handcrafted kitchens that bring joy to everyday life. Through innovative design, quality materials, and a deep commitment to sustainability, we transform cooking into an extraordinary experience while respecting our planet.</div>
</div>
</Col>
</Row>
</div>
</section>
</>
)
}
export default CompanyOverview
components/Brands/InnerBannerBrands.js
......@@ -12,10 +12,10 @@ const InnerBannerBrands = ({subCategoryData}) => {
<Row>
<Col>
<div className='product-banner'>
<Image width={1856} height={1086} src={cleanImage(subCategoryData?.subCategoryImage)} alt="" />
<Image width={1920} height={948} src="/image/doors/valcucine.png" 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>
<Heading el="h2" heading="Valcucine" />
<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>
</div>
</div>
</Col>
......
components/Layout/Header.js
......@@ -327,74 +327,23 @@ const [collectionL2, setCollectionL2] = useState(
Brands
</Link>
<div className="dropdown-menu">
<div className="dropdown-menu brands">
<div className="dropdown-menu-inner custom_container">
<Row>
<Col md={8}>
<Row>
<Col md={4}>
<h6 className="nav-head01">
{brandL1.categoryName}
</h6>
<ul className="navList01">
{brandsData.map((brand) => (
<li key={brand.categorySlug}>
<Link
href={`/brands/${brand.categorySlug}`}
onMouseEnter={() => setBrandL1(brand)}
className={
brandL1?.categorySlug ===
brand.categorySlug
? "active"
: ""
}
>
{brand.categoryName}
</Link>
</li>
))}
</ul>
</Col>
<Col md={4}>
<h6 className="nav-head01">
{brandL1?.categoryName}
</h6>
<ul className="navList01">
{brandL1?.subCategories?.map((sub) => (
<li key={sub.subCategorySlug}>
<Link
href={`/brands/${brandL1.categorySlug}/${sub.subCategorySlug}`}
>
{sub.subCategoryName}
</Link>
</li>
))}
</ul>
</Col>
</Row>
<Row className="justify-content-between">
<Col md={6}>
<div className="m-para">
Experience global luxury, curated by Akruti Luxe.
From kitchens to wardrobes and surfaces, we bring premium international brands together under one roof.
With a focus on quality, detailing, and design excellence, we offer refined solutions for modern luxury spaces.
Designed to elevate every interior with timeless style and performance.
</div>
</Col>
<Col md={4}>
<Row>
{brandL1?.subCategories?.slice(0, 2).map((sub) => (
<Col md={6} key={sub.subCategorySlug}>
<Link
href={`/brands/${brandL1.categorySlug}/${sub.subCategorySlug}`}
>
<Image
src={sub.subCategoryImage}
width={260}
height={280}
alt={sub.subCategoryName}
className="img-fluid"
/>
<p className="mt-1 img-head">
{sub.subCategoryName}
</p>
</Link>
</Col>
))}
</Row>
<Col md={5}>
<div className="m-link">
<Link href="/brands/valcucine"><Image width={177} height={60} src="/image/header-logo/valcucine.png" /></Link>
<Link href="/brands/rimadesio"><Image width={177} height={60} src="/image/header-logo/rimadesio.png" /></Link>
<Link href="/brands/inalco"><Image width={177} height={60} src="/image/header-logo/inalco.png" /></Link>
</div>
</Col>
</Row>
</div>
......
container/Home/HomeBanner.js
......@@ -13,6 +13,7 @@ const BannerData = [
title: "KITCHENS",
description:
"Transform your cooking space into a modern kitchen oasis. With sleek cabinetry and state-of-the-art appliances, you can create a functional yet stylish environment.",
url:""
},
{
desktopImage: "/image/banner/banner1.png",
......@@ -20,6 +21,7 @@ const BannerData = [
title: "LIVING ROOMS",
description:
"Experience comfort and elegance in your living space. Designed with premium furniture and modern décor to elevate your lifestyle.",
url:""
},
{
desktopImage: "/image/banner/banner1.png",
......@@ -27,6 +29,7 @@ const BannerData = [
title: "BEDROOMS",
description:
"Create your dream retreat with cozy and stylish bedroom designs. A perfect balance of comfort, elegance, and tranquility.",
url:""
},
];
......
pages/brands/[category]/[slug].js deleted 100644 → 0
import { useRouter } from "next/router";
import Breadcrumb from "@/components/Common/Breadcrumb";
import { brandsData } from "@/components/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 deleted 100644 → 0
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 "@/components/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/brands/valcucine.js 0 → 100644
"use client";
import AboutInfoBrands from "@/components/Brands/AboutInfoBrands";
import CompanyOverview from "@/components/Brands/CompanyOverview";
import InnerBannerBrands from "@/components/Brands/InnerBannerBrands";
import Breadcrumb from "@/components/Common/Breadcrumb";
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: "Brands"
},
{
href: "/",
label: "Valcucine"
},
];
const ValcucinePage = () => {
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} />
<InnerBannerBrands />
<AboutInfoBrands />
<CompanyOverview />
<Contact/>
</>
);
};
export default ValcucinePage;
styles/globals.css
......@@ -565,13 +565,15 @@ input:focus-visible {
padding: 0.3rem 0;
}
.navList01 a {
color: #000;
color: #666B71;
font-size: 0.83vw;
}
.navList01 a:hover,
.navList01 a.active,
.navList01 span:hover,
.navList01 span.active {
font-weight: 700;
color: #000;
}
.studiohighlight-section .collectionSwiper .swiper-pagination {
bottom: 0rem !important;
......@@ -683,6 +685,50 @@ input:focus-visible {
color: #000;
text-transform: uppercase;
}
.m-para{
font-size: 0.73vw;
padding: 2rem 0.8rem;
}
.m-link{
display: flex;
align-items: center;
justify-content: flex-end;
}
.m-link a{
display: inline-block;
border-right: 1px solid #E0E0E0;
padding: 2rem 1rem;
}
.m-link a:last-child{
border-right: 0;
padding-right: 0;
}
.custom-navbar .dropdown-menu.brands .dropdown-menu-inner {
padding: 0;
}
.dropdown-custom:hover .dropdown-menu.brands{
padding: 0;
}
.company-overview-section{
background: #F5F5F5;
padding-top: 2rem;
padding-bottom: 1px;
}
.about-info-section.company-overview-section .luxury-items .title{
font-size: 1.25vw;
font-weight: 700;
line-height: 116.667%;
padding-top: 1rem;
}
.about-info-section.company-overview-section .luxury-items .info{
margin-top: 0.5rem;
}
.about-info-section.company-overview-section .luxury-items {
padding: 0rem 5rem 2rem 0rem;
}
.about-info-section.company-overview-section .luxury-items.option02 {
padding: 5rem 2rem 5rem 4rem !important;
}
@media only screen and (max-width: 1023px) {
}
/* ===== Mobile ===== */
......@@ -773,6 +819,15 @@ input:focus-visible {
}
/* ===Media query==== */
@media (max-width: 767px) {
.about-info-section.company-overview-section .luxury-items .title {
font-size: 14px;
}
.about-info-section.company-overview-section .luxury-items {
padding: 0rem 0rem 2rem 0rem;
}
.about-info-section.company-overview-section .luxury-items.option02 {
padding: 2rem 0rem 3rem 0rem !important;
}
.homeBannerSwiper {
margin-top: 66px;
height: calc(100vh - 125px);
......@@ -837,6 +892,7 @@ input:focus-visible {
.contact_sec {
background: url(/image/getintouch-m.png) no-repeat top center;
padding-top: 20rem !important;
background-size: 100% 100%;
}
button.cust-swiper-button-prev svg,
button.cust-swiper-button-next svg {
......
styles/style.css
......@@ -23,7 +23,7 @@
/* ====== Root Variables ====== */
:root {
--background: #ffffff;
--foreground: #171717;
--foreground: #666;
--primary-color: #074e96;
--secondary-color: #c39202;
--text-color: #727272;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!