Banner mobile view updated

app/page.js

@@ -17,13 +17,20 @@ import News from "@/components/sections/home1/News"
 import Funfacts from "@/components/sections/home1/Funfacts"
 import MobileServices from "@/components/sections/home/MobileServicesSection"
 import MobileFeatureCard from "@/components/sections/home/MobileFeatureCard"
+import MobileBanner from "@/components/sections/home2/MobileBanner"
 
 export default function Home() {
 
     return (
         <>
             <Layout headerStyle={2} footerStyle={2}>
-                <Banner />
+                <div className="d-none d-md-block">
+                    <Banner />
+                </div>
+
+                <div className="d-block d-md-none">
+                    <MobileBanner />
+                </div>
                 {/* <Features /> */}
                 <AboutSection />
                 {/* <ProcessSection /> */}
@@ -36,8 +43,8 @@ export default function Home() {
                 <div className="d-block d-md-none">
                     <MobileServices />
                 </div>
-                <MobileFeatureCard/>
-                   <Features />
+                <MobileFeatureCard />
+                <Features />
                 <FaqSection />
                 <AreaOfInjury />
                 <WhyChooseUsSection />

components/sections/home/ServicesSection.js

@@ -4,15 +4,7 @@ import React from 'react';
 
 export default function ServicesSection() {
     return (
-        // <section className="service-section bg-layer sec-pad bg-color-1" style={{ backgroundImage: 'url(/assets/images/home/our-services/our-services-bg.webp)' }}>
-        <section className="team-section sec-pad centred  bg-color-1" style={{
-                backgroundImage: "url(/assets/images/home/our-services/our-services-bg.webp)",
-                backgroundSize: "cover",         
-                backgroundPosition: "left",    
-                backgroundRepeat: "no-repeat",    
-                backgroundAttachment: "scroll",   
-            }}
-            >
+        <section className="service-section bg-layer sec-pad bg-color-1" style={{ backgroundImage: 'url(/assets/images/home/our-services/our-services-bg.webp)' }}>
            
             <div className="auto-container">
                 <div className="sec-title-1 mb_50 centred">

components/sections/home2/Banner.js

@@ -14,7 +14,7 @@ const swiperOptions = {
     slidesPerView: 1,
     spaceBetween: 0,
     autoplay: {
-        delay: 8000,
+        delay: 5000,
         disableOnInteraction: false,
     },
     loop: true,
@@ -158,10 +158,9 @@ export default function Banner() {
                                     <div className="auto-container">
                                         <div
                                             className={`content-box custom-content-box ${slide.contentStyle || ''}`}
-                                            style={slide.contentStyle === 'with-background' ? { 
-                                                background: 'rgba(255, 255, 255, 0.4)', // transparent white
-                                                backdropFilter: 'blur(8px)',            // glassmorphism
-                                                WebkitBackdropFilter: 'blur(8px)',
+                                            style={slide.contentStyle === 'with-background' ? {
+                                                backgroundColor: '#fff',
+                                                opacity: 0.8,
                                                 borderRadius: '20px',
                                                 padding: '30px'
                                             } : {}}
@@ -169,19 +168,19 @@ export default function Banner() {
                                             <span className="upper-text">
                                                 {slide.upperText}
                                             </span>
-                                            
+
                                             <h2>
                                                 {slide.title} <span>{slide.titleSpan}</span> {slide.titleEnd}
                                             </h2>
-                                            
+
                                             <p>
                                                 {slide.subtitle}
                                             </p>
-                                            
+
                                             <p>
                                                 {slide.description}
                                             </p>
-                                            
+
                                             <div className="btn-box mt-3">
                                                 <Link href={slide.buttonLink} className="theme-btn btn-one">
                                                     <span>{slide.buttonText}</span>

components/sections/home2/MobileBanner.js

@@ -0,0 +1,178 @@
+'use client'
+import React, { useState, useEffect } 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,
+    },
+    loop: true,
+    navigation: {
+        nextEl: '.h1n',
+        prevEl: '.h1p',
+    },
+    pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+    },
+};
+
+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 MobileBanner() {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [isMobile, setIsMobile] = useState(false);
+
+    useEffect(() => {
+        const handleResize = () => setIsMobile(window.innerWidth <= 768);
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    const slides = [
+        {
+            id: 0,
+            variant: 'topToBottom',
+            bgImage: '/assets/images/banner/mobile-banner/banner-1.webp',
+            hideContent: true
+        },
+        {
+            id: 1,
+            variant: 'bottomToTop',
+            bgImage: '/assets/images/banner/mobile-banner/banner-2.webp',
+            upperText: 'Compassionate Care, Delivered with Expertise',
+            title: 'Healing Touch,',
+            titleSpan: 'Fresh',
+            titleEnd: 'Inner Strength',
+            subtitle: 'Expert Hand Massage Techniques for Relief',
+            description: 'Experience targeted hand massage therapy to ease tension and promote healing, delivered by experienced therapists focused on your comfort and well-being.',
+            buttonText: 'Schedule a Massage',
+            buttonLink: '/contact',
+            contentStyle: 'with-background'
+        },
+        {
+            id: 2,
+            variant: 'leftToRight',
+            bgImage: '/assets/images/banner/mobile-banner/banner-3.webp',
+            upperText: 'Your Path to Complete Wellness Starts Here',
+            title: 'Local Physio',
+            titleSpan: 'Experts',
+            titleEnd: 'Near You',
+            subtitle: 'Physiotherapy Etobicoke & Rehab Care.',
+            description: 'Offering comprehensive physiotherapy and rehabilitation services in Etobicoke to support your wellness journey and help restore your strength efficiently.',
+            buttonText: 'Explore Our Service',
+            buttonLink: '/etobicoke-treatment-service',
+            contentStyle: 'with-background'
+        },
+        {
+            id: 3,
+            variant: 'rightToLeft',
+            bgImage: '/assets/images/banner/mobile-banner/banner-4.webp',
+            upperText: 'Healing Hands, Caring Hearts in Action',
+            title: 'Wellness',
+            titleSpan: 'by the',
+            titleEnd: 'Waterfront',
+            subtitle: 'Waterfront Physio and Rehab Services.',
+            description: 'Find peace and true healing with our specialized waterfront physio and rehab programs carefully designed for lasting wellness and a better quality of life.',
+            buttonText: 'Visit Our Location',
+            buttonLink: '/contact',
+            contentStyle: 'with-background'
+        }
+    ];
+
+    if (!isMobile) return null;
+
+    return (
+        <section className="banner-style-two p_relative">
+            <Swiper
+                {...swiperOptions}
+                className="banner-carousel"
+                onSwiper={(swiper) => setActiveIndex(swiper.realIndex || 0)}
+                onSlideChange={(swiper) => setActiveIndex(swiper.realIndex || 0)}
+            >
+                {slides.map((slide, index) => (
+                    <SwiperSlide key={slide.id}>
+                        <AnimatePresence mode="wait">
+                            {activeIndex === index && (
+                                <motion.div
+                                    key={`slide-${index}`}
+                                    className="slide-item"
+                                    variants={variants[slide.variant]}
+                                    initial="initial"
+                                    animate="animate"
+                                    exit="exit"
+                                    transition={transition}
+                                >
+                                    <div
+                                        className="bg-layer"
+                                        style={{
+                                            backgroundImage: `url(${slide.bgImage})`,
+                                            backgroundSize: 'cover',
+                                            backgroundPosition: 'center',
+                                            width: '100%',
+                                            height: '100%',
+                                            minHeight: '400px'
+                                        }}
+                                    ></div>
+
+                                    <div
+                                        className="auto-container"
+                                        style={{
+                                            minHeight: '400px', // force same height for first slide
+                                            display: 'flex',
+                                            justifyContent: 'center',
+                                            alignItems: 'center'
+                                        }}
+                                    >
+                                        {!slide.hideContent && (
+                                            <div
+                                                className={`content-box custom-content-box ${slide.contentStyle || ''}`}
+                                                style={slide.contentStyle === 'with-background' ? {
+                                                    backgroundColor: '#fff',
+                                                    opacity: 0.8,
+                                                    borderRadius: '20px',
+                                                    padding: '30px'
+                                                } : {}}
+
+                                            >
+                                                <span className="upper-text">{slide.upperText}</span>
+                                                <h2>{slide.title} <span>{slide.titleSpan}</span> {slide.titleEnd}</h2>
+                                                <p>{slide.subtitle}</p>
+                                                <p>{slide.description}</p>
+                                                <div className="btn-box mt-3">
+                                                    <Link href={slide.buttonLink} className="theme-btn btn-one">
+                                                        <span>{slide.buttonText}</span>
+                                                    </Link>
+                                                </div>
+                                            </div>
+                                        )}
+                                    </div>
+
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+                    </SwiperSlide>
+                ))}
+            </Swiper>
+        </section>
+    );
+};