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

Extraire PageSection, corriger le z-index du menu mobile et renommer Dossier Artistique

Browse source
This commit is contained in:
Jalil Arfaoui 2026-03-12 17:50:47 +01:00
parent b0f4933c0e
commit b345a2119d
8 changed files with 84 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/components/Navbar.astro
View file

@ -68,44 +68,44 @@ function isActive(href: string): boolean {
</div> </div>
</div> </div>
<!-- Mobile Menu (fullscreen) --> </nav>
<div
id="mobile-menu" <!-- Menu mobile (hors nav pour éviter les problèmes de stacking context) -->
class="md:hidden fixed inset-0 z-50 bg-white/95 backdrop-blur-xl hidden" <div
> id="mobile-menu"
<div class="flex flex-col items-center justify-center h-full px-6 space-y-4"> class="md:hidden fixed inset-0 z-50 bg-white/95 backdrop-blur-xl hidden"
<!-- Close button --> >
<button <div class="flex flex-col items-center justify-center h-full px-6 space-y-4">
id="mobile-menu-close" <button
class="absolute top-8 right-6 text-night p-2 focus:outline-none" id="mobile-menu-close"
aria-label="Fermer le menu" class="absolute top-8 right-6 text-night p-2 focus:outline-none"
aria-label="Fermer le menu"
>
<Icon name="lucide:x" size={28} />
</button>
{navLinks.map((link) => (
<a
href={link.href}
class:list={[
'text-2xl font-display tracking-wide transition-all px-6 py-3 rounded-2xl',
isActive(link.href) ? 'text-dream-coral font-bold' : 'text-night/70 hover:text-night',
]}
> >
<Icon name="lucide:x" size={28} /> {link.label}
</button> </a>
))}
{navLinks.map((link) => ( <div class="flex gap-8 pt-8 border-t border-night/10 mt-4">
<a <a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" class="text-night/40 hover:text-dream-pink transition-colors">
href={link.href} <Icon name="lucide:instagram" size={28} />
class:list={[ </a>
'text-2xl font-display tracking-wide transition-all px-6 py-3 rounded-2xl', <a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" class="text-night/40 hover:text-dream-blue transition-colors">
isActive(link.href) ? 'text-dream-coral font-bold' : 'text-night/70 hover:text-night', <Icon name="lucide:facebook" size={28} />
]} </a>
>
{link.label}
</a>
))}
<div class="flex gap-8 pt-8 border-t border-night/10 mt-4">
<a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" class="text-night/40 hover:text-dream-pink transition-colors">
<Icon name="lucide:instagram" size={28} />
</a>
<a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" class="text-night/40 hover:text-dream-blue transition-colors">
<Icon name="lucide:facebook" size={28} />
</a>
</div>
</div> </div>
</div> </div>
</nav> </div>
<script> <script>
const navbar = document.getElementById('navbar')!; const navbar = document.getElementById('navbar')!;

17
src/components/PageSection.astro Normal file
View file

@ -0,0 +1,17 @@
---
import type { HTMLAttributes } from 'astro/types';
interface Props extends HTMLAttributes<'div'> {
maxWidth?: string;
padding?: string;
}
const { class: className, maxWidth = 'max-w-7xl', padding = 'pt-32 pb-24', ...attrs } = Astro.props;
---
<div {...attrs} class:list={[padding, "min-h-screen bg-cloud relative overflow-hidden", className]}>
<slot name="background" />
<div class:list={[maxWidth, "mx-auto px-4 sm:px-6 lg:px-8 relative z-10"]}>
<slot />
</div>
</div>

11
src/pages/agenda/index.astro
View file

@ -1,5 +1,6 @@
--- ---
import Layout from '../../layouts/Layout.astro'; import Layout from '../../layouts/Layout.astro';
import PageSection from '../../components/PageSection.astro';
import { Icon } from 'astro-icon/components'; import { Icon } from 'astro-icon/components';
import { fetchSpectacles, fetchAgenda } from '../../lib/storyblok'; import { fetchSpectacles, fetchAgenda } from '../../lib/storyblok';
@ -10,11 +11,8 @@ const now = new Date();
--- ---
<Layout title="Agenda — Compagnie AspiRêves"> <Layout title="Agenda — Compagnie AspiRêves">
<div class="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden"> <PageSection maxWidth="max-w-5xl">
<!-- Background --> <div slot="background" 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="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 --> <!-- Header -->
<div class="animate-entrance text-center mb-12 md:mb-20"> <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> <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>
@ -156,6 +154,5 @@ const now = new Date();
<p class="font-display text-3xl text-night/30 italic">Le nuage se prépare pour de nouveaux voyages...</p> <p class="font-display text-3xl text-night/30 italic">Le nuage se prépare pour de nouveaux voyages...</p>
</div> </div>
)} )}
</div> </PageSection>
</div>
</Layout> </Layout>

12
src/pages/ateliers.astro
View file

@ -1,15 +1,13 @@
--- ---
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import PageSection from '../components/PageSection.astro';
import { Icon } from 'astro-icon/components'; import { Icon } from 'astro-icon/components';
import { companyInfo } from '../data'; import { companyInfo } from '../data';
--- ---
<Layout title="Ateliers Théâtre — Compagnie AspiRêves"> <Layout title="Ateliers Théâtre — Compagnie AspiRêves">
<div class="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden"> <PageSection>
<!-- Background --> <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>
<div 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>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<!-- Header --> <!-- Header -->
<div class="animate-entrance text-center mb-16 md:mb-24"> <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"> <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">
@ -107,7 +105,5 @@ import { companyInfo } from '../data';
Nous contacter Nous contacter
</a> </a>
</div> </div>
</div> </PageSection>
</div>
</Layout> </Layout>

11
src/pages/contact.astro
View file

@ -1,15 +1,13 @@
--- ---
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import PageSection from '../components/PageSection.astro';
import { Icon } from 'astro-icon/components'; import { Icon } from 'astro-icon/components';
import { companyInfo } from '../data'; import { companyInfo } from '../data';
--- ---
<Layout title="Contact — Compagnie AspiRêves"> <Layout title="Contact — Compagnie AspiRêves">
<div class="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden"> <PageSection>
<!-- Background --> <div slot="background" class="absolute top-0 right-0 w-96 h-96 bg-dream-purple/10 rounded-full filter blur-[100px] -translate-y-1/2 translate-x-1/2"></div>
<div class="absolute top-0 right-0 w-96 h-96 bg-dream-purple/10 rounded-full filter blur-[100px] -translate-y-1/2 translate-x-1/2"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<!-- Header --> <!-- Header -->
<div class="animate-entrance text-center mb-16 md:mb-24"> <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"> <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">
@ -85,6 +83,5 @@ import { companyInfo } from '../data';
</div> </div>
</div> </div>
</div> </PageSection>
</div>
</Layout> </Layout>

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

@ -1,16 +1,16 @@
--- ---
import Layout from '../layouts/Layout.astro'; import Layout from '../layouts/Layout.astro';
import PageSection from '../components/PageSection.astro';
import { Icon } from 'astro-icon/components'; import { Icon } from 'astro-icon/components';
import { companyInfo } from '../data'; import { companyInfo } from '../data';
--- ---
<Layout title="La Compagnie — Compagnie AspiRêves"> <Layout title="La Compagnie — Compagnie AspiRêves">
<div class="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden"> <PageSection>
<!-- Background --> <Fragment slot="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 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="absolute bottom-1/4 right-0 w-[400px] h-[400px] bg-dream-pink/20 rounded-full filter blur-[120px] translate-x-1/2"></div>
</Fragment>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<!-- Header --> <!-- Header -->
<div class="animate-entrance text-center mb-16 md:mb-24"> <div class="animate-entrance text-center mb-16 md:mb-24">
<h1 class="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8 leading-tight">La <span class="text-dream-coral italic">Compagnie</span></h1> <h1 class="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8 leading-tight">La <span class="text-dream-coral italic">Compagnie</span></h1>
@ -119,7 +119,5 @@ import { companyInfo } from '../data';
Nous contacter Nous contacter
</a> </a>
</div> </div>
</div> </PageSection>
</div>
</Layout> </Layout>

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

@ -1,5 +1,6 @@
--- ---
import Layout from '../../layouts/Layout.astro'; import Layout from '../../layouts/Layout.astro';
import PageSection from '../../components/PageSection.astro';
import { Icon } from 'astro-icon/components'; import { Icon } from 'astro-icon/components';
import { getLiveStory, storyblokEditable } from '@storyblok/astro'; import { getLiveStory, storyblokEditable } from '@storyblok/astro';
import { fetchSpectacles, fetchAgenda, mapStoryToSpectacle, extractYouTubeId } from '../../lib/storyblok'; import { fetchSpectacles, fetchAgenda, mapStoryToSpectacle, extractYouTubeId } from '../../lib/storyblok';
@ -51,12 +52,11 @@ const youtubeId = spectacle.teaser ? extractYouTubeId(spectacle.teaser) : null;
--- ---
<Layout title={`${spectacle.title} — Compagnie AspiRêves`}> <Layout title={`${spectacle.title} — Compagnie AspiRêves`}>
<div {...storyblokEditable(spectacle._blok)} class="pt-24 md:pt-32 pb-24 min-h-screen bg-cloud overflow-hidden relative"> <PageSection {...storyblokEditable(spectacle._blok)} padding="pt-24 md:pt-32 pb-24" maxWidth="max-w-6xl">
<!-- Background --> <Fragment slot="background">
<div class="absolute top-0 right-0 w-96 h-96 bg-dream-purple/20 rounded-full filter blur-[100px] -translate-y-1/2 translate-x-1/2"></div> <div class="absolute top-0 right-0 w-96 h-96 bg-dream-purple/20 rounded-full filter blur-[100px] -translate-y-1/2 translate-x-1/2"></div>
<div class="absolute bottom-0 left-0 w-96 h-96 bg-dream-blue/20 rounded-full filter blur-[100px] translate-y-1/2 -translate-x-1/2"></div> <div class="absolute bottom-0 left-0 w-96 h-96 bg-dream-blue/20 rounded-full filter blur-[100px] translate-y-1/2 -translate-x-1/2"></div>
</Fragment>
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<!-- Back button --> <!-- Back button -->
<a <a
href="/spectacles/" href="/spectacles/"
@ -202,6 +202,5 @@ const youtubeId = spectacle.teaser ? extractYouTubeId(spectacle.teaser) : null;
</div> </div>
</section> </section>
)} )}
</div> </PageSection>
</div>
</Layout> </Layout>

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

@ -1,5 +1,6 @@
--- ---
import Layout from '../../layouts/Layout.astro'; import Layout from '../../layouts/Layout.astro';
import PageSection from '../../components/PageSection.astro';
import { Icon } from 'astro-icon/components'; import { Icon } from 'astro-icon/components';
import { storyblokEditable } from '@storyblok/astro'; import { storyblokEditable } from '@storyblok/astro';
import { fetchSpectacles } from '../../lib/storyblok'; import { fetchSpectacles } from '../../lib/storyblok';
@ -19,12 +20,11 @@ const retraites = spectacles.filter(s => s.retired).sort(byDateDesc);
--- ---
<Layout title="Spectacles — Compagnie AspiRêves"> <Layout title="Spectacles — Compagnie AspiRêves">
<div class="pt-32 pb-24 min-h-screen bg-cloud overflow-hidden relative"> <PageSection>
<!-- Background --> <Fragment slot="background">
<div class="absolute top-0 right-0 w-96 h-96 bg-dream-purple/20 rounded-full filter blur-[100px] -translate-y-1/2 translate-x-1/2"></div> <div class="absolute top-0 right-0 w-96 h-96 bg-dream-purple/20 rounded-full filter blur-[100px] -translate-y-1/2 translate-x-1/2"></div>
<div class="absolute bottom-0 left-0 w-96 h-96 bg-dream-blue/20 rounded-full filter blur-[100px] translate-y-1/2 -translate-x-1/2"></div> <div class="absolute bottom-0 left-0 w-96 h-96 bg-dream-blue/20 rounded-full filter blur-[100px] translate-y-1/2 -translate-x-1/2"></div>
</Fragment>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<!-- Header --> <!-- Header -->
<div class="animate-entrance text-center mb-16 md:mb-24"> <div class="animate-entrance text-center mb-16 md:mb-24">
<h1 class="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8">Nos <span class="text-dream-purple italic">Spectacles</span></h1> <h1 class="font-display text-4xl sm:text-6xl md:text-8xl text-night mb-8">Nos <span class="text-dream-purple italic">Spectacles</span></h1>
@ -230,7 +230,5 @@ const retraites = spectacles.filter(s => s.retired).sort(byDateDesc);
</div> </div>
</div> </div>
)} )}
</div> </PageSection>
</div>
</Layout> </Layout>