backup point before blockchain
This commit is contained in:
@@ -428,10 +428,15 @@ export async function analyzeContractAction(id: string) {
|
||||
});
|
||||
|
||||
// Analyze with AI
|
||||
const forceFallbackModelTest =
|
||||
process.env.AI_FORCE_FALLBACK_TEST === "1" ||
|
||||
String(process.env.AI_FORCE_FALLBACK_TEST).toLowerCase() === "true";
|
||||
|
||||
const aiResults = await AIService.analyzeContract(contract.fileUrl, {
|
||||
userId: contract.userId,
|
||||
fileName: contract.fileName,
|
||||
maxRetries: 3,
|
||||
forceFallbackModelTest,
|
||||
});
|
||||
|
||||
// Validate results
|
||||
|
||||
@@ -52,7 +52,11 @@ import {
|
||||
import { toast } from "sonner";
|
||||
import { ContractChatModal } from "@/features/contracts/components/modals/contract-chat-modal";
|
||||
import { ContractProofModal } from "@/features/contracts/components/modals/contract-proof-modal";
|
||||
import { stripMarkdown, exportToCSV, exportToPDF } from "@/features/contracts/utils/export.utils";
|
||||
import {
|
||||
stripMarkdown,
|
||||
exportToCSV,
|
||||
exportToPDF,
|
||||
} from "@/features/contracts/utils/export.utils";
|
||||
|
||||
interface Contract {
|
||||
id: string;
|
||||
@@ -1080,12 +1084,12 @@ export function ContractsList({ refreshTrigger }: { refreshTrigger?: number }) {
|
||||
title="Download contract"
|
||||
onClick={() => {
|
||||
if (contract.fileUrl) {
|
||||
const downloadUrl = contract.fileUrl + "?download=1";
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.href = downloadUrl;
|
||||
link.href = contract.fileUrl;
|
||||
link.download =
|
||||
contract.fileUrl.split("/").pop() || "contract";
|
||||
link.target = "_blank";
|
||||
link.rel = "noopener noreferrer";
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
@@ -1307,7 +1311,8 @@ export function ContractsList({ refreshTrigger }: { refreshTrigger?: number }) {
|
||||
</button>
|
||||
</div>
|
||||
<p className="mt-2 min-h-[62px] rounded-xl border border-white/10 dark:border-white/5 bg-background/50 px-3 py-2 font-medium text-foreground whitespace-pre-wrap break-words shadow-inner">
|
||||
{stripMarkdown(selectedContract.policyNumber) || "N/A"}
|
||||
{stripMarkdown(selectedContract.policyNumber) ||
|
||||
"N/A"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex min-h-[120px] flex-col rounded-2xl border border-border/30 bg-muted/20 px-3 py-3 backdrop-blur-md transition-all duration-300 hover:bg-muted/40 hover:shadow-lg hover:-translate-y-1 hover:border-primary/30">
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { useScrollAnimation } from "@/hooks/useScrollAnimation";
|
||||
import { Sparkles, Github, Twitter, Linkedin, Mail } from "lucide-react";
|
||||
import { Github, Twitter, Linkedin, Mail } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
|
||||
// Social Icon Component
|
||||
// ==========================================
|
||||
// Composant : Icône Sociale Premium
|
||||
// ==========================================
|
||||
function SocialIcon({
|
||||
icon: Icon,
|
||||
href,
|
||||
@@ -20,13 +22,20 @@ function SocialIcon({
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={label}
|
||||
className="text-slate-500 hover:text-slate-900 dark:hover:text-white transition-colors duration-200"
|
||||
className="group relative flex items-center justify-center w-10 h-10 rounded-full bg-slate-50 dark:bg-white/[0.03] border border-slate-200 dark:border-white/10 transition-all duration-300 hover:-translate-y-1 hover:border-primary/50 hover:shadow-[0_0_20px_rgba(var(--primary),0.2)]"
|
||||
>
|
||||
<Icon className="w-5 h-5" />
|
||||
{/* Lueur d'arrière-plan au survol */}
|
||||
<div className="absolute inset-0 rounded-full bg-primary/10 opacity-0 group-hover:opacity-100 blur-md transition-opacity duration-300" />
|
||||
|
||||
{/* Icône */}
|
||||
<Icon className="w-4 h-4 text-slate-500 dark:text-slate-400 group-hover:text-primary relative z-10 transition-colors duration-300" />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// Composant Principal : Footer
|
||||
// ==========================================
|
||||
export function Footer() {
|
||||
const { ref, isVisible } = useScrollAnimation<HTMLElement>({
|
||||
threshold: 0.1,
|
||||
@@ -42,60 +51,66 @@ export function Footer() {
|
||||
<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"
|
||||
className="relative overflow-hidden bg-background pt-20 pb-12 px-4 sm:px-6 lg:px-8"
|
||||
>
|
||||
{/* Effet Wow 1 : Ligne de démarcation en dégradé */}
|
||||
<div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-foreground/20 dark:via-foreground/15 to-transparent" />
|
||||
|
||||
{/* Effet Wow 2 : Lueur d'ambiance à la base de la page */}
|
||||
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[800px] h-[300px] bg-[radial-gradient(ellipse_at_bottom,hsla(var(--primary),0.15)_0%,transparent_60%)] pointer-events-none" />
|
||||
|
||||
<div
|
||||
className="max-w-7xl mx-auto"
|
||||
className="relative z-10 max-w-7xl mx-auto"
|
||||
style={{
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible ? "translateY(0)" : "translateY(20px)",
|
||||
transition: "all 0.6s ease-out",
|
||||
transform: isVisible ? "translateY(0)" : "translateY(30px)",
|
||||
transition: "all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1)",
|
||||
}}
|
||||
>
|
||||
{/* 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="flex flex-col items-center space-y-10">
|
||||
{/* Logo & Nom de la marque avec Lueur */}
|
||||
<a href="#" className="inline-flex flex-col items-center gap-3 group">
|
||||
<div className="relative">
|
||||
{/* Lueur sous le logo */}
|
||||
<div className="absolute inset-0 bg-primary/20 blur-xl rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
<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
|
||||
"
|
||||
width={56}
|
||||
height={56}
|
||||
className="relative z-10 w-14 h-14 object-contain transition-transform duration-500 ease-out group-hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xl font-bold tracking-tight text-foreground/90 group-hover:text-foreground transition-colors duration-300">
|
||||
LexiChain
|
||||
</span>
|
||||
</a>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<nav className="flex items-center gap-8">
|
||||
{/* Liens de Navigation avec animation de soulignement */}
|
||||
<nav className="flex items-center gap-8 md:gap-12">
|
||||
{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"
|
||||
className="relative text-sm font-medium text-muted-foreground hover:text-foreground transition-colors duration-300 group py-1"
|
||||
>
|
||||
{link.label}
|
||||
{/* Ligne d'animation au survol */}
|
||||
<span className="absolute bottom-0 left-0 w-0 h-[2px] bg-primary transition-all duration-300 ease-out group-hover:w-full rounded-full" />
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="w-full max-w-4xl h-px bg-slate-200 dark:bg-slate-800" />
|
||||
{/* Séparateur minimaliste */}
|
||||
<div className="w-full max-w-md h-px bg-gradient-to-r from-transparent via-border to-transparent" />
|
||||
|
||||
{/* Bottom Row */}
|
||||
<div className="flex items-center gap-8">
|
||||
{/* Copyright */}
|
||||
<p className="text-sm text-slate-500 dark:text-slate-500">
|
||||
© LexiChain
|
||||
{/* Section Inférieure (Copyright & Réseaux) */}
|
||||
<div className="flex flex-col md:flex-row items-center justify-between w-full max-w-4xl gap-6">
|
||||
<p className="text-sm font-medium text-muted-foreground/60 flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-primary/80 animate-pulse" />
|
||||
© {new Date().getFullYear()} LexiChain. All rights reserved.
|
||||
</p>
|
||||
|
||||
{/* Social Icons */}
|
||||
<div className="flex items-center gap-4">
|
||||
<SocialIcon
|
||||
icon={Twitter}
|
||||
|
||||
@@ -1,21 +1,15 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import {
|
||||
Target,
|
||||
Zap,
|
||||
Shield,
|
||||
Lock,
|
||||
TrendingUp,
|
||||
Award,
|
||||
Check,
|
||||
} from "lucide-react";
|
||||
import { Target, Zap, Shield, Lock, TrendingUp } 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
|
||||
// ==========================================
|
||||
// Hooks (Kept your optimized hook)
|
||||
// ==========================================
|
||||
function useCountUp(
|
||||
end: number,
|
||||
duration: number = 2000,
|
||||
@@ -26,63 +20,44 @@ function useCountUp(
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!startOnView) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!startOnView) return;
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting && !hasStarted) {
|
||||
setHasStarted(true);
|
||||
}
|
||||
if (entry.isIntersecting && !hasStarted) setHasStarted(true);
|
||||
},
|
||||
{ threshold: 0.5 },
|
||||
);
|
||||
|
||||
if (ref.current) {
|
||||
observer.observe(ref.current);
|
||||
}
|
||||
|
||||
if (ref.current) observer.observe(ref.current);
|
||||
return () => observer.disconnect();
|
||||
}, [hasStarted, startOnView]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!hasStarted) return;
|
||||
|
||||
if (!hasStarted || end === 0) 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 easeOut = 1 - Math.pow(1 - progress, 4); // Smoother cubic out
|
||||
const nextValue = end * easeOut;
|
||||
const formattedValue = Number.isInteger(end)
|
||||
? Math.floor(nextValue)
|
||||
: Number(nextValue.toFixed(1));
|
||||
setCount(formattedValue);
|
||||
|
||||
if (progress < 1) {
|
||||
animationFrame = requestAnimationFrame(animate);
|
||||
}
|
||||
setCount(
|
||||
Number.isInteger(end)
|
||||
? Math.floor(nextValue)
|
||||
: Number(nextValue.toFixed(1)),
|
||||
);
|
||||
if (progress < 1) animationFrame = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
animationFrame = requestAnimationFrame(animate);
|
||||
|
||||
return () => {
|
||||
if (animationFrame) {
|
||||
cancelAnimationFrame(animationFrame);
|
||||
}
|
||||
};
|
||||
return () => cancelAnimationFrame(animationFrame);
|
||||
}, [hasStarted, end, duration]);
|
||||
|
||||
return { count, ref };
|
||||
}
|
||||
|
||||
// Stat Card Component
|
||||
interface StatCardProps {
|
||||
// ==========================================
|
||||
// Types
|
||||
// ==========================================
|
||||
interface StatItem {
|
||||
value: string;
|
||||
numericValue?: number;
|
||||
suffix?: string;
|
||||
@@ -91,7 +66,6 @@ interface StatCardProps {
|
||||
icon: React.ElementType;
|
||||
gradient: string;
|
||||
className?: string;
|
||||
cardColor?: string;
|
||||
glowColor?: string;
|
||||
spotlight?: {
|
||||
gradientFirst?: string;
|
||||
@@ -100,11 +74,13 @@ interface StatCardProps {
|
||||
duration?: number;
|
||||
xOffset?: number;
|
||||
};
|
||||
delay: number;
|
||||
additional?: string;
|
||||
isText?: boolean;
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// High-Impact Stat Card
|
||||
// ==========================================
|
||||
function StatCard({
|
||||
value,
|
||||
numericValue,
|
||||
@@ -114,143 +90,130 @@ function StatCard({
|
||||
icon: Icon,
|
||||
gradient,
|
||||
className,
|
||||
cardColor,
|
||||
glowColor,
|
||||
spotlight,
|
||||
delay,
|
||||
additional,
|
||||
isText = false,
|
||||
}: StatCardProps) {
|
||||
}: StatItem & { delay: number }) {
|
||||
const { ref: scrollRef, isVisible } = useScrollAnimation<HTMLDivElement>({
|
||||
threshold: 0.3,
|
||||
});
|
||||
const { count, ref: countRef } = useCountUp(numericValue || 0, 2000);
|
||||
const { count, ref: countRef } = useCountUp(numericValue || 0, 2500);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={scrollRef}
|
||||
className={`relative ${className || ""}`}
|
||||
className={`relative group h-full ${className || ""}`}
|
||||
style={{
|
||||
opacity: isVisible ? 1 : 0,
|
||||
transform: isVisible ? "translateY(0)" : "translateY(30px)",
|
||||
transition: `all 0.6s ease-out ${delay}s`,
|
||||
transform: isVisible
|
||||
? "translateY(0) scale(1)"
|
||||
: "translateY(40px) scale(0.95)",
|
||||
transition: `all 0.8s cubic-bezier(0.22, 1, 0.36, 1) ${delay}s`,
|
||||
}}
|
||||
>
|
||||
{/* Outer Glow behind the card */}
|
||||
<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"
|
||||
/>
|
||||
className={`absolute -inset-0.5 rounded-3xl blur-2xl opacity-0 group-hover:opacity-40 transition-opacity duration-700 ${gradient}`}
|
||||
/>
|
||||
|
||||
<div className="absolute inset-0">
|
||||
<Spotlight
|
||||
gradientFirst={spotlight?.gradientFirst}
|
||||
gradientSecond={spotlight?.gradientSecond}
|
||||
gradientThird={spotlight?.gradientThird}
|
||||
duration={spotlight?.duration ?? 8}
|
||||
xOffset={spotlight?.xOffset ?? 120}
|
||||
{/* The Card Body:
|
||||
Gradient border wrapper + inner glassmorphism
|
||||
*/}
|
||||
<div className="relative h-full rounded-[22px] p-[1px] bg-gradient-to-b from-white/20 via-white/5 to-transparent overflow-hidden">
|
||||
<div className="relative h-full rounded-[21px] bg-card/60 dark:bg-black/40 backdrop-blur-2xl p-8 overflow-hidden shadow-2xl flex flex-col justify-between">
|
||||
<GlowingEffect
|
||||
blur={40}
|
||||
spread={60}
|
||||
proximity={80}
|
||||
variant="default"
|
||||
borderWidth={2}
|
||||
className="opacity-0 group-hover:opacity-100 transition-opacity duration-700"
|
||||
/>
|
||||
</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 className="absolute inset-0 pointer-events-none mix-blend-screen">
|
||||
<Spotlight
|
||||
{...spotlight}
|
||||
duration={spotlight?.duration ?? 8}
|
||||
xOffset={spotlight?.xOffset ?? 120}
|
||||
/>
|
||||
</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>
|
||||
{/* Majestic Background Icon */}
|
||||
<div className="absolute -top-10 -right-10 opacity-5 dark:opacity-10 transition-transform duration-1000 ease-out group-hover:scale-125 group-hover:-rotate-12 pointer-events-none">
|
||||
<Icon
|
||||
className={`w-56 h-56 ${glowColor?.replace("bg-", "text-")}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 flex flex-col h-full">
|
||||
<div>
|
||||
{/* Vibrant Badge */}
|
||||
<div
|
||||
className={`inline-flex items-center gap-2 rounded-full ${gradient} px-4 py-1.5 shadow-[0_0_20px_rgba(0,0,0,0.3)] ring-1 ring-white/20`}
|
||||
>
|
||||
<Icon className="w-4 h-4 text-white drop-shadow-md" />
|
||||
<span className="text-[11px] font-black tracking-widest uppercase text-white drop-shadow-md">
|
||||
Performance
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Massive Gradient Text */}
|
||||
<div ref={countRef} className="mt-8 mb-2">
|
||||
{isText ? (
|
||||
<span className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-b from-foreground to-foreground/50">
|
||||
{value}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-5xl md:text-6xl lg:text-7xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-b from-foreground to-foreground/50 flex items-baseline">
|
||||
{prefix}
|
||||
{numericValue !== undefined &&
|
||||
!Number.isInteger(numericValue)
|
||||
? count.toFixed(1)
|
||||
: numericValue !== undefined
|
||||
? count
|
||||
: value}
|
||||
<span className="text-4xl md:text-5xl text-foreground/40 ml-1 font-semibold">
|
||||
{suffix}
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-lg font-medium text-foreground/80 tracking-wide">
|
||||
{label}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Glowing Additional Info */}
|
||||
{additional && (
|
||||
<div className="flex items-center gap-3 pt-8 mt-auto">
|
||||
<div className="relative flex items-center justify-center w-8 h-8 rounded-full bg-emerald-500/20 ring-1 ring-emerald-500/40">
|
||||
<div className="absolute inset-0 rounded-full bg-emerald-500/20 blur-md animate-pulse" />
|
||||
<TrendingUp className="w-4 h-4 text-emerald-400 relative z-10" />
|
||||
</div>
|
||||
<span className="text-sm font-semibold text-foreground/70 tracking-wide uppercase">
|
||||
{additional}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// Main Component
|
||||
// ==========================================
|
||||
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",
|
||||
@@ -258,35 +221,27 @@ export function Stats() {
|
||||
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",
|
||||
gradient: "bg-gradient-to-r from-cyan-500 to-blue-600",
|
||||
glowColor: "bg-cyan-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%)",
|
||||
"radial-gradient(68% 68% at 55% 31%, hsla(217, 100%, 60%, 0.4) 0, transparent 80%)",
|
||||
},
|
||||
additional: "+0.3% this month",
|
||||
},
|
||||
{
|
||||
value: "< 3",
|
||||
label: "Average AI Response Time",
|
||||
value: "< 10",
|
||||
label: "Avg. 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",
|
||||
gradient: "bg-gradient-to-r from-orange-500 to-amber-600",
|
||||
glowColor: "bg-orange-500",
|
||||
isText: true,
|
||||
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%)",
|
||||
"radial-gradient(68% 68% at 55% 31%, hsla(30, 100%, 60%, 0.4) 0, transparent 80%)",
|
||||
},
|
||||
additional: "Average under 3 seconds",
|
||||
isText: true,
|
||||
additional: "Under 10 seconds",
|
||||
},
|
||||
{
|
||||
value: "100",
|
||||
@@ -294,93 +249,80 @@ export function Stats() {
|
||||
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",
|
||||
gradient: "bg-gradient-to-r from-emerald-400 to-teal-600",
|
||||
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%)",
|
||||
"radial-gradient(68% 68% at 55% 31%, hsla(150, 100%, 50%, 0.3) 0, transparent 80%)",
|
||||
},
|
||||
additional: "All documents certified",
|
||||
additional: "All docs certified",
|
||||
},
|
||||
{
|
||||
value: "GDPR",
|
||||
label: "Full European Compliance",
|
||||
label: "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",
|
||||
gradient: "bg-gradient-to-r from-fuchsia-500 to-purple-600",
|
||||
glowColor: "bg-fuchsia-500",
|
||||
className: "md:col-span-2",
|
||||
isText: true,
|
||||
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%)",
|
||||
"radial-gradient(68% 68% at 55% 31%, hsla(280, 100%, 60%, 0.4) 0, transparent 80%)",
|
||||
},
|
||||
additional: "ISO 27001 certified",
|
||||
isText: true,
|
||||
additional: "ISO 27001 Certified",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section
|
||||
id="stats"
|
||||
className="relative py-16 px-4 sm:px-6 lg:px-8 overflow-hidden"
|
||||
className="relative py-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-background"
|
||||
>
|
||||
{/* 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" />
|
||||
{/* Massive Aurora Background Effect
|
||||
This replaces the simple gradient with deep, colorful glowing orbs
|
||||
*/}
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[500px] opacity-30 dark:opacity-40 pointer-events-none blur-[120px] rounded-full mix-blend-screen bg-gradient-to-b from-primary/60 via-indigo-500/20 to-transparent" />
|
||||
<div className="absolute bottom-0 right-0 w-[600px] h-[600px] opacity-20 pointer-events-none blur-[150px] rounded-full mix-blend-screen bg-purple-600/40" />
|
||||
|
||||
{/* Radial Glow */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,hsla(var(--primary),0.2)_0%,transparent_55%)]" />
|
||||
</div>
|
||||
{/* Grid Pattern */}
|
||||
<div className="absolute inset-0 bg-[url('https://res.cloudinary.com/aceternity/image/upload/v1705626490/grid-pattern_q5ymq0.png')] opacity-[0.05] dark:opacity-[0.1]" />
|
||||
|
||||
<div className="relative max-w-7xl mx-auto">
|
||||
<div className="relative max-w-7xl mx-auto z-10">
|
||||
{/* Section Header */}
|
||||
<div
|
||||
ref={headerRef}
|
||||
className="text-center mb-14"
|
||||
className="flex flex-col items-center text-center mb-24"
|
||||
style={{
|
||||
opacity: headerVisible ? 1 : 0,
|
||||
transform: headerVisible ? "translateY(0)" : "translateY(30px)",
|
||||
transition: "all 0.6s ease-out",
|
||||
transition: "all 1s cubic-bezier(0.22, 1, 0.36, 1)",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
{/* Glowing Pill */}
|
||||
<div className="relative inline-flex mb-8">
|
||||
<div className="absolute inset-0 rounded-full blur-md bg-primary/30 animate-pulse" />
|
||||
<span className="relative inline-flex items-center gap-2 rounded-full border border-primary/50 bg-background/80 backdrop-blur-xl px-5 py-2 text-xs font-black uppercase tracking-[0.3em] text-primary shadow-[0_0_20px_rgba(var(--primary),0.2)]">
|
||||
Platform Metrics
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2 className="mt-6 text-4xl md:text-5xl lg:text-6xl font-semibold text-foreground">
|
||||
Corporate-Grade Results, Measured.
|
||||
<h2 className="text-5xl md:text-6xl lg:text-7xl font-bold text-foreground tracking-tighter leading-[1.1]">
|
||||
Corporate-Grade Results, <br className="hidden md:block" />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-purple-500 to-blue-500">
|
||||
Quantified.
|
||||
</span>
|
||||
</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,
|
||||
<p className="mt-8 text-xl text-foreground/60 max-w-2xl mx-auto font-medium">
|
||||
Transparent performance benchmarks proving reliability, accuracy,
|
||||
and compliance at enterprise scale.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<BentoGrid className="max-w-6xl gap-6 md:auto-rows-[16rem]">
|
||||
<BentoGrid className="max-w-6xl mx-auto gap-8 md:auto-rows-[22rem]">
|
||||
{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}
|
||||
/>
|
||||
<StatCard key={stat.label} {...stat} delay={index * 0.15} />
|
||||
))}
|
||||
</BentoGrid>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user