102 lines
5.2 KiB
Text
102 lines
5.2 KiB
Text
---
|
|
import Layout from '../../layouts/Layout.astro';
|
|
import { Icon } from 'astro-icon/components';
|
|
import { fetchSpectacles, fetchAgenda } from '../../lib/storyblok';
|
|
|
|
const [spectacles, agenda] = await Promise.all([fetchSpectacles(), fetchAgenda()]);
|
|
|
|
const sortedAgenda = [...agenda].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
|
|
const now = new Date();
|
|
---
|
|
|
|
<Layout title="Agenda — Compagnie AspiRêves">
|
|
<div class="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden">
|
|
<!-- Background -->
|
|
<div class="absolute top-1/2 left-0 w-96 h-96 bg-dream-purple/10 rounded-full filter blur-[120px] -translate-x-1/2"></div>
|
|
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<!-- Header -->
|
|
<div class="animate-entrance text-center mb-12 md:mb-20">
|
|
<h1 class="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8">L'<span class="text-dream-coral italic">Agenda</span></h1>
|
|
<p class="font-sans text-night/60 max-w-2xl mx-auto text-lg md:text-xl leading-relaxed">
|
|
Venez nous voir sur scène ! <br class="hidden sm:block" />Chaque date est une nouvelle aventure.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-6 md:space-y-10">
|
|
{sortedAgenda.map((event, index) => {
|
|
const spectacle = spectacles.find(s => s.id === event.spectacleId);
|
|
const dateObj = new Date(event.date);
|
|
const isPast = dateObj < now;
|
|
|
|
return (
|
|
<div
|
|
class:list={[
|
|
'fade-up group relative flex flex-col md:flex-row gap-6 md:gap-10 p-6 md:p-10 rounded-[32px] md:rounded-[40px] border transition-all',
|
|
isPast
|
|
? 'opacity-40 grayscale bg-night/5 border-transparent'
|
|
: 'bg-white border-white shadow-xl shadow-night/5 hover:shadow-dream-purple/10 hover:scale-[1.02]',
|
|
]}
|
|
style={`transition-delay: ${index * 0.1}s`}
|
|
>
|
|
<!-- Date Block -->
|
|
<div class="flex-shrink-0 flex flex-col items-center justify-center w-24 h-24 md:w-36 md:h-36 rounded-[24px] md:rounded-[32px] bg-gradient-to-br from-dream-purple to-dream-blue text-white shadow-lg mx-auto md:mx-0">
|
|
<span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest opacity-80 mb-1">
|
|
{dateObj.toLocaleString('fr-FR', { month: 'short' })}
|
|
</span>
|
|
<span class="font-display text-4xl md:text-6xl">
|
|
{dateObj.getDate()}
|
|
</span>
|
|
<span class="font-sans text-[10px] md:text-xs font-bold opacity-60 mt-1">
|
|
{dateObj.getFullYear()}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Info Block -->
|
|
<div class="flex-grow flex flex-col justify-center space-y-3 md:space-y-4 text-center md:text-left">
|
|
<div class="flex items-center justify-center md:justify-start gap-3">
|
|
<Icon name="lucide:sparkles" size={14} class="text-dream-coral" />
|
|
<span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest text-dream-coral">
|
|
{spectacle?.title}
|
|
</span>
|
|
{isPast && <span class="text-[10px] uppercase tracking-tighter bg-night/10 px-2 py-0.5 rounded text-night/50 font-bold">Passé</span>}
|
|
</div>
|
|
<h3 class="font-display text-2xl md:text-4xl text-night">{spectacle?.title}</h3>
|
|
<div class="flex items-center justify-center md:justify-start gap-3 text-night/50 font-sans font-bold text-[10px] md:text-sm uppercase tracking-widest">
|
|
<Icon name="lucide:map-pin" size={16} class="text-dream-blue" />
|
|
<span>{event.location}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Block -->
|
|
<div class="flex-shrink-0 flex items-center">
|
|
{event.bookingLink ? (
|
|
<a
|
|
href={event.bookingLink}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
class="w-full md:w-auto flex items-center justify-center gap-3 bg-night text-cloud px-8 py-4 rounded-full font-sans font-bold text-sm uppercase tracking-widest hover:bg-night/80 transition-all hover:scale-105 shadow-lg shadow-night/20"
|
|
>
|
|
<Icon name="lucide:ticket" size={20} />
|
|
Réserver
|
|
</a>
|
|
) : (
|
|
<div class="w-full md:w-auto flex items-center justify-center gap-2 border-2 border-dashed border-night/10 text-night/30 px-8 py-4 rounded-full font-sans text-sm font-bold uppercase tracking-widest italic">
|
|
<Icon name="lucide:info" size={18} />
|
|
Sur place
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{sortedAgenda.length === 0 && (
|
|
<div class="text-center py-32 bg-white/50 rounded-[60px] border-4 border-dashed border-dream-blue/20">
|
|
<p class="font-display text-3xl text-night/30 italic">Le nuage se prépare pour de nouveaux voyages...</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Layout>
|