From dab9ecaeb745c7c67ffdd15806f4c81f780695ce Mon Sep 17 00:00:00 2001 From: vidhubk Date: Sat, 13 Sep 2025 22:38:58 +0530 Subject: [PATCH] updated- slider direction changes --- components/sections/home2/Banner.js | 282 +++++++++++++++++----------- 1 file changed, 172 insertions(+), 110 deletions(-) diff --git a/components/sections/home2/Banner.js b/components/sections/home2/Banner.js index 4d45627..72ddb4b 100644 --- a/components/sections/home2/Banner.js +++ b/components/sections/home2/Banner.js @@ -1,138 +1,200 @@ '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, 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: 7000, + delay: 8000, disableOnInteraction: false, }, loop: true, - - // Navigation navigation: { nextEl: '.h1n', prevEl: '.h1p', }, - - // Pagination 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 Banner() { + const [activeIndex, setActiveIndex] = useState(0); + const [isAnimating, setIsAnimating] = useState(false); + + const slides = [ + { + id: 0, + variant: 'topToBottom', + bgImage: '/assets/images/home/banner/home-banner-1.webp', + upperText: 'The Journey to Better Health Begins here', + title: 'Your Path to', + titleSpan: 'Recovery', + titleEnd: 'Starts Today', + subtitle: 'Expert Physiotherapy in Mississauga for You.', + description: 'Our skilled team provides physiotherapy in Mississauga to help you regain mobility and live pain-free. Compassionate care designed around your needs.', + buttonText: 'Book Your Appointment', + buttonLink: 'tel:+647-722-3434', + contentStyle: 'mobile-style' + }, + { + id: 1, + variant: 'bottomToTop', + bgImage: '/assets/images/home/banner/home-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/home/banner/home-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/home/banner/home-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' + } + ]; + + const handleSlideChange = (swiper) => { + setIsAnimating(true); + setActiveIndex(swiper.realIndex || 0); + setTimeout(() => { + setIsAnimating(false); + }, 1200); + }; + return (
- - -
-
- {/*
*/} -
-
- - The Journey to Better Health Begins here -

Your Path to Recovery Starts Today

-

Expert Physiotherapy in Mississauga for You.

-

- Our skilled team provides physiotherapy in Mississauga to help you regain mobility and live pain-free. Compassionate care designed around your needs. -

-
- - Book Your Appointment - -
-
-
- - {/* Repeat the above structure for each slide-item as needed */} - -
- {/*
*/} -
-
- - Compassionate Care, Delivered with Expertise -

Healing Touch, Fresh Inner Strength

-

Expert Hand Massage Techniques for Relief

-

- Experience targeted hand massage therapy to ease tension and promote healing, delivered by experienced therapists focused on your comfort and well-being. -

-
- - Schedule a Massage - -
-
-
- - - {/* Repeat the above structure for each slide-item as needed */} - -
-
-
- - Your Path to Complete Wellness Starts Here -

Local Physio Experts Near You

-

Physiotherapy Etobicoke & Rehab Care.

-

- Offering comprehensive physiotherapy and rehabilitation services in Etobicoke to support your wellness journey and help restore your strength efficiently. -

-
- - Explore Our Service - -
-
-
- - - -
- {/*
*/} -
-
- - Healing Hands, Caring Hearts in Action -

Wellness by theWaterfront

-

Waterfront Physio and Rehab Services.

-

- Find peace and true healing with our specialized waterfront physio and rehab programs carefully designed for lasting wellness and a better quality of life. -

-
- - Visit Our Location - -
-
-
- - + { + setActiveIndex(swiper.realIndex || 0); + }} + onSlideChange={handleSlideChange} + > + {slides.map((slide, index) => ( + + + {activeIndex === index && ( + +
+
+
+ + {slide.upperText} + + +

+ {slide.title} {slide.titleSpan} {slide.titleEnd} +

+ +

+ {slide.subtitle} +

+ +

+ {slide.description} +

+ +
+ + {slide.buttonText} + +
+
+
+ + )} + + + ))}
); }; -