530 lines
18 KiB
TypeScript
530 lines
18 KiB
TypeScript
"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>
|
|
);
|
|
}
|