PreRelease v2
This commit is contained in:
@@ -8,7 +8,7 @@ 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" />
|
||||
<BackgroundBeams className="opacity-80" />
|
||||
<div className="max-w-7xl mx-auto px-6 py-8 space-y-6">
|
||||
<Link
|
||||
href="/dashboard"
|
||||
@@ -9,7 +9,7 @@ import { SignOutButton, UserButton } from "@clerk/nextjs";
|
||||
import { motion } from "motion/react";
|
||||
import Image from "next/image";
|
||||
import { ModeToggle } from "@/components/ui/mode-toggle";
|
||||
import NotificationBar from "./notification-bar";
|
||||
import NotificationBar from "@/features/notifications/components/notification-bar";
|
||||
|
||||
interface NavItem {
|
||||
href: string;
|
||||
@@ -1,442 +0,0 @@
|
||||
"use client";
|
||||
import { useScrollAnimation } from "@/hooks/useScrollAnimation";
|
||||
import {
|
||||
MessageSquare,
|
||||
Brain,
|
||||
Shield,
|
||||
BarChart3,
|
||||
Bell,
|
||||
Lock,
|
||||
Sparkles,
|
||||
Link,
|
||||
Zap,
|
||||
Check,
|
||||
TrendingUp,
|
||||
} from "lucide-react";
|
||||
import { GlowingEffect } from "@/components/ui/glowing-effect";
|
||||
// Feature Card Component with Glowing Effect and Dotted Background
|
||||
interface FeatureCardProps {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: React.ElementType;
|
||||
gradient: string;
|
||||
gridArea: string;
|
||||
children?: React.ReactNode;
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
function FeatureCard({
|
||||
title,
|
||||
description,
|
||||
icon: Icon,
|
||||
gradient,
|
||||
gridArea,
|
||||
children,
|
||||
delay = 0,
|
||||
}: FeatureCardProps) {
|
||||
const { ref, isVisible } = useScrollAnimation<HTMLLIElement>({
|
||||
threshold: 0.2,
|
||||
});
|
||||
|
||||
return (
|
||||
<li
|
||||
ref={ref}
|
||||
className={`min-h-[16rem] list-none ${gridArea}`}
|
||||
style={{
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible ? "translateY(0)" : "translateY(30px)",
|
||||
transition: `all 0.6s cubic-bezier(0.16, 1, 0.3, 1) ${delay}s`,
|
||||
}}
|
||||
>
|
||||
<div className="relative h-full rounded-xl border border-slate-200/80 dark:border-slate-700/80 p-1.5 md:rounded-2xl md:p-2 hover:border-blue-500/40 dark:hover:border-blue-400/40 transition-colors duration-500 overflow-hidden">
|
||||
{/* Glowing Effect */}
|
||||
<GlowingEffect
|
||||
spread={40}
|
||||
glow={true}
|
||||
disabled={false}
|
||||
proximity={60}
|
||||
inactiveZone={0.01}
|
||||
borderWidth={1.5}
|
||||
/>
|
||||
<div className="relative flex h-full flex-col justify-between gap-3 overflow-hidden rounded-lg md:rounded-xl p-4 md:p-5 bg-white/60 dark:bg-slate-900/60 backdrop-blur-xl shadow-lg dark:shadow-[0px_0px_30px_0px_rgba(59,130,246,0.08)]">
|
||||
<div className="relative flex flex-1 flex-col justify-between gap-3">
|
||||
{/* Icon Container */}
|
||||
<div className="relative inline-flex w-fit">
|
||||
<div
|
||||
className={`p-2.5 rounded-xl ${gradient} shadow-md group-hover:shadow-lg transition-all duration-500`}
|
||||
>
|
||||
<Icon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-bold text-base md:text-lg text-slate-900 dark:text-white leading-tight">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-xs md:text-sm text-slate-600 dark:text-slate-400 leading-relaxed line-clamp-2">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Animated Content */}
|
||||
{children && <div className="mt-auto">{children}</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
// Animated Chat Messages (Compact)
|
||||
function ChatAnimation() {
|
||||
const messages = [
|
||||
{ text: "What's the liability cap?", isUser: true },
|
||||
{ text: "$5M per Section 8.3", isUser: false },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="mt-2 space-y-2">
|
||||
{messages.map((msg, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`flex ${msg.isUser ? "justify-end" : "justify-start"}`}
|
||||
style={{
|
||||
animation: `slide-up 0.3s ease-out forwards`,
|
||||
animationDelay: `${i * 0.6 + 1}s`,
|
||||
opacity: 0,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`max-w-[90%] px-3 py-1.5 rounded-xl text-xs shadow-sm ${
|
||||
msg.isUser
|
||||
? "bg-blue-600 text-white rounded-tr-sm"
|
||||
: "bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 rounded-tl-sm"
|
||||
}`}
|
||||
>
|
||||
{msg.text}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Document Extraction Animation (Compact)
|
||||
function ExtractionAnimation() {
|
||||
const fields = [
|
||||
{ label: "Contract Type", value: "Service", status: "done" },
|
||||
{ label: "Parties", value: "3 found", status: "done" },
|
||||
{ label: "Term", value: "24 mo", status: "processing" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="mt-2 space-y-1.5">
|
||||
{fields.map((field, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center justify-between p-2 rounded-lg bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm"
|
||||
style={{
|
||||
animation: `slide-up 0.3s ease-out forwards`,
|
||||
animationDelay: `${i * 0.2 + 0.5}s`,
|
||||
opacity: 0,
|
||||
}}
|
||||
>
|
||||
<span className="text-[10px] text-slate-500 dark:text-slate-400 font-medium">
|
||||
{field.label}
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-xs font-semibold text-slate-700 dark:text-slate-300">
|
||||
{field.value}
|
||||
</span>
|
||||
{field.status === "done" && (
|
||||
<Check className="w-3 h-3 text-emerald-500" />
|
||||
)}
|
||||
{field.status === "processing" && (
|
||||
<div className="w-3 h-3 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Blockchain Animation (Compact)
|
||||
function BlockchainAnimation() {
|
||||
return (
|
||||
<div className="mt-2 relative h-24">
|
||||
{/* Nodes */}
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute w-8 h-8 rounded-full bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center shadow-lg"
|
||||
style={{
|
||||
left: `${i * 33}%`,
|
||||
top: i % 2 === 0 ? "20%" : "50%",
|
||||
animation: `float 3s ease-in-out infinite`,
|
||||
animationDelay: `${i * 0.3}s`,
|
||||
}}
|
||||
>
|
||||
<Link className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Connection Lines */}
|
||||
<svg className="absolute inset-0 w-full h-full" style={{ zIndex: -1 }}>
|
||||
<defs>
|
||||
<linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#8b5cf6" stopOpacity="0.5" />
|
||||
<stop offset="100%" stopColor="#a855f7" stopOpacity="0.5" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{[0, 1].map((i) => (
|
||||
<line
|
||||
key={i}
|
||||
x1={`${i * 33 + 12}%`}
|
||||
y1={i % 2 === 0 ? "35%" : "65%"}
|
||||
x2={`${(i + 1) * 33 + 12}%`}
|
||||
y2={i % 2 === 0 ? "65%" : "35%"}
|
||||
stroke="url(#lineGradient)"
|
||||
strokeWidth="2"
|
||||
strokeDasharray="4,4"
|
||||
className="animate-pulse"
|
||||
/>
|
||||
))}
|
||||
</svg>
|
||||
|
||||
{/* Transaction Hash */}
|
||||
<div
|
||||
className="absolute bottom-0 left-1/2 -translate-x-1/2 px-2.5 py-1 rounded-full bg-violet-500/15 dark:bg-violet-500/25 backdrop-blur-sm"
|
||||
style={{
|
||||
animation: `slide-up 0.4s ease-out forwards`,
|
||||
animationDelay: "1.2s",
|
||||
opacity: 0,
|
||||
}}
|
||||
>
|
||||
<span className="text-[10px] font-mono font-semibold text-violet-600 dark:text-violet-400">
|
||||
0x7f8a...9b2c ✓
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Dashboard Mini Preview (Compact)
|
||||
function DashboardPreview() {
|
||||
return (
|
||||
<div className="mt-2 grid grid-cols-3 gap-2">
|
||||
{/* Mini Chart */}
|
||||
<div className="col-span-2 bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm rounded-lg p-2 shadow-sm">
|
||||
<div className="flex items-end gap-0.5 h-14">
|
||||
{[30, 50, 40, 70, 55, 80, 65].map((h, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-1 bg-gradient-to-t from-blue-500 to-blue-400 rounded-t-sm transition-all duration-300 hover:opacity-80"
|
||||
style={{
|
||||
height: `${h}%`,
|
||||
animation: `slide-up 0.3s ease-out forwards`,
|
||||
animationDelay: `${i * 0.08 + 0.4}s`,
|
||||
opacity: 0,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="space-y-1.5">
|
||||
<div className="bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm rounded-lg p-2 text-center shadow-sm">
|
||||
<TrendingUp className="w-4 h-4 mx-auto text-emerald-500 mb-0.5" />
|
||||
<span className="text-xs font-bold text-slate-700 dark:text-slate-300">
|
||||
+24%
|
||||
</span>
|
||||
</div>
|
||||
<div className="bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm rounded-lg p-2 text-center shadow-sm">
|
||||
<Zap className="w-4 h-4 mx-auto text-amber-500 mb-0.5" />
|
||||
<span className="text-xs font-bold text-slate-700 dark:text-slate-300">
|
||||
98.9%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Notification Animation (Compact)
|
||||
function NotificationAnimation() {
|
||||
const notifications = [
|
||||
{ icon: Bell, text: "Renewal in 7 days", color: "text-amber-500" },
|
||||
{ icon: Check, text: "Doc verified", color: "text-emerald-500" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="mt-2 space-y-1.5">
|
||||
{notifications.map((notif, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-2 p-2 rounded-lg bg-white/50 dark:bg-slate-800/50 backdrop-blur-sm"
|
||||
style={{
|
||||
animation: `slide-up 0.3s ease-out forwards`,
|
||||
animationDelay: `${i * 0.4 + 0.6}s`,
|
||||
opacity: 0,
|
||||
}}
|
||||
>
|
||||
<notif.icon className={`w-4 h-4 flex-shrink-0 ${notif.color}`} />
|
||||
<span className="text-xs text-slate-700 dark:text-slate-300 font-medium truncate">
|
||||
{notif.text}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Security Animation (Compact)
|
||||
function SecurityAnimation() {
|
||||
return (
|
||||
<div className="mt-2 flex flex-col items-center">
|
||||
<div className="relative">
|
||||
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-emerald-500 to-green-600 flex items-center justify-center shadow-xl animate-pulse-glow">
|
||||
<Lock className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div className="absolute -top-0.5 -right-0.5 w-5 h-5 rounded-full bg-emerald-500 flex items-center justify-center shadow-md">
|
||||
<Check className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 flex gap-1.5 flex-wrap justify-center">
|
||||
{["AES-256", "GDPR", "ISO"].map((badge, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="px-2.5 py-1 rounded-full text-[10px] font-bold bg-emerald-500/15 dark:bg-emerald-500/25 text-emerald-600 dark:text-emerald-400"
|
||||
style={{
|
||||
animation: `slide-up 0.3s ease-out forwards`,
|
||||
animationDelay: `${i * 0.15 + 0.4}s`,
|
||||
opacity: 0,
|
||||
}}
|
||||
>
|
||||
{badge}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Features() {
|
||||
const { ref: headerRef, isVisible: headerVisible } =
|
||||
useScrollAnimation<HTMLDivElement>();
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: "AI-Powered Assistant",
|
||||
description:
|
||||
"Ask questions about your contracts and get instant, precise answers with legal context.",
|
||||
icon: MessageSquare,
|
||||
gradient: "bg-gradient-to-br from-blue-500 to-blue-600",
|
||||
gridArea: "md:[grid-area:1/1/2/3]",
|
||||
content: <ChatAnimation />,
|
||||
},
|
||||
{
|
||||
title: "Document Extraction",
|
||||
description:
|
||||
"Advanced OCR + AI extracts and structures information from PDFs automatically.",
|
||||
icon: Brain,
|
||||
gradient: "bg-gradient-to-br from-teal-500 to-teal-600",
|
||||
gridArea: "md:[grid-area:1/3/2/4]",
|
||||
content: <ExtractionAnimation />,
|
||||
},
|
||||
{
|
||||
title: "Blockchain Proof",
|
||||
description:
|
||||
"Immutable timestamping on Polygon with cryptographic verification.",
|
||||
icon: Shield,
|
||||
gradient: "bg-gradient-to-br from-violet-500 to-purple-600",
|
||||
gridArea: "md:[grid-area:2/3/3/4]",
|
||||
content: <BlockchainAnimation />,
|
||||
},
|
||||
{
|
||||
title: "Analytics Dashboard",
|
||||
description:
|
||||
"Visualize contracts, renewals, and analytics in one interface.",
|
||||
icon: BarChart3,
|
||||
gradient: "bg-gradient-to-br from-indigo-500 to-indigo-600",
|
||||
gridArea: "md:[grid-area:2/1/3/3]",
|
||||
content: <DashboardPreview />,
|
||||
},
|
||||
{
|
||||
title: "Smart Alerts",
|
||||
description:
|
||||
"Automated notifications for renewals, deadlines, and key events.",
|
||||
icon: Bell,
|
||||
gradient: "bg-gradient-to-br from-amber-500 to-orange-600",
|
||||
gridArea: "md:[grid-area:3/3/4/4]",
|
||||
content: <NotificationAnimation />,
|
||||
},
|
||||
{
|
||||
title: "Enterprise Security",
|
||||
description: "AES-256 encryption, GDPR compliant with secure hosting.",
|
||||
icon: Lock,
|
||||
gradient: "bg-gradient-to-br from-emerald-500 to-green-600",
|
||||
gridArea: "md:[grid-area:3/1/4/3]",
|
||||
content: <SecurityAnimation />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section
|
||||
id="features"
|
||||
className="relative pt-16 pb-0 px-4 sm:px-6 lg:px-8 overflow-hidden"
|
||||
>
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 gradient-bg-mesh opacity-30" />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-blue-50/50 to-transparent dark:via-slate-900/50" />
|
||||
|
||||
<div className="relative max-w-6xl mx-auto pb-6">
|
||||
{/* Section Header */}
|
||||
<div
|
||||
ref={headerRef}
|
||||
className="text-center mb-12"
|
||||
style={{
|
||||
opacity: headerVisible ? 1 : 0,
|
||||
transform: headerVisible ? "translateY(0)" : "translateY(20px)",
|
||||
transition: "all 0.6s cubic-bezier(0.16, 1, 0.3, 1)",
|
||||
}}
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-6 shadow-md">
|
||||
<Sparkles className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||||
<span className="text-xs font-bold text-slate-700 dark:text-slate-300">
|
||||
Features
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl md:text-5xl font-black text-slate-900 dark:text-white mb-4 leading-tight">
|
||||
Everything You Need to{" "}
|
||||
<span className="gradient-text">Manage Contracts</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto leading-relaxed">
|
||||
Powerful AI combined with blockchain security.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bento Grid - Compact */}
|
||||
<ul className="grid grid-cols-1 grid-rows-none gap-3 md:grid-cols-3 md:grid-rows-3 lg:gap-4">
|
||||
{features.map((feature, index) => (
|
||||
<FeatureCard
|
||||
key={feature.title}
|
||||
title={feature.title}
|
||||
description={feature.description}
|
||||
icon={feature.icon}
|
||||
gradient={feature.gradient}
|
||||
gridArea={feature.gridArea}
|
||||
delay={index * 0.08}
|
||||
>
|
||||
{feature.content}
|
||||
</FeatureCard>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,126 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useScrollAnimation } from "@/hooks/useScrollAnimation";
|
||||
import { Sparkles, Github, Twitter, Linkedin, Mail } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
|
||||
// Social Icon Component
|
||||
function SocialIcon({
|
||||
icon: Icon,
|
||||
href,
|
||||
label,
|
||||
}: {
|
||||
icon: React.ElementType;
|
||||
href: string;
|
||||
label: string;
|
||||
}) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={label}
|
||||
className="text-slate-500 hover:text-slate-900 dark:hover:text-white transition-colors duration-200"
|
||||
>
|
||||
<Icon className="w-5 h-5" />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
export function Footer() {
|
||||
const { ref, isVisible } = useScrollAnimation<HTMLElement>({
|
||||
threshold: 0.1,
|
||||
});
|
||||
|
||||
const navLinks = [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
{ label: "About", href: "#about" },
|
||||
];
|
||||
|
||||
return (
|
||||
<footer
|
||||
id="footer"
|
||||
ref={ref}
|
||||
className="relative bg-white dark:bg-slate-950 border-t border-slate-200 dark:border-slate-800 py-12 px-4 sm:px-6 lg:px-8"
|
||||
>
|
||||
<div
|
||||
className="max-w-7xl mx-auto"
|
||||
style={{
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible ? "translateY(0)" : "translateY(20px)",
|
||||
transition: "all 0.6s ease-out",
|
||||
}}
|
||||
>
|
||||
{/* Main Content */}
|
||||
<div className="flex flex-col items-center space-y-8">
|
||||
{/* Logo */}
|
||||
<a href="#" className="inline-flex items-center gap-2 group">
|
||||
<div className="relative">
|
||||
<Image
|
||||
src="/LexiChain.png"
|
||||
alt="LexiChain Logo"
|
||||
width={48}
|
||||
height={48}
|
||||
className="
|
||||
relative z-10
|
||||
w-12 h-12 object-contain
|
||||
transition-all duration-300 ease-out
|
||||
group-hover:scale-110
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<nav className="flex items-center gap-8">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className="text-sm text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors duration-200"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="w-full max-w-4xl h-px bg-slate-200 dark:bg-slate-800" />
|
||||
|
||||
{/* Bottom Row */}
|
||||
<div className="flex items-center gap-8">
|
||||
{/* Copyright */}
|
||||
<p className="text-sm text-slate-500 dark:text-slate-500">
|
||||
© LexiChain
|
||||
</p>
|
||||
|
||||
{/* Social Icons */}
|
||||
<div className="flex items-center gap-4">
|
||||
<SocialIcon
|
||||
icon={Twitter}
|
||||
href="https://twitter.com"
|
||||
label="Twitter"
|
||||
/>
|
||||
<SocialIcon
|
||||
icon={Linkedin}
|
||||
href="https://linkedin.com"
|
||||
label="LinkedIn"
|
||||
/>
|
||||
<SocialIcon
|
||||
icon={Github}
|
||||
href="https://github.com"
|
||||
label="GitHub"
|
||||
/>
|
||||
<SocialIcon
|
||||
icon={Mail}
|
||||
href="mailto:contact@lexichain.com"
|
||||
label="Email"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -1,902 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useRef, useMemo } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Sparkles,
|
||||
Rocket,
|
||||
Lock,
|
||||
Check,
|
||||
Zap,
|
||||
Link2,
|
||||
FileText,
|
||||
MessageSquare,
|
||||
Shield,
|
||||
TrendingUp,
|
||||
Bell,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { SignedIn, SignedOut } from "@clerk/nextjs";
|
||||
|
||||
// Ripple Effect Component
|
||||
function BackgroundRipple() {
|
||||
return (
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<svg
|
||||
className="absolute inset-0 w-full h-full"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="ripple-gradient-1"
|
||||
x1="0%"
|
||||
y1="0%"
|
||||
x2="100%"
|
||||
y2="100%"
|
||||
>
|
||||
<stop offset="0%" stopColor="rgb(59, 130, 246)" stopOpacity="0.3" />
|
||||
<stop
|
||||
offset="50%"
|
||||
stopColor="rgb(139, 92, 246)"
|
||||
stopOpacity="0.2"
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stopColor="rgb(20, 184, 166)"
|
||||
stopOpacity="0.1"
|
||||
/>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="ripple-gradient-2"
|
||||
x1="100%"
|
||||
y1="0%"
|
||||
x2="0%"
|
||||
y2="100%"
|
||||
>
|
||||
<stop offset="0%" stopColor="rgb(139, 92, 246)" stopOpacity="0.3" />
|
||||
<stop
|
||||
offset="50%"
|
||||
stopColor="rgb(59, 130, 246)"
|
||||
stopOpacity="0.2"
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stopColor="rgb(20, 184, 166)"
|
||||
stopOpacity="0.1"
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
{/* First set of ripples */}
|
||||
<circle
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
r="0"
|
||||
fill="none"
|
||||
stroke="url(#ripple-gradient-1)"
|
||||
strokeWidth="2"
|
||||
opacity="0"
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
from="0"
|
||||
to="800"
|
||||
dur="8s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0;0.5;0.3;0"
|
||||
dur="8s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
r="0"
|
||||
fill="none"
|
||||
stroke="url(#ripple-gradient-2)"
|
||||
strokeWidth="2"
|
||||
opacity="0"
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
from="0"
|
||||
to="800"
|
||||
dur="8s"
|
||||
begin="2s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0;0.4;0.2;0"
|
||||
dur="8s"
|
||||
begin="2s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
r="0"
|
||||
fill="none"
|
||||
stroke="url(#ripple-gradient-1)"
|
||||
strokeWidth="3"
|
||||
opacity="0"
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
from="0"
|
||||
to="800"
|
||||
dur="8s"
|
||||
begin="4s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0;0.6;0.4;0"
|
||||
dur="8s"
|
||||
begin="4s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
r="0"
|
||||
fill="none"
|
||||
stroke="url(#ripple-gradient-2)"
|
||||
strokeWidth="2"
|
||||
opacity="0"
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
from="0"
|
||||
to="800"
|
||||
dur="8s"
|
||||
begin="6s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0;0.5;0.3;0"
|
||||
dur="8s"
|
||||
begin="6s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
{/* Additional slower ripples for depth */}
|
||||
<circle
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
r="0"
|
||||
fill="none"
|
||||
stroke="url(#ripple-gradient-1)"
|
||||
strokeWidth="4"
|
||||
opacity="0"
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
from="0"
|
||||
to="1000"
|
||||
dur="12s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0;0.3;0.15;0"
|
||||
dur="12s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
r="0"
|
||||
fill="none"
|
||||
stroke="url(#ripple-gradient-2)"
|
||||
strokeWidth="3"
|
||||
opacity="0"
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
from="0"
|
||||
to="1000"
|
||||
dur="12s"
|
||||
begin="4s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0;0.25;0.12;0"
|
||||
dur="12s"
|
||||
begin="4s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Floating Orb Component
|
||||
function FloatingOrb({
|
||||
size,
|
||||
color,
|
||||
delay,
|
||||
duration,
|
||||
left,
|
||||
top,
|
||||
}: {
|
||||
size: number;
|
||||
color: string;
|
||||
delay: number;
|
||||
duration: number;
|
||||
left: string;
|
||||
top: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="absolute rounded-full blur-3xl pointer-events-none"
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
backgroundColor: color,
|
||||
left,
|
||||
top,
|
||||
animation: `float-slow ${duration}s ease-in-out infinite`,
|
||||
animationDelay: `${delay}s`,
|
||||
opacity: 0.4,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Particle Component
|
||||
function Particle({
|
||||
delay,
|
||||
left,
|
||||
size,
|
||||
duration,
|
||||
}: {
|
||||
delay: number;
|
||||
left: string;
|
||||
size: number;
|
||||
duration: number;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="absolute rounded-full bg-blue-500/30 dark:bg-blue-400/30 pointer-events-none"
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
left,
|
||||
bottom: "-10px",
|
||||
animation: `particle-float ${duration}s ease-in-out infinite`,
|
||||
animationDelay: `${delay}s`,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Mockup Card Component
|
||||
function MockupCard({
|
||||
icon: Icon,
|
||||
title,
|
||||
value,
|
||||
trend,
|
||||
delay,
|
||||
}: {
|
||||
icon: React.ElementType;
|
||||
title: string;
|
||||
value: string;
|
||||
trend: string;
|
||||
delay: number;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="glass rounded-xl p-4 hover-lift cursor-pointer"
|
||||
style={{
|
||||
animation: `slide-up 0.6s ease-out forwards`,
|
||||
animationDelay: `${delay}s`,
|
||||
opacity: 0,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 rounded-lg bg-blue-500/10 dark:bg-blue-500/20">
|
||||
<Icon className="w-5 h-5 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{title}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-end justify-between">
|
||||
<span className="text-2xl font-bold text-slate-800 dark:text-slate-200">
|
||||
{value}
|
||||
</span>
|
||||
<span className="text-xs text-emerald-500 font-medium">{trend}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Chat Message Component
|
||||
function ChatMessage({
|
||||
message,
|
||||
isAI,
|
||||
delay,
|
||||
}: {
|
||||
message: string;
|
||||
isAI: boolean;
|
||||
delay: number;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`flex ${isAI ? "justify-start" : "justify-end"} mb-3`}
|
||||
style={{
|
||||
animation: `slide-up 0.4s ease-out forwards`,
|
||||
animationDelay: `${delay}s`,
|
||||
opacity: 0,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`max-w-[80%] px-4 py-2 rounded-2xl text-sm ${
|
||||
isAI
|
||||
? "bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 rounded-tl-sm"
|
||||
: "bg-blue-600 text-white rounded-tr-sm"
|
||||
}`}
|
||||
>
|
||||
{message}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Hero() {
|
||||
const [isLoaded] = useState(true);
|
||||
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
|
||||
const heroRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const particles = useMemo(
|
||||
() => [
|
||||
{ left: "8%", size: 3, duration: 9 },
|
||||
{ left: "18%", size: 4, duration: 10 },
|
||||
{ left: "28%", size: 2, duration: 8 },
|
||||
{ left: "38%", size: 5, duration: 11 },
|
||||
{ left: "48%", size: 3, duration: 9 },
|
||||
{ left: "58%", size: 4, duration: 10 },
|
||||
{ left: "68%", size: 2, duration: 8 },
|
||||
{ left: "78%", size: 5, duration: 11 },
|
||||
{ left: "88%", size: 3, duration: 9 },
|
||||
{ left: "12%", size: 4, duration: 10 },
|
||||
{ left: "22%", size: 2, duration: 8 },
|
||||
{ left: "32%", size: 5, duration: 11 },
|
||||
{ left: "52%", size: 3, duration: 9 },
|
||||
{ left: "72%", size: 4, duration: 10 },
|
||||
{ left: "92%", size: 2, duration: 8 },
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (!heroRef.current) return;
|
||||
const rect = heroRef.current.getBoundingClientRect();
|
||||
const x = (e.clientX - rect.left - rect.width / 2) / rect.width;
|
||||
const y = (e.clientY - rect.top - rect.height / 2) / rect.height;
|
||||
setMousePosition({ x: x * 10, y: y * 10 });
|
||||
};
|
||||
|
||||
const heroElement = heroRef.current;
|
||||
if (heroElement) {
|
||||
heroElement.addEventListener("mousemove", handleMouseMove);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (heroElement) {
|
||||
heroElement.removeEventListener("mousemove", handleMouseMove);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const trustBadges = [
|
||||
{ icon: Lock, label: "Bank-Level Security" },
|
||||
{ icon: Check, label: "GDPR Certified" },
|
||||
{ icon: Zap, label: "Real-Time AI" },
|
||||
{ icon: Link2, label: "Blockchain Verified" },
|
||||
];
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={heroRef}
|
||||
className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16 px-4 sm:px-6 lg:px-8"
|
||||
>
|
||||
{/* Background Layer 1 - Animated Gradient Mesh */}
|
||||
<div className="absolute inset-0 gradient-bg-mesh animate-gradient-shift" />
|
||||
|
||||
{/* Background Layer 2 - Ripple Effect */}
|
||||
<BackgroundRipple />
|
||||
|
||||
{/* Background Layer 3 - Grid Pattern */}
|
||||
<div
|
||||
className="absolute inset-0 grid-pattern"
|
||||
style={{
|
||||
maskImage:
|
||||
"radial-gradient(ellipse at center, black 0%, transparent 70%)",
|
||||
WebkitMaskImage:
|
||||
"radial-gradient(ellipse at center, black 0%, transparent 70%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Background Layer 4 - Floating Orbs */}
|
||||
<FloatingOrb
|
||||
size={200}
|
||||
color="rgba(59, 130, 246, 0.3)"
|
||||
delay={0}
|
||||
duration={8}
|
||||
left="10%"
|
||||
top="20%"
|
||||
/>
|
||||
<FloatingOrb
|
||||
size={150}
|
||||
color="rgba(139, 92, 246, 0.3)"
|
||||
delay={2}
|
||||
duration={10}
|
||||
left="70%"
|
||||
top="15%"
|
||||
/>
|
||||
<FloatingOrb
|
||||
size={180}
|
||||
color="rgba(20, 184, 166, 0.3)"
|
||||
delay={1}
|
||||
duration={9}
|
||||
left="80%"
|
||||
top="60%"
|
||||
/>
|
||||
<FloatingOrb
|
||||
size={120}
|
||||
color="rgba(59, 130, 246, 0.25)"
|
||||
delay={3}
|
||||
duration={7}
|
||||
left="15%"
|
||||
top="70%"
|
||||
/>
|
||||
<FloatingOrb
|
||||
size={100}
|
||||
color="rgba(139, 92, 246, 0.2)"
|
||||
delay={4}
|
||||
duration={11}
|
||||
left="50%"
|
||||
top="80%"
|
||||
/>
|
||||
|
||||
{/* Background Layer 5 - Spotlight Effect */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-30 dark:opacity-20"
|
||||
style={{
|
||||
background: `radial-gradient(600px circle at ${50 + mousePosition.x}% ${50 + mousePosition.y}%, rgba(59, 130, 246, 0.15), transparent 40%)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Particles */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
{particles.map((particle, i) => (
|
||||
<Particle
|
||||
key={`${particle.left}-${particle.size}-${i}`}
|
||||
delay={i * 0.5}
|
||||
left={particle.left}
|
||||
size={particle.size}
|
||||
duration={particle.duration}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 max-w-7xl mx-auto text-center">
|
||||
{/* Announcement Badge */}
|
||||
<div
|
||||
className={`inline-flex items-center gap-2 px-4 py-2 mt-4 rounded-full glass mb-8 transition-all duration-700 ${
|
||||
isLoaded ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4"
|
||||
}`}
|
||||
>
|
||||
<Sparkles className="w-4 h-4 text-blue-600 dark:text-blue-400 animate-spin-slow" />
|
||||
<span className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
Powered by Ai + Blockchain Integration
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Main Headline */}
|
||||
<h1
|
||||
className={`text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black leading-[1.1] tracking-tight max-w-6xl mx-auto transition-all duration-700 delay-100 ${
|
||||
isLoaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
|
||||
}`}
|
||||
>
|
||||
<span className="block text-slate-900 dark:text-white">
|
||||
Transform Your Contracts
|
||||
</span>
|
||||
<span className="block mt-2 gradient-text">
|
||||
Into Actionable Intelligence
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
{/* Subheadline */}
|
||||
<p
|
||||
className={`mt-6 text-lg md:text-xl lg:text-2xl text-slate-600 dark:text-slate-400 max-w-3xl mx-auto leading-relaxed transition-all duration-700 delay-200 ${
|
||||
isLoaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
|
||||
}`}
|
||||
>
|
||||
AI-Powered contract analysis meets blockchain verification. The only
|
||||
platform that truly understands your banking and insurance documents.
|
||||
<span className="text-blue-600 dark:text-blue-400 font-medium">
|
||||
{" "}
|
||||
Secure, transparent, instant.
|
||||
</span>
|
||||
</p>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div
|
||||
className={`flex flex-wrap items-center justify-center gap-4 mt-10 transition-all duration-700 delay-300 ${
|
||||
isLoaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
|
||||
}`}
|
||||
>
|
||||
{/* Primary CTA */}
|
||||
<SignedOut>
|
||||
<Button
|
||||
asChild
|
||||
className="
|
||||
group relative px-12 py-5
|
||||
text-lg md:text-xl font-semibold
|
||||
text-white rounded-2xl
|
||||
overflow-hidden
|
||||
bg-gradient-to-r
|
||||
from-[hsl(var(--primary))]
|
||||
via-[hsl(var(--accent))]
|
||||
to-[hsl(var(--secondary))]
|
||||
shadow-lg shadow-blue-500/20
|
||||
transition-all duration-300 ease-out
|
||||
hover:scale-[1.04]
|
||||
hover:shadow-xl hover:shadow-blue-500/40
|
||||
active:scale-[0.98]
|
||||
"
|
||||
>
|
||||
<Link href="/sign-in">
|
||||
{/* Glow background layer */}
|
||||
<div
|
||||
className="
|
||||
absolute inset-0
|
||||
opacity-0 group-hover:opacity-100
|
||||
transition-opacity duration-500
|
||||
bg-gradient-to-r
|
||||
from-blue-400/20
|
||||
via-purple-400/20
|
||||
to-teal-400/20
|
||||
blur-xl
|
||||
"
|
||||
/>
|
||||
|
||||
{/* Animated gradient shift layer */}
|
||||
<div
|
||||
className="
|
||||
absolute inset-0
|
||||
bg-[length:200%_200%]
|
||||
animate-gradient-shift
|
||||
opacity-70
|
||||
mix-blend-overlay
|
||||
"
|
||||
/>
|
||||
|
||||
<span className="relative z-10 flex items-center gap-3">
|
||||
Get Started
|
||||
<Rocket
|
||||
className="
|
||||
w-6 h-6
|
||||
transition-transform duration-300
|
||||
group-hover:translate-x-1
|
||||
group-hover:-translate-y-1
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
</Link>
|
||||
</Button>
|
||||
</SignedOut>
|
||||
|
||||
<SignedIn>
|
||||
<Button
|
||||
asChild
|
||||
className="
|
||||
group relative px-12 py-5
|
||||
text-lg md:text-xl font-semibold
|
||||
text-white rounded-2xl
|
||||
overflow-hidden
|
||||
bg-gradient-to-r
|
||||
from-[hsl(var(--primary))]
|
||||
via-[hsl(var(--accent))]
|
||||
to-[hsl(var(--secondary))]
|
||||
shadow-lg shadow-blue-500/20
|
||||
transition-all duration-300 ease-out
|
||||
hover:scale-[1.04]
|
||||
hover:shadow-xl hover:shadow-blue-500/40
|
||||
active:scale-[0.98]
|
||||
"
|
||||
>
|
||||
<Link href="/dashboard">
|
||||
<div
|
||||
className="
|
||||
absolute inset-0
|
||||
opacity-0 group-hover:opacity-100
|
||||
transition-opacity duration-500
|
||||
bg-gradient-to-r
|
||||
from-blue-400/20
|
||||
via-purple-400/20
|
||||
to-teal-400/20
|
||||
blur-xl
|
||||
"
|
||||
/>
|
||||
<div
|
||||
className="
|
||||
absolute inset-0
|
||||
bg-[length:200%_200%]
|
||||
animate-gradient-shift
|
||||
opacity-70
|
||||
mix-blend-overlay
|
||||
"
|
||||
/>
|
||||
<span className="relative z-10 flex items-center gap-3">
|
||||
Go To Dashboard
|
||||
<Rocket
|
||||
className="
|
||||
w-6 h-6
|
||||
transition-transform duration-300
|
||||
group-hover:translate-x-1
|
||||
group-hover:-translate-y-1
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
</Link>
|
||||
</Button>
|
||||
</SignedIn>
|
||||
</div>
|
||||
|
||||
{/* Trust Indicators */}
|
||||
<div
|
||||
className={`flex flex-wrap items-center justify-center gap-3 mt-12 transition-all duration-700 delay-400 ${
|
||||
isLoaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
|
||||
}`}
|
||||
>
|
||||
{trustBadges.map((badge, index) => (
|
||||
<div
|
||||
key={badge.label}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-full glass hover-lift cursor-default"
|
||||
style={{
|
||||
animation: isLoaded
|
||||
? `slide-up 0.5s ease-out forwards`
|
||||
: "none",
|
||||
animationDelay: `${0.5 + index * 0.1}s`,
|
||||
opacity: 0,
|
||||
}}
|
||||
>
|
||||
<badge.icon className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||||
<span className="text-sm font-medium text-slate-700 dark:text-slate-300">
|
||||
{badge.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Hero Visual - Dashboard Mockup */}
|
||||
<div
|
||||
className={`mt-16 lg:mt-20 perspective-1000 transition-all duration-1000 delay-500 ${
|
||||
isLoaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-16"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="relative max-w-5xl mx-auto transform-3d"
|
||||
style={{
|
||||
transform: `rotateX(-5deg) rotateY(${mousePosition.x * 0.3}deg)`,
|
||||
transition: "transform 0.1s ease-out",
|
||||
}}
|
||||
>
|
||||
{/* Main Dashboard Container */}
|
||||
<div className="relative rounded-3xl overflow-hidden shadow-[0_60px_120px_rgba(0,0,0,0.25)] border border-slate-200/50 dark:border-slate-700/50">
|
||||
{/* Dashboard Header */}
|
||||
<div className="bg-slate-50 dark:bg-slate-900/90 backdrop-blur-xl px-6 py-4 border-b border-slate-200/50 dark:border-slate-700/50">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-red-400" />
|
||||
<div className="w-3 h-3 rounded-full bg-amber-400" />
|
||||
<div className="w-3 h-3 rounded-full bg-emerald-400" />
|
||||
</div>
|
||||
<div className="h-6 w-px bg-slate-300 dark:bg-slate-700" />
|
||||
<span className="text-sm font-medium text-slate-600 dark:text-slate-400">
|
||||
Dashboard
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-violet-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dashboard Content */}
|
||||
<div className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Left Column - Stats */}
|
||||
<div className="space-y-4">
|
||||
<MockupCard
|
||||
icon={FileText}
|
||||
title="Total Contracts"
|
||||
value="1,247"
|
||||
trend="+12%"
|
||||
delay={0.6}
|
||||
/>
|
||||
<MockupCard
|
||||
icon={Shield}
|
||||
title="Verified"
|
||||
value="98.5%"
|
||||
trend="+2.1%"
|
||||
delay={0.7}
|
||||
/>
|
||||
<MockupCard
|
||||
icon={TrendingUp}
|
||||
title="Processing"
|
||||
value="24ms"
|
||||
trend="-15%"
|
||||
delay={0.8}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Center Column - Chat Interface */}
|
||||
<div className="md:col-span-1 glass rounded-xl p-4 flex flex-col">
|
||||
<div className="flex items-center gap-2 mb-4 pb-3 border-b border-slate-200/50 dark:border-slate-700/50">
|
||||
<div className="p-2 rounded-lg bg-violet-500/10 dark:bg-violet-500/20">
|
||||
<MessageSquare className="w-4 h-4 text-violet-600 dark:text-violet-400" />
|
||||
</div>
|
||||
<span className="text-sm font-semibold text-slate-700 dark:text-slate-300">
|
||||
AI Assistant
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1 space-y-1">
|
||||
<ChatMessage
|
||||
message="What are the key clauses in Contract #4521?"
|
||||
isAI={false}
|
||||
delay={0.9}
|
||||
/>
|
||||
<ChatMessage
|
||||
message="I've analyzed the contract. Key clauses include: Termination (Section 4.2), Liability Cap ($2M), and Governing Law (Delaware)."
|
||||
isAI={true}
|
||||
delay={1.1}
|
||||
/>
|
||||
<ChatMessage
|
||||
message="When does it expire?"
|
||||
isAI={false}
|
||||
delay={1.3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Notifications & Chart (Equal Heights) */}
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Notifications - 50% height */}
|
||||
<div
|
||||
className="glass rounded-xl p-4 flex-1"
|
||||
style={{
|
||||
animation: `slide-up 0.6s ease-out forwards`,
|
||||
animationDelay: `1s`,
|
||||
opacity: 0,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Bell className="w-4 h-4 text-amber-500" />
|
||||
<span className="text-sm font-semibold text-slate-700 dark:text-slate-300">
|
||||
Recent Activity
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
{
|
||||
text: "Contract #4521 verified",
|
||||
time: "2m ago",
|
||||
color: "bg-emerald-500",
|
||||
},
|
||||
{
|
||||
text: "New AI analysis complete",
|
||||
time: "5m ago",
|
||||
color: "bg-blue-500",
|
||||
},
|
||||
{
|
||||
text: "Blockchain timestamp added",
|
||||
time: "12m ago",
|
||||
color: "bg-violet-500",
|
||||
},
|
||||
].map((item, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-2 text-xs"
|
||||
>
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${item.color}`}
|
||||
/>
|
||||
<span className="text-slate-600 dark:text-slate-400 flex-1">
|
||||
{item.text}
|
||||
</span>
|
||||
<span className="text-slate-400 dark:text-slate-500">
|
||||
{item.time}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mini Chart - 50% height */}
|
||||
<div
|
||||
className="glass rounded-xl p-4 flex-1 flex flex-col"
|
||||
style={{
|
||||
animation: `slide-up 0.6s ease-out forwards`,
|
||||
animationDelay: `1.2s`,
|
||||
opacity: 0,
|
||||
}}
|
||||
>
|
||||
<span className="text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3 block">
|
||||
Processing Volume
|
||||
</span>
|
||||
<div className="flex items-end gap-1 flex-1">
|
||||
{[40, 65, 45, 80, 55, 90, 70, 85, 60, 95, 75, 88].map(
|
||||
(height, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-1 bg-gradient-to-t from-blue-500 to-violet-500 rounded-t-sm transition-all duration-300 hover:opacity-80"
|
||||
style={{
|
||||
height: `${height}%`,
|
||||
animation: `slide-up 0.4s ease-out forwards`,
|
||||
animationDelay: `${1.3 + i * 0.05}s`,
|
||||
opacity: 0,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Gradient Overlay */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-white/50 dark:from-slate-900/50 to-transparent pointer-events-none" />
|
||||
</div>
|
||||
|
||||
{/* Floating Elements Around Mockup */}
|
||||
<div
|
||||
className="absolute -top-4 -right-4 glass rounded-lg px-3 py-2 shadow-lg animate-float"
|
||||
style={{ animationDelay: "0.5s" }}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-emerald-500" />
|
||||
<span className="text-xs font-medium text-slate-700 dark:text-slate-300">
|
||||
Contract Verified!
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute -bottom-4 -left-4 glass rounded-lg px-3 py-2 shadow-lg animate-float-delayed">
|
||||
<div className="flex items-center gap-2">
|
||||
<FileText className="w-4 h-4 text-blue-500" />
|
||||
<span className="text-xs font-medium text-slate-700 dark:text-slate-300">
|
||||
+1 Document
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-1/2 -right-8 glass rounded-full p-3 shadow-lg animate-bounce-subtle">
|
||||
<Lock className="w-5 h-5 text-violet-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,154 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Navbar } from "@/components/views/Home/Navbar";
|
||||
import { Hero } from "@/components/views/Home/Hero";
|
||||
import { Features } from "@/components/views/Home/Features";
|
||||
import { HowItWorks } from "@/components/views/Home/HowItWorks";
|
||||
import { Stats } from "@/components/views/Home/Stats";
|
||||
import { Footer } from "@/components/views/Home/Footer";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Sparkles } from "lucide-react";
|
||||
|
||||
function LoadingScreen({ onComplete }: { onComplete: () => void }) {
|
||||
const [progress, setProgress] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setProgress((prev) => {
|
||||
if (prev >= 100) {
|
||||
clearInterval(interval);
|
||||
setTimeout(onComplete, 300);
|
||||
return 100;
|
||||
}
|
||||
return prev + Math.random() * 15;
|
||||
});
|
||||
}, 100);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [onComplete]);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[100] bg-slate-900 flex flex-col items-center justify-center">
|
||||
<div className="relative mb-8">
|
||||
<div className="absolute inset-0 bg-blue-500/30 blur-3xl rounded-full animate-pulse" />
|
||||
<Sparkles
|
||||
className="w-16 h-16 text-blue-500 relative z-10"
|
||||
style={{ animation: "spin-slow 3s linear infinite" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h1 className="text-2xl font-bold gradient-text mb-8">LexiChain</h1>
|
||||
|
||||
<div className="w-64 h-1 bg-slate-800 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-blue-500 via-violet-500 to-teal-500 rounded-full transition-all duration-200"
|
||||
style={{ width: `${Math.min(progress, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-sm text-slate-500">
|
||||
Loading amazing experience...
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ScrollProgressBar() {
|
||||
const [progress, setProgress] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const scrollTop = window.scrollY;
|
||||
const docHeight =
|
||||
document.documentElement.scrollHeight - window.innerHeight;
|
||||
const scrollPercent = (scrollTop / docHeight) * 100;
|
||||
setProgress(scrollPercent);
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="fixed top-0 left-0 right-0 z-[60] h-1 bg-transparent">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-blue-500 via-violet-500 to-teal-500 transition-all duration-100"
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BackToTop() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsVisible(window.scrollY > 500);
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
onClick={scrollToTop}
|
||||
className={`fixed bottom-8 right-8 z-50 w-12 h-12 rounded-full bg-gradient-to-r from-blue-600 to-violet-600 text-white shadow-lg hover:shadow-xl hover:scale-110 transition-all duration-300 flex items-center justify-center ${
|
||||
isVisible
|
||||
? "opacity-100 translate-y-0"
|
||||
: "opacity-0 translate-y-10 pointer-events-none"
|
||||
}`}
|
||||
aria-label="Back to top"
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M5 10l7-7m0 0l7 7m-7-7v18"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export function HomePage() {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const handleLoadingComplete = () => {
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingScreen onComplete={handleLoadingComplete} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen bg-background text-foreground overflow-x-hidden">
|
||||
<ScrollProgressBar />
|
||||
|
||||
<Navbar />
|
||||
|
||||
<main className="relative">
|
||||
<Hero />
|
||||
<Features />
|
||||
<HowItWorks />
|
||||
<Stats />
|
||||
<Footer />
|
||||
</main>
|
||||
|
||||
<BackToTop />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,529 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import {
|
||||
Upload,
|
||||
Cpu,
|
||||
MessageSquare,
|
||||
Shield,
|
||||
FileText,
|
||||
Check,
|
||||
Sparkles,
|
||||
Zap,
|
||||
Link,
|
||||
Target,
|
||||
} from "lucide-react";
|
||||
import { useScrollAnimation } from "@/hooks/useScrollAnimation";
|
||||
import { GlowingEffect } from "@/components/ui/glowing-effect";
|
||||
import { BackgroundBeams } from "@/components/ui/background-beams";
|
||||
|
||||
// Step Card Component with Glowing Effect
|
||||
interface StepCardProps {
|
||||
number: string;
|
||||
title: string;
|
||||
description: string;
|
||||
icon: React.ElementType;
|
||||
gradient: string;
|
||||
glowColor: string;
|
||||
delay: number;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
function StepCard({
|
||||
number,
|
||||
title,
|
||||
description,
|
||||
icon: Icon,
|
||||
gradient,
|
||||
glowColor,
|
||||
delay,
|
||||
children,
|
||||
}: StepCardProps) {
|
||||
const { ref, isVisible } = useScrollAnimation<HTMLDivElement>({
|
||||
threshold: 0.2,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="relative h-full"
|
||||
style={{
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible ? "translateY(0)" : "translateY(40px)",
|
||||
transition: `all 0.8s cubic-bezier(0.16, 1, 0.3, 1) ${delay}s`,
|
||||
}}
|
||||
>
|
||||
{/* Glowing Border Card */}
|
||||
<div className="relative h-full rounded-2xl border border-slate-200/80 dark:border-slate-700/80 p-2 hover:border-blue-500/40 dark:hover:border-blue-400/40 transition-colors duration-500 overflow-hidden">
|
||||
{/* Rainbow Glowing Effect */}
|
||||
<GlowingEffect
|
||||
spread={60}
|
||||
glow={true}
|
||||
disabled={false}
|
||||
proximity={100}
|
||||
inactiveZone={0.01}
|
||||
borderWidth={2}
|
||||
variant="default"
|
||||
/>
|
||||
|
||||
<div className="relative h-full flex flex-col rounded-xl p-6 bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl shadow-lg">
|
||||
{/* Modern Number Badge */}
|
||||
<div className="absolute -top-3 -right-3 z-10">
|
||||
<div className="relative">
|
||||
{/* Outer glow ring */}
|
||||
<div
|
||||
className={`absolute inset-0 ${gradient} rounded-2xl blur-xl opacity-60 animate-pulse-glow`}
|
||||
style={{ padding: "4px" }}
|
||||
/>
|
||||
|
||||
{/* Badge container */}
|
||||
<div className="relative">
|
||||
{/* Glass background */}
|
||||
<div className="absolute inset-0 bg-white/90 dark:bg-slate-900/90 backdrop-blur-xl rounded-2xl" />
|
||||
|
||||
{/* Gradient border */}
|
||||
<div
|
||||
className={`absolute inset-0 ${gradient} rounded-2xl p-[2px]`}
|
||||
>
|
||||
<div className="w-full h-full bg-white dark:bg-slate-900 rounded-2xl" />
|
||||
</div>
|
||||
|
||||
{/* Number */}
|
||||
<div className="relative px-4 py-2 flex items-center justify-center">
|
||||
<span
|
||||
className={`text-2xl font-black bg-gradient-to-br ${gradient.replace("bg-", "from-")} to-transparent bg-clip-text text-transparent`}
|
||||
>
|
||||
{number}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Icon with Glow */}
|
||||
<div className="relative inline-flex mb-6">
|
||||
<div
|
||||
className={`absolute inset-0 ${gradient} rounded-2xl blur-2xl opacity-40 animate-pulse-glow`}
|
||||
/>
|
||||
<div
|
||||
className={`relative w-20 h-20 rounded-2xl ${gradient} flex items-center justify-center shadow-2xl`}
|
||||
>
|
||||
<Icon className="w-10 h-10 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl md:text-2xl font-black text-slate-900 dark:text-white mb-3 leading-tight">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-sm md:text-base text-slate-600 dark:text-slate-400 leading-relaxed mb-4">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Animation Content */}
|
||||
{children && <div className="mt-auto">{children}</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Upload Animation
|
||||
function UploadAnimation() {
|
||||
const { ref, isVisible } = useScrollAnimation<HTMLDivElement>({
|
||||
threshold: 0.3,
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={ref} className="mt-4">
|
||||
{/* Drop Zone */}
|
||||
<div
|
||||
className="relative border-2 border-dashed border-blue-400/60 dark:border-blue-500/60 rounded-xl p-4 text-center overflow-hidden group hover:border-blue-500 dark:hover:border-blue-400 transition-colors"
|
||||
style={{
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible ? "scale(1)" : "scale(0.95)",
|
||||
transition: "all 0.5s ease-out 0.3s",
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-violet-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
|
||||
<Upload
|
||||
className="w-6 h-6 mx-auto text-blue-500 mb-2 relative z-10"
|
||||
style={{
|
||||
animation: isVisible
|
||||
? "bounce-subtle 2s ease-in-out infinite"
|
||||
: "none",
|
||||
}}
|
||||
/>
|
||||
<p className="text-xs text-slate-600 dark:text-slate-400 relative z-10">
|
||||
Drop files here
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* File List */}
|
||||
<div className="mt-3 space-y-2">
|
||||
{[
|
||||
{ name: "contract.pdf", size: "2.4 MB", progress: 100 },
|
||||
{ name: "agreement.jpg", size: "1.8 MB", progress: 75 },
|
||||
].map((file, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-2 p-2 rounded-lg bg-slate-50/80 dark:bg-slate-800/80 backdrop-blur-sm"
|
||||
style={{
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible ? "translateX(0)" : "translateX(-20px)",
|
||||
transition: `all 0.4s ease-out ${0.5 + i * 0.2}s`,
|
||||
}}
|
||||
>
|
||||
<FileText className="w-4 h-4 text-blue-500 flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs font-medium text-slate-700 dark:text-slate-300 truncate">
|
||||
{file.name}
|
||||
</p>
|
||||
<div className="h-1 bg-slate-200 dark:bg-slate-700 rounded-full mt-1 overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-blue-500 via-violet-500 to-teal-500 rounded-full transition-all duration-1000"
|
||||
style={{
|
||||
width: isVisible ? `${file.progress}%` : "0%",
|
||||
transitionDelay: `${0.8 + i * 0.2}s`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[10px] text-slate-500">{file.size}</span>
|
||||
{file.progress === 100 && (
|
||||
<Check className="w-3 h-3 text-emerald-500" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// AI Analysis Animation
|
||||
function AIAnalysisAnimation() {
|
||||
const { ref, isVisible } = useScrollAnimation<HTMLDivElement>({
|
||||
threshold: 0.3,
|
||||
});
|
||||
|
||||
const scanHeights = useMemo(
|
||||
() => [
|
||||
22, 38, 55, 40, 62, 30, 70, 45, 58, 35, 66, 28, 52, 48, 60, 33, 57, 41,
|
||||
64, 36,
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
const analysisPoints = [
|
||||
{ label: "Clauses", value: "47", icon: Target, color: "text-blue-500" },
|
||||
{ label: "Risk", value: "Low", icon: Shield, color: "text-emerald-500" },
|
||||
{ label: "Speed", value: "2.3s", icon: Zap, color: "text-amber-500" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div ref={ref} className="mt-4">
|
||||
{/* AI Brain */}
|
||||
<div className="flex justify-center mb-3">
|
||||
<div className="relative">
|
||||
<div
|
||||
className="absolute inset-0 bg-gradient-to-br from-violet-500 to-purple-600 rounded-2xl blur-xl opacity-60"
|
||||
style={{
|
||||
animation: isVisible
|
||||
? "pulse-glow 2s ease-in-out infinite"
|
||||
: "none",
|
||||
}}
|
||||
/>
|
||||
<div className="relative w-14 h-14 rounded-2xl bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center shadow-xl">
|
||||
<Cpu className="w-7 h-7 text-white" />
|
||||
</div>
|
||||
<div className="absolute -top-1 -right-1">
|
||||
<Sparkles className="w-4 h-4 text-amber-400 animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Analysis Points */}
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{analysisPoints.map((point, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="p-2 rounded-lg bg-slate-50/80 dark:bg-slate-800/80 backdrop-blur-sm text-center"
|
||||
style={{
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible ? "scale(1)" : "scale(0.9)",
|
||||
transition: `all 0.4s ease-out ${0.3 + i * 0.15}s`,
|
||||
}}
|
||||
>
|
||||
<point.icon className={`w-4 h-4 mx-auto mb-1 ${point.color}`} />
|
||||
<p className="text-xs font-bold text-slate-800 dark:text-slate-200">
|
||||
{point.value}
|
||||
</p>
|
||||
<p className="text-[10px] text-slate-500">{point.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Scanning Bar with Waveform */}
|
||||
<div className="mt-3 relative h-12 rounded-lg bg-slate-100/80 dark:bg-slate-800/80 overflow-hidden">
|
||||
{/* Background waveform */}
|
||||
<div className="absolute inset-0 flex items-center justify-center gap-0.5 opacity-20">
|
||||
{scanHeights.map((height, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="w-1 bg-slate-400 dark:bg-slate-600 rounded-full"
|
||||
style={{ height: `${height}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{/* Scanning line */}
|
||||
<div
|
||||
className="absolute top-0 bottom-0 w-0.5 bg-gradient-to-b from-violet-500 via-purple-500 to-transparent"
|
||||
style={{
|
||||
left: isVisible ? "100%" : "0%",
|
||||
transition: "left 2s ease-in-out 0.5s",
|
||||
boxShadow: "0 0 20px rgba(139, 92, 246, 0.6)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Chat Animation
|
||||
function ChatStepAnimation() {
|
||||
const { ref, isVisible } = useScrollAnimation<HTMLDivElement>({
|
||||
threshold: 0.3,
|
||||
});
|
||||
|
||||
const messages = [
|
||||
{ text: "Explain termination clause", isUser: true },
|
||||
{ text: "Section 12.3: 30 days notice...", isUser: false },
|
||||
];
|
||||
|
||||
return (
|
||||
<div ref={ref} className="mt-4">
|
||||
<div className="space-y-2">
|
||||
{messages.map((msg, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`flex ${msg.isUser ? "justify-end" : "justify-start"} items-end gap-2`}
|
||||
style={{
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible ? "translateY(0)" : "translateY(10px)",
|
||||
transition: `all 0.4s ease-out ${0.3 + i * 0.4}s`,
|
||||
}}
|
||||
>
|
||||
{!msg.isUser && (
|
||||
<div className="w-6 h-6 rounded-full bg-gradient-to-br from-teal-500 to-cyan-600 flex items-center justify-center flex-shrink-0 shadow-lg">
|
||||
<Sparkles className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={`max-w-[75%] px-3 py-2 rounded-xl text-xs shadow-sm ${
|
||||
msg.isUser
|
||||
? "bg-blue-600 text-white rounded-tr-sm"
|
||||
: "bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 rounded-tl-sm"
|
||||
}`}
|
||||
>
|
||||
{msg.text}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* RAG Indicator */}
|
||||
<div
|
||||
className="mt-3 flex items-center justify-center gap-1.5 text-[10px] text-slate-500"
|
||||
style={{
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transition: "opacity 0.4s ease-out 1.2s",
|
||||
}}
|
||||
>
|
||||
<div className="flex gap-0.5">
|
||||
{[0, 0.2, 0.4].map((delay, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="w-1.5 h-1.5 rounded-full bg-teal-500 animate-pulse"
|
||||
style={{ animationDelay: `${delay}s` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span>RAG Powered</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Blockchain Animation
|
||||
function BlockchainStepAnimation() {
|
||||
const { ref, isVisible } = useScrollAnimation<HTMLDivElement>({
|
||||
threshold: 0.3,
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={ref} className="mt-4">
|
||||
{/* Blockchain Chain */}
|
||||
<div className="flex items-center justify-center gap-2 mb-3">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div key={i} className="relative">
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-500 to-green-600 flex items-center justify-center shadow-lg"
|
||||
style={{
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible ? "scale(1)" : "scale(0.8)",
|
||||
transition: `all 0.4s ease-out ${0.2 + i * 0.2}s`,
|
||||
}}
|
||||
>
|
||||
<Link className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
{i < 2 && (
|
||||
<div
|
||||
className="absolute top-1/2 -right-2 w-4 h-0.5 bg-gradient-to-r from-emerald-500 to-green-500"
|
||||
style={{
|
||||
transform: isVisible ? "scaleX(1)" : "scaleX(0)",
|
||||
transformOrigin: "left",
|
||||
transition: `transform 0.3s ease-out ${0.4 + i * 0.2}s`,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Certificate */}
|
||||
<div
|
||||
className="rounded-xl p-3 bg-gradient-to-br from-emerald-50 to-green-50 dark:from-emerald-950/30 dark:to-green-950/30 border border-emerald-200/50 dark:border-emerald-700/50"
|
||||
style={{
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible ? "translateY(0)" : "translateY(10px)",
|
||||
transition: "all 0.5s ease-out 0.8s",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-emerald-500/20 flex items-center justify-center flex-shrink-0">
|
||||
<Shield className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs font-bold text-emerald-900 dark:text-emerald-100">
|
||||
Polygon Verified
|
||||
</p>
|
||||
<p className="text-[10px] font-mono text-emerald-700 dark:text-emerald-300 truncate">
|
||||
0x3f7a...9e2d
|
||||
</p>
|
||||
</div>
|
||||
<Check className="w-4 h-4 text-emerald-600 dark:text-emerald-400 flex-shrink-0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function HowItWorks() {
|
||||
const { ref: headerRef, isVisible: headerVisible } =
|
||||
useScrollAnimation<HTMLDivElement>();
|
||||
|
||||
const steps = [
|
||||
{
|
||||
number: "01",
|
||||
title: "Upload Contract",
|
||||
description:
|
||||
"PDF, images, or scans. Drag and drop or browse to upload instantly.",
|
||||
icon: Upload,
|
||||
gradient: "bg-gradient-to-br from-blue-500 to-blue-600",
|
||||
glowColor: "rgba(59, 130, 246, 0.5)",
|
||||
animation: <UploadAnimation />,
|
||||
},
|
||||
{
|
||||
number: "02",
|
||||
title: "AI Analysis",
|
||||
description:
|
||||
"AI extracts and analyzes every clause, term, and detail automatically.",
|
||||
icon: Cpu,
|
||||
gradient: "bg-gradient-to-br from-violet-500 to-purple-600",
|
||||
glowColor: "rgba(139, 92, 246, 0.5)",
|
||||
animation: <AIAnalysisAnimation />,
|
||||
},
|
||||
{
|
||||
number: "03",
|
||||
title: "Chat with AI",
|
||||
description:
|
||||
"Ask anything. Get instant, precise answers powered by RAG technology.",
|
||||
icon: MessageSquare,
|
||||
gradient: "bg-gradient-to-br from-teal-500 to-cyan-600",
|
||||
glowColor: "rgba(20, 184, 166, 0.5)",
|
||||
animation: <ChatStepAnimation />,
|
||||
},
|
||||
{
|
||||
number: "04",
|
||||
title: "Blockchain Proof",
|
||||
description:
|
||||
"Immutable certification on Polygon. Legally valid timestamped proof.",
|
||||
icon: Shield,
|
||||
gradient: "bg-gradient-to-br from-emerald-500 to-green-600",
|
||||
glowColor: "rgba(16, 185, 129, 0.5)",
|
||||
animation: <BlockchainStepAnimation />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section
|
||||
id="how-it-works"
|
||||
className="relative py-20 px-4 sm:px-6 lg:px-8 overflow-hidden"
|
||||
>
|
||||
{/* Background with Beams */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-slate-50 via-blue-50/30 to-slate-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
|
||||
<BackgroundBeams className="opacity-55" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-7xl mx-auto">
|
||||
{/* Section Header */}
|
||||
<div
|
||||
ref={headerRef}
|
||||
className="text-center mb-16"
|
||||
style={{
|
||||
opacity: headerVisible ? 1 : 0,
|
||||
transform: headerVisible ? "translateY(0)" : "translateY(30px)",
|
||||
transition: "all 0.8s cubic-bezier(0.16, 1, 0.3, 1)",
|
||||
}}
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-6 shadow-lg">
|
||||
<Target className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||||
<span className="text-sm font-bold text-slate-700 dark:text-slate-300">
|
||||
Simple Process
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl md:text-5xl font-black text-slate-900 dark:text-white mb-4 leading-tight">
|
||||
From Upload to Certification in{" "}
|
||||
<span className="gradient-text">4 Easy Steps</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
|
||||
Our intelligent system handles everything automatically
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Steps Grid - Better Alignment */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-4">
|
||||
{steps.map((step, index) => (
|
||||
<StepCard
|
||||
key={step.number}
|
||||
number={step.number}
|
||||
title={step.title}
|
||||
description={step.description}
|
||||
icon={step.icon}
|
||||
gradient={step.gradient}
|
||||
glowColor={step.glowColor}
|
||||
delay={index * 0.1}
|
||||
>
|
||||
{step.animation}
|
||||
</StepCard>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,244 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ModeToggle } from "@/components/ui/mode-toggle";
|
||||
import { X, ArrowRight } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
SignedIn,
|
||||
SignedOut,
|
||||
SignInButton,
|
||||
SignUpButton,
|
||||
UserButton,
|
||||
} from "@clerk/nextjs";
|
||||
|
||||
const navLinks = [
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "How It Works", href: "#how-it-works" },
|
||||
{ label: "About", href: "#stats" },
|
||||
{ label: "Contact", href: "#footer" },
|
||||
];
|
||||
|
||||
export function Navbar() {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [activeLink, setActiveLink] = useState("");
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 20);
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
const handleLinkClick = (
|
||||
e: React.MouseEvent<HTMLAnchorElement>,
|
||||
href: string,
|
||||
) => {
|
||||
e.preventDefault();
|
||||
const targetId = href.replace("#", "");
|
||||
const element = document.getElementById(targetId);
|
||||
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: "smooth" });
|
||||
setActiveLink(href);
|
||||
setIsMobileMenuOpen(false);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<nav
|
||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
|
||||
isScrolled ? "mt-0 px-0" : "mt-6 px-4"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`mx-auto transition-all duration-500 ${
|
||||
isScrolled ? "max-w-full" : "max-w-6xl"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`glass rounded-full px-4 md:px-8 py-3 md:py-4 transition-all duration-500 ${
|
||||
isScrolled
|
||||
? "rounded-none shadow-lg backdrop-blur-2xl"
|
||||
: "shadow-xl hover:shadow-2xl"
|
||||
} ${
|
||||
isScrolled
|
||||
? "border-b border-slate-200/50 dark:border-slate-700/50"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Logo */}
|
||||
<a
|
||||
href="#"
|
||||
className="flex items-center gap-3 group"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}}
|
||||
>
|
||||
<div className="relative flex items-center justify-center">
|
||||
<div className="absolute inset-0 rounded-xl bg-gradient-to-tr from-blue-500/10 via-purple-500/10 to-teal-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
<Image
|
||||
src="/LexiChain.png"
|
||||
alt="LexiChain Logo"
|
||||
width={34}
|
||||
height={34}
|
||||
className="relative z-10 w-8 h-8 object-contain transition-all duration-300 ease-out group-hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden lg:flex items-center gap-8">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
onClick={(e) => handleLinkClick(e, link.href)}
|
||||
className={`relative px-4 py-2 text-sm font-medium transition-all duration-200 rounded-full ${
|
||||
activeLink === link.href
|
||||
? "text-blue-600 dark:text-blue-400"
|
||||
: "text-slate-700 dark:text-slate-300 hover:bg-slate-100/50 dark:hover:bg-slate-800/50"
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
{activeLink === link.href && (
|
||||
<span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-1 h-1 bg-blue-600 dark:bg-blue-400 rounded-full" />
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right Section */}
|
||||
<div className="flex items-center gap-2 md:gap-3">
|
||||
<ModeToggle />
|
||||
{/* Global Clerk context usage */}
|
||||
<SignedOut>
|
||||
<SignInButton mode="modal">
|
||||
<Button variant="outline" className="hidden md:flex">
|
||||
Sign In
|
||||
</Button>
|
||||
</SignInButton>
|
||||
|
||||
<SignUpButton mode="modal">
|
||||
<Button className="hidden md:flex btn-gradient">
|
||||
Get Started
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
</SignUpButton>
|
||||
</SignedOut>
|
||||
<SignedIn>
|
||||
<Link href="/dashboard" className="hidden md:inline-block">
|
||||
<Button variant="outline">Dashboard</Button>
|
||||
</Link>
|
||||
|
||||
<UserButton afterSignOutUrl="/" />
|
||||
</SignedIn>
|
||||
|
||||
<Button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="lg:hidden"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
>
|
||||
<div className="relative w-6 h-6">
|
||||
<span
|
||||
className={`absolute left-0 w-6 h-0.5 bg-current transition-all ${isMobileMenuOpen ? "top-3 rotate-45" : "top-1"}`}
|
||||
/>
|
||||
<span
|
||||
className={`absolute left-0 top-3 w-6 h-0.5 bg-current transition-all ${isMobileMenuOpen ? "opacity-0" : "opacity-100"}`}
|
||||
/>
|
||||
<span
|
||||
className={`absolute left-0 w-6 h-0.5 bg-current transition-all ${isMobileMenuOpen ? "top-3 -rotate-45" : "top-5"}`}
|
||||
/>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<div
|
||||
className={`fixed inset-0 z-40 lg:hidden transition-all duration-500 ${isMobileMenuOpen ? "opacity-100 visible" : "opacity-0 invisible"}`}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={`absolute right-0 top-0 h-full w-80 max-w-full bg-white dark:bg-slate-900 shadow-2xl transition-transform duration-500 ${isMobileMenuOpen ? "translate-x-0" : "translate-x-full"}`}
|
||||
>
|
||||
<div className="p-6 pt-20">
|
||||
<Button
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="absolute top-6 right-6"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
</Button>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
onClick={(e) => handleLinkClick(e, link.href)}
|
||||
className="px-4 py-3 text-lg font-medium"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
|
||||
<div className="mt-4 border-t border-slate-200/70 dark:border-slate-700/70 pt-5 space-y-3">
|
||||
<SignedOut>
|
||||
<Link
|
||||
href="/sign-in"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<Button variant="outline" className="w-full">
|
||||
Sign In
|
||||
</Button>
|
||||
</Link>
|
||||
<Link
|
||||
href="/sign-up"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<Button className="w-full btn-gradient">
|
||||
Get Started
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
</Link>
|
||||
</SignedOut>
|
||||
|
||||
<SignedIn>
|
||||
<Link
|
||||
href="/dashboard"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="block"
|
||||
>
|
||||
<Button className="w-full">Go to Dashboard</Button>
|
||||
</Link>
|
||||
<div className="flex items-center justify-between rounded-xl border border-slate-200/70 dark:border-slate-700/70 px-3 py-2">
|
||||
<span className="text-sm text-slate-600 dark:text-slate-300">
|
||||
Account
|
||||
</span>
|
||||
<UserButton afterSignOutUrl="/" />
|
||||
</div>
|
||||
</SignedIn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,389 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import {
|
||||
Target,
|
||||
Zap,
|
||||
Shield,
|
||||
Lock,
|
||||
TrendingUp,
|
||||
Award,
|
||||
Check,
|
||||
} from "lucide-react";
|
||||
import { BentoGrid } from "@/components/ui/bento-grid";
|
||||
import { Spotlight } from "@/components/ui/spotlight-new";
|
||||
import { GlowingEffect } from "@/components/ui/glowing-effect";
|
||||
import { useScrollAnimation } from "@/hooks/useScrollAnimation";
|
||||
|
||||
// Count Up Hook
|
||||
function useCountUp(
|
||||
end: number,
|
||||
duration: number = 2000,
|
||||
startOnView: boolean = true,
|
||||
) {
|
||||
const [count, setCount] = useState(0);
|
||||
const [hasStarted, setHasStarted] = useState(!startOnView);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!startOnView) {
|
||||
return;
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting && !hasStarted) {
|
||||
setHasStarted(true);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.5 },
|
||||
);
|
||||
|
||||
if (ref.current) {
|
||||
observer.observe(ref.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [hasStarted, startOnView]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasStarted) return;
|
||||
|
||||
let startTime: number | null = null;
|
||||
let animationFrame: number;
|
||||
|
||||
const animate = (timestamp: number) => {
|
||||
if (!startTime) startTime = timestamp;
|
||||
const progress = Math.min((timestamp - startTime) / duration, 1);
|
||||
|
||||
// Ease out cubic
|
||||
const easeOut = 1 - Math.pow(1 - progress, 3);
|
||||
const nextValue = end * easeOut;
|
||||
const formattedValue = Number.isInteger(end)
|
||||
? Math.floor(nextValue)
|
||||
: Number(nextValue.toFixed(1));
|
||||
setCount(formattedValue);
|
||||
|
||||
if (progress < 1) {
|
||||
animationFrame = requestAnimationFrame(animate);
|
||||
}
|
||||
};
|
||||
|
||||
animationFrame = requestAnimationFrame(animate);
|
||||
|
||||
return () => {
|
||||
if (animationFrame) {
|
||||
cancelAnimationFrame(animationFrame);
|
||||
}
|
||||
};
|
||||
}, [hasStarted, end, duration]);
|
||||
|
||||
return { count, ref };
|
||||
}
|
||||
|
||||
// Stat Card Component
|
||||
interface StatCardProps {
|
||||
value: string;
|
||||
numericValue?: number;
|
||||
suffix?: string;
|
||||
prefix?: string;
|
||||
label: string;
|
||||
icon: React.ElementType;
|
||||
gradient: string;
|
||||
className?: string;
|
||||
cardColor?: string;
|
||||
glowColor?: string;
|
||||
spotlight?: {
|
||||
gradientFirst?: string;
|
||||
gradientSecond?: string;
|
||||
gradientThird?: string;
|
||||
duration?: number;
|
||||
xOffset?: number;
|
||||
};
|
||||
delay: number;
|
||||
additional?: string;
|
||||
isText?: boolean;
|
||||
}
|
||||
|
||||
function StatCard({
|
||||
value,
|
||||
numericValue,
|
||||
suffix = "",
|
||||
prefix = "",
|
||||
label,
|
||||
icon: Icon,
|
||||
gradient,
|
||||
className,
|
||||
cardColor,
|
||||
glowColor,
|
||||
spotlight,
|
||||
delay,
|
||||
additional,
|
||||
isText = false,
|
||||
}: StatCardProps) {
|
||||
const { ref: scrollRef, isVisible } = useScrollAnimation<HTMLDivElement>({
|
||||
threshold: 0.3,
|
||||
});
|
||||
const { count, ref: countRef } = useCountUp(numericValue || 0, 2000);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className={`relative ${className || ""}`}
|
||||
style={{
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible ? "translateY(0)" : "translateY(30px)",
|
||||
transition: `all 0.6s ease-out ${delay}s`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`relative h-full overflow-hidden rounded-2xl border border-border/60 p-7 shadow-[0_20px_60px_-30px_rgba(15,23,42,0.25)] backdrop-blur group ${cardColor || "bg-card/80"}`}
|
||||
>
|
||||
{/* Glowing Effect */}
|
||||
<GlowingEffect
|
||||
disabled={false}
|
||||
blur={40}
|
||||
spread={60}
|
||||
proximity={80}
|
||||
variant="default"
|
||||
borderWidth={2}
|
||||
className="opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-0">
|
||||
<Spotlight
|
||||
gradientFirst={spotlight?.gradientFirst}
|
||||
gradientSecond={spotlight?.gradientSecond}
|
||||
gradientThird={spotlight?.gradientThird}
|
||||
duration={spotlight?.duration ?? 8}
|
||||
xOffset={spotlight?.xOffset ?? 120}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Hover Glow */}
|
||||
{glowColor && (
|
||||
<div
|
||||
className={`absolute -inset-1 ${glowColor} opacity-0 group-hover:opacity-20 blur-2xl transition-opacity duration-500 rounded-2xl`}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Background Icon */}
|
||||
<div className="absolute -top-6 -right-6 opacity-10">
|
||||
<Icon className="w-28 h-28 text-foreground" />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 flex h-full flex-col justify-between">
|
||||
<div>
|
||||
{/* Icon */}
|
||||
<div
|
||||
className={`inline-flex items-center gap-2 rounded-full ${gradient} px-4 py-2 text-foreground shadow-lg`}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
<span className="text-xs font-semibold tracking-widest uppercase text-foreground/80">
|
||||
Performance
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Value */}
|
||||
<div ref={countRef} className="mt-6">
|
||||
{isText ? (
|
||||
<span className="text-4xl md:text-5xl lg:text-6xl font-semibold text-foreground tracking-tight">
|
||||
{value}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-4xl md:text-5xl lg:text-6xl font-semibold text-foreground tracking-tight">
|
||||
{prefix}
|
||||
{numericValue !== undefined && !Number.isInteger(numericValue)
|
||||
? count.toFixed(1)
|
||||
: numericValue !== undefined
|
||||
? count
|
||||
: value}
|
||||
{suffix}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Label */}
|
||||
<p className="mt-4 text-base md:text-lg font-medium text-foreground/90">
|
||||
{label}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Additional Info */}
|
||||
{additional && (
|
||||
<div className="flex items-center gap-2 pt-6">
|
||||
<TrendingUp className="w-4 h-4 text-emerald-500" />
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{additional}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Stats() {
|
||||
const { ref: headerRef, isVisible: headerVisible } =
|
||||
useScrollAnimation<HTMLDivElement>();
|
||||
|
||||
interface StatItem {
|
||||
value: string;
|
||||
numericValue?: number;
|
||||
suffix?: string;
|
||||
prefix?: string;
|
||||
label: string;
|
||||
icon: React.ElementType;
|
||||
gradient: string;
|
||||
className?: string;
|
||||
cardColor?: string;
|
||||
glowColor?: string;
|
||||
spotlight?: {
|
||||
gradientFirst?: string;
|
||||
gradientSecond?: string;
|
||||
gradientThird?: string;
|
||||
duration?: number;
|
||||
xOffset?: number;
|
||||
};
|
||||
additional?: string;
|
||||
isText?: boolean;
|
||||
}
|
||||
|
||||
const stats: StatItem[] = [
|
||||
{
|
||||
value: "99.9",
|
||||
numericValue: 99.9,
|
||||
suffix: "%",
|
||||
label: "OCR + AI Accuracy",
|
||||
icon: Target,
|
||||
gradient: "bg-gradient-to-r from-blue-500 to-indigo-600",
|
||||
cardColor:
|
||||
"bg-gradient-to-br from-blue-50/80 to-indigo-50/80 dark:from-blue-950/30 dark:to-indigo-950/30",
|
||||
glowColor: "bg-blue-500",
|
||||
className: "md:col-span-2",
|
||||
spotlight: {
|
||||
gradientFirst:
|
||||
"radial-gradient(68.54% 68.72% at 55.02% 31.46%, hsla(217, 91%, 60%, .28) 0, hsla(217, 91%, 60%, .12) 55%, hsla(217, 91%, 60%, 0) 80%)",
|
||||
gradientSecond:
|
||||
"radial-gradient(50% 50% at 50% 50%, hsla(258, 90%, 66%, .24) 0, hsla(258, 90%, 66%, .08) 80%, transparent 100%)",
|
||||
gradientThird:
|
||||
"radial-gradient(50% 50% at 50% 50%, hsla(217, 91%, 60%, .18) 0, hsla(217, 91%, 60%, .06) 80%, transparent 100%)",
|
||||
},
|
||||
additional: "+0.3% this month",
|
||||
},
|
||||
{
|
||||
value: "< 3",
|
||||
label: "Average AI Response Time",
|
||||
icon: Zap,
|
||||
gradient: "bg-gradient-to-r from-amber-500 to-orange-600",
|
||||
cardColor:
|
||||
"bg-gradient-to-br from-amber-50/80 to-orange-50/80 dark:from-amber-950/30 dark:to-orange-950/30",
|
||||
glowColor: "bg-amber-500",
|
||||
spotlight: {
|
||||
gradientFirst:
|
||||
"radial-gradient(68.54% 68.72% at 55.02% 31.46%, hsla(48, 96%, 53%, .28) 0, hsla(48, 96%, 53%, .12) 55%, hsla(48, 96%, 53%, 0) 80%)",
|
||||
},
|
||||
additional: "Average under 3 seconds",
|
||||
isText: true,
|
||||
},
|
||||
{
|
||||
value: "100",
|
||||
numericValue: 100,
|
||||
suffix: "%",
|
||||
label: "Blockchain Verified",
|
||||
icon: Shield,
|
||||
gradient: "bg-gradient-to-r from-emerald-500 to-teal-600",
|
||||
cardColor:
|
||||
"bg-gradient-to-br from-emerald-50/80 to-teal-50/80 dark:from-emerald-950/30 dark:to-teal-950/30",
|
||||
glowColor: "bg-emerald-500",
|
||||
spotlight: {
|
||||
gradientFirst:
|
||||
"radial-gradient(68.54% 68.72% at 55.02% 31.46%, hsla(158, 64%, 52%, .28) 0, hsla(158, 64%, 52%, .12) 55%, hsla(158, 64%, 52%, 0) 80%)",
|
||||
},
|
||||
additional: "All documents certified",
|
||||
},
|
||||
{
|
||||
value: "GDPR",
|
||||
label: "Full European Compliance",
|
||||
icon: Lock,
|
||||
gradient: "bg-gradient-to-r from-violet-500 to-purple-600",
|
||||
cardColor:
|
||||
"bg-gradient-to-br from-violet-50/80 to-purple-50/80 dark:from-violet-950/30 dark:to-purple-950/30",
|
||||
glowColor: "bg-violet-500",
|
||||
className: "md:col-span-2",
|
||||
spotlight: {
|
||||
gradientFirst:
|
||||
"radial-gradient(68.54% 68.72% at 55.02% 31.46%, hsla(258, 90%, 66%, .28) 0, hsla(258, 90%, 66%, .12) 55%, hsla(258, 90%, 66%, 0) 80%)",
|
||||
},
|
||||
additional: "ISO 27001 certified",
|
||||
isText: true,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section
|
||||
id="stats"
|
||||
className="relative py-16 px-4 sm:px-6 lg:px-8 overflow-hidden"
|
||||
>
|
||||
{/* Gradient Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-background via-muted/40 to-background">
|
||||
{/* Grid Pattern Overlay */}
|
||||
<div className="absolute inset-0 grid-pattern opacity-15" />
|
||||
|
||||
{/* Radial Glow */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,hsla(var(--primary),0.2)_0%,transparent_55%)]" />
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-7xl mx-auto">
|
||||
{/* Section Header */}
|
||||
<div
|
||||
ref={headerRef}
|
||||
className="text-center mb-14"
|
||||
style={{
|
||||
opacity: headerVisible ? 1 : 0,
|
||||
transform: headerVisible ? "translateY(0)" : "translateY(30px)",
|
||||
transition: "all 0.6s ease-out",
|
||||
}}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-card/60 px-4 py-1 text-xs uppercase tracking-[0.3em] text-muted-foreground">
|
||||
Platform Metrics
|
||||
</span>
|
||||
|
||||
<h2 className="mt-6 text-4xl md:text-5xl lg:text-6xl font-semibold text-foreground">
|
||||
Corporate-Grade Results, Measured.
|
||||
</h2>
|
||||
|
||||
<p className="mt-4 text-base md:text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Transparent performance benchmarks that prove reliability, accuracy,
|
||||
and compliance at enterprise scale.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<BentoGrid className="max-w-6xl gap-6 md:auto-rows-[16rem]">
|
||||
{stats.map((stat, index) => (
|
||||
<StatCard
|
||||
key={stat.label}
|
||||
value={stat.value}
|
||||
numericValue={stat.numericValue}
|
||||
suffix={stat.suffix || ""}
|
||||
prefix={stat.prefix || ""}
|
||||
label={stat.label}
|
||||
icon={stat.icon}
|
||||
gradient={stat.gradient}
|
||||
className={stat.className}
|
||||
cardColor={stat.cardColor}
|
||||
glowColor={stat.glowColor}
|
||||
spotlight={stat.spotlight}
|
||||
delay={index * 0.1}
|
||||
additional={stat.additional}
|
||||
isText={stat.isText}
|
||||
/>
|
||||
))}
|
||||
</BentoGrid>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,295 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
BarChart,
|
||||
Bar,
|
||||
Line,
|
||||
PieChart,
|
||||
Pie,
|
||||
Cell,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
|
||||
type TrendData = Array<{ date: string; count: number }>;
|
||||
type TypeData = Array<{ type: string; count: number }>;
|
||||
type StatusData = Array<{ name: string; count: number }>;
|
||||
|
||||
const PIE_COLORS: Record<string, string> = {
|
||||
Uploaded: "hsl(38 92% 50%)",
|
||||
Processing: "hsl(var(--primary))",
|
||||
Analyzed: "hsl(160 84% 39%)",
|
||||
Failed: "hsl(var(--destructive))",
|
||||
};
|
||||
|
||||
const FALLBACK_COLORS = [
|
||||
"hsl(var(--primary))",
|
||||
"hsl(var(--secondary))",
|
||||
"hsl(var(--accent))",
|
||||
"hsl(var(--destructive))",
|
||||
];
|
||||
|
||||
const tooltipStyle = {
|
||||
backgroundColor: "hsl(var(--background))",
|
||||
border: "1px solid hsl(var(--border))",
|
||||
borderRadius: "12px",
|
||||
color: "hsl(var(--foreground))",
|
||||
};
|
||||
|
||||
export function TrendChart({ data }: { data: TrendData }) {
|
||||
const trendData = useMemo(
|
||||
() =>
|
||||
data.map((point, index) => {
|
||||
const start = Math.max(0, index - 6);
|
||||
const window = data.slice(start, index + 1);
|
||||
const average =
|
||||
window.reduce((sum, item) => sum + item.count, 0) / window.length;
|
||||
|
||||
return {
|
||||
...point,
|
||||
movingAverage: Number(average.toFixed(2)),
|
||||
};
|
||||
}),
|
||||
[data],
|
||||
);
|
||||
|
||||
const xAxisInterval =
|
||||
trendData.length > 12 ? Math.floor(trendData.length / 8) : 0;
|
||||
|
||||
return (
|
||||
<div className="w-full h-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart
|
||||
data={trendData}
|
||||
margin={{ top: 10, right: 10, left: -24, bottom: 0 }}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="trendFill" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop
|
||||
offset="5%"
|
||||
stopColor="hsl(var(--primary))"
|
||||
stopOpacity={0.65}
|
||||
/>
|
||||
<stop
|
||||
offset="95%"
|
||||
stopColor="hsl(var(--primary))"
|
||||
stopOpacity={0.05}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
vertical={false}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
interval={xAxisInterval}
|
||||
tick={{ fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
/>
|
||||
<YAxis
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
allowDecimals={false}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={tooltipStyle}
|
||||
formatter={(
|
||||
value: number | string | undefined,
|
||||
name: string | number | undefined,
|
||||
) => {
|
||||
const numericValue = Number(value ?? 0);
|
||||
if (name === "movingAverage") {
|
||||
return [numericValue.toFixed(1), "7-day avg"];
|
||||
}
|
||||
|
||||
return [numericValue, "Uploads"];
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="count"
|
||||
stroke="hsl(var(--primary))"
|
||||
strokeWidth={2.25}
|
||||
fillOpacity={1}
|
||||
fill="url(#trendFill)"
|
||||
activeDot={{ r: 5 }}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="movingAverage"
|
||||
stroke="hsl(var(--secondary))"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ContractTypeChart({ data }: { data: TypeData }) {
|
||||
const sortedData = useMemo(
|
||||
() => [...data].sort((a, b) => b.count - a.count),
|
||||
[data],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="w-full h-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={sortedData}
|
||||
layout="vertical"
|
||||
margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
|
||||
>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
horizontal={false}
|
||||
/>
|
||||
<XAxis
|
||||
type="number"
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
allowDecimals={false}
|
||||
tick={{ fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
/>
|
||||
<YAxis
|
||||
type="category"
|
||||
dataKey="type"
|
||||
width={128}
|
||||
stroke="hsl(var(--muted-foreground))"
|
||||
tick={{ fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={tooltipStyle}
|
||||
cursor={false}
|
||||
formatter={(value: number | string | undefined) => [
|
||||
Number(value ?? 0),
|
||||
"Files",
|
||||
]}
|
||||
/>
|
||||
<Bar dataKey="count" radius={[0, 8, 8, 0]}>
|
||||
{sortedData.map((item, index) => {
|
||||
const opacity = Math.max(0.35, 0.95 - index * 0.12);
|
||||
return (
|
||||
<Cell
|
||||
key={`${item.type}-${index}`}
|
||||
fill={`hsl(var(--primary) / ${opacity})`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ContractStatusChart({ data }: { data: StatusData }) {
|
||||
const total = useMemo(
|
||||
() => data.reduce((sum, item) => sum + item.count, 0),
|
||||
[data],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col">
|
||||
<div className="h-[76%] w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={data}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={62}
|
||||
outerRadius={94}
|
||||
paddingAngle={3}
|
||||
dataKey="count"
|
||||
stroke="hsl(var(--background))"
|
||||
strokeWidth={2}
|
||||
>
|
||||
{data.map((entry, index) => (
|
||||
<Cell
|
||||
key={`${entry.name}-${index}`}
|
||||
fill={
|
||||
PIE_COLORS[entry.name] ??
|
||||
FALLBACK_COLORS[index % FALLBACK_COLORS.length]
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Pie>
|
||||
{total > 0 && (
|
||||
<text
|
||||
x="50%"
|
||||
y="50%"
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
>
|
||||
<tspan
|
||||
x="50%"
|
||||
y="50%"
|
||||
className="fill-foreground text-base font-semibold"
|
||||
>
|
||||
{total}
|
||||
</tspan>
|
||||
<tspan
|
||||
x="50%"
|
||||
dy="16"
|
||||
className="fill-muted-foreground text-[11px]"
|
||||
>
|
||||
Files
|
||||
</tspan>
|
||||
</text>
|
||||
)}
|
||||
<Tooltip
|
||||
contentStyle={tooltipStyle}
|
||||
formatter={(value: number | string | undefined) => [
|
||||
Number(value ?? 0),
|
||||
"Files",
|
||||
]}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 pt-2">
|
||||
{data.map((item, index) => {
|
||||
const color =
|
||||
PIE_COLORS[item.name] ??
|
||||
FALLBACK_COLORS[index % FALLBACK_COLORS.length];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${item.name}-legend`}
|
||||
className="flex items-center gap-2 rounded-lg border border-border/50 bg-muted/25 px-2.5 py-1.5"
|
||||
>
|
||||
<span
|
||||
className="h-2.5 w-2.5 rounded-full"
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
<span className="text-[11px] text-muted-foreground truncate">
|
||||
{item.name}
|
||||
</span>
|
||||
<span className="ml-auto text-[11px] font-medium text-foreground">
|
||||
{item.count}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,141 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { UploadDropzone } from "@uploadthing/react";
|
||||
import { AlertCircle, Sparkles, Wand2, ShieldCheck } from "lucide-react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { saveContract } from "@/lib/actions/contract.action";
|
||||
import { toast } from "sonner";
|
||||
import type { OurFileRouter } from "@/lib/upload";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export function ContractUploadForm({
|
||||
onUploadSuccess,
|
||||
}: {
|
||||
onUploadSuccess: () => void;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
|
||||
const emitNotificationRefresh = () => {
|
||||
window.dispatchEvent(new Event("notifications:refresh"));
|
||||
const channel = new BroadcastChannel("notifications-channel");
|
||||
channel.postMessage({ type: "notifications:refresh" });
|
||||
channel.close();
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="relative overflow-hidden border border-border/60 bg-[radial-gradient(circle_at_top_right,hsl(var(--primary)/0.14),transparent_45%),radial-gradient(circle_at_bottom_left,hsl(var(--secondary)/0.1),transparent_42%)] p-0">
|
||||
<div className="pointer-events-none absolute inset-0">
|
||||
<svg
|
||||
viewBox="0 0 480 220"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
className="absolute -right-8 top-0 h-40 w-80 opacity-45"
|
||||
>
|
||||
<path
|
||||
d="M8 176C76 140 114 68 198 68C260 68 286 116 346 116C394 116 430 88 474 74"
|
||||
stroke="hsl(var(--primary))"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M10 204C72 174 122 146 186 146C250 146 294 178 350 178C400 178 434 162 474 146"
|
||||
stroke="hsl(var(--secondary))"
|
||||
strokeWidth="2"
|
||||
strokeDasharray="5 7"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="relative p-6 md:p-8">
|
||||
<div className="mb-5 flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className="inline-flex items-center gap-1.5 rounded-full border border-primary/25 bg-primary/10 px-3 py-1 text-[11px] font-medium uppercase tracking-[0.14em] text-primary">
|
||||
<Sparkles className="h-3.5 w-3.5" />
|
||||
AI-Ready Intake
|
||||
</p>
|
||||
<h3 className="mt-3 text-xl font-semibold tracking-tight text-foreground">
|
||||
Upload contracts for structured extraction
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Clean intake pipeline for contract parsing, validation, and
|
||||
analysis.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 rounded-xl border border-border/60 bg-background/70 px-3 py-2 text-xs text-muted-foreground">
|
||||
<ShieldCheck className="h-4 w-4 text-emerald-500" />
|
||||
Theme-aware secure upload
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UploadDropzone<OurFileRouter, "contractUploader">
|
||||
endpoint="contractUploader"
|
||||
onClientUploadComplete={async (res) => {
|
||||
if (!res || res.length === 0) {
|
||||
toast.error("Upload failed");
|
||||
return;
|
||||
}
|
||||
|
||||
const file = res[0];
|
||||
|
||||
// Save to database
|
||||
const result = await saveContract({
|
||||
fileName: file.name,
|
||||
fileUrl: file.url,
|
||||
fileSize: file.size,
|
||||
mimeType: file.type,
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
toast.success("Contract uploaded successfully!");
|
||||
emitNotificationRefresh();
|
||||
onUploadSuccess();
|
||||
router.refresh();
|
||||
} else {
|
||||
toast.error(result.error || "Failed to save contract");
|
||||
}
|
||||
}}
|
||||
onUploadError={(error: Error) => {
|
||||
toast.error(`Upload failed: ${error.message}`);
|
||||
}}
|
||||
appearance={{
|
||||
container:
|
||||
"w-full cursor-pointer rounded-2xl border border-dashed border-primary/35 bg-background/85 px-4 py-8 backdrop-blur-sm transition-all duration-300 hover:border-primary/55 hover:bg-background ut-uploading:cursor-not-allowed",
|
||||
button:
|
||||
"bg-gradient-to-r from-primary to-accent text-white font-semibold px-6 py-3 rounded-xl transition-all duration-300 hover:from-primary/90 hover:to-accent/90 ut-uploading:cursor-not-allowed",
|
||||
label: "text-base md:text-lg text-foreground font-semibold",
|
||||
uploadIcon: "w-11 h-11 text-primary",
|
||||
allowedContent: "mt-2 text-sm text-muted-foreground",
|
||||
}}
|
||||
content={{
|
||||
label: "Upload Your Contract",
|
||||
allowedContent: "PDF, JPG, PNG, WEBP up to 8MB",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="mt-6 grid gap-3 border-t border-border/50 pt-5 sm:grid-cols-3">
|
||||
<div className="rounded-xl border border-border/50 bg-muted/25 px-3 py-2 text-xs text-muted-foreground">
|
||||
<div className="mb-1 font-semibold text-foreground">Formats</div>
|
||||
<div>PDF, JPG, PNG, WEBP</div>
|
||||
</div>
|
||||
<div className="rounded-xl border border-border/50 bg-muted/25 px-3 py-2 text-xs text-muted-foreground">
|
||||
<div className="mb-1 font-semibold text-foreground">Max Size</div>
|
||||
<div>8 MB</div>
|
||||
</div>
|
||||
<div className="rounded-xl border border-border/50 bg-muted/25 px-3 py-2 text-xs text-muted-foreground flex items-start gap-2">
|
||||
<AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0 text-accent" />
|
||||
<div>
|
||||
<div className="mb-1 font-semibold text-foreground">AI Flow</div>
|
||||
<div>Upload first, then click Analyze when ready</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 inline-flex items-center gap-2 rounded-lg border border-border/50 bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
|
||||
<Wand2 className="h-3.5 w-3.5 text-secondary" />
|
||||
Extraction quality improves as more contracts are analyzed.
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,47 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { FileText, Inbox } from "lucide-react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
|
||||
export function EmptyContractsState() {
|
||||
return (
|
||||
<Card className="border-dashed border-border hover:border-primary/50 transition-colors duration-300">
|
||||
<div className="p-12 md:p-16 flex flex-col items-center justify-center min-h-[300px]">
|
||||
<div className="mb-6 relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-primary/20 to-accent/20 rounded-full blur-3xl"></div>
|
||||
<div className="relative p-4 bg-background dark:bg-card rounded-full border border-border/50">
|
||||
<Inbox className="w-8 h-8 text-muted-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center max-w-md">
|
||||
<h3 className="text-xl font-semibold text-foreground mb-2">
|
||||
No contracts yet
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mb-1">
|
||||
Upload your first contract to get started.
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Our AI will automatically analyze and extract key information from
|
||||
your documents.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid grid-cols-3 gap-4 w-full text-center text-xs">
|
||||
<div className="p-3 rounded-lg bg-primary/5 dark:bg-primary/10 border border-primary/20">
|
||||
<FileText className="w-5 h-5 mx-auto mb-2 text-primary" />
|
||||
<span className="text-muted-foreground">Fast Upload</span>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-accent/5 dark:bg-accent/10 border border-accent/20">
|
||||
<FileText className="w-5 h-5 mx-auto mb-2 text-accent" />
|
||||
<span className="text-muted-foreground">AI Analysis</span>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-secondary/5 dark:bg-secondary/10 border border-secondary/20">
|
||||
<FileText className="w-5 h-5 mx-auto mb-2 text-secondary" />
|
||||
<span className="text-muted-foreground">Blockchain</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,617 +0,0 @@
|
||||
/**
|
||||
* Notification Bar Component
|
||||
*
|
||||
* Displays a beautiful notification bar/dropdown for showing:
|
||||
* - Unread notifications count
|
||||
* - Recent notifications from users' actions
|
||||
* - Deadline/renewal alerts
|
||||
* - Notification management (mark as read, delete)
|
||||
*
|
||||
* Features:
|
||||
* - Real-time badge count
|
||||
* - Smooth animations
|
||||
* - Theme support (dark/light mode)
|
||||
* - Responsive design
|
||||
* - Auto-refresh on intervals
|
||||
*/
|
||||
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback, useRef } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import {
|
||||
Bell,
|
||||
X,
|
||||
Check,
|
||||
CheckCheck,
|
||||
AlertCircle,
|
||||
AlertTriangle,
|
||||
CheckCircle2,
|
||||
Info,
|
||||
Clock,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import {
|
||||
getNotifications,
|
||||
getUnreadNotificationCount,
|
||||
markNotificationAsRead,
|
||||
markAllNotificationsAsRead,
|
||||
deleteNotification,
|
||||
checkDeadlineNotifications,
|
||||
} from "@/lib/actions/notification.action";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* Notification type interface matching the database structure
|
||||
*/
|
||||
interface Notification {
|
||||
id: string;
|
||||
type: "SUCCESS" | "WARNING" | "ERROR" | "INFO" | "DEADLINE";
|
||||
title: string;
|
||||
message: string;
|
||||
read: boolean;
|
||||
createdAt: string;
|
||||
icon?: string;
|
||||
actionType?: string;
|
||||
contractId?: string;
|
||||
contract?: {
|
||||
id: string;
|
||||
title: string;
|
||||
fileName: string;
|
||||
endDate?: string;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the appropriate icon component based on notification type
|
||||
*
|
||||
* Mapping:
|
||||
* - SUCCESS: CheckCircle2 (green)
|
||||
* - WARNING: AlertTriangle (yellow/orange)
|
||||
* - ERROR: AlertCircle (red)
|
||||
* - INFO: Info (blue)
|
||||
* - DEADLINE: Clock (critical/urgent)
|
||||
*/
|
||||
const getNotificationIcon = (type: Notification["type"], icon?: string) => {
|
||||
switch (type) {
|
||||
case "SUCCESS":
|
||||
return <CheckCircle2 className="h-5 w-5 text-green-500" />;
|
||||
case "WARNING":
|
||||
return <AlertTriangle className="h-5 w-5 text-yellow-500" />;
|
||||
case "ERROR":
|
||||
return <AlertCircle className="h-5 w-5 text-red-500" />;
|
||||
case "DEADLINE":
|
||||
return <Clock className="h-5 w-5 text-red-500" />;
|
||||
case "INFO":
|
||||
default:
|
||||
return <Info className="h-5 w-5 text-blue-500" />;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the color styling based on notification type
|
||||
* Used for background and border colors in the notification card
|
||||
*/
|
||||
const getNotificationColor = (type: Notification["type"]) => {
|
||||
switch (type) {
|
||||
case "SUCCESS":
|
||||
return "bg-green-50 border-green-200 dark:bg-green-950/30 dark:border-green-800";
|
||||
case "WARNING":
|
||||
return "bg-yellow-50 border-yellow-200 dark:bg-yellow-950/30 dark:border-yellow-800";
|
||||
case "ERROR":
|
||||
return "bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-800";
|
||||
case "DEADLINE":
|
||||
return "bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-800";
|
||||
case "INFO":
|
||||
default:
|
||||
return "bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-800";
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Single Notification Item Component
|
||||
*
|
||||
* Displays an individual notification with:
|
||||
* - Type-specific icon and coloring
|
||||
* - Title and message
|
||||
* - Timestamp
|
||||
* - Action buttons (mark as read, delete)
|
||||
* - Visual indicator for unread status
|
||||
*/
|
||||
const NotificationItem: React.FC<{
|
||||
notification: Notification;
|
||||
onRead: (id: string) => void;
|
||||
onDelete: (id: string) => void;
|
||||
}> = ({ notification, onRead, onDelete }) => {
|
||||
const formatTime = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffMins = Math.floor(diffMs / 60000);
|
||||
const diffHours = Math.floor(diffMs / 3600000);
|
||||
const diffDays = Math.floor(diffMs / 86400000);
|
||||
|
||||
if (diffMins < 1) return "just now";
|
||||
if (diffMins < 60) return `${diffMins}m ago`;
|
||||
if (diffHours < 24) return `${diffHours}h ago`;
|
||||
if (diffDays < 7) return `${diffDays}d ago`;
|
||||
|
||||
return date.toLocaleDateString();
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
"flex items-start gap-3 p-3 border transition-all hover:shadow-sm",
|
||||
getNotificationColor(notification.type),
|
||||
!notification.read && "ring-1 ring-primary/20",
|
||||
)}
|
||||
>
|
||||
{/* Notification Icon */}
|
||||
<div className="mt-1 flex-shrink-0">
|
||||
{getNotificationIcon(notification.type, notification.icon)}
|
||||
</div>
|
||||
|
||||
{/* Notification Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div>
|
||||
<p className="font-semibold text-sm text-foreground line-clamp-1">
|
||||
{notification.title}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground mt-1 line-clamp-2">
|
||||
{notification.message}
|
||||
</p>
|
||||
|
||||
{/* Contract link if available */}
|
||||
{notification.contract && (
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
📄 {notification.contract.title}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Unread dot indicator */}
|
||||
{!notification.read && (
|
||||
<div className="h-2 w-2 rounded-full bg-primary flex-shrink-0 mt-1" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Timestamp */}
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
{formatTime(notification.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
{!notification.read && (
|
||||
<button
|
||||
onClick={() => onRead(notification.id)}
|
||||
className="p-1.5 hover:bg-white/20 dark:hover:bg-white/10 rounded-md transition-colors"
|
||||
title="Mark as read"
|
||||
>
|
||||
<Check className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => onDelete(notification.id)}
|
||||
className="p-1.5 hover:bg-white/20 dark:hover:bg-white/10 rounded-md transition-colors"
|
||||
title="Delete notification"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Main Notification Bar Component
|
||||
*
|
||||
* Displays:
|
||||
* 1. Bell icon with unread count badge
|
||||
* 2. Dropdown showing recent notifications
|
||||
* 3. Ability to mark as read individually or all at once
|
||||
* 4. Action buttons and time formatting
|
||||
*/
|
||||
export default function NotificationBar() {
|
||||
// State management
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [notifications, setNotifications] = useState<Notification[]>([]);
|
||||
const [unreadCount, setUnreadCount] = useState(0);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const panelRef = useRef<HTMLDivElement>(null);
|
||||
const triggerRef = useRef<HTMLButtonElement>(null);
|
||||
const [panelPosition, setPanelPosition] = useState({ top: 70, left: 250 });
|
||||
const channelRef = useRef<BroadcastChannel | null>(null);
|
||||
|
||||
const updatePanelPosition = useCallback(() => {
|
||||
if (!triggerRef.current) return;
|
||||
|
||||
const rect = triggerRef.current.getBoundingClientRect();
|
||||
const panelWidth = 420;
|
||||
const panelHeightEstimate = panelRef.current?.offsetHeight ?? 240;
|
||||
const viewportPadding = 12;
|
||||
|
||||
const preferredLeft = rect.right + 14;
|
||||
const maxLeft = window.innerWidth - panelWidth - viewportPadding;
|
||||
const left = Math.max(viewportPadding, Math.min(preferredLeft, maxLeft));
|
||||
|
||||
// Keep the panel visually balanced around the bell row,
|
||||
// with a slightly higher anchor so it does not feel too low.
|
||||
const triggerCenterY = (rect.top + rect.bottom) / 2;
|
||||
const preferredTop = triggerCenterY - panelHeightEstimate * 0.42;
|
||||
const maxTop = window.innerHeight - viewportPadding - panelHeightEstimate;
|
||||
const top = Math.max(viewportPadding, Math.min(preferredTop, maxTop));
|
||||
|
||||
setPanelPosition({ top, left });
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Fetches unread notifications and deadline checks
|
||||
*
|
||||
* Steps:
|
||||
* 1. Check for upcoming deadlines and create notifications
|
||||
* 2. Fetch unread notifications from database
|
||||
* 3. Update state with fresh notification data
|
||||
* 4. Get unread count for badge display
|
||||
*/
|
||||
const fetchNotifications = useCallback(
|
||||
async (options?: { showLoader?: boolean }) => {
|
||||
const showLoader = options?.showLoader ?? false;
|
||||
|
||||
try {
|
||||
if (showLoader) {
|
||||
setIsLoading(true);
|
||||
}
|
||||
|
||||
// Fetch unread notifications
|
||||
const response = await getNotifications(15);
|
||||
if (response.success) {
|
||||
setNotifications(response.data || []);
|
||||
}
|
||||
|
||||
// Update unread count
|
||||
const countResponse = await getUnreadNotificationCount();
|
||||
if (countResponse.success) {
|
||||
setUnreadCount(countResponse.data?.count || 0);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching notifications:", error);
|
||||
} finally {
|
||||
if (showLoader) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const notifyRealtimeRefresh = useCallback(() => {
|
||||
void fetchNotifications({ showLoader: false });
|
||||
}, [fetchNotifications]);
|
||||
|
||||
const broadcastRealtimeRefresh = useCallback(() => {
|
||||
const event = new Event("notifications:refresh");
|
||||
window.dispatchEvent(event);
|
||||
channelRef.current?.postMessage({ type: "notifications:refresh" });
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setIsMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMounted) return;
|
||||
|
||||
// Cross-tab realtime notifications without polling loops.
|
||||
const channel = new BroadcastChannel("notifications-channel");
|
||||
channelRef.current = channel;
|
||||
|
||||
const onMessage = (message: MessageEvent<{ type?: string }>) => {
|
||||
if (message.data?.type === "notifications:refresh") {
|
||||
void fetchNotifications({ showLoader: false });
|
||||
}
|
||||
};
|
||||
|
||||
channel.addEventListener("message", onMessage);
|
||||
|
||||
return () => {
|
||||
channel.removeEventListener("message", onMessage);
|
||||
channel.close();
|
||||
channelRef.current = null;
|
||||
};
|
||||
}, [isMounted, fetchNotifications]);
|
||||
|
||||
/**
|
||||
* Handles marking a notification as read
|
||||
*
|
||||
* For non-deadline notifications: Automatically deletes after marking as read to save storage
|
||||
* For deadline notifications: Keeps them to show ongoing contract expiry info
|
||||
*
|
||||
* Updates local state immediately for optimistic UI
|
||||
* Then calls server action to persist to database
|
||||
*/
|
||||
const handleMarkAsRead = useCallback(
|
||||
async (notificationId: string) => {
|
||||
// Find the notification to check its type
|
||||
const notification = notifications.find((n) => n.id === notificationId);
|
||||
const isDeadlineNotification = notification?.type === "DEADLINE";
|
||||
|
||||
if (isDeadlineNotification) {
|
||||
// For DEADLINE notifications: just mark as read
|
||||
setNotifications((prev) =>
|
||||
prev.map((notif) =>
|
||||
notif.id === notificationId ? { ...notif, read: true } : notif,
|
||||
),
|
||||
);
|
||||
setUnreadCount((prev) => Math.max(0, prev - 1));
|
||||
|
||||
// Persist to database
|
||||
await markNotificationAsRead(notificationId);
|
||||
} else {
|
||||
// For non-deadline notifications: delete after marking read (auto-cleanup)
|
||||
// Optimistic update: remove from UI immediately
|
||||
setNotifications((prev) =>
|
||||
prev.filter((notif) => notif.id !== notificationId),
|
||||
);
|
||||
setUnreadCount((prev) => Math.max(0, prev - 1));
|
||||
|
||||
// Persist to database: delete the notification
|
||||
await deleteNotification(notificationId);
|
||||
}
|
||||
|
||||
broadcastRealtimeRefresh();
|
||||
},
|
||||
[notifications, broadcastRealtimeRefresh],
|
||||
);
|
||||
|
||||
/**
|
||||
* Handles marking all notifications as read
|
||||
*/
|
||||
const handleMarkAllAsRead = useCallback(async () => {
|
||||
setNotifications((prev) => prev.map((notif) => ({ ...notif, read: true })));
|
||||
setUnreadCount(0);
|
||||
|
||||
await markAllNotificationsAsRead();
|
||||
broadcastRealtimeRefresh();
|
||||
}, [broadcastRealtimeRefresh]);
|
||||
|
||||
/**
|
||||
* Handles deleting a notification
|
||||
*
|
||||
* Removes from UI immediately
|
||||
* Then calls server action to delete from database
|
||||
*/
|
||||
const handleDelete = useCallback(
|
||||
async (notificationId: string) => {
|
||||
// Optimistic update
|
||||
setNotifications((prev) =>
|
||||
prev.filter((notif) => notif.id !== notificationId),
|
||||
);
|
||||
|
||||
// Persist to database
|
||||
await deleteNotification(notificationId);
|
||||
|
||||
// Refresh unread count
|
||||
const countResponse = await getUnreadNotificationCount();
|
||||
if (countResponse.success) {
|
||||
setUnreadCount(countResponse.data?.count || 0);
|
||||
}
|
||||
broadcastRealtimeRefresh();
|
||||
},
|
||||
[broadcastRealtimeRefresh],
|
||||
);
|
||||
|
||||
/**
|
||||
* Effect: Close dropdown when clicking outside
|
||||
*/
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
const target = event.target as Node;
|
||||
const clickedTrigger = dropdownRef.current?.contains(target);
|
||||
const clickedPanel = panelRef.current?.contains(target);
|
||||
|
||||
if (!clickedTrigger && !clickedPanel) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isOpen) {
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
/**
|
||||
* Effect: Event-driven realtime updates (no intervals)
|
||||
*
|
||||
* Initial load: one fetch with loader
|
||||
* Refresh triggers:
|
||||
* - custom notifications:refresh event (same tab)
|
||||
* - BroadcastChannel message (cross-tab)
|
||||
* - focus/visibility return
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (!isMounted) return;
|
||||
|
||||
// Initial load
|
||||
void fetchNotifications({ showLoader: true });
|
||||
|
||||
// Deadline check runs once per mount (no loop)
|
||||
void checkDeadlineNotifications();
|
||||
|
||||
const focusRefresh = () => void fetchNotifications({ showLoader: false });
|
||||
const visibilityRefresh = () => {
|
||||
if (document.visibilityState === "visible") {
|
||||
void fetchNotifications({ showLoader: false });
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("focus", focusRefresh);
|
||||
document.addEventListener("visibilitychange", visibilityRefresh);
|
||||
window.addEventListener("notifications:refresh", notifyRealtimeRefresh);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("focus", focusRefresh);
|
||||
document.removeEventListener("visibilitychange", visibilityRefresh);
|
||||
window.removeEventListener(
|
||||
"notifications:refresh",
|
||||
notifyRealtimeRefresh,
|
||||
);
|
||||
};
|
||||
}, [isMounted, fetchNotifications, notifyRealtimeRefresh]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMounted) return;
|
||||
if (!isOpen) return;
|
||||
|
||||
updatePanelPosition();
|
||||
const handleResize = () => updatePanelPosition();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, [isMounted, isOpen, updatePanelPosition]);
|
||||
|
||||
if (!isMounted) {
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
className="relative rounded-xl border border-border/70 bg-background/95 p-2.5 text-foreground shadow-sm backdrop-blur"
|
||||
title="Notifications"
|
||||
aria-label="Notifications"
|
||||
type="button"
|
||||
>
|
||||
<Bell className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const toggleOpen = () => {
|
||||
if (!isOpen) {
|
||||
updatePanelPosition();
|
||||
void fetchNotifications({ showLoader: notifications.length === 0 });
|
||||
}
|
||||
setIsOpen((prev) => !prev);
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={dropdownRef} className="relative">
|
||||
{/* Bell Icon Button with Badge */}
|
||||
<button
|
||||
ref={triggerRef}
|
||||
onClick={toggleOpen}
|
||||
className="relative rounded-xl border border-border/70 bg-background/95 p-2.5 text-foreground shadow-sm backdrop-blur hover:bg-accent transition-colors"
|
||||
title="Notifications"
|
||||
type="button"
|
||||
>
|
||||
<Bell className="h-5 w-5" />
|
||||
|
||||
{/* Unread Badge */}
|
||||
{unreadCount > 0 && (
|
||||
<span className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center text-xs font-bold text-white bg-red-500 rounded-full animate-pulse">
|
||||
{unreadCount > 99 ? "99+" : unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Dropdown Panel */}
|
||||
{isOpen &&
|
||||
createPortal(
|
||||
<div
|
||||
ref={panelRef}
|
||||
style={{
|
||||
top: `${panelPosition.top}px`,
|
||||
left: `${panelPosition.left}px`,
|
||||
}}
|
||||
className="fixed w-[420px] max-w-[calc(100vw-2rem)] rounded-2xl border border-border/80 bg-background/98 shadow-2xl backdrop-blur z-[90] max-h-[70vh] flex flex-col overflow-hidden"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b border-border/70 bg-muted/30 px-4 py-3">
|
||||
<div>
|
||||
<h2 className="font-semibold text-foreground">Notifications</h2>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Renewal reminders and activity updates
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="p-1 hover:bg-accent rounded-md transition-colors"
|
||||
type="button"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Notifications List */}
|
||||
<div className="flex-1 overflow-y-auto bg-background">
|
||||
{isLoading ? (
|
||||
<div className="p-4 text-center text-muted-foreground">
|
||||
<p>Loading notifications...</p>
|
||||
</div>
|
||||
) : notifications.length === 0 ? (
|
||||
<div className="h-full flex flex-col items-center justify-center p-8 bg-gradient-to-b from-background to-muted/10">
|
||||
<div className="mb-4 p-3 rounded-full bg-muted/50">
|
||||
<Bell className="h-8 w-8 text-muted-foreground/40" />
|
||||
</div>
|
||||
<p className="font-medium text-foreground">All caught up!</p>
|
||||
<p className="text-sm text-muted-foreground text-center mt-2">
|
||||
No new notifications right now. Non-deadline notifications
|
||||
are auto-deleted after viewing.
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground text-center mt-3 px-2">
|
||||
Deadline reminders for upcoming contract expirations will
|
||||
appear here.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2 p-3">
|
||||
{notifications.map((notification) => (
|
||||
<NotificationItem
|
||||
key={notification.id}
|
||||
notification={notification}
|
||||
onRead={handleMarkAsRead}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer Actions */}
|
||||
{notifications.length > 0 && (
|
||||
<div className="border-t border-border/70 bg-muted/20 p-3 flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleMarkAllAsRead}
|
||||
className="flex-1"
|
||||
>
|
||||
<CheckCheck className="h-4 w-4 mr-2" />
|
||||
Mark all as read
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsOpen(false)}
|
||||
type="button"
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>,
|
||||
document.body,
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user