Skip to content

sujata / Akruti-Frontend

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

updated changes

1 parent 220c3630
Inline Side-by-side
Showing 11 changed files with 135 additions and 51 deletions
components/About/AboutAkruti.js
...@@ -7,7 +7,7 @@ const AboutAkruti = () => { ...@@ -7,7 +7,7 @@ const AboutAkruti = () => {
<section className='about-section'> <section className='about-section'>
<div className='custom_container'> <div className='custom_container'>
<Row className='text-center justify-content-center'> <Row className='text-center justify-content-center'>
<Col md={10}> <Col md={8}>
<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,7 +23,7 @@ const Experience = () => { ...@@ -23,7 +23,7 @@ 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={6} 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 Our New Showroom" />
<FadeInStagger direction="left"> <FadeInStagger direction="left">
{/* <h2 className="heading mb-2">About</h2> */} {/* <h2 className="heading mb-2">About</h2> */}
...@@ -48,10 +48,10 @@ const Experience = () => { ...@@ -48,10 +48,10 @@ const Experience = () => {
{/* <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={6}> <Col md={7}>
<div className="exp-showroom-img"> <div className="exp-showroom-img">
<Image width={448} height={624} alt="" src="/image/showroom/01.jpg"></Image> <div className="img"><Image className="" width={448} height={624} alt="" src="/image/showroom/01.jpg"></Image></div>
<Image width={448} height={624} alt="" src="/image/showroom/02.jpg"></Image> <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
...@@ -84,7 +84,7 @@ const StudioHighlight = () => { ...@@ -84,7 +84,7 @@ const StudioHighlight = () => {
</Row> </Row>
<Row> <Row>
<Col> <Col>
<div className="custom_container container position-absolute swiperbtn1 d-lg-flex d-none justify-content-between align-items-center w-100"> <div className=" 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"
......
components/Collection/Explore.js
...@@ -26,7 +26,7 @@ const exploreData = [ ...@@ -26,7 +26,7 @@ const exploreData = [
const Explore = ({productData}) => { const Explore = ({productData}) => {
return ( return (
<section className="explore-section mb-5"> <section className="explore-section sec_padd collection-section">
<Container className="custom_container"> <Container className="custom_container">
<Row className="text-center justify-content-center"> <Row className="text-center justify-content-center">
<Col md={8}> <Col md={8}>
...@@ -39,6 +39,7 @@ const Explore = ({productData}) => { ...@@ -39,6 +39,7 @@ const Explore = ({productData}) => {
<Swiper <Swiper
slidesPerView={4} slidesPerView={4}
spaceBetween={30} spaceBetween={30}
pagination={{ clickable: true }}
// autoplay={{ delay: 5000, disableOnInteraction: false }} // autoplay={{ delay: 5000, disableOnInteraction: false }}
autoplay={false} autoplay={false}
speed={1000} speed={1000}
...@@ -48,8 +49,8 @@ const Explore = ({productData}) => { ...@@ -48,8 +49,8 @@ const Explore = ({productData}) => {
nextEl: ".cust-swiper-button-next", nextEl: ".cust-swiper-button-next",
prevEl: ".cust-swiper-button-prev", prevEl: ".cust-swiper-button-prev",
}} }}
modules={[Navigation, Autoplay]} modules={[Navigation, Autoplay, Pagination]}
className="projectSwiper pb-1 pb-md-5" className="projectSwiper pb-1"
breakpoints={{ breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 }, 320: { slidesPerView: 1, spaceBetween: 15 },
640: { slidesPerView: 2, spaceBetween: 20 }, 640: { slidesPerView: 2, spaceBetween: 20 },
......
components/Collection/TechnicalDetails.js
...@@ -101,7 +101,7 @@ const TechnicalDetails = ({productData}) => { ...@@ -101,7 +101,7 @@ const TechnicalDetails = ({productData}) => {
return ( return (
<> <>
<section className="technicalDetails-section catalogues-secs"> <section className="technicalDetails-section catalogues-secs sec_padd collection-section">
<Container className="custom_container"> <Container className="custom_container">
<Row> <Row>
<Col className="d-flex justify-content-center"> <Col className="d-flex justify-content-center">
......
components/Collection/Video.js
...@@ -7,20 +7,25 @@ const Video = ({productData}) => { ...@@ -7,20 +7,25 @@ const Video = ({productData}) => {
const videoRef = useRef(null); const videoRef = useRef(null);
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
useEffect(() => { useEffect(() => {
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
([entry]) => { ([entry]) => {
setIsVisible(entry.isIntersecting); if (entry.isIntersecting) {
}, setIsVisible(true);
{ threshold: 0.5 }
); // 👇 Stop observing after first visibility
observer.unobserve(entry.target);
if (videoRef.current) observer.observe(videoRef.current); }
},
return () => { { threshold: 0.5 }
if (videoRef.current) observer.unobserve(videoRef.current); );
};
}, []); if (videoRef.current) observer.observe(videoRef.current);
return () => {
if (videoRef.current) observer.unobserve(videoRef.current);
};
}, []);
return ( return (
<section className="video_sec sec_padd collection-section"> <section className="video_sec sec_padd collection-section">
......
components/Contacts/InnerContent.js
...@@ -33,7 +33,12 @@ const InnerContent = () => { ...@@ -33,7 +33,12 @@ const InnerContent = () => {
</div> </div>
</Col> </Col>
</Row> </Row>
<Row className="mt-5 align-items-center">
</div>
</section>
<section className="innercontent-section catalogues-sec sec_padd">
<div className="custom_container">
<Row className="align-items-center ">
<Col md={6} className="d-flex justify-content-md-center"> <Col md={6} className="d-flex justify-content-md-center">
<div className="contactPage-address"> <div className="contactPage-address">
<Heading el="h2" heading="Akruti Luxe HEADQUARTERS" /> <Heading el="h2" heading="Akruti Luxe HEADQUARTERS" />
...@@ -63,7 +68,7 @@ const InnerContent = () => { ...@@ -63,7 +68,7 @@ const InnerContent = () => {
<iframe <iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3772.622369717272!2d72.82162147608882!3d18.992277882195175!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7ce8ba2a8a937%3A0xa2e451544551ba7a!2sRaghuvanshi%20Mills!5e0!3m2!1sen!2sin!4v1767959872758!5m2!1sen!2sin" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3772.622369717272!2d72.82162147608882!3d18.992277882195175!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7ce8ba2a8a937%3A0xa2e451544551ba7a!2sRaghuvanshi%20Mills!5e0!3m2!1sen!2sin!4v1767959872758!5m2!1sen!2sin"
width="100%" width="100%"
height="520" height="580"
style={{ border: 0 }} style={{ border: 0 }}
allowFullScreen allowFullScreen
loading="lazy" loading="lazy"
......
container/Home/Collection.js
...@@ -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 d-none d-md-block"> <Col lg={4} md={4} className="d-flex justify-content-end mt-2 mb-3 mb-md-0 d-nones d-md-blocks">
<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
......
container/Home/ProjectSlider.js
...@@ -42,12 +42,12 @@ const ProjectSlider = ({projectData}) => { ...@@ -42,12 +42,12 @@ const ProjectSlider = ({projectData}) => {
autoplay={{ delay: 5000, disableOnInteraction: false }} autoplay={{ delay: 5000, disableOnInteraction: false }}
speed={1000} speed={1000}
loop={true} loop={true}
// pagination={{ clickable: true }} pagination={{ clickable: true }}
navigation={{ navigation={{
nextEl: ".cust-swiper-button-next", nextEl: ".cust-swiper-button-next",
prevEl: ".cust-swiper-button-prev", prevEl: ".cust-swiper-button-prev",
}} }}
modules={[Navigation, Autoplay]} modules={[Navigation, Autoplay,Pagination]}
className="projectSwiper" className="projectSwiper"
breakpoints={{ breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 }, 320: { slidesPerView: 1, spaceBetween: 15 },
......
pages/collections/[category]/[subCategory]/index.js
...@@ -94,7 +94,7 @@ const productTabs = productData?.productTabs; ...@@ -94,7 +94,7 @@ const productTabs = productData?.productTabs;
<AboutInfo productData={productData?.aboutInfo} /> <AboutInfo productData={productData?.aboutInfo} />
<CompanyOverview companyOverviewData={productData?.companyOverview} /> <CompanyOverview companyOverviewData={productData?.companyOverview} />
<Video productData={productData?.video} /> {/* <Video productData={productData?.video} /> */}
<Video productData={productData?.video} /> <Video productData={productData?.video} />
{productData?.technicalDetails?.length > 0 && ( {productData?.technicalDetails?.length > 0 && (
<TechnicalDetails productData={productData?.technicalDetails} /> <TechnicalDetails productData={productData?.technicalDetails} />
......
styles/globals.css
...@@ -259,8 +259,24 @@ body { ...@@ -259,8 +259,24 @@ body {
background-color: #fff; background-color: #fff;
width: 12px; width: 12px;
height: 12px; height: 12px;
opacity: 1;
}
.studioSwiper .swiper-pagination-bullet-active, .explore-swiper .swiper-pagination-bullet-active, .projectSwiper .swiper-pagination-bullet-active {
background-color: #000 !important;
width: 12px;
height: 12px;
} }
.studioSwiper .swiper-pagination-bullet,.explore-swiper .swiper-pagination-bullet,.projectSwiper .swiper-pagination-bullet {
border: 1px solid #000 !important;
background-color: #fff;
width: 12px;
height: 12px;
opacity: 1;
}
.projectSwiper{
padding-bottom: 3rem;
}
/* .collection-section button.cust-swiper-button-prev { /* .collection-section button.cust-swiper-button-prev {
background-color: transparent; background-color: transparent;
border: none; border: none;
...@@ -370,10 +386,11 @@ textarea { ...@@ -370,10 +386,11 @@ textarea {
color: #666666; color: #666666;
border-radius: 2px; border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
padding: 1rem 0.8rem;
} }
.get-in-touch-form .form-select { .get-in-touch-form .form-select {
width: 100%; width: 100%;
padding: 0.6rem 1.2rem; padding: 1rem 0.8rem;
border: 0.2px solid #fff; border: 0.2px solid #fff;
color: #666666; color: #666666;
...@@ -386,8 +403,13 @@ textarea { ...@@ -386,8 +403,13 @@ textarea {
input:focus-visible { input:focus-visible {
outline: 0 !important; outline: 0 !important;
} }
.breadcrumb{
padding: 0;
margin: 0;
}
.breadcrumb-section { .breadcrumb-section {
margin: 5rem 0 0rem; margin: 4rem 0 0rem;
} }
.breadcrumb ol { .breadcrumb ol {
...@@ -405,7 +427,10 @@ input:focus-visible { ...@@ -405,7 +427,10 @@ input:focus-visible {
} }
.breadcrumb li a { .breadcrumb li a {
color: #a4a4a4; color: #666;
}
.breadcrumb li span,.breadcrumb-item+.breadcrumb-item::before {
color: #000;
} }
.breadcrumb a { .breadcrumb a {
...@@ -446,16 +471,19 @@ input:focus-visible { ...@@ -446,16 +471,19 @@ input:focus-visible {
.sortby-select { .sortby-select {
border: none; border: none;
background: transparent; background: transparent;
font-size: 14px; font-size: 1.04vw;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
color: #000; color: #000;
width: auto; width: auto;
padding: 0; padding: 0;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-weight: 600;
text-align: right;
padding-right: 1rem;
} }
.collections-item { .collections-item {
margin-bottom: 2rem; margin-bottom: 3.8rem;
} }
.collections-item a { .collections-item a {
color: #000; color: #000;
...@@ -467,18 +495,21 @@ input:focus-visible { ...@@ -467,18 +495,21 @@ input:focus-visible {
object-fit: cover; object-fit: cover;
} }
.collections-item .title { .collections-item .title {
margin-top: 0.5rem; margin-top: 1.3rem;
font-size: 1.04vw; font-size: 1.04vw;
color: #000; color: #000;
} }
.collection-m-section.sec_padd{
padding-bottom: 0;
}
.product-banner { .product-banner {
position: relative; position: relative;
height: calc(100vh - 148px); height: calc(100vh - 117px);
} }
.product-banner .info { .product-banner .info {
position: absolute; position: absolute;
bottom: 2rem; bottom: 6rem;
left: 2rem; left: 6.6rem;
color: #fff; color: #fff;
width: 40%; width: 40%;
} }
...@@ -495,6 +526,9 @@ input:focus-visible { ...@@ -495,6 +526,9 @@ input:focus-visible {
margin-bottom: 0 !important; margin-bottom: 0 !important;
line-height: 3rem; line-height: 3rem;
} }
.gallery-section .gallery-items{
margin-top: 1.5rem;
}
.gallery-section .gallery-items img { .gallery-section .gallery-items img {
width: 100%; width: 100%;
height: auto; height: auto;
...@@ -506,10 +540,10 @@ input:focus-visible { ...@@ -506,10 +540,10 @@ input:focus-visible {
overflow: hidden; overflow: hidden;
} }
.gallery-items .col-md-6 .gallery-image-wrapper { .gallery-items .col-md-6 .gallery-image-wrapper {
aspect-ratio: 16 / 13; aspect-ratio: 16 / 16;
} }
.gallery-items .col-md-12 .gallery-image-wrapper { .gallery-items .col-md-12 .gallery-image-wrapper {
aspect-ratio: 16 / 7; aspect-ratio: 16 / 8;
} }
.gallery-image { .gallery-image {
object-fit: cover; object-fit: cover;
...@@ -726,7 +760,13 @@ input:focus-visible { ...@@ -726,7 +760,13 @@ input:focus-visible {
bottom: 0rem !important; bottom: 0rem !important;
} }
.studiohighlight-section .swiper { .studiohighlight-section .swiper {
padding-bottom: 3rem; padding-bottom: 4rem;
padding-top: 1.5rem;
}
.studiohighlight-section.catalogues-sec .swiperbtn1 {
top: 50%;
left: -1%;
width: 95% !important;
} }
.experience_sec .swiper { .experience_sec .swiper {
padding-bottom: 4rem; padding-bottom: 4rem;
...@@ -735,6 +775,9 @@ input:focus-visible { ...@@ -735,6 +775,9 @@ input:focus-visible {
top: inherit; top: inherit;
bottom: -4%; bottom: -4%;
} }
.accordion01 .accordion-body{
padding: 1rem 0 2rem;
}
.accordion01 .accordion { .accordion01 .accordion {
border: 0; border: 0;
} }
...@@ -757,6 +800,7 @@ input:focus-visible { ...@@ -757,6 +800,7 @@ input:focus-visible {
font-weight: 600; font-weight: 600;
background: transparent; background: transparent;
text-transform: uppercase; text-transform: uppercase;
padding-left: 0;
} }
.accordion01 .accordion-button:not(.collapsed) { .accordion01 .accordion-button:not(.collapsed) {
background: transparent; background: transparent;
...@@ -778,6 +822,9 @@ input:focus-visible { ...@@ -778,6 +822,9 @@ input:focus-visible {
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
.explore-swiper{
padding-top: 1.5rem;
}
.homeBannerSwiper { .homeBannerSwiper {
margin-top: 3.7rem; margin-top: 3.7rem;
height: calc(100vh - 58px); height: calc(100vh - 58px);
...@@ -837,6 +884,7 @@ input:focus-visible { ...@@ -837,6 +884,7 @@ input:focus-visible {
.m-para { .m-para {
font-size: 0.73vw; font-size: 0.73vw;
padding: 2rem 0.8rem; padding: 2rem 0.8rem;
text-transform: capitalize;
} }
.m-link { .m-link {
display: flex; display: flex;
...@@ -885,10 +933,10 @@ input:focus-visible { ...@@ -885,10 +933,10 @@ input:focus-visible {
font-size: 0.73vw; font-size: 0.73vw;
} }
.contactPage-form { .contactPage-form {
padding: 0 5rem 0 5rem; padding: 0 5rem 0 9rem;
} }
.get-in-touch-sec { .get-in-touch-sec {
padding: 3rem 0 0 0; padding: 2rem 0 0 0;
} }
.get-in-touch-sec .heading { .get-in-touch-sec .heading {
font-size: 1.25vw; font-size: 1.25vw;
...@@ -906,7 +954,7 @@ input:focus-visible { ...@@ -906,7 +954,7 @@ input:focus-visible {
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
} }
.technicalDetails-section { .technicalDetails-section {
margin-top: 3rem; /* margin-top: 3rem; */
} }
.details-tab-section { .details-tab-section {
margin: 2rem 0; margin: 2rem 0;
...@@ -923,8 +971,9 @@ input:focus-visible { ...@@ -923,8 +971,9 @@ input:focus-visible {
font-weight: 500; font-weight: 500;
} }
.tab-01 { .tab-01 {
margin-left: 11vw; padding-left: 6vw;
margin-right: 11vw; margin-right: 11vw;
margin-left: 5vw;
} }
.tab-01.nav-tabs { .tab-01.nav-tabs {
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
...@@ -972,7 +1021,7 @@ footer .footer-cotent h6 { ...@@ -972,7 +1021,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; margin-bottom: 2rem;
} }
.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);
...@@ -1024,13 +1073,18 @@ footer a:hover { ...@@ -1024,13 +1073,18 @@ footer a:hover {
} }
.exp-showroom-img{ .exp-showroom-img{
display: flex; display: flex;
width: 100%;
} }
.exp-showroom-img img{ .exp-showroom-img .img{
margin: 1rem; margin: 1rem;
width: 50%;
}
.exp-showroom-img img{
width: 100%; width: 100%;
height: 100%; height: auto;
} }
.exp-showroom-img img:first-child{ .exp-showroom-img .img:first-child{
margin-top: 8rem; margin-top: 8rem;
} }
.studiohighlight-section .studioSwiper .collection-card img{ .studiohighlight-section .studioSwiper .collection-card img{
...@@ -1045,6 +1099,25 @@ footer a:hover { ...@@ -1045,6 +1099,25 @@ footer a:hover {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.custom_container p{
margin: 0.5rem 0 !important;
}
.innercontent-section .contactPage-address .list-unstyled{
margin-top: 1rem;
}
.innercontent-section .contactPage-address .list-unstyled li {
border-bottom: 1px dashed #E0E0E0;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.innercontent-section .contactPage-address .list-unstyled li:last-child {
border-bottom: 0;
padding-bottom: 0rem;
margin-bottom: 0rem;
}
.innercontent-section .contactPage-address .list-unstyled li i{
color: #000;
}
@media only screen and (max-width: 1023px) { @media only screen and (max-width: 1023px) {
body { body {
font-size: 16px; font-size: 16px;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!