banner button and area of injury section animation updated
This commit is contained in:
Alaguraj0361
parent
5f8a7c7c97
commit
aa12c283c2
@ -35,7 +35,9 @@ export default function AreaOfInjury() {
|
|||||||
<div className="row clearfix">
|
<div className="row clearfix">
|
||||||
{areaOfInjuryData.slice(0, 8).map((area, index) => (
|
{areaOfInjuryData.slice(0, 8).map((area, index) => (
|
||||||
<div key={index} className="col-lg-3 col-md-6 col-6 team-block d-flex">
|
<div key={index} className="col-lg-3 col-md-6 col-6 team-block d-flex">
|
||||||
<div className="team-block-one wow fadeInUp animated d-flex flex-column flex-grow-1" data-wow-delay={`${index * 200}ms`} data-wow-duration="1500ms">
|
<div className="team-block-one wow fadeInUp animated d-flex flex-column flex-grow-1"
|
||||||
|
// data-wow-delay={`${index * 50}ms`} data-wow-duration="500ms"
|
||||||
|
>
|
||||||
<div className="inner-box d-flex flex-column flex-grow-1">
|
<div className="inner-box d-flex flex-column flex-grow-1">
|
||||||
<div className="image-box">
|
<div className="image-box">
|
||||||
<figure className="image">
|
<figure className="image">
|
||||||
|
|||||||
@ -49,48 +49,48 @@ const variants = {
|
|||||||
},
|
},
|
||||||
rightToLeft: {
|
rightToLeft: {
|
||||||
initial: { x: '100vw', opacity: 0 },
|
initial: { x: '100vw', opacity: 0 },
|
||||||
animate: {
|
animate: {
|
||||||
x: 0,
|
x: 0,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
transition: {
|
transition: {
|
||||||
duration: 0.8, // adjust speed
|
duration: 0.8, // adjust speed
|
||||||
ease: "easeInOut" // try "easeOut", "easeIn", or custom [0.4, 0, 0.2, 1]
|
ease: "easeInOut" // try "easeOut", "easeIn", or custom [0.4, 0, 0.2, 1]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
exit: {
|
exit: {
|
||||||
x: "-100vw",
|
x: "-100vw",
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
transition: {
|
transition: {
|
||||||
duration: 0.6,
|
duration: 0.6,
|
||||||
ease: "easeInOut"
|
ease: "easeInOut"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
const revealVariants = {
|
const revealVariants = {
|
||||||
hidden: {
|
hidden: {
|
||||||
scaleX: 0,
|
scaleX: 0,
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
originX: 0, // same as transform-origin: 0% 50%
|
originX: 0, // same as transform-origin: 0% 50%
|
||||||
},
|
},
|
||||||
visible: {
|
visible: {
|
||||||
scaleX: 1,
|
scaleX: 1,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
originX: 0,
|
originX: 0,
|
||||||
transition: {
|
transition: {
|
||||||
duration: 0.8,
|
duration: 0.6,
|
||||||
ease: "easeInOut"
|
ease: "easeInOut"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
exit: {
|
||||||
|
scaleX: 0,
|
||||||
|
opacity: 0,
|
||||||
|
originX: 0,
|
||||||
|
transition: {
|
||||||
|
duration: 0.6,
|
||||||
|
ease: "easeInOut"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
exit: {
|
|
||||||
scaleX: 0,
|
|
||||||
opacity: 0,
|
|
||||||
originX: 0,
|
|
||||||
transition: {
|
|
||||||
duration: 0.6,
|
|
||||||
ease: "easeInOut"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const transition = {
|
const transition = {
|
||||||
@ -111,125 +111,126 @@ export default function Banner() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="banner-style-two p_relative">
|
<section className="banner-style-two p_relative">
|
||||||
<Swiper {...swiperOptions}
|
<Swiper {...swiperOptions}
|
||||||
className="banner-carousel owl-theme owl-carousel owl-nav-none owl-dots-none"
|
className="banner-carousel owl-theme owl-carousel owl-nav-none owl-dots-none"
|
||||||
onSwiper={(swiper) => setActiveIndex(swiper.realIndex || 0)}
|
onSwiper={(swiper) => setActiveIndex(swiper.realIndex || 0)}
|
||||||
onSlideChange={handleSlideChange}
|
onSlideChange={handleSlideChange}
|
||||||
>
|
>
|
||||||
|
|
||||||
<SwiperSlide>
|
<SwiperSlide>
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
{activeIndex === 0 && (
|
{activeIndex === 0 && (
|
||||||
<motion.div key="slide-3"
|
<motion.div key="slide-3"
|
||||||
className="slide-item banner-slide"
|
className="slide-item banner-slide"
|
||||||
variants={revealVariants}
|
variants={revealVariants}
|
||||||
initial="initial" animate="animate" exit="exit" transition={transition}>
|
initial="initial" animate="animate" exit="exit" transition={transition}>
|
||||||
<div className="bg-layer"
|
<div className="bg-layer"
|
||||||
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-4.png)' }}>
|
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-4.png)' }}>
|
||||||
</div>
|
</div>
|
||||||
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end",justifyContent: "start", textAlign: "start" }}>
|
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end", justifyContent: "start", textAlign: "start" }}>
|
||||||
<div className="content-box custom-content-box">
|
<div className="content-box custom-content-box">
|
||||||
<span className="upper-text mb-2">Begin your</span>
|
<span className="upper-text mb-2">Begin your</span>
|
||||||
<h2 style={{ color: "#bc0000" }}>Recovery</h2>
|
<h2 style={{ color: "#bc0000" }}>Recovery</h2>
|
||||||
<p className='text-white'>• Rehab • Strength Training • Personalized Care </p>
|
<p className='text-white'>• Rehab • Strength Training • Personalized Care </p>
|
||||||
<div className="btn-box mt-3">
|
<div className="btn-box mt-3">
|
||||||
<Link href="/contact" className="theme-btn btn-one">
|
<Link href="/contact" className="theme-btn btn-one">
|
||||||
<span>Vist Our Location</span>
|
<span>Vist Our Location</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
</SwiperSlide>
|
</SwiperSlide>
|
||||||
|
|
||||||
<SwiperSlide>
|
<SwiperSlide>
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
{activeIndex === 1 && (
|
{activeIndex === 1 && (
|
||||||
<motion.div key="slide-0"
|
<motion.div key="slide-0"
|
||||||
className="slide-item banner-slide"
|
className="slide-item banner-slide"
|
||||||
//variants={variants.rightToLeft}
|
//variants={variants.rightToLeft}
|
||||||
variants={revealVariants}
|
variants={revealVariants}
|
||||||
initial="initial" animate="animate" exit="exit" transition={transition}>
|
initial="initial" animate="animate" exit="exit" transition={transition}>
|
||||||
<div className="bg-layer bg-slide-0"
|
<div className="bg-layer bg-slide-0"
|
||||||
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-1.png)' }}>
|
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-1.png)' }}>
|
||||||
</div>
|
</div>
|
||||||
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end", justifyContent: "end", textAlign: "center" }}>
|
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end", justifyContent: "end", textAlign: "center" }}>
|
||||||
<div className="content-box custom-content-box">
|
<div className="content-box custom-content-box">
|
||||||
<span className="upper-text mb-2 ">Build Your Strength & </span>
|
<span className="upper-text mb-2 ">Build Your Strength & </span>
|
||||||
<h2 style={{ color: "#bc0000" }}>Endurance</h2>
|
<h2 style={{ color: "#bc0000" }}>Endurance</h2>
|
||||||
<p className=' text-white'>• Physiotherapy • Sports Therapy • Injury Prevention</p>
|
<p className=' text-white'>• Physiotherapy • Sports Therapy • Injury Prevention</p>
|
||||||
<div className="btn-box mt-3">
|
<div className="btn-box mt-3">
|
||||||
<Link href="tel:+647-722-3434" className="theme-btn btn-one">
|
<Link href="tel:+647-722-3434" className="theme-btn btn-one">
|
||||||
<span>Book Your Appointment</span>
|
<span>Book Your Appointment</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
</SwiperSlide>
|
</SwiperSlide>
|
||||||
|
|
||||||
{/* ✅ existing 3rd slide remains as 3rd */}
|
{/* ✅ existing 3rd slide remains as 3rd */}
|
||||||
<SwiperSlide>
|
<SwiperSlide>
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
{activeIndex === 2 && (
|
{activeIndex === 2 && (
|
||||||
<motion.div key="slide-2"
|
<motion.div key="slide-2"
|
||||||
className="slide-item banner-slide"
|
className="slide-item banner-slide"
|
||||||
//variants={variants.rightToLeft}
|
//variants={variants.rightToLeft}
|
||||||
variants={revealVariants}
|
variants={revealVariants}
|
||||||
initial="initial" animate="animate" exit="exit" transition={transition}>
|
initial="initial" animate="animate" exit="exit" transition={transition}>
|
||||||
<div className="bg-layer"
|
<div className="bg-layer"
|
||||||
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-3.webp)' }}>
|
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-3.webp)' }}>
|
||||||
</div>
|
</div>
|
||||||
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end", justifyContent: "start", textAlign: "start" }}>
|
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end", justifyContent: "start", textAlign: "start" }}>
|
||||||
<div className="content-box custom-content-box">
|
<div className="content-box custom-content-box">
|
||||||
<span className="upper-text mb-2">Regain Your Strength</span>
|
<span className="upper-text mb-2">Regain Your Strength</span>
|
||||||
<h2 style={{ color: "#bc0000" }}> Heal </h2>
|
<h2 style={{ color: "#bc0000" }}> Heal </h2>
|
||||||
<p className=' text-white'>• Pain Relief • mobility • Wellness </p>
|
<p className=' text-white'>• Pain Relief • mobility • Wellness </p>
|
||||||
<div className="btn-box mt-3">
|
<div className="btn-box mt-3">
|
||||||
<Link href="/etobicoke-treatment-service" className="theme-btn btn-one">
|
<Link href="/contact" className="theme-btn btn-one">
|
||||||
<span>Explore Our Service</span>
|
<span>Schedule a Massage</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
</SwiperSlide>
|
|
||||||
|
|
||||||
<SwiperSlide>
|
</div>
|
||||||
<AnimatePresence mode="wait">
|
</div>
|
||||||
{activeIndex === 3 && (
|
</div>
|
||||||
<motion.div key="slide-1"
|
</motion.div>
|
||||||
className="slide-item banner-slide"
|
)}
|
||||||
//variants={variants.rightToLeft}
|
</AnimatePresence>
|
||||||
variants={revealVariants}
|
</SwiperSlide>
|
||||||
initial="initial" animate="animate" exit="exit" transition={transition}>
|
|
||||||
<div className="bg-layer"
|
|
||||||
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-2.png)' }}>
|
|
||||||
</div>
|
|
||||||
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end", justifyContent: "center", textAlign: "center" }}>
|
|
||||||
<div className="content-box custom-content-box">
|
|
||||||
<span className="upper-text mb-3">Build your Core </span>
|
|
||||||
<h2 style={{ color: "#bc0000" }}>Performance</h2>
|
|
||||||
<p className=' text-white'>• Pain Relief • Active Care • Long-Term Result</p>
|
|
||||||
<div className="btn-box mt-3">
|
|
||||||
<Link href="/contact" className="theme-btn btn-one">
|
|
||||||
<span>Schedule a Massage</span>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
</SwiperSlide>
|
|
||||||
|
|
||||||
</Swiper>
|
<SwiperSlide>
|
||||||
|
<AnimatePresence mode="wait">
|
||||||
|
{activeIndex === 3 && (
|
||||||
|
<motion.div key="slide-1"
|
||||||
|
className="slide-item banner-slide"
|
||||||
|
//variants={variants.rightToLeft}
|
||||||
|
variants={revealVariants}
|
||||||
|
initial="initial" animate="animate" exit="exit" transition={transition}>
|
||||||
|
<div className="bg-layer"
|
||||||
|
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-2.png)' }}>
|
||||||
|
</div>
|
||||||
|
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end", justifyContent: "center", textAlign: "center" }}>
|
||||||
|
<div className="content-box custom-content-box">
|
||||||
|
<span className="upper-text mb-3">Build your Core </span>
|
||||||
|
<h2 style={{ color: "#bc0000" }}>Performance</h2>
|
||||||
|
<p className=' text-white'>• Pain Relief • Active Care • Long-Term Result</p>
|
||||||
|
<div className="btn-box mt-3">
|
||||||
|
<Link href="/etobicoke-treatment-service" className="theme-btn btn-one">
|
||||||
|
<span>Explore Our Service</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</SwiperSlide>
|
||||||
|
|
||||||
|
</Swiper>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user