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,57 @@
+import type { ReactNode } from "react";
+
+import { AppCard } from "@/components/ui/app-card";
+import { cn } from "@/lib/utils";
+
+type BentoCardProps = {
+  eyebrow: string;
+  title: string;
+  description?: string;
+  icon?: ReactNode;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function BentoCard({
+  eyebrow,
+  title,
+  description,
+  icon,
+  className,
+  children,
+}: BentoCardProps) {
+  return (
+    <AppCard
+      layer="single"
+      interactive
+      className={cn(
+        "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",
+        className,
+      )}
+    >
+      <div className="flex h-full flex-col gap-6 p-6">
+        <div className="flex items-start justify-between gap-4">
+          <div className="space-y-3">
+            <p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+              {eyebrow}
+            </p>
+            <div className="space-y-2">
+              <h3 className="text-2xl font-semibold tracking-[-0.05em] text-foreground transition-colors duration-300 group-hover:text-foreground/95">
+                {title}
+              </h3>
+              {description ? (
+                <p className="text-sm leading-7 text-muted-foreground">{description}</p>
+              ) : null}
+            </div>
+          </div>
+          {icon ? (
+            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-nested border border-border/70 bg-background text-foreground transition-all duration-300 group-hover:-translate-y-0.5 group-hover:border-border-strong group-hover:shadow-sm">
+              {icon}
+            </div>
+          ) : null}
+        </div>
+        {children}
+      </div>
+    </AppCard>
+  );
+}