Website djnizz.at: Hero- und About-Sektion mit Docker-Deployment
Astro 7 mit Tailwind 4 und Node-Adapter. Alle Seiten werden vorgerendert, der Node-Server ist dabei, damit spaeter einzelne Routen (Booking-Formular) ohne Umbau am Deployment dynamisch werden koennen. Inhalt: - Fullscreen-Hero mit freigestelltem Render, animierten Lasern und Genre-Laufband; Typografie als HTML statt eingebranntem Bildtext - About-Sektion mit Genre-Karten und Eckdaten - Impressum und Datenschutzerklaerung - Zentrale Inhaltsdatei src/data/site.ts Technik: - Selbst gehostete Schriften, keine Cookies, kein Tracking, keine externen Requests - Docker Multi-Stage (238 MB) hinter Caddy mit automatischem HTTPS, Security-Headern und IP-maskierten Logs - scripts/cutout.mjs stellt den Render ueber eine Sobel-Kantenkarte frei und entfernt eingeschlossene Hintergrundflaechen Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,108 @@
|
||||
---
|
||||
import { Image } from 'astro:assets';
|
||||
import banner from '../assets/hero-banner.jpg';
|
||||
import { ABOUT, GENRES, CONTACT } from '../data/site';
|
||||
|
||||
const accentVar: Record<(typeof GENRES)[number]['accent'], string> = {
|
||||
magenta: 'var(--color-laser-magenta)',
|
||||
cyan: 'var(--color-laser-cyan)',
|
||||
gold: 'var(--color-gold-400)',
|
||||
violet: 'var(--color-laser-violet)',
|
||||
lime: 'var(--color-laser-lime)',
|
||||
};
|
||||
---
|
||||
|
||||
<section id="about" class="relative overflow-hidden py-24 sm:py-32">
|
||||
{/* Weicher Farbschimmer im Hintergrund */}
|
||||
<div
|
||||
class="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(60%_45%_at_85%_5%,--alpha(var(--color-gold-500)/10%),transparent_70%),radial-gradient(50%_40%_at_5%_60%,--alpha(var(--color-laser-violet)/10%),transparent_70%)]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-7xl px-5 sm:px-8">
|
||||
<div class="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
|
||||
<div class="relative" data-reveal>
|
||||
<div class="overflow-hidden rounded-3xl border border-white/10 shadow-[0_30px_80px_-20px_rgba(0,0,0,0.8)]">
|
||||
<Image
|
||||
src={banner}
|
||||
alt="DJ NIZZ Key Visual: Bühne mit Lasern und Crowd"
|
||||
widths={[640, 960, 1400]}
|
||||
sizes="(min-width: 1024px) 40rem, 92vw"
|
||||
loading="lazy"
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Kleiner Akzent, der aus der Karte herausragt */}
|
||||
<div
|
||||
class="absolute -bottom-6 -left-2 hidden rounded-2xl border border-white/10 bg-ink-900/90 px-5 py-4 backdrop-blur-md sm:-left-6 sm:block"
|
||||
>
|
||||
<p class="font-display text-2xl text-gold-400">{GENRES.length}</p>
|
||||
<p class="mt-0.5 text-xs tracking-[0.16em] text-white/55 uppercase">Genres, ein Flow</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-reveal data-reveal-delay="120">
|
||||
<p class="text-xs font-semibold tracking-[0.28em] text-gold-400 uppercase">{ABOUT.kicker}</p>
|
||||
<h2 class="mt-4 font-display text-[clamp(2rem,5vw,3.25rem)] leading-[1.05] tracking-[-0.02em] text-white">
|
||||
{ABOUT.headline}
|
||||
</h2>
|
||||
|
||||
<p class="mt-6 text-balance-pretty text-lg leading-relaxed text-white/80">{ABOUT.lead}</p>
|
||||
|
||||
{
|
||||
ABOUT.paragraphs.map((text) => (
|
||||
<p class="mt-4 text-balance-pretty leading-relaxed text-white/60">{text}</p>
|
||||
))
|
||||
}
|
||||
|
||||
<dl class="mt-10 grid grid-cols-2 gap-x-6 gap-y-6 border-t border-white/10 pt-8">
|
||||
{
|
||||
ABOUT.facts.map((fact) => (
|
||||
<div>
|
||||
<dt class="text-xs tracking-[0.16em] text-white/45 uppercase">{fact.label}</dt>
|
||||
<dd class="mt-1.5 font-medium text-white">{fact.value}</dd>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</dl>
|
||||
|
||||
<a
|
||||
href={`mailto:${CONTACT.email}?subject=Booking-Anfrage`}
|
||||
class="group mt-10 inline-flex items-center gap-2 font-semibold text-gold-400 transition-colors hover:text-gold-300"
|
||||
>
|
||||
Termin anfragen
|
||||
<svg viewBox="0 0 20 20" class="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" fill="currentColor" aria-hidden="true">
|
||||
<path d="M10.5 3.5 17 10l-6.5 6.5-1.4-1.4 4.1-4.1H3v-2h10.2L9.1 4.9z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-24 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{
|
||||
GENRES.map((genre, i) => (
|
||||
<article
|
||||
class="group relative overflow-hidden rounded-2xl border border-white/10 bg-ink-900/50 p-6 transition duration-300 hover:-translate-y-1 hover:border-white/20 hover:bg-ink-850/70"
|
||||
data-reveal
|
||||
data-reveal-delay={i * 90}
|
||||
>
|
||||
<span
|
||||
class="absolute inset-x-0 top-0 h-px opacity-60 transition-opacity duration-300 group-hover:opacity-100"
|
||||
style={`background:linear-gradient(to right, transparent, ${accentVar[genre.accent]}, transparent);`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span
|
||||
class="absolute -top-16 -right-16 h-40 w-40 rounded-full opacity-0 blur-3xl transition-opacity duration-500 group-hover:opacity-30"
|
||||
style={`background:${accentVar[genre.accent]};`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<h3 class="font-display text-xl text-white">{genre.name}</h3>
|
||||
<p class="mt-3 text-sm leading-relaxed text-white/55">{genre.description}</p>
|
||||
</article>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user