Refine homepage and restore hero

2026-03-15 18:26:31 +01:00
parent 6caf723695
commit cf957cbbe2
14 changed files with 1565 additions and 155 deletions
@@ -0,0 +1,113 @@
+import { ArrowRight, MapPin, Sparkles } from "lucide-react";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { AppCard } from "@/components/ui/app-card";
+import { cn } from "@/lib/utils";
+import type { HeroCopy } from "./types";
+
+type HeroSectionProps = {
+  copy: HeroCopy;
+  contactHref: string;
+  portfolioHref: string;
+};
+
+export function HeroSection({
+  copy,
+  contactHref,
+  portfolioHref,
+}: HeroSectionProps) {
+  return (
+    <section className="relative pt-8 sm:pt-12 lg:pt-16">
+      <div className="grid gap-6 lg:grid-cols-[minmax(0,1.15fr)_minmax(320px,0.85fr)] lg:items-end">
+        <div className="space-y-8">
+          <Badge
+            variant="outline"
+            className="w-fit border-border/80 bg-background/80 text-foreground shadow-xs"
+          >
+            <span className="mr-2 h-2 w-2 rounded-full bg-status-success" aria-hidden="true" />
+            {copy.availability}
+          </Badge>
+
+          <div className="space-y-5">
+            <p className="text-sm font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+              {copy.name}
+            </p>
+            <h1 className="max-w-4xl text-balance text-5xl font-semibold tracking-[-0.07em] text-foreground sm:text-6xl lg:text-7xl">
+              {copy.headline}
+            </h1>
+            <p className="max-w-2xl text-base leading-8 text-muted-foreground sm:text-lg">
+              {copy.description}
+            </p>
+          </div>
+
+          <div className="flex flex-wrap gap-3">
+            <Button asChild size="lg" className="shadow-sm">
+              <Link href={contactHref}>
+                {copy.primaryCta}
+                <ArrowRight className="h-4 w-4" />
+              </Link>
+            </Button>
+            <Button
+              asChild
+              size="lg"
+              variant="outline"
+              className="border-border/80 bg-background/70 hover:border-border-strong hover:bg-background"
+            >
+              <Link href={portfolioHref}>{copy.secondaryCta}</Link>
+            </Button>
+          </div>
+
+          <div className="flex flex-wrap gap-3">
+            {copy.highlights.map((item) => (
+              <Badge
+                key={item}
+                variant="secondary"
+                className="bg-secondary/70 text-foreground shadow-none"
+              >
+                {item}
+              </Badge>
+            ))}
+          </div>
+        </div>
+
+        <AppCard className="overflow-hidden">
+          <div className="grid gap-3">
+            <div className="grid gap-3 sm:grid-cols-2">
+              <MetricCard label={copy.roleLabel} value={copy.roleValue} />
+              <MetricCard label={copy.locationLabel} value={copy.locationValue} icon={MapPin} />
+            </div>
+            <MetricCard label={copy.focusLabel} value={copy.focusValue} icon={Sparkles} strong />
+          </div>
+        </AppCard>
+      </div>
+    </section>
+  );
+}
+
+type MetricCardProps = {
+  label: string;
+  value: string;
+  strong?: boolean;
+  icon?: typeof MapPin;
+};
+
+function MetricCard({ label, value, strong = false, icon: Icon }: MetricCardProps) {
+  return (
+    <div
+      className={cn(
+        "rounded-nested border border-border/70 bg-background p-5 transition-all duration-300",
+        strong && "bg-surface-2",
+      )}
+    >
+      <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+        {Icon ? <Icon className="h-3.5 w-3.5" /> : null}
+        <span>{label}</span>
+      </div>
+      <p className="mt-3 text-xl font-semibold tracking-[-0.04em] text-foreground">
+        {value}
+      </p>
+    </div>
+  );
+}