jalil/aspireves.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mise à jour des composants et styles

Browse source
This commit is contained in:
Jalil Arfaoui 2026-02-21 15:05:31 +01:00
parent 3862b32343
commit 25bc265e21
8 changed files with 398 additions and 282 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/components/Agenda.tsx
View file

@ -1,26 +1,33 @@
import { motion } from 'motion/react'; import { motion } from 'motion/react';
import { agenda, spectacles } from '../data'; import { agenda, spectacles } from '../data';
import { MapPin, Ticket, Info } from 'lucide-react'; import { MapPin, Ticket, Info, Sparkles, Calendar as CalendarIcon } from 'lucide-react';
export default function Agenda() { export default function Agenda() {
const sortedAgenda = [...agenda].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()); const sortedAgenda = [...agenda].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
return ( return (
<div className="pt-32 pb-24 min-h-screen"> <div className="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden">
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8"> {/* Background Magic */}
<div className="absolute top-1/2 left-0 w-96 h-96 bg-dream-purple/10 rounded-full filter blur-[120px] -translate-x-1/2"></div>
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
className="text-center mb-16" className="text-center mb-12 md:mb-20"
> >
<h1 className="font-serif text-5xl md:text-7xl text-night mb-6">Agenda</h1> <div className="inline-flex items-center gap-2 mb-6 px-4 py-1 rounded-full bg-white/50 border border-white/20 text-dream-coral">
<p className="font-sans text-night/60 max-w-2xl mx-auto text-lg"> <CalendarIcon size={16} />
Retrouvez toutes nos prochaines représentations. <span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest">Calendrier</span>
</div>
<h1 className="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8">L'<span className="text-dream-coral italic">Agenda</span></h1>
<p className="font-sans text-night/60 max-w-2xl mx-auto text-lg md:text-xl leading-relaxed">
Venez nous voir sur scène ! <br className="hidden sm:block" />Chaque date est une nouvelle aventure.
</p> </p>
</motion.div> </motion.div>
<div className="space-y-8"> <div className="space-y-6 md:space-y-10">
{sortedAgenda.map((event, index) => { {sortedAgenda.map((event, index) => {
const spectacle = spectacles.find(s => s.id === event.spectacleId); const spectacle = spectacles.find(s => s.id === event.spectacleId);
const dateObj = new Date(event.date); const dateObj = new Date(event.date);
@ -32,34 +39,35 @@ export default function Agenda() {
initial={{ opacity: 0, x: -20 }} initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ delay: index * 0.1 }} transition={{ delay: index * 0.1 }}
className={`group relative flex flex-col md:flex-row gap-8 p-8 rounded-3xl border transition-all ${ className={`group relative flex flex-col md:flex-row gap-6 md:gap-10 p-6 md:p-10 rounded-[32px] md:rounded-[40px] border transition-all ${
isPast ? 'opacity-50 grayscale bg-night/5 border-transparent' : 'bg-white border-night/5 shadow-sm hover:shadow-xl hover:shadow-night/5' isPast ? 'opacity-40 grayscale bg-night/5 border-transparent' : 'bg-white border-white shadow-xl shadow-night/5 hover:shadow-dream-purple/10 hover:scale-[1.02]'
}`} }`}
> >
{/* Date Block */} {/* Date Block */}
<div className="flex-shrink-0 flex flex-col items-center justify-center w-24 h-24 md:w-32 md:h-32 rounded-2xl bg-night text-cloud"> <div className="flex-shrink-0 flex flex-col items-center justify-center w-24 h-24 md:w-36 md:h-36 rounded-[24px] md:rounded-[32px] bg-gradient-to-br from-dream-purple to-dream-blue text-white shadow-lg mx-auto md:mx-0">
<span className="font-sans text-sm uppercase tracking-widest opacity-70"> <span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest opacity-80 mb-1">
{dateObj.toLocaleString('fr-FR', { month: 'short' })} {dateObj.toLocaleString('fr-FR', { month: 'short' })}
</span> </span>
<span className="font-serif text-4xl md:text-5xl"> <span className="font-display text-4xl md:text-6xl">
{dateObj.getDate()} {dateObj.getDate()}
</span> </span>
<span className="font-sans text-xs opacity-50 mt-1"> <span className="font-sans text-[10px] md:text-xs font-bold opacity-60 mt-1">
{dateObj.getFullYear()} {dateObj.getFullYear()}
</span> </span>
</div> </div>
{/* Info Block */} {/* Info Block */}
<div className="flex-grow flex flex-col justify-center space-y-3"> <div className="flex-grow flex flex-col justify-center space-y-3 md:space-y-4 text-center md:text-left">
<div className="flex items-center gap-2"> <div className="flex items-center justify-center md:justify-start gap-3">
<span className="font-sans text-xs uppercase tracking-widest text-star font-bold"> <Sparkles size={14} className="text-dream-coral" />
<span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest text-dream-coral">
{spectacle?.title} {spectacle?.title}
</span> </span>
{isPast && <span className="text-[10px] uppercase tracking-tighter bg-night/10 px-2 py-0.5 rounded text-night/50">Passé</span>} {isPast && <span className="text-[10px] uppercase tracking-tighter bg-night/10 px-2 py-0.5 rounded text-night/50 font-bold">Passé</span>}
</div> </div>
<h3 className="font-serif text-3xl text-night">{spectacle?.title}</h3> <h3 className="font-display text-2xl md:text-4xl text-night">{spectacle?.title}</h3>
<div className="flex items-center gap-2 text-night/60 font-sans"> <div className="flex items-center justify-center md:justify-start gap-3 text-night/50 font-sans font-bold text-[10px] md:text-sm uppercase tracking-widest">
<MapPin size={16} className="text-star" /> <MapPin size={16} className="text-dream-blue" />
<span>{event.location}</span> <span>{event.location}</span>
</div> </div>
</div> </div>
@ -71,15 +79,15 @@ export default function Agenda() {
href={event.bookingLink} href={event.bookingLink}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="w-full md:w-auto flex items-center justify-center gap-2 bg-night text-cloud px-6 py-3 rounded-full font-sans text-sm font-medium hover:bg-night/80 transition-colors" className="w-full md:w-auto flex items-center justify-center gap-3 bg-night text-cloud px-8 py-4 rounded-full font-sans font-bold text-sm uppercase tracking-widest hover:bg-night/80 transition-all hover:scale-105 shadow-lg shadow-night/20"
> >
<Ticket size={18} /> <Ticket size={20} />
Réserver Réserver
</a> </a>
) : ( ) : (
<div className="w-full md:w-auto flex items-center justify-center gap-2 border border-night/10 text-night/40 px-6 py-3 rounded-full font-sans text-sm italic"> <div className="w-full md:w-auto flex items-center justify-center gap-2 border-2 border-dashed border-night/10 text-night/30 px-8 py-4 rounded-full font-sans text-sm font-bold uppercase tracking-widest italic">
<Info size={18} /> <Info size={18} />
Entrée libre / Sur place Sur place
</div> </div>
)} )}
</div> </div>
@ -89,8 +97,8 @@ export default function Agenda() {
</div> </div>
{sortedAgenda.length === 0 && ( {sortedAgenda.length === 0 && (
<div className="text-center py-20 border-2 border-dashed border-night/10 rounded-3xl"> <div className="text-center py-32 bg-white/50 rounded-[60px] border-4 border-dashed border-dream-blue/20">
<p className="font-serif text-2xl text-night/40 italic">Aucune date prévue pour le moment...</p> <p className="font-display text-3xl text-night/30 italic">Le nuage se prépare pour de nouveaux voyages...</p>
</div> </div>
)} )}
</div> </div>

67
src/components/Ateliers.tsx
View file

@ -1,19 +1,28 @@
import { motion } from 'motion/react'; import { motion } from 'motion/react';
import { Mail, Clock, MapPin, Users } from 'lucide-react'; import { Mail, Clock, MapPin, Users, Sparkles, Star } from 'lucide-react';
import { companyInfo } from '../data'; import { companyInfo } from '../data';
export default function Ateliers() { export default function Ateliers() {
return ( return (
<div className="pt-32 pb-24 min-h-screen"> <div className="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> {/* Background Magic */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> <div className="absolute top-1/4 right-0 w-[500px] h-[500px] bg-dream-pink/20 rounded-full filter blur-[120px] translate-x-1/2"></div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
<motion.div <motion.div
initial={{ opacity: 0, x: -30 }} initial={{ opacity: 0, x: -30 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8 }} transition={{ duration: 0.8 }}
className="text-center lg:text-left"
> >
<h1 className="font-serif text-5xl md:text-7xl text-night mb-8">Ateliers Théâtre</h1> <div className="inline-flex items-center gap-2 mb-6 px-4 py-1 rounded-full bg-white/50 border border-white/20 text-dream-coral">
<div className="space-y-6 font-sans text-lg text-night/70 leading-relaxed"> <Sparkles size={16} />
<span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest">Partage & Transmission</span>
</div>
<h1 className="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8 md:mb-10 leading-tight">Ateliers <br /><span className="text-dream-purple italic">Théâtre</span></h1>
<div className="space-y-6 md:space-y-8 font-sans text-lg md:text-xl text-night/70 leading-relaxed">
<p> <p>
La Compagnie AspiRêves propose des ateliers pour petits et grands enfants, pour que vous aussi vous voliez sur votre petit nuage. La Compagnie AspiRêves propose des ateliers pour petits et grands enfants, pour que vous aussi vous voliez sur votre petit nuage.
</p> </p>
@ -22,45 +31,45 @@ export default function Ateliers() {
</p> </p>
</div> </div>
<div className="mt-12 space-y-6"> <div className="mt-12 md:mt-16 grid grid-cols-1 sm:grid-cols-2 gap-6 md:gap-8">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4 md:gap-5 p-5 md:p-6 rounded-2xl md:rounded-3xl bg-white shadow-xl shadow-night/5 border border-white text-left">
<div className="w-12 h-12 rounded-2xl bg-star/10 flex items-center justify-center text-star flex-shrink-0"> <div className="w-12 h-12 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-dream-purple/20 flex items-center justify-center text-dream-purple flex-shrink-0">
<Users size={24} /> <Users size={24} />
</div> </div>
<div> <div>
<h3 className="font-serif text-xl text-night">Pour tous les âges</h3> <h3 className="font-display text-lg md:text-xl text-night mb-1">Pour tous</h3>
<p className="font-sans text-night/60">Enfants, adolescents et adultes.</p> <p className="font-sans text-[10px] md:text-sm text-night/50 font-bold uppercase tracking-widest">Enfants & Adultes</p>
</div> </div>
</div> </div>
<div className="flex items-start gap-4"> <div className="flex items-start gap-4 md:gap-5 p-5 md:p-6 rounded-2xl md:rounded-3xl bg-white shadow-xl shadow-night/5 border border-white text-left">
<div className="w-12 h-12 rounded-2xl bg-star/10 flex items-center justify-center text-star flex-shrink-0"> <div className="w-12 h-12 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-dream-blue/20 flex items-center justify-center text-dream-blue flex-shrink-0">
<Clock size={24} /> <Clock size={24} />
</div> </div>
<div> <div>
<h3 className="font-serif text-xl text-night">Horaires & Tarifs</h3> <h3 className="font-display text-lg md:text-xl text-night mb-1">Plaquette</h3>
<p className="font-sans text-night/60">Contactez-nous pour recevoir la plaquette complète.</p> <p className="font-sans text-[10px] md:text-sm text-night/50 font-bold uppercase tracking-widest">Sur demande</p>
</div> </div>
</div> </div>
<div className="flex items-start gap-4"> <div className="flex items-start gap-4 md:gap-5 p-5 md:p-6 rounded-2xl md:rounded-3xl bg-white shadow-xl shadow-night/5 border border-white sm:col-span-2 text-left">
<div className="w-12 h-12 rounded-2xl bg-star/10 flex items-center justify-center text-star flex-shrink-0"> <div className="w-12 h-12 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-dream-coral/20 flex items-center justify-center text-dream-coral flex-shrink-0">
<MapPin size={24} /> <MapPin size={24} />
</div> </div>
<div> <div>
<h3 className="font-serif text-xl text-night">Lieux</h3> <h3 className="font-display text-lg md:text-xl text-night mb-1">Lieux d'intervention</h3>
<p className="font-sans text-night/60">Interventions dans le Tarn et l'Hérault.</p> <p className="font-sans text-[10px] md:text-sm text-night/50 font-bold uppercase tracking-widest">Tarn (81) & Hérault (34)</p>
</div> </div>
</div> </div>
</div> </div>
<div className="mt-12"> <div className="mt-12 md:mt-16">
<a <a
href={`mailto:${companyInfo.emails.ateliers}`} href={`mailto:${companyInfo.emails.ateliers}`}
className="inline-flex items-center gap-3 bg-night text-cloud px-8 py-4 rounded-full font-sans font-medium hover:bg-night/90 transition-all" className="inline-flex items-center gap-4 bg-night text-cloud px-8 py-4 md:px-10 md:py-5 rounded-full font-sans font-bold tracking-widest uppercase text-sm hover:bg-night/90 transition-all hover:scale-105 shadow-xl shadow-night/20"
> >
<Mail size={18} /> <Mail size={20} />
S'inscrire ou se renseigner Nous contacter
</a> </a>
</div> </div>
</motion.div> </motion.div>
@ -69,9 +78,10 @@ export default function Ateliers() {
initial={{ opacity: 0, scale: 0.9 }} initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8, delay: 0.2 }} transition={{ duration: 0.8, delay: 0.2 }}
className="relative" className="relative px-4 md:px-0"
> >
<div className="aspect-square rounded-full overflow-hidden border-8 border-white shadow-2xl"> {/* Whimsical Image Frame */}
<div className="relative z-10 aspect-square rounded-[40px] md:rounded-[80px] overflow-hidden border-4 md:border-[12px] border-white shadow-2xl rotate-3 hover:rotate-0 transition-transform duration-700">
<img <img
src="https://picsum.photos/seed/theater-workshop/800/800" src="https://picsum.photos/seed/theater-workshop/800/800"
alt="Atelier Théâtre" alt="Atelier Théâtre"
@ -79,8 +89,11 @@ export default function Ateliers() {
referrerPolicy="no-referrer" referrerPolicy="no-referrer"
/> />
</div> </div>
{/* Decorative element */}
<div className="absolute -bottom-10 -right-10 w-40 h-40 bg-star rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse"></div> {/* Floating Decorations */}
<div className="absolute -top-10 -right-10 w-48 h-48 bg-dream-purple rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
<div className="absolute -bottom-10 -left-10 w-48 h-48 bg-dream-blue rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
<div className="absolute top-1/2 -right-12 animate-float text-star"><Star size={48} fill="currentColor" /></div>
</motion.div> </motion.div>
</div> </div>
</div> </div>

95
src/components/Contact.tsx
View file

@ -1,58 +1,65 @@
import { motion } from 'motion/react'; import { motion } from 'motion/react';
import { Mail, Instagram, Facebook, Youtube, Send } from 'lucide-react'; import { Mail, Instagram, Facebook, Youtube, Send, Sparkles, Star } from 'lucide-react';
import { companyInfo } from '../data'; import { companyInfo } from '../data';
export default function Contact() { export default function Contact() {
return ( return (
<div className="pt-32 pb-24 min-h-screen"> <div className="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> {/* Background Magic */}
<div className="absolute top-0 right-0 w-96 h-96 bg-dream-purple/10 rounded-full filter blur-[100px] -translate-y-1/2 translate-x-1/2"></div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
className="text-center mb-20" className="text-center mb-16 md:mb-24"
> >
<h1 className="font-serif text-5xl md:text-7xl text-night mb-6">Nous Joindre</h1> <div className="inline-flex items-center gap-2 mb-6 px-4 py-1 rounded-full bg-white/50 border border-white/20 text-dream-coral">
<p className="font-sans text-night/60 max-w-2xl mx-auto text-lg"> <Sparkles size={16} />
Une question ? Un projet ? N'hésitez pas à nous contacter, nous vous répondrons avec plaisir. <span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest">Contact</span>
</div>
<h1 className="font-display text-5xl md:text-8xl text-night mb-8">Nous <span className="text-dream-coral italic">Joindre</span></h1>
<p className="font-sans text-night/60 max-w-2xl mx-auto text-lg md:text-xl leading-relaxed">
Une question ? Un projet ? N'hésitez pas à nous contacter, <br className="hidden sm:block" />nous vous répondrons avec plaisir.
</p> </p>
</motion.div> </motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-16">
{/* Email Cards */} {/* Email Cards */}
<motion.div <motion.div
initial={{ opacity: 0, x: -20 }} initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6, delay: 0.2 }} transition={{ duration: 0.6, delay: 0.2 }}
className="space-y-6" className="space-y-6 md:space-y-8"
> >
<div className="bg-white p-8 rounded-3xl border border-night/5 shadow-sm hover:shadow-xl hover:shadow-night/5 transition-all"> <div className="bg-white p-8 md:p-10 rounded-[32px] md:rounded-[40px] border border-white shadow-xl shadow-night/5 hover:shadow-dream-purple/10 transition-all group">
<div className="w-12 h-12 rounded-2xl bg-night text-cloud flex items-center justify-center mb-6"> <div className="w-14 h-14 rounded-2xl bg-night text-cloud flex items-center justify-center mb-8 group-hover:scale-110 transition-transform">
<Mail size={24} /> <Mail size={28} />
</div> </div>
<h3 className="font-serif text-2xl text-night mb-2">Diffusion & Programmation</h3> <h3 className="font-display text-2xl md:text-3xl text-night mb-3">Diffusion & Programmation</h3>
<p className="font-sans text-night/60 mb-6">Pour toute demande concernant nos spectacles.</p> <p className="font-sans text-night/50 font-bold uppercase tracking-widest text-xs mb-8">Pour toute demande concernant nos spectacles.</p>
<a <a
href={`mailto:${companyInfo.emails.pro}`} href={`mailto:${companyInfo.emails.pro}`}
className="inline-flex items-center gap-2 text-night font-sans font-semibold hover:text-star transition-colors" className="inline-flex items-center gap-3 text-night font-sans font-bold hover:text-dream-coral transition-colors break-all"
> >
{companyInfo.emails.pro} {companyInfo.emails.pro}
<Send size={14} /> <Send size={16} className="text-dream-coral" />
</a> </a>
</div> </div>
<div className="bg-white p-8 rounded-3xl border border-night/5 shadow-sm hover:shadow-xl hover:shadow-night/5 transition-all"> <div className="bg-white p-8 md:p-10 rounded-[32px] md:rounded-[40px] border border-white shadow-xl shadow-night/5 hover:shadow-dream-blue/10 transition-all group">
<div className="w-12 h-12 rounded-2xl bg-star text-night flex items-center justify-center mb-6"> <div className="w-14 h-14 rounded-2xl bg-dream-blue text-white flex items-center justify-center mb-8 group-hover:scale-110 transition-transform">
<Mail size={24} /> <Mail size={28} />
</div> </div>
<h3 className="font-serif text-2xl text-night mb-2">Ateliers & Pédagogie</h3> <h3 className="font-display text-2xl md:text-3xl text-night mb-3">Ateliers & Pédagogie</h3>
<p className="font-sans text-night/60 mb-6">Pour les inscriptions et renseignements ateliers.</p> <p className="font-sans text-night/50 font-bold uppercase tracking-widest text-xs mb-8">Pour les inscriptions et renseignements ateliers.</p>
<a <a
href={`mailto:${companyInfo.emails.ateliers}`} href={`mailto:${companyInfo.emails.ateliers}`}
className="inline-flex items-center gap-2 text-night font-sans font-semibold hover:text-star transition-colors" className="inline-flex items-center gap-3 text-night font-sans font-bold hover:text-dream-blue transition-colors break-all"
> >
{companyInfo.emails.ateliers} {companyInfo.emails.ateliers}
<Send size={14} /> <Send size={16} className="text-dream-blue" />
</a> </a>
</div> </div>
</motion.div> </motion.div>
@ -62,41 +69,47 @@ export default function Contact() {
initial={{ opacity: 0, x: 20 }} initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6, delay: 0.4 }} transition={{ duration: 0.6, delay: 0.4 }}
className="bg-night text-cloud p-12 rounded-3xl flex flex-col justify-between" className="bg-night text-cloud p-10 md:p-16 rounded-[40px] md:rounded-[60px] flex flex-col justify-between relative overflow-hidden"
> >
<div> <div className="absolute top-0 right-0 w-64 h-64 bg-dream-purple/20 rounded-full filter blur-[80px] -translate-y-1/2 translate-x-1/2"></div>
<h3 className="font-serif text-4xl mb-8">Suivez nos aventures</h3>
<p className="font-sans text-cloud/60 text-lg mb-12 leading-relaxed"> <div className="relative z-10">
<h3 className="font-display text-4xl md:text-5xl mb-8">Suivez nos <br /><span className="text-dream-coral">aventures</span></h3>
<p className="font-sans text-cloud/60 text-lg md:text-xl mb-12 leading-relaxed">
Rejoignez-nous sur les réseaux sociaux pour découvrir les coulisses, les photos de tournée et les actualités de la compagnie. Rejoignez-nous sur les réseaux sociaux pour découvrir les coulisses, les photos de tournée et les actualités de la compagnie.
</p> </p>
<div className="space-y-6"> <div className="space-y-6">
<a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" className="flex items-center gap-4 group"> <a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" className="flex items-center gap-6 group">
<div className="w-12 h-12 rounded-full border border-cloud/20 flex items-center justify-center group-hover:border-star group-hover:text-star transition-all"> <div className="w-14 h-14 rounded-2xl border-2 border-cloud/10 flex items-center justify-center group-hover:border-dream-pink group-hover:text-dream-pink transition-all">
<Instagram size={20} /> <Instagram size={24} />
</div> </div>
<span className="font-sans text-lg group-hover:text-star transition-colors">Instagram</span> <span className="font-sans text-xl font-bold tracking-wide group-hover:text-dream-pink transition-colors">Instagram</span>
</a> </a>
<a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" className="flex items-center gap-4 group"> <a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" className="flex items-center gap-6 group">
<div className="w-12 h-12 rounded-full border border-cloud/20 flex items-center justify-center group-hover:border-star group-hover:text-star transition-all"> <div className="w-14 h-14 rounded-2xl border-2 border-cloud/10 flex items-center justify-center group-hover:border-dream-blue group-hover:text-dream-blue transition-all">
<Facebook size={20} /> <Facebook size={24} />
</div> </div>
<span className="font-sans text-lg group-hover:text-star transition-colors">Facebook</span> <span className="font-sans text-xl font-bold tracking-wide group-hover:text-dream-blue transition-colors">Facebook</span>
</a> </a>
<a href={companyInfo.socials.youtube} target="_blank" rel="noreferrer" className="flex items-center gap-4 group"> <a href={companyInfo.socials.youtube} target="_blank" rel="noreferrer" className="flex items-center gap-6 group">
<div className="w-12 h-12 rounded-full border border-cloud/20 flex items-center justify-center group-hover:border-star group-hover:text-star transition-all"> <div className="w-14 h-14 rounded-2xl border-2 border-cloud/10 flex items-center justify-center group-hover:border-dream-coral group-hover:text-dream-coral transition-all">
<Youtube size={20} /> <Youtube size={24} />
</div> </div>
<span className="font-sans text-lg group-hover:text-star transition-colors">YouTube</span> <span className="font-sans text-xl font-bold tracking-wide group-hover:text-dream-coral transition-colors">YouTube</span>
</a> </a>
</div> </div>
</div> </div>
<div className="mt-12 pt-12 border-t border-cloud/10"> <div className="mt-16 pt-12 border-t border-cloud/10 relative z-10">
<p className="font-serif text-xl italic text-cloud/40"> <p className="font-display text-2xl italic text-cloud/40 leading-relaxed">
"Le théâtre est une nourriture aussi indispensable que le pain et le vin." "Le théâtre est une nourriture aussi indispensable que le pain et le vin."
</p> </p>
</div> </div>
<div className="absolute bottom-10 right-10 text-star opacity-20 animate-float">
<Star size={48} fill="currentColor" />
</div>
</motion.div> </motion.div>
</div> </div>
</div> </div>

63
src/components/Footer.tsx
View file

@ -1,56 +1,59 @@
import { Instagram, Facebook, Youtube, Mail } from 'lucide-react'; import { Instagram, Facebook, Youtube, Mail, Star } from 'lucide-react';
import { companyInfo } from '../data'; import { companyInfo } from '../data';
export default function Footer() { export default function Footer() {
return ( return (
<footer className="bg-night text-cloud py-16 border-t border-cloud/10"> <footer className="bg-night text-cloud py-20 border-t border-cloud/10 relative overflow-hidden">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> {/* Background Magic */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-12 md:gap-8"> <div className="absolute top-0 left-0 w-64 h-64 bg-dream-purple/10 rounded-full filter blur-[100px] -translate-y-1/2 -translate-x-1/2"></div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div className="grid grid-cols-1 md:grid-cols-4 gap-16 md:gap-12">
{/* Brand */} {/* Brand */}
<div className="col-span-1 md:col-span-2"> <div className="col-span-1 md:col-span-2">
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-4 mb-8">
<div className="w-10 h-10 rounded-full bg-cloud flex items-center justify-center overflow-hidden"> <div className="w-12 h-12 rounded-2xl bg-cloud flex items-center justify-center overflow-hidden shadow-lg">
<span className="text-night font-serif italic text-xl">A</span> <span className="text-night font-display text-2xl">A</span>
</div> </div>
<span className="font-serif text-2xl font-medium tracking-wide text-cloud"> <span className="font-display text-3xl font-bold tracking-tight text-cloud">
AspiRêves AspiRêves
</span> </span>
</div> </div>
<p className="font-sans text-cloud/60 max-w-sm leading-relaxed mb-8"> <p className="font-sans text-cloud/50 text-lg max-w-sm leading-relaxed mb-10">
{companyInfo.description} {companyInfo.description}
</p> </p>
<div className="flex gap-4"> <div className="flex gap-5">
<a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" className="w-10 h-10 rounded-full border border-cloud/20 flex items-center justify-center text-cloud/60 hover:text-cloud hover:border-cloud transition-colors"> <a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" className="w-12 h-12 rounded-2xl border-2 border-cloud/10 flex items-center justify-center text-cloud/40 hover:text-dream-pink hover:border-dream-pink transition-all">
<span className="sr-only">Instagram</span> <span className="sr-only">Instagram</span>
<Instagram size={18} /> <Instagram size={20} />
</a> </a>
<a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" className="w-10 h-10 rounded-full border border-cloud/20 flex items-center justify-center text-cloud/60 hover:text-cloud hover:border-cloud transition-colors"> <a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" className="w-12 h-12 rounded-2xl border-2 border-cloud/10 flex items-center justify-center text-cloud/40 hover:text-dream-blue hover:border-dream-blue transition-all">
<span className="sr-only">Facebook</span> <span className="sr-only">Facebook</span>
<Facebook size={18} /> <Facebook size={20} />
</a> </a>
<a href={companyInfo.socials.youtube} target="_blank" rel="noreferrer" className="w-10 h-10 rounded-full border border-cloud/20 flex items-center justify-center text-cloud/60 hover:text-cloud hover:border-cloud transition-colors"> <a href={companyInfo.socials.youtube} target="_blank" rel="noreferrer" className="w-12 h-12 rounded-2xl border-2 border-cloud/10 flex items-center justify-center text-cloud/40 hover:text-dream-coral hover:border-dream-coral transition-all">
<span className="sr-only">YouTube</span> <span className="sr-only">YouTube</span>
<Youtube size={18} /> <Youtube size={20} />
</a> </a>
</div> </div>
</div> </div>
{/* Contact */} {/* Contact */}
<div> <div>
<h4 className="font-sans text-sm uppercase tracking-widest text-cloud/40 mb-6">Contact</h4> <h4 className="font-sans text-xs uppercase tracking-[0.2em] text-cloud/30 font-bold mb-8">Contact</h4>
<ul className="space-y-4 font-sans text-cloud/80"> <ul className="space-y-8 font-sans">
<li> <li>
<span className="block text-xs text-cloud/50 uppercase tracking-wider mb-1">Professionnels</span> <span className="block text-[10px] text-cloud/20 uppercase tracking-widest font-bold mb-2">Professionnels</span>
<a href={`mailto:${companyInfo.emails.pro}`} className="hover:text-star transition-colors flex items-center gap-2"> <a href={`mailto:${companyInfo.emails.pro}`} className="text-cloud/70 hover:text-dream-coral transition-colors flex items-center gap-3 font-bold break-all">
<Mail size={14} /> <Mail size={16} className="text-dream-coral" />
{companyInfo.emails.pro} {companyInfo.emails.pro}
</a> </a>
</li> </li>
<li> <li>
<span className="block text-xs text-cloud/50 uppercase tracking-wider mb-1">Ateliers Théâtre</span> <span className="block text-[10px] text-cloud/20 uppercase tracking-widest font-bold mb-2">Ateliers Théâtre</span>
<a href={`mailto:${companyInfo.emails.ateliers}`} className="hover:text-star transition-colors flex items-center gap-2"> <a href={`mailto:${companyInfo.emails.ateliers}`} className="text-cloud/70 hover:text-dream-blue transition-colors flex items-center gap-3 font-bold break-all">
<Mail size={14} /> <Mail size={16} className="text-dream-blue" />
{companyInfo.emails.ateliers} {companyInfo.emails.ateliers}
</a> </a>
</li> </li>
@ -59,18 +62,22 @@ export default function Footer() {
{/* Legal */} {/* Legal */}
<div> <div>
<h4 className="font-sans text-sm uppercase tracking-widest text-cloud/40 mb-6">Informations</h4> <h4 className="font-sans text-xs uppercase tracking-[0.2em] text-cloud/30 font-bold mb-8">Informations</h4>
<ul className="space-y-3 font-sans text-cloud/80 text-sm"> <ul className="space-y-4 font-sans text-cloud/50 text-sm">
<li><a href="#" className="hover:text-cloud transition-colors">Mentions légales</a></li> <li><a href="#" className="hover:text-cloud transition-colors">Mentions légales</a></li>
<li><a href="#" className="hover:text-cloud transition-colors">Politique de confidentialité</a></li> <li><a href="#" className="hover:text-cloud transition-colors">Politique de confidentialité</a></li>
<li className="pt-4 text-cloud/40"> <li className="pt-8 text-cloud/20 text-xs font-bold uppercase tracking-widest">
© {new Date().getFullYear()} Compagnie AspiRêves. Tous droits réservés. © {new Date().getFullYear()} Compagnie AspiRêves
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 text-cloud/5 animate-pulse">
<Star size={120} fill="currentColor" />
</div>
</footer> </footer>
); );
} }

212
src/components/Home.tsx
View file

@ -1,5 +1,5 @@
import { motion } from 'motion/react'; import { motion } from 'motion/react';
import { Play, Calendar, ArrowRight } from 'lucide-react'; import { Play, Calendar, ArrowRight, Star, Sparkles, Moon, MapPin } from 'lucide-react';
import { companyInfo, spectacles, agenda } from '../data'; import { companyInfo, spectacles, agenda } from '../data';
interface HomeProps { interface HomeProps {
@ -16,95 +16,102 @@ export default function Home({ onNavigate }: HomeProps) {
return ( return (
<div className="min-h-screen bg-cloud"> <div className="min-h-screen bg-cloud">
{/* Hero Section */} {/* Hero Section */}
<section className="relative h-[90vh] flex items-center justify-center overflow-hidden"> <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-24 md:pt-32">
{/* Abstract Cloud/Dream Background Elements */} {/* Whimsical Background Blobs */}
<div className="absolute top-1/4 -left-20 w-96 h-96 bg-star/10 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob"></div> <div className="absolute top-1/4 -left-20 w-[500px] h-[500px] bg-dream-purple/30 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob"></div>
<div className="absolute top-1/3 -right-20 w-96 h-96 bg-night/5 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob animation-delay-2000"></div> <div className="absolute top-1/3 -right-20 w-[600px] h-[600px] bg-dream-blue/40 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob animation-delay-2000"></div>
<div className="absolute -bottom-32 left-1/3 w-96 h-96 bg-star/5 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob animation-delay-4000"></div> <div className="absolute -bottom-32 left-1/3 w-[550px] h-[550px] bg-dream-pink/40 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-blob animation-delay-4000"></div>
{/* Floating Stars/Sparkles */}
<div className="absolute top-20 left-20 animate-float text-star opacity-40"><Star size={40} fill="currentColor" /></div>
<div className="absolute bottom-40 right-20 animate-float animation-delay-2000 text-dream-coral opacity-40"><Sparkles size={32} /></div>
<div className="absolute top-1/2 right-1/4 animate-float animation-delay-4000 text-dream-purple opacity-30"><Moon size={24} fill="currentColor" /></div>
<div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> <div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<motion.div <motion.div
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8, ease: "easeOut" }} transition={{ duration: 1, ease: "easeOut" }}
> >
<h1 className="font-serif text-6xl md:text-8xl lg:text-9xl text-night leading-none mb-6"> <div className="inline-block mb-6 px-4 py-2 rounded-full bg-white/50 backdrop-blur-sm border border-white/20 shadow-sm">
Embarquez sur <br /> <span className="font-sans text-[10px] sm:text-sm font-semibold text-dream-coral uppercase tracking-widest">Compagnie de Théâtre Jeune Public</span>
<span className="italic font-light text-night/80">notre nuage</span> </div>
<h1 className="font-display text-4xl sm:text-6xl md:text-8xl lg:text-9xl text-night leading-tight mb-8">
Rêver en <br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-dream-purple via-dream-coral to-dream-blue">grand ensemble</span>
</h1> </h1>
<p className="font-sans text-lg md:text-xl text-night/70 max-w-2xl mx-auto leading-relaxed mb-10"> <p className="font-sans text-lg md:text-2xl text-night/70 max-w-3xl mx-auto leading-relaxed mb-12">
{companyInfo.description} {companyInfo.description}
</p> </p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-6"> <div className="flex flex-col sm:flex-row items-center justify-center gap-8">
<button <button
onClick={() => onNavigate('spectacles')} onClick={() => onNavigate('spectacles')}
className="group flex items-center gap-3 bg-night text-cloud px-8 py-4 rounded-full font-sans font-medium tracking-wide hover:bg-night/90 transition-all hover:scale-105" className="group relative flex items-center gap-3 bg-night text-cloud px-10 py-5 rounded-full font-sans font-bold tracking-wide hover:bg-night/90 transition-all hover:scale-105 shadow-xl shadow-night/20"
> >
Découvrir les spectacles Nos Spectacles
<ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" /> <ArrowRight size={20} className="group-hover:translate-x-2 transition-transform" />
</button> </button>
<a <a
href={`https://www.youtube.com/watch?v=${companyInfo.teaserVideoId}`} href={`https://www.youtube.com/watch?v=${companyInfo.teaserVideoId}`}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="group flex items-center gap-3 text-night font-sans font-medium hover:text-star transition-colors" className="group flex items-center gap-4 text-night font-sans font-bold hover:text-dream-coral transition-colors"
> >
<div className="w-12 h-12 rounded-full border border-night/20 flex items-center justify-center group-hover:border-star group-hover:bg-star/10 transition-all"> <div className="w-14 h-14 rounded-full bg-white flex items-center justify-center shadow-lg group-hover:shadow-dream-coral/20 group-hover:scale-110 transition-all">
<Play size={18} className="ml-1" /> <Play size={22} className="ml-1 fill-night" />
</div> </div>
Voir le teaser Voir le teaser
</a> </a>
</div> </div>
</motion.div> </motion.div>
</div> </div>
{/* Wave Divider */}
<div className="absolute bottom-0 left-0 w-full overflow-hidden leading-none">
<svg className="relative block w-full h-[100px]" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V95.8C57.23,103.19,115.6,115.59,173.45,108a512.21,512.21,0,0,0,147.94-51.56Z" fill="#ffffff"></path>
</svg>
</div>
</section> </section>
{/* Featured Spectacles Section */} {/* Featured Spectacles Section */}
<section className="py-24 bg-white"> <section className="py-20 md:py-32 bg-white relative">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-end mb-16"> <div className="text-center mb-12 md:mb-20">
<div> <h2 className="font-display text-4xl md:text-6xl text-night mb-6">Nos Créations</h2>
<h2 className="font-serif text-4xl md:text-5xl text-night mb-4">À l'affiche</h2> <div className="w-16 md:w-24 h-2 bg-gradient-to-r from-dream-purple to-dream-blue mx-auto rounded-full"></div>
<p className="font-sans text-night/60 uppercase tracking-widest text-sm">Créations Jeune Public</p>
</div>
<button
onClick={() => onNavigate('spectacles')}
className="hidden md:flex items-center gap-2 text-night/60 hover:text-night transition-colors font-sans uppercase tracking-wider text-sm"
>
Tout voir <ArrowRight size={16} />
</button>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-12">
{spectacles.map((spectacle, index) => ( {spectacles.map((spectacle, index) => (
<motion.div <motion.div
key={spectacle.id} key={spectacle.id}
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ delay: index * 0.2, duration: 0.6 }} transition={{ delay: index * 0.2, duration: 0.6 }}
className="group cursor-pointer" className="group cursor-pointer"
onClick={() => onNavigate('spectacles')} onClick={() => onNavigate('spectacles')}
> >
<div className="relative aspect-[4/5] overflow-hidden rounded-2xl mb-6 bg-night/5"> <div className="relative aspect-[4/5] overflow-hidden rounded-[32px] md:rounded-[40px] mb-6 md:mb-8 shadow-2xl shadow-night/5 group-hover:shadow-dream-purple/20 transition-all duration-500">
<img <img
src={spectacle.image} src={spectacle.image}
alt={spectacle.title} alt={spectacle.title}
className="object-cover w-full h-full transform group-hover:scale-105 transition-transform duration-700 ease-in-out" className="object-cover w-full h-full transform group-hover:scale-110 transition-transform duration-1000 ease-in-out"
referrerPolicy="no-referrer" referrerPolicy="no-referrer"
/> />
<div className="absolute inset-0 bg-gradient-to-t from-night/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6"> <div className="absolute inset-0 bg-gradient-to-t from-night/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-end p-8">
<span className="text-cloud font-sans text-sm uppercase tracking-wider border border-cloud/30 rounded-full px-4 py-2 backdrop-blur-sm"> <span className="text-cloud font-sans font-bold uppercase tracking-widest bg-white/20 backdrop-blur-md rounded-full px-6 py-3 border border-white/30">
En savoir plus Découvrir
</span> </span>
</div> </div>
</div> </div>
<h3 className="font-serif text-3xl text-night mb-2">{spectacle.title}</h3> <h3 className="font-display text-3xl text-night mb-3 group-hover:text-dream-coral transition-colors">{spectacle.title}</h3>
<div className="flex items-center gap-3 font-sans text-sm text-night/60 uppercase tracking-wider"> <div className="flex items-center gap-4 font-sans text-sm font-bold text-night/40 uppercase tracking-widest">
<span>{spectacle.age}</span> <span className="px-3 py-1 bg-dream-blue/20 rounded-lg text-dream-blue-dark">{spectacle.age}</span>
<span className="w-1 h-1 rounded-full bg-star"></span> <span className="w-1.5 h-1.5 rounded-full bg-dream-coral"></span>
<span>{spectacle.duration}</span> <span>{spectacle.duration}</span>
</div> </div>
</motion.div> </motion.div>
@ -113,64 +120,68 @@ export default function Home({ onNavigate }: HomeProps) {
</div> </div>
</section> </section>
{/* Quick Agenda Section */} {/* Quick Agenda Section with a softer look */}
<section className="py-24 bg-night text-cloud"> <section className="py-20 md:py-32 bg-cloud relative overflow-hidden">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="absolute top-0 left-0 w-full h-full opacity-30 pointer-events-none">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-dream-purple rounded-full filter blur-[100px] animate-pulse"></div>
<div> <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-dream-blue rounded-full filter blur-[100px] animate-pulse animation-delay-2000"></div>
<h2 className="font-serif text-5xl md:text-6xl mb-6">Prochaines dates</h2> </div>
<p className="font-sans text-cloud/70 text-lg mb-10 max-w-md">
Retrouvez-nous près de chez vous. Venez partager un moment suspendu avec la compagnie.
</p>
<button
onClick={() => onNavigate('agenda')}
className="inline-flex items-center gap-3 border border-cloud/30 hover:border-cloud px-8 py-4 rounded-full font-sans uppercase tracking-wider text-sm transition-colors"
>
Voir tout l'agenda
</button>
</div>
<div className="space-y-6"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
{upcomingShows.length > 0 ? ( <div className="bg-white rounded-[40px] md:rounded-[60px] p-8 md:p-20 shadow-2xl shadow-night/5 border border-white">
upcomingShows.map((event, index) => { <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 md:gap-20 items-center">
const spec = spectacles.find(s => s.id === event.spectacleId); <div className="text-center lg:text-left">
const dateObj = new Date(event.date); <h2 className="font-display text-4xl md:text-6xl text-night mb-6 md:mb-8 leading-tight">Prochaines <br /><span className="text-dream-coral">Rencontres</span></h2>
return ( <p className="font-sans text-night/60 text-lg mb-8 md:mb-12 max-w-md mx-auto lg:mx-0 leading-relaxed">
<motion.div Le théâtre est un voyage qui se partage. Retrouvez-nous pour une parenthèse enchantée.
key={event.id} </p>
initial={{ opacity: 0, x: 20 }} <button
whileInView={{ opacity: 1, x: 0 }} onClick={() => onNavigate('agenda')}
viewport={{ once: true }} className="inline-flex items-center gap-4 bg-night text-cloud px-8 py-4 md:px-10 md:py-5 rounded-full font-sans font-bold uppercase tracking-widest text-sm transition-all hover:scale-105 shadow-xl shadow-night/20"
transition={{ delay: index * 0.2 }} >
className="group flex flex-col sm:flex-row gap-6 p-6 rounded-2xl border border-cloud/10 hover:bg-cloud/5 transition-colors cursor-pointer" Tout l'agenda
onClick={() => onNavigate('agenda')} </button>
> </div>
<div className="flex-shrink-0 flex flex-col items-center justify-center w-24 h-24 rounded-xl bg-cloud/10 text-cloud">
<span className="font-sans text-sm uppercase tracking-widest opacity-70"> <div className="space-y-6 md:space-y-8">
{dateObj.toLocaleString('fr-FR', { month: 'short' })} {upcomingShows.length > 0 ? (
</span> upcomingShows.map((event, index) => {
<span className="font-serif text-4xl"> const spec = spectacles.find(s => s.id === event.spectacleId);
{dateObj.getDate()} const dateObj = new Date(event.date);
</span> return (
</div> <motion.div
<div className="flex-grow flex flex-col justify-center"> key={event.id}
<h4 className="font-serif text-2xl mb-1">{spec?.title}</h4> initial={{ opacity: 0, x: 30 }}
<div className="flex items-center gap-2 font-sans text-sm text-cloud/60"> whileInView={{ opacity: 1, x: 0 }}
<Calendar size={14} /> viewport={{ once: true }}
<span>{event.location}</span> transition={{ delay: index * 0.2 }}
className="group flex flex-col sm:flex-row gap-6 md:gap-8 p-6 md:p-8 rounded-[24px] md:rounded-[32px] bg-cloud/50 hover:bg-white hover:shadow-xl hover:shadow-night/5 transition-all cursor-pointer border border-transparent hover:border-dream-purple/20 items-center sm:items-stretch"
onClick={() => onNavigate('agenda')}
>
<div className="flex-shrink-0 flex flex-col items-center justify-center w-24 h-24 md:w-28 md:h-28 rounded-2xl md:rounded-3xl bg-gradient-to-br from-dream-purple to-dream-blue text-white shadow-lg">
<span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest opacity-80 mb-1">
{dateObj.toLocaleString('fr-FR', { month: 'short' })}
</span>
<span className="font-display text-4xl md:text-5xl">
{dateObj.getDate()}
</span>
</div> </div>
</div> <div className="flex-grow flex flex-col justify-center text-center sm:text-left">
<div className="flex items-center justify-end sm:opacity-0 group-hover:opacity-100 transition-opacity"> <h4 className="font-display text-xl md:text-2xl text-night mb-2 group-hover:text-dream-coral transition-colors">{spec?.title}</h4>
<ArrowRight className="text-star" /> <div className="flex items-center justify-center sm:justify-start gap-2 font-sans text-[10px] md:text-sm font-bold text-night/40 uppercase tracking-widest">
</div> <MapPin size={14} className="text-dream-coral" />
</motion.div> <span>{event.location}</span>
); </div>
}) </div>
) : ( </motion.div>
<div className="p-8 border border-cloud/10 rounded-2xl text-center"> );
<p className="font-sans text-cloud/60 italic">De nouvelles dates seront annoncées prochainement.</p> })
</div> ) : (
)} <div className="p-10 md:p-12 border-4 border-dashed border-dream-blue/20 rounded-[32px] md:rounded-[40px] text-center">
<p className="font-sans text-night/40 font-bold uppercase tracking-widest text-sm">De nouveaux rêves arrivent bientôt...</p>
</div>
)}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -178,3 +189,4 @@ export default function Home({ onNavigate }: HomeProps) {
</div> </div>
); );
} }

52
src/components/Navbar.tsx
View file

@ -1,5 +1,5 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { Menu, X, Instagram, Facebook, Youtube } from 'lucide-react'; import { Menu, X, Instagram, Facebook, Youtube, Star } from 'lucide-react';
import { companyInfo } from '../data'; import { companyInfo } from '../data';
interface NavbarProps { interface NavbarProps {
@ -35,40 +35,44 @@ export default function Navbar({ currentPage, onNavigate }: NavbarProps) {
return ( return (
<nav <nav
className={`fixed top-0 w-full z-50 transition-all duration-300 ${ className={`fixed top-0 w-full z-50 transition-all duration-500 ${
isScrolled ? 'bg-cloud/90 backdrop-blur-md shadow-sm py-3' : 'bg-transparent py-5' isScrolled ? 'bg-white/80 backdrop-blur-lg shadow-xl shadow-night/5 py-4' : 'bg-transparent py-8'
}`} }`}
> >
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
{/* Logo Area */} {/* Logo Area */}
<div <div
className="flex items-center gap-3 cursor-pointer group" className="flex items-center gap-4 cursor-pointer group"
onClick={() => handleNavClick('home')} onClick={() => handleNavClick('home')}
> >
{/* Placeholder for the actual logo image */} <div className="relative">
<div className="w-10 h-10 rounded-full bg-night flex items-center justify-center overflow-hidden transition-transform group-hover:scale-105"> <div className="w-12 h-12 rounded-2xl bg-night flex items-center justify-center overflow-hidden transition-all group-hover:rotate-12 group-hover:scale-110 shadow-lg">
<span className="text-cloud font-serif italic text-xl">A</span> <span className="text-cloud font-display text-2xl">A</span>
</div>
<div className="absolute -top-2 -right-2 text-star animate-pulse">
<Star size={16} fill="currentColor" />
</div>
</div> </div>
<span className="font-serif text-2xl font-medium tracking-wide text-night"> <span className="font-display text-2xl font-bold tracking-tight text-night group-hover:text-dream-coral transition-colors">
AspiRêves AspiRêves
</span> </span>
</div> </div>
{/* Desktop Navigation */} {/* Desktop Navigation */}
<div className="hidden md:flex items-center space-x-8"> <div className="hidden md:flex items-center space-x-10">
{navLinks.map((link) => ( {navLinks.map((link) => (
<button <button
key={link.id} key={link.id}
onClick={() => handleNavClick(link.id)} onClick={() => handleNavClick(link.id)}
className={`text-sm tracking-wide uppercase transition-colors relative group ${ className={`text-sm font-bold uppercase tracking-widest transition-all relative group ${
currentPage === link.id ? 'text-night font-medium' : 'text-night/60 hover:text-night' currentPage === link.id ? 'text-dream-coral' : 'text-night/60 hover:text-night'
}`} }`}
> >
{link.label} {link.label}
<span <span
className={`absolute -bottom-1 left-0 h-px bg-night transition-all duration-300 ${ className={`absolute -bottom-2 left-1/2 -translate-x-1/2 h-1.5 w-1.5 rounded-full bg-dream-coral transition-all duration-300 ${
currentPage === link.id ? 'w-full' : 'w-0 group-hover:w-full' currentPage === link.id ? 'opacity-100 scale-100' : 'opacity-0 scale-0 group-hover:opacity-100 group-hover:scale-100'
}`} }`}
/> />
</button> </button>
@ -89,28 +93,28 @@ export default function Navbar({ currentPage, onNavigate }: NavbarProps) {
{/* Mobile Menu */} {/* Mobile Menu */}
{isMobileMenuOpen && ( {isMobileMenuOpen && (
<div className="md:hidden absolute top-full left-0 w-full bg-cloud shadow-lg border-t border-night/5"> <div className="md:hidden absolute top-full left-0 w-full bg-white/95 backdrop-blur-xl shadow-2xl border-t border-night/5 animate-in fade-in slide-in-from-top-4 duration-300">
<div className="px-4 pt-2 pb-6 space-y-1"> <div className="px-6 py-8 space-y-2">
{navLinks.map((link) => ( {navLinks.map((link) => (
<button <button
key={link.id} key={link.id}
onClick={() => handleNavClick(link.id)} onClick={() => handleNavClick(link.id)}
className={`block w-full text-left px-3 py-4 text-base uppercase tracking-wider ${ className={`block w-full text-left px-4 py-4 text-lg font-display tracking-wide rounded-2xl transition-all ${
currentPage === link.id ? 'text-night font-medium bg-night/5' : 'text-night/70' currentPage === link.id ? 'text-dream-coral bg-dream-coral/5 font-bold' : 'text-night/70 hover:bg-night/5'
}`} }`}
> >
{link.label} {link.label}
</button> </button>
))} ))}
<div className="flex gap-4 px-3 pt-6 pb-2"> <div className="flex gap-6 px-4 pt-8 border-t border-night/5">
<a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" className="text-night/60 hover:text-night"> <a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" className="text-night/40 hover:text-dream-pink transition-colors">
<Instagram size={20} /> <Instagram size={24} />
</a> </a>
<a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" className="text-night/60 hover:text-night"> <a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" className="text-night/40 hover:text-dream-blue transition-colors">
<Facebook size={20} /> <Facebook size={24} />
</a> </a>
<a href={companyInfo.socials.youtube} target="_blank" rel="noreferrer" className="text-night/60 hover:text-night"> <a href={companyInfo.socials.youtube} target="_blank" rel="noreferrer" className="text-night/40 hover:text-dream-coral transition-colors">
<Youtube size={20} /> <Youtube size={24} />
</a> </a>
</div> </div>
</div> </div>

75
src/components/Spectacles.tsx
View file

@ -1,24 +1,32 @@
import { motion } from 'motion/react'; import { motion } from 'motion/react';
import { spectacles } from '../data'; import { spectacles } from '../data';
import { ExternalLink, Clock, Users } from 'lucide-react'; import { ExternalLink, Clock, Users, Star, Sparkles } from 'lucide-react';
export default function Spectacles() { export default function Spectacles() {
return ( return (
<div className="pt-32 pb-24 min-h-screen"> <div className="pt-32 pb-24 min-h-screen bg-cloud overflow-hidden relative">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> {/* Background Magic */}
<div className="absolute top-0 right-0 w-96 h-96 bg-dream-purple/20 rounded-full filter blur-[100px] -translate-y-1/2 translate-x-1/2"></div>
<div className="absolute bottom-0 left-0 w-96 h-96 bg-dream-blue/20 rounded-full filter blur-[100px] translate-y-1/2 -translate-x-1/2"></div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
className="text-center mb-20" className="text-center mb-16 md:mb-24"
> >
<h1 className="font-serif text-5xl md:text-7xl text-night mb-6">Nos Spectacles</h1> <div className="inline-flex items-center gap-2 mb-6 px-4 py-1 rounded-full bg-white/50 border border-white/20 text-dream-coral">
<p className="font-sans text-night/60 max-w-2xl mx-auto text-lg"> <Sparkles size={16} />
Des créations originales pour petits et grands, mêlant poésie, humour et burlesque. <span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest">Le Répertoire</span>
</div>
<h1 className="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8">Nos <span className="text-dream-purple italic">Spectacles</span></h1>
<p className="font-sans text-night/60 max-w-2xl mx-auto text-lg md:text-xl leading-relaxed">
Des bulles de poésie et d'humour pour s'évader, <br className="hidden sm:block" />apprendre et grandir ensemble.
</p> </p>
</motion.div> </motion.div>
<div className="space-y-32"> <div className="space-y-24 md:space-y-40">
{spectacles.map((spectacle, index) => ( {spectacles.map((spectacle, index) => (
<motion.div <motion.div
key={spectacle.id} key={spectacle.id}
@ -26,46 +34,57 @@ export default function Spectacles() {
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }} viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.8 }} transition={{ duration: 0.8 }}
className={`flex flex-col ${index % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row'} gap-12 items-center`} className={`flex flex-col ${index % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row'} gap-10 md:gap-16 items-center`}
> >
{/* Image Side */} {/* Image Side - Dream Bubble Look */}
<div className="w-full md:w-1/2"> <div className="w-full md:w-1/2 relative">
<div className="relative aspect-[4/3] overflow-hidden rounded-3xl shadow-2xl shadow-night/10 group"> <div className="absolute -top-4 -left-4 md:-top-6 md:-left-6 w-16 h-16 md:w-24 md:h-24 bg-star/20 rounded-full filter blur-xl md:blur-2xl animate-pulse"></div>
<div className="absolute -bottom-4 -right-4 md:-bottom-6 md:-right-6 w-20 h-20 md:w-32 md:h-32 bg-dream-blue/30 rounded-full filter blur-xl md:blur-2xl animate-pulse animation-delay-2000"></div>
<div className="relative aspect-[4/3] overflow-hidden rounded-[32px] md:rounded-[60px] shadow-2xl shadow-night/10 group border-4 md:border-8 border-white">
<img <img
src={spectacle.image} src={spectacle.image}
alt={spectacle.title} alt={spectacle.title}
className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-105" className="object-cover w-full h-full transition-transform duration-1000 group-hover:scale-110"
referrerPolicy="no-referrer" referrerPolicy="no-referrer"
/> />
<div className="absolute inset-0 bg-night/10 group-hover:bg-transparent transition-colors duration-300" /> <div className="absolute inset-0 bg-gradient-to-tr from-dream-purple/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
</div> </div>
</div> </div>
{/* Content Side */} {/* Content Side */}
<div className="w-full md:w-1/2 space-y-6"> <div className="w-full md:w-1/2 space-y-6 md:space-y-8 text-center md:text-left">
<h2 className="font-serif text-4xl md:text-5xl text-night">{spectacle.title}</h2> <div className="flex items-center justify-center md:justify-start gap-3">
<div className="h-px w-8 md:w-12 bg-dream-coral"></div>
<span className="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest text-dream-coral">Création Originale</span>
</div>
<div className="flex flex-wrap gap-4"> <h2 className="font-display text-4xl md:text-6xl text-night group-hover:text-dream-purple transition-colors">{spectacle.title}</h2>
<div className="flex items-center gap-2 bg-night/5 px-4 py-2 rounded-full text-sm font-sans text-night/70">
<Users size={16} /> <div className="flex flex-wrap justify-center md:justify-start gap-3 md:gap-4">
<div className="flex items-center gap-2 bg-dream-blue/20 px-4 py-1.5 md:px-5 md:py-2 rounded-xl md:rounded-2xl text-xs md:text-sm font-sans font-bold text-dream-blue-dark">
<Users size={16} className="text-dream-blue" />
<span>{spectacle.age}</span> <span>{spectacle.age}</span>
</div> </div>
<div className="flex items-center gap-2 bg-night/5 px-4 py-2 rounded-full text-sm font-sans text-night/70"> <div className="flex items-center gap-2 bg-dream-pink/20 px-4 py-1.5 md:px-5 md:py-2 rounded-xl md:rounded-2xl text-xs md:text-sm font-sans font-bold text-dream-pink-dark">
<Clock size={16} /> <Clock size={16} className="text-dream-pink" />
<span>{spectacle.duration}</span> <span>{spectacle.duration}</span>
</div> </div>
</div> </div>
<p className="font-sans text-lg text-night/70 leading-relaxed"> <p className="font-sans text-lg md:text-xl text-night/70 leading-relaxed">
{spectacle.summary} {spectacle.summary}
</p> </p>
<div className="pt-6 flex flex-wrap gap-4"> <div className="pt-4 md:pt-8 flex flex-wrap justify-center md:justify-start gap-4 md:gap-6">
<button className="bg-night text-cloud px-8 py-3 rounded-full font-sans font-medium hover:bg-night/90 transition-all"> <button className="w-full sm:w-auto bg-night text-cloud px-8 py-4 md:px-10 md:py-4 rounded-full font-sans font-bold tracking-wide hover:bg-night/90 transition-all hover:scale-105 shadow-lg shadow-night/20">
Dossier Pédagogique Dossier Pédagogique
</button> </button>
<button className="border border-night/20 text-night px-8 py-3 rounded-full font-sans font-medium hover:bg-night/5 transition-all flex items-center gap-2"> <button className="group flex items-center gap-3 text-night font-sans font-bold hover:text-dream-purple transition-colors">
Voir les photos <ExternalLink size={16} /> <div className="w-10 h-10 md:w-12 md:h-12 rounded-full border-2 border-night/10 flex items-center justify-center group-hover:border-dream-purple group-hover:bg-dream-purple/10 transition-all">
<ExternalLink size={16} />
</div>
Voir les photos
</button> </button>
</div> </div>
</div> </div>
@ -73,6 +92,10 @@ export default function Spectacles() {
))} ))}
</div> </div>
</div> </div>
{/* Decorative Floating Elements */}
<div className="absolute top-1/4 left-10 text-dream-pink opacity-20 animate-float"><Star size={60} fill="currentColor" /></div>
<div className="absolute bottom-1/4 right-10 text-dream-blue opacity-20 animate-float animation-delay-2000"><Star size={40} fill="currentColor" /></div>
</div> </div>
); );
} }

54
src/index.css
View file

@ -1,13 +1,18 @@
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Outfit:wght@300;400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Outfit:wght@300;400;500;600&family=Fredoka:wght@300..700&display=swap');
@import "tailwindcss"; @import "tailwindcss";
@theme { @theme {
--font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif; --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
--font-serif: "Cormorant Garamond", ui-serif, Georgia, serif; --font-serif: "Cormorant Garamond", ui-serif, Georgia, serif;
--font-display: "Fredoka", sans-serif;
--color-cloud: #FAF9F6; --color-cloud: #F8F7FF;
--color-night: #18181B; --color-night: #2D2D3A;
--color-star: #FBBF24; --color-star: #FFD700;
--color-dream-pink: #FFD6E0;
--color-dream-blue: #C1D3FE;
--color-dream-purple: #E0C3FC;
--color-dream-coral: #FF9F89;
} }
body { body {
@ -15,19 +20,50 @@ body {
color: var(--color-night); color: var(--color-night);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
} }
/* Custom scrollbar for a polished feel */ @keyframes float {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(2deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
@keyframes blob {
0% { transform: scale(1); }
33% { transform: scale(1.1) translate(10px, -10px); }
66% { transform: scale(0.9) translate(-10px, 10px); }
100% { transform: scale(1); }
}
.animate-blob {
animation: blob 10s infinite alternate;
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
/* Custom scrollbar */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 10px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: var(--color-cloud); background: var(--color-cloud);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #d4d4d8; background: var(--color-dream-purple);
border-radius: 4px; border-radius: 10px;
border: 3px solid var(--color-cloud);
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #a1a1aa; background: var(--color-dream-coral);
} }