rapharehap/components/sections/home2/Banner.js

'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 } 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,
    },
    loop: true,
    navigation: {
        nextEl: '.h1n',
        prevEl: '.h1p',
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
};

// Animation variants for full slide
const variants = {
    topToBottom: {
        hidden: { y: -300, opacity: 0 },
        visible: { y: 0, opacity: 1, transition: { duration: 1, ease: "easeOut" } },
    },
    bottomToTop: {
        hidden: { y: 300, opacity: 0 },
        visible: { y: 0, opacity: 1, transition: { duration: 1, ease: "easeOut" } },
    },
    leftToRight: {
        hidden: { x: -400, opacity: 0 },
        visible: { x: 0, opacity: 1, transition: { duration: 1, ease: "easeOut" } },
    },
    rightToLeft: {
        hidden: { x: 400, opacity: 0 },
        visible: { x: 0, opacity: 1, transition: { duration: 1, ease: "easeOut" } },
    },
};

export default function Banner() {
    const [activeIndex, setActiveIndex] = useState(0);

    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={(swiper) => {
                    setActiveIndex(swiper.realIndex || 0);
                }}
            >
                {/* Slide 1 - Top to Bottom */}
                <SwiperSlide>
                    <motion.div
                        className="slide-item"
                        initial="hidden"
                        animate={activeIndex === 0 ? "visible" : "hidden"}
                        variants={variants.topToBottom}
                    >
                        <div
                            className="bg-layer"
                            style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-1.webp)' }}
                        ></div>
                        <div className="auto-container">
                            <div className="content-box custom-content-box mobile-style">
                                <span className="upper-text">The Journey to Better Health Begins here</span>
                                <h2>Your Path to <span>Recovery</span> Starts Today</h2>
                                <p>Expert Physiotherapy in Mississauga for You.</p>
                                <p>
                                    Our skilled team provides physiotherapy in Mississauga to help you regain mobility and live pain-free. Compassionate care designed around your needs.
                                </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>
                </SwiperSlide>

                {/* Slide 2 - Bottom to Top */}
                <SwiperSlide>
                    <motion.div
                        className="slide-item"
                        initial="hidden"
                        animate={activeIndex === 1 ? "visible" : "hidden"}
                        variants={variants.bottomToTop}
                    >
                        <div
                            className="bg-layer"
                            style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-2.webp)' }}
                        ></div>
                        <div className="auto-container">
                            <div className="content-box custom-content-box" style={{ background: 'white', borderRadius: '15%', opacity: 0.8 }}>
                                <span className="upper-text">Compassionate Care, Delivered with Expertise</span>
                                <h2>Healing Touch, <span>Fresh</span> Inner Strength</h2>
                                <p>Expert Hand Massage Techniques for Relief</p>
                                <p>
                                    Experience targeted hand massage therapy to ease tension and promote healing, delivered by experienced therapists focused on your comfort and well-being.
                                </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>
                </SwiperSlide>

                {/* Slide 3 - Left to Right */}
                <SwiperSlide>
                    <motion.div
                        className="slide-item"
                        initial="hidden"
                        animate={activeIndex === 2 ? "visible" : "hidden"}
                        variants={variants.leftToRight}
                    >
                        <div
                            className="bg-layer"
                            style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-3.webp)' }}
                        ></div>
                        <div className="auto-container">
                            <div className="content-box custom-content-box" style={{ background: 'white', borderRadius: '15%', opacity: 0.8 }}>
                                <span className="upper-text">Your Path to Complete Wellness Starts Here</span>
                                <h2>Local Physio <span>Experts </span> Near You</h2>
                                <p>Physiotherapy Etobicoke & Rehab Care.</p>
                                <p>
                                    Offering comprehensive physiotherapy and rehabilitation services in Etobicoke to support your wellness journey and help restore your strength efficiently.
                                </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>
                </SwiperSlide>

                {/* Slide 4 - Right to Left */}
                <SwiperSlide>
                    <motion.div
                        className="slide-item"
                        initial="hidden"
                        animate={activeIndex === 3 ? "visible" : "hidden"}
                        variants={variants.rightToLeft}
                    >
                        <div
                            className="bg-layer"
                            style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-4.webp)' }}
                        ></div>
                        <div className="auto-container">
                            <div className="content-box custom-content-box" style={{ background: 'white', borderRadius: '15%', opacity: 0.8 }}>
                                <span className="upper-text">Healing Hands, Caring Hearts in Action</span>
                                <h2>Wellness <span>by the</span>Waterfront</h2>
                                <p>Waterfront Physio and Rehab Services.</p>
                                <p>
                                    Find peace and true healing with our specialized waterfront physio and rehab programs carefully designed for lasting wellness and a better quality of life.
                                </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>
                </SwiperSlide>
            </Swiper>
        </section>
    );
};