corrections updated
This commit is contained in:
parent
f82e4fa1a3
commit
f29ed1f9f7
@ -1,133 +1,96 @@
|
|||||||
|
|
||||||
'use client'
|
'use client'
|
||||||
import Layout from "@/components/layout/Layout"
|
import Layout from "@/components/layout/Layout"
|
||||||
import { useState } from 'react'
|
import { useState } from "react"
|
||||||
import Link from "next/link"
|
import Link from "next/link"
|
||||||
export default function WhyChooseUs() {
|
import { galleryImages } from "@/utils/constant.utils"
|
||||||
const [isActive, setIsActive] = useState({
|
|
||||||
status: false,
|
|
||||||
key: 1,
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleToggle = (key) => {
|
export default function WhyChooseUs() {
|
||||||
if (isActive.key === key) {
|
const itemsPerPage = 6
|
||||||
setIsActive({
|
const [currentPage, setCurrentPage] = useState(1)
|
||||||
status: false,
|
|
||||||
})
|
const indexOfLastImage = currentPage * itemsPerPage
|
||||||
} else {
|
const indexOfFirstImage = indexOfLastImage - itemsPerPage
|
||||||
setIsActive({
|
const currentImages = galleryImages.slice(indexOfFirstImage, indexOfLastImage)
|
||||||
status: true,
|
|
||||||
key,
|
const totalPages = Math.ceil(galleryImages.length / itemsPerPage)
|
||||||
})
|
|
||||||
|
const handlePageChange = (page) => {
|
||||||
|
if (page > 0 && page <= totalPages) {
|
||||||
|
setCurrentPage(page)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* gallery */}
|
<section className="gallery-page-section sec-pad-2">
|
||||||
<section className="gallery-page-section sec-pad-2">
|
<div className="auto-container">
|
||||||
<div className="auto-container">
|
<div className="row clearfix">
|
||||||
<div className="row clearfix">
|
{currentImages.map((src, index) => (
|
||||||
<div className="col-lg-4 col-md-6 col-sm-12 gallery-block">
|
<div key={index} className="col-lg-4 col-md-6 col-sm-12 gallery-block">
|
||||||
<div className="gallery-block-one">
|
<div className="gallery-block-one">
|
||||||
<div className="inner-box">
|
<div className="inner-box">
|
||||||
<figure className="image-box"><img src="/assets/images/gallery/gallery-6.jpg" alt="" /></figure>
|
<figure className="image-box">
|
||||||
<div className="view-btn"><Link href="/assets/images/gallery/gallery-6.jpg" className="lightbox-image" data-fancybox="gallery"><i className="icon-4"></i></Link></div>
|
<img src={src} alt={`gallery-${index}`} />
|
||||||
|
</figure>
|
||||||
|
<div className="view-btn">
|
||||||
|
<Link href={src} className="lightbox-image" data-fancybox="gallery">
|
||||||
|
<i className="icon-4"></i>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* Repeat the above block for other gallery items */}
|
))}
|
||||||
<div className="col-lg-4 col-md-6 col-sm-12 gallery-block">
|
|
||||||
<div className="gallery-block-one">
|
|
||||||
<div className="inner-box">
|
|
||||||
<figure className="image-box"><img src="/assets/images/gallery/gallery-7.jpg" alt="" /></figure>
|
|
||||||
<div className="view-btn"><Link href="/assets/images/gallery/gallery-7.jpg" className="lightbox-image" data-fancybox="gallery"><i className="icon-4"></i></Link></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Repeat the above block for other gallery items */}
|
|
||||||
<div className="col-lg-4 col-md-6 col-sm-12 gallery-block">
|
|
||||||
<div className="gallery-block-one">
|
|
||||||
<div className="inner-box">
|
|
||||||
<figure className="image-box"><img src="/assets/images/gallery/gallery-8.jpg" alt="" /></figure>
|
|
||||||
<div className="view-btn"><Link href="/assets/images/gallery/gallery-8.jpg" className="lightbox-image" data-fancybox="gallery"><i className="icon-4"></i></Link></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Repeat the above block for other gallery items */}
|
|
||||||
<div className="col-lg-4 col-md-6 col-sm-12 gallery-block">
|
|
||||||
<div className="gallery-block-one">
|
|
||||||
<div className="inner-box">
|
|
||||||
<figure className="image-box"><img src="/assets/images/gallery/gallery-9.jpg" alt="" /></figure>
|
|
||||||
<div className="view-btn"><Link href="/assets/images/gallery/gallery-9.jpg" className="lightbox-image" data-fancybox="gallery"><i className="icon-4"></i></Link></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Repeat the above block for other gallery items */}
|
|
||||||
<div className="col-lg-4 col-md-6 col-sm-12 gallery-block">
|
|
||||||
<div className="gallery-block-one">
|
|
||||||
<div className="inner-box">
|
|
||||||
<figure className="image-box"><img src="/assets/images/gallery/gallery-10.jpg" alt="" /></figure>
|
|
||||||
<div className="view-btn"><Link href="/assets/images/gallery/gallery-10.jpg" className="lightbox-image" data-fancybox="gallery"><i className="icon-4"></i></Link></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Repeat the above block for other gallery items */}
|
|
||||||
<div className="col-lg-4 col-md-6 col-sm-12 gallery-block">
|
|
||||||
<div className="gallery-block-one">
|
|
||||||
<div className="inner-box">
|
|
||||||
<figure className="image-box"><img src="/assets/images/gallery/gallery-11.jpg" alt="" /></figure>
|
|
||||||
<div className="view-btn"><Link href="/assets/images/gallery/gallery-11.jpg" className="lightbox-image" data-fancybox="gallery"><i className="icon-4"></i></Link></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Repeat the above block for other gallery items */}
|
|
||||||
</div>
|
|
||||||
<div className="pagination-wrapper mt_20 centred">
|
|
||||||
<ul className="pagination clearfix">
|
|
||||||
<li><Link href="gallery" className="current">1</Link></li>
|
|
||||||
<li><Link href="gallery">2</Link></li>
|
|
||||||
<li><Link href="gallery">3</Link></li>
|
|
||||||
<li><Link href="gallery"><i className="icon-36"></i></Link></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
{/* gallery end */}
|
|
||||||
|
|
||||||
{/* subscibe */}
|
<div className="pagination-wrapper mt_20 centred">
|
||||||
{/* <section className="subscribe-section">
|
<ul className="pagination clearfix">
|
||||||
<div className="auto-container">
|
{currentPage > 1 && (
|
||||||
<div className="inner-container">
|
<li className="prev">
|
||||||
<div className="row align-items-center">
|
<Link
|
||||||
<div className="col-lg-6 col-md-12 col-sm-12 text-column">
|
href="#"
|
||||||
<div className="text-box">
|
onClick={(e) => {
|
||||||
<h2><span>Subscribe</span> for the exclusive updates!</h2>
|
e.preventDefault()
|
||||||
</div>
|
handlePageChange(currentPage - 1)
|
||||||
</div>
|
}}
|
||||||
<div className="col-lg-6 col-md-12 col-sm-12 form-column">
|
>
|
||||||
<div className="form-inner">
|
<img src="/assets/images/gallery/left.png" alt="Previous" />
|
||||||
<form method="post" action="contact">
|
</Link>
|
||||||
<div className="form-group">
|
</li>
|
||||||
<input type="email" name="email" placeholder="Enter Your Email Address" required />
|
)}
|
||||||
<button type="submit" className="theme-btn btn-one"><span>Subscribe Now</span></button>
|
|
||||||
</div>
|
{[...Array(totalPages)].map((_, i) => (
|
||||||
<div className="form-group">
|
<li key={i}>
|
||||||
<div className="check-box">
|
<Link
|
||||||
<input className="check" type="checkbox" id="checkbox1" />
|
href="#"
|
||||||
<label htmlFor="checkbox1">I agree to the <Link href="/">Privacy Policy.</Link></label>
|
onClick={(e) => {
|
||||||
</div>
|
e.preventDefault()
|
||||||
</div>
|
handlePageChange(i + 1)
|
||||||
</form>
|
}}
|
||||||
</div>
|
className={currentPage === i + 1 ? "current" : ""}
|
||||||
</div>
|
>
|
||||||
</div>
|
{i + 1}
|
||||||
</div>
|
</Link>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{currentPage < totalPages && (
|
||||||
|
<li className="next">
|
||||||
|
<Link
|
||||||
|
href="#"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault()
|
||||||
|
handlePageChange(currentPage + 1)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img src="/assets/images/gallery/right.png" alt="Previous" />
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</section> */}
|
</div>
|
||||||
{/* subscibe end */}
|
</section>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -4,7 +4,7 @@ import Layout from "@/components/layout/Layout"
|
|||||||
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",
|
||||||
description:
|
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.",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -3749,3 +3749,10 @@
|
|||||||
.color-white{
|
.color-white{
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
.pagination-wrapper .pagination li a img {
|
||||||
|
transition: filter 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-wrapper .pagination li a:hover img {
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
|
}
|
||||||
|
|||||||
BIN
public/assets/images/gallery/left.png
Normal file
BIN
public/assets/images/gallery/left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
public/assets/images/gallery/right.png
Normal file
BIN
public/assets/images/gallery/right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
@ -3209,7 +3209,7 @@ export const servicesList = [
|
|||||||
icon: "/assets/images/Refugee-Pysiotherapee/icon.webp",
|
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.",
|
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",
|
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: `<div>
|
description: `<div>
|
||||||
<div class="text-box ">
|
<div class="text-box ">
|
||||||
<h2>Refugee Physiotherapy</h2>
|
<h2>Refugee Physiotherapy</h2>
|
||||||
|
|||||||
@ -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",
|
||||||
|
];
|
||||||
Loading…
x
Reference in New Issue
Block a user