PreRelease v2

components/layout/contacts-header.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { ArrowLeft, ShieldCheck, Sparkles } from "lucide-react";
+import { BackgroundBeams } from "@/components/ui/background-beams";
+
+export function ContactsHeader() {
+  return (
+    <div className="border-b border-border/50 bg-background/80 backdrop-blur-sm">
+      <BackgroundBeams className="opacity-80" />
+      <div className="max-w-7xl mx-auto px-6 py-8 space-y-6">
+        <Link
+          href="/dashboard"
+          className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          Back to Dashboard
+        </Link>
+
+        <div className="space-y-3">
+          <h1 className="text-4xl md:text-5xl font-semibold tracking-tight bg-gradient-to-r from-primary via-accent to-secondary bg-clip-text text-transparent">
+            Contracts Manager
+          </h1>
+          <p className="max-w-3xl text-lg text-muted-foreground">
+            Upload, review, and analyze your financial contracts with a focused
+            workspace built for speed and clarity.
+          </p>
+        </div>
+
+        <div className="flex flex-wrap gap-3 pt-1">
+          <div className="flex items-center gap-2 rounded-full border border-primary/20 bg-primary/10 px-4 py-2 text-sm font-medium text-primary">
+            <Sparkles className="w-4 h-4" />
+            AI-powered review
+          </div>
+          <div className="flex items-center gap-2 rounded-full border border-emerald-400/20 bg-emerald-400/10 px-4 py-2 text-sm font-medium text-emerald-500">
+            <ShieldCheck className="w-4 h-4" />
+            Compliance-focused workflow
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}