diff --git a/app/gallery-physiotherapy-etobicoke/GalleryClient.js b/app/gallery-physiotherapy-etobicoke/GalleryClient.js index 2208d76..4fe2680 100644 --- a/app/gallery-physiotherapy-etobicoke/GalleryClient.js +++ b/app/gallery-physiotherapy-etobicoke/GalleryClient.js @@ -1,133 +1,96 @@ - 'use client' import Layout from "@/components/layout/Layout" -import { useState } from 'react' +import { useState } from "react" import Link from "next/link" -export default function WhyChooseUs() { - const [isActive, setIsActive] = useState({ - status: false, - key: 1, - }) +import { galleryImages } from "@/utils/constant.utils" - const handleToggle = (key) => { - if (isActive.key === key) { - setIsActive({ - status: false, - }) - } else { - setIsActive({ - status: true, - key, - }) +export default function WhyChooseUs() { + const itemsPerPage = 6 + const [currentPage, setCurrentPage] = useState(1) + + const indexOfLastImage = currentPage * itemsPerPage + const indexOfFirstImage = indexOfLastImage - itemsPerPage + const currentImages = galleryImages.slice(indexOfFirstImage, indexOfLastImage) + + const totalPages = Math.ceil(galleryImages.length / itemsPerPage) + + const handlePageChange = (page) => { + if (page > 0 && page <= totalPages) { + setCurrentPage(page) } } + return ( <> - {/* gallery */} -
-
-
-
+
+
+
+ {currentImages.map((src, index) => ( +
-
-
+
+ {`gallery-${index}`} +
+
+ + + +
- {/* Repeat the above block for other gallery items */} -
-
-
-
-
-
-
-
- {/* Repeat the above block for other gallery items */} -
-
-
-
-
-
-
-
- {/* Repeat the above block for other gallery items */} -
-
-
-
-
-
-
-
- {/* Repeat the above block for other gallery items */} -
-
-
-
-
-
-
-
- {/* Repeat the above block for other gallery items */} -
-
-
-
-
-
-
-
- {/* Repeat the above block for other gallery items */} -
-
-
    -
  • 1
  • -
  • 2
  • -
  • 3
  • -
  • -
-
+ ))}
-
- {/* gallery end */} - {/* subscibe */} - {/*
-
-
-
-
-
-

Subscribe for the exclusive updates!

-
-
-
-
-
-
- - -
-
-
- - -
-
-
-
-
-
-
+
+
    + {currentPage > 1 && ( +
  • + { + e.preventDefault() + handlePageChange(currentPage - 1) + }} + > + Previous + +
  • + )} + + {[...Array(totalPages)].map((_, i) => ( +
  • + { + e.preventDefault() + handlePageChange(i + 1) + }} + className={currentPage === i + 1 ? "current" : ""} + > + {i + 1} + +
  • + ))} + + {currentPage < totalPages && ( +
  • + { + e.preventDefault() + handlePageChange(currentPage + 1) + }} + > + Previous + +
  • + )} +
-
*/} - {/* subscibe end */} +
+
) } - - - diff --git a/app/what-to-expect/page.js b/app/what-to-expect/page.js index bf0bb36..edab90a 100644 --- a/app/what-to-expect/page.js +++ b/app/what-to-expect/page.js @@ -4,7 +4,7 @@ import Layout from "@/components/layout/Layout" export const metadata = { title: "What to expect at Physiotherapy Etobicoke - Rapha Physiotherapy etobicoke", description: - "On the first day of your visit, you will receive a thorough assessment allows our healthcare professionals to understand your injury to determine how we can help. Following the initial assessment at our physiotherapy clinic etobicoke", + "Discover what to expect at Rapha Physiotherapy: from a comprehensive first-day assessment to your initial treatment and long-term plan for lasting recovery.", }; diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 38f9b45..e55f226 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -3748,4 +3748,11 @@ } .color-white{ color: #fff !important; - } \ No newline at end of file + } + .pagination-wrapper .pagination li a img { + transition: filter 0.3s ease; +} + +.pagination-wrapper .pagination li a:hover img { + filter: brightness(0) invert(1); +} diff --git a/public/assets/images/gallery/left.png b/public/assets/images/gallery/left.png new file mode 100644 index 0000000..5a380a9 Binary files /dev/null and b/public/assets/images/gallery/left.png differ diff --git a/public/assets/images/gallery/right.png b/public/assets/images/gallery/right.png new file mode 100644 index 0000000..4c351e2 Binary files /dev/null and b/public/assets/images/gallery/right.png differ diff --git a/utils/Services.utils.js b/utils/Services.utils.js index c2e750a..7ddd27a 100644 --- a/utils/Services.utils.js +++ b/utils/Services.utils.js @@ -3209,7 +3209,7 @@ export const servicesList = [ icon: "/assets/images/Refugee-Pysiotherapee/icon.webp", shortDescription: "Etobicoke Refugee Physiotherapy provides compassionate, individualized care to relieve pain, restore mobility and support refugees in building healthy, independent lives.", metaTitle: "Refugee Physiotherapy in Etobicoke - Best Physiotherapy Near Me", - metaDiscription: "Compassionate Refugee Physiotherapy in Etobicoke. Restore mobility, reduce pain, and support recovery for newcomers with specialized physiotherapy care.", + metaDiscription: "Specialized refugee physiotherapy in Etobicoke: restoring mobility, easing pain & promoting healing through compassionate, individualized care.", description: `

Refugee Physiotherapy

diff --git a/utils/constant.utils.js b/utils/constant.utils.js index 43add09..1dbd826 100644 --- a/utils/constant.utils.js +++ b/utils/constant.utils.js @@ -343,3 +343,17 @@ export const locationsItem = [ ]; +export const galleryImages = [ + "/assets/images/gallery/gallery-6.jpg", + "/assets/images/gallery/gallery-7.jpg", + "/assets/images/gallery/gallery-8.jpg", + "/assets/images/gallery/gallery-9.jpg", + "/assets/images/gallery/gallery-10.jpg", + "/assets/images/gallery/gallery-11.jpg", + "/assets/images/gallery/gallery-6.jpg", + "/assets/images/gallery/gallery-7.jpg", + "/assets/images/gallery/gallery-8.jpg", + "/assets/images/gallery/gallery-9.jpg", + "/assets/images/gallery/gallery-10.jpg", + "/assets/images/gallery/gallery-11.jpg", +]; \ No newline at end of file