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

performance issues fixed

Browse Source
This commit is contained in:
Alaguraj0361 2025-10-29 15:34:32 +05:30
parent 53ed84b117
commit f61b493641
35 changed files with 392 additions and 497 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -12,6 +12,7 @@
# next.js # next.js
/.next/ /.next/
/out/ /out/
/.zip/
# production # production
/build /build

12
app/about-us/AboutClient.js
View File

@ -4,7 +4,10 @@ import Link from "next/link"
import { useState } from 'react' import { useState } from 'react'
import { teamMembers } from "@/utils/constant.utils"; import { teamMembers } from "@/utils/constant.utils";
import CounterUp from "@/components/elements/CounterUp"; import CounterUp from "@/components/elements/CounterUp";
import Image from "next/image"; import Image from 'next-image-export-optimizer';;
import exportableLoader from 'next-image-export-optimizer';
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 'swiper/css'; import 'swiper/css';
@ -81,6 +84,7 @@ export default function Home() {
<div className="shape-1 rotate-me" style={{ backgroundImage: 'url(/assets/images/shape/shape-8.webp)' }}></div> <div className="shape-1 rotate-me" style={{ backgroundImage: 'url(/assets/images/shape/shape-8.webp)' }}></div>
<div className="shape-2"> <div className="shape-2">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-33.png" src="/assets/images/shape/shape-33.png"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -91,6 +95,7 @@ export default function Home() {
{/* <div className="shape-3" style={{ backgroundImage: 'url(/assets/images/shape/shape-7.png)' }}></div> */} {/* <div className="shape-3" style={{ backgroundImage: 'url(/assets/images/shape/shape-7.png)' }}></div> */}
<div className="shape-4"> <div className="shape-4">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-34.png" src="/assets/images/shape/shape-34.png"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -100,6 +105,7 @@ export default function Home() {
<div className="shape-5"> <div className="shape-5">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-11.webp" src="/assets/images/shape/shape-11.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -139,6 +145,7 @@ export default function Home() {
<section className="process-section sec-pad pt-0"> <section className="process-section sec-pad pt-0">
<div className="pattern-layer"> <div className="pattern-layer">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-19.png" src="/assets/images/shape/shape-19.png"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -160,6 +167,7 @@ export default function Home() {
<div className="inner-container"> <div className="inner-container">
<div className="arrow-shape"> <div className="arrow-shape">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-18.webp" src="/assets/images/shape/shape-18.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -299,6 +307,7 @@ export default function Home() {
<section className="chooseus-section"> <section className="chooseus-section">
<div className="bg-layer"> <div className="bg-layer">
<Image <Image
loader={exportableLoader}
src="/assets/images/about-us/section4/why-choose-right.webp" src="/assets/images/about-us/section4/why-choose-right.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -309,6 +318,7 @@ export default function Home() {
<div className="pattern-layer"> <div className="pattern-layer">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-12.webp" src="/assets/images/shape/shape-12.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill

6
app/caregivers/CaregiversPage.js
View File

@ -2,7 +2,10 @@
import Layout from "@/components/layout/Layout"; import Layout from "@/components/layout/Layout";
import Link from "next/link"; import Link from "next/link";
import { useState } from 'react'; import { useState } from 'react';
import Image from "next/image"; import Image from 'next-image-export-optimizer';
import exportableLoader from 'next-image-export-optimizer';
import { teamMembers } from "@/utils/constant.utils"; import { teamMembers } from "@/utils/constant.utils";
export default function Home() { export default function Home() {
@ -30,6 +33,7 @@ export default function Home() {
<section className="feature-section pt_90 pb_90"> <section className="feature-section pt_90 pb_90">
<div className="shape hide-element"> <div className="shape hide-element">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-6.png" src="/assets/images/shape/shape-6.png"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill

13
app/layout.js
View File

@ -17,15 +17,22 @@ export default function RootLayout({ children }) {
const siteUrl = "https://rapharehab.ca"; const siteUrl = "https://rapharehab.ca";
const logoUrl = `${siteUrl}/assets/images/logo.png`; const logoUrl = `${siteUrl}/assets/images/logo.png`;
const ogImage = `${siteUrl}/assets/images/logo.jpg`; const ogImage = `${siteUrl}/assets/images/logo.jpg`;
return ( return (
<html lang="en" className={`${poppins.variable}`}> <html lang="en" className={`${poppins.variable}`}>
<head> <head>
{/* ✅ Preload critical font */}
<link
rel="preload"
href="/fonts/poppins.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
{/* ✅ Canonical Tag */} {/* ✅ Canonical Tag */}
<link rel="canonical" href="https://rapharehab.ca/" /> <link rel="canonical" href="https://rapharehab.ca/" />

10
app/ourapproach-physiotherapy-etobicoke/page.js
View File

@ -1,6 +1,9 @@
import Link from "next/link" import Link from "next/link"
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
import Image from "next/image"; import Image from 'next-image-export-optimizer';
import exportableLoader from 'next-image-export-optimizer';
export const metadata = { export const metadata = {
title: "Our Healing Approach – Rapharehab’s Proven Methods", title: "Our Healing Approach – Rapharehab’s Proven Methods",
@ -18,6 +21,7 @@ export default function About() {
<div className="pattern-1 rotate-me" style={{ backgroundImage: "url(/assets/images/shape/shape-8.webp)" }}></div> <div className="pattern-1 rotate-me" style={{ backgroundImage: "url(/assets/images/shape/shape-8.webp)" }}></div>
<div className="pattern-2 rotate-me absolute w-[140px] h-[140px]"> <div className="pattern-2 rotate-me absolute w-[140px] h-[140px]">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-9.webp" src="/assets/images/shape/shape-9.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -36,6 +40,7 @@ export default function About() {
<div className="image-shape"> <div className="image-shape">
<div className="shape-1 rotate-me"> <div className="shape-1 rotate-me">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-8.webp" src="/assets/images/shape/shape-8.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -45,6 +50,7 @@ export default function About() {
<div className="shape-2"> <div className="shape-2">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-33.png" src="/assets/images/shape/shape-33.png"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -63,6 +69,7 @@ export default function About() {
<div className="shape-4"> <div className="shape-4">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-34.png" src="/assets/images/shape/shape-34.png"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -72,6 +79,7 @@ export default function About() {
<div className="shape-5"> <div className="shape-5">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-11.webp" src="/assets/images/shape/shape-11.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill

9
app/shortcodes/ShortcodesClient.js
View File

@ -5,7 +5,10 @@ import { motion } from "framer-motion"
import TestimonialSlider1 from '@/components/slider/TestimonialSlider1' import TestimonialSlider1 from '@/components/slider/TestimonialSlider1'
import PortfolioFilter1 from "@/components/elements/Shortcodes" import PortfolioFilter1 from "@/components/elements/Shortcodes"
import CounterUp from "@/components/elements/CounterUp" import CounterUp from "@/components/elements/CounterUp"
import Image from "next/image" import Image from 'next-image-export-optimizer';
import exportableLoader from 'next-image-export-optimizer';
import { teamMembers } from "@/utils/constant.utils"; import { teamMembers } from "@/utils/constant.utils";
export default function Home() { export default function Home() {
@ -349,6 +352,7 @@ export default function Home() {
<section className="process-section pt_90 pb_90"> <section className="process-section pt_90 pb_90">
<div className="pattern-layer"> <div className="pattern-layer">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-19.png" src="/assets/images/shape/shape-19.png"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -364,6 +368,7 @@ export default function Home() {
<div className="inner-container"> <div className="inner-container">
<div className="arrow-shape"> <div className="arrow-shape">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-18.webp" src="/assets/images/shape/shape-18.webp"
alt=" Physiotherapy at Rapharehab" alt=" Physiotherapy at Rapharehab"
fill fill
@ -486,6 +491,7 @@ export default function Home() {
<section className="testimonial-section pt_90 pb_90 bg-color-1" id="testimonial"> <section className="testimonial-section pt_90 pb_90 bg-color-1" id="testimonial">
<div className="bg-layer"> <div className="bg-layer">
<Image <Image
loader={exportableLoader}
src="/assets/images/shortcodes/testimonials-carousel.webp" src="/assets/images/shortcodes/testimonials-carousel.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -495,6 +501,7 @@ export default function Home() {
<div className="pattern-layer"> <div className="pattern-layer">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-21.webp" src="/assets/images/shape/shape-21.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill

9
app/what-to-expect/page.js
View File

@ -1,6 +1,9 @@
import Link from "next/link" import Link from "next/link"
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
import Image from "next/image"; import Image from 'next-image-export-optimizer';
import exportableLoader from 'next-image-export-optimizer';
export const metadata = { export const metadata = {
title: "What to expect at Physiotherapy Etobicoke - Rapha Physiotherapy etobicoke", title: "What to expect at Physiotherapy Etobicoke - Rapha Physiotherapy etobicoke",
@ -24,6 +27,7 @@ export default function About() {
<div className="image-shape"> <div className="image-shape">
<div className="shape-1 rotate-me"> <div className="shape-1 rotate-me">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-8.webp" src="/assets/images/shape/shape-8.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -33,6 +37,7 @@ export default function About() {
<div className="shape-2"> <div className="shape-2">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-33.png" src="/assets/images/shape/shape-33.png"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -51,6 +56,7 @@ export default function About() {
<div className="shape-4"> <div className="shape-4">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-34.png" src="/assets/images/shape/shape-34.png"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -60,6 +66,7 @@ export default function About() {
<div className="shape-5"> <div className="shape-5">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-11.webp" src="/assets/images/shape/shape-11.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill

11
app/why-rapha-physiotherapy-etobicoke/WhyusClient.js
View File

@ -1,7 +1,11 @@
'use client'; 'use client';
import Layout from "@/components/layout/Layout"; import Layout from "@/components/layout/Layout";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from 'next-image-export-optimizer';
import exportableLoader from 'next-image-export-optimizer';
export default function Team() { export default function Team() {
const teamMembers = [ const teamMembers = [
// { name: 'Musculoskeletal Physiotherapy', role: 'Medical Assistant', image: 'assets/images/team/team-1.jpg' }, // { name: 'Musculoskeletal Physiotherapy', role: 'Medical Assistant', image: 'assets/images/team/team-1.jpg' },
@ -24,6 +28,7 @@ export default function Team() {
<div className="pattern-layer"> <div className="pattern-layer">
<div className="pattern-1"> <div className="pattern-1">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-13.webp" src="/assets/images/shape/shape-13.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -33,6 +38,7 @@ export default function Team() {
<div className="pattern-2"> <div className="pattern-2">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-14.webp" src="/assets/images/shape/shape-14.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -82,6 +88,7 @@ export default function Team() {
<section className="testimonial-style-two pb_90 p_relative"> <section className="testimonial-style-two pb_90 p_relative">
<div className="pattern-layer"> <div className="pattern-layer">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-19.png" src="/assets/images/shape/shape-19.png"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -163,6 +170,7 @@ export default function Team() {
<section className="video-section p_relative"> <section className="video-section p_relative">
<div className="bg-layer parallax-bg" data-parallax='{"y": 100}'> <div className="bg-layer parallax-bg" data-parallax='{"y": 100}'>
<Image <Image
loader={exportableLoader}
src="/assets/images/why-us/bg.webp" src="/assets/images/why-us/bg.webp"
alt=" Physiotherapy at Rapharehab " alt=" Physiotherapy at Rapharehab "
fill fill
@ -175,6 +183,7 @@ export default function Team() {
<div className="inner-box"> <div className="inner-box">
<div className="shape new-arrow"> <div className="shape new-arrow">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-17.png" src="/assets/images/shape/shape-17.png"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill

24
components/elements/DataBg.js
View File

@ -1,16 +1,16 @@
import { useEffect } from 'react' import { useEffect } from "react";
export default function DataBg() { export default function DataBg() {
useEffect(() => { useEffect(() => {
const elements = document.querySelectorAll('[data-bg]') const elements = document.querySelectorAll("[data-bg]");
elements.forEach((element) => { requestAnimationFrame(() => {
element.style.backgroundImage = `url(${element.getAttribute('data-bg')})` elements.forEach((element) => {
}) const bg = element.getAttribute("data-bg");
}, []) if (bg) element.style.backgroundImage = `url(${bg})`;
return ( });
<> });
}, []);
</> return null;
) }
}

2
components/elements/Preloader.js
View File

@ -16,7 +16,7 @@ export default function Preloader() {
if (!loading) return null; if (!loading) return null;
return ( return (
<div className="loader-wrap"> <div className="loader-wrap d-flex justify-content-center align-items-center" style={{height:"100vh"}}>
<div className="preloader"> <div className="preloader">
<img src="/assets/images/logo.png" alt="rapharehab" className="preloader-icon" /> <img src="/assets/images/logo.png" alt="rapharehab" className="preloader-icon" />
{/* <div className="preloader-close">Preloader Close</div> */} {/* <div className="preloader-close">Preloader Close</div> */}

15
components/layout/Layout.js
View File

@ -9,13 +9,12 @@ const WOW = dynamic(() => import('wowjs/dist/wow'));
import BackToTop from '../elements/BackToTop'; import BackToTop from '../elements/BackToTop';
import DataBg from "../elements/DataBg"; import DataBg from "../elements/DataBg";
import Breadcrumb from './Breadcrumb'; import Breadcrumb from './Breadcrumb';
import Sidebar from "./Sidebar"; // import Sidebar from "./Sidebar";
import Footer1 from './footer/Footer1'; import Footer1 from './footer/Footer1';
import Footer2 from './footer/Footer2'; import Footer2 from './footer/Footer2';
import Header1 from "./header/Header1"; import Header1 from "./header/Header1";
import Header2 from './header/Header2'; import Header2 from "./header/Header2";
import Header3 from "./header/Header3";
import Header4 from "./header/Header4";
import ContactFloat from "../ContactFloat"; import ContactFloat from "../ContactFloat";
import SocialFloat from "../SocialFloat"; import SocialFloat from "../SocialFloat";
@ -52,10 +51,8 @@ export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumb
<div className={`boxed_wrapper ltr ${wrapperCls ? wrapperCls : ""}`} id="#top"> <div className={`boxed_wrapper ltr ${wrapperCls ? wrapperCls : ""}`} id="#top">
{(headerStyle === 1 || !headerStyle) && <Header1 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} handlePopup={handlePopup} isSidebar={isSidebar} handleSidebar={handleSidebar} />} {(headerStyle === 1 || !headerStyle) && <Header1 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} handlePopup={handlePopup} isSidebar={isSidebar} handleSidebar={handleSidebar} />}
{headerStyle === 2 && <Header2 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} handlePopup={handlePopup} isSidebar={isSidebar} handleSidebar={handleSidebar} />} {headerStyle === 2 && <Header2 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} handlePopup={handlePopup} isSidebar={isSidebar} handleSidebar={handleSidebar} />}
{headerStyle === 3 && <Header3 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} handlePopup={handlePopup} isSidebar={isSidebar} handleSidebar={handleSidebar} />}
{headerStyle === 4 && <Header4 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} handlePopup={handlePopup} isSidebar={isSidebar} handleSidebar={handleSidebar} />}
<Sidebar isSidebar={isSidebar} handleSidebar={handleSidebar} /> {/* <Sidebar isSidebar={isSidebar} handleSidebar={handleSidebar} /> */}
{breadcrumbTitle && ( {breadcrumbTitle && (
<Breadcrumb breadcrumbTitle={breadcrumbTitle} bannerImage={bannerImage} /> <Breadcrumb breadcrumbTitle={breadcrumbTitle} bannerImage={bannerImage} />
@ -66,8 +63,8 @@ export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumb
{(footerStyle === 1 || !footerStyle) && <Footer1 />} {(footerStyle === 1 || !footerStyle) && <Footer1 />}
{footerStyle === 2 && <Footer2 />} {footerStyle === 2 && <Footer2 />}
</div> </div>
{/* <ContactFloat /> */} {/* <ContactFloat /> */}
{/* <SocialFloat/> */} {/* <SocialFloat/> */}
<BackToTop scroll={scroll} /> <BackToTop scroll={scroll} />
</> </>
); );

85
components/layout/MobileMenu2.js
View File

@ -1,85 +0,0 @@
'use client'
import Link from "next/link"
import { useState } from "react"
export default function MobileMenu({ isSidebar, handleMobileMenu, handleSidebar }) {
const [isActive, setIsActive] = useState({
status: false,
key: "",
})
const handleToggle = (key) => {
if (isActive.key === key) {
setIsActive({
status: false,
})
} else {
setIsActive({
status: true,
key,
})
}
}
return (
<>
<div className="mobile-menu">
<div className="menu-backdrop" onClick={handleMobileMenu} />
<div className="close-btn" onClick={handleMobileMenu}>
<i className="fas fa-times"></i>
</div>
<nav className="menu-box">
<div className="nav-logo">
<Link href="/">
<img src="/assets/images/logo.png" alt="rapharehab" />
</Link>
</div>
{/* menu-outer */}
<div className="menu-outer">
<div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
<ul className="navigation clearfix">
<li className={isActive.key === 1 ? "dropdown current" : "dropdown"}>
<Link href="/" onClick={handleMobileMenu}>Home</Link>
<ul style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
<li><Link href="/"onClick={handleMobileMenu}>Home Page One</Link></li>
<li><Link href="/index-2"onClick={handleMobileMenu}>Home Page Two</Link></li>
<li><Link href="/index-3"onClick={handleMobileMenu}>Home Page Three</Link></li>
<li><Link href="/index-onepage"onClick={handleMobileMenu}>OnePage Home</Link></li>
</ul>
<div className={isActive.key === 1 ? "dropdown-btn open" : "dropdown-btn"} onClick={() => handleToggle(1)}>
<span className="fa fa-angle-right" />
</div>
</li>
<li><Link href="#about"onClick={handleMobileMenu}>About</Link></li>
<li><Link href="#service"onClick={handleMobileMenu}>Service</Link></li>
<li><Link href="#team"onClick={handleMobileMenu}>Team</Link></li>
<li><Link href="#news"onClick={handleMobileMenu}>News</Link></li>
<li><Link href="#footer"onClick={handleMobileMenu}>Footer</Link></li>
</ul>
</div>
</div>
{/* menu-outer end */}
<div className="contact-info">
<h4>Contact Info</h4>
<ul>
<li>Chicago 12, Melbourne City, USA</li>
<li><Link href="tel:+8801682648101">+88 01682648101</Link></li>
<li><Link href="mailto:info@example.com">info@example.com</Link></li>
</ul>
</div>
{/* Social Links */}
<div className="social-links">
<ul className="clearfix">
<li><Link href="/"><span className="fab fa-twitter"></span></Link></li>
<li><Link href="/"><span className="fab fa-facebook-square"></span></Link></li>
<li><Link href="/"><span className="fab fa-pinterest-p"></span></Link></li>
<li><Link href="/"><span className="fab fa-instagram"></span></Link></li>
<li><Link href="/"><span className="fab fa-youtube"></span></Link></li>
</ul>
</div>
</nav>
</div>{/* End Mobile Menu */}
<div className="nav-overlay" style={{ display: `${isSidebar ? "block" : "none"}` }} onClick={handleSidebar} />
</>
);
}

33
components/layout/OnepageMenu.js
View File

@ -1,33 +0,0 @@
import Link from "next/link"
// import { useRouter } from "next/router"
export default function Menu() {
// const router = useRouter()
return (
<>
{/* <ul className="sub-menu">
<Link className={router.pathname == "/" ? "active" : ""}>Home Default</Link>
<Link className={router.pathname == "/index-2" ? "active" : ""}>Home Interior</Link>
</ul> */}
<ul className="navigation clearfix">
<li className=" dropdown"><Link href="/">Home</Link>
<ul>
<li><Link href="/">Home Page One</Link></li>
<li><Link href="/index-2">Home Page Two</Link></li>
<li><Link href="/index-3">Home Page Three</Link></li>
<li><Link href="/onepage">OnePage Home</Link></li>
</ul>
</li>
<li><Link href="#about">About</Link></li>
<li><Link href="#service">Service</Link></li>
<li><Link href="#team">Team</Link></li>
<li><Link href="#news">News</Link></li>
<li><Link href="#footer">Footer</Link></li>
</ul>
</>
)
}

59
components/layout/Sidebar.js
View File

@ -1,59 +0,0 @@
import Link from "next/link"
export default function Sidebar({ isSidebar, handleSidebar }) {
return (
<>
<div className={`xs-sidebar-group info-group info-sidebar ${isSidebar ? "isActive" : ""}`} >
<div className="xs-overlay xs-bg-black"></div>
<div className="xs-overlay xs-overlay-2 xs-bg-black" onClick={handleSidebar}></div>
<div className="xs-overlay xs-overlay-3 xs-bg-black" onClick={handleSidebar}></div>
<div className="xs-overlay xs-overlay-4 xs-bg-black" onClick={handleSidebar}></div>
<div className="xs-overlay xs-overlay-5 xs-bg-black" onClick={handleSidebar}></div>
<div className="xs-sidebar-widget">
<div className="sidebar-widget-container">
<div className="widget-heading">
<a className="close-side-widget" onClick={handleSidebar}><i className="fa fa-times"></i></a>
</div>
<div className="sidebar-textwidget">
<div className="sidebar-info-contents">
<div className="content-inner">
<div className="logo">
<Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link>
</div>
<div className="content-box">
<h4>About Us</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi</p>
<p>Research oriented solutions for Data Science and Machine Learning business needs.</p>
<Link href="#" className="theme-btn btn-one"><span>About Us</span></Link>
</div>
<div className="contact-info">
<h4>Contact Info</h4>
<ul>
<li>Chicago 12, Melborne City, USA</li>
<li><Link href="tel:+8801682648101">+88 01682648101</Link></li>
<li><Link href="mailto:info@example.com">info@example.com</Link></li>
</ul>
</div>
<ul className="social-box">
<li><Link href="#"><i className="icon-4"></i></Link></li>
<li><Link href="#"><i className="icon-5"></i></Link></li>
<li><Link href="#"><i className="icon-6"></i></Link></li>
<li><Link href="#"><i className="icon-7"></i></Link></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}

6
components/layout/header/Header1.js
View File

@ -70,8 +70,8 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSide
<div className="outer-container"> <div className="outer-container">
<div className="outer-box new"> <div className="outer-box new">
<div className="logo-box"> <div className="logo-box">
<figure className="logo"> <figure className="logo" >
<Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link> <Link href="/"><img src="/assets/images/logo.png" alt="rapharehab"/></Link>
</figure> </figure>
</div> </div>
@ -97,7 +97,7 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSide
<div className="outer-box"> <div className="outer-box">
<div className="logo-box"> <div className="logo-box">
<figure className="logo"> <figure className="logo">
<Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link> <Link href="/"><img src="/assets/images/logo.png" alt="rapharehab"/></Link>
</figure> </figure>
</div> </div>

4
components/layout/header/Header2.js
View File

@ -63,7 +63,7 @@ export default function Header2({
<div className="outer-box"> <div className="outer-box">
<div className="logo-box"> <div className="logo-box">
<figure className="logo"> <figure className="logo">
<Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link> <Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link>
</figure> </figure>
</div> </div>
@ -89,7 +89,7 @@ export default function Header2({
<div className="auto-container"> <div className="auto-container">
<div className="outer-box"> <div className="outer-box">
<div className="logo-box"> <div className="logo-box">
<figure className="logo"> <figure className="logo" >
<Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link> <Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link>
</figure> </figure>
</div> </div>

98
components/layout/header/Header3.js
View File

@ -1,98 +0,0 @@
'use client'
import Link from "next/link";
import Menu from "../Menu"
import MobileMenu from "../MobileMenu"
export default function Header3({ scroll, isMobileMenu, handleMobileMenu, isSidebar, handlePopup, handleSidebar }) {
return (
<>
<header className={`main-header header-style-two ${scroll ? "fixed-header" : ""}`}>
{/* Header Top */}
<div className="header-top">
<div className="auto-container">
<div className="top-inner">
<ul className="info-list clearfix">
<li><i className="icon-1"></i>Mon - Fri 8:00 - 18:00 / Sunday 8:00 - 14:00</li>
<li><i className="icon-2"></i>Email: <Link href="tel:01989526503">0198-9526503</Link></li>
<li><img src="assets/images/icons/icon-1.png" alt="location" /> 47 Bakery Street, London, UK</li>
</ul>
<ul className="social-links clearfix">
<li><Link href="/"><i className="icon-4"></i></Link></li>
<li><Link href="/"><i className="icon-5"></i></Link></li>
<li><Link href="/"><i className="icon-6"></i></Link></li>
<li><Link href="/"><i className="icon-7"></i></Link></li>
</ul>
</div>
</div>
</div>
{/* Header Upper */}
<div className="header-lower">
<div className="outer-container">
<div className="auto-container">
<div className="outer-box">
<div className="logo-box">
<figure className="logo"><Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link></figure>
</div>
<div className="menu-area">
{/* Mobile Navigation Toggler */}
<div className="mobile-nav-toggler" onClick={handleMobileMenu}>
<i className="icon-bar"></i>
<i className="icon-bar"></i>
<i className="icon-bar"></i>
</div>
{/* Main Menu */}
<nav className="main-menu navbar-expand-md navbar-light clearfix">
<div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
<Menu/>
</div>
</nav>
</div>
{/* Menu Right Content */}
<ul className="menu-right-content">
<li className="search-box-outer search-toggler" onClick={handlePopup}>
<i className="icon-27"></i>
</li>
<li className="nav-btn nav-toggler navSidebar-button clearfix" onClick={handleSidebar}>
<i className="icon-28"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
{/*End Header Upper*/}
{/* Sticky Header */}
<div className="sticky-header">
<div className="auto-container">
<div className="outer-box">
<div className="logo-box">
<figure className="logo"><Link href="/"><img src="/assets/images/logo.png" alt="rapharehab" /></Link></figure>
</div>
<nav className="main-menu navbar-expand-md navbar-light clearfix">
<div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
<Menu/>
</div>
</nav>
<ul className="menu-right-content">
<li className="search-box-outer search-toggler" onClick={handlePopup}>
<i className="icon-27"></i>
</li>
<li className="nav-btn nav-toggler navSidebar-button clearfix" onClick={handleSidebar}>
<i className="icon-28"></i>
</li>
</ul>
</div>
</div>
</div>{/* End Sticky Menu */}
{/* Mobile Menu */}
<MobileMenu handleMobileMenu={handleMobileMenu} />
</header>
</>
)
}

92
components/layout/header/Header4.js
View File

@ -1,92 +0,0 @@
'use client'
import Link from "next/link";
import OnepageMenu from "../OnepageMenu"
import MobileMenu from "../MobileMenu"
export default function Header4({ scroll, isMobileMenu, handleMobileMenu, isSidebar, handlePopup, handleSidebar }) {
return (
<>
<header className={`main-header ${scroll ? "fixed-header" : ""}`}>
{/* Header Top */}
<div className="header-top">
<div className="auto-container">
<div className="top-inner">
<ul className="info-list clearfix">
<li><i className="icon-1"></i>Mon - Fri 8:00 - 18:00 / Sunday 8:00 - 14:00</li>
<li><i className="icon-2"></i>Email: <Link href="tel:01989526503">0198-9526503</Link></li>
<li><img src="assets/images/icons/icon-1.png" alt="location"/> 47 Bakery Street, London, UK</li>
</ul>
<ul className="social-links clearfix">
<li><Link href="/"><i className="icon-4"></i></Link></li>
<li><Link href="/"><i className="icon-5"></i></Link></li>
<li><Link href="/"><i className="icon-6"></i></Link></li>
<li><Link href="/"><i className="icon-7"></i></Link></li>
</ul>
</div>
</div>
</div>
{/* Header Upper */}
<div className="header-lower">
<div className="outer-container">
<div className="auto-container">
<div className="outer-box">
<div className="logo-box">
<figure className="logo"><Link href="/"><img src="/assets/images/logo.png" alt="rapharehab"/></Link></figure>
</div>
<div className="menu-area">
{/* Mobile Navigation Toggler */}
<div className="mobile-nav-toggler" onClick={handleMobileMenu}>
<i className="icon-bar"></i>
<i className="icon-bar"></i>
<i className="icon-bar"></i>
</div>
{/* Main Menu */}
<nav className="main-menu navbar-expand-md navbar-light clearfix">
<div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
<OnepageMenu/>
</div>
</nav>
</div>
{/* Menu Right Content */}
<ul className="menu-right-content">
<div className="btn-box">
<Link href="/" className="theme-btn btn-one"><span>Request A Pickup</span></Link>
</div>
</ul>
</div>
</div>
</div>
</div>
{/*End Header Upper*/}
{/* Sticky Header */}
<div className="sticky-header">
<div className="auto-container">
<div className="outer-box">
<div className="logo-box">
<figure className="logo"><Link href="/"><img src="/assets/images/logo.png" alt="rapharehab"/></Link></figure>
</div>
<div className="menu-area">
<nav className="main-menu clearfix">
<div className="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
<OnepageMenu/>
</div>
</nav>
</div>
<div className="btn-box">
<Link href="/" className="theme-btn btn-one"><span>Request A Pickup</span></Link>
</div>
</div>
</div>
</div>{/* End Sticky Menu */}
{/* Mobile Menu */}
<MobileMenu handleMobileMenu={handleMobileMenu} />
</header>
</>
)
}

159
components/sections/home/AboutSection.js
View File

@ -1,108 +1,169 @@
import Image from "next/image";
import Link from "next/link";
import React from "react"; import React from "react";
import Link from "next/link";
import Image from "next-image-export-optimizer";
import exportableLoader from "next-image-export-optimizer";
export default function AboutSection() { export default function AboutSection() {
return ( return (
<section className="about-style-two pt_90 pb_90 relative overflow-hidden"> <section
{/* Pattern Layers with fixed sizes */} className="about-style-two pt_90 pb_90 relative overflow-hidden"
style={{ minHeight: "600px" }}
>
{/* ===== Pattern Layers ===== */}
<div className="pattern-layer"> <div className="pattern-layer">
<div className="pattern-1 rotate-me absolute w-[120px] h-[120px]"> <div
className="pattern-1 rotate-me absolute"
style={{ width: "120px", height: "120px" }}
>
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-8.webp" src="/assets/images/shape/shape-8.webp"
alt="Physiotherapy at Rapharehab" alt="Decorative Shape"
fill width={120}
height={120}
sizes="120px" sizes="120px"
style={{ objectFit: "contain" }} loading="lazy"
priority={false} decoding="async"
style={{ objectFit: "contain", display: "block" }}
/> />
</div> </div>
<div className="pattern-2 rotate-me absolute w-[140px] h-[140px]"> <div
className="pattern-2 rotate-me absolute"
style={{ width: "60px", height: "60px" }}
>
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-9.webp" src="/assets/images/shape/shape-9.webp"
alt="Physiotherapy at Rapharehab" alt="Decorative Shape"
fill width={60}
sizes="140px" height={60}
style={{ objectFit: "contain" }} sizes="60px"
loading="lazy"
decoding="async"
style={{ objectFit: "contain", display: "block" }}
/> />
</div> </div>
<div className="pattern-3 absolute w-[150px] h-[150px]"> <div
className="pattern-3 absolute"
style={{ width: "150px", height: "150px" }}
>
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-11.webp" src="/assets/images/shape/shape-11.webp"
alt="Physiotherapy at Rapharehab" alt="Decorative Shape"
fill width={150}
height={150}
sizes="150px" sizes="150px"
style={{ objectFit: "contain" }} loading="lazy"
decoding="async"
style={{ objectFit: "contain", display: "block" }}
/> />
</div> </div>
</div> </div>
{/* ===== Content Area ===== */}
<div className="auto-container"> <div className="auto-container">
<div className="row clearfix"> <div className="row clearfix">
{/* Image Column */} {/* Left: Image Column */}
<div className="col-lg-6 col-md-12 col-sm-12 image-column"> <div className="col-lg-6 col-md-12 col-sm-12 image-column">
<div className="image_block_one relative"> <div className="image_block_one relative">
<div className="image-box relative"> <div className="image-box relative">
{/* Background Shape */} {/* Background Shape */}
<div className="image-shape absolute inset-0 -z-10 w-[600px] h-[500px]"> <div
className="image-shape absolute inset-0 -z-10"
style={{
width: "100%",
maxWidth: "600px",
aspectRatio: "6 / 5",
overflow: "hidden",
}}
>
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-26.webp" src="/assets/images/shape/shape-26.webp"
alt="Background shape" alt="Background Shape"
fill width={600}
sizes="50vw" height={500}
style={{ objectFit: "contain" }} sizes="(max-width: 768px) 90vw, 50vw"
loading="lazy"
decoding="async"
style={{ objectFit: "contain", display: "block" }}
/> />
</div> </div>
{/* Main Hero Image (LCP) */} {/* Main Hero Image */}
<figure className="image-2 relative min-h-[420px]"> <figure
className="image-2 relative about-main-image"
style={{
width: "100%",
maxWidth: "600px",
aspectRatio: "3 / 3",
overflow: "hidden",
}}
>
<Image <Image
loader={exportableLoader}
src="/assets/images/home/welcome/home-welcome.webp" src="/assets/images/home/welcome/home-welcome.webp"
alt="Physiotherapy" alt="Physiotherapy at Rapha Rehab"
width={600} width={600}
height={420} height={420}
priority priority
sizes="(max-width: 768px) 100vw, 50vw" fetchPriority="high"
sizes="(max-width: 768px) 100vw, 382px"
placeholder="blur" placeholder="blur"
blurDataURL="/assets/images/home/welcome/home-welcome-blur.webp" blurDataURL="/assets/images/home/welcome/home-welcome-blur.webp"
style={{ style={{
borderRadius: "8px", borderRadius: "8px",
width: "100%", width: "100%",
height: "auto", height: "auto",
display: "block",
}} }}
/> />
</figure> </figure>
{/* Top Icon */} {/* Top Icon */}
<div className="icon-one absolute top-0 left-0 w-[40px] h-[40px]"> <div
className="icon-one absolute top-0 left-0"
style={{ width: "80px", height: "80px" }}
>
<Image <Image
loader={exportableLoader}
src="/assets/images/home/welcome/top-icon.webp" src="/assets/images/home/welcome/top-icon.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy Icon"
fill width={80}
sizes="40px" height={80}
style={{ objectFit: "contain" }} sizes="80px"
loading="lazy" loading="lazy"
decoding="async"
style={{ objectFit: "contain", display: "block" }}
/> />
</div> </div>
{/* Bottom Icon */} {/* Bottom Icon */}
<div className="icon-two absolute bottom-0 right-0 w-[40px] h-[40px]"> <div
className="icon-two absolute bottom-0 right-0"
style={{ width: "80px", height: "80px" }}
>
<Image <Image
loader={exportableLoader}
src="/assets/images/home/welcome/bottom-icon.webp" src="/assets/images/home/welcome/bottom-icon.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy Icon"
fill width={80}
sizes="40px" height={80}
style={{ objectFit: "contain" }} sizes="80px"
loading="lazy" loading="lazy"
decoding="async"
style={{ objectFit: "contain", display: "block" }}
/> />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/* Content Column */} {/* Right: Text Column */}
<div className="col-lg-6 col-md-12 col-sm-12 content-column"> <div className="col-lg-6 col-md-12 col-sm-12 content-column">
<div className="content_block_one"> <div className="content_block_one">
<div className="content-box ml_30"> <div className="content-box ml_30">
@ -113,24 +174,20 @@ export default function AboutSection() {
<div className="text-box mb_40"> <div className="text-box mb_40">
<p> <p>
At Rapha Rehab, we specialize in evidence-based At Rapha Rehab, we specialize in evidence-based physiotherapy tailored to
physiotherapy tailored to your needs. Our expert care helps your needs. Our expert care helps you recover, relieve pain, and regain
you recover, relieve pain, and regain strength for a better strength for a better quality of life.
quality of life.
</p> </p>
<ul className="list-style-one clearfix"> <ul className="list-style-one clearfix">
<li>Chronic pain (back, neck, joints).</li> <li>Chronic pain (back, neck, joints)</li>
<li>Sports injuries (sprains, strains, post-surgery rehab).</li> <li>Sports injuries (sprains, strains, post-surgery rehab)</li>
<li>Work-related injuries (WCB claims supported).</li> <li>Work-related injuries (WCB claims supported)</li>
<li>Movement disorders (stroke rehab, mobility issues).</li> <li>Movement disorders (stroke rehab, mobility issues)</li>
</ul> </ul>
</div> </div>
<div className="btn-box"> <div className="btn-box">
<Link <Link href="/etobicoke-treatment-service" className="theme-btn btn-one">
href="/etobicoke-treatment-service"
className="theme-btn btn-one"
>
<span>Explore Our Service</span> <span>Explore Our Service</span>
</Link> </Link>
</div> </div>

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

@ -1,6 +1,9 @@
import React from 'react'; import React from 'react';
import Link from "next/link"; import Link from "next/link";
import Image from 'next/image'; import Image from 'next-image-export-optimizer';
import exportableLoader from 'next-image-export-optimizer';
import { areaOfInjuryData } from '@/utils/AreaOfInjery.utils'; import { areaOfInjuryData } from '@/utils/AreaOfInjery.utils';
export default function AreaOfInjury() { export default function AreaOfInjury() {
@ -20,6 +23,7 @@ export default function AreaOfInjury() {
<div className="pattern-layer"> <div className="pattern-layer">
<div className="pattern-1"> <div className="pattern-1">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-13.webp" src="/assets/images/shape/shape-13.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -29,6 +33,7 @@ export default function AreaOfInjury() {
<div className="pattern-2"> <div className="pattern-2">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-14.webp" src="/assets/images/shape/shape-14.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -44,10 +49,10 @@ export default function AreaOfInjury() {
{/* <div className="shape-3 float-bob-x" style={{ backgroundImage: 'url(assets/images/shape/shape-16.png)' }}></div> */} {/* <div className="shape-3 float-bob-x" style={{ backgroundImage: 'url(assets/images/shape/shape-16.png)' }}></div> */}
</div> </div>
<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">Start Your Treatment Today! <br /> Visit our healthcare team in Etobicoke.</span> <span className="sub-title-1 new-color2">Start Your Treatment Today! <br /> Visit our healthcare team in Etobicoke.</span>
<h2 className="tex-color-1">Area Of Injury</h2> <h2 className="tex-color-1">Area Of Injury</h2>
</div> </div>
<div className="row clearfix"> <div className="row clearfix">
{areaOfInjuryData.slice(0, 8).map((area, index) => ( {areaOfInjuryData.slice(0, 8).map((area, index) => (
<div key={index} className="col-lg-3 col-md-6 col-6 team-block d-flex"> <div key={index} className="col-lg-3 col-md-6 col-6 team-block d-flex">

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

@ -1,7 +1,10 @@
'use client' 'use client'
import Layout from "@/components/layout/Layout" import Layout from "@/components/layout/Layout"
import Link from "next/link" import Link from "next/link"
import Image from "next/image" import Image from 'next-image-export-optimizer';
import exportableLoader from 'next-image-export-optimizer';
import { useState } from 'react' import { useState } from 'react'
export default function FaqSection() { export default function FaqSection() {
const [isActive, setIsActive] = useState({ const [isActive, setIsActive] = useState({
@ -36,6 +39,7 @@ export default function FaqSection() {
<div className="image-shape"> <div className="image-shape">
<div className="shape-1 rotate-me"> <div className="shape-1 rotate-me">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-8.webp" src="/assets/images/shape/shape-8.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -45,6 +49,7 @@ export default function FaqSection() {
<div className="shape-2"> <div className="shape-2">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-33.png" src="/assets/images/shape/shape-33.png"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -63,6 +68,7 @@ export default function FaqSection() {
<div className="shape-4"> <div className="shape-4">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-34.png" src="/assets/images/shape/shape-34.png"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -72,6 +78,7 @@ export default function FaqSection() {
<div className="shape-5"> <div className="shape-5">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-11.webp" src="/assets/images/shape/shape-11.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill

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

@ -1,6 +1,8 @@
import { servicesList } from "@/utils/Services.utils" import { servicesList } from "@/utils/Services.utils"
import Link from "next/link" import Link from "next/link"
import Image from "next/image" import Image from 'next-image-export-optimizer';
import exportableLoader from 'next-image-export-optimizer';
export default function MobileServices() { export default function MobileServices() {
@ -10,6 +12,7 @@ export default function MobileServices() {
<div className="pattern-layer"> <div className="pattern-layer">
<div className="pattern-1 "> <div className="pattern-1 ">
<Image <Image
loader={exportableLoader}
src="/assets/images/home/our-services/top-right.webp" src="/assets/images/home/our-services/top-right.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill

39
components/sections/home/ProcessSection.js
View File

@ -1,17 +1,21 @@
import React from 'react'; import React from 'react';
import Image from 'next/image'; import Image from 'next-image-export-optimizer';
import exportableLoader from 'next-image-export-optimizer';
export default function ProcessSection() { export default function ProcessSection() {
return ( return (
<section className="process-section sec-pad bg-color-1"> <section className="process-section sec-pad bg-color-1">
<div className="pattern-layer"> <div className="pattern-layer">
<Image <Image
src="/assets/images/shape/shape-19.png" loader={exportableLoader}
alt="Physiotherapy at Rapharehab" src="/assets/images/shape/shape-19.png"
fill alt="Physiotherapy at Rapharehab"
style={{ objectFit: "cover" }} fill
/> style={{ objectFit: "cover" }}
</div> />
</div>
{/* <div className="shape"> {/* <div className="shape">
<div className="shape-1 float-bob-x" style={{ backgroundImage: 'url(/assets/images/shape/shape-20.png)' }}></div> <div className="shape-1 float-bob-x" style={{ backgroundImage: 'url(/assets/images/shape/shape-20.png)' }}></div>
<div className="shape-2 float-bob-y" style={{ backgroundImage: 'url(/assets/images/shape/shape-15.png)' }}></div> <div className="shape-2 float-bob-y" style={{ backgroundImage: 'url(/assets/images/shape/shape-15.png)' }}></div>
@ -23,14 +27,15 @@ export default function ProcessSection() {
<h2>How Physiotherapy Helps You Heal <br />and Stay Strong</h2> <h2>How Physiotherapy Helps You Heal <br />and Stay Strong</h2>
</div> </div>
<div className="inner-container"> <div className="inner-container">
<div className="arrow-shape"> <div className="arrow-shape">
<Image <Image
src="/assets/images/shape/shape-18.webp" loader={exportableLoader}
alt="Physiotherapy at Rapharehab" src="/assets/images/shape/shape-18.webp"
fill alt="Physiotherapy at Rapharehab"
style={{ objectFit: "cover" }} fill
/> style={{ objectFit: "cover" }}
</div> />
</div>
{/* Step 01 */} {/* Step 01 */}
<div className="processing-block-one wow fadeInLeft animated" data-wow-delay="00ms" data-wow-duration="1500ms"> <div className="processing-block-one wow fadeInLeft animated" data-wow-delay="00ms" data-wow-duration="1500ms">
<div className="inner-box"> <div className="inner-box">

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

@ -1,7 +1,10 @@
import { servicesList } from '@/utils/Services.utils'; import { servicesList } from '@/utils/Services.utils';
import Link from 'next/link'; import Link from 'next/link';
import React from 'react'; import React from 'react';
import Image from 'next/image'; import Image from 'next-image-export-optimizer';
import exportableLoader from 'next-image-export-optimizer';
export default function ServicesSection() { export default function ServicesSection() {
return ( return (
@ -9,6 +12,7 @@ export default function ServicesSection() {
<div className="pattern-layer"> <div className="pattern-layer">
<div className="pattern-1 "> <div className="pattern-1 ">
<Image <Image
loader={exportableLoader}
src="/assets/images/home/our-services/top-right.webp" src="/assets/images/home/our-services/top-right.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -18,6 +22,7 @@ export default function ServicesSection() {
<div className="pattern-2 "> <div className="pattern-2 ">
<Image <Image
loader={exportableLoader}
src="/assets/images/home/our-services/bottom-left.webp" src="/assets/images/home/our-services/bottom-left.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill

7
components/sections/home/WhyChooseusSection.js
View File

@ -1,12 +1,16 @@
import Link from 'next/link'; import Link from 'next/link';
import React from 'react'; import React from 'react';
import Image from 'next/image'; import Image from 'next-image-export-optimizer';
import exportableLoader from 'next-image-export-optimizer';
export default function WhyChooseUsSection() { export default function WhyChooseUsSection() {
return ( return (
<section className="chooseus-section"> <section className="chooseus-section">
<div className="bg-layer"> <div className="bg-layer">
<Image <Image
loader={exportableLoader}
src="/assets/images/home/why-choose/why-choose-right.webp" src="/assets/images/home/why-choose/why-choose-right.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -17,6 +21,7 @@ export default function WhyChooseUsSection() {
<div className="pattern-layer"> <div className="pattern-layer">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-12.webp" src="/assets/images/shape/shape-12.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill

7
components/sections/home1/Testimonial.js
View File

@ -1,6 +1,9 @@
import TestimonialSlider1 from '@/components/slider/TestimonialSlider1' import TestimonialSlider1 from '@/components/slider/TestimonialSlider1'
import Link from "next/link"; import Link from "next/link";
import Image from 'next/image'; import Image from 'next-image-export-optimizer';
import exportableLoader from 'next-image-export-optimizer';
export default function Testimonial() { export default function Testimonial() {
return ( return (
@ -8,6 +11,7 @@ export default function Testimonial() {
<section className="testimonial-section sec-pad bg-color-1"> <section className="testimonial-section sec-pad bg-color-1">
<div className="bg-layer"> <div className="bg-layer">
<Image <Image
loader={exportableLoader}
src="/assets/images/home/testimonial-left.webp" src="/assets/images/home/testimonial-left.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill
@ -17,6 +21,7 @@ export default function Testimonial() {
<div className="pattern-layer"> <div className="pattern-layer">
<Image <Image
loader={exportableLoader}
src="/assets/images/shape/shape-21.webp" src="/assets/images/shape/shape-21.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill

6
components/sections/home1/Video.js
View File

@ -1,7 +1,10 @@
'use client' 'use client'
import React, { useState } from 'react'; import React, { useState } from 'react';
import Link from "next/link"; import Link from "next/link";
import Image from 'next/image'; import Image from 'next-image-export-optimizer';
import exportableLoader from 'next-image-export-optimizer';
import ModalVideo from 'react-modal-video' import ModalVideo from 'react-modal-video'
export default function Video() { export default function Video() {
const [isOpen, setOpen] = useState(false) const [isOpen, setOpen] = useState(false)
@ -10,6 +13,7 @@ export default function Video() {
<section className="video-section p_relative"> <section className="video-section p_relative">
<div className="bg-layer parallax-bg" data-parallax='{"y": 100}'> <div className="bg-layer parallax-bg" data-parallax='{"y": 100}'>
<Image <Image
loader={exportableLoader}
src="/assets/images/home/make-an-appointment/make-an-appopintment-bg.webp" src="/assets/images/home/make-an-appointment/make-an-appopintment-bg.webp"
alt="Physiotherapy at Rapharehab" alt="Physiotherapy at Rapharehab"
fill fill

35
next.config.js
View File

@ -1,16 +1,35 @@
// /** @type {import('next').NextConfig} */
// const nextConfig = {
// output: "export", // keep: needed for next export
// trailingSlash: true,
// images: {
// unoptimized: true, // ✅ needed
// },
// swcMinify: true, // explicit SWC minify
// // experimental: {
// // forceSwcTransforms: true, // use SWC only
// // modern: true, // ✅ enable modern build (ES6+ for modern browsers)
// // polyfillsOptimization: true // ✅ remove unnecessary polyfills
// // },
// };
// module.exports = nextConfig;
// next.config.js
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {
output: "export", // keep: needed for next export output: 'export', // static HTML export
trailingSlash: true, trailingSlash: true,
images: { images: {
unoptimized: true, // ✅ needed // loader: 'custom', // required by next-image-export-optimizer
unoptimized: true, // prevents runtime optimization
},
transpilePackages: ['next-image-export-optimizer'],
env: {
nextImageExportOptimizer_imageFolderPath: 'public/assets/images',
nextImageExportOptimizer_exportFolderPath: 'out',
nextImageExportOptimizer_quality: '65',
nextImageExportOptimizer_storePicturesInWEBP: 'true',
}, },
swcMinify: true, // explicit SWC minify
// experimental: {
// forceSwcTransforms: true, // use SWC only
// modern: true, // ✅ enable modern build (ES6+ for modern browsers)
// polyfillsOptimization: true // ✅ remove unnecessary polyfills
// },
}; };
module.exports = nextConfig; module.exports = nextConfig;

34
package-lock.json generated
View File

@ -18,6 +18,7 @@
"isotope-layout": "^3.0.6", "isotope-layout": "^3.0.6",
"keen-slider": "^6.8.6", "keen-slider": "^6.8.6",
"next": "^14.0.4-canary.36", "next": "^14.0.4-canary.36",
"next-image-export-optimizer": "^1.19.0",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-google-recaptcha": "^3.1.0", "react-google-recaptcha": "^3.1.0",
@ -3948,6 +3949,26 @@
} }
} }
}, },
"node_modules/next-image-export-optimizer": {
"version": "1.19.0",
"resolved": "https://registry.npmjs.org/next-image-export-optimizer/-/next-image-export-optimizer-1.19.0.tgz",
"integrity": "sha512-DHecMn1FE3xPyABXf9CUelJwzFrHgGt2RQIQLIB9kN1wUfm+6lEjZD4beku8T9NXG2heWHku3AU+ohZV+tGYFw==",
"license": "MIT",
"dependencies": {
"sharp": "^0.33.1",
"typescript": "^5.2.2"
},
"bin": {
"next-image-export-optimizer": "dist/optimizeImages.js"
},
"engines": {
"node": ">=16.0.0"
},
"peerDependencies": {
"next": "^14.2.18 || ^15.0.3",
"react": "^18.2.0 || ^19.0.0-0"
}
},
"node_modules/nice-try": { "node_modules/nice-try": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@ -5240,6 +5261,19 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/typescript": {
"version": "5.9.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"license": "Apache-2.0",
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=14.17"
}
},
"node_modules/uint8array-extras": { "node_modules/uint8array-extras": {
"version": "1.5.0", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/uint8array-extras/-/uint8array-extras-1.5.0.tgz", "resolved": "https://registry.npmjs.org/uint8array-extras/-/uint8array-extras-1.5.0.tgz",

3
package.json
View File

@ -23,6 +23,7 @@
"isotope-layout": "^3.0.6", "isotope-layout": "^3.0.6",
"keen-slider": "^6.8.6", "keen-slider": "^6.8.6",
"next": "^14.0.4-canary.36", "next": "^14.0.4-canary.36",
"next-image-export-optimizer": "^1.19.0",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-google-recaptcha": "^3.1.0", "react-google-recaptcha": "^3.1.0",
@ -40,4 +41,4 @@
"last 2 Safari versions", "last 2 Safari versions",
"last 2 Edge versions" "last 2 Edge versions"
] ]
} }

21
public/assets/css/module-css/about.css
View File

@ -772,24 +772,35 @@
} }
@media only screen and (max-width: 376px) and (min-width: 200px) { @media only screen and (max-width: 376px) and (min-width: 200px) {
.image_block_three .image-box .icon-box{ .image_block_three .image-box .icon-box {
display: none !important; display: none !important;
} }
.image_block_two .image-box .icon-box{ .image_block_two .image-box .icon-box {
display: none !important; display: none !important;
} }
.image_block_three .image-box{ .image_block_three .image-box {
margin-right: 0px !important; margin-right: 0px !important;
} }
}
.about-main-image {
min-height: 420px
}
@media (max-width:768px) {
.about-main-image {
min-height: 300px
}
} }

53
public/assets/css/module-css/banner.css
View File

@ -778,4 +778,55 @@
padding: 15px 20px !important; padding: 15px 20px !important;
} }
} */ } */
.new .logo-box {
width:8%
}
.logo-box{
width:10%
}
@media (max-width:1500px) {
.logo-box{
width:9%
}
.new .logo-box {
width:8%
}
}
@media (max-width:1450px) {
.logo-box{
width:8%
}
.new .logo-box {
width:8%
}
}
@media (max-width:992px) {
.logo-box{
width:15%
}
.new .logo-box {
width:12%
}
}
@media (max-width:500px) {
.logo-box{
width:30%
}
.new .logo-box {
width:30%
}
}

BIN
public/assets/images/icons/call.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 744 B

After

Width:  |  Height:  |  Size: 500 B

BIN
public/assets/images/icons/mail.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 652 B

After

Width:  |  Height:  |  Size: 358 B

BIN
public/assets/images/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 45 KiB