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,86 @@
+import { ArrowUpRight } from "lucide-react";
+import Link from "next/link";
+
+import { Badge } from "@/components/ui/badge";
+import { AppCard } from "@/components/ui/app-card";
+import { SectionHeading } from "./section-heading";
+import type { ProjectCardCopy, ProjectsSectionCopy } from "./types";
+
+type ProjectsSectionProps = {
+  copy: ProjectsSectionCopy;
+  items: ProjectCardCopy[];
+};
+
+export function ProjectsSection({ copy, items }: ProjectsSectionProps) {
+  return (
+    <section className="space-y-10">
+      <SectionHeading
+        eyebrow={copy.eyebrow}
+        title={copy.title}
+        description={copy.description}
+      />
+
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3 xl:gap-6">
+        {items.map((item, index) => (
+          <AppCard
+            key={`${item.title}-${index}`}
+            layer="single"
+            interactive
+            className={[
+              "group h-full border-border/80 bg-surface-2 transition-all duration-300 hover:-translate-y-1 hover:border-border-strong hover:bg-background/80 hover:shadow-lg",
+              index === 0 ? "lg:col-span-2" : "",
+            ].join(" ")}
+          >
+            <div className="flex h-full flex-col gap-6 p-6">
+              <div className="flex flex-wrap items-center gap-2">
+                {item.meta.map((metaItem) => (
+                  <Badge
+                    key={metaItem}
+                    variant="outline"
+                    className="border-border/80 bg-background text-muted-foreground transition-colors duration-300 group-hover:border-border-strong group-hover:text-foreground/80"
+                  >
+                    {metaItem}
+                  </Badge>
+                ))}
+              </div>
+
+              <div className="space-y-3">
+                <h3 className="text-2xl font-semibold tracking-[-0.05em] text-foreground transition-colors duration-300 group-hover:text-foreground/95">
+                  {item.title}
+                </h3>
+                <p className="text-sm leading-7 text-muted-foreground">{item.summary}</p>
+              </div>
+
+              <div className="space-y-3">
+                <p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+                  {copy.stackLabel}
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  {item.stack.map((stackItem) => (
+                    <Badge
+                      key={stackItem}
+                      variant="secondary"
+                      className="bg-secondary/70 text-foreground transition-colors duration-300 group-hover:bg-secondary"
+                    >
+                      {stackItem}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+
+              <div className="mt-auto">
+                <Link
+                  href={item.href}
+                  className="inline-flex items-center gap-2 text-sm font-medium text-foreground transition-all duration-200 group-hover:translate-x-0.5"
+                >
+                  {item.cta}
+                  <ArrowUpRight className="h-4 w-4 transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
+                </Link>
+              </div>
+            </div>
+          </AppCard>
+        ))}
+      </div>
+    </section>
+  );
+}