180 lines
6.8 KiB
JavaScript
180 lines
6.8 KiB
JavaScript
"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"
|
|
|
|
// Autoplay plugin
|
|
function AutoplaySlider(slider) {
|
|
let timeout
|
|
let mouseOver = false
|
|
function clearNextTimeout() {
|
|
clearTimeout(timeout)
|
|
}
|
|
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 [sliderLoaded, setSliderLoaded] = useState(false)
|
|
|
|
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.webp",
|
|
alt: "Physiotherapy at Rapharehab Clinic.",
|
|
upper: "Start Your Path to",
|
|
title: "Recovery",
|
|
desc: " • Renew • Revive • Rejuvenate ",
|
|
btn: { text: "Visit Our Clinic", link: "/contact" },
|
|
align: "start",
|
|
},
|
|
{
|
|
id: 1,
|
|
bg: "/assets/images/banner/desktopBanner/banner-1.webp",
|
|
alt: "Pain relief and rehab therapy.",
|
|
upper: "Power Your Body &",
|
|
title: "Endure",
|
|
desc: "• Strength • Balance • Power ",
|
|
btn: { text: "Book Your Session", link: "tel:+647-722-3434" },
|
|
align: "center",
|
|
},
|
|
{
|
|
id: 2,
|
|
bg: "/assets/images/banner/desktopBanner/banner-3.webp",
|
|
alt: "Rapharehab physiotherapy session.",
|
|
upper: "Restore Your Balance &",
|
|
title: "Heal",
|
|
desc: " • Relax • Release • Restore ",
|
|
btn: { text: "Schedule Your Massage", link: "/contact" },
|
|
align: "start",
|
|
},
|
|
{
|
|
id: 3,
|
|
bg: "/assets/images/banner/desktopBanner/banner-2.webp",
|
|
alt: "Rehab and recovery care.",
|
|
upper: " Strengthen Your Core &",
|
|
title: "Perform",
|
|
desc: " • Energy • Control • Performance ",
|
|
btn: { text: "Explore Our Programs", link: "/etobicoke-treatment-service" },
|
|
align: "space-evenly",
|
|
},
|
|
]
|
|
|
|
return (
|
|
<section className="banner-style-two p_relative">
|
|
<div
|
|
ref={sliderRef}
|
|
className="keen-slider"
|
|
style={{ opacity: sliderLoaded ? 1 : 0, transition: "opacity 0.5s ease" }}
|
|
>
|
|
{slides.map((s) => (
|
|
<div
|
|
key={s.id}
|
|
className="keen-slider__slide"
|
|
alt={s.alt}
|
|
style={{
|
|
minHeight: "600px",
|
|
width: "100%",
|
|
backgroundImage: `url(${s.bg})`,
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center",
|
|
display: "flex",
|
|
alignItems: "end",
|
|
justifyContent:
|
|
s.align === "start"
|
|
? "flex-start"
|
|
: s.align === "end"
|
|
? "flex-end"
|
|
: s.align === "center"
|
|
? "center"
|
|
: s.align === "space-between"
|
|
? "space-between"
|
|
: s.align === "space-evenly"
|
|
? "space-evenly"
|
|
: "center",
|
|
padding: "0 150px 40px",
|
|
}}
|
|
>
|
|
<div
|
|
className="content-box custom-content-box"
|
|
style={{
|
|
color: "#bc0000",
|
|
textAlign:
|
|
s.align === "space-between" || s.align === "space-evenly"
|
|
? "center"
|
|
: s.align,
|
|
padding: "450px 0px 220px 0px",
|
|
}}
|
|
>
|
|
<span className="upper-text mb-2" style={{ fontSize: "22px" }}>{s.upper}</span>
|
|
{/* ✅ Use <h1> for first slide only */}
|
|
{s.id === 0 ? (
|
|
<h1
|
|
style={{
|
|
color: "#bc0000",
|
|
fontWeight: "bold",
|
|
fontSize: "64px",
|
|
}}
|
|
>
|
|
{s.title}
|
|
</h1>
|
|
) : (
|
|
<h3
|
|
style={{
|
|
color: "#bc0000",
|
|
fontWeight: "bold",
|
|
fontSize: "64px",
|
|
}}
|
|
>
|
|
{s.title}
|
|
</h3>
|
|
)}
|
|
<p style={{ color: "#fff" }}>{s.desc}</p>
|
|
<div className="btn-box mt-3">
|
|
<Link href={s.btn.link} className="theme-btn btn-one" aria-label="Banner Button">
|
|
<span>{s.btn.text}</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|