From ec3882394de77edc89b3e334a418504976ffa041 Mon Sep 17 00:00:00 2001
From: akash <akash@metatroncube.com>
Date: Sat, 13 Sep 2025 20:17:35 +0530
Subject: [PATCH] Home banner animations updated

---
 components/sections/home2/Banner.js | 240 +++++++++++++++++-----------
 1 file changed, 145 insertions(+), 95 deletions(-)

diff --git a/components/sections/home2/Banner.js b/components/sections/home2/Banner.js
index 61ce517..c7e9c27 100644
--- a/components/sections/home2/Banner.js
+++ b/components/sections/home2/Banner.js
@@ -1,8 +1,13 @@
 'use client'
-import React from 'react';
-import Link from "next/link"
-import { Autoplay, Navigation, Pagination } from "swiper/modules"
-import { Swiper, SwiperSlide } from "swiper/react"
+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],
@@ -13,126 +18,171 @@ const swiperOptions = {
         disableOnInteraction: false,
     },
     loop: true,
-
-    // Navigation
     navigation: {
         nextEl: '.h1n',
         prevEl: '.h1p',
     },
-
-    // Pagination
     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">
-                <SwiperSlide className="slide-item">
-                    <div
-                        className="bg-layer"
-                        style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-1.webp)' }}
-                    ></div>
-                    <div className="bg-layer" style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-1.webp)', backgroundPosition: '75% center' }}></div>
-                    {/* <figure className="image-layer"><img src="/assets/images/home/banner/banner-img-1.webp" alt="" /></figure> */}
-                    <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>
+            <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>
-                    </div>
+                    </motion.div>
                 </SwiperSlide>
-                {/* Repeat the above structure for each slide-item as needed */}
-                <SwiperSlide className="slide-item">
-                    <div
-                        className="bg-layer"
-                        style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-2.webp)' }}
-                    ></div>
-                    {/* <figure className="image-layer"><img src="/assets/images/home/banner/banner-img-2.webp" alt="" /></figure> */}
-                    <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>
+                {/* 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>
-                    </div>
+                    </motion.div>
                 </SwiperSlide>
 
-                {/* Repeat the above structure for each slide-item as needed */}
-                <SwiperSlide className="slide-item">
-                    <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>
+                {/* 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>
-                    </div>
+                    </motion.div>
                 </SwiperSlide>
 
-                <SwiperSlide className="slide-item">
-                    <div
-                        className="bg-layer"
-                        style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-4.webp)' }}
-                    ></div>
-                    {/* <figure className="image-layer"><img src="/assets/images/home/banner/banner-img-4.webp" alt="" /></figure> */}
-                    <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>
+                {/* 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>
-                    </div>
+                    </motion.div>
                 </SwiperSlide>
-
             </Swiper>
         </section>
     );
 };
-