From bec9828f68dcb767a03e09373038551c121ed556 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Wed, 27 Sep 2023 16:56:51 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20met=20une=20page=20contact=20=C3=A0=20p?=
 =?UTF-8?q?art?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Card.astro |  5 ++--
 src/pages/contact.astro   | 58 +++++++++++++++++++++++++++++++++++++++
 src/pages/index.astro     | 37 ++++++++-----------------
 3 files changed, 73 insertions(+), 27 deletions(-)
 create mode 100644 src/pages/contact.astro

diff --git a/src/components/Card.astro b/src/components/Card.astro
index 2abd889..18ccba7 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -3,12 +3,13 @@ export interface Props {
 	title: string;
 	href: string;
 	target: string;
+	span?: boolean
 }
 
-const { href, target, title} = Astro.props;
+const { href, target, title, span} = Astro.props;
 ---
 
-<li class="link-card">
+<li class="link-card" style={span ? "grid-column: 1/-1" : ""}>
 	<a href={href} target={target}>
 		<h2>
 			{title}
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
new file mode 100644
index 0000000..23d49c7
--- /dev/null
+++ b/src/pages/contact.astro
@@ -0,0 +1,58 @@
+---
+import Layout from '../layouts/Layout.astro'
+import Card from "../components/Card.astro";
+---
+
+<Layout title="Contact">
+    <main>
+        <a href="../" style="text-decoration: none; color: black; display: inline">
+            <img alt="Logo" src="/logo_les-particules_noir.jpg" style="width:80px; vertical-align: middle; display: inline" />
+        </a>
+        <h1 style="display: inline; margin-left: 0.2em">
+            Contact
+        </h1>
+
+        <ul role="list" class="link-card-grid">
+            <Card
+                    target="_blank"
+                    href="mailto:contact@les-particules.org"
+                    title="Contact"
+            >
+                Écrivez-nous
+            </Card>
+            <Card
+                    href="https://www.facebook.com/LesParticules"
+                    target="_blank"
+                    title="Facebook"
+            >
+                Retrouvez-nous sur Facebook
+            </Card>
+            <Card
+                    href="https://www.instagram.com/les_particules/"
+                    target="_blank"
+                    title="Instagram"
+            >
+                Retrouvez-nous sur Instagram
+            </Card>
+        </ul>
+    </main>
+</Layout>
+
+<style>
+    main {
+        margin: auto;
+        padding: 1.5rem;
+        max-width: 60ch;
+    }
+    h1 {
+        font-size: 3rem;
+        font-weight: 800;
+        margin: 0;
+    }
+    .link-card-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));
+        gap: 1rem;
+        padding: 0;
+    }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 10e4874..53816e5 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,7 +6,7 @@ import Card from '../components/Card.astro';
 <Layout title="Les Particules">
 	<main>
 		<h1>
-		  <img alt="Logo" src="./logo_les-particules_noir.jpg" style="width:80px; vertical-align: middle" />
+		  <img alt="Logo" src="/logo_les-particules_noir.jpg" style="width:80px; vertical-align: middle" />
 		  Les particules
 		</h1>
 		<p class="instructions">
@@ -20,6 +20,15 @@ import Card from '../components/Card.astro';
 			</ul>
 		</div>
 		<ul role="list" class="link-card-grid">
+			<Card
+				title="Les Particules Fines"
+				href="/docs/flyer_cours_impro_adultes_debutant.e.s.pdf"
+				target="_blank"
+				span={true}
+			>
+				Cours d’impro adultes débutant·e·s<br/>
+				<strong>Début des cours d’essai en octobre !</strong>
+			</Card>
 			<Card
 				href="./inscription-newsletter"
 				title="Newsletter"
@@ -27,32 +36,10 @@ import Card from '../components/Card.astro';
 				Tous nos évènements directement dans votre boite aux lettres !
 			</Card>
 			<Card
-				title="Les Particules Fines"
-				href="/docs/flyer_cours_impro_adultes_debutant.e.s.pdf"
-				target="_blank"
-			>
-				Cours d’impro adultes débutant·e·s<br/>
-				<strong>Début des cours d’essai en octobre !</strong>
-			</Card>
-			<Card
-				href="mailto:contact@les-particules.org"
+				href="/contact"
 				title="Contact"
 			>
-				Écrivez-nous
-			</Card>
-			<Card
-			  	href="https://www.facebook.com/LesParticules"
-			  	target="_blank"
-			  	title="Facebook"
-			>
-				Retrouvez-nous sur Facebook
-			</Card>
-			<Card
-				href="https://www.instagram.com/les_particules/"
-				target="_blank"
-				title="Instagram"
-			  >
-				Retrouvez-nous sur Instagram
+				Écrivez-nous ou suivez-nous sur les réseaux
 			</Card>
 		</ul>
 	</main>