Skip to content

feat: optimized image loading for faster rendering and CLS #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

feat: optimized image loading for faster rendering and CLS #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
894b753
feat: optimized image loading for faster rendering and CLS
imshrishk Feb 25, 2025
8e5e550
fix: prettier check fix
imshrishk Feb 25, 2025
40ca506
fix: blank image fix
imshrishk Feb 26, 2025
9b74a65
fix: prettier check fix
imshrishk Feb 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link id="dynamic" rel="icon" type="image/svg+xml" href="favicons/favicon1.svg" />
<link href="./src/styles/globals.css" rel="stylesheet">
<link
id="dynamic"
rel="icon"
type="image/svg+xml"
href="favicons/favicon1.svg"
/>
<link href="./src/styles/globals.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SugarLabs</title>
<script src="./Randomfavicon.js" crossorigin="anonymous"></script>
Expand Down
59 changes: 36 additions & 23 deletions src/components/Info.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,22 @@ const Info: React.FC = () => {
<div
key={key}
className="group relative rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl
transition-all duration-500 bg-white"
transition-all duration-500 bg-white"
>
<img
src={image.src}
alt={image.alt}
className="w-full max-h-80 md:h-96 object-cover transform group-hover:scale-105
transition-all duration-700 ease-out"
transition-all duration-700 ease-out"
loading="lazy"
width={800}
height={600}
decoding="async"
/>
{image.caption && (
<div
className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/90
to-transparent p-4 md:p-8"
to-transparent p-4 md:p-8"
>
<p className="text-white font-medium text-lg md:text-xl">
{image.caption}
Expand All @@ -41,11 +44,14 @@ const Info: React.FC = () => {
alt={image.alt}
className="w-full h-64 object-cover"
loading="lazy"
width={800}
height={600}
decoding="async"
/>
{image.caption && (
<div
className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/90
to-transparent p-4"
to-transparent p-4"
>
<p className="text-white font-normal text-base">{image.caption}</p>
</div>
Expand All @@ -61,31 +67,35 @@ const Info: React.FC = () => {
<section className="container mx-auto px-4 py-8 max-w-7xl">
<div
className="relative mb-8 rounded-3xl overflow-hidden shadow-2xl
transform hover:scale-[1.01] transition-all duration-500
ease-out bg-white"
transform hover:scale-[1.01] transition-all duration-500
ease-out bg-white"
>
<img
src={images.main.src}
alt={images.main.alt}
className="w-full h-[500px] md:h-[700px] object-cover"
width={1920}
height={700}
loading="eager"
fetchPriority="high"
/>
<div
className="absolute inset-0 bg-gradient-to-r from-black/70
via-black/50 to-transparent"
via-black/50 to-transparent"
/>
<div
className="absolute top-1/2 left-2 md:left-12 transform -translate-y-1/2
text-white max-w-2xl"
text-white max-w-2xl"
>
<h1
className="text-5xl md:text-7xl lg:text-8xl font-black mb-6 md:mb-8
leading-tight tracking-tight animate-fade-in font-display"
leading-tight tracking-tight animate-fade-in font-display"
>
{heroContent.title}
</h1>
<p
className="text-lg md:text-xl lg:text-2xl leading-relaxed opacity-90
animate-fade-in-delayed font-light"
animate-fade-in-delayed font-light"
>
{heroContent.description}
</p>
Expand Down Expand Up @@ -125,26 +135,26 @@ const Info: React.FC = () => {
<div className="space-y-8 md:space-y-10">
<div
className="inline-block px-4 md:px-6 py-2 md:py-3 bg-gradient-to-r
from-red-500/10 to-orange-500/10 rounded-full"
from-red-500/10 to-orange-500/10 rounded-full"
>
<span
className="text-4xs md:text-sm font-bold text-red-600 tracking-wider
uppercase"
uppercase"
>
Empowering Young Learners
</span>
</div>
<h2
className="text-4xl md:text-5xl lg:text-6xl font-black space-y-2
font-display tracking-tight"
font-display tracking-tight"
>
<span className=" font-bold tracking-wider font-Caveat text-8xl">
Our Mission?
</span>
<div>
<div
className="text-transparent bg-clip-text bg-gradient-to-r
from-red-500 to-orange-500 font-Caveat text-8xl"
from-red-500 to-orange-500 font-Caveat text-8xl"
>
Authentic
</div>
Expand All @@ -168,10 +178,10 @@ const Info: React.FC = () => {
<div className=" bg-auto rounded-2xl overflow-hidden shadow-xl">
{/* Card on Top Left */}
<div
className="absolute top-2 left-2 md:top-2 md:left-2 bg-auto
backdrop-blur-sm rounded-xl p-4 md:p-6 shadow-lg
max-w-xs md:max-w-sm transform hover:scale-105
transition-all duration-300 ease-out z-10 border-2 border-white"
className="absolute top-2 left-2 md:top-2 md:left-2 bg-auto
backdrop-blur-sm rounded-xl p-4 md:p-6 shadow-lg
max-w-xs md:max-w-sm transform hover:scale-105
transition-all duration-300 ease-out z-10 border-2 border-white"
>
<h3 className="text-lg md:text-xl font-bold mb-1 md:mb-2n text-gray-900 font-AnonymousPro">
Project Based Learning
Expand All @@ -188,16 +198,19 @@ const Info: React.FC = () => {
src={mission.learnImage}
alt="Students learning"
className="w-full rounded-2xl transform hover:scale-105
transition-all duration-500 ease-out"
transition-all duration-500"
loading="lazy"
width={800}
height={600}
//decoding="async"
/>

{/* Card on Bottom Right */}
<div
className="absolute bottom-4 right-4 md:bottom-2 md:right-2 bg-auto
backdrop-blur-sm rounded-xl p-4 md:p-6 shadow-lg
max-w-xs md:max-w-sm transform hover:scale-105
transition-all duration-300 ease-out z-10 border-2 border-white"
className="absolute bottom-4 right-4 md:bottom-2 md:right-2 bg-auto
backdrop-blur-sm rounded-xl p-4 md:p-6 shadow-lg
max-w-xs md:max-w-sm transform hover:scale-105
transition-all duration-300 ease-out z-10 border-2 border-white"
>
<h3 className="text-md md:text-lg font-bold mb-1 md:mb-2 text-amber-100 font-AnonymousPro">
Challenge and Fun: It's hard fun.
Expand Down
11 changes: 11 additions & 0 deletions src/components/Stats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@ const Stats = () => {
src={stats.kidlaptop}
alt="Student with laptop"
className="w-full h-48 md:h-64 object-cover rounded-lg"
width={800}
height={600}
decoding="async"
/>
</div>

Expand All @@ -61,6 +64,10 @@ const Stats = () => {
src={stats.studentsCollaborating}
alt="Students collaborating"
className="w h-36 object-cover rounded-lg"
loading="lazy"
width={400}
height={300}
decoding="async"
/>
</div>

Expand All @@ -78,6 +85,10 @@ const Stats = () => {
src={stats.studentMobile}
alt="Student with mobile device"
className="w h-36 object-cover rounded-lg"
loading="lazy"
width={400}
height={300}
decoding="async"
/>
</div>

Expand Down
44 changes: 28 additions & 16 deletions src/components/TryCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,15 @@ export const ActivityCard: React.FC<ActivityCardProps> = ({
href,
}) => (
<div className="bg-white rounded-3xl p-8 flex flex-col items-center text-center shadow-lg transition-transform hover:scale-105">
<img src={icon} alt={title} className="w-24 h-24 mb-4" />
<img
src={icon}
alt={title}
className="w-24 h-24 mb-4"
width={96}
height={96}
loading="lazy"
decoding="async"
/>
<h3 className="text-3xl font-bold mb-2">{title}</h3>
<p className="text-gray-600 mb-6">{description}</p>
<a href={href} className="w-full">
Expand Down Expand Up @@ -66,38 +74,42 @@ export const TryCard: React.FC<TryCardProps> = ({
<div className="space-y-2.5 flex flex-col items-center pt-3">
<a
href={tryNowHref}
className={`w-full text-white font-bold px-5 py-3 rounded-2xl
transition-all duration-500 hover:scale-[1.02] hover:shadow-lg
active:scale-95 text-sm backdrop-blur-sm relative overflow-hidden
${gradientClass || 'bg-gradient-to-br from-blue-600 via-blue-700 to-blue-800'}
before:absolute before:inset-0 before:bg-white/20 before:translate-x-[-150%] before:skew-x-[45deg]
hover:before:translate-x-[150%] before:transition-transform before:duration-700
`}
className={`w-full text-white font-bold px-5 py-3 rounded-2xl
transition-all duration-500 hover:scale-[1.02] hover:shadow-lg
active:scale-95 text-sm backdrop-blur-sm relative overflow-hidden
${gradientClass || 'bg-gradient-to-br from-blue-600 via-blue-700 to-blue-800'}
before:absolute before:inset-0 before:bg-white/20 before:translate-x-[-150%] before:skew-x-[45deg]
hover:before:translate-x-[150%] before:transition-transform before:duration-700
`}
>
{tryNowText}
</a>
<a
href={learnMoreHref}
className="w-full bg-gray-50/80 backdrop-blur-sm border-[1.5px] border-gray-100 rounded-2xl px-5 py-3
font-bold transition-all duration-500 hover:scale-[1.02]
hover:bg-gray-100/80 hover:border-gray-200 text-gray-700 text-sm
active:scale-95 relative overflow-hidden
before:absolute before:inset-0 before:bg-gray-400/20 before:translate-x-[-150%] before:skew-x-[45deg]
hover:before:translate-x-[150%] before:transition-transform before:duration-700"
font-bold transition-all duration-500 hover:scale-[1.02]
hover:bg-gray-100/80 hover:border-gray-200 text-gray-700 text-sm
active:scale-95 relative overflow-hidden
before:absolute before:inset-0 before:bg-gray-400/20 before:translate-x-[-150%] before:skew-x-[45deg]
hover:before:translate-x-[150%] before:transition-transform before:duration-700"
>
{learnMoreText}
</a>
</div>
</div>

{/* Image Section */}
<div className="-mx-6 -mb-6 mt-6 relative overflow-hidden">
<div className="mx-auto mb-4 mt-6 relative overflow-hidden aspect-video">
<div className="absolute inset-0 bg-gradient-to-b from-white via-white/50 to-transparent h-12 z-10" />
<img
src={imagePath}
alt={title}
className="w-full h-48 object-cover transform transition-all duration-700
group-hover:scale-110 group-hover:rotate-1"
className="w-full h-full object-cover transform transition-all duration-700
group-hover:scale-110 group-hover:rotate-1 !opacity-100"
width={800}
height={600}
loading="lazy"
decoding="async"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
</div>
Expand Down
4 changes: 4 additions & 0 deletions src/sections/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,10 @@ const Header: React.FC = () => {
src={logo}
alt="Sugar Labs"
className="h-12 w-auto transition-transform hover:scale-105"
width={128}
height={48}
loading="eager"
fetchPriority="high"
/>
</Link>

Expand Down