79 lines
3.4 KiB
TypeScript
79 lines
3.4 KiB
TypeScript
|
import { motion } from 'motion/react';
|
||
|
|
import { spectacles } from '../data';
|
||
|
|
import { ExternalLink, Clock, Users } from 'lucide-react';
|
||
|
|
|
||
|
|
export default function Spectacles() {
|
||
|
|
return (
|
||
|
|
<div className="pt-32 pb-24 min-h-screen">
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.6 }}
|
||
|
|
className="text-center mb-20"
|
||
|
|
>
|
||
|
|
<h1 className="font-serif text-5xl md:text-7xl text-night mb-6">Nos Spectacles</h1>
|
||
|
|
<p className="font-sans text-night/60 max-w-2xl mx-auto text-lg">
|
||
|
|
Des créations originales pour petits et grands, mêlant poésie, humour et burlesque.
|
||
|
|
</p>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
<div className="space-y-32">
|
||
|
|
{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-12 items-center`}
|
||
|
|
>
|
||
|
|
{/* Image Side */}
|
||
|
|
<div className="w-full md:w-1/2">
|
||
|
|
<div className="relative aspect-[4/3] overflow-hidden rounded-3xl shadow-2xl shadow-night/10 group">
|
||
|
|
<img
|
||
|
|
src={spectacle.image}
|
||
|
|
alt={spectacle.title}
|
||
|
|
className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-105"
|
||
|
|
referrerPolicy="no-referrer"
|
||
|
|
/>
|
||
|
|
<div className="absolute inset-0 bg-night/10 group-hover:bg-transparent transition-colors duration-300" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content Side */}
|
||
|
|
<div className="w-full md:w-1/2 space-y-6">
|
||
|
|
<h2 className="font-serif text-4xl md:text-5xl text-night">{spectacle.title}</h2>
|
||
|
|
|
||
|
|
<div className="flex flex-wrap gap-4">
|
||
|
|
<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} />
|
||
|
|
<span>{spectacle.age}</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2 bg-night/5 px-4 py-2 rounded-full text-sm font-sans text-night/70">
|
||
|
|
<Clock size={16} />
|
||
|
|
<span>{spectacle.duration}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p className="font-sans text-lg text-night/70 leading-relaxed">
|
||
|
|
{spectacle.summary}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div className="pt-6 flex flex-wrap gap-4">
|
||
|
|
<button className="bg-night text-cloud px-8 py-3 rounded-full font-sans font-medium hover:bg-night/90 transition-all">
|
||
|
|
Dossier Pédagogique
|
||
|
|
</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">
|
||
|
|
Voir les photos <ExternalLink size={16} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|