90 lines
3.9 KiB
TypeScript
90 lines
3.9 KiB
TypeScript
|
import { motion } from 'motion/react';
|
||
|
|
import { Mail, Clock, MapPin, Users } from 'lucide-react';
|
||
|
|
import { companyInfo } from '../data';
|
||
|
|
|
||
|
|
export default function Ateliers() {
|
||
|
|
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">
|
||
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, x: -30 }}
|
||
|
|
animate={{ opacity: 1, x: 0 }}
|
||
|
|
transition={{ duration: 0.8 }}
|
||
|
|
>
|
||
|
|
<h1 className="font-serif text-5xl md:text-7xl text-night mb-8">Ateliers Théâtre</h1>
|
||
|
|
<div className="space-y-6 font-sans text-lg text-night/70 leading-relaxed">
|
||
|
|
<p>
|
||
|
|
La Compagnie AspiRêves propose des ateliers pour petits et grands enfants, pour que vous aussi vous voliez sur votre petit nuage.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Nos ateliers sont basés sur le jeu, l'expression corporelle, la découverte du clown et la pratique théâtrale dans la bienveillance et le plaisir.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-12 space-y-6">
|
||
|
|
<div className="flex items-start gap-4">
|
||
|
|
<div className="w-12 h-12 rounded-2xl bg-star/10 flex items-center justify-center text-star flex-shrink-0">
|
||
|
|
<Users size={24} />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="font-serif text-xl text-night">Pour tous les âges</h3>
|
||
|
|
<p className="font-sans text-night/60">Enfants, adolescents et adultes.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-start gap-4">
|
||
|
|
<div className="w-12 h-12 rounded-2xl bg-star/10 flex items-center justify-center text-star flex-shrink-0">
|
||
|
|
<Clock size={24} />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="font-serif text-xl text-night">Horaires & Tarifs</h3>
|
||
|
|
<p className="font-sans text-night/60">Contactez-nous pour recevoir la plaquette complète.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-start gap-4">
|
||
|
|
<div className="w-12 h-12 rounded-2xl bg-star/10 flex items-center justify-center text-star flex-shrink-0">
|
||
|
|
<MapPin size={24} />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="font-serif text-xl text-night">Lieux</h3>
|
||
|
|
<p className="font-sans text-night/60">Interventions dans le Tarn et l'Hérault.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-12">
|
||
|
|
<a
|
||
|
|
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"
|
||
|
|
>
|
||
|
|
<Mail size={18} />
|
||
|
|
S'inscrire ou se renseigner
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
||
|
|
animate={{ opacity: 1, scale: 1 }}
|
||
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
||
|
|
className="relative"
|
||
|
|
>
|
||
|
|
<div className="aspect-square rounded-full overflow-hidden border-8 border-white shadow-2xl">
|
||
|
|
<img
|
||
|
|
src="https://picsum.photos/seed/theater-workshop/800/800"
|
||
|
|
alt="Atelier Théâtre"
|
||
|
|
className="w-full h-full object-cover"
|
||
|
|
referrerPolicy="no-referrer"
|
||
|
|
/>
|
||
|
|
</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>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|