feat: (ui) new design

2026-01-09 15:12:35 +01:00
parent a5b8d922e3
commit 1b84dbd36d
23 changed files with 1023 additions and 1536 deletions
--- a/web/src/components/section-header.tsx
+++ b/web/src/components/section-header.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { cn } from "../lib/utils";
+import { Badge } from "./ui/badge";
+
+interface SectionHeaderProps {
+    badge: string;
+    title: string;
+    description?: string;
+    align?: "center" | "left" | "right";
+    className?: string;
+}
+
+export function SectionHeader({
+    badge,
+    title,
+    description,
+    align = "center",
+    className,
+}: SectionHeaderProps) {
+    const alignClasses = {
+        center: "text-center mx-auto",
+        left: "text-left mr-auto", // reset margin if needed
+        right: "text-right ml-auto",
+    };
+
+    return (
+        <div className={cn("space-y-4 mb-16", alignClasses[align], className)}>
+            <Badge variant="glass" className="py-1.5 px-4">{badge}</Badge>
+            <h2 className="text-3xl md:text-4xl font-black text-primary tracking-tight">
+                {title}
+            </h2>
+            {description && (
+                <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
+                    {description}
+                </p>
+            )}
+        </div>
+    );
+}