wip: Header and albums

38870816 · PLN (Algolia) · 9291a1fc · 38870816 · 38870816 · 38870816
Commit 38870816 authored May 11, 2025 by PLN (Algolia)
5 changed files
--- a/next/components/ParVaguesHeader.js
+++ b/next/components/ParVaguesHeader.js
+import React from 'react';
+import Link from 'next/link';
+import { FaEnvelope } from 'react-icons/fa';
+import styles from '@/styles/parvagues.module.css';
+export default function ParVaguesHeader({ isSticky, eventName = null }) {
+  return (
+    <header 
+      className={`${
+        isSticky 
+          ? 'fixed top-0 bg-black/90 backdrop-blur-md border-b border-purple-500/20 shadow-lg z-[100] w-full transition-all duration-300 translate-y-0' 
+          : 'fixed top-0 bg-transparent w-full z-[100] -translate-y-full opacity-0'
+      } transition-all duration-300`}
+    >
+      <div className="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
+        <div className="flex items-center gap-2">
+          <Link href="/parvagues" className="text-purple-400 hover:text-purple-300 transition-colors">
+            ← ParVagues
+          </Link>
+          {isSticky && eventName && (
+            <>
+              <span className="text-gray-500 mx-2">|</span>
+              <span className="text-white">{eventName}</span>
+            </>
+          )}
+        </div>
+        {/* CTA button that appears when sticky */}
+        <a 
+          href="mailto:parvagues@nech.pl?subject=Booking Request&body=Bonjour,%0D%0A%0D%0AJe souhaiterais discuter d'une possibilité de performance live coding."
+          className={`${styles.ctaButton} transition-all duration-300`}
+          style={{ position: 'relative', top: 'auto', right: 'auto' }}
+        >
+          <FaEnvelope className="inline mr-2" />
+          Invoquer un live
+        </a>
+      </div>
+    </header>
+  );
+} 
\ No newline at end of file
--- a/next/pages/parvagues.js
+++ b/next/pages/parvagues.js
@@ -2,13 +2,14 @@ import Head from 'next/head';
 import Link from 'next/link';
 import Image from 'next/image';
 import { useState, useEffect, useRef } from 'react';
-import { getAllLives } from '../lib/livesData';
+import { getAllLives } from '@/lib/livesData';
-import styles from '../styles/parvagues.module.css';
+import styles from '@/styles/parvagues.module.css';
 import dynamic from 'next/dynamic';
+import ParVaguesHeader from '@/components/ParVaguesHeader';
 // React Icons imports
 import { FaSpotify, FaDeezer, FaYoutube, FaApple, FaAmazon, FaInstagram, FaTwitter, FaEnvelope } from 'react-icons/fa';
-  import { SiTidal, SiBluesky, SiMastodon } from 'react-icons/si';
+import { SiTidal, SiBluesky, SiMastodon } from 'react-icons/si';
 import { MdPlayArrow, MdPause } from 'react-icons/md';
 // Dynamically import Prism.js with no SSR
@@ -86,6 +87,7 @@ export default function ParVagues({ lives }) {
  const [selectedSection, setSelectedSection] = useState('code');
  const [sectionImages, setSectionImages] = useState([]);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const [isHeaderSticky, setIsHeaderSticky] = useState(false);
  const backgroundRef = useRef(null);
  const audioRef = useRef(null);
@@ -173,6 +175,21 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
    return () => clearInterval(interval);
  }, []);
+  // Fix scroll handling for sticky header
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollPosition = window.scrollY;
+      const threshold = window.innerHeight * 0.7; // Lower threshold to 70% of viewport height
+      setIsHeaderSticky(scrollPosition > threshold);
+    };
+    // Initial check
+    handleScroll();
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
  const scrollToSection = (e) => {
    e.preventDefault();
    const section = document.getElementById('section1');
@@ -199,8 +216,9 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
  const albums = [
    {
-      id: 'livecoding',
+      id: '2024_opal',
      title: 'Livecoding (Opal Festival 2024)',
+      image: '/images/parvagues/albums/2024_opal/cover.jpg',
      links: [
        { platform: 'YouTube', url: 'https://www.youtube.com/playlist?list=OLAK5uy_l4MF3OCIXcdPMpsHGVX2Q9MiX6oU1zT6g', icon: <FaYoutube /> },
        { platform: 'Deezer', url: 'https://www.deezer.com/us/album/656760591', icon: <FaDeezer /> },
@@ -211,8 +229,9 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
      ]
    },
    {
-      id: 'connexion',
+      id: '2023_connexion',
      title: 'Connexion Etablie EP',
+      image: '/images/parvagues/albums/2023_connexion/cover.jpg',
      links: [
        { platform: 'YouTube', url: 'https://www.youtube.com/watch?v=VODSdQKrzyw&list=OLAK5uy_nzlx3b7YJYzrbagXF5swhENsCg5vJkT_Q', icon: <FaYoutube /> },
        { platform: 'Spotify', url: 'https://open.spotify.com/album/4uzSN6Uv9IwcYeHdRtkUmM', icon: <FaSpotify /> },
@@ -249,24 +268,45 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
        );
      case 'carousel':
        return (
-          <div className="relative w-full aspect-video rounded-lg overflow-hidden shadow-xl">
+          <div className="relative w-full aspect-video rounded-lg overflow-hidden shadow-xl group">
-            {sectionImages.map((image, index) => (
+            {albums.map((album, index) => (
+              <div key={album.id} className="absolute inset-0">
                <Image
-                key={image}
+                  src={album.image}
-                src={image}
+                  alt={album.title}
-                alt={`${selectedSection} ${index + 1}`}
                  fill
-                className={`object-cover transition-opacity duration-500 ${
+                  className={`object-cover transition-all duration-500 group-hover:blur-sm group-hover:opacity-40 ${
-                  index === currentImageIndex ? 'opacity-100' : 'opacity-0'
+                    index === currentAlbumIndex ? 'opacity-100' : 'opacity-0'
                  }`}
                />
+                {index === currentAlbumIndex && (
+                  <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-center justify-center">
+                    <div className="text-white text-center">
+                      <h3 className="text-2xl font-bold mb-4">{album.title}</h3>
+                      <div className="flex justify-center space-x-4">
+                        {album.links.map((link) => (
+                          <a 
+                            key={link.platform} 
+                            href={link.url} 
+                            target="_blank" 
+                            rel="noopener noreferrer"
+                            className="text-3xl hover:text-purple-400 transition-colors"
+                          >
+                            {link.icon}
+                          </a>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
            ))}
            <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2">
-              {sectionImages.map((_, index) => (
+              {albums.map((_, index) => (
                <div
                  key={index}
                  className={`w-2 h-2 rounded-full transition-all ${
-                    index === currentImageIndex
+                    index === currentAlbumIndex
                      ? 'bg-purple-400 w-6'
                      : 'bg-gray-400'
                  }`}
@@ -294,11 +334,14 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
-      <div className="min-h-screen bg-black text-white">
+      <div className="min-h-screen bg-black text-white relative">
-        {/* Sticky CTA */}
+        {/* Replace static CTA with ParVaguesHeader component */}
+        <ParVaguesHeader isSticky={isHeaderSticky} />
+        {/* Fixed top CTA that shows only when not in sticky mode */}
        <a 
          href="mailto:parvagues@nech.pl?subject=Booking Request&body=Bonjour,%0D%0A%0D%0AJe souhaiterais discuter d'une possibilité de performance live coding."
-          className={styles.ctaButton}
+          className={`${styles.ctaButton} ${isHeaderSticky ? 'opacity-0' : 'opacity-100'} transition-opacity duration-300`}
        >
          <FaEnvelope className="inline mr-2" />
          Invoquer un live
@@ -436,19 +479,19 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
              Tracks
            </span>
          </h2>
          <div className={styles.albumGrid}>
            {albums.map(album => (
-              <div key={album.id} className={styles.albumCard}>
+              <div 
-                <h3 className="text-lg font-semibold mb-3">{album.title}</h3>
+                key={album.id} 
-                {!showPlayers[album.id] ? (
+                className={`${styles.albumCard} group relative overflow-hidden aspect-square`}
-                  <button
-                    onClick={() => togglePlayer(album.id)}
-                    className="text-purple-400 hover:text-purple-300 text-sm transition-colors flex items-center gap-2"
              >
-                    <MdPlayArrow /> Afficher les lecteurs
+                <Image
-                  </button>
+                  src={album.image}
-                ) : (
+                  alt={album.title}
+                  fill
+                  className={`${styles.albumImage} object-cover transition-opacity duration-300 group-hover:opacity-50`}
+                />
+                <div className="absolute inset-0 flex flex-col justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black/60">
                  <div className={styles.playerContainer}>
                    {album.links.map(link => (
                      <a
@@ -456,50 +499,21 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
                        href={link.url}
                        target="_blank"
                        rel="noopener noreferrer"
-                        className={styles.playerButton}
+                        className={`${styles.playerButton} text-white hover:text-purple-400`}
                      >
                        {link.icon}
-                        <span>{link.platform}</span>
+                        <span className="ml-2">{link.platform}</span>
                      </a>
                    ))}
                  </div>
-                )}
                </div>
-            ))}
+                <h3 className="absolute bottom-0 left-0 right-0 p-2 text-lg font-semibold text-white bg-black/50 text-center group-hover:hidden">
+                  {album.title}
+                </h3>
              </div>
-        </section>
-        {/* Section 3: Reach me */}
-        <section className={styles.sectionContainer}>
-          <h2 className="text-3xl font-bold mb-8 text-center">
-            <span className="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">
-              Reach me
-            </span>
-          </h2>
-          <div className={styles.socialLinks}>
-            {socialLinks.map(link => (
-              <a 
-                key={link.label}
-                href={link.url} 
-                className={styles.socialLink}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {link.icon}
-                <span>{link.label}</span>
-              </a>
            ))}
          </div>
        </section>
-        {/* Footer */}
-        <footer className={styles.footer}>
-          <p className="text-gray-400">© {new Date().getFullYear()} ParVagues</p>
-          <Link href="/" className="mt-4 inline-block text-gray-500 text-sm hover:text-purple-400 transition-colors">
-            [more PLN Works]
-          </Link>
-        </footer>
      </div>
    </>
  );

--- a/next/pages/parvagues/live/[id].js
+++ b/next/pages/parvagues/live/[id].js
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { getAllLives, getLiveData, getLivesImages } from '../../../lib/livesData';
-import ImageGallery from '../../../components/ImageGallery';
+import ImageGallery from '@/components/ImageGallery';
+import ParVaguesHeader from '@/components/ParVaguesHeader';
 import Head from 'next/head';
 import Link from 'next/link';
 import Image from 'next/image';
 import { marked } from 'marked';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-haskell';
-import styles from '../../../styles/parvagues.module.css';
+import styles from '@/styles/parvagues.module.css';
+import { FaEnvelope, FaYoutube } from 'react-icons/fa';
 export default function Live({ data, slug, images }) {
  const [timeToEvent, setTimeToEvent] = useState(null);
  const [currentTeasing, setCurrentTeasing] = useState(null);
+  const [pastEvent, setPastEvent] = useState(false);
+  const [teasingsToShow, setTeasingsToShow] = useState([]);
  const [posterImage, setPosterImage] = useState(null);
  const [mainColor, setMainColor] = useState('#a855f7');
+  const [isHeaderSticky, setIsHeaderSticky] = useState(false);
+  const headerRef = useRef(null);
-  // Find poster image
+  // Find poster or live image for background
  useEffect(() => {
    if (images && images.length > 0) {
      const poster = images.find(img => img.includes('poster.'));
+      const liveImage = images.find(img => img.includes('live.'));
      if (poster) {
        setPosterImage(poster);
-        // Here you could use a color extraction library like 'color-thief' to get dominant color
+      } else if (liveImage) {
-        // For now, using default purple
+        setPosterImage(liveImage);
      }
+      // Could add color extraction here in the future
    }
  }, [images]);
+  // Handle Prism code highlighting
  useEffect(() => {
    if (typeof window !== 'undefined') {
      Prism.highlightAll();
    }
-  }, [currentTeasing]);
+  }, [teasingsToShow]);
+  // Fix scroll handling for sticky header
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollPosition = window.scrollY;
+      const threshold = window.innerHeight * 0.7; // Lower threshold to 70% of viewport height
+      setIsHeaderSticky(scrollPosition > threshold);
+    };
+    // Initial check
+    handleScroll();
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+  // Calculate time to event and set appropriate teasings
  useEffect(() => {
    const updateCountdown = () => {
      const now = new Date();
      const eventDate = new Date(data.frontmatter.date);
      const timeDiff = eventDate - now;
+      const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
      if (timeDiff > 0) {
-        const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
+        setTimeToEvent(daysDiff);
-        setTimeToEvent(days);
+        setPastEvent(false);
-        // Set appropriate teasing based on days remaining
+        // Set which teasings to show based on days remaining
-        if (days > 7) {
+        const teasings = [];
-          setCurrentTeasing(data.frontmatter.teasing1);
-        } else if (days > 3) {
+        if (data.frontmatter.teasing1) teasings.push(data.frontmatter.teasing1);
-          setCurrentTeasing(data.frontmatter.teasing2);
-        } else {
+        if (daysDiff <= 14 && data.frontmatter.teasing2) {
-          setCurrentTeasing(data.frontmatter.teasing3);
+          teasings.push(data.frontmatter.teasing2);
+        }
+        if (daysDiff <= 7 && data.frontmatter.teasing3) {
+          teasings.push(data.frontmatter.teasing3);
        }
+        // Always show most recent teasing at the top
+        setTeasingsToShow(teasings.reverse());
      } else {
-        setTimeToEvent(-1); // Event has passed
+        setTimeToEvent(-1);
+        setPastEvent(true);
+        // Show all teasings for past events
+        const teasings = [];
+        if (data.frontmatter.teasing3) teasings.push(data.frontmatter.teasing3);
+        if (data.frontmatter.teasing2) teasings.push(data.frontmatter.teasing2);
+        if (data.frontmatter.teasing1) teasings.push(data.frontmatter.teasing1);
+        setTeasingsToShow(teasings);
      }
    };
@@ -60,14 +103,73 @@ export default function Live({ data, slug, images }) {
    const interval = setInterval(updateCountdown, 1000 * 60 * 60); // Update every hour
    return () => clearInterval(interval);
-  }, [data.frontmatter.date]);
+  }, [data.frontmatter]);
+  // Helper function to render markdown
  const renderMarkdown = (content) => {
    if (!content) return { __html: '' };
    const html = marked(content);
    return { __html: html };
  };
+  // Helper function to format date for display
+  const formatEventDate = (dateString) => {
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat('fr-FR', { 
+      day: 'numeric', 
+      month: 'long', 
+      year: 'numeric' 
+    }).format(date);
+  };
+  // Scroll to details section
+  const scrollToSection = (e) => {
+    e.preventDefault();
+    const section = document.getElementById('details-section');
+    section?.scrollIntoView({ behavior: 'smooth' });
+  };
+  // Render YouTube embed if URL is provided
+  const renderYouTubeEmbed = (url) => {
+    if (!url) return null;
+    // Extract YouTube video ID
+    const videoId = url.match(/(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))([^?&]+)/)?.[1];
+    if (!videoId) return null;
+    return (
+      <div className="aspect-video w-full rounded-lg overflow-hidden shadow-lg">
+        <iframe 
+          width="100%" 
+          height="100%" 
+          src={`https://www.youtube.com/embed/${videoId}`}
+          title="YouTube video player" 
+          frameBorder="0" 
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+          allowFullScreen>
+        </iframe>
+      </div>
+    );
+  };
+  // Render audio player if URL is provided
+  const renderAudioPlayer = (url) => {
+    if (!url) return null;
+    return (
+      <div className="my-6">
+        <h3 className="text-xl font-semibold text-purple-400 mb-3">Audio</h3>
+        <audio 
+          controls 
+          className="w-full"
+          src={url}>
+          Votre navigateur ne supporte pas l'élément audio.
+        </audio>
+      </div>
+    );
+  };
  return (
    <>
      <Head>
@@ -75,135 +177,240 @@ export default function Live({ data, slug, images }) {
        <meta name="description" content={data.frontmatter.description} />
      </Head>
+      {/* Above fold section */}
      <div 
        className="min-h-screen text-white relative overflow-hidden"
        style={{
-          background: `radial-gradient(circle at 50% 0%, ${mainColor}20 0%, #000 60%)`
+          background: mainColor ? `radial-gradient(circle at 50% 0%, ${mainColor}20 0%, #000 60%)` : '#000'
        }}
      >
-        {/* Gradient overlay */}
+        {/* Background poster image with blur */}
-        <div className="fixed inset-0" style={{
-          background: `linear-gradient(135deg, #000 0%, ${mainColor}10 50%, #000 100%)`
-        }} />
-        <div className="relative z-10">
-          <nav className="sticky top-0 bg-black/60 backdrop-blur-md border-b border-purple-500/20">
-            <div className="max-w-6xl mx-auto px-4 py-4">
-              <Link href="/parvagues" className="text-purple-400 hover:text-purple-300 transition-colors">
-                ← ParVagues
-              </Link>
-            </div>
-          </nav>
-          <main className="max-w-6xl mx-auto px-4 py-8">
-            {/* Visible Poster Section */}
        {posterImage && (
-              <div className="max-w-2xl mx-auto mb-8">
+          <div className="absolute inset-0 overflow-hidden z-0">
-                <div className="relative w-full aspect-[3/4] rounded-lg overflow-hidden shadow-xl shadow-purple-500/20">
+            <div className="absolute inset-0 w-[120%] h-[120%] -left-[10%] -top-[10%]">
              <Image
                src={posterImage}
                alt={data.frontmatter.title}
                fill
-                    className="object-cover"
+                className="object-cover opacity-40"
+                style={{ 
+                  filter: 'blur(24px)',
+                  transform: 'scale(1.1)',
+                }}
              />
            </div>
+            <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/90"></div>
          </div>
        )}
-            <div className="mb-8 text-center">
+        {/* Use the ParVaguesHeader component */}
-              <h1 className="text-4xl font-bold mb-2">
+        <ParVaguesHeader isSticky={isHeaderSticky} eventName={data.frontmatter.title} />
+        {/* Fixed top CTA that shows only when not in sticky mode */}
+        <a 
+          href="mailto:parvagues@nech.pl?subject=Booking Request&body=Bonjour,%0D%0A%0D%0AJe souhaiterais discuter d'une possibilité de performance live coding."
+          className={`${styles.ctaButton} ${isHeaderSticky ? 'opacity-0' : 'opacity-100'} transition-opacity duration-300`}
+        >
+          <FaEnvelope className="inline mr-2" />
+          Invoquer un live
+        </a>
+        {/* Main hero content */}
+        <div className="relative z-10 flex items-center justify-center min-h-screen pt-16 pb-20">
+          <div className="w-full max-w-6xl mx-auto px-4 md:px-6 lg:px-8">
+            <article className="w-full mx-auto bg-black/80 backdrop-filter backdrop-blur-sm rounded-2xl overflow-hidden border border-purple-500/20 shadow-xl shadow-purple-900/20">
+              <div className="grid md:grid-cols-5 gap-0">
+                {/* Left column: Title and info (3/5 width) */}
+                <div className="md:col-span-3 p-8 md:p-10">
+                  <h1 className="text-4xl md:text-5xl font-bold mb-4">
                    <span className={`bg-gradient-to-r from-purple-400 via-pink-500 to-purple-600 bg-clip-text text-transparent ${styles.glitchEffect}`}>
                      {data.frontmatter.title}
                    </span>
                  </h1>
-              <p className="text-gray-400">{data.frontmatter.location} • {data.frontmatter.date}</p>
+                  <h2 className="text-2xl md:text-3xl font-bold mb-4 text-gray-200">
-              {data.frontmatter.time && (
+                    {data.frontmatter.subtitle || 'Événement ParVagues'}
-                <p className="text-gray-500 text-sm">{data.frontmatter.time}</p>
+                  </h2>
-              )}
+                  <div className="text-gray-300 mb-6">
+                    <p className="text-xl">{data.frontmatter.location}</p>
+                    <p>{formatEventDate(data.frontmatter.date)} {data.frontmatter.time && `• ${data.frontmatter.time}`}</p>
                  </div>
-            {timeToEvent !== null && timeToEvent >= 0 ? (
+                  {/* Countdown or date display */}
-              // Pre-event view
+                  {timeToEvent !== null && (
-              <div className="space-y-8">
+                    <div className="mb-8">
-                <div className="text-center">
+                      {timeToEvent >= 0 ? (
-                  <div className="inline-block bg-gradient-to-r from-purple-500 to-pink-500 p-8 rounded-lg shadow-lg shadow-purple-500/20">
+                        <div className="inline-flex items-center bg-black/60 p-4 rounded-lg border border-purple-500/30">
-                    <div className="text-6xl font-mono mb-2">{timeToEvent}</div>
+                          <div className="text-3xl font-bold mr-3 text-purple-400">J-{timeToEvent}</div>
-                    <div className="text-gray-200">jours restants</div>
+                          <div className="text-gray-300">avant l'événement</div>
                        </div>
+                      ) : (
+                        <div className="inline-flex items-center bg-black/60 p-4 rounded-lg border border-purple-500/30">
+                          <div className="text-gray-300">Événement passé</div>
                        </div>
+                      )}
-                <div className="prose prose-purple prose-invert max-w-none">
-                  <div dangerouslySetInnerHTML={renderMarkdown(data.frontmatter.description)} />
-                </div>
-                {currentTeasing && (
-                  <div className="bg-black/40 backdrop-blur-sm rounded-lg p-6 border border-purple-500/20">
-                    <div 
-                      className="prose prose-purple prose-invert prose-pre:bg-gray-900/50 prose-pre:border prose-pre:border-purple-500/20 max-w-none"
-                      dangerouslySetInnerHTML={renderMarkdown(currentTeasing)}
-                    />
                    </div>
                  )}
-                {data.frontmatter.ctaURL && (
+                  {/* CTA button and scroll link */}
-                  <div className="text-center">
+                  <div className="flex flex-wrap gap-4">
+                    {data.frontmatter.ctaURL && !pastEvent && (
                      <a 
                        href={data.frontmatter.ctaURL}
                        className="inline-block bg-gradient-to-r from-purple-500 to-pink-500 text-white px-8 py-3 rounded-lg font-semibold hover:from-purple-600 hover:to-pink-600 transition-all transform hover:scale-105 shadow-lg shadow-purple-500/20"
                      >
-                      {data.frontmatter.ctaText || data.frontmatter.title}
+                        {data.frontmatter.ctaText || "S'inscrire"}
                      </a>
+                    )}
+                    <a 
+                      href="#details-section" 
+                      onClick={scrollToSection}
+                      className="inline-block bg-black/70 text-white border border-purple-500/30 px-8 py-3 rounded-lg font-semibold hover:bg-black/90 hover:border-purple-500/50 transition-all"
+                    >
+                      Détails
+                    </a>
+                  </div>
+                </div>
+                </div>
+            </article>
+          </div>
+        </div>
+        {/* Floating tags in background */}
+        {data.frontmatter.tags && data.frontmatter.tags.length > 0 && (
+          <div className="absolute inset-0 overflow-hidden pointer-events-none">
+            {data.frontmatter.tags.map((tag, index) => (
+              <div 
+                key={index}
+                className="absolute text-purple-500/20 font-bold text-3xl md:text-6xl uppercase select-none"
+                style={{
+                  top: `${Math.random() * 100}%`,
+                  left: `${Math.random() * 100}%`,
+                  transform: `rotate(${Math.random() * 60 - 30}deg)`,
+                  opacity: 0.1 + Math.random() * 0.3
+                }}
+              >
+                {tag}
+              </div>
+            ))}
          </div>
        )}
      </div>
-            ) : (
+      {/* Below fold section */}
+      <div id="details-section" className="min-h-screen bg-black text-white relative">
+        {/* Gradient overlay */}
+        <div className="absolute inset-0" style={{
+          background: `linear-gradient(135deg, #000 0%, ${mainColor}10 50%, #000 100%)`
+        }} />
+        {/* Content */}
+        <div className="relative z-10">
+          <main className="w-full max-w-6xl mx-auto px-4 md:px-6 lg:px-8 py-16">
+            <article className="bg-black/80 backdrop-filter backdrop-blur-sm rounded-2xl overflow-hidden border border-purple-500/20 shadow-xl shadow-purple-900/20 p-6 md:p-10">
+              {pastEvent ? (
                // Post-event view
+                <div className="space-y-12">
+                  {/* Media section */}
+                  {(data.frontmatter.video || data.frontmatter.audio) && (
                    <div className="space-y-8">
-                <div className="prose prose-purple prose-invert max-w-none">
+                      <h2 className="text-3xl font-bold mb-8">
-                  <div dangerouslySetInnerHTML={renderMarkdown(data.content)} />
+                        <span className="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">
-                </div>
+                          Captures
+                        </span>
+                      </h2>
-                {(data.frontmatter.video || data.frontmatter.audio) && (
+                      {data.frontmatter.video && renderYouTubeEmbed(data.frontmatter.video)}
-                  <div className="grid md:grid-cols-2 gap-6">
+                      {data.frontmatter.audio && renderAudioPlayer(data.frontmatter.audio)}
-                    {data.frontmatter.video && (
-                      <a href={data.frontmatter.video} className="block bg-black/40 backdrop-blur-sm rounded-lg p-6 border border-purple-500/20 hover:border-purple-400 transition-colors">
-                        <h3 className="text-xl font-semibold mb-2">📹 Vidéo</h3>
-                        <p className="text-gray-400">Regarder la session</p>
-                      </a>
-                    )}
-                    {data.frontmatter.audio && (
-                      <a href={data.frontmatter.audio} className="block bg-black/40 backdrop-blur-sm rounded-lg p-6 border border-purple-500/20 hover:border-purple-400 transition-colors">
-                        <h3 className="text-xl font-semibold mb-2">🎵 Audio</h3>
-                        <p className="text-gray-400">Écouter l'enregistrement</p>
-                      </a>
-                    )}
                    </div>
                  )}
+                  {/* Content description */}
+                  <div className="prose prose-purple prose-invert max-w-none">
+                    <div dangerouslySetInnerHTML={renderMarkdown(data.content)} />
+                  </div>
+                  {/* Gallery if available */}
                  {images && images.length > 0 && (
+                    <div className="mt-12">
+                      <h2 className="text-3xl font-bold mb-8">
+                        <span className="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">
+                          Gallerie
+                        </span>
+                      </h2>
                      <ImageGallery images={images} slug={slug} />
+                    </div>
                  )}
-                <details className="group">
+                  {/* Teasings archive */}
-                  <summary className="cursor-pointer p-4 bg-black/30 rounded-lg hover:bg-black/50 transition-colors border border-purple-500/10">
+                  {teasingsToShow.length > 0 && (
+                    <details className="group mt-12">
+                      <summary className="cursor-pointer p-4 bg-black/50 rounded-lg hover:bg-black/70 transition-colors border border-purple-500/10">
                        <span className="font-mono text-purple-400">// decrypt teasings</span>
                      </summary>
                      <div className="mt-4 space-y-4 pl-4 border-l-2 border-purple-500/20">
-                    {[data.frontmatter.teasing1, data.frontmatter.teasing2, data.frontmatter.teasing3].map((teasing, i) => 
+                        {teasingsToShow.map((teasing, i) => (
-                      teasing && (
+                          <div key={i} className="bg-black/40 rounded p-4">
-                        <div key={i} className="bg-black/20 rounded p-4">
                            <div 
-                            className="prose prose-purple prose-invert prose-pre:bg-gray-900/50 prose-pre:border prose-pre:border-purple-500/20 max-w-none text-sm"
+                              className="prose prose-purple prose-invert prose-pre:bg-gray-900/70 prose-pre:border prose-pre:border-purple-500/20 max-w-none text-sm"
                              dangerouslySetInnerHTML={renderMarkdown(teasing)}
                            />
                          </div>
-                      )
+                        ))}
-                    )}
                      </div>
                    </details>
+                  )}
+                </div>
+              ) : (
+                // Pre-event view
+                <div className="space-y-12">
+                  {/* Description */}
+                  <div className="prose prose-purple prose-invert max-w-none">
+                    <div dangerouslySetInnerHTML={renderMarkdown(data.frontmatter.description)} />
+                  </div>
+                  {/* Teasings */}
+                  {teasingsToShow.length > 0 && (
+                    <div className="space-y-8">
+                      <h2 className="text-3xl font-bold mb-4">
+                        <span className="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">
+                          Teasings
+                        </span>
+                      </h2>
+                      {teasingsToShow.map((teasing, i) => (
+                        <div key={i} className="bg-black/60 backdrop-blur-sm rounded-lg p-6 border border-purple-500/20">
+                          <div 
+                            className="prose prose-purple prose-invert prose-pre:bg-gray-900/70 prose-pre:border prose-pre:border-purple-500/20 max-w-none"
+                            dangerouslySetInnerHTML={renderMarkdown(teasing)}
+                          />
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  {/* CTA button if available */}
+                  {data.frontmatter.ctaURL && (
+                    <div className="text-center py-8">
+                      <a 
+                        href={data.frontmatter.ctaURL}
+                        className="inline-block bg-gradient-to-r from-purple-500 to-pink-500 text-white px-8 py-4 rounded-lg font-semibold hover:from-purple-600 hover:to-pink-600 transition-all transform hover:scale-105 shadow-lg shadow-purple-500/20 text-xl"
+                      >
+                        {data.frontmatter.ctaText || data.frontmatter.title}
+                      </a>
                    </div>
                  )}
+                </div>
+              )}
+            </article>
          </main>
+          {/* Footer */}
+          <footer className={styles.footer}>
+            <p className="text-gray-400">© {new Date().getFullYear()} ParVagues</p>
+            <Link href="/parvagues" className="mt-4 inline-block text-gray-500 text-sm hover:text-purple-400 transition-colors">
+              ← Retour à ParVagues
+            </Link>
+          </footer>
        </div>
      </div>
    </>

--- a/next/public/images/parvagues/albums/2023_connexion/cover.jpg
+++ b/next/public/images/parvagues/albums/2023_connexion/cover.jpg
--- a/next/public/images/parvagues/albums/cover.jpg
+++ b/next/public/images/parvagues/albums/cover.jpg