109 lines
5.9 KiB
Text
109 lines
5.9 KiB
Text
---
|
|
import Layout from '../layouts/Layout.astro';
|
|
import PageSection from '../components/PageSection.astro';
|
|
import { Icon } from 'astro-icon/components';
|
|
import { companyInfo } from '../data';
|
|
---
|
|
|
|
<Layout title="Ateliers Théâtre — Compagnie AspiRêves">
|
|
<PageSection>
|
|
<div slot="background" class="absolute top-1/4 right-0 w-[500px] h-[500px] bg-dream-pink/20 rounded-full filter blur-[120px] translate-x-1/2"></div>
|
|
<!-- Header -->
|
|
<div class="animate-entrance text-center mb-16 md:mb-24">
|
|
<div class="inline-flex items-center gap-2 mb-6 px-4 py-1 rounded-full bg-white/50 border border-white/20 text-dream-coral">
|
|
<Icon name="lucide:sparkles" size={16} />
|
|
<span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest">Partage & Transmission</span>
|
|
</div>
|
|
<h1 class="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8 leading-tight">Ateliers <span class="text-dream-purple italic">Théâtre</span></h1>
|
|
<p class="font-sans text-night/60 max-w-2xl mx-auto text-lg md:text-xl leading-relaxed">
|
|
La Compagnie AspiRêves propose des ateliers pour petits et grands, pour que vous aussi vous voliez sur votre petit nuage.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-16">
|
|
<!-- Enfants & Ados -->
|
|
<div class="fade-up bg-white p-8 md:p-12 rounded-[32px] md:rounded-[40px] border border-white shadow-xl shadow-night/5">
|
|
<div class="w-14 h-14 rounded-2xl bg-dream-purple/20 flex items-center justify-center text-dream-purple mb-8">
|
|
<Icon name="lucide:users" size={28} />
|
|
</div>
|
|
<h2 class="font-display text-3xl md:text-4xl text-night mb-4">Enfants & Ados</h2>
|
|
<p class="font-sans text-night/50 font-bold uppercase tracking-widest text-xs mb-8">Jeu, expression & créativité</p>
|
|
<ul class="space-y-4 font-sans text-night/70 text-lg leading-relaxed">
|
|
<li class="flex items-start gap-3">
|
|
<span class="w-2 h-2 rounded-full bg-dream-purple mt-2.5 flex-shrink-0"></span>
|
|
Développement de l'imagination
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<span class="w-2 h-2 rounded-full bg-dream-purple mt-2.5 flex-shrink-0"></span>
|
|
Expression corporelle et vocale
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<span class="w-2 h-2 rounded-full bg-dream-purple mt-2.5 flex-shrink-0"></span>
|
|
Confiance en soi et écoute
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<span class="w-2 h-2 rounded-full bg-dream-purple mt-2.5 flex-shrink-0"></span>
|
|
Jeux d'improvisation
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Adultes -->
|
|
<div class="fade-up bg-white p-8 md:p-12 rounded-[32px] md:rounded-[40px] border border-white shadow-xl shadow-night/5" style="transition-delay: 0.2s">
|
|
<div class="w-14 h-14 rounded-2xl bg-dream-coral/20 flex items-center justify-center text-dream-coral mb-8">
|
|
<Icon name="lucide:drama" size={28} />
|
|
</div>
|
|
<h2 class="font-display text-3xl md:text-4xl text-night mb-4">Adultes</h2>
|
|
<p class="font-sans text-night/50 font-bold uppercase tracking-widest text-xs mb-8">Bienveillance & plaisir</p>
|
|
<ul class="space-y-4 font-sans text-night/70 text-lg leading-relaxed">
|
|
<li class="flex items-start gap-3">
|
|
<span class="w-2 h-2 rounded-full bg-dream-coral mt-2.5 flex-shrink-0"></span>
|
|
Mise en scène et jeu théâtral
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<span class="w-2 h-2 rounded-full bg-dream-coral mt-2.5 flex-shrink-0"></span>
|
|
Découverte du clown
|
|
</li>
|
|
<li class="flex items-start gap-3">
|
|
<span class="w-2 h-2 rounded-full bg-dream-coral mt-2.5 flex-shrink-0"></span>
|
|
Expression corporelle
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info cards -->
|
|
<div class="fade-up mt-12 md:mt-16 grid grid-cols-1 sm:grid-cols-2 gap-6 md:gap-8 max-w-3xl mx-auto">
|
|
<div class="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">
|
|
<div class="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">
|
|
<Icon name="lucide:map-pin" size={24} />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-display text-lg md:text-xl text-night mb-1">Lieux d'intervention</h3>
|
|
<p class="font-sans text-[10px] md:text-sm text-night/50 font-bold uppercase tracking-widest">Tarn (81) & Hérault (34)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="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">
|
|
<div class="w-12 h-12 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-dream-pink/20 flex items-center justify-center text-dream-pink flex-shrink-0">
|
|
<Icon name="lucide:hand" size={24} />
|
|
</div>
|
|
<div>
|
|
<h3 class="font-display text-lg md:text-xl text-night mb-1">Plaquette</h3>
|
|
<p class="font-sans text-[10px] md:text-sm text-night/50 font-bold uppercase tracking-widest">Sur demande</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<div class="mt-12 md:mt-16 text-center">
|
|
<a
|
|
href={`mailto:${companyInfo.emails.ateliers}`}
|
|
class="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"
|
|
>
|
|
<Icon name="lucide:mail" size={20} />
|
|
Nous contacter
|
|
</a>
|
|
</div>
|
|
</PageSection>
|
|
</Layout>
|