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>
<!-- Mobile Menu (fullscreen) -->
<div
id="mobile-menu"
class="md:hidden fixed inset-0 z-50 bg-white/95 backdrop-blur-xl hidden"
>
<div class="flex flex-col items-center justify-center h-full px-6 space-y-4">
<!-- Close button -->
<button
id="mobile-menu-close"
class="absolute top-8 right-6 text-night p-2 focus:outline-none"
aria-label="Fermer le menu"
</nav>
<!-- Menu mobile (hors nav pour éviter les problèmes de stacking context) -->
<div
id="mobile-menu"
class="md:hidden fixed inset-0 z-50 bg-white/95 backdrop-blur-xl hidden"
>
<div class="flex flex-col items-center justify-center h-full px-6 space-y-4">
<button
id="mobile-menu-close"
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} />
</button>
{link.label}
</a>
))}
{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',
]}
>
{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 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>
</nav>
</div>
<script>
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 PageSection from '../../components/PageSection.astro';
import { Icon } from 'astro-icon/components';
import { fetchSpectacles, fetchAgenda } from '../../lib/storyblok';
@ -10,11 +11,8 @@ 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">
<PageSection maxWidth="max-w-5xl">
<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>
<!-- 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>
@ -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>
</div>
)}
</div>
</div>
</PageSection>
</Layout>

12
src/pages/ateliers.astro
View file

@ -1,15 +1,13 @@
---
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">
<div class="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden">
<!-- Background -->
<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">
<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">
@ -107,7 +105,5 @@ import { companyInfo } from '../data';
Nous contacter
</a>
</div>
</div>
</div>
</PageSection>
</Layout>

11
src/pages/contact.astro
View file

@ -1,15 +1,13 @@
---
import Layout from '../layouts/Layout.astro';
import PageSection from '../components/PageSection.astro';
import { Icon } from 'astro-icon/components';
import { companyInfo } from '../data';
---
<Layout title="Contact — Compagnie AspiRêves">
<div class="pt-32 pb-24 min-h-screen bg-cloud relative overflow-hidden">
<!-- Background -->
<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">
<PageSection>
<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>
<!-- 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">
@ -85,6 +83,5 @@ import { companyInfo } from '../data';
</div>
</div>
</div>
</div>
</PageSection>
</Layout>

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

@ -1,16 +1,16 @@
---
import Layout from '../layouts/Layout.astro';
import PageSection from '../components/PageSection.astro';
import { Icon } from 'astro-icon/components';
import { companyInfo } from '../data';
---
<Layout title="La Compagnie — 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">
<PageSection>
<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 bottom-1/4 right-0 w-[400px] h-[400px] bg-dream-pink/20 rounded-full filter blur-[120px] translate-x-1/2"></div>
</Fragment>
<!-- Header -->
<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>
@ -119,7 +119,5 @@ import { companyInfo } from '../data';
Nous contacter
</a>
</div>
</div>
</div>
</PageSection>
</Layout>

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

@ -1,5 +1,6 @@
---
import Layout from '../../layouts/Layout.astro';
import PageSection from '../../components/PageSection.astro';
import { Icon } from 'astro-icon/components';
import { getLiveStory, storyblokEditable } from '@storyblok/astro';
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`}>
<div {...storyblokEditable(spectacle._blok)} class="pt-24 md:pt-32 pb-24 min-h-screen bg-cloud overflow-hidden relative">
<!-- 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 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="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<PageSection {...storyblokEditable(spectacle._blok)} padding="pt-24 md:pt-32 pb-24" maxWidth="max-w-6xl">
<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 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>
<!-- Back button -->
<a
href="/spectacles/"
@ -202,6 +202,5 @@ const youtubeId = spectacle.teaser ? extractYouTubeId(spectacle.teaser) : null;
</div>
</section>
)}
</div>
</div>
</PageSection>
</Layout>

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

@ -1,5 +1,6 @@
---
import Layout from '../../layouts/Layout.astro';
import PageSection from '../../components/PageSection.astro';
import { Icon } from 'astro-icon/components';
import { storyblokEditable } from '@storyblok/astro';
import { fetchSpectacles } from '../../lib/storyblok';
@ -19,12 +20,11 @@ const retraites = spectacles.filter(s => s.retired).sort(byDateDesc);
---
<Layout title="Spectacles — Compagnie AspiRêves">
<div class="pt-32 pb-24 min-h-screen bg-cloud overflow-hidden relative">
<!-- 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 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<PageSection>
<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 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>
<!-- Header -->
<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>
@ -230,7 +230,5 @@ const retraites = spectacles.filter(s => s.retired).sort(byDateDesc);
</div>
</div>
)}
</div>
</div>
</PageSection>
</Layout>