MetatroncubeSoftwareSolutions/rapharehap
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

timer for slider increased-banner

Browse Source
This commit is contained in:
vidhubk 2025-09-13 21:45:07 +05:30
parent 7c05f59159
commit 9178b9ca55
1 changed files with 99 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

248
components/sections/home2/Banner.js
View File

@ -1,188 +1,138 @@
'use client' 'use client'
import React, { useState } from 'react'; import React from 'react';
import Link from "next/link"; import Link from "next/link"
import { Autoplay, Navigation, Pagination } from "swiper/modules"; import { Autoplay, Navigation, Pagination } from "swiper/modules"
import { Swiper, SwiperSlide } from "swiper/react"; import { Swiper, SwiperSlide } from "swiper/react"
import { motion } from "framer-motion";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
const swiperOptions = { const swiperOptions = {
modules: [Autoplay, Pagination, Navigation], modules: [Autoplay, Pagination, Navigation],
slidesPerView: 1, slidesPerView: 1,
spaceBetween: 0, spaceBetween: 0,
autoplay: { autoplay: {
delay: 5000, delay: 7000,
disableOnInteraction: false, disableOnInteraction: false,
}, },
loop: true, loop: true,
// Navigation
navigation: { navigation: {
nextEl: '.h1n', nextEl: '.h1n',
prevEl: '.h1p', prevEl: '.h1p',
}, },
// Pagination
pagination: { pagination: {
el: '.swiper-pagination', el: '.swiper-pagination',
clickable: true, 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() { export default function Banner() {
const [activeIndex, setActiveIndex] = useState(0);
return ( return (
<section className="banner-style-two p_relative"> <section className="banner-style-two p_relative">
<Swiper <Swiper {...swiperOptions} className="banner-carousel owl-theme owl-carousel owl-nav-none owl-dots-none">
{...swiperOptions} <SwiperSlide className="slide-item">
className="banner-carousel owl-theme owl-carousel owl-nav-none owl-dots-none" <div
onSwiper={(swiper) => { className="bg-layer"
setActiveIndex(swiper.realIndex || 0); style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-1.webp)' }}
}} ></div>
onSlideChange={(swiper) => { <div className="bg-layer" style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-1.webp)', backgroundPosition: '75% center' }}></div>
setActiveIndex(swiper.realIndex || 0); {/* <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" style={{ background: 'white', borderRadius: '15%', opacity: 0.8 }}>
{/* Slide 1 - Top to Bottom */}
<SwiperSlide> <span className="upper-text">The Journey to Better Health Begins here</span>
<motion.div <h2>Your Path to <span>Recovery</span> Starts Today</h2>
className="slide-item" <p>Expert Physiotherapy in Mississauga for You.</p>
initial="hidden" <p>
animate={activeIndex === 0 ? "visible" : "hidden"} Our skilled team provides physiotherapy in Mississauga to help you regain mobility and live pain-free. Compassionate care designed around your needs.
variants={variants.topToBottom} </p>
> <div className="btn-box mt-3">
<div <Link href="tel:+647-722-3434" className="theme-btn btn-one">
className="bg-layer" <span>Book Your Appointment</span>
style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-1.webp)' }} </Link>
></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> </div>
</motion.div> </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>
</div>
</div>
</div>
</SwiperSlide> </SwiperSlide>
{/* Slide 2 - Bottom to Top */} {/* Repeat the above structure for each slide-item as needed */}
<SwiperSlide> <SwiperSlide className="slide-item">
<motion.div <div
className="slide-item" className="bg-layer"
initial="hidden" style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-3.webp)' }}
animate={activeIndex === 1 ? "visible" : "hidden"} ></div>
variants={variants.bottomToTop} <div className="auto-container">
> <div className="content-box custom-content-box" style={{ background: 'white', borderRadius: '15%', opacity: 0.8 }}>
<div
className="bg-layer" <span className="upper-text">Your Path to Complete Wellness Starts Here</span>
style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-2.webp)' }} <h2>Local Physio <span>Experts </span> Near You</h2>
></div> <p>Physiotherapy Etobicoke & Rehab Care.</p>
<div className="auto-container"> <p>
<div className="content-box custom-content-box" style={{ background: 'white', borderRadius: '15%', opacity: 0.8 }}> Offering comprehensive physiotherapy and rehabilitation services in Etobicoke to support your wellness journey and help restore your strength efficiently.
<span className="upper-text">Compassionate Care, Delivered with Expertise</span> </p>
<h2>Healing Touch, <span>Fresh</span> Inner Strength</h2> <div className="btn-box mt-3">
<p>Expert Hand Massage Techniques for Relief</p> <Link href="/etobicoke-treatment-service" className="theme-btn btn-one">
<p> <span>Explore Our Service</span>
Experience targeted hand massage therapy to ease tension and promote healing, delivered by experienced therapists focused on your comfort and well-being. </Link>
</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> </div>
</motion.div> </div>
</SwiperSlide> </SwiperSlide>
{/* Slide 3 - Left to Right */} <SwiperSlide className="slide-item">
<SwiperSlide> <div
<motion.div className="bg-layer"
className="slide-item" style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-4.webp)' }}
initial="hidden" ></div>
animate={activeIndex === 2 ? "visible" : "hidden"} {/* <figure className="image-layer"><img src="/assets/images/home/banner/banner-img-4.webp" alt="" /></figure> */}
variants={variants.leftToRight} <div className="auto-container">
> <div className="content-box custom-content-box" style={{ background: 'white', borderRadius: '15%', opacity: 0.8 }}>
<div
className="bg-layer" <span className="upper-text">Healing Hands, Caring Hearts in Action</span>
style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-3.webp)' }} <h2>Wellness <span>by the</span>Waterfront</h2>
></div> <p>Waterfront Physio and Rehab Services.</p>
<div className="auto-container"> <p>
<div className="content-box custom-content-box" style={{ background: 'white', borderRadius: '15%', opacity: 0.8 }}> Find peace and true healing with our specialized waterfront physio and rehab programs carefully designed for lasting wellness and a better quality of life.
<span className="upper-text">Your Path to Complete Wellness Starts Here</span> </p>
<h2>Local Physio <span>Experts </span> Near You</h2> <div className="btn-box mt-3">
<p>Physiotherapy Etobicoke & Rehab Care.</p> <Link href="/contact" className="theme-btn btn-one">
<p> <span>Visit Our Location</span>
Offering comprehensive physiotherapy and rehabilitation services in Etobicoke to support your wellness journey and help restore your strength efficiently. </Link>
</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> </div>
</motion.div> </div>
</SwiperSlide> </SwiperSlide>
{/* 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>
</motion.div>
</SwiperSlide>
</Swiper> </Swiper>
</section> </section>
); );
}; };