Files
LexiChain/components/views/dashboard/contacts-header.tsx
2026-03-25 13:52:45 +01:00

45 lines
1.7 KiB
TypeScript

"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-70" />
<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>
);
}