Counter updated Brand section updated

app/about-us/page.js

@@ -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>
     </>
   )

app/ourapproach-physiotherapy-etobicoke/page.js

@@ -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>

app/shortcodes/page.js

@@ -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">

app/what-to-expect/page.js

@@ -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>

app/works/page.js

@@ -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) => (

components/elements/Counter.js

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

components/elements/CounterUp.js

@@ -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 checkInView = () => {
-        const elements = document.getElementsByClassName('count-text')
+        if (ref.current) {
-        if (elements.length > 0) {
+            const rect = ref.current.getBoundingClientRect()
-            const element = elements[0]
+            const isVisible = rect.top < window.innerHeight && rect.bottom >= 0
-            const rect = element.getBoundingClientRect()
+            if (isVisible && !inViewport) {
-            const isInViewport = rect.top >= 0 && rect.bottom <= window.innerHeight
-            if (isInViewport && !inViewport) {
                 setInViewport(true)
             }
         }
     }
 
     useEffect(() => {
-        window.addEventListener('scroll', handleScroll)
+        checkInView() // Trigger immediately if already visible
-        return () => {
+        window.addEventListener('scroll', checkInView)
-            window.removeEventListener('scroll', handleScroll)
+        return () => window.removeEventListener('scroll', checkInView)
-        }
     }, [])
+
     return (
-        <>
+        <span className="count-text" ref={ref}>
-            <span className="count-text">{inViewport && <Counter end={end} duration={20} />}</span>
+            {inViewport && <Counter end={end} duration={duration} />}
-        </>
+        </span>
     )
 }

components/sections/home/AboutSection.js

@@ -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">

components/sections/home/FaqSection.js

@@ -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>

components/sections/home/ProcessSection.js

@@ -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">

components/sections/home1/About.js

@@ -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">

components/sections/home1/Process.js

@@ -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>

components/sections/home2/About.js

@@ -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">

components/sections/home3/About.js

@@ -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>

components/sections/home3/Process.js

@@ -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>

components/sections/onepage/About.js

@@ -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">

components/sections/onepage/Process.js

@@ -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>