modification première publication

src/pages/index.astro

@@ -1,8 +1,17 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import Card from '../components/Card.astro';
 ---
+<style>
+	.card-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
+		gap: 2rem;
+		padding: 0;
+	}
+</style>
 
-<Layout title="Bienvenue sur Sweet">
+<Layout title="Bienvenue sur JDRSweetJourney">
 	<h1>Bienvenue sur le projet JDR Sweet Journey !</h1>
 	<h2>L'Ambition</h2>
 	<p>L'objectif est de créer un clone entièrement web de l'application mobile <strong>AFK Journey</strong>. Ce projet sera une vitrine technologique utilisant :</p>
@@ -10,10 +19,35 @@ import Layout from '../layouts/Layout.astro';
 		<li>La modélisation 3D et l'animation (2D et 3D) réalisées avec <strong>Blender</strong>.</li>
 		<li>La retranscription de ces éléments dans le navigateur grâce à <strong>Three.js</strong>.</li>
 	</ul>
+	<ul class="card-grid">
+		<Card
+			href="https://threejs-journey.com"
+			title="🎓 Formation : Three.js Journey"
+			body="Pour garantir une base technique solide, ce projet s'appuie sur les enseignements de Three.js Journey, une formation de référence pour maîtriser Three.js."
+		/>
+	</ul>
 	<p>Si en plus, cette plateforme peut servir de point de repère pour nos aventures de jeu de rôle, c'est une pierre deux coups !</p>
 
 	<h2>Le Voyage</h2>
 	<p>Ce site est aussi un levier pour maîtriser les paradigmes technologiques de demain. Explorez le <strong>journal d'aventure</strong> pour suivre la quête, ou consultez les <strong>logs de construction</strong> pour voir les coulisses techniques.</p>
 
+	<ul class="card-grid">
+		<Card
+			href="/atelier"
+			title="🏜️ Le Sanctuaire des Grains"
+			body="Découvrez les arts et les outils du pèlerin pour façonner le sable et les rêves."
+		/>
+		<Card
+			href="/observatoire"
+			title="🎨 L'Observatoire"
+			body="Explorez les sources d'inspiration : artistes, développeurs, podcasts et jeux qui nourrissent ce projet."
+		/>
+		<Card
+			href="/boussole"
+			title="⚖️ La Boussole Éthique"
+			body="Une réflexion sur les modèles économiques vertueux et ceux à éviter dans le monde du jeu vidéo."
+		/>
+	</ul>
+
 	<p>Quelle ambition, jeune batracien...</p>
 </Layout>