Mobile menu corrections updated
This commit is contained in:
akash
parent
dab9ecaeb7
commit
5bcdbc402d
@ -32,7 +32,7 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
|
||||
return (
|
||||
<>
|
||||
<div className="mobile-menu">
|
||||
{/* Backdrop for closing */}
|
||||
{/* Backdrop */}
|
||||
<div className="menu-backdrop" onClick={handleMobileMenu} />
|
||||
{/* Close button */}
|
||||
<div className="close-btn" onClick={handleMobileMenu}>
|
||||
@ -41,20 +41,35 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
<nav className="menu-box">
|
||||
|
||||
{/* Header row (Logo left, Social icons right) */}
|
||||
<div className="nav-header">
|
||||
<div className="nav-logo">
|
||||
<Link href="/" onClick={handleMobileMenu}>
|
||||
<img src="/assets/images/logo-2.png" alt="Logo" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="nav-social">
|
||||
<ul className="clearfix">
|
||||
<li>
|
||||
<Link href="https://www.instagram.com/elrapharehab/" target="_blank" rel="noopener noreferrer">
|
||||
<span className="fab fa-instagram"></span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="https://www.facebook.com/ELRaphaRehabCenter/" target="_blank" rel="noopener noreferrer">
|
||||
<span className="fab fa-facebook-square"></span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Menu Items */}
|
||||
<div className="menu-outer">
|
||||
<div
|
||||
className="collapse navbar-collapse show clearfix"
|
||||
id="navbarSupportedContent"
|
||||
>
|
||||
<div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
|
||||
<ul className="navigation clearfix">
|
||||
|
||||
{/* Home */}
|
||||
<li>
|
||||
<Link href="/" onClick={handleMobileMenu}>Home</Link>
|
||||
</li>
|
||||
@ -156,7 +171,7 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{/* Contact */}
|
||||
{/* Other Links */}
|
||||
<li><Link href="/contact" onClick={handleMobileMenu}>Contact</Link></li>
|
||||
<li><Link href="/why-rapha-physiotherapy-etobicoke" onClick={handleMobileMenu}>Why Us</Link></li>
|
||||
<li><Link href="/faq-physiotherapy-etobicoke" onClick={handleMobileMenu}>Faq</Link></li>
|
||||
@ -171,16 +186,16 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
|
||||
<h4>Contact Info</h4>
|
||||
<ul>
|
||||
<li>6 – 4335 Bloor Street West Etobicoke, M9C5S2</li>
|
||||
<li><Link href="tel:+647-722-3434, +416-622-2873" onClick={handleMobileMenu}>+647-722-3434, +416-622-2873</Link></li>
|
||||
<li><Link href="mailto:bloor@rapharehab.ca" onClick={handleMobileMenu}>bloor@rapharehab.ca</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="social-links">
|
||||
<ul className="clearfix">
|
||||
<li><Link href="https://www.instagram.com/elrapharehab/" target="_blank" rel="noopener noreferrer"><span className="fab fa-instagram"></span></Link></li>
|
||||
<li><Link href="https://www.facebook.com/ELRaphaRehabCenter/" target="_blank" rel="noopener noreferrer"><span className="fab fa-facebook-square"></span></Link></li>
|
||||
<li>
|
||||
<Link href="tel:+647-722-3434, +416-622-2873" onClick={handleMobileMenu}>
|
||||
+647-722-3434, +416-622-2873
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="mailto:bloor@rapharehab.ca" onClick={handleMobileMenu}>
|
||||
bloor@rapharehab.ca
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -1,199 +1,136 @@
|
||||
'use client'
|
||||
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";
|
||||
import React from 'react';
|
||||
import Link from "next/link"
|
||||
import { Autoplay, Navigation, Pagination } from "swiper/modules"
|
||||
import { Swiper, SwiperSlide } from "swiper/react"
|
||||
|
||||
const swiperOptions = {
|
||||
modules: [Autoplay, Pagination, Navigation],
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 0,
|
||||
autoplay: {
|
||||
delay: 8000,
|
||||
delay: 5000,
|
||||
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 (
|
||||
<section className="banner-style-two p_relative">
|
||||
<Swiper
|
||||
{...swiperOptions}
|
||||
className="banner-carousel owl-theme owl-carousel owl-nav-none owl-dots-none"
|
||||
onSwiper={(swiper) => {
|
||||
setActiveIndex(swiper.realIndex || 0);
|
||||
}}
|
||||
onSlideChange={handleSlideChange}
|
||||
>
|
||||
{slides.map((slide, index) => (
|
||||
<SwiperSlide key={slide.id}>
|
||||
<AnimatePresence mode="wait">
|
||||
{activeIndex === index && (
|
||||
<motion.div
|
||||
key={`slide-${index}`}
|
||||
className="slide-item"
|
||||
variants={variants[slide.variant]}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
transition={transition}
|
||||
>
|
||||
<Swiper {...swiperOptions} className="banner-carousel owl-theme owl-carousel owl-nav-none owl-dots-none">
|
||||
<SwiperSlide className="slide-item">
|
||||
<div
|
||||
className="bg-layer"
|
||||
style={{ backgroundImage: `url(${slide.bgImage})` }}
|
||||
style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-1.webp)' }}
|
||||
></div>
|
||||
<div className="bg-layer" style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-1.webp)', backgroundPosition: '75% center' }}></div>
|
||||
{/* <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 ${slide.contentStyle || ''}`}
|
||||
style={slide.contentStyle === 'with-background' ? {
|
||||
background: 'rgba(255, 255, 255, 0.4)', // transparent white
|
||||
backdropFilter: 'blur(8px)', // glassmorphism
|
||||
WebkitBackdropFilter: 'blur(8px)',
|
||||
borderRadius: '20px',
|
||||
padding: '30px'
|
||||
} : {}}
|
||||
>
|
||||
<span className="upper-text">
|
||||
{slide.upperText}
|
||||
</span>
|
||||
|
||||
<h2>
|
||||
{slide.title} <span>{slide.titleSpan}</span> {slide.titleEnd}
|
||||
</h2>
|
||||
<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>
|
||||
{slide.subtitle}
|
||||
Our skilled team provides physiotherapy in Mississauga to help you regain mobility and live pain-free. Compassionate care designed around your needs.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
{slide.description}
|
||||
</p>
|
||||
|
||||
<div className="btn-box mt-3">
|
||||
<Link href={slide.buttonLink} className="theme-btn btn-one">
|
||||
<span>{slide.buttonText}</span>
|
||||
<Link href="tel:+647-722-3434" className="theme-btn btn-one">
|
||||
<span>Book Your Appointment</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</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>
|
||||
|
||||
{/* 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-3.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">Your Path to Complete Wellness Starts Here</span>
|
||||
<h2>Local Physio <span>Experts </span> Near You</h2>
|
||||
<p>Physiotherapy Etobicoke & Rehab Care.</p>
|
||||
<p>
|
||||
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>
|
||||
</SwiperSlide>
|
||||
|
||||
<SwiperSlide className="slide-item">
|
||||
<div
|
||||
className="bg-layer"
|
||||
style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-4.webp)' }}
|
||||
></div>
|
||||
{/* <figure className="image-layer"><img src="/assets/images/home/banner/banner-img-4.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">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>
|
||||
</SwiperSlide>
|
||||
|
||||
</Swiper>
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -1065,12 +1065,33 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 426px) {
|
||||
/* @media (max-width: 426px) {
|
||||
.top-inner .info-list li:nth-child(2) {
|
||||
display: none !important;
|
||||
}
|
||||
} */
|
||||
|
||||
.mobile-menu .nav-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between; /* even spacing */
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.mobile-menu .nav-social ul {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mobile-menu .nav-social ul li a {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* .header-top .top-inner .social-links li a:hover {
|
||||
@ -1910,6 +1931,7 @@
|
||||
.mobile-menu .contact-info {
|
||||
position: relative;
|
||||
padding: 120px 30px 20px 30px;
|
||||
padding-bottom: 120px !important;
|
||||
}
|
||||
|
||||
.mobile-menu .contact-info h4 {
|
||||
@ -2628,8 +2650,8 @@
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.header-style-two .header-lower .outer-container {
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user