Skip to content

sujata / Akruti-Frontend

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

updated changes

1 parent e4e59a68
Inline Side-by-side
Showing 29 changed files with 84 additions and 133 deletions
components/About/AboutAkruti.js
......@@ -6,8 +6,8 @@ const AboutAkruti = () => {
<>
<section className='about-section'>
<div className='custom_container'>
<Row className='text-center'>
<Col>
<Row className='text-center justify-content-center'>
<Col md={10}>
<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>
......
components/About/Experience.js
......@@ -23,127 +23,38 @@ const Experience = () => {
<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">
<Col md={6} 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.
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> */}
</FadeInStagger>
</Col>
<Col md={5} className="position-relative">
<Swiper
slidesPerView={1}
loop={true}
navigation={{
nextEl: ".cust-swiper-button-next",
prevEl: ".cust-swiper-button-prev",
}}
pagination={{ clickable: true }}
modules={[Navigation, Pagination]}
className="collectionSwiper"
>
{CollectionDatas.map((item, index) => (
<SwiperSlide key={index}>
<div className="collection-card">
<Image
src={item.image}
alt="Experience image"
width={600}
height={500}
className="img-fluid rounded-lg hover-zooms"
/>
<Col md={6}>
<div className="exp-showroom-img">
<Image width={448} height={624} alt="" src="/image/showroom/01.jpg"></Image>
<Image width={448} height={624} alt="" src="/image/showroom/02.jpg"></Image>
</div>
</SwiperSlide>
))}
</Swiper>
{/* Navigation Buttons */}
<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>
</Col>
</Col>
</Row>
</Container>
</section>
);
......
components/About/StudioHighlight.js
......@@ -8,6 +8,20 @@ import "swiper/css/pagination";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
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" },
......@@ -18,7 +32,7 @@ const StudioHighlight = () => {
return (
<>
<section className="studiohighlight-section catalogues-sec sec_padd">
<div className="custom_container_leftAuto container">
<div className="custom_container_leftAuto container position-relative">
<Row className="text-center">
<Col>
<Heading el="h2" heading="Studio Highlights" />
......@@ -29,7 +43,7 @@ const StudioHighlight = () => {
{/* Swiper */}
<Swiper
slidesPerView={4}
spaceBetween={30}
spaceBetween={20}
loop={true}
allowTouchMove={true}
autoplay={{
......@@ -44,12 +58,12 @@ const StudioHighlight = () => {
}}
pagination={{ clickable: true }}
modules={[Navigation, Autoplay, Pagination]}
className="collectionSwiper"
className="studioSwiper"
breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 },
640: { slidesPerView: 2, spaceBetween: 20 },
992: { slidesPerView: 3, spaceBetween: 25 },
1200: { slidesPerView: 3.7, spaceBetween: 30 },
1200: { slidesPerView: 3.7, spaceBetween: 20 },
}}
>
{CollectionData.map((item, index) => (
......@@ -58,12 +72,19 @@ const StudioHighlight = () => {
<img
src={item.image}
alt={item.title}
className="img-fluid rounded-lg hover-zoom"
className="img-fluid rounded-lg hover-zooms"
/>
</div>
</SwiperSlide>
))}
<div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-between align-items-center w-100">
</Swiper>
</Col>
</Row>
<Row>
<Col>
<div className="custom_container container 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"
......@@ -130,8 +151,6 @@ const StudioHighlight = () => {
</svg>
</button>
</div>
</Swiper>
</Col>
</Row>
</div>
......
components/Layout/Footer.js
......@@ -45,7 +45,7 @@ const Footer = () => {
<Row>
{/* Quick Links */}
<Col lg={4} xs={6} className="footer-cotent ps-md-4">
<h6 className="mb-3">Quick Links</h6>
<h6 className="">Quick Links</h6>
<ul className="list-unstyled">
<li className="mb-2">
<Link href="/about">
......@@ -69,8 +69,8 @@ const Footer = () => {
</Link>
</li>
<li className="">
<Link href="/contacts">
Contacts
<Link href="/connect">
Connect
</Link>
</li>
</ul>
......@@ -78,7 +78,7 @@ const Footer = () => {
{/* Collections */}
<Col lg={4} xs={6} className="footer-cotent ps-md-4">
<h6 className="mb-3">Collections</h6>
<h6 className="">Collections</h6>
<ul className="list-unstyled">
<li className="mb-2">
<Link href="/collections/kitchens">
......@@ -115,7 +115,7 @@ const Footer = () => {
{/* Policies */}
<Col lg={4} md={6} className="footer-cotent ps-md-4">
<h6 className="mb-3">Policies</h6>
<h6 className="">Policies</h6>
<ul className="list-unstyled">
<li className="mb-2">
<Link href="/privacy-policy">
......
components/Layout/Header.js
......@@ -395,8 +395,8 @@ const showLevel3 = collectionL2?.products?.length > 0;
<Nav.Link as={Link} href="/catalogue">
Catalogue
</Nav.Link>
<Nav.Link as={Link} href="/contacts">
Contacts
<Nav.Link as={Link} href="/connect">
Connect
</Nav.Link>
</Nav>
</div>
......
container/Home/Catalogues.js
......@@ -80,7 +80,8 @@ const Catalogues = ({cataloguesData}) => {
</Col>
</Row>
</Container>
<div className="position-absolute swiperbtn1 d-flex d-nones justify-content-between menu-desktop-full align-items-center w-100 ">
<Container className="custom_container position-absolute swiperbtn1">
<div className=" d-flex d-nones justify-content-between align-items-center w-100 ">
<button className="cust-swiper-button-prev">
<svg
xmlns="http://www.w3.org/2000/svg"
......@@ -147,6 +148,7 @@ const Catalogues = ({cataloguesData}) => {
</svg>
</button>
</div>
</Container>
</div>
</>
);
......
container/Home/Collection.js
......@@ -22,7 +22,7 @@ const CollectionSlider = ({CollectionData}) => {
return (
<div className="collection-section sec_padd h-slider">
<Container className="custom_container_leftAuto">
<Container className="custom_container">
{/* Heading + Nav Row */}
<Row className="align-items-start justify-content-md-between">
<Col lg={8} md={8}>
......@@ -35,7 +35,7 @@ const CollectionSlider = ({CollectionData}) => {
</div>
</FadeInStagger>
</Col>
<Col lg={4} md={4} className="d-flex justify-content-end mt-2 mb-3 mb-md-0 head-arrow-right">
<Col lg={4} md={4} className="d-flex justify-content-end mt-2 mb-3 mb-md-0">
<div className="d-flex gap-2">
<button className="cust-swiper-button-prev">
<svg
......@@ -105,6 +105,9 @@ const CollectionSlider = ({CollectionData}) => {
</div>
</Col>
</Row>
</Container>
<Container className="custom_container_leftAuto">
{/* Heading + Nav Row */}
{/* Swiper */}
<Swiper
......
public/image/contact-us.png
public/image/contact-us.png

1.75 MB | W: | H:

public/image/contact-us.png

635 KB | W: | H:

public/image/contact-us.png
public/image/contact-us.png
public/image/contact-us.png
public/image/contact-us.png
  • 2-up
  • Swipe
  • Onion skin
public/image/studio-highlights/01.png
public/image/studio-highlights/01.png

384 KB | W: | H:

public/image/studio-highlights/01.png

436 KB | W: | H:

public/image/studio-highlights/01.png
public/image/studio-highlights/01.png
public/image/studio-highlights/01.png
public/image/studio-highlights/01.png
  • 2-up
  • Swipe
  • Onion skin
public/image/studio-highlights/03.png
public/image/studio-highlights/03.png

338 KB | W: | H:

public/image/studio-highlights/03.png

374 KB | W: | H:

public/image/studio-highlights/03.png
public/image/studio-highlights/03.png
public/image/studio-highlights/03.png
public/image/studio-highlights/03.png
  • 2-up
  • Swipe
  • Onion skin
public/image/studio-highlights/04.png
public/image/studio-highlights/04.png

263 KB | W: | H:

public/image/studio-highlights/04.png

415 KB | W: | H:

public/image/studio-highlights/04.png
public/image/studio-highlights/04.png
public/image/studio-highlights/04.png
public/image/studio-highlights/04.png
  • 2-up
  • Swipe
  • Onion skin
styles/globals.css
body {
font-size: 0.83vw;
color: #666;
text-transform: capitalize;
/* text-transform: capitalize; */
}
/* =====Navigation Button=== */
......@@ -713,6 +713,7 @@ input:focus-visible {
.navList01 a {
color: #666b71;
font-size: 0.83vw;
text-transform: capitalize;
}
.navList01 a:hover,
.navList01 a.active,
......@@ -902,7 +903,7 @@ input:focus-visible {
.heading {
font-size: 1.67vw;
line-height: 1.67vw;
padding-bottom: 0.5rem;
padding-bottom: 0.8rem;
}
.technicalDetails-section {
margin-top: 3rem;
......@@ -971,6 +972,7 @@ footer .footer-cotent h6 {
color: #0f0f0f;
font-weight: 400;
font-size: 14px;
margin-bottom: 1.5rem;
}
.homeBannerSwiper .swiper-pagination-fraction, .homeBannerSwiper .swiper-pagination-custom, .homeBannerSwiper .swiper-horizontal > .swiper-pagination-bullets, .homeBannerSwiper .swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: var(--swiper-pagination-bottom, 25px);
......@@ -1003,6 +1005,7 @@ footer a:hover {
transform: translateY(-50%);
z-index: 10;
pointer-events: auto;
left: 5%;
}
.let-connect-form {
font-size: 14px;
......@@ -1019,6 +1022,19 @@ footer a:hover {
.let-connect-form .form-check-label{
padding-left: 0.5rem;
}
.exp-showroom-img{
display: flex;
}
.exp-showroom-img img{
margin: 1rem;
}
.exp-showroom-img img:first-child{
margin-top: 8rem;
}
.studiohighlight-section .studioSwiper .collection-card img{
width: 100%;
height: 100%;
}
@media only screen and (max-width: 1023px) {
}
/* ===== Mobile ===== */
......
styles/style.css
......@@ -57,7 +57,7 @@ a {
p {
/* font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320))); */
line-height: 1.9;
line-height: 1.7;
font-family: Roboto-Regular;
margin-bottom: 0.8rem;
/* margin-bottom: 0.5rem; */
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!