Skip to content

W
www
Commit 33f858b7 by PLN (Algolia)
Options

feat(parvagues): Title++

parent fc9f96aa
Showing with 437 additions and 191 deletions
next/components/GlitchText.js 0 → 100644
import { useState, useEffect, useRef } from 'react';
export default function GlitchText({ text, className, burstFrequency = 30000 }) {
const [displayText, setDisplayText] = useState(text);
const [isBursting, setIsBursting] = useState(false);
const burstTimeoutRef = useRef(null);
const glitchIntervalRef = useRef(null);
// Collection of diacritical marks to add to characters
const diacritics = [
'\u0301', // Acute accent
'\u0300', // Grave accent
'\u0308', // Diaeresis
'\u0303', // Tilde
'\u0327', // Cedilla
'\u0306', // Breve
'\u0304', // Macron
'\u0302', // Circumflex
'\u030C', // Caron
'\u0307', // Dot above
'\u0328', // Ogonek
'\u0323', // Dot below
'\u0331', // Macron below
'\u0337', // Short overlay
];
// More intense effects for burst mode
const cursedCombiningMarks = [
'\u035C', // Double breve below
'\u035F', // Combining double macron below
'\u0360', // Combining double tilde
'\u0361', // Combining double inverted breve
'\u0362', // Combining double rightwards arrow below
'\u0489', // Combining cyrillic millions sign
'\u036F', // Combining latin small letter x
'\u033E', // Combining vertical tilde
'\u035D', // Combining double breve
'\u0346', // Combining bridge above
'\u031A', // Combining left angle above
'\u0359', // Combining asterisk below
];
const applyRandomDiacritic = (char) => {
// Don't apply diacritics to spaces
if (char === ' ') return char;
const shouldAddDiacritic = Math.random() < (isBursting ? 0.8 : 0.1);
if (!shouldAddDiacritic) return char;
// During bursts, possibly apply multiple diacritics
if (isBursting && Math.random() < 0.4) {
const numMarks = Math.floor(Math.random() * 3) + 1;
let result = char;
const allMarks = [...diacritics, ...cursedCombiningMarks];
for (let i = 0; i < numMarks; i++) {
const mark = allMarks[Math.floor(Math.random() * allMarks.length)];
result += mark;
}
return result;
}
// Normal mode - just add a single diacritic
const diacritic = diacritics[Math.floor(Math.random() * diacritics.length)];
return char + diacritic;
};
const glitchText = () => {
const glitchIntensity = isBursting ? 0.8 : 0.05;
// Apply glitch to the text
const glitchedText = Array.from(text).map(char => {
// Chance to apply a diacritic
if (Math.random() < glitchIntensity) {
return applyRandomDiacritic(char);
}
return char;
}).join('');
setDisplayText(glitchedText);
};
const startBurst = () => {
setIsBursting(true);
// Clear any existing interval
if (glitchIntervalRef.current) {
clearInterval(glitchIntervalRef.current);
}
// Create a faster interval during burst
glitchIntervalRef.current = setInterval(glitchText, 100);
// End burst after 1-2 seconds
setTimeout(() => {
setIsBursting(false);
clearInterval(glitchIntervalRef.current);
glitchIntervalRef.current = setInterval(glitchText, 2000);
}, 1000 + Math.random() * 1000);
};
// Setup effect - runs when component mounts or when burstFrequency changes
useEffect(() => {
// Clean up any existing intervals and timeouts
if (glitchIntervalRef.current) {
clearInterval(glitchIntervalRef.current);
}
if (burstTimeoutRef.current) {
clearTimeout(burstTimeoutRef.current);
}
// Initial setup - slow glitch every 2 seconds
glitchIntervalRef.current = setInterval(glitchText, 2000);
// Set up random bursts
const scheduleBurst = () => {
const nextBurstTime = burstFrequency + (Math.random() * burstFrequency * 0.5);
burstTimeoutRef.current = setTimeout(() => {
startBurst();
scheduleBurst();
}, nextBurstTime);
};
// Trigger immediate glitch to show effect immediately
glitchText();
// Schedule the first burst
scheduleBurst();
// Cleanup on unmount or when dependencies change
return () => {
clearInterval(glitchIntervalRef.current);
clearTimeout(burstTimeoutRef.current);
};
}, [burstFrequency]); // Add burstFrequency as a dependency
return (
<span className={className} data-text={text}>
{displayText}
</span>
);
}
\ No newline at end of file
next/components/ParVaguesFooter.js
import React from 'react'; import React from 'react';
import Link from 'next/link'; import Link from 'next/link';
import Image from 'next/image';
import { FaEnvelope, FaInstagram, FaTwitter } from 'react-icons/fa'; import { FaEnvelope, FaInstagram, FaTwitter } from 'react-icons/fa';
import { SiMastodon, SiBluesky } from 'react-icons/si'; import { SiMastodon, SiBluesky } from 'react-icons/si';
import styles from '@/styles/parvagues.module.css'; import styles from '@/styles/parvagues.module.css';
...@@ -16,51 +17,54 @@ export default function ParVaguesFooter() { ...@@ -16,51 +17,54 @@ export default function ParVaguesFooter() {
const year = new Date().getFullYear(); const year = new Date().getFullYear();
return ( return (
<footer className="bg-black border-t border-purple-500/20 py-12"> <footer className="bg-black border-t border-[#d900ff]/20 py-12 relative overflow-hidden">
<div className="max-w-6xl mx-auto px-4"> <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="grid grid-cols-1 md:grid-cols-3 gap-8">
{/* About Column */} {/* About Column */}
<div> <div>
<h3 className="text-purple-400 font-semibold text-lg mb-4">ParVagues</h3> <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"> <p className="text-gray-400 text-sm mb-4">
Livecoding de musique open-source avec TidalCycles et contrôleur MIDI. 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>
{/* Links Column */} {/* Navigation Links */}
<div> <div className="w-full bg-black py-2">
<h3 className="text-purple-400 font-semibold text-lg mb-4">Explorez</h3> <div className="max-w-6xl mx-auto flex justify-center items-center space-x-6 text-xs tracking-widest uppercase">
<ul className="space-y-2 text-sm"> <Link href="/parvagues#music" className="text-gray-300 hover:text-[#ff3d7b] transition-colors">
<li> MUSIQUE
<Link href="/parvagues#music" className="text-gray-400 hover:text-purple-300 transition-colors"> </Link>
Musique <Link href="/parvagues#performances" className="text-gray-300 hover:text-[#ff3d7b] transition-colors">
</Link> PERFORMANCES
</li> </Link>
<li> <Link href="/parvagues#about" className="text-gray-300 hover:text-[#ff3d7b] transition-colors">
<Link href="/parvagues#performances" className="text-gray-400 hover:text-purple-300 transition-colors"> À PROPOS
Performances </Link>
</Link> <a
</li> href="mailto:parvagues@nech.pl?subject=Booking Request"
<li> className="text-gray-300 hover:text-[#ff3d7b] transition-colors"
<Link href="/parvagues#about" className="text-gray-400 hover:text-purple-300 transition-colors"> >
À propos RÉSERVER UN LIVE
</Link> </a>
</li> </div>
<li>
<a
href="mailto:parvagues@nech.pl?subject=Booking Request"
className="text-gray-400 hover:text-purple-300 transition-colors"
>
Réserver un live
</a>
</li>
</ul>
</div> </div>
{/* Social Column */} {/* Social Column */}
<div> <div>
<h3 className="text-purple-400 font-semibold text-lg mb-4">Connect</h3> <h3 className="text-[#d900ff] font-semibold text-lg mb-4">Connect</h3>
<div className="flex flex-wrap gap-4"> <div className="flex flex-wrap gap-4">
{socialLinks.map((link, index) => ( {socialLinks.map((link, index) => (
<a <a
...@@ -68,7 +72,7 @@ export default function ParVaguesFooter() { ...@@ -68,7 +72,7 @@ export default function ParVaguesFooter() {
href={link.url} href={link.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="bg-gray-800 hover:bg-purple-900 text-white p-3 rounded-full transition-colors" className="bg-gray-800 hover:bg-[#8900b3]/60 text-white p-3 rounded-full transition-colors shadow-md hover:shadow-[#d900ff]/40"
aria-label={link.label} aria-label={link.label}
> >
{link.icon} {link.icon}
......
next/components/ParVaguesHeader.js
import React, { useState, useEffect } from 'react'; import React from 'react';
import Link from 'next/link'; import Link from 'next/link';
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';
export default function ParVaguesHeader({ eventName = null }) { 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 ( return (
<header <header
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" className="fixed top-0 left-0 w-full z-50 bg-black/80 backdrop-blur-md border-b border-[#d900ff]/20 shadow-lg"
> >
<div className="max-w-6xl mx-auto px-4 py-4 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="text-purple-400 hover:text-purple-300 transition-colors"> <Link href="/parvagues" className="flex items-center">
ParVagues <div className="w-10 h-10 relative mr-2">
<Image
src="/images/parvagues/favicon.ico"
alt="ParVagues Logo"
fill
className="object-contain"
sizes="40px"
/>
</div>
<span className="text-[#d900ff] text-xl font-bold">ParVagues</span>
</Link> </Link>
{eventName && ( {eventName && (
<> <>
...@@ -36,13 +33,13 @@ export default function ParVaguesHeader({ eventName = null }) { ...@@ -36,13 +33,13 @@ export default function ParVaguesHeader({ eventName = null }) {
{/* Navigation Links */} {/* Navigation Links */}
<div className="hidden md:flex items-center space-x-6 text-sm"> <div className="hidden md:flex items-center space-x-6 text-sm">
<Link href="/parvagues#music" className="text-white hover:text-purple-300 transition-colors"> <Link href="/parvagues#music" className="text-white hover:text-[#ff3d7b] transition-colors">
Music Music
</Link> </Link>
<Link href="/parvagues#performances" className="text-white hover:text-purple-300 transition-colors"> <Link href="/parvagues#performances" className="text-white hover:text-[#ff3d7b] transition-colors">
Performances Performances
</Link> </Link>
<Link href="/parvagues#about" className="text-white hover:text-purple-300 transition-colors"> <Link href="/parvagues#about" className="text-white hover:text-[#ff3d7b] transition-colors">
About About
</Link> </Link>
</div> </div>
...@@ -50,10 +47,10 @@ export default function ParVaguesHeader({ eventName = null }) { ...@@ -50,10 +47,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} transition-all duration-300 ${scrolled ? 'bg-purple-600 scale-90' : ''}`} className={styles.ctaButton}
> >
<FaEnvelope className="inline mr-2" /> <FaEnvelope className="inline mr-2" />
{scrolled ? 'Invoquer' : 'Invoquer un live'} Invoquer un live
</a> </a>
</div> </div>
</header> </header>
......
next/pages/_app.js
import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap/dist/css/bootstrap.css'
import '../styles/globals.css'
import '../styles/main.css' import '../styles/main.css'
import '../styles/masonry.css' import '../styles/masonry.css'
......
next/pages/parvagues.js
...@@ -7,6 +7,7 @@ import styles from '@/styles/parvagues.module.css'; ...@@ -7,6 +7,7 @@ import styles from '@/styles/parvagues.module.css';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import ParVaguesHeader from '@/components/ParVaguesHeader'; import ParVaguesHeader from '@/components/ParVaguesHeader';
import ParVaguesFooter from '@/components/ParVaguesFooter'; import ParVaguesFooter from '@/components/ParVaguesFooter';
import GlitchText from '@/components/GlitchText';
import SyntaxHighlighter from "react-syntax-highlighter"; import SyntaxHighlighter from "react-syntax-highlighter";
import { atomOneDark } from "react-syntax-highlighter/dist/cjs/styles/hljs"; import { atomOneDark } from "react-syntax-highlighter/dist/cjs/styles/hljs";
...@@ -68,11 +69,11 @@ export default function ParVagues({ lives }) { ...@@ -68,11 +69,11 @@ export default function ParVagues({ lives }) {
// Define section content // Define section content
const sections = { const sections = {
potentiel: { code: {
type: 'image', type: 'image',
image: '/images/parvagues/samples.png' image: '/images/parvagues/samples.png'
}, },
composition: { midi: {
type: 'carousel', type: 'carousel',
images: [ images: [
'/images/parvagues/studio1.jpg', '/images/parvagues/studio1.jpg',
...@@ -86,10 +87,6 @@ export default function ParVagues({ lives }) { ...@@ -86,10 +87,6 @@ export default function ParVagues({ lives }) {
'/images/parvagues/live.jpg', '/images/parvagues/live.jpg',
'/images/parvagues/code_overlay.jpg' '/images/parvagues/code_overlay.jpg'
] ]
},
code: {
type: 'code',
content: tidalCode
} }
}; };
...@@ -294,6 +291,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12) ...@@ -294,6 +291,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
<title>ParVagues - Musique Algorithmique</title> <title>ParVagues - Musique Algorithmique</title>
<meta name="description" content="Livecoding de musique open-source avec TidalCycles et contrôleur MIDI" /> <meta name="description" content="Livecoding de musique open-source avec TidalCycles et contrôleur MIDI" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/images/parvagues/favicon.ico" />
</Head> </Head>
<div className="flex flex-col min-h-screen bg-black text-white"> <div className="flex flex-col min-h-screen bg-black text-white">
...@@ -330,8 +328,12 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12) ...@@ -330,8 +328,12 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
<div className={styles.heroContent}> <div className={styles.heroContent}>
{/* Left side: Title and content */} {/* Left side: Title and content */}
<div className="md:w-1/2"> <div className="md:w-1/2">
<h1 className={`${styles.heroTitle} ${styles.glitchEffect}`}> <h1 className={styles.heroTitle}>
ParVagues <GlitchText
text="ParVagues"
className={styles.glitchEffect}
burstFrequency={450}
/>
</h1> </h1>
<p className={styles.heroSubtitle}> <p className={styles.heroSubtitle}>
Livecoding de musique open-source avec TidalCycles et contrôleur MIDI Livecoding de musique open-source avec TidalCycles et contrôleur MIDI
...@@ -344,7 +346,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12) ...@@ -344,7 +346,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
{/* Right side: Code sample with play overlay */} {/* Right side: Code sample with play overlay */}
<div className="md:w-1/2 relative"> <div className="md:w-1/2 relative">
<div className="relative"> <div className="relative">
<CodeBlock height="300px" isTerminal={true}> <CodeBlock className="h-full" isTerminal={true}>
{tidalCode} {tidalCode}
</CodeBlock> </CodeBlock>
...@@ -397,14 +399,6 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12) ...@@ -397,14 +399,6 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
<h3 className="text-xl font-semibold text-purple-400 mb-2">Performance</h3> <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> <p className="text-gray-300">Live improvise avec contrôleur MIDI pour une interactivité totale</p>
</div> </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> <div>
...@@ -456,34 +450,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12) ...@@ -456,34 +450,7 @@ d4 $ note ("<e3 fs3 <gs3 d4> <a3 df4>>" - 12)
</div> </div>
</section> </section>
{/* Section 3: Performances */} {/* Section 3: About */}
<section id="performances" 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">
Performances
</span>
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{posterImages.map((src, index) => (
<div key={index} className="relative aspect-[3/4] rounded-lg overflow-hidden group">
<Image
src={src}
alt={`Performance ${index + 1}`}
fill
className="object-cover transition-transform duration-500 group-hover:scale-110"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-60 group-hover:opacity-80 transition-opacity">
</div>
<div className="absolute bottom-0 left-0 w-full p-4 text-white">
<h3 className="text-xl font-bold mb-1">Live {2022 + Math.floor(index/2)}</h3>
<p className="text-sm opacity-80">Algorave Paris</p>
</div>
</div>
))}
</div>
</section>
{/* Section 4: About */}
<section id="about" className={`${styles.sectionContainer} pb-24`}> <section id="about" className={`${styles.sectionContainer} pb-24`}>
<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">
......
next/pages/parvagues/live/[id].js
...@@ -42,7 +42,7 @@ export default function Live({ data, slug, images }) { ...@@ -42,7 +42,7 @@ export default function Live({ data, slug, images }) {
// Fix scroll handling for header // Fix scroll handling for header
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
setScrolled(window.scrollY > 100); setScrolled(window.scrollY > window.innerHeight);
}; };
// Initial check // Initial check
...@@ -255,6 +255,7 @@ export default function Live({ data, slug, images }) { ...@@ -255,6 +255,7 @@ export default function Live({ data, slug, images }) {
<Head> <Head>
<title>{data.frontmatter.title} - ParVagues</title> <title>{data.frontmatter.title} - ParVagues</title>
<meta name="description" content={data.frontmatter.description} /> <meta name="description" content={data.frontmatter.description} />
<link rel="icon" href="/images/parvagues/favicon.ico" />
</Head> </Head>
{/* Above fold section */} {/* Above fold section */}
...@@ -266,11 +267,14 @@ export default function Live({ data, slug, images }) { ...@@ -266,11 +267,14 @@ export default function Live({ data, slug, images }) {
src={posterImage} src={posterImage}
alt={data.frontmatter.title} alt={data.frontmatter.title}
fill fill
className={styles.posterImage} className={styles.posterImageBG}
/> />
<div className={styles.posterGradient}></div> <div className={styles.posterGradient}></div>
</div> </div>
)} )}
{/* Neon gradient overlay */}
<div className={styles.neonGradient}></div>
{/* Use the ParVaguesHeader component */} {/* Use the ParVaguesHeader component */}
<ParVaguesHeader eventName={data.frontmatter.title} /> <ParVaguesHeader eventName={data.frontmatter.title} />
...@@ -280,7 +284,7 @@ export default function Live({ data, slug, images }) { ...@@ -280,7 +284,7 @@ export default function Live({ data, slug, images }) {
{/* Main hero content */} {/* Main hero content */}
<div className="relative z-10 flex items-center justify-center min-h-screen pt-16 pb-20"> <div className="relative z-10 flex items-center justify-center min-h-screen pt-16 pb-20">
<div className="w-full max-w-6xl mx-auto px-4 md:px-6 lg:px-8"> <div className="w-full max-w-6xl mx-auto px-4 md:px-6 lg:px-8">
<article className="w-full mx-auto bg-black/80 backdrop-filter backdrop-blur-sm rounded-2xl overflow-hidden border border-purple-500/20 shadow-xl shadow-purple-900/20"> <article className="w-full mx-auto bg-black/80 backdrop-filter backdrop-blur-sm rounded-2xl overflow-hidden border border-[#d900ff]/20 shadow-xl shadow-[#d900ff]/20">
<div className="grid md:grid-cols-5 gap-0"> <div className="grid md:grid-cols-5 gap-0">
{/* Left column: Title and info (3/5 width) */} {/* Left column: Title and info (3/5 width) */}
<div className="md:col-span-3 p-8 md:p-10"> <div className="md:col-span-3 p-8 md:p-10">
...@@ -301,12 +305,12 @@ export default function Live({ data, slug, images }) { ...@@ -301,12 +305,12 @@ export default function Live({ data, slug, images }) {
{timeToEvent !== null && ( {timeToEvent !== null && (
<div className="mb-8"> <div className="mb-8">
{timeToEvent >= 0 ? ( {timeToEvent >= 0 ? (
<div className="inline-flex items-center bg-black/60 p-4 rounded-lg border border-purple-500/30"> <div className="inline-flex items-center bg-black/60 p-4 rounded-lg border border-[#d900ff]/30">
<div className="font-mono text-2xl font-bold mr-3 text-purple-400">{timeString}</div> <div className="font-mono text-2xl font-bold mr-3 text-[#d900ff]">{timeString}</div>
<div className="text-gray-300">avant l'événement</div> <div className="text-gray-300">avant l'événement</div>
</div> </div>
) : ( ) : (
<div className="inline-flex items-center bg-black/60 p-4 rounded-lg border border-purple-500/30"> <div className="inline-flex items-center bg-black/60 p-4 rounded-lg border border-[#d900ff]/30">
<div className="text-gray-300">Événement passé</div> <div className="text-gray-300">Événement passé</div>
</div> </div>
)} )}
...@@ -320,7 +324,7 @@ export default function Live({ data, slug, images }) { ...@@ -320,7 +324,7 @@ export default function Live({ data, slug, images }) {
href={data.frontmatter.ctaURL} href={data.frontmatter.ctaURL}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-[#8900b3] hover:bg-[#a700d1] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#d900ff]"
> >
{data.frontmatter.ctaText || 'S\'inscrire'} {data.frontmatter.ctaText || 'S\'inscrire'}
</a> </a>
...@@ -337,19 +341,19 @@ export default function Live({ data, slug, images }) { ...@@ -337,19 +341,19 @@ export default function Live({ data, slug, images }) {
</div> </div>
{/* Right column: status and teasers (2/5 width) */} {/* Right column: status and teasers (2/5 width) */}
<div className="md:col-span-2 bg-black/80 p-8 md:p-10 border-t md:border-t-0 md:border-l border-purple-500/20"> <div className="md:col-span-2 bg-black/80 p-8 md:p-10 border-t md:border-t-0 md:border-l border-[#d900ff]/20">
{/* Upcoming drops section */} {/* Upcoming drops section */}
{upcomingDrops.length > 0 && ( {upcomingDrops.length > 0 && (
<div className="mb-8 bg-black/50 border border-purple-500/30 rounded-lg p-4"> <div className="mb-8 bg-black/50 border border-[#d900ff]/30 rounded-lg p-4">
<h3 className="text-xl font-bold text-purple-400 mb-4">Prochains drops</h3> <h3 className="text-xl font-bold text-[#d900ff] mb-4">Prochains drops</h3>
<div className="space-y-4"> <div className="space-y-4">
{upcomingDrops.map((drop, index) => ( {upcomingDrops.map((drop, index) => (
<div key={index} className="flex items-center justify-between gap-4 border-b border-purple-500/10 pb-4 last:border-0 last:pb-0"> <div key={index} className="flex items-center justify-between gap-4 border-b border-[#d900ff]/10 pb-4 last:border-0 last:pb-0">
<div> <div>
<div className="text-lg font-medium text-gray-200">{drop.name}</div> <div className="text-lg font-medium text-gray-200">{drop.name}</div>
<div className="text-sm text-gray-400">{formatPreciseDateTime(drop.date)}</div> <div className="text-sm text-gray-400">{formatPreciseDateTime(drop.date)}</div>
</div> </div>
<div className="font-mono text-lg text-purple-300">{getTimeDifferenceString(drop.date)}</div> <div className="font-mono text-lg text-[#ff3d7b]">{getTimeDifferenceString(drop.date)}</div>
</div> </div>
))} ))}
</div> </div>
...@@ -362,10 +366,10 @@ export default function Live({ data, slug, images }) { ...@@ -362,10 +366,10 @@ export default function Live({ data, slug, images }) {
{/* Teasings */} {/* Teasings */}
{teasingsToShow.length > 0 && ( {teasingsToShow.length > 0 && (
<div> <div>
<h3 className="text-xl font-bold text-purple-400 mb-4">Teasings</h3> <h3 className="text-xl font-bold text-[#d900ff] mb-4">Teasings</h3>
<div className="space-y-6"> <div className="space-y-6">
{teasingsToShow.map((teasing, index) => ( {teasingsToShow.map((teasing, index) => (
<div key={index} className="bg-black/50 border border-purple-500/30 rounded-lg p-4"> <div key={index} className="bg-black/50 border border-[#d900ff]/30 rounded-lg p-4">
<div dangerouslySetInnerHTML={renderMarkdown(teasing)} className="prose prose-sm prose-invert max-w-none" /> <div dangerouslySetInnerHTML={renderMarkdown(teasing)} className="prose prose-sm prose-invert max-w-none" />
</div> </div>
))} ))}
...@@ -385,7 +389,7 @@ export default function Live({ data, slug, images }) { ...@@ -385,7 +389,7 @@ export default function Live({ data, slug, images }) {
{/* Description */} {/* Description */}
<div> <div>
<h2 className="text-2xl font-bold text-purple-400 mb-6">À propos de cet événement</h2> <h2 className="text-2xl font-bold text-[#d900ff] mb-6">À propos de cet événement</h2>
<div <div
className="prose prose-lg prose-invert" className="prose prose-lg prose-invert"
dangerouslySetInnerHTML={renderMarkdown(data.content)} dangerouslySetInnerHTML={renderMarkdown(data.content)}
...@@ -400,11 +404,12 @@ export default function Live({ data, slug, images }) { ...@@ -400,11 +404,12 @@ export default function Live({ data, slug, images }) {
<div> <div>
{images && images.length > 0 && ( {images && images.length > 0 && (
<div> <div>
<h2 className="text-2xl font-bold text-purple-400 mb-6">Galerie</h2> <h2 className="text-2xl font-bold text-[#d900ff] mb-6">Galerie</h2>
<ImageGallery <ImageGallery
images={images} images={images}
slug={slug} slug={slug}
alt={data.frontmatter.title} alt={data.frontmatter.title}
className="filter grayscale hover:grayscale-0"
/> />
</div> </div>
)} )}
......
next/styles/globals.css 0 → 100644
/* Add the ParVagues color variables globally */
:root {
--neon-down: #8900b3;
--neon-low: #a700d1;
--neon-high: #d900ff;
--coral: #ff3d7b;
--biomod: #5bc091;
--cigarette: #ff8c00;
}
\ No newline at end of file
next/styles/parvagues.module.css
/* ParVagues specific styles */ /* ParVagues specific styles */
/* New Color Palette */
/* Fixing CSS Modules compatibility - defining colors in a local class */
.colorRoot {
--neon-down: #8900b3;
--neon-low: #a700d1;
--neon-high: #d900ff;
--coral: #ff3d7b;
--biomod: #5bc091;
--cigarette: #ff8c00;
}
/* This class can be added to the main container to provide color variables to all children */
.colorContainer {
composes: colorRoot;
}
.heroSection { .heroSection {
min-height: 100vh; min-height: 100vh;
position: relative; position: relative;
...@@ -9,9 +26,14 @@ ...@@ -9,9 +26,14 @@
.heroTitle { .heroTitle {
font-size: clamp(4rem, 9vw, 9rem); font-size: clamp(4rem, 9vw, 9rem);
font-weight: 800; font-weight: 800;
margin: 1.5rem 0; /* less on the left and right */ margin-bottom: 1.5rem 0;
padding: 0.5rem; padding-top: 0.5em;
text-wrap: balance; padding-bottom: 0.1em;
-webkit-background-clip: text;
background-clip: text;
line-height: 0.9;
letter-spacing: -0.05em;
text-shadow: 0 0 10px rgba(217, 0, 255, 0.5);
} }
.bgImage { .bgImage {
...@@ -30,11 +52,11 @@ ...@@ -30,11 +52,11 @@
position: relative; position: relative;
z-index: 10; z-index: 10;
min-height: 100vh; min-height: 100vh;
background: linear-gradient(135deg, rgba(9,9,11,0.95) 0%, rgba(88,28,135,0.9) 50%, rgba(9,9,11,0.95) 100%); background: linear-gradient(135deg, rgba(9,9,11,0.95) 0%, rgba(137,0,179,0.9) 50%, rgba(9,9,11,0.95) 100%);
} }
.heroContent { .heroContent {
padding: 2rem 1rem; padding: 2rem 3rem;
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
...@@ -53,19 +75,6 @@ ...@@ -53,19 +75,6 @@
} }
} }
.heroTitle {
font-size: clamp(4rem, 12vw, 9rem);
font-weight: 800;
margin-bottom: 1.5rem;
padding-top: 0.5em;
padding-bottom: 0.1em;
background: linear-gradient(45deg, #a855f7, #ec4899, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 0.9;
letter-spacing: -0.05em;
}
.heroSubtitle { .heroSubtitle {
font-size: clamp(1.125rem, 3vw, 1.5rem); font-size: clamp(1.125rem, 3vw, 1.5rem);
...@@ -73,6 +82,19 @@ ...@@ -73,6 +82,19 @@
max-width: 600px; max-width: 600px;
line-height: 1.5; line-height: 1.5;
margin-bottom: 3rem; margin-bottom: 3rem;
position: relative;
}
.heroSubtitle::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 60%;
height: 3px;
background: var(--coral);
border-radius: 3px;
box-shadow: 0 0 10px var(--coral);
} }
.ctaButton { .ctaButton {
...@@ -82,25 +104,26 @@ ...@@ -82,25 +104,26 @@
z-index: 50; z-index: 50;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 1px solid rgba(168, 85, 247, 0.3); border: 1px solid rgba(217, 0, 255, 0.3);
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
color: #a855f7; color: var(--neon-high);
transition: all 0.3s ease; transition: all 0.3s ease;
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
} }
.ctaButton:hover { .ctaButton:hover {
background: rgba(168, 85, 247, 0.1); background: rgba(217, 0, 255, 0.1);
border-color: #a855f7; border-color: var(--neon-high);
color: #ec4899; color: var(--coral);
box-shadow: 0 0 15px rgba(217, 0, 255, 0.5);
} }
.plungeButton { .plungeButton {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
background: linear-gradient(45deg, #a855f7, #ec4899); background: linear-gradient(45deg, var(--neon-low), var(--coral));
color: white; color: white;
padding: 1rem 2rem; padding: 1rem 2rem;
border-radius: 0.5rem; border-radius: 0.5rem;
...@@ -108,11 +131,41 @@ ...@@ -108,11 +131,41 @@
text-decoration: none; text-decoration: none;
transition: all 0.3s ease; transition: all 0.3s ease;
gap: 0.5rem; gap: 0.5rem;
position: relative;
overflow: hidden;
}
.plungeButton::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, var(--neon-down), var(--neon-high), var(--coral), var(--cigarette));
z-index: -1;
animation: rotate 3s linear infinite;
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 0.6rem;
}
.plungeButton:hover::before {
opacity: 1;
}
@keyframes rotate {
0% {
background-position: 0% 0%;
}
100% {
background-position: 200% 200%;
}
} }
.plungeButton:hover { .plungeButton:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(168, 85, 247, 0.3); box-shadow: 0 10px 20px rgba(217, 0, 255, 0.3);
} }
.sectionContainer { .sectionContainer {
...@@ -140,22 +193,24 @@ ...@@ -140,22 +193,24 @@
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
padding-left: 2rem; padding-left: 2rem;
position: relative; position: relative;
transition: all 0.3s ease;
} }
.bulletPoint::before { .bulletPoint::before {
content: "→"; content: "→";
position: absolute; position: absolute;
left: 0; left: 0;
color: #a855f7; color: var(--neon-high);
font-weight: bold; font-weight: bold;
} }
.codeContainer { .codeContainer {
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(168, 85, 247, 0.2); border: 1px solid rgba(217, 0, 255, 0.2);
border-radius: 0.5rem; border-radius: 0.5rem;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
box-shadow: 0 5px 15px rgba(137, 0, 179, 0.2);
} }
.terminalContainer { .terminalContainer {
...@@ -166,7 +221,7 @@ ...@@ -166,7 +221,7 @@
} }
.terminalHeader { .terminalHeader {
background: #363636; background: #262626;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -186,15 +241,15 @@ ...@@ -186,15 +241,15 @@
} }
.redCircle { .redCircle {
background: #ff5f56; background: var(--coral);
} }
.yellowCircle { .yellowCircle {
background: #ffbd2e; background: var(--cigarette);
} }
.greenCircle { .greenCircle {
background: #27ca42; background: var(--biomod);
} }
.terminalTitle { .terminalTitle {
...@@ -232,7 +287,7 @@ ...@@ -232,7 +287,7 @@
.codeContainer::-webkit-scrollbar-thumb, .codeContainer::-webkit-scrollbar-thumb,
.terminalContainer pre::-webkit-scrollbar-thumb { .terminalContainer pre::-webkit-scrollbar-thumb {
background: #a855f7; background: var(--neon-high);
border-radius: 3px; border-radius: 3px;
} }
...@@ -245,16 +300,17 @@ ...@@ -245,16 +300,17 @@
.albumCard { .albumCard {
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(168, 85, 247, 0.2); border: 1px solid rgba(217, 0, 255, 0.2);
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 1.5rem; padding: 1.5rem;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.albumCard:hover { .albumCard:hover {
background: rgba(168, 85, 247, 0.05); background: rgba(217, 0, 255, 0.05);
border-color: #a855f7; border-color: var(--neon-high);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(217, 0, 255, 0.2);
} }
.playerContainer { .playerContainer {
...@@ -273,15 +329,16 @@ ...@@ -273,15 +329,16 @@
transition: all 0.3s ease; transition: all 0.3s ease;
font-size: 0.875rem; font-size: 0.875rem;
border-radius: 0.25rem; border-radius: 0.25rem;
background: rgba(168, 85, 247, 0.1); background: rgba(217, 0, 255, 0.1);
border: 1px solid rgba(168, 85, 247, 0.2); border: 1px solid rgba(217, 0, 255, 0.2);
} }
.playerButton:hover { .playerButton:hover {
color: #a855f7; color: var(--neon-high);
background: rgba(168, 85, 247, 0.2); background: rgba(217, 0, 255, 0.2);
border-color: #a855f7; border-color: var(--neon-high);
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 0 10px rgba(217, 0, 255, 0.3);
} }
.socialLinks { .socialLinks {
...@@ -306,21 +363,21 @@ ...@@ -306,21 +363,21 @@
} }
.socialLink:hover { .socialLink:hover {
color: #a855f7; color: var(--neon-high);
border-color: #a855f7; border-color: var(--neon-high);
background: rgba(168, 85, 247, 0.05); background: rgba(217, 0, 255, 0.05);
transform: translateY(-2px); transform: translateY(-2px);
} }
.bulletPoint.cursor-pointer:hover { .bulletPoint.cursor-pointer:hover {
background: rgba(168, 85, 247, 0.05); background: rgba(217, 0, 255, 0.05);
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.footer { .footer {
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
border-top: 1px solid rgba(168, 85, 247, 0.1); border-top: 1px solid rgba(217, 0, 255, 0.1);
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} }
...@@ -328,7 +385,7 @@ ...@@ -328,7 +385,7 @@
position: absolute; position: absolute;
inset: 0; inset: 0;
opacity: 0.6; opacity: 0.6;
filter: blur(4px); filter: grayscale(100%) brightness(0.3) contrast(1.2);
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
...@@ -339,7 +396,7 @@ ...@@ -339,7 +396,7 @@
position: absolute; position: absolute;
inset: 0; inset: 0;
opacity: 0.6; opacity: 0.6;
filter: blur(4px); filter: grayscale(100%) brightness(0.3) contrast(1.2);
} }
.posterImage { .posterImage {
...@@ -352,38 +409,98 @@ ...@@ -352,38 +409,98 @@
.posterGradient { .posterGradient {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9)); background: radial-gradient(circle at center, rgba(217, 0, 255, 0.2), rgba(0, 0, 0, 0.9));
}
.highlightText {
position: relative;
display: inline-block;
}
.highlightText::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: var(--coral);
border-radius: 2px;
box-shadow: 0 0 8px var(--coral);
} }
.glitchEffect { .glitchEffect {
animation: glitch 8s linear infinite; position: relative;
display: inline-block;
animation: subtle-pulse 4s infinite alternate;
letter-spacing: -0.03em;
color: white;
text-shadow:
0 0 5px rgba(217, 0, 255, 0.7),
0 0 10px rgba(217, 0, 255, 0.5);
font-weight: 900;
} }
@keyframes glitch { @keyframes subtle-pulse {
0% { 0% {
filter: none; text-shadow:
} 0 0 5px rgba(217, 0, 255, 0.7),
2% { 0 0 10px rgba(217, 0, 255, 0.5);
filter: hue-rotate(90deg);
}
3% {
filter: none;
}
4% {
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
transform: translateX(-2px);
}
5% {
transform: translateX(0);
clip-path: none;
} }
97% { 100% {
filter: none; text-shadow:
} 0 0 8px rgba(217, 0, 255, 0.9),
98% { 0 0 15px rgba(217, 0, 255, 0.7),
filter: invert(0.1); 0 0 25px rgba(217, 0, 255, 0.5);
}
99% {
filter: none;
} }
} }
.glitchEffect::before,
.glitchEffect::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
}
.glitchEffect::before {
left: 2px;
text-shadow: -2px 0 var(--coral);
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}
.glitchEffect::after {
left: -2px;
text-shadow: -2px 0 var(--neon-high);
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}
.neonGradient {
background: linear-gradient(90deg,
var(--neon-down),
var(--neon-low),
var(--neon-high),
var(--coral)
);
opacity: 0.15;
position: absolute;
inset: 0;
mix-blend-mode: screen;
pointer-events: none;
}
.logoContainer {
display: flex;
flex-direction: column;
align-items: center;
max-width: 300px;
margin-bottom: 2rem;
}
.logoImage {
width: 100%;
height: auto;
filter: drop-shadow(0 0 10px rgba(217, 0, 255, 0.5));
}
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