From 38ee0d866ccc40452ea7beb1e09a0972e392d8bf Mon Sep 17 00:00:00 2001
From: metatroncubeswdev <info@metatroncubesolutions.com>
Date: Tue, 23 Sep 2025 12:58:17 -0400
Subject: [PATCH] updated the banner order and transition changes

---
 components/sections/home2/Banner.js | 302 +++++++++++++++-------------
 next.config.js                      |   2 +-
 2 files changed, 164 insertions(+), 140 deletions(-)

diff --git a/components/sections/home2/Banner.js b/components/sections/home2/Banner.js
index 9ade556..55670dc 100644
--- a/components/sections/home2/Banner.js
+++ b/components/sections/home2/Banner.js
@@ -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>
     );
-}
+}
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index ded3b24..38da262 100644
--- a/next.config.js
+++ b/next.config.js
@@ -7,4 +7,4 @@ const nextConfig = {
     },
 };
 
-export default nextConfig;
+module.exports = nextConfig;