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,64 @@
+import { ArrowUpRight, Mail } from "lucide-react";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import { AppCard } from "@/components/ui/app-card";
+import type { ContactCtaSectionCopy } from "./types";
+
+type ContactCtaSectionProps = {
+  copy: ContactCtaSectionCopy;
+  contactHref: string;
+};
+
+export function ContactCtaSection({
+  copy,
+  contactHref,
+}: ContactCtaSectionProps) {
+  return (
+    <section>
+      <AppCard className="overflow-hidden">
+        <div className="grid gap-6 rounded-nested border border-border/70 bg-background p-6 sm:p-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end lg:p-10">
+          <div className="space-y-4">
+            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+              {copy.eyebrow}
+            </p>
+            <h2 className="max-w-3xl text-balance text-3xl font-semibold tracking-[-0.05em] text-foreground sm:text-4xl lg:text-5xl">
+              {copy.title}
+            </h2>
+            <p className="max-w-2xl text-sm leading-7 text-muted-foreground sm:text-base">
+              {copy.description}
+            </p>
+
+            <div className="flex flex-wrap gap-6 text-sm">
+              <div className="space-y-1">
+                <p className="font-semibold text-foreground">{copy.emailLabel}</p>
+                <a href={`mailto:${copy.emailValue}`} className="text-muted-foreground hover:text-foreground">
+                  {copy.emailValue}
+                </a>
+              </div>
+              <div className="space-y-1">
+                <p className="font-semibold text-foreground">{copy.availabilityLabel}</p>
+                <p className="text-muted-foreground">{copy.availabilityValue}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-wrap gap-3 lg:justify-end">
+            <Button asChild size="lg">
+              <Link href={contactHref}>
+                {copy.contactCta}
+                <Mail className="h-4 w-4" />
+              </Link>
+            </Button>
+            <Button asChild size="lg" variant="outline">
+              <a href={copy.githubHref} target="_blank" rel="noreferrer">
+                {copy.githubCta}
+                <ArrowUpRight className="h-4 w-4" />
+              </a>
+            </Button>
+          </div>
+        </div>
+      </AppCard>
+    </section>
+  );
+}