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

about section updated for performance issues

Browse Source
This commit is contained in:
Alaguraj0361 2025-10-03 17:18:55 +05:30
parent d3cec426d3
commit 18bee619e9
1 changed files with 61 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,56 +1,93 @@
import Image from 'next/image'; import Image from "next/image";
import Link from 'next/link'; import Link from "next/link";
import React from 'react'; import React from "react";
export default function AboutSection() { export default function AboutSection() {
return ( return (
<section className="about-style-two pt_90 pb_90"> <section className="about-style-two pt_90 pb_90 relative overflow-hidden">
{/* Pattern Layers */}
<div className="pattern-layer"> <div className="pattern-layer">
<div className="pattern-1 rotate-me" style={{ backgroundImage: 'url(/assets/images/shape/shape-8.webp)' }}></div> <div className="pattern-1 rotate-me absolute">
<div className="pattern-2 rotate-me" style={{ backgroundImage: 'url(/assets/images/shape/shape-9.webp)' }}></div> <Image
<div className="pattern-3" style={{ backgroundImage: 'url(/assets/images/shape/shape-11.webp)' }}></div> src="/assets/images/shape/shape-8.webp"
alt="Decorative shape"
fill
priority={false}
sizes="15vw"
style={{ objectFit: "contain" }}
/>
</div>
<div className="pattern-2 rotate-me absolute">
<Image
src="/assets/images/shape/shape-9.webp"
alt="Decorative shape"
fill
sizes="15vw"
style={{ objectFit: "contain" }}
/>
</div>
<div className="pattern-3 absolute">
<Image
src="/assets/images/shape/shape-11.webp"
alt="Decorative shape"
fill
sizes="15vw"
style={{ objectFit: "contain" }}
/>
</div>
</div> </div>
<div className="auto-container"> <div className="auto-container">
<div className="row clearfix"> <div className="row clearfix">
{/* Image Column */} {/* Image Column */}
<div className="col-lg-6 col-md-12 col-sm-12 image-column"> <div className="col-lg-6 col-md-12 col-sm-12 image-column">
<div className="image_block_one"> <div className="image_block_one relative">
<div className="image-box"> <div className="image-box relative">
<div className="image-shape" style={{ backgroundImage: 'url(/assets/images/shape/shape-26.webp)' }}></div> {/* Background Shape */}
<div className="image-shape absolute inset-0 -z-10">
<Image
src="/assets/images/shape/shape-26.webp"
alt="Background shape"
fill
sizes="50vw"
style={{ objectFit: "contain" }}
/>
</div>
{/* Main Hero Image */} {/* Main Hero Image (LCP) */}
<figure className="image-2"> <figure className="image-2 relative">
<Image <Image
src="/assets/images/home/welcome/home-welcome.webp" src="/assets/images/home/welcome/home-welcome.webp"
alt="Physiotherapy" alt="Physiotherapy"
width={800} // actual image width width={600}
height={500} // actual image height height={420}
priority priority
sizes="(max-width: 768px) 100vw, 50vw" sizes="(max-width: 768px) 100vw, 50vw"
style={{ display: 'block' }}
placeholder="blur" placeholder="blur"
blurDataURL="/assets/images/home/welcome/home-welcome-blur.webp" // optional blurDataURL="/assets/images/home/welcome/home-welcome-blur.webp"
style={{ borderRadius: "8px", width: "100%", height: "auto" }}
/> />
</figure> </figure>
{/* Top Icon */} {/* Top Icon */}
<div className="icon-one"> <div className="icon-one absolute top-0 left-0">
<Image <Image
src="/assets/images/home/welcome/top-icon.webp" src="/assets/images/home/welcome/top-icon.webp"
alt="Physiotherapy icon" alt="Top decorative icon"
width={50} width={40}
height={50} height={40}
loading="lazy"
/> />
</div> </div>
{/* Bottom Icon */} {/* Bottom Icon */}
<div className="icon-two"> <div className="icon-two absolute bottom-0 right-0">
<Image <Image
src="/assets/images/home/welcome/bottom-icon.webp" src="/assets/images/home/welcome/bottom-icon.webp"
alt="Physiotherapy icon" alt="Bottom decorative icon"
width={50} width={40}
height={50} height={40}
loading="lazy"
/> />
</div> </div>
</div> </div>