changed offres + added reference to HP

src/pages/index.astro

@@ -3,10 +3,13 @@
 import { l, t, astroI18n } from "astro-i18n";
 astroI18n.init(Astro);
 
+import { getEntry } from "astro:content";
+
 // import stuff
 import BaseLayout from "../layouts/BaseLayout.astro";
 import QuickAccessCard from "../components/QuickAccessCard.astro";
 import ListCards from "../components/ListCards.astro";
+import CardEditorial from "../components/CardEditorial.astro";
 
 const pageTitle = t("accueil");
 
@@ -35,6 +38,9 @@ const localizedSnippets = await getCollection("fragments", ({ data }) => {
 const sortedSnippets = localizedSnippets.sort(
 	(a, b) => b.data.createdAt - a.data.createdAt
 );
+const localizedReferences = await getCollection("references", ({ data }) => {
+	return data.lang === astroI18n.langCode && !data.draft;
+});
 ---
 
 <BaseLayout pageTitle={pageTitle}>
@@ -44,11 +50,14 @@ const sortedSnippets = localizedSnippets.sort(
 			<h2 class="intro__subtitle">{t("index.subtitle")}</h2>
 			<ul class="quick-access__list" role="list">
 				{
-					localizedSections.map((section) => (
-						<li>
-							<QuickAccessCard item={section.frontmatter} />
-						</li>
-					))
+					localizedSections.map(
+						(section) =>
+							section.frontmatter.id && (
+								<li>
+									<QuickAccessCard item={section.frontmatter} />
+								</li>
+							)
+					)
 				}
 			</ul>
 		</section>
@@ -60,6 +69,16 @@ const sortedSnippets = localizedSnippets.sort(
 				<div class="section__container">
 					<div class="flow section__content">
 						<section.Content />
+						{section.frontmatter.reference && (
+							<div class="section__reference">
+								<ListCards
+									list={localizedReferences.filter((ref) => {
+										return ref.slug === section.frontmatter.reference;
+									})}
+									routeName={t("references.slug")}
+								/>
+							</div>
+						)}
 					</div>
 					<div class="section__image">
 						<img
@@ -149,6 +168,7 @@ const sortedSnippets = localizedSnippets.sort(
 
 	/* SECTIONS */
 	.section {
+		--region-space: var(--space-l-3xl);
 		container-name: section;
 		container-type: inline-size;
 	}
@@ -156,7 +176,7 @@ const sortedSnippets = localizedSnippets.sort(
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: var(--space-m-l);
+		gap: var(--space-m-xl);
 	}
 
 	.section :global(h2) {
@@ -177,20 +197,33 @@ const sortedSnippets = localizedSnippets.sort(
 
 	@container section (min-width: 50rem) {
 		.section__container {
+			position: relative;
 			flex-direction: row;
 			align-items: flex-start;
 		}
 		.section__image {
 			order: 1;
 			position: sticky;
-			top: 20px;
+			top: var(--space-3xl);
 			flex-grow: 1;
 			flex-basis: 18rem;
 		}
 		.section__content {
 			order: 2;
 			flex-basis: 0;
-			min-inline-size: 40ch;
+			min-inline-size: 32ch;
+			font-size: var(--size-1);
+		}
+		.section__content :global(h2) {
+			font-size: var(--size-5);
+			line-height: 1.2;
+		}
+		.section__reference {
+			margin-block-start: 50vh;
+			padding-block-end: var(--space-3xl);
+		}
+		.section__reference :global(.card a) {
+			font-size: var(--size-0);
 		}
 	}
 </style>