jalil/aspireves.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adapter le layout pour les affiches portrait depuis StoryBlok

Browse source 
Renomme le champ image en affiche (StoryBlok), supprime les données hardcodées de data.ts, et adapte les layouts : ratio naturel sans rognage, largeur image réduite à 2/5 avec texte élargi à 3/5, border-radius adouci.
This commit is contained in:
Jalil Arfaoui 2026-03-09 15:17:08 +01:00
parent 1c03f8d195
commit 3639639062
6 changed files with 32 additions and 145 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
src/data.ts
View file

@ -1,7 +1,7 @@
export const companyInfo = {
name: "Compagnie AspiRêves",
description: "La Compagnie AspiRêves vous embarque sur son petit nuage. Un petit nuage tout doux, poétique, drôle et burlesque. Mais attention, ça tangue ! C'est du rêve qui secoue, qui trébuche, des songes d'adultes, des jeux d'enfants... c'est du spectacle vivant.",
founder: "Éléonore Astruc",
founder: "Eléonore Astruc",
founderRole: "Autrice, comédienne & metteuse en scène",
address: "14 rue Gisclard, 81160 Saint-Juéry",
phone: "06 84 26 36 92",
@ -15,116 +15,3 @@ export const companyInfo = {
},
teaserVideoId: "fImFdHPvXa8"
};
export const spectacles = [
{
id: "bassibulle",
title: "BASSIBULLE",
category: "jeune-public" as const,
retired: false,
age: "Dès 6 mois",
duration: "30 min",
summary: "Une bassine, un personnage... Que va-t-il se passer entre ces deux-là ? Au fil des découvertes et des explorations, c'est une véritable aventure pleine d'émotions qui se construit sous les yeux des enfants. La bassine, tantôt docile, tantôt rebelle, n'en finit pas d'embêter ce personnage bien décidé à créer le lien avec cet objet.",
credits: "Création et interprétation : Éléonore Astruc",
image: "https://picsum.photos/seed/bassibulle/800/600",
gallery: [
"https://picsum.photos/seed/bassi1/400/300",
"https://picsum.photos/seed/bassi2/400/300"
],
dossierPro: "#"
},
{
id: "minus",
title: "MiNUS",
category: "jeune-public" as const,
retired: false,
age: "À partir de 4 ans",
duration: "45 min",
summary: "Minus est un garçon pas comme les autres. Dans son village, dans sa famille, tout le monde l'appelle MiNUS, si bien qu'il finit par croire que c'est son vrai nom. Rien n'est à sa taille, il ne voit jamais rien, n'entend jamais rien... Mais un jour, grâce à de nouveaux arrivants, sa vie bascule dans une aventure héroïque et poétique.",
credits: "Création et interprétation : Éléonore Astruc",
image: "https://picsum.photos/seed/minus/800/600",
gallery: [
"https://picsum.photos/seed/minus1/400/300",
"https://picsum.photos/seed/minus2/400/300"
],
dossierPro: "#"
},
{
id: "cadeau-surprise",
title: "Le Cadeau Surprise !",
category: "jeune-public" as const,
retired: false,
age: "De 6 mois à 6 ans",
duration: "30 min",
summary: "Un spectacle de théâtre visuel et sensoriel ponctué de chansons, pensé pour émerveiller les tout-petits.",
credits: "Création et interprétation : Éléonore Astruc",
image: "https://picsum.photos/seed/cadeau-surprise/800/600",
gallery: [],
dossierPro: "#"
},
{
id: "la-piece",
title: "La Pièce",
category: "tout-public" as const,
retired: false,
age: "Tout public",
duration: "",
summary: "Un drame sur la résistance, écrit par Michel Cals.",
credits: "Texte : Michel Cals — Avec : Jalil Arfaoui, Éléonore Astruc, Cathy Giovannini, Arthur Placet, Jean-Louis Reynes",
image: "https://picsum.photos/seed/la-piece/800/600",
gallery: [],
dossierPro: "#"
},
{
id: "fulgurante-envie",
title: "Une fulgurante envie de s'asseoir",
category: "tout-public" as const,
retired: false,
age: "Tout public",
duration: "",
summary: "Un duo burlesque et poétique.",
credits: "Écriture et interprétation : Éléonore Astruc & Cathy Giovannini",
image: "https://picsum.photos/seed/fulgurante/800/600",
gallery: [],
dossierPro: "#"
},
{
id: "au-pied-de-mon-arbre",
title: "Au pied de mon arbre",
category: "tout-public" as const,
retired: true,
age: "Tout public",
duration: "",
summary: "",
credits: "",
image: "https://picsum.photos/seed/arbre/800/600",
gallery: [],
dossierPro: "#"
},
{
id: "planete-des-songes",
title: "Planète des Songes",
category: "tout-public" as const,
retired: true,
age: "Tout public",
duration: "Duo burlesque gestuel",
summary: "Les aventures sans parole d'Éléonore et Fred nous transportent de la jungle des employés de bureau à la moiteur d'une chambre à coucher. Un univers poétique et absurde qui nous emmène avec un grain de folie sur la Planète des Songes.",
credits: "Écriture et interprétation : Éléonore Astruc & Frédéric Pillet",
image: "https://picsum.photos/seed/planete-songes/800/600",
gallery: [
"https://picsum.photos/seed/songes1/400/300",
"https://picsum.photos/seed/songes2/400/300"
],
dossierPro: "#"
}
];
export const agenda = [
{
id: "1",
date: "2026-03-18T15:00:00",
location: "La Manufacture, Villefranche-de-Rouergue",
spectacleId: "minus",
bookingLink: null // Entrée libre
}
];

4
src/lib/storyblok.ts
View file

@ -14,7 +14,7 @@ export interface Spectacle {
duration: string;
summary: string;
credits: string;
image: string;
affiche: string;
gallery: string[];
dossierPro: string;
_blok: SbBlokData;
@ -51,7 +51,7 @@ export function mapStoryToSpectacle(story: any): Spectacle {
duration: c.duree || '',
summary: c.resume || '',
credits: c.credits || '',
image: c.image?.filename || '',
affiche: c.affiche?.filename || '',
gallery: (c.galerie || []).map((a: any) => a.filename),
dossierPro: c.dossier?.filename || '',
_blok: c,

4
src/pages/index.astro
View file

@ -83,9 +83,9 @@ const spectacles = allSpectacles;
class="fade-up group cursor-pointer block"
style={`transition-delay: ${index * 0.15}s`}
>
<div class="relative aspect-[4/5] overflow-hidden rounded-[32px] md:rounded-[40px] mb-6 md:mb-8 shadow-2xl shadow-night/5 group-hover:shadow-dream-purple/20 transition-all duration-500">
<div class="relative aspect-[3/4] overflow-hidden rounded-[32px] md:rounded-[40px] mb-6 md:mb-8 shadow-2xl shadow-night/5 group-hover:shadow-dream-purple/20 transition-all duration-500">
<img
src={spectacle.image}
src={spectacle.affiche}
alt={spectacle.title}
class="object-cover w-full h-full transform group-hover:scale-110 transition-transform duration-1000 ease-in-out"
referrerpolicy="no-referrer"

14
src/pages/la-compagnie.astro
View file

@ -24,10 +24,10 @@ import { companyInfo } from '../data';
La Compagnie AspiRêves a été créée en 2017 à Paris. Elle s'éveille 1 an plus tard avec sa première création tout public « Planète des Songes ». Puis la compagnie s'est installée dans le Tarn pour se concentrer sur la création de plusieurs spectacles jeune public.
</p>
<p>
Depuis septembre 2022, la Compagnie AspiRêves propose des ateliers théâtre, animés par Éléonore Astruc, pour les enfants, les adolescents et les adultes à la salle associative de la Gare à Saint-Juéry.
Depuis septembre 2022, la Compagnie AspiRêves propose des ateliers théâtre, animés par Eléonore Astruc, pour les enfants, les adolescents et les adultes à la salle associative de la Gare à Saint-Juéry.
</p>
<p>
Début 2023, suite à la rencontre de différents artistes, la compagnie décide de se lancer dans la création de nouveaux spectacles tout public. « Une fulgurante envie de s'asseoir » écrit et interprété par Éléonore Astruc et Cathy Giovannini. Et « La Pièce » écrit par Michel Cals.
Début 2023, suite à la rencontre de différents artistes, la compagnie décide de se lancer dans la création de nouveaux spectacles tout public. « Une fulgurante envie de s'asseoir » écrit et interprété par Eléonore Astruc et Cathy Giovannini. Et « La Pièce » écrit par Michel Cals.
</p>
<p class="text-night font-medium italic">
La Compagnie AspiRêves a pour but de faire rêver les petits et les grands mais également de créer, de transmettre et de s'engager dans l'éducation artistique et culturelle.
@ -41,12 +41,12 @@ import { companyInfo } from '../data';
<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="/images/eleonore-astruc.jpg"
alt="Éléonore Astruc"
alt="Elé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>
<h2 class="font-display text-3xl md:text-5xl text-night mb-2">Eléonore Astruc</h2>
<p class="font-sans text-dream-coral font-bold uppercase tracking-widest text-xs md:text-sm">Directrice Artistique</p>
</div>
@ -61,7 +61,7 @@ import { companyInfo } from '../data';
<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.
Elé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>
@ -75,7 +75,7 @@ import { companyInfo } from '../data';
<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.
Sur scène, Elé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>
@ -103,7 +103,7 @@ import { companyInfo } from '../data';
<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.
En plus de sa carrière artistique, Elé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>

10
src/pages/spectacles/[id].astro
View file

@ -63,18 +63,18 @@ if (!spectacle) {
<!-- Hero -->
<div class="flex flex-col md:flex-row gap-10 md:gap-16 items-center mb-16 md:mb-24">
<div class="fade-scale w-full md:w-1/2">
<div class="relative aspect-[4/3] overflow-hidden rounded-[32px] md:rounded-[60px] shadow-2xl shadow-night/10 border-4 md:border-8 border-white">
<div class="fade-scale w-full md:w-2/5">
<div class="relative overflow-hidden rounded-2xl md:rounded-3xl shadow-2xl shadow-night/10 border-4 border-white">
<img
src={spectacle.image}
src={spectacle.affiche}
alt={spectacle.title}
class="object-cover w-full h-full"
class="w-full h-auto"
referrerpolicy="no-referrer"
/>
</div>
</div>
<div class="fade-up w-full md:w-1/2 space-y-6 text-center md:text-left" style="transition-delay: 0.2s">
<div class="fade-up w-full md:w-3/5 space-y-6 text-center md:text-left" style="transition-delay: 0.2s">
{spectacle.retired && (
<div class="inline-block px-4 py-1 rounded-full bg-night/10 text-night/50 font-sans text-xs font-bold uppercase tracking-widest">
Spectacle retraité

30
src/pages/spectacles/index.astro
View file

@ -42,14 +42,14 @@ const retraites = spectacles.filter(s => s.retired);
]}
>
<!-- Image -->
<a href={`/spectacles/${spectacle.id}/`} class="w-full md:w-1/2 relative cursor-pointer">
<a href={`/spectacles/${spectacle.id}/`} class="w-full md:w-2/5 relative cursor-pointer">
<div class="absolute -top-4 -left-4 md:-top-6 md:-left-6 w-16 h-16 md:w-24 md:h-24 bg-star/20 rounded-full filter blur-xl md:blur-2xl animate-pulse"></div>
<div class="absolute -bottom-4 -right-4 md:-bottom-6 md:-right-6 w-20 h-20 md:w-32 md:h-32 bg-dream-blue/30 rounded-full filter blur-xl md:blur-2xl animate-pulse animation-delay-2000"></div>
<div class="relative aspect-[4/3] overflow-hidden rounded-[32px] md:rounded-[60px] shadow-2xl shadow-night/10 group border-4 md:border-8 border-white">
<div class="relative overflow-hidden rounded-2xl md:rounded-3xl shadow-2xl shadow-night/10 group border-4 border-white">
<img
src={spectacle.image}
src={spectacle.affiche}
alt={spectacle.title}
class="object-cover w-full h-full transition-transform duration-1000 group-hover:scale-110"
class="w-full h-auto transition-transform duration-1000 group-hover:scale-110"
referrerpolicy="no-referrer"
/>
<div class="absolute inset-0 bg-gradient-to-tr from-dream-purple/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
@ -57,7 +57,7 @@ const retraites = spectacles.filter(s => s.retired);
</a>
<!-- Content -->
<div class="w-full md:w-1/2 space-y-6 md:space-y-8 text-center md:text-left">
<div class="w-full md:w-3/5 space-y-6 md:space-y-8 text-center md:text-left">
<div class="flex items-center justify-center md:justify-start gap-3">
<div class="h-px w-8 md:w-12 bg-dream-coral"></div>
<span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest text-dream-coral">Création Originale</span>
@ -112,14 +112,14 @@ const retraites = spectacles.filter(s => s.retired);
]}
>
<!-- Image -->
<a href={`/spectacles/${spectacle.id}/`} class="w-full md:w-1/2 relative cursor-pointer">
<a href={`/spectacles/${spectacle.id}/`} class="w-full md:w-2/5 relative cursor-pointer">
<div class="absolute -top-4 -left-4 md:-top-6 md:-left-6 w-16 h-16 md:w-24 md:h-24 bg-star/20 rounded-full filter blur-xl md:blur-2xl animate-pulse"></div>
<div class="absolute -bottom-4 -right-4 md:-bottom-6 md:-right-6 w-20 h-20 md:w-32 md:h-32 bg-dream-blue/30 rounded-full filter blur-xl md:blur-2xl animate-pulse animation-delay-2000"></div>
<div class="relative aspect-[4/3] overflow-hidden rounded-[32px] md:rounded-[60px] shadow-2xl shadow-night/10 group border-4 md:border-8 border-white">
<div class="relative overflow-hidden rounded-2xl md:rounded-3xl shadow-2xl shadow-night/10 group border-4 border-white">
<img
src={spectacle.image}
src={spectacle.affiche}
alt={spectacle.title}
class="object-cover w-full h-full transition-transform duration-1000 group-hover:scale-110"
class="w-full h-auto transition-transform duration-1000 group-hover:scale-110"
referrerpolicy="no-referrer"
/>
<div class="absolute inset-0 bg-gradient-to-tr from-dream-purple/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
@ -127,7 +127,7 @@ const retraites = spectacles.filter(s => s.retired);
</a>
<!-- Content -->
<div class="w-full md:w-1/2 space-y-6 md:space-y-8 text-center md:text-left">
<div class="w-full md:w-3/5 space-y-6 md:space-y-8 text-center md:text-left">
<div class="flex items-center justify-center md:justify-start gap-3">
<div class="h-px w-8 md:w-12 bg-dream-coral"></div>
<span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest text-dream-coral">Création Originale</span>
@ -180,20 +180,20 @@ const retraites = spectacles.filter(s => s.retired);
index % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row',
]}
>
<a href={`/spectacles/${spectacle.id}/`} class="w-full md:w-1/2 relative cursor-pointer">
<a href={`/spectacles/${spectacle.id}/`} class="w-full md:w-2/5 relative cursor-pointer">
<div class="absolute -top-4 -left-4 md:-top-6 md:-left-6 w-16 h-16 md:w-24 md:h-24 bg-star/20 rounded-full filter blur-xl md:blur-2xl animate-pulse"></div>
<div class="absolute -bottom-4 -right-4 md:-bottom-6 md:-right-6 w-20 h-20 md:w-32 md:h-32 bg-dream-blue/30 rounded-full filter blur-xl md:blur-2xl animate-pulse animation-delay-2000"></div>
<div class="relative aspect-[4/3] overflow-hidden rounded-[32px] md:rounded-[60px] shadow-2xl shadow-night/10 group border-4 md:border-8 border-white">
<div class="relative overflow-hidden rounded-2xl md:rounded-3xl shadow-2xl shadow-night/10 group border-4 border-white">
<img
src={spectacle.image}
src={spectacle.affiche}
alt={spectacle.title}
class="object-cover w-full h-full transition-transform duration-1000 group-hover:scale-110"
class="w-full h-auto transition-transform duration-1000 group-hover:scale-110"
referrerpolicy="no-referrer"
/>
<div class="absolute inset-0 bg-gradient-to-tr from-dream-purple/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
</div>
</a>
<div class="w-full md:w-1/2 space-y-6 md:space-y-8 text-center md:text-left">
<div class="w-full md:w-3/5 space-y-6 md:space-y-8 text-center md:text-left">
<div class="flex items-center justify-center md:justify-start gap-3">
<div class="h-px w-8 md:w-12 bg-dream-coral"></div>
<span class="font-sans text-[10px] md:text-xs font-bold uppercase tracking-widest text-dream-coral">Création Originale</span>