From a5a5644f107fc1b014dffa5b95612e29315af6a8 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Mon, 21 Apr 2025 18:58:53 +0200
Subject: [PATCH] style: Update lazy loading attribute in Image component

---
 .DS_Store                    | Bin 6148 -> 0 bytes
 .gitignore                   |   1 +
 app/components/Image.tsx     |   2 +-
 app/partials/HeroSection.tsx |  20 ++++++++------------
 4 files changed, 10 insertions(+), 13 deletions(-)
 delete mode 100644 .DS_Store

diff --git a/.DS_Store b/.DS_Store
deleted file mode 100644
index da07aa6853bb7b7687f6e861317c0d52c61a4ec7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeH~J!%6%427R!7lt%jx}3%b$PET#pTHN0A&|z{CXm!~^gR7ES*H$5cmnB-G%I%Z
zD|S`@Z2$T80!#olbXV*=%*>dtaK;_?uhYl%a=X5>;#J@&VrHyNnC;iLL<B@Y1Vlgt
zL|{P#@)XDBc|p&lM-c%LSOx+AJ~X;(FCD4z>0pQvfVyTmjO&;ssLc!1UOG})p;=82
zR;?Ceh}WZ?+UmMqI#RP8R>OzYoz15hnq@nzF`-!xQ4j$Um=RcIKKc27r2jVm&svm<
zfC&6E0=7P!4tu^-ovjbA=k?dB`g+i*aXG_}p8zI)6mRKa+;6_1_R^8c3Qa!(fk8n8
H{*=Hspa&6(

diff --git a/.gitignore b/.gitignore
index f5044da..ef3abd0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 /.env
 **/*~lock*
+.DS_Store
 
 app-old/.pnpm-store
 app-old/node_modules
diff --git a/app/components/Image.tsx b/app/components/Image.tsx
index 3acbe21..4308221 100644
--- a/app/components/Image.tsx
+++ b/app/components/Image.tsx
@@ -7,11 +7,11 @@ export default function Image(props: ImageProps) {
 
 	return (
 		<img
+			loading="lazy"
 			{...props}
 			src={props.src}
 			aria-hidden={isDecorationImage ? "true" : undefined}
 			alt={isDecorationImage ? undefined : props.alt}
-			loading="lazy"
 		/>
 	);
 }
diff --git a/app/partials/HeroSection.tsx b/app/partials/HeroSection.tsx
index 6dc2914..55a78b4 100644
--- a/app/partials/HeroSection.tsx
+++ b/app/partials/HeroSection.tsx
@@ -1,5 +1,3 @@
-import type { JSX } from "solid-js";
-
 import blurIndigoImage from "@/images/blur-indigo.webp";
 import blurCyanImage from "@/images/blur-cyan.webp";
 import { HeroBackground } from "./HeroBackground";
@@ -35,16 +33,6 @@ const snippets = [
 	},
 ];
 
-function TrafficLightsIcon(props: JSX.IntrinsicElements["svg"]) {
-	return (
-		<svg aria-hidden="true" viewBox="0 0 42 10" fill="none" {...props}>
-			<circle cx="5" cy="5" r="4.5" />
-			<circle cx="21" cy="5" r="4.5" />
-			<circle cx="37" cy="5" r="4.5" />
-		</svg>
-	);
-}
-
 export function HeroSection() {
 	return (
 		<div class="overflow-hidden bg-slate-900">
@@ -58,14 +46,17 @@ export function HeroSection() {
 							width={530}
 							height={530}
 						/>
+
 						<div class="relative">
 							<p class="inline bg-linear-to-r from-indigo-200 via-violet-400 to-indigo-200 bg-clip-text font-display text-5xl tracking-tight text-transparent">
 								Souviens-toi que tu développeras.
 							</p>
+
 							<p class="mt-3 text-2xl tracking-tight text-slate-400">
 								Découvrez des ressources essentielles pour améliorer tes
 								compétences en développement.
 							</p>
+
 							<div class="mt-8 flex gap-4 md:justify-center lg:justify-start">
 								<Button href="/docs">Accédez aux ressources</Button>
 								<Button
@@ -81,6 +72,7 @@ export function HeroSection() {
 						<div class="absolute inset-x-[-50vw] -top-32 -bottom-48 [mask-image:linear-gradient(transparent,white,white)] lg:-top-32 lg:right-0 lg:-bottom-32 lg:left-[calc(50%+14rem)] lg:[mask-image:none]">
 							<HeroBackground class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 lg:left-0 lg:translate-x-0 lg:translate-y-[-60%]" />
 						</div>
+
 						<div class="relative">
 							<Image
 								class="absolute -top-64 -right-64"
@@ -88,14 +80,18 @@ export function HeroSection() {
 								alt=""
 								width={530}
 								height={530}
+								loading="eager"
 							/>
+
 							<Image
 								class="absolute -right-44 -bottom-40"
 								src={blurIndigoImage}
 								alt=""
 								width={567}
 								height={567}
+								loading="eager"
 							/>
+
 							<div class="absolute inset-0 rounded-2xl bg-linear-to-tr from-violet-300 via-violet-300/70 to-purple-300 opacity-10 blur-lg" />
 							<div class="absolute inset-0 rounded-2xl bg-linear-to-tr from-violet-300 via-violet-300/70 to-purple-300 opacity-10" />