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,30 @@
+import { HeroAtmosphere } from "@/components/layout/hero-atmosphere";
+import { MotionFade } from "@/components/motion-fade";
+
+type PageHeroProps = {
+  title: string;
+  description?: string;
+};
+
+export function PageHero({ title, description }: PageHeroProps) {
+  return (
+    <section className="relative isolate flex min-h-[42vh] items-end overflow-hidden">
+      <HeroAtmosphere compact />
+      <div className="mx-auto w-full max-w-[72rem] px-4 pb-10 pt-24 sm:px-6 lg:px-8 lg:pb-12 lg:pt-28">
+        <MotionFade className="max-w-[44rem]">
+          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-foreground/48">
+            {title}
+          </p>
+          <h1 className="mt-4 text-balance text-4xl font-semibold leading-[0.95] tracking-[-0.05em] text-foreground sm:text-5xl lg:text-6xl">
+            {title}
+          </h1>
+          {description ? (
+            <p className="mt-5 max-w-[36rem] text-sm leading-6 text-foreground/66 sm:text-base">
+              {description}
+            </p>
+          ) : null}
+        </MotionFade>
+      </div>
+    </section>
+  );
+}