From 8481d32dd01a37c9d3ea369c72171b7c92e57bff Mon Sep 17 00:00:00 2001
From: ordinarthur <@arthurbarre.js@gmail.com>
Date: Sun, 5 Apr 2026 15:59:28 +0200
Subject: [PATCH] add contact

---
 src/components/Header.astro |   2 +-
 src/pages/contact.astro     | 285 ++++++++++++++++++++++++++++++++++++
 2 files changed, 286 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/contact.astro

diff --git a/src/components/Header.astro b/src/components/Header.astro
index fb7bcad..4e5829a 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -5,7 +5,7 @@ const nav = [
   { label: 'événement', href: '/creations-evenement' },
   { label: 'pérenne', href: '/realisations-perennes' },
   { label: 'processus', href: '/processus' },
-  { label: 'contact', href: 'mailto:contact@aureliebarre.fr' },
+  { label: 'contact', href: '/contact' },
 ];
 ---
 
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
new file mode 100644
index 0000000..567349f
--- /dev/null
+++ b/src/pages/contact.astro
@@ -0,0 +1,285 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+
+const stripImages = [
+  { src: '/images/events/engie/04.jpg', alt: 'Engie' },
+  { src: '/images/events/la-premiere/02.jpeg', alt: 'La Première' },
+  { src: '/images/perennes/devoteam/03.jpg', alt: 'Devoteam' },
+  { src: '/images/events/dior/09.jpeg', alt: 'Dior' },
+];
+---
+
+<BaseLayout title="Contact — Aurélie Barré">
+  <section class="hero">
+    <div class="wrap">
+      <div class="hero__content rv">
+        <h1 class="hero__name">
+          <span class="hero__line hero__line--1">parlons</span>
+          <span class="hero__line hero__line--2">projet</span>
+        </h1>
+        
+        <div class="contact__grid rv" style="--d:1">
+          <!-- Infos de contact -->
+          <div class="contact__info">
+            <div class="contact__group">
+              <span class="label">email</span>
+              <a href="mailto:contact@aureliebarre.fr" class="contact__link">contact@aureliebarre.fr</a>
+            </div>
+            <div class="contact__group">
+              <span class="label">réseaux</span>
+              <div class="contact__socials">
+                <a href="https://instagram.com/aureliebarre" target="_blank" rel="noopener" class="contact__link">instagram</a>
+                <a href="https://linkedin.com/in/aureliebarre" target="_blank" rel="noopener" class="contact__link">linkedin</a>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Formulaire de contact -->
+          <div class="contact__form-wrap">
+            <form class="contact__form" action="mailto:contact@aureliebarre.fr" method="POST" enctype="text/plain">
+              <div class="form__group">
+                <input type="text" id="name" name="name" placeholder=" " required />
+                <label for="name">nom & prénom</label>
+              </div>
+              <div class="form__group">
+                <input type="email" id="email" name="email" placeholder=" " required />
+                <label for="email">adresse email</label>
+              </div>
+              <div class="form__group">
+                <textarea id="message" name="message" placeholder=" " required rows="1"></textarea>
+                <label for="message">votre projet</label>
+              </div>
+              <button type="submit" class="form__submit">
+                envoyer la demande
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+                  <path d="M3 8H13M13 8L9 4M13 8L9 12" stroke="currentColor" stroke-width="1"/>
+                </svg>
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Photo strip: 4 images edge-to-edge -->
+    <div class="hero__strip rv" style="--d:2">
+      {stripImages.map((img, i) => (
+        <div class="hero__strip-img" style={`--i:${i}`}>
+          <img src={img.src} alt={img.alt} />
+        </div>
+      ))}
+    </div>
+  </section>
+</BaseLayout>
+
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap');
+
+  .hero {
+    padding-top: calc(var(--header-h) + 4vh);
+    padding-bottom: 0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .hero__content {
+    padding-bottom: 4rem;
+  }
+
+  .hero__name {
+    font-family: 'Syne', sans-serif;
+    font-size: clamp(4rem, 12vw, 11rem);
+    font-weight: 700;
+    line-height: 0.88;
+    letter-spacing: -0.04em;
+    color: var(--text);
+    margin-bottom: 5rem;
+  }
+
+  .hero__line { display: block; }
+  .hero__line--2 {
+    font-weight: 800;
+    color: transparent;
+    -webkit-text-stroke: 0.02em var(--accent);
+  }
+
+  .contact__grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    padding-left: 0.3rem;
+  }
+
+  /* ---- Left: Infos ---- */
+  .contact__info {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+  }
+
+  .label {
+    display: block;
+    font-size: 0.6rem;
+    letter-spacing: 0.1em;
+    color: var(--text-3);
+    text-transform: lowercase;
+    margin-bottom: 0.5rem;
+  }
+
+  .contact__group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .contact__link {
+    font-family: var(--serif);
+    font-size: clamp(1.2rem, 2vw, 1.8rem);
+    color: var(--text);
+    text-decoration: none;
+    transition: color 0.3s var(--ease);
+  }
+
+  .contact__link:hover {
+    color: var(--accent);
+  }
+
+  .contact__socials {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  /* ---- Right: Form ---- */
+  .contact__form {
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+    max-width: 540px;
+  }
+
+  .form__group {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .form__group input,
+  .form__group textarea {
+    width: 100%;
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid var(--border);
+    padding: 0.5rem 0;
+    font-family: var(--serif);
+    font-size: clamp(1rem, 1.5vw, 1.2rem);
+    color: var(--text);
+    outline: none;
+    transition: border-color 0.4s var(--ease);
+    border-radius: 0; /* iOS override */
+    resize: none;
+  }
+
+  .form__group input:focus,
+  .form__group textarea:focus {
+    border-bottom-color: var(--text);
+  }
+
+  .form__group label {
+    position: absolute;
+    top: 0.6rem;
+    left: 0;
+    font-size: 0.8rem;
+    letter-spacing: 0.05em;
+    color: var(--text-3);
+    text-transform: lowercase;
+    pointer-events: none;
+    transition: 0.4s var(--ease);
+  }
+
+  /* Floating label effect */
+  .form__group input:focus ~ label,
+  .form__group input:not(:placeholder-shown) ~ label,
+  .form__group textarea:focus ~ label,
+  .form__group textarea:not(:placeholder-shown) ~ label {
+    top: -1.2rem;
+    font-size: 0.65rem;
+    color: var(--text-2);
+  }
+
+  .form__submit {
+    align-self: flex-start;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-family: var(--sans);
+    font-size: 0.7rem;
+    letter-spacing: 0.1em;
+    color: var(--text);
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin-top: 1rem;
+    cursor: pointer;
+    text-transform: lowercase;
+    transition: color 0.3s var(--ease);
+  }
+
+  .form__submit:hover {
+    color: var(--accent);
+  }
+
+  /* Photo strip */
+  .hero__strip {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 3px;
+    width: 100%;
+  }
+
+  .hero__strip-img {
+    aspect-ratio: 3 / 2;
+    overflow: hidden;
+  }
+
+  .hero__strip-img img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.8s var(--ease);
+  }
+
+  .hero__strip-img:hover img {
+    transform: scale(1.04);
+  }
+
+  .hero__strip:hover .hero__strip-img:not(:hover) img {
+    filter: brightness(0.85);
+    transition: filter 0.4s, transform 0.8s var(--ease);
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .hero__name {
+      font-size: clamp(3rem, 14vw, 5rem);
+      margin-bottom: 3rem;
+    }
+
+    .hero__strip {
+      grid-template-columns: 1fr 1fr;
+      gap: 2px;
+    }
+    
+    .contact__grid {
+      grid-template-columns: 1fr;
+      gap: 4rem;
+    }
+
+    .contact__info {
+      flex-direction: row;
+      justify-content: space-between;
+      gap: 2rem;
+    }
+  }
+</style>