checkpoint header madness

next/components/ParVaguesFooter.js

@@ -17,55 +17,31 @@ export default function ParVaguesFooter() {
   const year = new Date().getFullYear();
 
   return (
-    <footer className="bg-black border-t border-[#d900ff]/20 py-12 relative overflow-hidden">
+    <footer className="bg-black border-t border-[#d900ff]/20 py-8 relative overflow-hidden">
       <div className={styles.neonGradient}></div>
+      
       <div className="max-w-6xl mx-auto px-4 relative z-10">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+      <div className="relative">
+          <Image 
+            src="/images/parvagues/logo_text.png" 
+            alt="ParVagues Logo" 
+            width={48}
+            height={48}
+            className="object-contain" 
+          />
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
           {/* About Column */}
           <div>
-            <div className="flex items-center mb-4">
-              <div className="w-12 h-12 relative mr-3">
-                {/* <Image 
-                  src="/images/parvagues/logo.png" 
-                  alt="ParVagues Logo" 
-                  fill 
-                  className="object-contain" 
-                  sizes="48px"
-                /> */}
-              </div>
-              <h3 className="text-[#d900ff] font-semibold text-lg">ParVagues</h3>
-            </div>
             <p className="text-gray-400 text-sm mb-4">
               Livecoding de musique open-source avec TidalCycles et contrôleur MIDI.<br />
               Performances algorithmiques et création sonore en direct.
             </p>
           </div>
 
-          {/* Navigation Links */}
-          <div className="w-full bg-black py-2">
-            <div className="max-w-6xl mx-auto flex justify-center items-center space-x-6 text-xs tracking-widest uppercase">
-              <Link href="/parvagues#music" className="text-gray-300 hover:text-[#ff3d7b] transition-colors">
-                MUSIQUE
-              </Link>
-              <Link href="/parvagues#performances" className="text-gray-300 hover:text-[#ff3d7b] transition-colors">
-                PERFORMANCES
-              </Link>
-              <Link href="/parvagues#about" className="text-gray-300 hover:text-[#ff3d7b] transition-colors">
-                À PROPOS
-              </Link>
-              <a 
-                href="mailto:parvagues@nech.pl?subject=Booking Request" 
-                className="text-gray-300 hover:text-[#ff3d7b] transition-colors"
-              >
-                RÉSERVER UN LIVE
-              </a>
-            </div>
-          </div>
-
           {/* Social Column */}
-          <div>
-            <h3 className="text-[#d900ff] font-semibold text-lg mb-4">Connect</h3>
-            <div className="flex flex-wrap gap-4">
+          <div className="flex flex-col items-center md:items-end">
+            <div className="flex flex-wrap gap-4 justify-center md:justify-end">
               {socialLinks.map((link, index) => (
                 <a 
                   key={index}
@@ -82,8 +58,29 @@ export default function ParVaguesFooter() {
           </div>
         </div>
 
+        {/* Navigation Links - more compact */}
+        <div className="w-full bg-black py-4 my-4">
+          <div className="flex justify-center items-center space-x-4 text-xs tracking-widest uppercase flex-wrap">
+            <Link href="/parvagues#music" className="text-gray-300 hover:text-[#ff3d7b] transition-colors">
+              MUSIQUE
+            </Link>
+            <Link href="/parvagues#performances" className="text-gray-300 hover:text-[#ff3d7b] transition-colors">
+              PERFORMANCES
+            </Link>
+            <Link href="/parvagues#about" className="text-gray-300 hover:text-[#ff3d7b] transition-colors">
+              À PROPOS
+            </Link>
+            <a 
+              href="mailto:parvagues@nech.pl?subject=Booking Request" 
+              className="text-gray-300 hover:text-[#ff3d7b] transition-colors"
+            >
+              RÉSERVER
+            </a>
+          </div>
+        </div>
+
         {/* Bottom Bar */}
-        <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
+        <div className="border-t border-gray-800 mt-4 pt-4 text-center text-gray-500 text-xs">
           <p>© {year} ParVagues. All code is open-source.</p>
         </div>
       </div>

next/components/ParVaguesHeader.js

-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { FaEnvelope } from 'react-icons/fa';
 import styles from '@/styles/parvagues.module.css';
+import { useRouter } from 'next/router';
 
-export default function ParVaguesHeader({ eventName = null }) {
+// Custom hook to track scroll position
+function useScrolledPast(threshold = 100) {
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => {
+      setScrolled(window.scrollY > threshold);
+    };
+    
+    // Initial check
+    onScroll();
+    
+    window.addEventListener("scroll", onScroll);
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [threshold]);
+
+  return scrolled;
+}
+
+export default function ParVaguesHeader({ eventName = null, title = null }) {
+  const router = useRouter();
+  const isHome = router.pathname === '/parvagues';
+  const showInHeader = useScrolledPast(300);
+  const headerTitle = title || eventName || 'ParVagues';
+  
   return (
     <header 
-      className="fixed top-0 left-0 w-full z-50 bg-black/80 backdrop-blur-md border-b border-[#d900ff]/20 shadow-lg"
+      className="sticky top-0 left-0 w-full z-50 bg-black/80 backdrop-blur-md border-b border-[#d900ff]/20 shadow-lg transition-all duration-300"
     >
       <div className="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
         <div className="flex items-center gap-2">
           <Link href="/parvagues" className="flex items-center">
-            <div className="w-10 h-10 relative mr-2">
+            <div className="h-10 w-auto relative">
               <Image 
-                src="/images/parvagues/favicon.ico" 
+                src="/images/parvagues/logo_transparent.png" 
                 alt="ParVagues Logo" 
-                fill 
+                width={40}
+                height={40}
                 className="object-contain" 
-                sizes="40px"
               />
             </div>
-            <span className="text-[#d900ff] text-xl font-bold">ParVagues</span>
+            
+            {/* Title animation based on scroll */}
+            <div className="overflow-hidden ml-2">
+              <span 
+                className={`text-[#d900ff] text-xl font-bold transform transition-all duration-500 ${
+                  showInHeader ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-8'
+                }`}
+              >
+                {headerTitle}
+              </span>
+            </div>
           </Link>
-          {eventName && (
-            <>
-              <span className="text-gray-500 mx-2">|</span>
-              <span className="text-white">{eventName}</span>
-            </>
-          )}
         </div>
         
         {/* Navigation Links */}
@@ -47,10 +76,10 @@ export default function ParVaguesHeader({ eventName = null }) {
         {/* CTA button */}
         <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} ${showInHeader ? 'scale-90' : 'scale-100'} transition-transform duration-300`}
         >
           <FaEnvelope className="inline mr-2" />
-          Invoquer un live
+          {showInHeader ? 'Invoquer' : 'Invoquer un live'}
         </a>
       </div>
     </header>

next/pages/parvagues.js

@@ -332,7 +332,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
                     <GlitchText 
                       text="ParVagues" 
                       className={styles.glitchEffect} 
-                      burstFrequency={450} 
+                      burstFrequency={4500} 
                     />
                   </h1>
                   <p className={styles.heroSubtitle}>