aspireves.org/src/pages/cest-qui.astro

118 lines
7.5 KiB
Text
Raw Normal View History

---
import Layout from '../layouts/Layout.astro';
import { Icon } from 'astro-icon/components';
import StarFilled from '../components/icons/StarFilled.astro';
import { companyInfo } from '../data';
---
<Layout title="C'est qui ? — Compagnie AspiRêves">
<div class="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden">
<!-- Background -->
<div class="absolute top-1/4 left-0 w-[500px] h-[500px] bg-dream-purple/20 rounded-full filter blur-[120px] -translate-x-1/2"></div>
<div class="absolute bottom-1/4 right-0 w-[400px] h-[400px] bg-dream-pink/20 rounded-full filter blur-[120px] translate-x-1/2"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<!-- 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">La Compagnie</span>
</div>
<h1 class="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8 leading-tight">C'est <span class="text-dream-coral italic">qui ?</span></h1>
<p class="font-sans text-night/60 max-w-2xl mx-auto text-lg md:text-xl leading-relaxed">
{companyInfo.description}
</p>
</div>
<!-- Portrait -->
<div class="fade-up flex flex-col items-center mb-16 md:mb-24">
<div class="w-48 h-48 md:w-64 md:h-64 rounded-full overflow-hidden shadow-2xl shadow-night/10 border-8 border-white mb-8">
<img
src="https://picsum.photos/seed/eleonore-astruc/400/400"
alt="Éléonore Astruc"
class="object-cover w-full h-full"
referrerpolicy="no-referrer"
/>
</div>
<h2 class="font-display text-3xl md:text-5xl text-night mb-2">Éléonore Astruc</h2>
<p class="font-sans text-dream-coral font-bold uppercase tracking-widest text-xs md:text-sm">Directrice Artistique</p>
</div>
<!-- Parcours -->
<div class="max-w-5xl mx-auto space-y-8 md:space-y-12">
<!-- Formation -->
<div class="fade-up grid grid-cols-1 md:grid-cols-[auto_1fr] gap-6 md:gap-10 items-start 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 flex-shrink-0">
<Icon name="lucide:graduation-cap" size={28} />
</div>
<div>
<h3 class="font-display text-2xl md:text-3xl text-night mb-2">Formation</h3>
<p class="font-sans text-night/50 font-bold uppercase tracking-widest text-xs mb-6">Théâtre, chant, danse & clown</p>
<p class="font-sans text-night/70 text-lg leading-relaxed">
Éléonore Astruc, véritable passionnée de théâtre depuis son plus jeune âge, a su transformer cette passion en une carrière artistique pétillante et accomplie. Diplômée de l'École de Théâtre la Compagnie Maritime à Montpellier et titulaire d'un Master 1 en Arts du spectacle, elle a développé un éventail de compétences en théâtre, chant et danse. Sa spécialisation en clown à l'école Le Samovar a ajouté une touche ludique et expressive à son répertoire, soulignant sa capacité à captiver et à enchanter son public.
</p>
</div>
</div>
<!-- Scène -->
<div class="fade-up grid grid-cols-1 md:grid-cols-[auto_1fr] gap-6 md:gap-10 items-start bg-white p-8 md:p-12 rounded-[32px] md:rounded-[40px] border border-white shadow-xl shadow-night/5" style="transition-delay: 0.15s">
<div class="w-14 h-14 rounded-2xl bg-dream-coral/20 flex items-center justify-center text-dream-coral flex-shrink-0">
<Icon name="lucide:drama" size={28} />
</div>
<div>
<h3 class="font-display text-2xl md:text-3xl text-night mb-2">Sur scène</h3>
<p class="font-sans text-night/50 font-bold uppercase tracking-widest text-xs mb-6">Jeu, écriture & mise en scène</p>
<p class="font-sans text-night/70 text-lg leading-relaxed">
Sur scène, Éléonore se distingue par son talent et sa polyvalence, jouant dans de nombreuses pièces et collaborant avec des metteurs en scène de renom à Paris. Sa créativité débordante l'a conduite à écrire et mettre en scène son premier spectacle, « Planète des Songes », une œuvre qui reflète son imagination et son désir constant d'innover.
</p>
</div>
</div>
<!-- Jeune public -->
<div class="fade-up grid grid-cols-1 md:grid-cols-[auto_1fr] gap-6 md:gap-10 items-start bg-white p-8 md:p-12 rounded-[32px] md:rounded-[40px] border border-white shadow-xl shadow-night/5" style="transition-delay: 0.3s">
<div class="w-14 h-14 rounded-2xl bg-dream-blue/20 flex items-center justify-center text-dream-blue flex-shrink-0">
<Icon name="lucide:star" size={28} />
</div>
<div>
<h3 class="font-display text-2xl md:text-3xl text-night mb-2">Jeune public</h3>
<p class="font-sans text-night/50 font-bold uppercase tracking-widest text-xs mb-6">Depuis 2018</p>
<p class="font-sans text-night/70 text-lg leading-relaxed">
Depuis 2018, elle s'est spécialisée dans la création de spectacles pour jeune public, avec les œuvres lumineuses et enchantées « BASSIBULLE », « MiNUS » et « Le Cadeau Surprise ! ». Ces spectacles ont rencontré un succès éclatant, séduisant les jeunes spectateurs par leur fraîcheur et leur originalité.
</p>
</div>
</div>
<!-- Transmission -->
<div class="fade-up grid grid-cols-1 md:grid-cols-[auto_1fr] gap-6 md:gap-10 items-start bg-white p-8 md:p-12 rounded-[32px] md:rounded-[40px] border border-white shadow-xl shadow-night/5" style="transition-delay: 0.45s">
<div class="w-14 h-14 rounded-2xl bg-dream-pink/20 flex items-center justify-center text-dream-pink flex-shrink-0">
<Icon name="lucide:heart-handshake" size={28} />
</div>
<div>
<h3 class="font-display text-2xl md:text-3xl text-night mb-2">Transmission</h3>
<p class="font-sans text-night/50 font-bold uppercase tracking-widest text-xs mb-6">Ateliers & parcours théâtre</p>
<p class="font-sans text-night/70 text-lg leading-relaxed">
En plus de sa carrière artistique, Éléonore transmet son énergie et son savoir-faire à travers des ateliers de théâtre pour enfants, adolescents et adultes. Depuis 2020, elle participe avec l'ADDA du Tarn au « Parcours théâtre », inspirant de nombreux jeunes talents et partageant avec eux sa passion vibrante pour le théâtre.
</p>
</div>
</div>
</div>
<!-- CTA -->
<div class="mt-12 md:mt-16 text-center">
<a
href="/contact/"
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>
</div>
<!-- Floating decoration -->
<div class="absolute bottom-20 right-10 text-dream-coral opacity-20 animate-float">
<StarFilled size={48} />
</div>
</div>
</Layout>