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 }) {
return (
<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="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center relative">
<div className="flex items-center">
<div className={`${styles.neonGradient} opacity-5 absolute inset-0`}></div>
<div className="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
{/* Logo and Title with Navigation */}
<div className="flex items-center justify-between w-full">
<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
src="/images/parvagues/logo_transparent.png"
src="/images/parvagues/logo.png"
alt="ParVagues Logo"
width={200}
height={200}
width={48}
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)]"
/>
</div>
......@@ -49,7 +50,7 @@ export default function ParVaguesHeader({ eventName = null, title = null }) {
<div className="overflow-hidden ml-2">
<span
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={{
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 }) {
</span>
</div>
</Link>
</div>
{/* Navigation and CTA */}
<div className="flex items-center space-x-6">
{/* 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">
Music
</Link>
......@@ -76,13 +78,15 @@ export default function ParVaguesHeader({ eventName = null, title = null }) {
</nav>
{/* CTA button */}
<a
<Link
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" />
Book
</a>
<FaEnvelope className="mr-2 flex-shrink-0" />
<span>Book</span>
</Link>
</div>
</div>
</div>
</header>
);
......
next/pages/parvagues.js
......@@ -77,25 +77,21 @@ export default function ParVagues({ lives }) {
potentiel: {
type: 'carousel',
images: [
'/images/parvagues/samples.png',
'/images/parvagues/code.png',
'/images/parvagues/code2.png',
'/images/parvagues/code_dense.png'
'/images/parvagues/samples_crop.png',
// '/images/parvagues/code.png',
]
},
composition: {
type: 'carousel',
images: [
'/images/parvagues/gear1.jpg',
'/images/parvagues/gear2.jpg',
'/images/parvagues/studio1.jpg'
'/images/parvagues/gear1_crop.jpg',
]
},
performance: {
type: 'carousel',
images: [
'/images/parvagues/live.jpg',
'/images/parvagues/code_overlay.jpg'
// '/images/parvagues/live.jpg',
'/images/parvagues/hands.jpg'
]
}
};
......@@ -213,46 +209,38 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
if (!sectionContent) return null;
return (
<div className="w-full rounded-lg overflow-hidden shadow-xl">
<div className="relative w-full bg-black flex items-center justify-center">
<div className="w-[30vw] h-[30vw] max-w-[30vw] max-h-[30vw] flex items-center justify-center p-4">
<div className="relative w-full h-full flex items-center justify-center">
<Image
<div className="w-full flex flex-col items-center">
{/* Image Frame: 4/3 aspect ratio, max-width 50vw */}
<div className="w-full max-w-[50vw] aspect-[4/3] bg-black rounded-lg overflow-hidden shadow-xl mb-4">
<img
src={sectionContent.images[currentImageIndex]}
alt={selectedSection}
width={1280}
height={1280}
className="w-full h-full object-contain"
priority={true}
className="w-full h-full object-cover"
/>
</div>
</div>
{sectionContent.images.length > 1 && (
<>
{/* Left arrow */}
<div className="flex items-center">
<button
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"
>
<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" />
</svg>
</button>
{/* Right arrow */}
<button
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"
>
<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" />
</svg>
</button>
</>
)}
</div>
)}
</div>
);
};
......@@ -275,7 +263,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
<section className={`${styles.heroSection} mt-0`}>
<div className={styles.posterCollage} ref={backgroundRef}>
{posterImages.map((src, i) => (
<Image
<img
key={i}
src={src}
alt={`Poster ${i + 1}`}
......@@ -356,10 +344,10 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
<div className={styles.splitSection}>
<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')}
>
<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
<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>
......@@ -367,10 +355,10 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
</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')}
>
<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
<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>
......@@ -378,10 +366,10 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
</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')}
>
<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
<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>
......@@ -399,29 +387,27 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
<section id="music" 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">
Tracks
Sorties
</span>
</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 => (
<div
key={album.id}
className="relative rounded-lg overflow-hidden shadow-lg transition-transform duration-300 hover:transform hover:scale-[1.02] group"
>
<div className="relative aspect-square w-full">
className="flex justify-center w-xs py-4">
<Image
src={album.image}
alt={album.title}
fill
className="object-cover transition-all duration-300 group-hover:brightness-75"
width={480}
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 => (
<a
key={link.platform}
......@@ -436,18 +422,9 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
))}
</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 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: Performances */}
......@@ -464,7 +441,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
<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">
<div className="relative h-40">
<Image
<img
src={`/images/parvagues/lives/${live.year}/${live.slug}/poster.jpg`}
alt={live.title}
fill
......@@ -488,11 +465,12 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
))}
</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}>
Voir tous les événements
</Link>
</div>
</div> */}
</section>
)}
......
next/styles/parvagues.module.css
......@@ -56,8 +56,8 @@
}
.heroContent {
padding: 2rem 3rem;
max-width: 1400px;
/* max width should be 80% */
max-width: 80%;
margin: 0 auto;
width: 100%;
min-height: 100vh;
......@@ -553,3 +553,10 @@ AS MODULE CSS FORBIDS ROOT VARIABLES
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