From cd1ca94b116504b16c1fabc815c805c0a2983740 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Wed, 18 Feb 2026 10:28:57 +0100
Subject: [PATCH] Ajout section Explorer sous le diaporama /photo et
 factorisation HeroViewport
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

La page /photo affiche maintenant une flèche de scroll invitant à découvrir
une section de navigation avec les catégories et le fil photo en dessous du
diaporama, avec un dégradé progressif entre les deux.

Le pattern "hero viewport + scroll indicator" est factorisé dans un composant
HeroViewport réutilisable, utilisé par /photo (mode transparent), les albums
de catégories et les posts du fil photo.
---
 src/components/photo/AlbumHeader.astro    |  44 ++++---
 src/components/photo/CategoryGrid.astro   |  14 +-
 src/components/photo/ExploreSection.astro | 150 ++++++++++++++++++++++
 src/components/photo/HeroViewport.astro   |  33 +++++
 src/pages/photo.astro                     |   8 +-
 5 files changed, 218 insertions(+), 31 deletions(-)
 create mode 100644 src/components/photo/ExploreSection.astro
 create mode 100644 src/components/photo/HeroViewport.astro

diff --git a/src/components/photo/AlbumHeader.astro b/src/components/photo/AlbumHeader.astro
index 6b6e051..9b86945 100644
--- a/src/components/photo/AlbumHeader.astro
+++ b/src/components/photo/AlbumHeader.astro
@@ -1,6 +1,6 @@
 ---
 import { Picture } from 'astro:assets';
-import ScrollIndicator from './ScrollIndicator.astro';
+import HeroViewport from './HeroViewport.astro';
 
 interface Props {
   title: string;
@@ -15,25 +15,26 @@ const { title, description, date, tags, coverImage, scrollTarget = '.info-sectio
 ---
 
 {coverImage && (
-  <div class="hero-image">
-    <Picture src={coverImage} alt={title} widths={[800, 1200, 1920]} formats={['webp']} />
-    <div class="hero-overlay">
-      <div class="hero-content">
-        <h1 class="album-title">{title}</h1>
-        {description && <p class="album-description">{description}</p>}
-        {date && (
-          <time class="album-date">
-            {date.toLocaleDateString('fr-FR', {
-              year: 'numeric',
-              month: 'long',
-              day: 'numeric'
-            })}
-          </time>
-        )}
+  <HeroViewport targetSelector={scrollTarget}>
+    <div class="hero-image">
+      <Picture src={coverImage} alt={title} widths={[800, 1200, 1920]} formats={['webp']} />
+      <div class="hero-overlay">
+        <div class="hero-content">
+          <h1 class="album-title">{title}</h1>
+          {description && <p class="album-description">{description}</p>}
+          {date && (
+            <time class="album-date">
+              {date.toLocaleDateString('fr-FR', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric'
+              })}
+            </time>
+          )}
+        </div>
       </div>
-      <ScrollIndicator targetSelector={scrollTarget} />
     </div>
-  </div>
+  </HeroViewport>
 )}
 
 {tags && tags.length > 0 && (
@@ -47,10 +48,13 @@ const { title, description, date, tags, coverImage, scrollTarget = '.info-sectio
 )}
 
 <style>
+:global(.hero-viewport) {
+  --hero-height: calc(100vh - var(--header-height, 53px) - var(--footer-height, 54px));
+}
+
 .hero-image {
   width: 100%;
-  height: calc(100vh - var(--header-height, 53px) - var(--footer-height, 54px));
-  overflow: hidden;
+  height: 100%;
   position: relative;
 }
 
diff --git a/src/components/photo/CategoryGrid.astro b/src/components/photo/CategoryGrid.astro
index cf4097f..5cbef11 100644
--- a/src/components/photo/CategoryGrid.astro
+++ b/src/components/photo/CategoryGrid.astro
@@ -1,6 +1,6 @@
 ---
 import CategoryNav from './CategoryNav.astro';
-import ScrollIndicator from './ScrollIndicator.astro';
+import HeroViewport from './HeroViewport.astro';
 import Lightbox from './Lightbox.astro';
 import { Picture } from 'astro:assets';
 import { getEntry } from 'astro:content';
@@ -49,7 +49,7 @@ const lightboxImages = images.map(img => ({
   <CategoryNav currentCategory={category} opaque={true} />
 
   <!-- Image hero avec titre en overlay -->
-  <header class="hero-cover">
+  <HeroViewport targetSelector="#thumbnails">
     <div class="hero-image">
       {images[0] && <Picture src={images[0].src} alt={images[0].alt} widths={[800, 1200, 1920]} formats={['webp']} class="hero-bg" />}
       <div class="hero-overlay">
@@ -61,10 +61,9 @@ const lightboxImages = images.map(img => ({
             <p class="hero-subtitle">{categoryData.data.subtitle}</p>
           )}
         </div>
-        <ScrollIndicator targetSelector="#thumbnails" />
       </div>
     </div>
-  </header>
+  </HeroViewport>
 
   <!-- Grille de thumbnails -->
   <div id="thumbnails" class="thumbnails-grid">
@@ -144,11 +143,8 @@ document.addEventListener('scroll', onScroll);
   color: #ffffff;
 }
 
-.hero-cover {
-  position: relative;
-  width: 100%;
-  height: calc(100vh - var(--header-height) - var(--footer-height));
-  overflow: hidden;
+.category-container :global(.hero-viewport) {
+  --hero-height: calc(100vh - var(--header-height) - var(--footer-height));
   margin-top: var(--header-height);
 }
 
diff --git a/src/components/photo/ExploreSection.astro b/src/components/photo/ExploreSection.astro
new file mode 100644
index 0000000..4c87e5f
--- /dev/null
+++ b/src/components/photo/ExploreSection.astro
@@ -0,0 +1,150 @@
+---
+import { getCollection } from 'astro:content';
+
+const photoCategories = await getCollection('photoCategories');
+const sortedCategories = photoCategories.sort((a, b) => (a.data.order || 99) - (b.data.order || 99));
+---
+
+<section id="explore-section" class="explore-section">
+  <div class="explore-content">
+    <div class="explore-card">
+      <h2 class="explore-card-title">Catégories</h2>
+      <p class="explore-card-desc">Parcourir les photos par thème</p>
+      <ul class="category-list">
+        {sortedCategories.map(cat => (
+          <li>
+            <a href={`/photo/albums/${cat.id}`} class="category-link">
+              {cat.data.title}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+
+    <div class="explore-card">
+      <h2 class="explore-card-title">Fil Photo</h2>
+      <p class="explore-card-desc">Parcourir les séries chronologiques, reportages et histoires en images</p>
+      <a href="/photo/blog" class="explore-cta">
+        Voir le fil
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="5" y1="12" x2="19" y2="12"/>
+          <polyline points="12 5 19 12 12 19"/>
+        </svg>
+      </a>
+    </div>
+  </div>
+</section>
+
+<style>
+.explore-section {
+  position: relative;
+  background: #000;
+  z-index: 20;
+  padding: 4rem 2rem;
+  padding-top: 8rem;
+  min-height: 60vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.explore-section::before {
+  content: '';
+  position: absolute;
+  top: -30vh;
+  left: 0;
+  right: 0;
+  height: 30vh;
+  background: linear-gradient(to bottom, transparent, #000);
+  pointer-events: none;
+}
+
+.explore-content {
+  display: flex;
+  gap: 3rem;
+  max-width: 900px;
+  width: 100%;
+}
+
+.explore-card {
+  flex: 1;
+  padding: 2rem;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+}
+
+.explore-card-title {
+  margin: 0 0 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: white;
+}
+
+.explore-card-desc {
+  margin: 0 0 1.5rem;
+  font-size: 0.95rem;
+  color: rgba(255, 255, 255, 0.6);
+  line-height: 1.5;
+}
+
+.category-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.category-link {
+  display: inline-block;
+  padding: 0.4rem 0.9rem;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 20px;
+  color: rgba(255, 255, 255, 0.8);
+  text-decoration: none;
+  font-size: 0.9rem;
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.category-link:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: white;
+}
+
+.explore-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1.2rem;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  color: white;
+  text-decoration: none;
+  font-size: 0.95rem;
+  font-weight: 500;
+  transition: background 0.2s ease;
+}
+
+.explore-cta:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+@media (max-width: 768px) {
+  .explore-section {
+    padding: 3rem 1.25rem;
+  }
+
+  .explore-content {
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .explore-card {
+    padding: 1.5rem;
+  }
+}
+</style>
diff --git a/src/components/photo/HeroViewport.astro b/src/components/photo/HeroViewport.astro
new file mode 100644
index 0000000..837d025
--- /dev/null
+++ b/src/components/photo/HeroViewport.astro
@@ -0,0 +1,33 @@
+---
+import ScrollIndicator from './ScrollIndicator.astro';
+
+interface Props {
+  targetSelector?: string;
+  transparent?: boolean;
+}
+
+const { targetSelector = '#content', transparent = false } = Astro.props;
+---
+
+<div class:list={['hero-viewport', { transparent }]}>
+  <slot />
+  <ScrollIndicator targetSelector={targetSelector} />
+</div>
+
+<style>
+.hero-viewport {
+  position: relative;
+  height: var(--hero-height, 100vh);
+  overflow: hidden;
+}
+
+.hero-viewport.transparent {
+  z-index: 25;
+  pointer-events: none;
+}
+
+.hero-viewport.transparent :global(.scroll-indicator) {
+  pointer-events: auto;
+  bottom: 100px;
+}
+</style>
diff --git a/src/pages/photo.astro b/src/pages/photo.astro
index 049e393..5eee272 100644
--- a/src/pages/photo.astro
+++ b/src/pages/photo.astro
@@ -1,10 +1,14 @@
 ---
 import PhotoLayout from '../layouts/PhotoLayout.astro';
 import PhotoGallery from '../components/photo/PhotoGallery.astro';
+import HeroViewport from '../components/photo/HeroViewport.astro';
+import ExploreSection from '../components/photo/ExploreSection.astro';
 
 const title = "Galerie Photo - Jalil Arfaoui";
 ---
 
-<PhotoLayout title={title}>
+<PhotoLayout title={title} enableScroll={true}>
   <PhotoGallery category="all" />
-</PhotoLayout>
\ No newline at end of file
+  <HeroViewport targetSelector="#explore-section" transparent />
+  <ExploreSection />
+</PhotoLayout>