about section performance updated

This commit is contained in:
Alaguraj0361 2025-10-03 18:42:12 +05:30
parent 18bee619e9
commit b3037ce050

View File

@ -5,33 +5,35 @@ import React from "react";
export default function AboutSection() {
return (
<section className="about-style-two pt_90 pb_90 relative overflow-hidden">
{/* Pattern Layers */}
{/* Pattern Layers with fixed sizes */}
<div className="pattern-layer">
<div className="pattern-1 rotate-me absolute">
<div className="pattern-1 rotate-me absolute w-[120px] h-[120px]">
<Image
src="/assets/images/shape/shape-8.webp"
alt="Decorative shape"
fill
priority={false}
sizes="15vw"
sizes="120px"
style={{ objectFit: "contain" }}
priority={false}
/>
</div>
<div className="pattern-2 rotate-me absolute">
<div className="pattern-2 rotate-me absolute w-[140px] h-[140px]">
<Image
src="/assets/images/shape/shape-9.webp"
alt="Decorative shape"
fill
sizes="15vw"
sizes="140px"
style={{ objectFit: "contain" }}
/>
</div>
<div className="pattern-3 absolute">
<div className="pattern-3 absolute w-[150px] h-[150px]">
<Image
src="/assets/images/shape/shape-11.webp"
alt="Decorative shape"
fill
sizes="15vw"
sizes="150px"
style={{ objectFit: "contain" }}
/>
</div>
@ -44,7 +46,7 @@ export default function AboutSection() {
<div className="image_block_one relative">
<div className="image-box relative">
{/* Background Shape */}
<div className="image-shape absolute inset-0 -z-10">
<div className="image-shape absolute inset-0 -z-10 w-[600px] h-[500px]">
<Image
src="/assets/images/shape/shape-26.webp"
alt="Background shape"
@ -55,7 +57,7 @@ export default function AboutSection() {
</div>
{/* Main Hero Image (LCP) */}
<figure className="image-2 relative">
<figure className="image-2 relative min-h-[420px]">
<Image
src="/assets/images/home/welcome/home-welcome.webp"
alt="Physiotherapy"
@ -65,28 +67,34 @@ export default function AboutSection() {
sizes="(max-width: 768px) 100vw, 50vw"
placeholder="blur"
blurDataURL="/assets/images/home/welcome/home-welcome-blur.webp"
style={{ borderRadius: "8px", width: "100%", height: "auto" }}
style={{
borderRadius: "8px",
width: "100%",
height: "auto",
}}
/>
</figure>
{/* Top Icon */}
<div className="icon-one absolute top-0 left-0">
<div className="icon-one absolute top-0 left-0 w-[40px] h-[40px]">
<Image
src="/assets/images/home/welcome/top-icon.webp"
alt="Top decorative icon"
width={40}
height={40}
fill
sizes="40px"
style={{ objectFit: "contain" }}
loading="lazy"
/>
</div>
{/* Bottom Icon */}
<div className="icon-two absolute bottom-0 right-0">
<div className="icon-two absolute bottom-0 right-0 w-[40px] h-[40px]">
<Image
src="/assets/images/home/welcome/bottom-icon.webp"
alt="Bottom decorative icon"
width={40}
height={40}
fill
sizes="40px"
style={{ objectFit: "contain" }}
loading="lazy"
/>
</div>
@ -105,8 +113,10 @@ export default function AboutSection() {
<div className="text-box mb_40">
<p>
At Rapha Rehab, we specialize in evidence-based physiotherapy tailored to your needs.
Our expert care helps you recover, relieve pain, and regain strength for a better quality of life.
At Rapha Rehab, we specialize in evidence-based
physiotherapy tailored to your needs. Our expert care helps
you recover, relieve pain, and regain strength for a better
quality of life.
</p>
<ul className="list-style-one clearfix">
<li>Chronic pain (back, neck, joints).</li>
@ -117,7 +127,10 @@ export default function AboutSection() {
</div>
<div className="btn-box">
<Link href="/etobicoke-treatment-service" className="theme-btn btn-one">
<Link
href="/etobicoke-treatment-service"
className="theme-btn btn-one"
>
<span>Explore Our Service</span>
</Link>
</div>