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,125 @@
+import {
+  Activity,
+  BriefcaseBusiness,
+  Layers3,
+  Mail,
+  Sparkles,
+  TimerReset,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { SectionHeading } from "./section-heading";
+import { BentoCard } from "./bento-card";
+import type { BentoSectionCopy } from "./types";
+
+type BentoGridSectionProps = {
+  copy: BentoSectionCopy;
+};
+
+export function BentoGridSection({ copy }: BentoGridSectionProps) {
+  return (
+    <section className="space-y-8">
+      <SectionHeading
+        eyebrow={copy.eyebrow}
+        title={copy.title}
+        description={copy.description}
+      />
+
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4 xl:gap-6">
+        <BentoCard
+          eyebrow={copy.about.eyebrow}
+          title={copy.about.title}
+          description={copy.about.description}
+          icon={<BriefcaseBusiness className="h-5 w-5" />}
+          className="xl:col-span-2 xl:row-span-2"
+        >
+          <ul className="grid gap-3 sm:grid-cols-2">
+            {copy.about.points.map((item) => (
+              <li
+                key={item}
+                className="rounded-nested border border-border/70 bg-background px-4 py-3 text-sm text-foreground/88"
+              >
+                {item}
+              </li>
+            ))}
+          </ul>
+        </BentoCard>
+
+        <BentoCard
+          eyebrow={copy.coreStack.eyebrow}
+          title={copy.coreStack.title}
+          icon={<Layers3 className="h-5 w-5" />}
+        >
+          <div className="flex flex-wrap gap-2">
+            {copy.coreStack.items.map((item) => (
+              <Badge key={item} variant="outline" className="border-border/80 bg-background">
+                {item}
+              </Badge>
+            ))}
+          </div>
+        </BentoCard>
+
+        <BentoCard
+          eyebrow={copy.availability.eyebrow}
+          title={copy.availability.title}
+          description={copy.availability.description}
+          icon={<Activity className="h-5 w-5" />}
+        >
+          <Badge variant="success" className="w-fit">
+            {copy.availability.status}
+          </Badge>
+        </BentoCard>
+
+        <BentoCard
+          eyebrow={copy.currentFocus.eyebrow}
+          title={copy.currentFocus.title}
+          icon={<Sparkles className="h-5 w-5" />}
+        >
+          <ul className="space-y-3 text-sm text-foreground/88">
+            {copy.currentFocus.items.map((item) => (
+              <li key={item} className="rounded-nested border border-border/70 bg-background px-4 py-3">
+                {item}
+              </li>
+            ))}
+          </ul>
+        </BentoCard>
+
+        <BentoCard
+          eyebrow={copy.contact.eyebrow}
+          title={copy.contact.title}
+          description={copy.contact.description}
+          icon={<Mail className="h-5 w-5" />}
+        >
+          <div className="rounded-nested border border-border/70 bg-background px-4 py-4">
+            <p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+              {copy.contact.emailLabel}
+            </p>
+            <p className="mt-2 text-base font-medium text-foreground">
+              {copy.contact.emailValue}
+            </p>
+          </div>
+        </BentoCard>
+
+        <BentoCard
+          eyebrow={copy.highlights.eyebrow}
+          title={copy.highlights.title}
+          icon={<TimerReset className="h-5 w-5" />}
+        >
+          <div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
+            {copy.highlights.items.map((item) => (
+              <div
+                key={item.label}
+                className="rounded-nested border border-border/70 bg-background px-4 py-4"
+              >
+                <p className="text-2xl font-semibold tracking-[-0.05em] text-foreground">
+                  {item.value}
+                </p>
+                <p className="mt-1 text-sm text-muted-foreground">{item.label}</p>
+              </div>
+            ))}
+          </div>
+        </BentoCard>
+      </div>
+    </section>
+  );
+}