222 lines
10 KiB
Plaintext
222 lines
10 KiB
Plaintext
---
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
import AnchorNav from '../components/AnchorNav.astro';
|
|
import TheaterSection from '../components/TheaterSection.astro';
|
|
import PhotoGallery from '../components/PhotoGallery.astro';
|
|
import { sanityClient } from '../sanity/client';
|
|
import { renderPortableText } from '../sanity/portableText';
|
|
import { urlFor } from '../sanity/imageUrl';
|
|
import { theaterHomepageQuery } from '../sanity/queries';
|
|
import { MapPin } from '@lucide/astro';
|
|
|
|
const content = await sanityClient.fetch(theaterHomepageQuery) ?? {};
|
|
---
|
|
|
|
<BaseLayout title={content.title || 'Freilichttheater Ziefen 2028'}>
|
|
<!-- Anchor Navigation -->
|
|
<AnchorNav />
|
|
|
|
<!-- Hero Section -->
|
|
<div class="bg-[#2b2b56] text-white py-12 pb-24 md:py-8 md:pb-16 relative overflow-hidden min-h-[500px] md:min-h-[400px] md:max-w-[100rem]">
|
|
<div class="max-w-[--max-width-container] mx-auto px-[--spacing-md] md:px-[--spacing-sm]">
|
|
<div class="relative flex flex-col items-center md:items-start gap-2 z-8 text-center md:text-left md:pl-12 md:pl-16 min-h-96 md:min-h-80 ">
|
|
<h1 class="text-6xl md:text-8xl md:pt-24 md:h-auto font-normalmd:mb-4 leading-[1.3] [text-shadow:2px_2px_4px_rgba(0,0,0,0.3)]">
|
|
<span class="title-de" data-lang="de">{content.hero?.title_de || 'Freilichttheater in Ziefen'}</span>
|
|
<span class="title-en" data-lang="en">{content.hero?.title_en || 'Open-Air Theater in Ziefen'}</span>
|
|
</h1>
|
|
<img src="/logo.svg" alt="Theater Ziefen Logo" class="max-h-[30rem] md:absolute md:right-2 md:right-10 opacity-95 z-[5] md:opacity-70" />
|
|
<p class="text-xl md:text-lg leading-relaxed mb-8 md:mb-6 opacity-95 max-w-2xl ">
|
|
<span class="subtitle-de" data-lang="de">{content.hero?.subtitle_de || ''}</span>
|
|
<span class="subtitle-en" data-lang="en">{content.hero?.subtitle_en || ''}</span>
|
|
</p>
|
|
<div class="font-heading text-8xl md:text-6xl font-normal text-accent [text-shadow:3px_3px_6px_rgba(0,0,0,0.4)] mt-4">2028</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 1: Das Projekt -->
|
|
<TheaterSection
|
|
id="projekt"
|
|
titleDe={content.projekt?.title_de || 'Das Projekt'}
|
|
titleEn={content.projekt?.title_en || 'The Project'}
|
|
variant="light"
|
|
>
|
|
<div class="content-de" data-lang="de" set:html={renderPortableText(content.projekt?.content_de)} />
|
|
<div class="content-en" data-lang="en" set:html={renderPortableText(content.projekt?.content_en)} />
|
|
</TheaterSection>
|
|
|
|
<!-- Section 2: Wer steckt dahinter -->
|
|
<TheaterSection
|
|
id="team"
|
|
titleDe={content.team?.title_de || 'Wer steckt dahinter'}
|
|
titleEn={content.team?.title_en || "Who's Behind It"}
|
|
variant="dark"
|
|
>
|
|
<div class="content-de" data-lang="de" set:html={renderPortableText(content.team?.content_de)} />
|
|
<div class="content-en" data-lang="en" set:html={renderPortableText(content.team?.content_en)} />
|
|
|
|
{content.team?.organizations && content.team.organizations.length > 0 && (
|
|
<div class="grid grid-cols-1 md:grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-12 mt-16">
|
|
{content.team.organizations.map((org: any) => {
|
|
const cardContent = (
|
|
<Fragment>
|
|
{org.logo && (
|
|
<div class="mb-4 flex justify-center">
|
|
<img src={urlFor(org.logo)} alt={`${org.name} logo`} class="h-20 w-auto object-contain" />
|
|
</div>
|
|
)}
|
|
<h3 class="text-3xl mb-2 text-white">{org.name}</h3>
|
|
<p class="org-role-de m-0 opacity-90" data-lang="de">{org.role_de}</p>
|
|
<p class="org-role-en m-0 opacity-90" data-lang="en">{org.role_en}</p>
|
|
</Fragment>
|
|
);
|
|
|
|
return org.url ? (
|
|
<a
|
|
href={org.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="block bg-white/10 p-12 rounded-lg text-center transition-all duration-300 hover:-translate-y-1 hover:bg-white/15 no-underline text-white hover:shadow-lg"
|
|
>
|
|
{cardContent}
|
|
</a>
|
|
) : (
|
|
<div class="bg-white/10 p-12 rounded-lg text-center transition-all duration-300 hover:-translate-y-1 hover:bg-white/15">
|
|
{cardContent}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</TheaterSection>
|
|
|
|
<!-- Section 3: Das Stück -->
|
|
<TheaterSection
|
|
id="stueck"
|
|
titleDe={content.stueck?.title_de || 'Das Stück'}
|
|
titleEn={content.stueck?.title_en || 'The Play'}
|
|
variant="light"
|
|
>
|
|
<div class="content-de" data-lang="de" set:html={renderPortableText(content.stueck?.content_de)} />
|
|
<div class="content-en" data-lang="en" set:html={renderPortableText(content.stueck?.content_en)} />
|
|
</TheaterSection>
|
|
|
|
<!-- Section 4: Mitwirkung -->
|
|
<TheaterSection
|
|
id="mitwirkung"
|
|
titleDe={content.mitwirkung?.title_de || 'Mitwirkung im Schauspiel'}
|
|
titleEn={content.mitwirkung?.title_en || 'Participation in the Play'}
|
|
variant="dark"
|
|
>
|
|
<div class="content-de" data-lang="de" set:html={renderPortableText(content.mitwirkung?.content_de)} />
|
|
<div class="content-en" data-lang="en" set:html={renderPortableText(content.mitwirkung?.content_en)} />
|
|
|
|
{content.mitwirkung?.director_name && (
|
|
<div class="mt-16 p-12 bg-white/10 rounded-lg text-center">
|
|
<h3 class="text-3xl text-white mb-4">
|
|
<span data-lang="de">Kontakt Regisseur:</span>
|
|
<span data-lang="en">Contact Director:</span>
|
|
</h3>
|
|
<p><strong>{content.mitwirkung.director_name}</strong></p>
|
|
{content.mitwirkung.director_email && (
|
|
<p>
|
|
<span data-lang="de">E-Mail:</span>
|
|
<span data-lang="en">Email:</span>
|
|
{' '}
|
|
<a href={`mailto:${content.mitwirkung.director_email}`} class="text-accent no-underline hover:underline">{content.mitwirkung.director_email}</a>
|
|
</p>
|
|
)}
|
|
{content.mitwirkung.director_phone && (
|
|
<p>
|
|
<span data-lang="de">Telefon:</span>
|
|
<span data-lang="en">Phone:</span>
|
|
{' '}
|
|
<a href={`tel:${content.mitwirkung.director_phone}`} class="text-accent no-underline hover:underline">{content.mitwirkung.director_phone}</a>
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</TheaterSection>
|
|
|
|
<!-- Section 5: Termine -->
|
|
<TheaterSection
|
|
id="termine"
|
|
titleDe={content.termine?.title_de || 'Termine'}
|
|
titleEn={content.termine?.title_en || 'Schedule'}
|
|
variant="light"
|
|
>
|
|
{content.termine?.events && content.termine.events.length > 0 && (
|
|
<div class="relative min-h-auto flex flex-col gap-16">
|
|
<svg class="hidden md:flex absolute top-0 left-0 w-full h-full z-1 pointer-events-none" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid meet">
|
|
<path
|
|
d="M 50,30 C 150,80 350,150 550,200 S 350,290 100,380 S 300,470 600,560 S 350,670 150,740 S 350,850 550,920"
|
|
fill="none"
|
|
stroke="var(--color-accent)"
|
|
stroke-width="4"
|
|
stroke-dasharray="15,10"
|
|
opacity="0.7"
|
|
/>
|
|
</svg>
|
|
{content.termine.events.map((event: any, index: number) => (
|
|
<div class={`relative z-2 flex items-center gap-12 text-left ${(index + 1) % 2 === 0 ? 'md:flex-row-reverse md:text-right md:right-0' : 'md:left-0'}`}>
|
|
<div class="hidden md:flex flex-col items-center in-w-30 max-w-60 md:min-w-auto md:self-start">
|
|
<MapPin class="text-accent" size={40} ></MapPin>
|
|
<div class="mt-6 text-lg font-bold text-accent text-center whitespace-nowrap md:text-base">{event.date}</div>
|
|
</div>
|
|
<div class="flex-1 bg-white/10 p-12 rounded-xl backdrop-blur-[10px] border-2 border-white/20 transition-all duration-300 hover:-translate-y-1 hover:bg-white/15 hover:shadow-[0_8px_20px_rgba(0,0,0,0.3)] max-w-full md:max-w-2xl">
|
|
<div class="md:hidden text-lg font-bold text-accent text-center whitespace-nowrap md:text-base">{event.date}</div>
|
|
<h3 class="text-3xl mb-2 text-white md:text-2xl">
|
|
<span class="event-title-de" data-lang="de">{event.title_de}</span>
|
|
<span class="event-title-en" data-lang="en">{event.title_en}</span>
|
|
</h3>
|
|
<p class="event-desc-de m-0 text-white/90 leading-relaxed" data-lang="de">{event.description_de}</p>
|
|
<p class="event-desc-en m-0 text-white/90 leading-relaxed" data-lang="en">{event.description_en}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</TheaterSection>
|
|
|
|
<!-- Section 6: Presse -->
|
|
<TheaterSection
|
|
id="presse"
|
|
titleDe={content.presse?.title_de || 'Presse'}
|
|
titleEn={content.presse?.title_en || 'Press'}
|
|
variant="dark"
|
|
>
|
|
<div class="content-de" data-lang="de" set:html={renderPortableText(content.presse?.content_de)} />
|
|
<div class="content-en" data-lang="en" set:html={renderPortableText(content.presse?.content_en)} />
|
|
</TheaterSection>
|
|
|
|
<!-- Section 7: Foto Galerie -->
|
|
<TheaterSection
|
|
id="gallery"
|
|
titleDe={content.gallery?.title_de || 'Foto Galerie'}
|
|
titleEn={content.gallery?.title_en || 'Photo Gallery'}
|
|
variant="light"
|
|
>
|
|
<PhotoGallery images={content.gallery?.images || []} />
|
|
</TheaterSection>
|
|
|
|
<!-- Section 8: Tickets -->
|
|
<TheaterSection
|
|
id="tickets"
|
|
titleDe={content.tickets?.title_de || 'Tickets'}
|
|
titleEn={content.tickets?.title_en || 'Tickets'}
|
|
variant="dark"
|
|
>
|
|
<div class="content-de" data-lang="de" set:html={renderPortableText(content.tickets?.content_de)} />
|
|
<div class="content-en" data-lang="en" set:html={renderPortableText(content.tickets?.content_en)} />
|
|
|
|
{content.tickets?.ticket_url && (
|
|
<div class="mt-[--spacing-lg] text-center">
|
|
<a href={content.tickets.ticket_url} class="inline-block py-4 px-10 bg-accent text-secondary no-underline font-bold text-xl rounded-lg transition-all duration-300 shadow-[0_4px_10px_rgba(0,0,0,0.2)] hover:-translate-y-1 hover:shadow-[0_6px_15px_rgba(0,0,0,0.3)] hover:bg-[#fbfa9a]" target="_blank" rel="noopener noreferrer">
|
|
<span data-lang="de">Tickets kaufen</span>
|
|
<span data-lang="en">Buy Tickets</span>
|
|
</a>
|
|
</div>
|
|
)}
|
|
</TheaterSection>
|
|
</BaseLayout>
|