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

Services updated

Browse Source
This commit is contained in:
akash 2025-09-14 19:38:23 +05:30
parent 5bcdbc402d
commit be237f26b6
5 changed files with 195 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/sections/home/AreaOfInjury.js
View File

@ -16,8 +16,8 @@ export default function AreaOfInjury() {
return ( return (
<section className="team-section sec-pad centred bg-color-1"> <section className="team-section sec-pad centred bg-color-1">
<div className="pattern-layer"> <div className="pattern-layer">
<div className="pattern-1" style={{ backgroundImage: 'url(assets/images/shape/shape-13.webp)' }}></div> <div className="pattern-1" style={{ backgroundImage: 'url(/assets/images/shape/shape-13.webp)' }}></div>
<div className="pattern-2" style={{ backgroundImage: 'url(assets/images/shape/shape-14.webp)' }}></div> <div className="pattern-2" style={{ backgroundImage: 'url(/assets/images/shape/shape-14.webp)' }}></div>
</div> </div>
<div className="shape"> <div className="shape">
{/* <div className="shape-1 float-bob-y" style={{ backgroundImage: 'url(assets/images/shape/shape-15.png)' }}></div> */} {/* <div className="shape-1 float-bob-y" style={{ backgroundImage: 'url(assets/images/shape/shape-15.png)' }}></div> */}
@ -26,9 +26,9 @@ export default function AreaOfInjury() {
</div> </div>
<div className="auto-container"> <div className="auto-container">
<div className="sec-title-1 mb_50"> <div className="sec-title-1 mb_50">
<span className="sub-title-1">Area Of Injury</span> <span className="sub-title-1">Start Your Treatment Today! <br /> Visit our healthcare team in Etobicoke.</span>
<h3 className='h3-white' style={{ fontWeight: "bold" }}> <h3 className='h3-white' style={{ fontWeight: "bold" }}>
Start Your Treatment Today! <br /> Visit our healthcare team in Etobicoke. Area Of Injury
</h3> </h3>
</div> </div>
<div className="row clearfix"> <div className="row clearfix">

9
components/sections/home/MobileServicesSection.js
View File

@ -5,7 +5,14 @@ import Link from "next/link"
export default function MobileServices() { export default function MobileServices() {
return ( return (
<> <>
<section className="feature-section sec-pad bg-color-1"> <section className="feature-section sec-pad bg-color-1" style={{
backgroundImage: "url(/assets/images/home/our-services/our-services-bg.webp)",
backgroundSize: "cover",
backgroundPosition: "left",
backgroundRepeat: "no-repeat",
backgroundAttachment: "scroll",
}}
>
<div className="auto-container"> <div className="auto-container">
<div className="sec-title mb_50 centred"> <div className="sec-title mb_50 centred">
<span className="sub-title-1 new-color2">Our Services</span> <span className="sub-title-1 new-color2">Our Services</span>

10
components/sections/home/ServicesSection.js
View File

@ -5,8 +5,14 @@ import React from 'react';
export default function ServicesSection() { export default function ServicesSection() {
return ( return (
// <section className="service-section bg-layer sec-pad bg-color-1" style={{ backgroundImage: 'url(/assets/images/home/our-services/our-services-bg.webp)' }}> // <section className="service-section bg-layer sec-pad bg-color-1" style={{ backgroundImage: 'url(/assets/images/home/our-services/our-services-bg.webp)' }}>
<section className="service-section sec-pad bg-color-1" > <section className="team-section sec-pad centred bg-color-1" style={{
<div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/home/our-services/our-services-bg.webp)' }}></div> backgroundImage: "url(/assets/images/home/our-services/our-services-bg.webp)",
backgroundSize: "cover",
backgroundPosition: "left",
backgroundRepeat: "no-repeat",
backgroundAttachment: "scroll",
}}
>
<div className="auto-container"> <div className="auto-container">
<div className="sec-title-1 mb_50 centred"> <div className="sec-title-1 mb_50 centred">

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

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

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

@ -2368,13 +2368,13 @@
.pattern-1 { .pattern-1 {
opacity: 0.3; opacity: 0.8;
} }
.pattern-2 { .pattern-2 {
opacity: 0.3; opacity: 0.8;
} }