added main page images

src/routes/+page.svelte

@@ -1,34 +1,48 @@
+<script lang="ts">
+	import image1 from '$lib/assets/images/image1.jpg?width=600&webp';
+	import image2 from '$lib/assets/images/image2.jpg?width=600&webp';
+	import image3 from '$lib/assets/images/image3.jpg?width=600&webp';
+</script>
+
 <div class="container">
 	<article>
 		<header>Nous sommes</header>
-		<content
-			><p>
+		<content>
+			<p>
 				Une équipe de jeunes de 12 à 18 ans, encadrés par des mentors, participant à la compétition
 				internationale de robotique FIRST, chapeautée par la NASA. Notre défi consiste à concevoir
 				et construite un robot en seulement 6 semaines.
 			</p>
-			<img src="https://via.placeholder.com/400" alt="" />
+			<div class="img" style="background-image: url('{image1}')" />
 		</content>
 	</article>
 
 	<article>
 		<header>Notre mission</header>
-		L'équipe PLS 5618 désire garantir aux élèves une expérience enrichissante et professionnelle en connaissances
-		technologiques et personnelles dans un climat favorisant la confiance et l'autonomie Le projet stimule
-		l'intérêt envers les sciences et technologies tout en développant un sentiment d'appartenance envers
-		l'équipe, l'école et la communauté.
+		<content>
+			<div class="img" style="background-image: url('{image2}')" />
+			<p>
+				L'équipe PLS 5618 désire garantir aux élèves une expérience enrichissante et professionnelle
+				en connaissances technologiques et personnelles dans un climat favorisant la confiance et
+				l'autonomie Le projet stimule l'intérêt envers les sciences et technologies tout en
+				développant un sentiment d'appartenance envers l'équipe, l'école et la communauté.
+			</p>
+		</content>
 	</article>
 
 	<article>
 		<header>Nos valeurs</header>
-		<ul>
-			<li>Esprit d'équipe</li>
-			<li>Organisation</li>
-			<li>Connaissances</li>
-			<li>Confiance en soi et envers les autres</li>
-			<li>Plaisir</li>
-			<li>Amitié</li>
-		</ul>
+		<content>
+			<ul>
+				<li>Esprit d'équipe</li>
+				<li>Organisation</li>
+				<li>Connaissances</li>
+				<li>Confiance en soi et envers les autres</li>
+				<li>Plaisir</li>
+				<li>Amitié</li>
+			</ul>
+			<div class="img" style="background-image: url('{image3}')" />
+		</content>
 	</article>
 
 	<article id="links">
@@ -42,11 +56,20 @@
 		display: flex;
 		flex-flow: row;
 		gap: 30px;
+		flex-grow: 1;
+		flex-basis: 0;
+		justify-content: space-between;
 	}
 
-	img {
+	.img {
+		width: 50%;
+		background-size: cover;
+		background-position: center;
+		//height: auto;
+	}
+
+	p {
 		width: 50%;
-		height: auto;
 	}
 
 	#links {
@@ -57,7 +80,7 @@
 	}
 
 	@media (max-width: 640px) {
-		img {
+		.img {
 			display: none;
 		}
 	}