Skip to content

sujata / Akruti-Frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 528e0554 by Ravindra Kanojiya
Options

updated

1 parent aa758e07
Inline Side-by-side
Showing 4 changed files with 22 additions and 27 deletions
components/About/Experience.js
...@@ -9,16 +9,17 @@ import "swiper/css/navigation"; ...@@ -9,16 +9,17 @@ import "swiper/css/navigation";
import "swiper/css/pagination"; import "swiper/css/pagination";
import { Autoplay, Navigation, Pagination } from "swiper/modules"; import { Autoplay, Navigation, Pagination } from "swiper/modules";
const CollectionData = [ const CollectionDatas = [
{ image: "/image/experience/01.png" }, { image: "/image/experience/01.png" },
{ image: "/image/experience/02.png" }, { image: "/image/experience/02.png" },
{ image: "/image/experience/03.png" }, { image: "/image/experience/03.png" },
{ image: "/image/experience/01.png" }, { image: "/image/experience/01.png" },
{ image: "/image/experience/02.png" }, { image: "/image/experience/02.png" },
]; ];
console.log("CollectionDatas 1111", CollectionDatas)
const Experience = () => { const Experience = () => {
return ( return (
<section className="experience_sec sec_padd "> <section className="experience_sec es-cust sec_padd ">
<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">
...@@ -44,41 +45,34 @@ discover how Akruti Luxe transforms everyday spaces into extraordinary expressio ...@@ -44,41 +45,34 @@ discover how Akruti Luxe transforms everyday spaces into extraordinary expressio
</FadeInStagger> </FadeInStagger>
</Col> </Col>
<Col md={5} className="position-relative">
<Col md={5} className="d-flex justify-content-center">
{/* Swiper */}
<Swiper <Swiper
slidesPerView={1} slidesPerView={1}
spaceBetween={30}
loop={true} loop={true}
allowTouchMove={true}
autoplay={false}
// speed={6000}
navigation={{ navigation={{
nextEl: ".cust-swiper-button-next", nextEl: ".cust-swiper-button-next",
prevEl: ".cust-swiper-button-prev", prevEl: ".cust-swiper-button-prev",
}} }}
pagination={{ clickable: true }} pagination={{ clickable: true }}
modules={[Navigation, Autoplay, Pagination]} modules={[Navigation, Pagination]}
className="collectionSwiper" className="collectionSwiper"
breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 },
640: { slidesPerView: 1, spaceBetween: 15 },
992: { slidesPerView: 1, spaceBetween: 15 },
1200: { slidesPerView: 1, spaceBetween: 15 },
}}
> >
{CollectionData.map((item, index) => ( {CollectionDatas.map((item, index) => (
<SwiperSlide key={index}> <SwiperSlide key={index}>
<div className="collection-card"> <div className="collection-card">
<img <Image
src={item.image} src={item.image}
alt={item.title} alt="Experience image"
className="img-fluid rounded-lg hover-zoom" width={600}
height={500}
className="img-fluid rounded-lg hover-zooms"
/> />
</div> </div>
</SwiperSlide> </SwiperSlide>
))} ))}
</Swiper>
{/* Navigation Buttons */}
<div className="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
...@@ -146,8 +140,8 @@ discover how Akruti Luxe transforms everyday spaces into extraordinary expressio ...@@ -146,8 +140,8 @@ discover how Akruti Luxe transforms everyday spaces into extraordinary expressio
</svg> </svg>
</button> </button>
</div> </div>
</Swiper> </Col>
</Col>
</Row> </Row>
</Container> </Container>
......
components/Layout/Footer.js
...@@ -134,7 +134,7 @@ const Footer = () => { ...@@ -134,7 +134,7 @@ const Footer = () => {
{/* Bottom bar */} {/* Bottom bar */}
<div className="footer-bottom py-3"> <div className="footer-bottom py-3">
<Container className="custom_container d-flex flex-column flex-md-row justify-content-between align-items-center"> <Container className="custom_container d-flex flex-column flex-md-row justify-content-between align-items-center">
<span className="copyright">Copyright ©2025 Akruti Luxe. All rights reserved.</span> <span className="copyright">Copyright ©2026 Akruti Luxe. All rights reserved.</span>
<div className="social-icons d-flex gap-3 mt-3 mt-md-0"> <div className="social-icons d-flex gap-3 mt-3 mt-md-0">
<Link href="https://linkedin.com" target="_blank"> <Link href="https://linkedin.com" target="_blank">
<i class="fa-brands fa-linkedin"></i> <i class="fa-brands fa-linkedin"></i>
......
container/Home/Collection.js
...@@ -20,7 +20,7 @@ import { cleanImage } from "@/components/services/imageHandling"; ...@@ -20,7 +20,7 @@ import { cleanImage } from "@/components/services/imageHandling";
const CollectionSlider = ({CollectionData}) => { const CollectionSlider = ({CollectionData}) => {
console.log("CollectionData 123", CollectionData) console.log("CollectionData 123", CollectionData)
return ( return (
<div className="collection-section sec_padd"> <div className="collection-section sec_padd h-slider">
<Container className="custom_container_leftAuto"> <Container className="custom_container_leftAuto">
{/* Heading + Nav Row */} {/* Heading + Nav Row */}
<Row className="align-items-center justify-content-md-between mb-4"> <Row className="align-items-center justify-content-md-between mb-4">
......
styles/globals.css
...@@ -547,11 +547,12 @@ aspect-ratio: 16 / 7; ...@@ -547,11 +547,12 @@ aspect-ratio: 16 / 7;
position: absolute; position: absolute;
} }
.collectionSwiper .collection-card:hover img { .h-slider .collectionSwiper .collection-card:hover img {
height: 478px; height: 478px;
} }
.experience_sec.es-cust .swiperbtn1 {
bottom: -6%;
}
/* ====Blog=== */ /* ====Blog=== */
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!