style: Hero, Leistungen und Abschnittsrhythmus ueberarbeitet
- Hero: Schlagzeile zweizeilig direkt unter dem Masthead, Buchung im ersten Bildschirm; Termin, Ort und Preis als Cover-Line-Leiste - Leistungen: Inklusivleistungen in Bodoni ohne Linie unter jeder Zeile, Beispielablauf ruhiger, Hinweis unter statt neben der Ueberschrift - Unterkunft ohne Split-Header, Ueber ARTISTA kompakter - FAQ-Symbol gezeichnet statt Textzeichen, groesserer Abschnittsabstand - Header auf Mobil ohne doppeltes "Modelcamp 2027" Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
This commit is contained in:
Nick SzaunigandClaude Opus 5.5 committed
1 parent
00c7118c10
commit
2ef92db9ed
5 files changed
+80
-74
No files matched your search
+39
-28
@@ -22,66 +22,77 @@ export function priceLine(pricing: PublicPricing): string {
|
||||
|
||||
/**
|
||||
* Hero als Magazin-Cover: der Masthead "ARTISTA" ueberlappt das Leitbild,
|
||||
* Termin, Ort und Preis stehen als Cover-Lines daneben.
|
||||
* Schlagzeile und Buchung stehen daneben und bleiben im ersten Bildschirm.
|
||||
* Termin, Ort und Preis folgen als Cover-Lines in einer eigenen Leiste.
|
||||
*/
|
||||
export function Hero({ facts, pricing, showDrafts }: { facts: PublicCampFacts; pricing: PublicPricing; showDrafts: boolean }) {
|
||||
const place = facts.location ? `${facts.location}${facts.region ? `, ${facts.region}` : ""}` : "Italien";
|
||||
const coverLines = [
|
||||
{ term: "Termin", value: dateLine(facts) },
|
||||
{ term: "Ort", value: facts.location ?? "Italien, genauer Ort folgt" },
|
||||
{ term: "Preis", value: priceLine(pricing) },
|
||||
];
|
||||
return (
|
||||
<section id="top" aria-labelledby="hero-title" className="relative pb-16 pt-4 md:pb-24">
|
||||
<section id="top" aria-labelledby="hero-title" className="relative pb-20 pt-3 md:pb-28">
|
||||
<div className="container-edge">
|
||||
<p className="hero-fade flex items-baseline justify-between border-b border-ink pb-2 text-sm">
|
||||
<span>Modelcamp 2027</span>
|
||||
<span>{place}</span>
|
||||
</p>
|
||||
<h1 id="hero-title" className="relative z-10 mt-3">
|
||||
<h1 id="hero-title" className="relative z-10 mt-2 md:mt-3">
|
||||
<span className="masthead hero-rise block" aria-hidden>
|
||||
ARTISTA
|
||||
</span>
|
||||
<span className="sr-only">ARTISTA Modelcamp 2027 – {site.hero.headline}</span>
|
||||
</h1>
|
||||
|
||||
<div className="mt-[-3.2vw] grid gap-8 md:grid-cols-12 md:gap-10">
|
||||
<div className="hero-image md:col-span-7 lg:col-span-8">
|
||||
<div className="mt-[-3.4vw] grid gap-9 md:grid-cols-12 md:gap-10">
|
||||
<div className="hero-image md:col-span-7">
|
||||
<MediaFrame
|
||||
media={site.hero.media}
|
||||
aspect="aspect-[4/5] md:aspect-[5/4] lg:aspect-[16/11]"
|
||||
sizes="(min-width: 1024px) 66vw, (min-width: 768px) 58vw, 100vw"
|
||||
aspect="aspect-[4/3] md:aspect-[4/5] lg:aspect-[7/6]"
|
||||
sizes="(min-width: 768px) 58vw, 100vw"
|
||||
showLabel={showDrafts}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="hero-fade flex flex-col justify-end md:col-span-5 lg:col-span-4">
|
||||
<p className="display text-[2.25rem] leading-[1.05] md:text-[2.75rem]">{site.hero.headline}</p>
|
||||
<p className="mt-5 max-w-md text-lg text-ink/85">{site.hero.subline}</p>
|
||||
<dl className="mt-8 divide-y divide-line border-y border-line text-[0.9375rem]">
|
||||
<div className="flex justify-between gap-4 py-3">
|
||||
<dt className="text-stone">Termin</dt>
|
||||
<dd className="text-right">{dateLine(facts)}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between gap-4 py-3">
|
||||
<dt className="text-stone">Ort</dt>
|
||||
<dd className="text-right">{facts.location ?? "Italien, genauer Ort folgt"}</dd>
|
||||
</div>
|
||||
<div className="flex justify-between gap-4 py-3">
|
||||
<dt className="text-stone">Preis</dt>
|
||||
<dd className="text-right">{priceLine(pricing)}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<div className="mt-8 flex flex-wrap gap-3">
|
||||
<div className="hero-fade flex flex-col md:col-span-5 md:pt-[5.5vw] lg:col-start-8">
|
||||
<p className="display text-[2.5rem] leading-[1.02] tracking-[-0.02em] md:text-[clamp(2.25rem,3.6vw,3.375rem)]">
|
||||
{/* Jeder Satz eine Zeile: bricht nie mitten im Gedanken um. */}
|
||||
{site.hero.headline.split(/(?<=\.)\s+/).map((sentence) => (
|
||||
<span key={sentence} className="block">
|
||||
{sentence}
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
<p className="mt-6 max-w-[34ch] text-lg leading-relaxed text-ink/85">{site.hero.subline}</p>
|
||||
<div className="mt-9 flex flex-wrap items-center gap-x-7 gap-y-4">
|
||||
{pricing.checkoutOpen ? (
|
||||
<BookButton className="btn btn-primary">Platz buchen</BookButton>
|
||||
<BookButton className="btn btn-primary px-7">Platz buchen</BookButton>
|
||||
) : (
|
||||
<a href="#preis" className="btn btn-primary">
|
||||
<a href="#preis" className="btn btn-primary px-7">
|
||||
Preis und Buchungsstart
|
||||
</a>
|
||||
)}
|
||||
<a href="#camp" className="btn btn-quiet">
|
||||
<a href="#camp" className="link-quiet font-semibold">
|
||||
Mehr über das Camp
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dl className="hero-fade mt-12 grid border-t border-ink sm:grid-cols-3 md:mt-16">
|
||||
{coverLines.map((line, index) => (
|
||||
<div
|
||||
key={line.term}
|
||||
className={`border-b border-line py-5 sm:border-b-0 sm:py-6 ${index > 0 ? "sm:border-l sm:pl-6 md:pl-8" : "sm:pr-6"}`}
|
||||
>
|
||||
<dt className="text-sm text-stone">{line.term}</dt>
|
||||
<dd className="display mt-2 text-[1.5rem] leading-tight sm:text-[1.25rem] md:text-[1.375rem] lg:text-[1.75rem]">{line.value}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user