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

Mobile menu corrections updated

Browse Source
This commit is contained in:
akash 2025-09-14 18:21:34 +05:30
parent dab9ecaeb7
commit 5bcdbc402d
3 changed files with 172 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
components/layout/MobileMenu.js
View File

@ -32,7 +32,7 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
return ( return (
<> <>
<div className="mobile-menu"> <div className="mobile-menu">
{/* Backdrop for closing */} {/* Backdrop */}
<div className="menu-backdrop" onClick={handleMobileMenu} /> <div className="menu-backdrop" onClick={handleMobileMenu} />
{/* Close button */} {/* Close button */}
<div className="close-btn" onClick={handleMobileMenu}> <div className="close-btn" onClick={handleMobileMenu}>
@ -41,20 +41,35 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
{/* Mobile Navigation */} {/* Mobile Navigation */}
<nav className="menu-box"> <nav className="menu-box">
<div className="nav-logo">
<Link href="/" onClick={handleMobileMenu}> {/* Header row (Logo left, Social icons right) */}
<img src="/assets/images/logo-2.png" alt="Logo" /> <div className="nav-header">
</Link> <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> </div>
{/* Menu Items */}
<div className="menu-outer"> <div className="menu-outer">
<div <div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
className="collapse navbar-collapse show clearfix"
id="navbarSupportedContent"
>
<ul className="navigation clearfix"> <ul className="navigation clearfix">
{/* Home */}
<li> <li>
<Link href="/" onClick={handleMobileMenu}>Home</Link> <Link href="/" onClick={handleMobileMenu}>Home</Link>
</li> </li>
@ -156,7 +171,7 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar
</div> </div>
</li> </li>
{/* Contact */} {/* Other Links */}
<li><Link href="/contact" onClick={handleMobileMenu}>Contact</Link></li> <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="/why-rapha-physiotherapy-etobicoke" onClick={handleMobileMenu}>Why Us</Link></li>
<li><Link href="/faq-physiotherapy-etobicoke" onClick={handleMobileMenu}>Faq</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> <h4>Contact Info</h4>
<ul> <ul>
<li>6 – 4335 Bloor Street West Etobicoke, M9C5S2</li> <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>
<li><Link href="mailto:bloor@rapharehab.ca" onClick={handleMobileMenu}>bloor@rapharehab.ca</Link></li> <Link href="tel:+647-722-3434, +416-622-2873" onClick={handleMobileMenu}>
</ul> +647-722-3434, +416-622-2873
</div> </Link>
</li>
{/* Social Links */} <li>
<div className="social-links"> <Link href="mailto:bloor@rapharehab.ca" onClick={handleMobileMenu}>
<ul className="clearfix"> bloor@rapharehab.ca
<li><Link href="https://www.instagram.com/elrapharehab/" target="_blank" rel="noopener noreferrer"><span className="fab fa-instagram"></span></Link></li> </Link>
<li><Link href="https://www.facebook.com/ELRaphaRehabCenter/" target="_blank" rel="noopener noreferrer"><span className="fab fa-facebook-square"></span></Link></li> </li>
</ul> </ul>
</div> </div>
</nav> </nav>

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

@ -1,200 +1,137 @@
'use client' 'use client'
import React, { useState, useEffect } 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, AnimatePresence } 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: 8000, delay: 5000,
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,
}, },
};
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() { 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 ( 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={handleSlideChange} <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> */}
{slides.map((slide, index) => ( <div className="auto-container">
<SwiperSlide key={slide.id}> <div className="content-box custom-content-box mobile-style">
<AnimatePresence mode="wait">
{activeIndex === index && ( <span className="upper-text">The Journey to Better Health Begins here</span>
<motion.div <h2>Your Path to <span>Recovery</span> Starts Today</h2>
key={`slide-${index}`} <p>Expert Physiotherapy in Mississauga for You.</p>
className="slide-item" <p>
variants={variants[slide.variant]} Our skilled team provides physiotherapy in Mississauga to help you regain mobility and live pain-free. Compassionate care designed around your needs.
initial="initial" </p>
animate="animate" <div className="btn-box mt-3">
exit="exit" <Link href="tel:+647-722-3434" className="theme-btn btn-one">
transition={transition} <span>Book Your Appointment</span>
> </Link>
<div </div>
className="bg-layer" </div>
style={{ backgroundImage: `url(${slide.bgImage})` }} </div>
></div> </SwiperSlide>
<div className="auto-container"> {/* Repeat the above structure for each slide-item as needed */}
<div <SwiperSlide className="slide-item">
className={`content-box custom-content-box ${slide.contentStyle || ''}`} <div
style={slide.contentStyle === 'with-background' ? { className="bg-layer"
background: 'rgba(255, 255, 255, 0.4)', // transparent white style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-2.webp)' }}
backdropFilter: 'blur(8px)', // glassmorphism ></div>
WebkitBackdropFilter: 'blur(8px)', {/* <figure className="image-layer"><img src="/assets/images/home/banner/banner-img-2.webp" alt="" /></figure> */}
borderRadius: '20px', <div className="auto-container">
padding: '30px' <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>
<span className="upper-text"> <h2>Healing Touch, <span>Fresh</span> Inner Strength</h2>
{slide.upperText} <p>Expert Hand Massage Techniques for Relief</p>
</span> <p>
Experience targeted hand massage therapy to ease tension and promote healing, delivered by experienced therapists focused on your comfort and well-being.
<h2> </p>
{slide.title} <span>{slide.titleSpan}</span> {slide.titleEnd} <div className="btn-box mt-3">
</h2> <Link href="/contact" className="theme-btn btn-one">
<span>Schedule a Massage</span>
<p> </Link>
{slide.subtitle} </div>
</p> </div>
</div>
<p> </SwiperSlide>
{slide.description}
</p> {/* Repeat the above structure for each slide-item as needed */}
<SwiperSlide className="slide-item">
<div className="btn-box mt-3"> <div
<Link href={slide.buttonLink} className="theme-btn btn-one"> className="bg-layer"
<span>{slide.buttonText}</span> style={{ backgroundImage: 'url(/assets/images/home/banner/home-banner-3.webp)' }}
</Link> ></div>
</div> <div className="auto-container">
</div> <div className="content-box custom-content-box" style={{ background: 'white', borderRadius: '15%', opacity: 0.8 }}>
</div>
</motion.div> <span className="upper-text">Your Path to Complete Wellness Starts Here</span>
)} <h2>Local Physio <span>Experts </span> Near You</h2>
</AnimatePresence> <p>Physiotherapy Etobicoke & Rehab Care.</p>
</SwiperSlide> <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> </Swiper>
</section> </section>
); );
}; };

30
public/assets/css/style.css
View File

@ -1065,11 +1065,32 @@
} }
} }
@media (max-width: 426px) { /* @media (max-width: 426px) {
.top-inner .info-list li:nth-child(2) { .top-inner .info-list li:nth-child(2) {
display: none !important; 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;
}
@ -1910,6 +1931,7 @@
.mobile-menu .contact-info { .mobile-menu .contact-info {
position: relative; position: relative;
padding: 120px 30px 20px 30px; padding: 120px 30px 20px 30px;
padding-bottom: 120px !important;
} }
.mobile-menu .contact-info h4 { .mobile-menu .contact-info h4 {
@ -2628,8 +2650,8 @@
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.header-style-two .header-lower .outer-container { .header-style-two .header-lower .outer-container {
padding-left: 50px; padding-left: 20px;
padding-right: 50px; padding-right: 20px;
} }
} }