next: iterate on pages

next/components/ParVaguesHeader.js

-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { FaEnvelope } from 'react-icons/fa';
 import styles from '@/styles/parvagues.module.css';
 
 export default function ParVaguesHeader({ eventName = null }) {
+  const [scrolled, setScrolled] = useState(false);
+  
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > window.innerHeight);
+    };
+    
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   return (
     <header 
-      className="sticky top-0 z-50 bg-gradient-to-b from-black/90 to-black/70 backdrop-blur-md transition-all duration-300 border-b border-purple-500/20 shadow-lg"
+      className="fixed top-0 left-0 w-full z-50 bg-gradient-to-b from-black/90 to-black/70 backdrop-blur-md transition-all duration-300 border-b border-purple-500/20 shadow-lg"
     >
       <div className="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
         <div className="flex items-center gap-2">
@@ -37,10 +50,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} transition-all duration-300`}
+          className={`${styles.ctaButton} transition-all duration-300 ${scrolled ? 'bg-purple-600 scale-90' : ''}`}
         >
           <FaEnvelope className="inline mr-2" />
-          Invoquer un live
+          {scrolled ? 'Invoquer' : 'Invoquer un live'}
         </a>
       </div>
     </header>

next/pages/parvagues.js

@@ -36,7 +36,8 @@ function CodeBlock({ children, height = '400px', isTerminal = false }) {
           margin: 0, 
           borderRadius: isTerminal ? '0 0 8px 8px' : '8px',
           height: 'auto',
-          maxHeight: isTerminal ? `calc(${height} - 30px)` : height
+          maxHeight: isTerminal ? `calc(${height} - 30px)` : height,
+          fontSize: '0.85rem'
         }}
       >
         {children}
@@ -374,7 +375,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
             <div className={styles.splitSection}>
               <div>
                 <div 
-                  className={`${styles.bulletPoint} cursor-pointer ${selectedSection === 'potentiel' ? 'text-purple-400' : ''}`}
+                  className={`${styles.bulletPoint} cursor-pointer ${selectedSection === 'potentiel' ? 'text-purple-400 border-l-2 border-purple-400 pl-4' : ''}`}
                   onClick={() => setSelectedSection('potentiel')}
                 >
                   <h3 className="text-xl font-semibold text-purple-400 mb-2">Potentiel</h3>
@@ -382,7 +383,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
                 </div>
                 
                 <div 
-                  className={`${styles.bulletPoint} cursor-pointer ${selectedSection === 'composition' ? 'text-purple-400' : ''}`}
+                  className={`${styles.bulletPoint} cursor-pointer ${selectedSection === 'composition' ? 'text-purple-400 border-l-2 border-purple-400 pl-4' : ''}`}
                   onClick={() => setSelectedSection('composition')}
                 >
                   <h3 className="text-xl font-semibold text-purple-400 mb-2">Composition</h3>
@@ -390,37 +391,23 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
                 </div>
                 
                 <div 
-                  className={`${styles.bulletPoint} cursor-pointer ${selectedSection === 'performance' ? 'text-purple-400' : ''}`}
+                  className={`${styles.bulletPoint} cursor-pointer ${selectedSection === 'performance' ? 'text-purple-400 border-l-2 border-purple-400 pl-4' : ''}`}
                   onClick={() => setSelectedSection('performance')}
                 >
                   <h3 className="text-xl font-semibold text-purple-400 mb-2">Performance</h3>
                   <p className="text-gray-300">Live improvise avec contrôleur MIDI pour une interactivité totale</p>
                 </div>
+
+                <div 
+                  className={`${styles.bulletPoint} cursor-pointer ${selectedSection === 'code' ? 'text-purple-400 border-l-2 border-purple-400 pl-4' : ''}`}
+                  onClick={() => setSelectedSection('code')}
+                >
+                  <h3 className="text-xl font-semibold text-purple-400 mb-2">Code</h3>
+                  <p className="text-gray-300">Voir un exemple de pattern TidalCycles en action</p>
+                </div>
               </div>
               
               <div>
-                <div className="mb-4 flex gap-4">
-                  <button
-                    onClick={() => setSelectedSection('code')}
-                    className={`px-4 py-2 rounded-md transition-all ${
-                      selectedSection === 'code'
-                        ? 'bg-purple-500 text-white'
-                        : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
-                    }`}
-                  >
-                    Code
-                  </button>
-                  <button
-                    onClick={() => setSelectedSection('potentiel')}
-                    className={`px-4 py-2 rounded-md transition-all ${
-                      selectedSection === 'potentiel'
-                        ? 'bg-purple-500 text-white'
-                        : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
-                    }`}
-                  >
-                    Samples
-                  </button>
-                </div>
                 {renderSectionContent()}
               </div>
             </div>

next/pages/parvagues/live/index.js

+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+export default function LiveRedirect() {
+  const router = useRouter();
+  
+  useEffect(() => {
+    router.replace('/parvagues');
+  }, [router]);
+  
+  return (
+    <div className="min-h-screen bg-black text-white flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-2xl mb-4">Redirection...</h1>
+        <p>Vous allez être redirigé vers la page principale de ParVagues.</p>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file