101 lines
6.1 KiB
TypeScript
101 lines
6.1 KiB
TypeScript
import { motion } from 'motion/react';
|
|
import { spectacles } from '../data';
|
|
import { ExternalLink, Clock, Users, Star, Sparkles } from 'lucide-react';
|
|
|
|
export default function Spectacles() {
|
|
return (
|
|
<div className="pt-32 pb-24 min-h-screen bg-cloud overflow-hidden relative">
|
|
{/* 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
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="text-center mb-16 md:mb-24"
|
|
>
|
|
<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">
|
|
<Sparkles size={16} />
|
|
<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>
|
|
</motion.div>
|
|
|
|
<div className="space-y-24 md:space-y-40">
|
|
{spectacles.map((spectacle, index) => (
|
|
<motion.div
|
|
key={spectacle.id}
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
transition={{ duration: 0.8 }}
|
|
className={`flex flex-col ${index % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row'} gap-10 md:gap-16 items-center`}
|
|
>
|
|
{/* Image Side - Dream Bubble Look */}
|
|
<div className="w-full md:w-1/2 relative">
|
|
<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
|
|
src={spectacle.image}
|
|
alt={spectacle.title}
|
|
className="object-cover w-full h-full transition-transform duration-1000 group-hover:scale-110"
|
|
referrerPolicy="no-referrer"
|
|
/>
|
|
<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>
|
|
|
|
{/* Content Side */}
|
|
<div className="w-full md:w-1/2 space-y-6 md:space-y-8 text-center md:text-left">
|
|
<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>
|
|
|
|
<h2 className="font-display text-4xl md:text-6xl text-night group-hover:text-dream-purple transition-colors">{spectacle.title}</h2>
|
|
|
|
<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>
|
|
</div>
|
|
<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} className="text-dream-pink" />
|
|
<span>{spectacle.duration}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="font-sans text-lg md:text-xl text-night/70 leading-relaxed">
|
|
{spectacle.summary}
|
|
</p>
|
|
|
|
<div className="pt-4 md:pt-8 flex flex-wrap justify-center md:justify-start gap-4 md:gap-6">
|
|
<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
|
|
</button>
|
|
<button className="group flex items-center gap-3 text-night font-sans font-bold hover:text-dream-purple transition-colors">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</motion.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>
|
|
);
|
|
}
|