Merge pull request #22 from andriawan/21-lazy-load-image-assets

Implement lazy load image assets

Author: andriawan

bun.lock

@@ -59,5 +59,8 @@
 		"vite": "7.2.4",
 		"vitest": "4.0.13",
 		"vitest-browser-svelte": "2.0.1"
+	},
+	"dependencies": {
+		"@unpic/svelte": "1.0.0"
 	}
 }

package.json

@@ -1,4 +1,6 @@
-<script lang="ts"></script>
+<script lang="ts">
+	import { Image } from '@unpic/svelte';
+</script>
 
 <!-- Why Join Section -->
 <section class="bg-gray-900 px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
@@ -29,7 +31,7 @@
 				<div class="mb-8 space-y-4">
 					<div class="flex items-start gap-3 delay-100 fade-in">
 						<svg
-							class="mt-1 h-6 w-6 flex-shrink-0 text-green-500"
+							class="mt-1 h-6 w-6 shrink-0 text-green-500"
 							viewBox="0 0 24 24"
 							fill="none"
 							stroke="currentColor"
@@ -47,7 +49,7 @@
 
 					<div class="flex items-start gap-3 delay-200 fade-in">
 						<svg
-							class="mt-1 h-6 w-6 flex-shrink-0 text-green-500"
+							class="mt-1 h-6 w-6 shrink-0 text-green-500"
 							viewBox="0 0 24 24"
 							fill="none"
 							stroke="currentColor"
@@ -67,7 +69,7 @@
 
 					<div class="flex items-start gap-3 delay-300 fade-in">
 						<svg
-							class="mt-1 h-6 w-6 flex-shrink-0 text-green-500"
+							class="mt-1 h-6 w-6 shrink-0 text-green-500"
 							viewBox="0 0 24 24"
 							fill="none"
 							stroke="currentColor"
@@ -83,7 +85,7 @@
 
 					<div class="flex items-start gap-3 delay-400 fade-in">
 						<svg
-							class="mt-1 h-6 w-6 flex-shrink-0 text-green-500"
+							class="mt-1 h-6 w-6 shrink-0 text-green-500"
 							viewBox="0 0 24 24"
 							fill="none"
 							stroke="currentColor"
@@ -101,7 +103,7 @@
 
 					<div class="flex items-start gap-3 delay-500 fade-in">
 						<svg
-							class="mt-1 h-6 w-6 flex-shrink-0 text-green-500"
+							class="mt-1 h-6 w-6 shrink-0 text-green-500"
 							viewBox="0 0 24 24"
 							fill="none"
 							stroke="currentColor"
@@ -145,12 +147,16 @@
 			<!-- Right Image -->
 			<div class="fade-in-right relative">
 				<div class="relative overflow-hidden rounded-3xl shadow-2xl">
-					<img
+					<Image
 						src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=600&fit=crop"
 						alt="Community collaboration"
+						layout="constrained"
+						width={600}
+						height={450}
+						loading="lazy"
 						class="h-full w-full object-cover"
 					/>
-					<div class="absolute inset-0 bg-gradient-to-t from-gray-900/50 to-transparent"></div>
+					<div class="absolute inset-0 bg-linear-to-t from-gray-900/50 to-transparent"></div>
 				</div>
 				<!-- Decorative elements -->
 				<div

src/lib/components/common/Benefit.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Member } from '$lib/contract/Member';
+	import { Image } from '@unpic/svelte';
 
 	interface Props {
 		members: Member[];
@@ -21,9 +22,12 @@
 						Since {member.since}
 					</span>
 					<div class="relative h-80 overflow-hidden sm:h-[350px]">
-						<img
+						<Image
 							src={member.image}
 							alt={member.name}
+							layout="constrained"
+							width={300}
+							height={350}
 							class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
 						/>
 						<div

src/lib/components/common/FoundingMembers.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import type { HeroSliderList } from '../../../contract/HeroSliderList';
+	import type { HeroSliderList } from '../../contract/HeroSliderList';
 
 	let { isStatic = false, intervalTime = 5000 } = $props();
 

src/lib/components/common/HeroSlider.svelte

@@ -1,4 +1,6 @@
-<script lang="ts"></script>
+<script lang="ts">
+	import { Image } from '@unpic/svelte';
+</script>
 
 <!-- Community Programs -->
 <section class="bg-gray-50 px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
@@ -8,8 +10,11 @@
 			<div
 				class="group fade-in-scale relative h-96 cursor-pointer overflow-hidden rounded-lg sm:h-[400px]"
 			>
-				<img
+				<Image
 					src="https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?w=400&h=500&fit=crop"
+					layout="constrained"
+					width={300}
+					height={400}
 					alt="Youth Development"
 					class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
 				/>
@@ -31,9 +36,12 @@
 			<div
 				class="group fade-in-scale relative h-96 cursor-pointer overflow-hidden rounded-lg delay-100 sm:h-[400px]"
 			>
-				<img
+				<Image
 					src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=400&h=500&fit=crop"
 					alt="Cultural Events"
+					layout="constrained"
+					width={300}
+					height={400}
 					class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
 				/>
 				<div
@@ -54,9 +62,12 @@
 			<div
 				class="group fade-in-scale relative h-96 cursor-pointer overflow-hidden rounded-lg delay-200 sm:h-[400px]"
 			>
-				<img
+				<Image
 					src="https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=400&h=500&fit=crop"
 					alt="Community Service"
+					layout="constrained"
+					width={300}
+					height={400}
 					class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
 				/>
 				<div
@@ -77,9 +88,12 @@
 			<div
 				class="group fade-in-scale relative h-96 cursor-pointer overflow-hidden rounded-lg delay-300 sm:h-[400px]"
 			>
-				<img
+				<Image
 					src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=400&h=500&fit=crop"
 					alt="Education Programs"
+					layout="constrained"
+					width={300}
+					height={400}
 					class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
 				/>
 				<div