feat: Scaffold new Next.js website with core pages, components, and assets.

2026-02-06 11:19:57 +01:00
parent d63eb85218
commit db27ebf76f
53 changed files with 7756 additions and 0 deletions
@@ -0,0 +1,64 @@
+import Link from "next/link";
+import Image from "next/image";
+
+type PageHeroProps = {
+  eyebrow: string;
+  title: string;
+  intro: string;
+  imageSrc: string;
+  imageAlt: string;
+  primaryCta?: { label: string; href: string };
+  secondaryCta?: { label: string; href: string };
+};
+
+export function PageHero({
+  eyebrow,
+  title,
+  intro,
+  imageSrc,
+  imageAlt,
+  primaryCta,
+  secondaryCta
+}: PageHeroProps) {
+  return (
+    <section className="section-block pt-12 md:pt-16">
+      <div className="container-shell grid items-center gap-8 lg:grid-cols-[1.05fr_0.95fr]">
+        <div className="space-y-6">
+          <p className="eyebrow">{eyebrow}</p>
+          <h1 className="text-balance text-4xl font-semibold leading-tight text-alpine-900 sm:text-5xl">
+            {title}
+          </h1>
+          <p className="max-w-2xl text-lg leading-relaxed text-alpine-700">{intro}</p>
+          {(primaryCta || secondaryCta) && (
+            <div className="flex flex-wrap gap-3">
+              {primaryCta ? (
+                <Link className="btn-primary" href={primaryCta.href}>
+                  {primaryCta.label}
+                </Link>
+              ) : null}
+              {secondaryCta ? (
+                <Link className="btn-secondary" href={secondaryCta.href}>
+                  {secondaryCta.label}
+                </Link>
+              ) : null}
+            </div>
+          )}
+        </div>
+
+        <div className="relative overflow-hidden rounded-3xl border border-alpine-200 bg-white shadow-soft">
+          <div className="relative h-[300px] w-full sm:h-[360px]">
+            <Image
+              alt={imageAlt}
+              className="object-cover"
+              fill
+              priority
+              sizes="(min-width: 1024px) 42vw, 100vw"
+              src={imageSrc}
+            />
+          </div>
+          <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-alpine-900/55 to-transparent" />
+        </div>
+      </div>
+    </section>
+  );
+}