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 = () => {
<section className='about-section'>
<div className='custom_container'>
<Row className='text-center justify-content-center'>
<Col md={10}>
<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>
......
components/About/Experience.js
......@@ -23,7 +23,7 @@ const Experience = () => {
<Container className="custom_container">
{/* Make row full height and 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" />
<FadeInStagger direction="left">
{/* <h2 className="heading mb-2">About</h2> */}
......@@ -48,10 +48,10 @@ const Experience = () => {
{/* <div className="my-5"> <button className="btn4">Read More</button> </div> */}
</FadeInStagger>
</Col>
<Col md={6}>
<Col md={7}>
<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 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
......@@ -84,7 +84,7 @@ const StudioHighlight = () => {
</Row>
<Row>
<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">
<svg
xmlns="http://www.w3.org/2000/svg"
......
components/Collection/Explore.js
......@@ -26,7 +26,7 @@ const exploreData = [
const Explore = ({productData}) => {
return (
<section className="explore-section mb-5">
<section className="explore-section sec_padd collection-section">
<Container className="custom_container">
<Row className="text-center justify-content-center">
<Col md={8}>
......@@ -39,6 +39,7 @@ const Explore = ({productData}) => {
<Swiper
slidesPerView={4}
spaceBetween={30}
pagination={{ clickable: true }}
// autoplay={{ delay: 5000, disableOnInteraction: false }}
autoplay={false}
speed={1000}
......@@ -48,8 +49,8 @@ const Explore = ({productData}) => {
nextEl: ".cust-swiper-button-next",
prevEl: ".cust-swiper-button-prev",
}}
modules={[Navigation, Autoplay]}
className="projectSwiper pb-1 pb-md-5"
modules={[Navigation, Autoplay, Pagination]}
className="projectSwiper pb-1"
breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 },
640: { slidesPerView: 2, spaceBetween: 20 },
......
components/Collection/TechnicalDetails.js
......@@ -101,7 +101,7 @@ const TechnicalDetails = ({productData}) => {
return (
<>
<section className="technicalDetails-section catalogues-secs">
<section className="technicalDetails-section catalogues-secs sec_padd collection-section">
<Container className="custom_container">
<Row>
<Col className="d-flex justify-content-center">
......
components/Collection/Video.js
......@@ -7,20 +7,25 @@ const Video = ({productData}) => {
const videoRef = useRef(null);
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
setIsVisible(entry.isIntersecting);
},
{ threshold: 0.5 }
);
if (videoRef.current) observer.observe(videoRef.current);
return () => {
if (videoRef.current) observer.unobserve(videoRef.current);
};
}, []);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true);
// 👇 Stop observing after first visibility
observer.unobserve(entry.target);
}
},
{ threshold: 0.5 }
);
if (videoRef.current) observer.observe(videoRef.current);
return () => {
if (videoRef.current) observer.unobserve(videoRef.current);
};
}, []);
return (
<section className="video_sec sec_padd collection-section">
......
components/Contacts/InnerContent.js
......@@ -33,7 +33,12 @@ const InnerContent = () => {
</div>
</Col>
</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">
<div className="contactPage-address">
<Heading el="h2" heading="Akruti Luxe HEADQUARTERS" />
......@@ -63,7 +68,7 @@ const InnerContent = () => {
<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"
width="100%"
height="520"
height="580"
style={{ border: 0 }}
allowFullScreen
loading="lazy"
......
container/Home/Collection.js
......@@ -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 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">
<button className="cust-swiper-button-prev">
<svg
......
container/Home/ProjectSlider.js
......@@ -42,12 +42,12 @@ const ProjectSlider = ({projectData}) => {
autoplay={{ delay: 5000, disableOnInteraction: false }}
speed={1000}
loop={true}
// pagination={{ clickable: true }}
pagination={{ clickable: true }}
navigation={{
nextEl: ".cust-swiper-button-next",
prevEl: ".cust-swiper-button-prev",
}}
modules={[Navigation, Autoplay]}
modules={[Navigation, Autoplay,Pagination]}
className="projectSwiper"
breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 },
......
pages/collections/[category]/[subCategory]/index.js
......@@ -94,7 +94,7 @@ const productTabs = productData?.productTabs;
<AboutInfo productData={productData?.aboutInfo} />
<CompanyOverview companyOverviewData={productData?.companyOverview} />
<Video productData={productData?.video} />
{/* <Video productData={productData?.video} /> */}
<Video productData={productData?.video} />
{productData?.technicalDetails?.length > 0 && (
<TechnicalDetails productData={productData?.technicalDetails} />
......
styles/globals.css
......@@ -259,8 +259,24 @@ body {
background-color: #fff;
width: 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 {
background-color: transparent;
border: none;
......@@ -370,10 +386,11 @@ textarea {
color: #666666;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 1rem 0.8rem;
}
.get-in-touch-form .form-select {
width: 100%;
padding: 0.6rem 1.2rem;
padding: 1rem 0.8rem;
border: 0.2px solid #fff;
color: #666666;
......@@ -386,8 +403,13 @@ textarea {
input:focus-visible {
outline: 0 !important;
}
.breadcrumb{
padding: 0;
margin: 0;
}
.breadcrumb-section {
margin: 5rem 0 0rem;
margin: 4rem 0 0rem;
}
.breadcrumb ol {
......@@ -405,7 +427,10 @@ input:focus-visible {
}
.breadcrumb li a {
color: #a4a4a4;
color: #666;
}
.breadcrumb li span,.breadcrumb-item+.breadcrumb-item::before {
color: #000;
}
.breadcrumb a {
......@@ -446,16 +471,19 @@ input:focus-visible {
.sortby-select {
border: none;
background: transparent;
font-size: 14px;
font-size: 1.04vw;
cursor: pointer;
outline: none;
color: #000;
width: auto;
padding: 0;
margin-bottom: 0.5rem;
font-weight: 600;
text-align: right;
padding-right: 1rem;
}
.collections-item {
margin-bottom: 2rem;
margin-bottom: 3.8rem;
}
.collections-item a {
color: #000;
......@@ -467,18 +495,21 @@ input:focus-visible {
object-fit: cover;
}
.collections-item .title {
margin-top: 0.5rem;
margin-top: 1.3rem;
font-size: 1.04vw;
color: #000;
}
.collection-m-section.sec_padd{
padding-bottom: 0;
}
.product-banner {
position: relative;
height: calc(100vh - 148px);
height: calc(100vh - 117px);
}
.product-banner .info {
position: absolute;
bottom: 2rem;
left: 2rem;
bottom: 6rem;
left: 6.6rem;
color: #fff;
width: 40%;
}
......@@ -495,6 +526,9 @@ input:focus-visible {
margin-bottom: 0 !important;
line-height: 3rem;
}
.gallery-section .gallery-items{
margin-top: 1.5rem;
}
.gallery-section .gallery-items img {
width: 100%;
height: auto;
......@@ -506,10 +540,10 @@ input:focus-visible {
overflow: hidden;
}
.gallery-items .col-md-6 .gallery-image-wrapper {
aspect-ratio: 16 / 13;
aspect-ratio: 16 / 16;
}
.gallery-items .col-md-12 .gallery-image-wrapper {
aspect-ratio: 16 / 7;
aspect-ratio: 16 / 8;
}
.gallery-image {
object-fit: cover;
......@@ -726,7 +760,13 @@ input:focus-visible {
bottom: 0rem !important;
}
.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 {
padding-bottom: 4rem;
......@@ -735,6 +775,9 @@ input:focus-visible {
top: inherit;
bottom: -4%;
}
.accordion01 .accordion-body{
padding: 1rem 0 2rem;
}
.accordion01 .accordion {
border: 0;
}
......@@ -757,6 +800,7 @@ input:focus-visible {
font-weight: 600;
background: transparent;
text-transform: uppercase;
padding-left: 0;
}
.accordion01 .accordion-button:not(.collapsed) {
background: transparent;
......@@ -778,6 +822,9 @@ input:focus-visible {
width: 32px;
height: 32px;
}
.explore-swiper{
padding-top: 1.5rem;
}
.homeBannerSwiper {
margin-top: 3.7rem;
height: calc(100vh - 58px);
......@@ -837,6 +884,7 @@ input:focus-visible {
.m-para {
font-size: 0.73vw;
padding: 2rem 0.8rem;
text-transform: capitalize;
}
.m-link {
display: flex;
......@@ -885,10 +933,10 @@ input:focus-visible {
font-size: 0.73vw;
}
.contactPage-form {
padding: 0 5rem 0 5rem;
padding: 0 5rem 0 9rem;
}
.get-in-touch-sec {
padding: 3rem 0 0 0;
padding: 2rem 0 0 0;
}
.get-in-touch-sec .heading {
font-size: 1.25vw;
......@@ -906,7 +954,7 @@ input:focus-visible {
padding-bottom: 0.8rem;
}
.technicalDetails-section {
margin-top: 3rem;
/* margin-top: 3rem; */
}
.details-tab-section {
margin: 2rem 0;
......@@ -923,8 +971,9 @@ input:focus-visible {
font-weight: 500;
}
.tab-01 {
margin-left: 11vw;
margin-right: 11vw;
padding-left: 6vw;
margin-right: 11vw;
margin-left: 5vw;
}
.tab-01.nav-tabs {
border-bottom: 1px solid #e0e0e0;
......@@ -972,7 +1021,7 @@ footer .footer-cotent h6 {
color: #0f0f0f;
font-weight: 400;
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 {
bottom: var(--swiper-pagination-bottom, 25px);
......@@ -1024,13 +1073,18 @@ footer a:hover {
}
.exp-showroom-img{
display: flex;
width: 100%;
}
.exp-showroom-img img{
.exp-showroom-img .img{
margin: 1rem;
width: 50%;
}
.exp-showroom-img img{
width: 100%;
height: 100%;
height: auto;
}
.exp-showroom-img img:first-child{
.exp-showroom-img .img:first-child{
margin-top: 8rem;
}
.studiohighlight-section .studioSwiper .collection-card img{
......@@ -1045,6 +1099,25 @@ footer a:hover {
width: 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) {
body {
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!