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

Counter updated Brand section updated

Browse Source
This commit is contained in:
akash 2025-09-01 21:02:50 +05:30
parent b77ee297c9
commit bae744323b
23 changed files with 277 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

177
app/about-us/page.js
View File

@ -3,6 +3,41 @@ import Layout from "@/components/layout/Layout"
import Link from "next/link"
import { useState } from 'react'
import { teamMembers } from "@/utils/constant.utils";
import CounterUp from "@/components/elements/CounterUp";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
const swiperOptions = {
modules: [Autoplay, Pagination, Navigation],
slidesPerView: 1,
spaceBetween: 0,
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
};
const images = [
'/assets/images/BrandPartners/1.png',
'/assets/images/BrandPartners/2.png',
'/assets/images/BrandPartners/3.png',
'/assets/images/BrandPartners/4.png',
'/assets/images/BrandPartners/5.png',
'/assets/images/BrandPartners/6.png',
];
export default function Home() {
const [isOpen, setOpen] = useState(false)
@ -48,7 +83,7 @@ export default function Home() {
<div className="shape-2" style={{ backgroundImage: 'url(/assets/images/shape/shape-33.png)' }}></div>
<div className="shape-3" style={{ backgroundImage: 'url(/assets/images/shape/shape-7.png)' }}></div>
<div className="shape-4" style={{ backgroundImage: 'url(/assets/images/shape/shape-34.png)' }}></div>
<div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.webp)' }}></div>
<div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.png)' }}></div>
</div>
<figure className="image image-1"><img src="/assets/images/about-us/section1/about-right.webp" alt="" /></figure>
<figure className="image image-2"><img src="/assets/images/about-us/section1/about-left.webp" alt="" /></figure>
@ -91,7 +126,7 @@ export default function Home() {
<h2>Mission Vision & Values</h2>
</div>
<div className="inner-container">
<div className="arrow-shape" style={{ backgroundImage: 'url(/assets/images/shape/shape-18.webp)' }}></div>
<div className="arrow-shape" style={{ backgroundImage: 'url(/assets/images/shape/shape-18.png)' }}></div>
{contents.map((item, index) => {
const isActive = activeIndex === index;
@ -222,6 +257,144 @@ export default function Home() {
</div>
</div>
</section>
<section className="chooseus-section">
<div className="bg-layer" style={{ backgroundImage: 'url(/assets/images/home/why-choose/why-choose-right.webp)' }}></div>
<div className="pattern-layer" style={{ backgroundImage: 'url(/assets/images/shape/shape-12.png)' }}></div>
<div className="auto-container">
<div className="row clearfix">
<div className="col-lg-8 col-md-12 col-sm-12 content-column">
<div className="content-box">
<div className="sec-title light mb_50">
{/* <span className="sub-title">Why Choose Us</span> */}
<h2>WHY CHOOSE ETOBICOKE PHYSIOTHERAPY</h2>
<p className='sub-title-2'>Physiotherapy Etobicoke – We are a team of health care professionals provide physiotherapy, massage therapy services in etobicoke assist you in improving your health.</p>
</div>
<div className="row clearfix">
<div className="col-lg-6 col-md-6 col-sm-12 chooseus-block">
<div className="chooseus-block-one">
<div className="inner-box">
<div className="icon-box"><img src="/assets/images/home/why-choose/expert-team.webp" alt="" /></div>
<h3>Expert Team</h3>
<p>At Etobicoke Physiotherapy, we have expert team of professionals</p>
</div>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 chooseus-block">
<div className="chooseus-block-one">
<div className="inner-box">
<div className="icon-box"><img src="/assets/images/home/why-choose/understand.webp" alt="" /></div>
<h3>Understand your Pain</h3>
<p>Etobicoke physiotherapy offer Treatment for faster recovery</p>
</div>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 chooseus-block">
<div className="chooseus-block-one">
<div className="inner-box">
<div className="icon-box"><img src="/assets/images/home/why-choose/ready.webp" alt="" /></div>
<h3>Ready To Go</h3>
<p>Flexible opening hours conveniently located in etobicoke</p>
</div>
</div>
</div>
{/* <div className="col-lg-6 col-md-6 col-sm-12 chooseus-block">
<div className="chooseus-block-one">
<div className="inner-box">
<div className="icon-box"><i className="icon-20"></i></div>
<h3>24/7 Services</h3>
<p>Amet minim mollit non deserunt aliqua dolor do amet sint.</p>
</div>
</div>
</div> */}
</div>
</div>
</div>
</div>
</div>
</section>
<section className="funfact-section centred">
<div className="auto-container">
<div className="inner-container">
<div className="row clearfix">
<div className="col-lg-3 col-md-6 col-sm-12 funfact-block">
<div className="funfact-block-one">
<div className="inner-box">
<div className="count-outer count-box">
<CounterUp end={10} /><span>+</span>
</div>
<span className="text">Professionals</span>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 funfact-block">
<div className="funfact-block-one">
<div className="inner-box">
<div className="count-outer count-box">
<CounterUp end={20} /><span>+</span>
</div>
<span className="text">Years Experience</span>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 funfact-block">
<div className="funfact-block-one">
<div className="inner-box">
<div className="count-outer count-box">
<CounterUp end={1000} /><span>+</span>
</div>
<span className="text">Happy Customers</span>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 funfact-block">
<div className="funfact-block-one">
<div className="inner-box">
<div className="count-outer count-box">
<CounterUp end={97} /><span>%</span>
</div>
<span className="text">Client Satisfaction</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="image-slider-section relative w-full pt_120 pb_120 text-center">
<div className="auto-container mx-auto relative w-full">
<div className="slider-wrapper w-full">
<Swiper
{...swiperOptions}
slidesPerView={3}
spaceBetween={30}
breakpoints={{
320: { slidesPerView: 1 },
640: { slidesPerView: 2 },
1024: { slidesPerView: 3 },
}}
className="w-full h-[400px]"
>
{images.map((src, index) => (
<SwiperSlide key={index}>
<img
src={src}
alt={`Slide ${index + 1}`}
className="w-full h-full object-cover rounded-lg"
/>
</SwiperSlide>
))}
</Swiper>
</div>
</div>
</section>
</Layout>
</>
)

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

@ -11,7 +11,7 @@ export default function About() {
<div className="pattern-layer">
<div className="pattern-1 rotate-me" style={{ backgroundImage: "url(/assets/images/shape/shape-8.png)" }}></div>
<div className="pattern-2 rotate-me" style={{ backgroundImage: "url(/assets/images/shape/shape-9.png)" }}></div>
<div className="pattern-3" style={{ backgroundImage: "url(/assets/images/shape/shape-11.webp)" }}></div>
<div className="pattern-3" style={{ backgroundImage: "url(/assets/images/shape/shape-11.png)" }}></div>
<div className="pattern-4" style={{ backgroundImage: "url(/assets/images/shape/shape-35.png)" }}></div>
</div>
<div className="auto-container">
@ -24,7 +24,7 @@ export default function About() {
<div className="shape-2" style={{ backgroundImage: 'url(/assets/images/shape/shape-33.png)' }}></div>
<div className="shape-3" style={{ backgroundImage: 'url(/assets/images/shape/shape-7.png)' }}></div>
<div className="shape-4" style={{ backgroundImage: 'url(/assets/images/shape/shape-34.png)' }}></div>
<div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.webp)' }}></div>
<div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.png)' }}></div>
</div>
<figure className="image image-1"><img src="/assets/images/our-approach/right.webp" alt="" /></figure>
<figure className="image image-2"><img src="/assets/images/our-approach/left.webp" alt="" /></figure>

56
app/shortcodes/page.js
View File

@ -4,6 +4,7 @@ import Layout from "@/components/layout/Layout"
import { motion } from "framer-motion"
import TestimonialSlider1 from "@/components/slider/ShortcodeTestimonial"
import PortfolioFilter1 from "@/components/elements/Shortcodes"
import CounterUp from "@/components/elements/CounterUp"
export default function Home() {
@ -11,7 +12,7 @@ export default function Home() {
<Layout
headerStyle={2}
footerStyle={1}
breadcrumbTitle="COVID-19 UPDATES"
breadcrumbTitle="Shortcodes"
bannerImage="/assets/images/covid/covid-19-banner.webp"
>
<section className="pricing-section sec-pad">
@ -462,6 +463,59 @@ export default function Home() {
</div>
</section>
<section className="funfact-section centred">
<div className="auto-container">
<div className="inner-container">
<div className="row clearfix">
<div className="col-lg-3 col-md-6 col-sm-12 funfact-block">
<div className="funfact-block-one">
<div className="inner-box">
<div className="count-outer count-box">
<CounterUp end={10} /><span>+</span>
</div>
<span className="text">Professionals</span>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 funfact-block">
<div className="funfact-block-one">
<div className="inner-box">
<div className="count-outer count-box">
<CounterUp end={20} /><span>+</span>
</div>
<span className="text">Years Experience</span>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 funfact-block">
<div className="funfact-block-one">
<div className="inner-box">
<div className="count-outer count-box">
<CounterUp end={1000} /><span>+</span>
</div>
<span className="text">Happy Customers</span>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6 col-sm-12 funfact-block">
<div className="funfact-block-one">
<div className="inner-box">
<div className="count-outer count-box">
<CounterUp end={97} /><span>%</span>
</div>
<span className="text">Client Satisfaction</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="service-section sec-pad " id="service">
<div className="auto-container">
<div className="row clearfix">

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

@ -19,7 +19,7 @@ export default function About() {
<div className="shape-2" style={{ backgroundImage: 'url(/assets/images/shape/shape-33.png)' }}></div>
<div className="shape-3" style={{ backgroundImage: 'url(/assets/images/shape/shape-7.png)' }}></div>
<div className="shape-4" style={{ backgroundImage: 'url(/assets/images/shape/shape-34.png)' }}></div>
<div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.webp)' }}></div>
<div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.png)' }}></div>
</div>
<figure className="image image-1"><img src="/assets/images/what-we-expect/right.webp" alt="" /></figure>
<figure className="image image-2"><img src="/assets/images/what-we-expect/left.webp" alt="" /></figure>

2
app/works/page.js
View File

@ -22,7 +22,7 @@ export default function Home() {
<h2>How it Helps You to <br />Keep Healthy</h2>
</div>
<div className="inner-container">
<div className="arrow-shape" style={{ backgroundImage: 'url(assets/images/shape/shape-18.webp)' }}></div>
<div className="arrow-shape" style={{ backgroundImage: 'url(assets/images/shape/shape-18.png)' }}></div>
{/* Processing Blocks */}
{[1, 2, 3].map((count) => (

67
components/elements/Counter.js
View File

@ -1,56 +1,25 @@
import { useEffect, useRef, useState } from 'react'
'use client'
import { useEffect, useState } from 'react'
export default function Counter({ end, duration }) {
export default function Counter({ end, duration = 2 }) {
const [count, setCount] = useState(0)
const countRef = useRef(null)
const increment = end / duration
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
startCount()
observer.disconnect()
}
},
{ threshold: 0 }
)
let start = 0
const totalFrames = duration * 60 // 60 FPS
const increment = end / totalFrames
if (countRef.current) {
observer.observe(countRef.current)
}
const counter = setInterval(() => {
start += increment
if (start >= end) {
start = end
clearInterval(counter)
}
setCount(Math.floor(start))
}, 1000 / 60)
return () => {
observer.disconnect()
}
}, [])
return () => clearInterval(counter)
}, [end, duration])
useEffect(() => {
const interval = setInterval(() => {
setCount((prevCount) => {
const newCount = prevCount + increment
if (newCount >= end) {
clearInterval(interval)
return end
} else {
return newCount
}
})
}, 1000 / duration)
return () => {
clearInterval(interval)
}
}, [end, increment])
const startCount = () => {
setCount(0)
}
return (
<span ref={countRef}>
<span>{Math.round(count)}</span>
</span>
)
}
return <>{count}</>
}

31
components/elements/CounterUp.js
View File

@ -1,31 +1,30 @@
'use client'
import { useEffect, useState } from 'react'
import { useEffect, useState, useRef } from 'react'
import Counter from './Counter'
export default function CounterUp({ end }) {
export default function CounterUp({ end, duration = 2 }) {
const [inViewport, setInViewport] = useState(false)
const ref = useRef(null)
const handleScroll = () => {
const elements = document.getElementsByClassName('count-text')
if (elements.length > 0) {
const element = elements[0]
const rect = element.getBoundingClientRect()
const isInViewport = rect.top >= 0 && rect.bottom <= window.innerHeight
if (isInViewport && !inViewport) {
const checkInView = () => {
if (ref.current) {
const rect = ref.current.getBoundingClientRect()
const isVisible = rect.top < window.innerHeight && rect.bottom >= 0
if (isVisible && !inViewport) {
setInViewport(true)
}
}
}
useEffect(() => {
window.addEventListener('scroll', handleScroll)
return () => {
window.removeEventListener('scroll', handleScroll)
}
checkInView() // Trigger immediately if already visible
window.addEventListener('scroll', checkInView)
return () => window.removeEventListener('scroll', checkInView)
}, [])
return (
<>
<span className="count-text">{inViewport && <Counter end={end} duration={20} />}</span>
</>
<span className="count-text" ref={ref}>
{inViewport && <Counter end={end} duration={duration} />}
</span>
)
}

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

@ -7,7 +7,7 @@ export default function AboutSection() {
<div className="pattern-layer">
<div className="pattern-1 rotate-me" style={{ backgroundImage: 'url(/assets/images/shape/shape-8.png)' }}></div>
<div className="pattern-2 rotate-me" style={{ backgroundImage: 'url(/assets/images/shape/shape-9.png)' }}></div>
<div className="pattern-3" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.webp)' }}></div>
<div className="pattern-3" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.png)' }}></div>
</div>
<div className="auto-container">
<div className="row clearfix">

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

@ -37,7 +37,7 @@ export default function FaqSection() {
<div className="shape-2" style={{ backgroundImage: 'url(/assets/images/shape/shape-33.png)' }}></div>
<div className="shape-3" style={{ backgroundImage: 'url(/assets/images/shape/shape-7.png)' }}></div>
<div className="shape-4" style={{ backgroundImage: 'url(/assets/images/shape/shape-34.png)' }}></div>
<div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.webp)' }}></div>
<div className="shape-5" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.png)' }}></div>
</div>
<figure className="image image-1"><img src="/assets/images/home/why-trust-us/trust-right.webp" alt="" /></figure>
<figure className="image image-2"><img src="/assets/images/home/why-trust-us/trust-left.webp" alt="" /></figure>

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

@ -15,7 +15,7 @@ export default function ProcessSection() {
<h2>How Physiotherapy Helps You Heal <br />and Stay Strong</h2>
</div>
<div className="inner-container">
<div className="arrow-shape" style={{ backgroundImage: 'url(assets/images/shape/shape-18.webp)' }}></div>
<div className="arrow-shape" style={{ backgroundImage: 'url(assets/images/shape/shape-18.png)' }}></div>
{/* Step 01 */}
<div className="processing-block-one wow fadeInLeft animated" data-wow-delay="00ms" data-wow-duration="1500ms">
<div className="inner-box">

2
components/sections/home1/About.js
View File

@ -9,7 +9,7 @@ export default function about() {
<div className="pattern-2 rotate-me" style={{ backgroundImage: 'url(assets/images/shape/shape-8.png)' }}></div>
<div className="pattern-3 rotate-me" style={{ backgroundImage: 'url(assets/images/shape/shape-9.png)' }}></div>
<div className="pattern-4" style={{ backgroundImage: 'url(assets/images/shape/shape-10.png)' }}></div>
<div className="pattern-5" style={{ backgroundImage: 'url(assets/images/shape/shape-11.webp)' }}></div>
<div className="pattern-5" style={{ backgroundImage: 'url(assets/images/shape/shape-11.png)' }}></div>
</div>
<div className="auto-container">
<div className="row clearfix">

2
components/sections/home1/Process.js
View File

@ -15,7 +15,7 @@ export default function Process() {
<h2>How it Helps You to <br />Keep Healthy</h2>
</div>
<div className="inner-container">
<div className="arrow-shape" style={{ backgroundImage: 'url(assets/images/shape/shape-18.webp)' }}></div>
<div className="arrow-shape" style={{ backgroundImage: 'url(assets/images/shape/shape-18.png)' }}></div>
<div className="processing-block-one wow fadeInLeft animated" data-wow-delay="00ms" data-wow-duration="1500ms">
<div className="inner-box">
<span className="count-text">01</span>

2
components/sections/home2/About.js
View File

@ -6,7 +6,7 @@ export default function About() {
<div className="pattern-layer">
<div className="pattern-1 rotate-me" style={{ backgroundImage: 'url(assets/images/shape/shape-8.png)' }}></div>
<div className="pattern-2 rotate-me" style={{ backgroundImage: 'url(assets/images/shape/shape-9.png)' }}></div>
<div className="pattern-3" style={{ backgroundImage: 'url(assets/images/shape/shape-11.webp)' }}></div>
<div className="pattern-3" style={{ backgroundImage: 'url(assets/images/shape/shape-11.png)' }}></div>
</div>
<div className="auto-container">
<div className="row clearfix">

2
components/sections/home3/About.js
View File

@ -16,7 +16,7 @@ export default function About() {
<div className="shape-2" style={{ backgroundImage: 'url(assets/images/shape/shape-33.png)' }}></div>
<div className="shape-3" style={{ backgroundImage: 'url(assets/images/shape/shape-7.png)' }}></div>
<div className="shape-4" style={{ backgroundImage: 'url(assets/images/shape/shape-34.png)' }}></div>
<div className="shape-5" style={{ backgroundImage: 'url(assets/images/shape/shape-11.webp)' }}></div>
<div className="shape-5" style={{ backgroundImage: 'url(assets/images/shape/shape-11.png)' }}></div>
</div>
<figure className="image image-1"><img src="assets/images/resource/about-2.jpg" alt="" /></figure>
<figure className="image image-2"><img src="assets/images/resource/about-3.jpg" alt="" /></figure>

2
components/sections/home3/Process.js
View File

@ -15,7 +15,7 @@ export default function Process() {
<h2>How it Helps You to <br />Keep Healthy</h2>
</div>
<div className="inner-container">
<div className="arrow-shape" style={{ backgroundImage: 'url(assets/images/shape/shape-18.webp)' }}></div>
<div className="arrow-shape" style={{ backgroundImage: 'url(assets/images/shape/shape-18.png)' }}></div>
<div className="processing-block-one wow fadeInLeft animated" data-wow-delay="00ms" data-wow-duration="1500ms">
<div className="inner-box">
<span className="count-text">01</span>

2
components/sections/onepage/About.js
View File

@ -9,7 +9,7 @@ export default function about() {
<div className="pattern-2 rotate-me" style={{ backgroundImage: 'url(assets/images/shape/shape-8.png)' }}></div>
<div className="pattern-3 rotate-me" style={{ backgroundImage: 'url(assets/images/shape/shape-9.png)' }}></div>
<div className="pattern-4" style={{ backgroundImage: 'url(assets/images/shape/shape-10.png)' }}></div>
<div className="pattern-5" style={{ backgroundImage: 'url(assets/images/shape/shape-11.webp)' }}></div>
<div className="pattern-5" style={{ backgroundImage: 'url(assets/images/shape/shape-11.png)' }}></div>
</div>
<div className="auto-container">
<div className="row clearfix">

2
components/sections/onepage/Process.js
View File

@ -15,7 +15,7 @@ export default function Process() {
<h2>How it Helps You to <br />Keep Healthy</h2>
</div>
<div className="inner-container">
<div className="arrow-shape" style={{ backgroundImage: 'url(assets/images/shape/shape-18.webp)' }}></div>
<div className="arrow-shape" style={{ backgroundImage: 'url(assets/images/shape/shape-18.png)' }}></div>
<div className="processing-block-one wow fadeInLeft animated" data-wow-delay="00ms" data-wow-duration="1500ms">
<div className="inner-box">
<span className="count-text">01</span>

BIN
public/assets/images/BrandPartners/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/assets/images/BrandPartners/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
public/assets/images/BrandPartners/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
public/assets/images/BrandPartners/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
public/assets/images/BrandPartners/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/assets/images/BrandPartners/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB