From 5bcdbc402d161cc9fc7dcf592e683ac1eaae2aad Mon Sep 17 00:00:00 2001 From: akash Date: Sun, 14 Sep 2025 18:21:34 +0530 Subject: [PATCH] Mobile menu corrections updated --- components/layout/MobileMenu.js | 57 +++--- components/sections/home2/Banner.js | 283 +++++++++++----------------- public/assets/css/style.css | 30 ++- 3 files changed, 172 insertions(+), 198 deletions(-) diff --git a/components/layout/MobileMenu.js b/components/layout/MobileMenu.js index 0ba99bd..b1a105d 100644 --- a/components/layout/MobileMenu.js +++ b/components/layout/MobileMenu.js @@ -32,7 +32,7 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar return ( <>
- {/* Backdrop for closing */} + {/* Backdrop */}
{/* Close button */}
@@ -41,20 +41,35 @@ export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar {/* Mobile Navigation */} diff --git a/components/sections/home2/Banner.js b/components/sections/home2/Banner.js index 72ddb4b..ac8118b 100644 --- a/components/sections/home2/Banner.js +++ b/components/sections/home2/Banner.js @@ -1,200 +1,137 @@ '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 (
- { - setActiveIndex(swiper.realIndex || 0); - }} - onSlideChange={handleSlideChange} - > - {slides.map((slide, index) => ( - - - {activeIndex === index && ( - -
-
-
- - {slide.upperText} - - -

- {slide.title} {slide.titleSpan} {slide.titleEnd} -

- -

- {slide.subtitle} -

- -

- {slide.description} -

- -
- - {slide.buttonText} - -
-
-
- - )} - - - ))} + + +
+
+ {/*
*/} +
+
+ + The Journey to Better Health Begins here +

Your Path to Recovery Starts Today

+

Expert Physiotherapy in Mississauga for You.

+

+ Our skilled team provides physiotherapy in Mississauga to help you regain mobility and live pain-free. Compassionate care designed around your needs. +

+
+ + Book Your Appointment + +
+
+
+ + {/* Repeat the above structure for each slide-item as needed */} + +
+ {/*
*/} +
+
+ + Compassionate Care, Delivered with Expertise +

Healing Touch, Fresh Inner Strength

+

Expert Hand Massage Techniques for Relief

+

+ Experience targeted hand massage therapy to ease tension and promote healing, delivered by experienced therapists focused on your comfort and well-being. +

+
+ + Schedule a Massage + +
+
+
+ + + {/* Repeat the above structure for each slide-item as needed */} + +
+
+
+ + Your Path to Complete Wellness Starts Here +

Local Physio Experts Near You

+

Physiotherapy Etobicoke & Rehab Care.

+

+ Offering comprehensive physiotherapy and rehabilitation services in Etobicoke to support your wellness journey and help restore your strength efficiently. +

+
+ + Explore Our Service + +
+
+
+ + + +
+ {/*
*/} +
+
+ + Healing Hands, Caring Hearts in Action +

Wellness by theWaterfront

+

Waterfront Physio and Rehab Services.

+

+ Find peace and true healing with our specialized waterfront physio and rehab programs carefully designed for lasting wellness and a better quality of life. +

+
+ + Visit Our Location + +
+
+
+ +
); -}; +}; \ No newline at end of file diff --git a/public/assets/css/style.css b/public/assets/css/style.css index df42de6..ce8c00a 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -1065,11 +1065,32 @@ } } - @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; +} + @@ -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; } }