Skip to content

W
www
Commit 242c66eb by PLN (Algolia)
Options

checkpoint header madness

parent 33f858b7
Showing with 81 additions and 55 deletions
next/components/ParVaguesFooter.js
...@@ -17,55 +17,31 @@ export default function ParVaguesFooter() { ...@@ -17,55 +17,31 @@ export default function ParVaguesFooter() {
const year = new Date().getFullYear(); const year = new Date().getFullYear();
return ( 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={styles.neonGradient}></div>
<div className="max-w-6xl mx-auto px-4 relative z-10"> <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">
{/* About Column */} <Image
<div> src="/images/parvagues/logo_text.png"
<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" alt="ParVagues Logo"
fill width={48}
height={48}
className="object-contain" className="object-contain"
sizes="48px" />
/> */}
</div>
<h3 className="text-[#d900ff] font-semibold text-lg">ParVagues</h3>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{/* About Column */}
<div>
<p className="text-gray-400 text-sm mb-4"> <p className="text-gray-400 text-sm mb-4">
Livecoding de musique open-source avec TidalCycles et contrôleur MIDI.<br /> Livecoding de musique open-source avec TidalCycles et contrôleur MIDI.<br />
Performances algorithmiques et création sonore en direct. Performances algorithmiques et création sonore en direct.
</p> </p>
</div> </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 */} {/* Social Column */}
<div> <div className="flex flex-col items-center md:items-end">
<h3 className="text-[#d900ff] font-semibold text-lg mb-4">Connect</h3> <div className="flex flex-wrap gap-4 justify-center md:justify-end">
<div className="flex flex-wrap gap-4">
{socialLinks.map((link, index) => ( {socialLinks.map((link, index) => (
<a <a
key={index} key={index}
...@@ -82,8 +58,29 @@ export default function ParVaguesFooter() { ...@@ -82,8 +58,29 @@ export default function ParVaguesFooter() {
</div> </div>
</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 */} {/* 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> <p>© {year} ParVagues. All code is open-source.</p>
</div> </div>
</div> </div>
......
next/components/ParVaguesHeader.js
import React from 'react'; import React, { useState, useEffect } from 'react';
import Link from 'next/link'; import Link from 'next/link';
import Image from 'next/image'; import Image from 'next/image';
import { FaEnvelope } from 'react-icons/fa'; import { FaEnvelope } from 'react-icons/fa';
import styles from '@/styles/parvagues.module.css'; import styles from '@/styles/parvagues.module.css';
import { useRouter } from 'next/router';
// 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';
export default function ParVaguesHeader({ eventName = null }) {
return ( return (
<header <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="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Link href="/parvagues" className="flex items-center"> <Link href="/parvagues" className="flex items-center">
<div className="w-10 h-10 relative mr-2"> <div className="h-10 w-auto relative">
<Image <Image
src="/images/parvagues/favicon.ico" src="/images/parvagues/logo_transparent.png"
alt="ParVagues Logo" alt="ParVagues Logo"
fill width={40}
height={40}
className="object-contain" className="object-contain"
sizes="40px"
/> />
</div> </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> </Link>
{eventName && (
<>
<span className="text-gray-500 mx-2">|</span>
<span className="text-white">{eventName}</span>
</>
)}
</div> </div>
{/* Navigation Links */} {/* Navigation Links */}
...@@ -47,10 +76,10 @@ export default function ParVaguesHeader({ eventName = null }) { ...@@ -47,10 +76,10 @@ export default function ParVaguesHeader({ eventName = null }) {
{/* CTA button */} {/* CTA button */}
<a <a
href="mailto:parvagues@nech.pl?subject=Booking Request&body=Bonjour,%0D%0A%0D%0AJe souhaiterais discuter d'une possibilité de performance live coding." 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" /> <FaEnvelope className="inline mr-2" />
Invoquer un live {showInHeader ? 'Invoquer' : 'Invoquer un live'}
</a> </a>
</div> </div>
</header> </header>
......
next/pages/parvagues.js
...@@ -332,7 +332,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12) ...@@ -332,7 +332,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
<GlitchText <GlitchText
text="ParVagues" text="ParVagues"
className={styles.glitchEffect} className={styles.glitchEffect}
burstFrequency={450} burstFrequency={4500}
/> />
</h1> </h1>
<p className={styles.heroSubtitle}> <p className={styles.heroSubtitle}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment