217 lines
10 KiB
JavaScript
217 lines
10 KiB
JavaScript
'use client'
|
|
import React, { useState } from 'react';
|
|
import Link from "next/link";
|
|
import { Autoplay, Navigation, Pagination } from "swiper/modules";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
|
|
import "swiper/css";
|
|
import "swiper/css/navigation";
|
|
import "swiper/css/pagination";
|
|
|
|
const swiperOptions = {
|
|
modules: [Autoplay, Pagination, Navigation],
|
|
slidesPerView: 1,
|
|
spaceBetween: 0,
|
|
autoplay: {
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
pauseOnMouseEnter: true, // stops on hover for smooth UX
|
|
},
|
|
speed: 1500, // increase speed for smoother sliding
|
|
loop: true,
|
|
navigation: {
|
|
nextEl: '.h1n',
|
|
prevEl: '.h1p',
|
|
},
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true,
|
|
},
|
|
effect: "slide", // ensures smooth slide effect
|
|
};
|
|
|
|
const variants = {
|
|
topToBottom: {
|
|
initial: { y: '-100vh', opacity: 0 },
|
|
animate: { y: 0, opacity: 1 },
|
|
exit: { y: '100vh', opacity: 0 }
|
|
},
|
|
bottomToTop: {
|
|
initial: { y: '100vh', opacity: 0 },
|
|
animate: { y: 0, opacity: 1 },
|
|
exit: { y: '-100vh', opacity: 0 }
|
|
},
|
|
leftToRight: {
|
|
initial: { x: '-100vw', opacity: 0 },
|
|
animate: { x: 0, opacity: 1 },
|
|
exit: { x: '100vw', opacity: 0 }
|
|
},
|
|
rightToLeft: {
|
|
initial: { x: '100vw', opacity: 0 },
|
|
animate: { x: 0, opacity: 1 },
|
|
exit: { x: '-100vw', opacity: 0 }
|
|
},
|
|
};
|
|
|
|
const transition = {
|
|
type: "tween",
|
|
ease: [0.4, 0.0, 0.2, 1],
|
|
duration: 1.2
|
|
};
|
|
|
|
export default function Banner() {
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
const [isAnimating, setIsAnimating] = useState(false);
|
|
|
|
const handleSlideChange = (swiper) => {
|
|
setIsAnimating(true);
|
|
setActiveIndex(swiper.realIndex || 0);
|
|
setTimeout(() => setIsAnimating(false), 1200);
|
|
};
|
|
|
|
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>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
|
|
</Swiper>
|
|
</section>
|
|
);
|
|
}
|