Redesign: warmer, more editorial visual pass; remove stray em dashes
Replaces em dashes with en dashes across all hardcoded copy, emails, and seed content, then reworks the site's visual language so it reads as deliberately designed rather than assembled from generic components: - New ArrowLink component replaces ad hoc "Mehr erfahren ->" links and ghost buttons; one shared FormField (TextField/TextAreaField) replaces 7 near-duplicate field styles across every form - Navbar loses its glassmorphism blur for a solid warm background, gets a subtle active-link underline and a softer, warmer mega-menu - PageHeader supports per-page blob tone/position and a compact mode instead of an identical band on every interior page - Homepage: the core offer is featured large instead of four equal cards, the philosophy section gets a single calmer accent blob, blog teasers now show their cover image like the real /aktuelles page does - Booking calendar and widget: 44px touch targets throughout (month nav, day cells, time slots, cancel action), a visible "today" ring, and responsive padding so the calendar isn't cramped on small screens - Quieter, warmer empty states on /termine and /aktuelles No functional changes: all interaction logic (nav menus, forms, booking, CMS data fetching) is untouched, only markup and styling.
This commit is contained in:
@@ -9,10 +9,23 @@ type PageHeaderProps = {
|
||||
title: string;
|
||||
lead?: ReactNode;
|
||||
crumbs?: Crumb[];
|
||||
/** Varies the header's decorative blob so every interior page doesn't open with the exact same rose-top-right treatment. */
|
||||
blobTone?: "rose" | "sage" | "cream" | "mauve";
|
||||
blobPosition?: "top-right" | "top-left";
|
||||
/** Shorter vertical padding for pages that don't need much ceremony (e.g. Kontakt). */
|
||||
compact?: boolean;
|
||||
};
|
||||
|
||||
/** Renders the visual breadcrumb trail AND its matching BreadcrumbList JSON-LD from the same `crumbs` — every page that already passes `crumbs` gets structured breadcrumb data for free. */
|
||||
export async function PageHeader({ eyebrow, title, lead, crumbs }: PageHeaderProps) {
|
||||
export async function PageHeader({
|
||||
eyebrow,
|
||||
title,
|
||||
lead,
|
||||
crumbs,
|
||||
blobTone = "rose",
|
||||
blobPosition = "top-right",
|
||||
compact = false,
|
||||
}: PageHeaderProps) {
|
||||
const breadcrumbData = crumbs?.length
|
||||
? await (async () => {
|
||||
const siteUrl = await getSiteUrl();
|
||||
@@ -24,9 +37,15 @@ export async function PageHeader({ eyebrow, title, lead, crumbs }: PageHeaderPro
|
||||
})()
|
||||
: null;
|
||||
|
||||
const blobPositionClass = blobPosition === "top-left" ? "-left-20 -top-20" : "-right-20 -top-20";
|
||||
|
||||
return (
|
||||
<section className="relative overflow-hidden border-b border-anouma-taupe/10 bg-anouma-cream-light pb-16 pt-14 sm:pb-20 sm:pt-20">
|
||||
<OrganicBlob tone="rose" className="-right-20 -top-20 h-72 w-72" />
|
||||
<section
|
||||
className={`relative overflow-hidden border-b border-anouma-taupe/10 bg-anouma-cream-light ${
|
||||
compact ? "pb-10 pt-10 sm:pb-12 sm:pt-12" : "pb-16 pt-14 sm:pb-20 sm:pt-20"
|
||||
}`}
|
||||
>
|
||||
<OrganicBlob tone={blobTone} className={`${blobPositionClass} h-72 w-72`} />
|
||||
<div className="relative mx-auto max-w-6xl px-6 sm:px-8 lg:px-12">
|
||||
{breadcrumbData && <JsonLd data={breadcrumbData} />}
|
||||
{crumbs && <Breadcrumbs items={crumbs} />}
|
||||
|
||||
Reference in New Issue
Block a user