updated the banner order and transition changes
This commit is contained in:
metatroncubeswdev
parent
148e4b92d7
commit
38ee0d866c
@ -14,7 +14,7 @@ const swiperOptions = {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 0,
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
delay: 2000,
|
||||
disableOnInteraction: false,
|
||||
pauseOnMouseEnter: true, // stops on hover for smooth UX
|
||||
},
|
||||
@ -49,9 +49,48 @@ const variants = {
|
||||
},
|
||||
rightToLeft: {
|
||||
initial: { x: '100vw', opacity: 0 },
|
||||
animate: { x: 0, opacity: 1 },
|
||||
exit: { x: '-100vw', opacity: 0 }
|
||||
animate: {
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 0.8, // adjust speed
|
||||
ease: "easeInOut" // try "easeOut", "easeIn", or custom [0.4, 0, 0.2, 1]
|
||||
}
|
||||
},
|
||||
exit: {
|
||||
x: "-100vw",
|
||||
opacity: 0,
|
||||
transition: {
|
||||
duration: 0.6,
|
||||
ease: "easeInOut"
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
const revealVariants = {
|
||||
hidden: {
|
||||
scaleX: 0,
|
||||
opacity: 0,
|
||||
originX: 0, // same as transform-origin: 0% 50%
|
||||
},
|
||||
visible: {
|
||||
scaleX: 1,
|
||||
opacity: 1,
|
||||
originX: 0,
|
||||
transition: {
|
||||
duration: 0.8,
|
||||
ease: "easeInOut"
|
||||
}
|
||||
},
|
||||
exit: {
|
||||
scaleX: 0,
|
||||
opacity: 0,
|
||||
originX: 0,
|
||||
transition: {
|
||||
duration: 0.6,
|
||||
ease: "easeInOut"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const transition = {
|
||||
@ -72,145 +111,130 @@ export default function Banner() {
|
||||
|
||||
return (
|
||||
<section className="banner-style-two p_relative">
|
||||
<Swiper
|
||||
{...swiperOptions}
|
||||
className="banner-carousel owl-theme owl-carousel owl-nav-none owl-dots-none"
|
||||
onSwiper={(swiper) => setActiveIndex(swiper.realIndex || 0)}
|
||||
onSlideChange={handleSlideChange}
|
||||
>
|
||||
{/* Slide 1 */}
|
||||
<SwiperSlide>
|
||||
<AnimatePresence mode="wait">
|
||||
{activeIndex === 0 && (
|
||||
<motion.div
|
||||
key="slide-0"
|
||||
className="slide-item banner-slide"
|
||||
variants={variants.topToBottom}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
transition={transition}
|
||||
>
|
||||
<div className="bg-layer bg-slide-0"
|
||||
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-1.png)' }}>
|
||||
</div>
|
||||
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end", justifyContent: "end", textAlign: "center" }}>
|
||||
<div className="content-box custom-content-box">
|
||||
<span className="upper-text mb-2 ">Renew your</span>
|
||||
<h2 style={{ color: "#bc0000" }}>STRENGTH</h2>
|
||||
<p className=' text-white'>• Physiotherapy • Sports Therapy • Injury Prevention</p>
|
||||
<div className="btn-box mt-3">
|
||||
<Link href="tel:+647-722-3434" className="theme-btn btn-one">
|
||||
<span>Book Your Appointment</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</SwiperSlide>
|
||||
<Swiper {...swiperOptions}
|
||||
className="banner-carousel owl-theme owl-carousel owl-nav-none owl-dots-none"
|
||||
onSwiper={(swiper) => setActiveIndex(swiper.realIndex || 0)}
|
||||
onSlideChange={handleSlideChange}
|
||||
>
|
||||
|
||||
{/* Slide 2 */}
|
||||
<SwiperSlide>
|
||||
<AnimatePresence mode="wait">
|
||||
{activeIndex === 1 && (
|
||||
<motion.div
|
||||
key="slide-1"
|
||||
className="slide-item banner-slide"
|
||||
variants={variants.bottomToTop}
|
||||
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">Restore your</span>
|
||||
<h2 style={{ color: "#bc0000" }}>Mobility</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>
|
||||
{/* ✅ 4th slide moved to 1st position */}
|
||||
<SwiperSlide>
|
||||
<AnimatePresence mode="wait">
|
||||
{activeIndex === 0 && (
|
||||
<motion.div key="slide-3"
|
||||
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-4.png)' }}>
|
||||
</div>
|
||||
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end",justifyContent: "start", textAlign: "start" }}>
|
||||
<div className="content-box custom-content-box">
|
||||
<span className="upper-text mb-2">Begin your</span>
|
||||
<h2 style={{ color: "#bc0000" }}>Recovery</h2>
|
||||
<p className='text-white'>• Rehab • Strength Training • Personalized Care </p>
|
||||
<div className="btn-box mt-3">
|
||||
<Link href="/contact" className="theme-btn btn-one">
|
||||
<span>Visit Our Location</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</SwiperSlide>
|
||||
|
||||
{/* Slide 3 */}
|
||||
<SwiperSlide>
|
||||
<AnimatePresence mode="wait">
|
||||
{activeIndex === 2 && (
|
||||
<motion.div
|
||||
key="slide-2"
|
||||
className="slide-item banner-slide"
|
||||
variants={variants.leftToRight}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
transition={transition}
|
||||
>
|
||||
<div className="bg-layer"
|
||||
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-3.png)' }}>
|
||||
</div>
|
||||
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end", justifyContent: "start", textAlign: "start" }}>
|
||||
<div className="content-box custom-content-box">
|
||||
<span className="upper-text mb-2">Reclaim your</span>
|
||||
<h2 style={{ color: "#bc0000" }}>Wellnes</h2>
|
||||
<p className='text-white'>• Pain Relief • Strength Training • Active Care </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>
|
||||
{/* ✅ 1st slide moved to 2nd position */}
|
||||
<SwiperSlide>
|
||||
<AnimatePresence mode="wait">
|
||||
{activeIndex === 1 && (
|
||||
<motion.div key="slide-0"
|
||||
className="slide-item banner-slide"
|
||||
//variants={variants.rightToLeft}
|
||||
variants={revealVariants}
|
||||
initial="initial" animate="animate" exit="exit" transition={transition}>
|
||||
<div className="bg-layer bg-slide-0"
|
||||
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-1.png)' }}>
|
||||
</div>
|
||||
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end", justifyContent: "end", textAlign: "center" }}>
|
||||
<div className="content-box custom-content-box">
|
||||
<span className="upper-text mb-2 ">Build Your Strength & </span>
|
||||
<h2 style={{ color: "#bc0000" }}>Endurance</h2>
|
||||
<p className=' text-white'>• Physiotherapy • Sports Therapy • Injury Prevention</p>
|
||||
<div className="btn-box mt-3">
|
||||
<Link href="tel:+647-722-3434" className="theme-btn btn-one">
|
||||
<span>Book Your Appointment</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</SwiperSlide>
|
||||
|
||||
{/* Slide 4 */}
|
||||
<SwiperSlide>
|
||||
<AnimatePresence mode="wait">
|
||||
{activeIndex === 3 && (
|
||||
<motion.div
|
||||
key="slide-3"
|
||||
className="slide-item banner-slide"
|
||||
variants={variants.rightToLeft}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
transition={transition}
|
||||
>
|
||||
<div className="bg-layer"
|
||||
style={{ backgroundImage: 'url(/assets/images/banner/desktopBanner/banner-4.png)' }}>
|
||||
</div>
|
||||
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end",justifyContent: "start", textAlign: "start" }}>
|
||||
<div className="content-box custom-content-box">
|
||||
<span className="upper-text mb-2">Begin your</span>
|
||||
<h2 style={{ color: "#bc0000" }}>Recovery</h2>
|
||||
<p className='text-white'>• Rehab • Strength Training • Personalized Care </p>
|
||||
<div className="btn-box mt-3">
|
||||
<Link href="/contact" className="theme-btn btn-one">
|
||||
<span>Visit Our Location</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</SwiperSlide>
|
||||
{/* ✅ existing 3rd slide remains as 3rd */}
|
||||
<SwiperSlide>
|
||||
<AnimatePresence mode="wait">
|
||||
{activeIndex === 2 && (
|
||||
<motion.div key="slide-2"
|
||||
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-3.png)' }}>
|
||||
</div>
|
||||
<div className="auto-container" style={{ height: "600px", display: "flex", alignItems: "end", justifyContent: "start", textAlign: "start" }}>
|
||||
<div className="content-box custom-content-box">
|
||||
<span className="upper-text mb-2">Regain your</span>
|
||||
<h2 style={{ color: "#bc0000" }}>Flexiblity and Balance</h2>
|
||||
<p className='text-white'>• Pain Relief • Strength Training • Active Care </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>
|
||||
|
||||
{/* ✅ 2nd slide moved to 4th position */}
|
||||
<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="/contact" className="theme-btn btn-one">
|
||||
<span>Schedule a Massage</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</SwiperSlide>
|
||||
|
||||
</Swiper>
|
||||
|
||||
</Swiper>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -7,4 +7,4 @@ const nextConfig = {
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
module.exports = nextConfig;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user