Home banner animations updated
This commit is contained in:
akash
parent
79169eb8e8
commit
ec3882394d
@ -1,8 +1,13 @@
|
|||||||
'use client'
|
'use client'
|
||||||
import React from 'react';
|
import React, { useState } 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],
|
||||||
@ -13,126 +18,171 @@ const swiperOptions = {
|
|||||||
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 {...swiperOptions} className="banner-carousel owl-theme owl-carousel owl-nav-none owl-dots-none">
|
<Swiper
|
||||||
<SwiperSlide className="slide-item">
|
{...swiperOptions}
|
||||||
<div
|
className="banner-carousel owl-theme owl-carousel owl-nav-none owl-dots-none"
|
||||||
className="bg-layer"
|
onSwiper={(swiper) => {
|
||||||
style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-1.webp)' }}
|
setActiveIndex(swiper.realIndex || 0);
|
||||||
></div>
|
}}
|
||||||
<div className="bg-layer" style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-1.webp)', backgroundPosition: '75% center' }}></div>
|
onSlideChange={(swiper) => {
|
||||||
{/* <figure className="image-layer"><img src="/assets/images/home/banner/banner-img-1.webp" alt="" /></figure> */}
|
setActiveIndex(swiper.realIndex || 0);
|
||||||
<div className="auto-container">
|
}}
|
||||||
<div className="content-box custom-content-box mobile-style">
|
>
|
||||||
|
{/* Slide 1 - Top to Bottom */}
|
||||||
<span className="upper-text">The Journey to Better Health Begins here</span>
|
<SwiperSlide>
|
||||||
<h2>Your Path to <span>Recovery</span> Starts Today</h2>
|
<motion.div
|
||||||
<p>Expert Physiotherapy in Mississauga for You.</p>
|
className="slide-item"
|
||||||
<p>
|
initial="hidden"
|
||||||
Our skilled team provides physiotherapy in Mississauga to help you regain mobility and live pain-free. Compassionate care designed around your needs.
|
animate={activeIndex === 0 ? "visible" : "hidden"}
|
||||||
</p>
|
variants={variants.topToBottom}
|
||||||
<div className="btn-box mt-3">
|
>
|
||||||
<Link href="tel:+647-722-3434" className="theme-btn btn-one">
|
<div
|
||||||
<span>Book Your Appointment</span>
|
className="bg-layer"
|
||||||
</Link>
|
style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-1.webp)' }}
|
||||||
|
></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>
|
||||||
</div>
|
</motion.div>
|
||||||
</SwiperSlide>
|
</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>
|
{/* Slide 2 - Bottom to Top */}
|
||||||
<h2>Healing Touch, <span>Fresh</span> Inner Strength</h2>
|
<SwiperSlide>
|
||||||
<p>Expert Hand Massage Techniques for Relief</p>
|
<motion.div
|
||||||
<p>
|
className="slide-item"
|
||||||
Experience targeted hand massage therapy to ease tension and promote healing, delivered by experienced therapists focused on your comfort and well-being.
|
initial="hidden"
|
||||||
</p>
|
animate={activeIndex === 1 ? "visible" : "hidden"}
|
||||||
<div className="btn-box mt-3">
|
variants={variants.bottomToTop}
|
||||||
<Link href="/contact" className="theme-btn btn-one">
|
>
|
||||||
<span>Schedule a Massage</span>
|
<div
|
||||||
</Link>
|
className="bg-layer"
|
||||||
|
style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-2.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">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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</motion.div>
|
||||||
</SwiperSlide>
|
</SwiperSlide>
|
||||||
|
|
||||||
{/* Repeat the above structure for each slide-item as needed */}
|
{/* 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-3.webp)' }}
|
initial="hidden"
|
||||||
></div>
|
animate={activeIndex === 2 ? "visible" : "hidden"}
|
||||||
<div className="auto-container">
|
variants={variants.leftToRight}
|
||||||
<div className="content-box custom-content-box" style={{ background: 'white', borderRadius: '15%', opacity: 0.8 }}>
|
>
|
||||||
|
<div
|
||||||
<span className="upper-text">Your Path to Complete Wellness Starts Here</span>
|
className="bg-layer"
|
||||||
<h2>Local Physio <span>Experts </span> Near You</h2>
|
style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-3.webp)' }}
|
||||||
<p>Physiotherapy Etobicoke & Rehab Care.</p>
|
></div>
|
||||||
<p>
|
<div className="auto-container">
|
||||||
Offering comprehensive physiotherapy and rehabilitation services in Etobicoke to support your wellness journey and help restore your strength efficiently.
|
<div className="content-box custom-content-box" style={{ background: 'white', borderRadius: '15%', opacity: 0.8 }}>
|
||||||
</p>
|
<span className="upper-text">Your Path to Complete Wellness Starts Here</span>
|
||||||
<div className="btn-box mt-3">
|
<h2>Local Physio <span>Experts </span> Near You</h2>
|
||||||
<Link href="/etobicoke-treatment-service" className="theme-btn btn-one">
|
<p>Physiotherapy Etobicoke & Rehab Care.</p>
|
||||||
<span>Explore Our Service</span>
|
<p>
|
||||||
</Link>
|
Offering comprehensive physiotherapy and rehabilitation services in Etobicoke to support your wellness journey and help restore your strength efficiently.
|
||||||
|
</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>
|
||||||
</div>
|
</motion.div>
|
||||||
</SwiperSlide>
|
</SwiperSlide>
|
||||||
|
|
||||||
<SwiperSlide className="slide-item">
|
{/* Slide 4 - Right to Left */}
|
||||||
<div
|
<SwiperSlide>
|
||||||
className="bg-layer"
|
<motion.div
|
||||||
style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-4.webp)' }}
|
className="slide-item"
|
||||||
></div>
|
initial="hidden"
|
||||||
{/* <figure className="image-layer"><img src="/assets/images/home/banner/banner-img-4.webp" alt="" /></figure> */}
|
animate={activeIndex === 3 ? "visible" : "hidden"}
|
||||||
<div className="auto-container">
|
variants={variants.rightToLeft}
|
||||||
<div className="content-box custom-content-box" style={{ background: 'white', borderRadius: '15%', opacity: 0.8 }}>
|
>
|
||||||
|
<div
|
||||||
<span className="upper-text">Healing Hands, Caring Hearts in Action</span>
|
className="bg-layer"
|
||||||
<h2>Wellness <span>by the</span>Waterfront</h2>
|
style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-4.webp)' }}
|
||||||
<p>Waterfront Physio and Rehab Services.</p>
|
></div>
|
||||||
<p>
|
<div className="auto-container">
|
||||||
Find peace and true healing with our specialized waterfront physio and rehab programs carefully designed for lasting wellness and a better quality of life.
|
<div className="content-box custom-content-box" style={{ background: 'white', borderRadius: '15%', opacity: 0.8 }}>
|
||||||
</p>
|
<span className="upper-text">Healing Hands, Caring Hearts in Action</span>
|
||||||
<div className="btn-box mt-3">
|
<h2>Wellness <span>by the</span>Waterfront</h2>
|
||||||
<Link href="/contact" className="theme-btn btn-one">
|
<p>Waterfront Physio and Rehab Services.</p>
|
||||||
<span>Visit Our Location</span>
|
<p>
|
||||||
</Link>
|
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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</motion.div>
|
||||||
</SwiperSlide>
|
</SwiperSlide>
|
||||||
|
|
||||||
</Swiper>
|
</Swiper>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user