Refactor site header, heroes, and design system

2026-03-08 00:29:51 +01:00
parent a18370d003
commit 0c2b67e378
56 changed files with 2714 additions and 1318 deletions
@@ -0,0 +1,57 @@
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+
+import { HeroAtmosphere } from "@/components/layout/hero-atmosphere";
+import { MotionFade } from "@/components/motion-fade";
+import { Button } from "@/components/ui/button";
+import { getLocalizedPath } from "@/lib/locale";
+
+type HomeHeroProps = {
+  locale: string;
+  kicker: string;
+  title: string;
+  description: string;
+  portfolioLabel: string;
+  contactLabel: string;
+};
+
+export function HomeHero({
+  locale,
+  kicker,
+  title,
+  description,
+  portfolioLabel,
+  contactLabel,
+}: HomeHeroProps) {
+  return (
+    <section className="relative isolate flex min-h-[85vh] items-center overflow-hidden">
+      <HeroAtmosphere />
+      <div className="mx-auto flex w-full max-w-[72rem] flex-col items-center justify-center px-4 pb-12 pt-24 text-center sm:px-6 lg:px-8 lg:pb-16 lg:pt-28">
+        <MotionFade className="w-full">
+          <div className="mx-auto max-w-[54rem]">
+            <p className="text-sm font-medium tracking-[0.08em] text-foreground/62">
+              {kicker}
+            </p>
+            <h1 className="mt-6 whitespace-pre-line text-balance text-[3rem] font-semibold leading-[0.92] tracking-[-0.06em] text-foreground sm:text-[4.5rem] lg:text-[6.75rem]">
+              {title}
+            </h1>
+            <p className="mx-auto mt-6 max-w-[30rem] text-sm leading-6 text-foreground/66 sm:text-base">
+              {description}
+            </p>
+            <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+              <Button asChild size="lg" className="px-6">
+                <Link href={getLocalizedPath(locale, "/portfolio")}>
+                  {portfolioLabel}
+                  <ArrowRight className="h-4 w-4" />
+                </Link>
+              </Button>
+              <Button asChild variant="outline" size="lg" className="px-6">
+                <Link href={getLocalizedPath(locale, "/contact")}>{contactLabel}</Link>
+              </Button>
+            </div>
+          </div>
+        </MotionFade>
+      </div>
+    </section>
+  );
+}