From 4c444dc68288eafac500fc3a64d9fa689830cc34 Mon Sep 17 00:00:00 2001
From: ordinarthur <@arthurbarre.js@gmail.com>
Date: Sun, 5 Apr 2026 15:11:41 +0200
Subject: [PATCH] add better hero

---
 .astro/types.d.ts           |   1 +
 src/components/Header.astro |   2 +-
 src/pages/index.astro       | 180 +++++++++++++++++++++---------------
 3 files changed, 107 insertions(+), 76 deletions(-)

diff --git a/.astro/types.d.ts b/.astro/types.d.ts
index f964fe0..03d7cc4 100644
--- a/.astro/types.d.ts
+++ b/.astro/types.d.ts
@@ -1 +1,2 @@
 /// <reference types="astro/client" />
+/// <reference path="content.d.ts" />
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
index d6dcb09..6858712 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,6 +1,6 @@
 ---
 const currentPath = Astro.url.pathname;
-const isHome = currentPath === '/';
+const isHome = false; // hero is now white bg, no dark variant needed
 const nav = [
   { label: 'projets', href: '/creations-evenement' },
   { label: 'pérenne', href: '/realisations-perennes' },
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c11257b..baf11f2 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,9 +2,7 @@
 import BaseLayout from '../layouts/BaseLayout.astro';
 import { getMockFeaturedProjects, getMockProjects } from '../lib/mock-data';
 
-const featured = getMockFeaturedProjects();
 const allProjects = getMockProjects();
-// Pick 6 best projects for the index
 const showcase = [
   allProjects.find(p => p.slug.current === 'moet-chandon'),
   allProjects.find(p => p.slug.current === 'dior-christmas'),
@@ -14,30 +12,47 @@ const showcase = [
   allProjects.find(p => p.slug.current === 'ami'),
 ].filter(Boolean);
 
+// 4 images for the hero strip
+const stripImages = [
+  { src: '/images/events/alula/06.jpg', alt: 'AlUla' },
+  { src: '/images/events/ami/04.jpg', alt: 'AMI Paris' },
+  { src: '/images/perennes/cisco/03.jpeg', alt: 'Cisco' },
+  { src: '/images/events/moet/05.jpg', alt: 'Moët' },
+];
+
 const allEvents = getMockProjects('event');
 const allPerennes = getMockProjects('perenne');
 ---
 
 <BaseLayout>
-  <!-- ====== HERO: full-viewport image with name overlay ====== -->
+  <!-- ====== HERO: white bg, big typo, photo strip below ====== -->
   <section class="hero">
-    <div class="hero__img">
-      <img src="/images/events/dior/01.jpeg" alt="Dior Christmas" />
+    <div class="wrap">
+      <div class="hero__content">
+        <h1 class="hero__name">
+          <span class="hero__line hero__line--1">Aurélie</span>
+          <span class="hero__line hero__line--2">Barré</span>
+        </h1>
+        <div class="hero__info">
+          <p class="hero__role">directrice artistique<br />& design d'intérieur</p>
+          <div class="hero__scroll-hint">
+            <div class="hero__scroll-line"></div>
+          </div>
+        </div>
+      </div>
     </div>
-    <div class="hero__content">
-      <h1 class="hero__name">
-        <span class="hero__line">Aurélie</span>
-        <span class="hero__line">Barré</span>
-      </h1>
-      <p class="hero__role">directrice artistique & design d'intérieur</p>
-    </div>
-    <div class="hero__scroll">
-      <span>scroll</span>
-      <div class="hero__scroll-line"></div>
+
+    <!-- Photo strip: 4 images edge-to-edge -->
+    <div class="hero__strip">
+      {stripImages.map((img, i) => (
+        <div class="hero__strip-img" style={`--i:${i}`}>
+          <img src={img.src} alt={img.alt} />
+        </div>
+      ))}
     </div>
   </section>
 
-  <!-- ====== FEATURED: hover-reveal image grid ====== -->
+  <!-- ====== FEATURED: asymmetric grid ====== -->
   <section class="feat">
     <div class="wrap">
       <span class="label rv">sélection</span>
@@ -65,7 +80,7 @@ const allPerennes = getMockProjects('perenne');
     </div>
   </section>
 
-  <!-- ====== PROJECT INDEX: text list with hover image ====== -->
+  <!-- ====== PROJECT INDEX ====== -->
   <section class="idx">
     <div class="wrap">
       <div class="idx__head">
@@ -114,12 +129,12 @@ const allPerennes = getMockProjects('perenne');
     </div>
   </section>
 
-  <!-- ====== ABOUT TEASER ====== -->
+  <!-- ====== ABOUT ====== -->
   <section class="about">
     <div class="wrap">
       <div class="about__inner rv">
         <p class="about__text">
-          Aurélie Barré conçoit des espaces qui racontent. Du siège social au lancement produit,
+          Du siège social au lancement produit,
           chaque projet naît d'une écoute attentive et se construit dans le souci du détail.
         </p>
         <a href="/processus" class="about__link">
@@ -182,75 +197,61 @@ const allPerennes = getMockProjects('perenne');
 <style>
   /* ---- Hero ---- */
   .hero {
-    position: relative;
-    height: 100vh;
-    overflow: hidden;
-  }
-
-  .hero__img {
-    position: absolute;
-    inset: 0;
-  }
-
-  .hero__img img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    filter: brightness(0.7);
+    padding-top: calc(var(--header-h) + 4vh);
+    padding-bottom: 0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
   }
 
   .hero__content {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 0 var(--pad) 8vh;
-    z-index: 2;
+    padding-bottom: 3rem;
   }
 
   .hero__name {
-    font-size: clamp(3.5rem, 10vw, 9rem);
-    line-height: 0.92;
-    color: #fff;
-    letter-spacing: -0.03em;
-    margin-bottom: 1.5rem;
+    font-size: clamp(4rem, 12vw, 11rem);
+    line-height: 0.88;
+    letter-spacing: -0.04em;
+    color: var(--text);
+    margin-bottom: 2rem;
   }
 
   .hero__line {
     display: block;
   }
 
+  .hero__line--2 {
+    font-style: italic;
+    color: var(--text-2);
+  }
+
+  .hero__info {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+
   .hero__role {
     font-family: var(--sans);
     font-size: 0.7rem;
     font-weight: 300;
-    letter-spacing: 0.12em;
-    color: rgba(255,255,255,0.65);
+    letter-spacing: 0.1em;
+    line-height: 1.7;
+    color: var(--text-3);
     max-width: none;
   }
 
-  .hero__scroll {
-    position: absolute;
-    bottom: 3vh;
-    right: var(--pad);
+  .hero__scroll-hint {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 8px;
-    z-index: 2;
-  }
-
-  .hero__scroll span {
-    font-size: 0.55rem;
-    letter-spacing: 0.2em;
-    color: rgba(255,255,255,0.45);
-    writing-mode: vertical-rl;
   }
 
   .hero__scroll-line {
     width: 1px;
-    height: 40px;
-    background: rgba(255,255,255,0.25);
+    height: 50px;
+    background: var(--border);
     position: relative;
     overflow: hidden;
   }
@@ -262,8 +263,8 @@ const allPerennes = getMockProjects('perenne');
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(255,255,255,0.8);
-    animation: scrollLine 2s ease-in-out infinite;
+    background: var(--text-3);
+    animation: scrollLine 2.5s ease-in-out infinite;
   }
 
   @keyframes scrollLine {
@@ -272,9 +273,39 @@ const allPerennes = getMockProjects('perenne');
     100% { top: 100%; }
   }
 
+  /* Photo strip — 4 images, edge to edge, no padding */
+  .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);
+  }
+
+  /* Dim siblings */
+  .hero__strip:hover .hero__strip-img:not(:hover) img {
+    filter: brightness(0.85);
+    transition: filter 0.4s, transform 0.8s var(--ease);
+  }
+
   /* ---- Featured Grid ---- */
   .feat {
-    padding: 10rem 0 6rem;
+    padding: 8rem 0 6rem;
   }
 
   .feat .label {
@@ -295,7 +326,6 @@ const allPerennes = getMockProjects('perenne');
     color: inherit;
   }
 
-  /* Asymmetric placement — each item gets its own span */
   .feat__item:nth-child(1) { grid-column: 1 / 8; }
   .feat__item:nth-child(2) { grid-column: 8 / 13; }
   .feat__item:nth-child(3) { grid-column: 1 / 5; }
@@ -323,7 +353,6 @@ const allPerennes = getMockProjects('perenne');
     transform: scale(1.04);
   }
 
-  /* Dim siblings on any hover */
   .feat__grid:hover .feat__item:not(:hover) .feat__img img {
     filter: brightness(0.85);
   }
@@ -464,6 +493,15 @@ const allPerennes = getMockProjects('perenne');
 
   /* ---- Responsive ---- */
   @media (max-width: 768px) {
+    .hero__name {
+      font-size: clamp(3rem, 14vw, 5rem);
+    }
+
+    .hero__strip {
+      grid-template-columns: 1fr 1fr;
+      gap: 2px;
+    }
+
     .feat__grid {
       grid-template-columns: 1fr 1fr;
       gap: 0.75rem;
@@ -476,19 +514,11 @@ const allPerennes = getMockProjects('perenne');
     .feat__item:nth-child(5) { grid-column: 1 / 2; }
     .feat__item:nth-child(6) { grid-column: 2 / 3; }
 
-    .feat__item:nth-child(2) .feat__img,
-    .feat__item:nth-child(3) .feat__img { aspect-ratio: 3 / 4; }
-
     .idx__row {
       grid-template-columns: 2rem 1fr 3rem;
     }
 
     .idx__client { display: none; }
-
     .cursor-img { display: none; }
-
-    .hero__name {
-      font-size: clamp(2.8rem, 12vw, 5rem);
-    }
   }
 </style>