Release (Stable version)
This commit is contained in:
@@ -2,40 +2,87 @@
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { ArrowLeft, ShieldCheck, Sparkles } from "lucide-react";
|
||||
import {
|
||||
ArrowLeft,
|
||||
ShieldCheck,
|
||||
Sparkles,
|
||||
FileText,
|
||||
Network,
|
||||
} from "lucide-react";
|
||||
import { BackgroundBeams } from "@/components/ui/background-beams";
|
||||
|
||||
export function ContactsHeader() {
|
||||
export function ContractsHeader() {
|
||||
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="relative w-full overflow-hidden border-b border-border/40 bg-background/80 pt-8 pb-10 md:pt-10 md:pb-12 backdrop-blur-sm">
|
||||
{/* Background Beams - Opacity bumped slightly for better visibility */}
|
||||
<div className="absolute inset-0 z-0 pointer-events-none">
|
||||
<BackgroundBeams className="opacity-80" />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-background/10 via-background/50 to-background" />
|
||||
</div>
|
||||
|
||||
<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="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-8">
|
||||
{/* Left Column: Typography & Badges */}
|
||||
<div className="flex-1 space-y-5 animate-in slide-in-from-bottom-4 fade-in duration-700">
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className="group inline-flex items-center gap-2 text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4 transition-transform group-hover:-translate-x-1" />
|
||||
Back to Dashboard
|
||||
</Link>
|
||||
|
||||
<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 className="space-y-2">
|
||||
<h1 className="text-4xl font-extrabold tracking-tight text-foreground md:text-5xl">
|
||||
Contracts{" "}
|
||||
<span className="bg-gradient-to-br from-primary via-accent to-secondary bg-clip-text text-transparent">
|
||||
Manager
|
||||
</span>
|
||||
</h1>
|
||||
<p className="max-w-2xl text-base text-muted-foreground md:text-lg">
|
||||
Upload, review, and analyze your financial contracts with speed,
|
||||
transparency, and cryptographic security.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Glassmorphic Badges - Sized up slightly from the compact version */}
|
||||
<div className="flex flex-wrap gap-3 pt-2">
|
||||
<div className="group relative inline-flex items-center gap-2 overflow-hidden rounded-full border border-primary/20 bg-primary/5 px-3.5 py-1.5 text-sm font-medium text-primary backdrop-blur-md transition-all hover:bg-primary/10 cursor-default">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
AI-Powered
|
||||
</div>
|
||||
|
||||
<div className="group relative inline-flex items-center gap-2 overflow-hidden rounded-full border border-emerald-500/20 bg-emerald-500/5 px-3.5 py-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400 backdrop-blur-md transition-all hover:bg-emerald-500/10 cursor-default">
|
||||
<ShieldCheck className="h-4 w-4" />
|
||||
Bank-Grade
|
||||
</div>
|
||||
</div>
|
||||
</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
|
||||
|
||||
{/* Right Column: Medium-Sized Graphic */}
|
||||
<div className="hidden md:block animate-in zoom-in-95 fade-in duration-1000 delay-150 relative h-40 w-64 shrink-0">
|
||||
{/* Glowing backdrop */}
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-32 w-32 rounded-full bg-primary/20 blur-3xl" />
|
||||
|
||||
{/* Floating Medium Glass Cards */}
|
||||
<div className="absolute left-2 top-2 flex h-20 w-32 flex-col justify-between rounded-xl border border-white/10 bg-white/5 p-3 shadow-xl backdrop-blur-md dark:border-slate-700/50 dark:bg-slate-800/50 transform -rotate-6 animate-[bounce_5s_infinite_ease-in-out]">
|
||||
<FileText className="h-5 w-5 text-muted-foreground" />
|
||||
<div className="space-y-1.5">
|
||||
<div className="h-1 w-full rounded-full bg-slate-200 dark:bg-slate-700" />
|
||||
<div className="h-1 w-2/3 rounded-full bg-slate-200 dark:bg-slate-700" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute right-2 bottom-2 flex h-20 w-32 flex-col justify-between rounded-xl border border-white/10 bg-white/5 p-3 shadow-xl backdrop-blur-md dark:border-slate-700/50 dark:bg-slate-800/50 transform rotate-6 animate-[bounce_6s_infinite_ease-in-out_reverse]">
|
||||
<Network className="h-5 w-5 text-primary" />
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
|
||||
<div className="h-1 w-1/2 rounded-full bg-slate-200 dark:bg-slate-700" />
|
||||
</div>
|
||||
<div className="h-1 w-full rounded-full bg-slate-200 dark:bg-slate-700" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user