Skip to content

W
www
Commit d2693181 by PLN (Algolia)
Options

iterate

parent 56d72d1d
Showing with 65 additions and 75 deletions
next/components/ParVaguesHeader.js
...@@ -32,16 +32,17 @@ export default function ParVaguesHeader({ eventName = null, title = null }) { ...@@ -32,16 +32,17 @@ export default function ParVaguesHeader({ eventName = null, title = null }) {
return ( return (
<header className="sticky top-0 left-0 w-full z-50 bg-black/80 backdrop-blur-md border-b border-[#d900ff]/20"> <header className="sticky top-0 left-0 w-full z-50 bg-black/80 backdrop-blur-md border-b border-[#d900ff]/20">
<div className={`${styles.neonGradient} opacity-5`}></div> <div className={`${styles.neonGradient} opacity-5 absolute inset-0`}></div>
<div className="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center relative"> <div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
<div className="flex items-center"> {/* Logo and Title with Navigation */}
<div className="flex items-center justify-between w-full">
<Link href="/parvagues" className="flex items-center group"> <Link href="/parvagues" className="flex items-center group">
<div className="h-10 w-auto relative"> <div className="h-10 w-10 relative flex-shrink-0">
<Image <Image
src="/images/parvagues/logo_transparent.png" src="/images/parvagues/logo.png"
alt="ParVagues Logo" alt="ParVagues Logo"
width={200} width={48}
height={200} height={48}
className="object-contain transition-all duration-300 group-hover:filter group-hover:drop-shadow-[0_0_8px_rgba(217,0,255,0.7)]" className="object-contain transition-all duration-300 group-hover:filter group-hover:drop-shadow-[0_0_8px_rgba(217,0,255,0.7)]"
/> />
</div> </div>
...@@ -49,7 +50,7 @@ export default function ParVaguesHeader({ eventName = null, title = null }) { ...@@ -49,7 +50,7 @@ export default function ParVaguesHeader({ eventName = null, title = null }) {
<div className="overflow-hidden ml-2"> <div className="overflow-hidden ml-2">
<span <span
className={`text-white font-bold transition-all duration-500 ${ className={`text-white font-bold transition-all duration-500 ${
showInHeader ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-8' showInHeader || !isHome ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-8'
}`} }`}
style={{ style={{
textShadow: '0 0 5px rgba(217, 0, 255, 0.7), 0 0 10px rgba(217, 0, 255, 0.5)', textShadow: '0 0 5px rgba(217, 0, 255, 0.7), 0 0 10px rgba(217, 0, 255, 0.5)',
...@@ -60,10 +61,11 @@ export default function ParVaguesHeader({ eventName = null, title = null }) { ...@@ -60,10 +61,11 @@ export default function ParVaguesHeader({ eventName = null, title = null }) {
</span> </span>
</div> </div>
</Link> </Link>
</div>
{/* Navigation and CTA */}
<div className="flex items-center space-x-6">
{/* Navigation Links */} {/* Navigation Links */}
<nav className="hidden md:flex items-center space-x-6 text-sm tracking-wider"> <nav className="flex items-center space-x-6 text-sm tracking-wider">
<Link href="/parvagues#music" className="text-gray-300 hover:text-[#ff3d7b] transition-colors"> <Link href="/parvagues#music" className="text-gray-300 hover:text-[#ff3d7b] transition-colors">
Music Music
</Link> </Link>
...@@ -76,13 +78,15 @@ export default function ParVaguesHeader({ eventName = null, title = null }) { ...@@ -76,13 +78,15 @@ export default function ParVaguesHeader({ eventName = null, title = null }) {
</nav> </nav>
{/* CTA button */} {/* CTA button */}
<a <Link
href="/book" href="/book"
className={`${styles.outlineButton} py-2 px-4 text-sm`} className={`${styles.outlineButton} py-2 px-4 text-sm flex items-center whitespace-nowrap`}
> >
<FaEnvelope className="inline mr-2" /> <FaEnvelope className="mr-2 flex-shrink-0" />
Book <span>Book</span>
</a> </Link>
</div>
</div>
</div> </div>
</header> </header>
); );
......
next/pages/parvagues.js
...@@ -77,25 +77,21 @@ export default function ParVagues({ lives }) { ...@@ -77,25 +77,21 @@ export default function ParVagues({ lives }) {
potentiel: { potentiel: {
type: 'carousel', type: 'carousel',
images: [ images: [
'/images/parvagues/samples.png', '/images/parvagues/samples_crop.png',
'/images/parvagues/code.png', // '/images/parvagues/code.png',
'/images/parvagues/code2.png',
'/images/parvagues/code_dense.png'
] ]
}, },
composition: { composition: {
type: 'carousel', type: 'carousel',
images: [ images: [
'/images/parvagues/gear1.jpg', '/images/parvagues/gear1_crop.jpg',
'/images/parvagues/gear2.jpg',
'/images/parvagues/studio1.jpg'
] ]
}, },
performance: { performance: {
type: 'carousel', type: 'carousel',
images: [ images: [
'/images/parvagues/live.jpg', // '/images/parvagues/live.jpg',
'/images/parvagues/code_overlay.jpg' '/images/parvagues/hands.jpg'
] ]
} }
}; };
...@@ -213,46 +209,38 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12) ...@@ -213,46 +209,38 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
if (!sectionContent) return null; if (!sectionContent) return null;
return ( return (
<div className="w-full rounded-lg overflow-hidden shadow-xl"> <div className="w-full flex flex-col items-center">
<div className="relative w-full bg-black flex items-center justify-center"> {/* Image Frame: 4/3 aspect ratio, max-width 50vw */}
<div className="w-[30vw] h-[30vw] max-w-[30vw] max-h-[30vw] flex items-center justify-center p-4"> <div className="w-full max-w-[50vw] aspect-[4/3] bg-black rounded-lg overflow-hidden shadow-xl mb-4">
<div className="relative w-full h-full flex items-center justify-center"> <img
<Image
src={sectionContent.images[currentImageIndex]} src={sectionContent.images[currentImageIndex]}
alt={selectedSection} alt={selectedSection}
width={1280} className="w-full h-full object-cover"
height={1280}
className="w-full h-full object-contain"
priority={true}
/> />
</div> </div>
</div>
{sectionContent.images.length > 1 && ( {sectionContent.images.length > 1 && (
<> <div className="flex items-center">
{/* Left arrow */}
<button <button
onClick={prevSectionImage} onClick={prevSectionImage}
className="absolute left-2 top-1/2 -translate-y-1/2 bg-black/30 hover:bg-black/50 p-2 rounded-full transition-colors" className="bg-black/30 hover:bg-black/50 p-2 rounded-full transition-colors mx-2"
aria-label="Image précédente" aria-label="Image précédente"
> >
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg> </svg>
</button> </button>
{/* Right arrow */}
<button <button
onClick={nextSectionImage} onClick={nextSectionImage}
className="absolute right-2 top-1/2 -translate-y-1/2 bg-black/30 hover:bg-black/50 p-2 rounded-full transition-colors" className="bg-black/30 hover:bg-black/50 p-2 rounded-full transition-colors mx-2"
aria-label="Image suivante" aria-label="Image suivante"
> >
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg> </svg>
</button> </button>
</>
)}
</div> </div>
)}
</div> </div>
); );
}; };
...@@ -275,7 +263,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12) ...@@ -275,7 +263,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
<section className={`${styles.heroSection} mt-0`}> <section className={`${styles.heroSection} mt-0`}>
<div className={styles.posterCollage} ref={backgroundRef}> <div className={styles.posterCollage} ref={backgroundRef}>
{posterImages.map((src, i) => ( {posterImages.map((src, i) => (
<Image <img
key={i} key={i}
src={src} src={src}
alt={`Poster ${i + 1}`} alt={`Poster ${i + 1}`}
...@@ -356,10 +344,10 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12) ...@@ -356,10 +344,10 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
<div className={styles.splitSection}> <div className={styles.splitSection}>
<div> <div>
<div <div
className={`${styles.bulletPoint} cursor-pointer transition-all duration-300 hover:bg-purple-500/10 rounded-lg ${selectedSection === 'potentiel' ? 'text-purple-400 border-l-2 border-purple-400 pl-4' : ''}`} className={`cursor-pointer transition-all duration-300 hover:bg-purple-500/10 rounded-lg p-2 ${selectedSection === 'potentiel' ? 'text-purple-400 border-l-2 border-purple-400 pl-4' : ''}`}
onClick={() => setSelectedSection('potentiel')} onClick={() => setSelectedSection('potentiel')}
> >
<h3 className="text-xl font-semibold text-purple-400 mb-2 group relative inline-block"> <h3 className={`${styles.bulletPoint} text-xl font-semibold text-purple-400 mb-2 group relative inline-block`} style={{ margin: '1em 0', textDecorationLine: 'underline', textDecorationColor: 'darkviolet', textDecorationThickness: '3px' }}>
Potentiel Potentiel
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-500 group-hover:w-full transition-all duration-300"></span> <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-500 group-hover:w-full transition-all duration-300"></span>
</h3> </h3>
...@@ -367,10 +355,10 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12) ...@@ -367,10 +355,10 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
</div> </div>
<div <div
className={`${styles.bulletPoint} cursor-pointer transition-all duration-300 hover:bg-purple-500/10 rounded-lg ${selectedSection === 'composition' ? 'text-purple-400 border-l-2 border-purple-400 pl-4' : ''}`} className={`cursor-pointer transition-all duration-300 hover:bg-purple-500/10 rounded-lg p-2 ${selectedSection === 'composition' ? 'text-purple-400 border-l-2 border-purple-400 pl-4' : ''}`}
onClick={() => setSelectedSection('composition')} onClick={() => setSelectedSection('composition')}
> >
<h3 className="text-xl font-semibold text-purple-400 mb-2 group relative inline-block"> <h3 className={`${styles.bulletPoint} text-xl font-semibold text-purple-400 mb-2 group relative inline-block`} style={{ margin: '1em 0', textDecorationLine: 'underline', textDecorationColor: 'darkviolet', textDecorationThickness: '3px' }}>
Composition Composition
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-500 group-hover:w-full transition-all duration-300"></span> <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-500 group-hover:w-full transition-all duration-300"></span>
</h3> </h3>
...@@ -378,10 +366,10 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12) ...@@ -378,10 +366,10 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
</div> </div>
<div <div
className={`${styles.bulletPoint} cursor-pointer transition-all duration-300 hover:bg-purple-500/10 rounded-lg ${selectedSection === 'performance' ? 'text-purple-400 border-l-2 border-purple-400 pl-4' : ''}`} className={`cursor-pointer transition-all duration-300 hover:bg-purple-500/10 rounded-lg p-2 ${selectedSection === 'performance' ? 'text-purple-400 border-l-2 border-purple-400 pl-4' : ''}`}
onClick={() => setSelectedSection('performance')} onClick={() => setSelectedSection('performance')}
> >
<h3 className="text-xl font-semibold text-purple-400 mb-2 group relative inline-block"> <h3 className={`${styles.bulletPoint} text-xl font-semibold text-purple-400 mb-2 group relative inline-block`} style={{ margin: '1em 0', textDecorationLine: 'underline', textDecorationColor: 'darkviolet', textDecorationThickness: '3px' }}>
Performance Performance
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-500 group-hover:w-full transition-all duration-300"></span> <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-500 group-hover:w-full transition-all duration-300"></span>
</h3> </h3>
...@@ -399,29 +387,27 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12) ...@@ -399,29 +387,27 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
<section id="music" className={styles.sectionContainer}> <section id="music" className={styles.sectionContainer}>
<h2 className="text-3xl font-bold mb-8 text-center"> <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"> <span className="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">
Tracks Sorties
</span> </span>
</h2> </h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="grid grid-cols-2 gap-6 justify-center items-stretch max-w-4xl mx-auto">
{albums.map(album => ( {albums.map(album => (
<div <div
key={album.id} key={album.id}
className="relative rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:transform hover:scale-[1.02] group" className="flex justify-center w-xs py-4">
>
<div className="relative aspect-square w-full">
<Image <Image
src={album.image} src={album.image}
alt={album.title} alt={album.title}
fill width={480}
className="object-cover transition-all duration-300 group-hover:brightness-75" height={480}
className="mx-auto mb-4"
/> />
<div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-70"></div>
</div>
<div className="absolute bottom-0 left-0 right-0 p-4">
<h3 className="text-xl font-bold text-white mb-2">{album.title}</h3>
<div className="flex flex-wrap gap-2 mt-3"> <div className="flex flex-col items-center text-center">
<h3 className="text-lg font-bold text-white mb-3 truncate w-full">{album.title}</h3>
<div className="flex flex-wrap gap-2 justify-center">
{album.links.map(link => ( {album.links.map(link => (
<a <a
key={link.platform} key={link.platform}
...@@ -436,18 +422,9 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12) ...@@ -436,18 +422,9 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
))} ))}
</div> </div>
</div> </div>
{/* Shine effect overlay */}
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:animate-shine pointer-events-none"></div>
</div> </div>
))} ))}
</div> </div>
<div className="flex justify-center mt-10">
<a href="https://www.open.audio/parvagues" target="_blank" rel="noopener noreferrer" className={styles.outlineButton}>
Tous les albums
</a>
</div>
</section> </section>
{/* Section: Performances */} {/* Section: Performances */}
...@@ -464,7 +441,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12) ...@@ -464,7 +441,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
<Link href={`/parvagues/lives/${live.slug}`} key={live.slug} legacyBehavior> <Link href={`/parvagues/lives/${live.slug}`} key={live.slug} legacyBehavior>
<a className="block bg-black/30 border border-purple-500/20 rounded-lg overflow-hidden hover:border-purple-500/70 transition-all hover:shadow-glow hover:-translate-y-1"> <a className="block bg-black/30 border border-purple-500/20 rounded-lg overflow-hidden hover:border-purple-500/70 transition-all hover:shadow-glow hover:-translate-y-1">
<div className="relative h-40"> <div className="relative h-40">
<Image <img
src={`/images/parvagues/lives/${live.year}/${live.slug}/poster.jpg`} src={`/images/parvagues/lives/${live.year}/${live.slug}/poster.jpg`}
alt={live.title} alt={live.title}
fill fill
...@@ -488,11 +465,12 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12) ...@@ -488,11 +465,12 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
))} ))}
</div> </div>
<div className="flex justify-center mt-10"> {/* TODO: Consider a 'all lives' page */}
{/* <div className="flex justify-center mt-10">
<Link href="/parvagues/lives" className={styles.outlineButton}> <Link href="/parvagues/lives" className={styles.outlineButton}>
Voir tous les événements Voir tous les événements
</Link> </Link>
</div> </div> */}
</section> </section>
)} )}
......
next/styles/parvagues.module.css
...@@ -56,8 +56,8 @@ ...@@ -56,8 +56,8 @@
} }
.heroContent { .heroContent {
padding: 2rem 3rem; /* max width should be 80% */
max-width: 1400px; max-width: 80%;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
...@@ -553,3 +553,10 @@ AS MODULE CSS FORBIDS ROOT VARIABLES ...@@ -553,3 +553,10 @@ AS MODULE CSS FORBIDS ROOT VARIABLES
animation: shine 1.5s ease-in-out; animation: shine 1.5s ease-in-out;
} }
*/ */
#section1 > .h3 {
margin: 1em 0;
text-decoration-line: underline;
text-decoration-color: var(--neon-down);
text-decoration-thickness: 3px;
}
\ No newline at end of file
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