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 = () => { ...@@ -6,8 +6,8 @@ const AboutAkruti = () => {
<> <>
<section className='about-section'> <section className='about-section'>
<div className='custom_container'> <div className='custom_container'>
<Row className='text-center'> <Row className='text-center justify-content-center'>
<Col> <Col md={10}>
<Heading el="h2" heading="About akruti luxe" /> <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, <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> 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 = () => { ...@@ -23,127 +23,38 @@ const Experience = () => {
<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={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" /> <Heading el="h2" heading="Experience Our New Showroom" />
<FadeInStagger direction="left"> <FadeInStagger direction="left">
{/* <h2 className="heading mb-2">About</h2> */} {/* <h2 className="heading mb-2">About</h2> */}
<p className="gray-text"> <p className="gray-text">
Our newly revamped Akruti Luxe showroom in Lower Parel, Mumbai, is a celebration of design, craftsmanship, and modern luxury. Our newly revamped Akruti Luxe showroom in Lower Parel, Mumbai,
is a celebration of design, craftsmanship, and modern luxury.
<br /> </p>
The space showcases an inspiring new display of Valcucine and Rimadesio collections — where innovation meets timeless Italian elegance. <p>
The space showcases an inspiring new display of Valcucine and
<br /> Rimadesio collections — where innovation meets timeless Italian
Every corner has been thoughtfully curated to offer an immersive experience of refined living, allowing visitors to explore materials, finishes, elegance.
</p>
<br /> <p>
and details that define true sophistication. Step into our world of design excellence and Every corner has been thoughtfully curated to offer an immersive
discover how Akruti Luxe transforms everyday spaces into extraordinary expressions of style. 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> </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={5} className="position-relative"> <Col md={6}>
<Swiper <div className="exp-showroom-img">
slidesPerView={1} <Image width={448} height={624} alt="" src="/image/showroom/01.jpg"></Image>
loop={true} <Image width={448} height={624} alt="" src="/image/showroom/02.jpg"></Image>
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"
/>
</div> </div>
</SwiperSlide> </Col>
))}
</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>
</Row> </Row>
</Container> </Container>
</section> </section>
); );
......
components/About/StudioHighlight.js
...@@ -8,6 +8,20 @@ import "swiper/css/pagination"; ...@@ -8,6 +8,20 @@ import "swiper/css/pagination";
import { Autoplay, Navigation, Pagination } from "swiper/modules"; import { Autoplay, Navigation, Pagination } from "swiper/modules";
const CollectionData = [ 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/01.png" },
{ image: "/image/studio-highlights/02.png" }, { image: "/image/studio-highlights/02.png" },
{ image: "/image/studio-highlights/03.png" }, { image: "/image/studio-highlights/03.png" },
...@@ -18,7 +32,7 @@ const StudioHighlight = () => { ...@@ -18,7 +32,7 @@ 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"> <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="Studio Highlights" />
...@@ -29,7 +43,7 @@ const StudioHighlight = () => { ...@@ -29,7 +43,7 @@ const StudioHighlight = () => {
{/* Swiper */} {/* Swiper */}
<Swiper <Swiper
slidesPerView={4} slidesPerView={4}
spaceBetween={30} spaceBetween={20}
loop={true} loop={true}
allowTouchMove={true} allowTouchMove={true}
autoplay={{ autoplay={{
...@@ -44,12 +58,12 @@ const StudioHighlight = () => { ...@@ -44,12 +58,12 @@ const StudioHighlight = () => {
}} }}
pagination={{ clickable: true }} pagination={{ clickable: true }}
modules={[Navigation, Autoplay, Pagination]} modules={[Navigation, Autoplay, Pagination]}
className="collectionSwiper" className="studioSwiper"
breakpoints={{ breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 }, 320: { slidesPerView: 1, spaceBetween: 15 },
640: { slidesPerView: 2, spaceBetween: 20 }, 640: { slidesPerView: 2, spaceBetween: 20 },
992: { slidesPerView: 3, spaceBetween: 25 }, 992: { slidesPerView: 3, spaceBetween: 25 },
1200: { slidesPerView: 3.7, spaceBetween: 30 }, 1200: { slidesPerView: 3.7, spaceBetween: 20 },
}} }}
> >
{CollectionData.map((item, index) => ( {CollectionData.map((item, index) => (
...@@ -58,12 +72,19 @@ const StudioHighlight = () => { ...@@ -58,12 +72,19 @@ const StudioHighlight = () => {
<img <img
src={item.image} src={item.image}
alt={item.title} alt={item.title}
className="img-fluid rounded-lg hover-zoom" className="img-fluid rounded-lg hover-zooms"
/> />
</div> </div>
</SwiperSlide> </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"> <button className="cust-swiper-button-prev">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
...@@ -130,8 +151,6 @@ const StudioHighlight = () => { ...@@ -130,8 +151,6 @@ const StudioHighlight = () => {
</svg> </svg>
</button> </button>
</div> </div>
</Swiper>
</Col> </Col>
</Row> </Row>
</div> </div>
......
components/Layout/Footer.js
...@@ -45,7 +45,7 @@ const Footer = () => { ...@@ -45,7 +45,7 @@ const Footer = () => {
<Row> <Row>
{/* Quick Links */} {/* Quick Links */}
<Col lg={4} xs={6} className="footer-cotent ps-md-4"> <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"> <ul className="list-unstyled">
<li className="mb-2"> <li className="mb-2">
<Link href="/about"> <Link href="/about">
...@@ -69,8 +69,8 @@ const Footer = () => { ...@@ -69,8 +69,8 @@ const Footer = () => {
</Link> </Link>
</li> </li>
<li className=""> <li className="">
<Link href="/contacts"> <Link href="/connect">
Contacts Connect
</Link> </Link>
</li> </li>
</ul> </ul>
...@@ -78,7 +78,7 @@ const Footer = () => { ...@@ -78,7 +78,7 @@ const Footer = () => {
{/* Collections */} {/* Collections */}
<Col lg={4} xs={6} className="footer-cotent ps-md-4"> <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"> <ul className="list-unstyled">
<li className="mb-2"> <li className="mb-2">
<Link href="/collections/kitchens"> <Link href="/collections/kitchens">
...@@ -115,7 +115,7 @@ const Footer = () => { ...@@ -115,7 +115,7 @@ const Footer = () => {
{/* Policies */} {/* Policies */}
<Col lg={4} md={6} className="footer-cotent ps-md-4"> <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"> <ul className="list-unstyled">
<li className="mb-2"> <li className="mb-2">
<Link href="/privacy-policy"> <Link href="/privacy-policy">
......
components/Layout/Header.js
...@@ -395,8 +395,8 @@ const showLevel3 = collectionL2?.products?.length > 0; ...@@ -395,8 +395,8 @@ const showLevel3 = collectionL2?.products?.length > 0;
<Nav.Link as={Link} href="/catalogue"> <Nav.Link as={Link} href="/catalogue">
Catalogue Catalogue
</Nav.Link> </Nav.Link>
<Nav.Link as={Link} href="/contacts"> <Nav.Link as={Link} href="/connect">
Contacts Connect
</Nav.Link> </Nav.Link>
</Nav> </Nav>
</div> </div>
......
container/Home/Catalogues.js
...@@ -80,7 +80,8 @@ const Catalogues = ({cataloguesData}) => { ...@@ -80,7 +80,8 @@ const Catalogues = ({cataloguesData}) => {
</Col> </Col>
</Row> </Row>
</Container> </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"> <button className="cust-swiper-button-prev">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
...@@ -147,6 +148,7 @@ const Catalogues = ({cataloguesData}) => { ...@@ -147,6 +148,7 @@ const Catalogues = ({cataloguesData}) => {
</svg> </svg>
</button> </button>
</div> </div>
</Container>
</div> </div>
</> </>
); );
......
container/Home/Collection.js
...@@ -22,7 +22,7 @@ const CollectionSlider = ({CollectionData}) => { ...@@ -22,7 +22,7 @@ const CollectionSlider = ({CollectionData}) => {
return ( return (
<div className="collection-section sec_padd h-slider"> <div className="collection-section sec_padd h-slider">
<Container className="custom_container_leftAuto"> <Container className="custom_container">
{/* Heading + Nav Row */} {/* Heading + Nav Row */}
<Row className="align-items-start justify-content-md-between"> <Row className="align-items-start justify-content-md-between">
<Col lg={8} md={8}> <Col lg={8} md={8}>
...@@ -35,7 +35,7 @@ const CollectionSlider = ({CollectionData}) => { ...@@ -35,7 +35,7 @@ const CollectionSlider = ({CollectionData}) => {
</div> </div>
</FadeInStagger> </FadeInStagger>
</Col> </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"> <div className="d-flex gap-2">
<button className="cust-swiper-button-prev"> <button className="cust-swiper-button-prev">
<svg <svg
...@@ -105,6 +105,9 @@ const CollectionSlider = ({CollectionData}) => { ...@@ -105,6 +105,9 @@ const CollectionSlider = ({CollectionData}) => {
</div> </div>
</Col> </Col>
</Row> </Row>
</Container>
<Container className="custom_container_leftAuto">
{/* Heading + Nav Row */}
{/* Swiper */} {/* Swiper */}
<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 { body {
font-size: 0.83vw; font-size: 0.83vw;
color: #666; color: #666;
text-transform: capitalize; /* text-transform: capitalize; */
} }
/* =====Navigation Button=== */ /* =====Navigation Button=== */
...@@ -713,6 +713,7 @@ input:focus-visible { ...@@ -713,6 +713,7 @@ input:focus-visible {
.navList01 a { .navList01 a {
color: #666b71; color: #666b71;
font-size: 0.83vw; font-size: 0.83vw;
text-transform: capitalize;
} }
.navList01 a:hover, .navList01 a:hover,
.navList01 a.active, .navList01 a.active,
...@@ -902,7 +903,7 @@ input:focus-visible { ...@@ -902,7 +903,7 @@ input:focus-visible {
.heading { .heading {
font-size: 1.67vw; font-size: 1.67vw;
line-height: 1.67vw; line-height: 1.67vw;
padding-bottom: 0.5rem; padding-bottom: 0.8rem;
} }
.technicalDetails-section { .technicalDetails-section {
margin-top: 3rem; margin-top: 3rem;
...@@ -971,6 +972,7 @@ footer .footer-cotent h6 { ...@@ -971,6 +972,7 @@ footer .footer-cotent h6 {
color: #0f0f0f; color: #0f0f0f;
font-weight: 400; font-weight: 400;
font-size: 14px; 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 { .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); bottom: var(--swiper-pagination-bottom, 25px);
...@@ -1003,6 +1005,7 @@ footer a:hover { ...@@ -1003,6 +1005,7 @@ footer a:hover {
transform: translateY(-50%); transform: translateY(-50%);
z-index: 10; z-index: 10;
pointer-events: auto; pointer-events: auto;
left: 5%;
} }
.let-connect-form { .let-connect-form {
font-size: 14px; font-size: 14px;
...@@ -1019,6 +1022,19 @@ footer a:hover { ...@@ -1019,6 +1022,19 @@ footer a:hover {
.let-connect-form .form-check-label{ .let-connect-form .form-check-label{
padding-left: 0.5rem; 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) { @media only screen and (max-width: 1023px) {
} }
/* ===== Mobile ===== */ /* ===== Mobile ===== */
......
styles/style.css
...@@ -57,7 +57,7 @@ a { ...@@ -57,7 +57,7 @@ a {
p { p {
/* font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320))); */ /* font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320))); */
line-height: 1.9; line-height: 1.7;
font-family: Roboto-Regular; font-family: Roboto-Regular;
margin-bottom: 0.8rem; margin-bottom: 0.8rem;
/* margin-bottom: 0.5rem; */ /* 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!