From c8f24b2b1223856ecc4fc8316db3e1c8b5e0b6bc Mon Sep 17 00:00:00 2001 From: Alaguraj0361 Date: Thu, 2 Oct 2025 17:25:45 +0530 Subject: [PATCH] banner updated --- app/blog/page.js | 4 +- components/sections/home2/Banner.js | 378 +++++++++------------- components/sections/home2/MobileBanner.js | 326 +++++++------------ package-lock.json | 7 + package.json | 1 + 5 files changed, 276 insertions(+), 440 deletions(-) diff --git a/app/blog/page.js b/app/blog/page.js index ef136ed..6fe3051 100644 --- a/app/blog/page.js +++ b/app/blog/page.js @@ -23,8 +23,8 @@ export default function Blog() {
diff --git a/components/sections/home2/Banner.js b/components/sections/home2/Banner.js index ea51eaa..1269271 100644 --- a/components/sections/home2/Banner.js +++ b/components/sections/home2/Banner.js @@ -1,237 +1,161 @@ -'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, AnimatePresence } from "framer-motion"; +"use client" +import React, { useState } from "react" +import Link from "next/link" +import { useKeenSlider } from "keen-slider/react" +import "keen-slider/keen-slider.min.css" -import "swiper/css"; -import "swiper/css/navigation"; -import "swiper/css/pagination"; - -const swiperOptions = { - modules: [Autoplay, Pagination, Navigation], - slidesPerView: 1, - spaceBetween: 0, - autoplay: { - delay: 2000, - disableOnInteraction: false, - pauseOnMouseEnter: true, // stops on hover for smooth UX - }, - speed: 1500, // increase speed for smoother sliding - loop: true, - navigation: { - nextEl: '.h1n', - prevEl: '.h1p', - }, - pagination: { - el: '.swiper-pagination', - clickable: true, - }, - effect: "slide", // ensures smooth slide effect -}; - -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, - 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.6, - ease: "easeInOut" - } - }, - exit: { - scaleX: 0, - opacity: 0, - originX: 0, - transition: { - duration: 0.6, - ease: "easeInOut" - } +// Autoplay plugin +function AutoplaySlider(slider) { + let timeout + let mouseOver = false + function clearNextTimeout() { + clearTimeout(timeout) } -}; - -const transition = { - type: "tween", - ease: [0.4, 0.0, 0.2, 1], - duration: 1.2 -}; + function nextTimeout() { + clearTimeout(timeout) + if (mouseOver) return + timeout = setTimeout(() => { + slider.next() + }, 4000) + } + slider.on("created", () => { + slider.container.addEventListener("mouseover", () => { + mouseOver = true + clearNextTimeout() + }) + slider.container.addEventListener("mouseout", () => { + mouseOver = false + nextTimeout() + }) + nextTimeout() + }) + slider.on("dragStarted", clearNextTimeout) + slider.on("animationEnded", nextTimeout) + slider.on("updated", nextTimeout) +} export default function Banner() { - const [activeIndex, setActiveIndex] = useState(0); - const [isAnimating, setIsAnimating] = useState(false); + const [sliderLoaded, setSliderLoaded] = useState(false) - const handleSlideChange = (swiper) => { - setIsAnimating(true); - setActiveIndex(swiper.realIndex || 0); - setTimeout(() => setIsAnimating(false), 1200); - }; + const [sliderRef] = useKeenSlider( + { + loop: true, + renderMode: "performance", + slides: { perView: 1, spacing: 0 }, + duration: 1000, // increase for smoother transition + easing: (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2, // smooth cubic easing + created() { + setSliderLoaded(true) + }, + }, + [AutoplaySlider] + ) + + + const slides = [ + { + id: 0, + bg: "/assets/images/banner/desktopBanner/banner-4.png", + upper: "Begin your", + title: "Recovery", + desc: "• Rehab • Strength Training • Personalized Care", + btn: { text: "Visit Our Location", link: "/contact" }, + align: "start", + }, + { + id: 1, + bg: "/assets/images/banner/desktopBanner/banner-1.png", + upper: "Build Your Strength &", + title: "Endurance", + desc: "• Physiotherapy • Sports Therapy • Injury Prevention", + btn: { text: "Book Your Appointment", link: "tel:+647-722-3434" }, + align: "center", + }, + { + id: 2, + bg: "/assets/images/banner/desktopBanner/banner-3.webp", + upper: "Regain Your Strength", + title: "Heal", + desc: "• Pain Relief • Mobility • Wellness", + btn: { text: "Schedule a Massage", link: "/contact" }, + align: "start", + }, + { + id: 3, + bg: "/assets/images/banner/desktopBanner/banner-2.png", + upper: "Build your Core", + title: "Performance", + desc: "• Pain Relief • Active Care • Long-Term Result", + btn: { text: "Explore Our Service", link: "/etobicoke-treatment-service" }, + align: "space-evenly", + }, + ] return (
- setActiveIndex(swiper.realIndex || 0)} - onSlideChange={handleSlideChange} +
- - - - {activeIndex === 0 && ( - -
-
-
-
- Begin your -

Recovery

-

• Rehab • Strength Training • Personalized Care

-
- - Vist Our Location - -
-
-
- - )} - - - - - - {activeIndex === 1 && ( - -
-
-
-
- Build Your Strength & -

Endurance

-

• Physiotherapy • Sports Therapy • Injury Prevention

-
- - Book Your Appointment - -
-
-
- - )} - - - - {/* ✅ existing 3rd slide remains as 3rd */} - - - {activeIndex === 2 && ( - -
-
-
-
- Regain Your Strength -

Heal

-

• Pain Relief • mobility • Wellness

-
- - Schedule a Massage - - -
-
-
- - )} - - - - - - {activeIndex === 3 && ( - -
-
-
-
- Build your Core -

Performance

-

• Pain Relief • Active Care • Long-Term Result

-
- - Explore Our Service - -
-
-
- - )} - - - - - + {slides.map((s) => ( +
+
+ {s.upper} +

+ {s.title} +

+

{s.desc}

+
+ + {s.btn.text} + +
+
+
+ ))} +
- ); -} \ No newline at end of file + ) +} diff --git a/components/sections/home2/MobileBanner.js b/components/sections/home2/MobileBanner.js index ecc75bb..64c80bb 100644 --- a/components/sections/home2/MobileBanner.js +++ b/components/sections/home2/MobileBanner.js @@ -1,220 +1,124 @@ -'use client' -import React, { useState, useEffect } from 'react'; +"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, 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: 10000, - 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 }; -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" - } - } -}; - - +import { useKeenSlider } from "keen-slider/react"; +import "keen-slider/keen-slider.min.css"; export default function MobileBanner() { - const [activeIndex, setActiveIndex] = useState(0); - const [isMobile, setIsMobile] = useState(false); + const [isMobile, setIsMobile] = useState(false); - useEffect(() => { - const handleResize = () => setIsMobile(window.innerWidth <= 768); - handleResize(); - window.addEventListener('resize', handleResize); - return () => window.removeEventListener('resize', handleResize); - }, []); + React.useEffect(() => { + const handleResize = () => setIsMobile(window.innerWidth <= 768); + handleResize(); + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); - const slides = [ - { - id: 0, - variant: 'revealVariants', - bgImage: '/assets/images/banner/mobile-banner/4.webp', - upperText: 'Begin your ', - title: ' Recovery', - // titleSpan: 'Wellness', - // titleEnd: 'Care', - // subtitle: 'Waterfront Physio and Rehab Services.', - description: 'Discover holistic physiotherapy and rehab services designed to restore balance, ease pain, and support long-term recovery.', - buttonText: 'Book Your Appointment', - buttonLink: '/contact', - // contentStyle: 'with-background' - }, - { - id: 1, - variant: 'revealVariants', - bgImage: '/assets/images/banner/mobile-banner/1.webp', - upperText: 'Build Your Strength & ', - title: 'Endurance', - // titleSpan: 'health', - // titleEnd: 'Forever', - subtitle: 'Expert Physiotherapy in Mississauga for You.', - description: 'Our expert physiotherapists help you restore movement, reduce pain, and live healthier with personalized care in Mississauga.', - buttonText: 'Book Your Appointment', - buttonLink: 'tel:+647-722-3434', - contentStyle: 'mobile-style' - }, + const [sliderRef] = useKeenSlider({ + loop: true, + autoplay: { + delay: 4000, + pauseOnMouseEnter: true, + stopOnInteraction: false, + }, + slides: { perView: 1, spacing: 0 }, + }); - { - id: 2, - variant: 'revealVariants', - bgImage: '/assets/images/banner/mobile-banner/3.webp', - upperText: 'Regain your Flexiblity & ', - title: 'Balance', - // titleSpan: 'Physio', - // titleEnd: 'Experts', - // subtitle: 'Physiotherapy Etobicoke & Rehab Care.', - description: 'Comprehensive physiotherapy and rehab services designed to restore your strength, mobility and long-term wellness.', - buttonText: 'Explore Our Service', - buttonLink: '/etobicoke-treatment-service', - // contentStyle: 'with-background' - }, - { - id: 3, - variant: 'revealVariants', - bgImage: '/assets/images/banner/mobile-banner/2.webp', - upperText: 'Build your Core ', - title: 'Performance', - // titleSpan: 'Massage', - // titleEnd: 'Therapy', - // subtitle: 'Expert Hand Massage Techniques for Relief', - description: 'Experience soothing massage techniques that release tension, promote circulation, and support your overall wellness.', - buttonText: 'Schedule a Massage', - buttonLink: '/contact', - // contentStyle: 'with-background' - }, + const slides = [ + { + id: 0, + bgImage: "/assets/images/banner/mobile-banner/4.webp", + upperText: "Begin your ", + title: "Recovery", + description: + "Discover holistic physiotherapy and rehab services designed to restore balance, ease pain, and support long-term recovery.", + buttonText: "Book Your Appointment", + buttonLink: "/contact", + }, + { + id: 1, + bgImage: "/assets/images/banner/mobile-banner/1.webp", + upperText: "Build Your Strength & ", + title: "Endurance", + subtitle: "Expert Physiotherapy in Mississauga for You.", + description: + "Our expert physiotherapists help you restore movement, reduce pain, and live healthier with personalized care in Mississauga.", + buttonText: "Book Your Appointment", + buttonLink: "tel:+647-722-3434", + }, + { + id: 2, + bgImage: "/assets/images/banner/mobile-banner/3.webp", + upperText: "Regain your Flexibility & ", + title: "Balance", + description: + "Comprehensive physiotherapy and rehab services designed to restore your strength, mobility and long-term wellness.", + buttonText: "Explore Our Service", + buttonLink: "/etobicoke-treatment-service", + }, + { + id: 3, + bgImage: "/assets/images/banner/mobile-banner/2.webp", + upperText: "Build your Core ", + title: "Performance", + description: + "Experience soothing massage techniques that release tension, promote circulation, and support your overall wellness.", + buttonText: "Schedule a Massage", + buttonLink: "/contact", + }, + ]; - ]; + if (!isMobile) return null; - if (!isMobile) return null; - - return ( -
- setActiveIndex(swiper.realIndex || 0)} - onSlideChange={(swiper) => setActiveIndex(swiper.realIndex || 0)} + return ( +
+
+ {slides.map((slide) => ( +
+
- {slides.map((slide, index) => ( - - - {activeIndex === index && ( - - {/* full-height background */} -
- - {/* centered content */} -
- {!slide.hideContent && ( -
- {slide.upperText} -

- {slide.title} {slide.titleSpan} {slide.titleEnd} -

-

{slide.subtitle}

-

{slide.description}

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

+ {slide.title} +

+ {/* {slide.subtitle &&

{slide.subtitle}

} */} + {/*

{slide.description}

*/} +
+ + {slide.buttonText} + +
+
+
+
+ ))} +
+ + ); +} diff --git a/package-lock.json b/package-lock.json index ab608b0..0cef9ed 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "imagemin-optipng": "^8.0.0", "imagemin-webp": "^8.0.0", "isotope-layout": "^3.0.6", + "keen-slider": "^6.8.6", "lightgallery": "^2.7.2", "next": "^14.0.4-canary.36", "react": "18.2.0", @@ -3704,6 +3705,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/keen-slider": { + "version": "6.8.6", + "resolved": "https://registry.npmjs.org/keen-slider/-/keen-slider-6.8.6.tgz", + "integrity": "sha512-dcEQ7GDBpCjUQA8XZeWh3oBBLLmyn8aoeIQFGL/NTVkoEOsmlnXqA4QykUm/SncolAZYGsEk/PfUhLZ7mwMM2w==", + "license": "MIT" + }, "node_modules/keyv": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz", diff --git a/package.json b/package.json index 386e0de..b9178e1 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "imagemin-optipng": "^8.0.0", "imagemin-webp": "^8.0.0", "isotope-layout": "^3.0.6", + "keen-slider": "^6.8.6", "lightgallery": "^2.7.2", "next": "^14.0.4-canary.36", "react": "18.2.0",