100 lines
3.6 KiB
TypeScript
100 lines
3.6 KiB
TypeScript
import React from 'react';
|
|
|
|
type IllustrationProps = {
|
|
className?: string;
|
|
};
|
|
|
|
export function PrivacyIllustration({ className = '' }: IllustrationProps) {
|
|
return (
|
|
<div>
|
|
{/* Floating cards */}
|
|
<div className="relative aspect-3/2 md:aspect-2/1">
|
|
{/* Back card */}
|
|
<div
|
|
className="
|
|
absolute top-0 left-0 right-10 bottom-10 rounded-2xl border border-border/80 bg-card/70
|
|
backdrop-blur-sm shadow-lg
|
|
transition-all duration-300
|
|
group-hover:-translate-y-1 group-hover:-rotate-2
|
|
"
|
|
>
|
|
<div className="flex items-center justify-between px-4 pt-3 text-xs text-muted-foreground">
|
|
<span>Session duration</span>
|
|
<span className="flex items-center gap-1">
|
|
3m 12s
|
|
<span className="text-[10px] text-blue-400">+8%</span>
|
|
</span>
|
|
</div>
|
|
|
|
{/* Simple line chart */}
|
|
<div className="mt-3 px-4">
|
|
<svg
|
|
viewBox="0 0 120 40"
|
|
className="h-16 w-full text-muted-foreground"
|
|
>
|
|
<path
|
|
d="M2 32 L22 18 L40 24 L60 10 L78 16 L96 8 L118 14"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
className="opacity-60"
|
|
/>
|
|
<circle cx="118" cy="14" r="2.5" className="fill-blue-400" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Front card */}
|
|
<div
|
|
className="
|
|
col
|
|
absolute top-10 left-4 right-0 bottom-0 rounded-2xl border border-border/80
|
|
bg-card shadow-xl
|
|
transition-all duration-300
|
|
group-hover:translate-y-1 group-hover:rotate-2
|
|
"
|
|
>
|
|
<div className="flex items-center justify-between px-4 pt-3 text-xs text-foreground">
|
|
<span>Anonymous visitors</span>
|
|
<span className="text-[10px] rounded-full bg-card px-2 py-0.5 text-muted-foreground">
|
|
No cookies
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-end justify-between px-4 pt-4 pb-3">
|
|
<div>
|
|
<p className="text-[11px] text-muted-foreground mb-1">
|
|
Active now
|
|
</p>
|
|
<p className="text-2xl font-semibold text-foreground">128</p>
|
|
</div>
|
|
<div className="space-y-1.5 text-[10px] text-muted-foreground">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-blue-400" />
|
|
<span>IP + UA hashed daily</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-blue-400" />
|
|
<span>No fingerprinting</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* "Sources" row */}
|
|
<div className="mt-auto flex gap-2 border-t border-border px-3 py-2.5 text-[11px]">
|
|
<div className="flex-1 rounded-xl bg-card/90 px-3 py-1.5 flex items-center justify-between">
|
|
<span className="text-muted-foreground">Direct</span>
|
|
<span className="text-foreground">42%</span>
|
|
</div>
|
|
<div className="flex-1 rounded-xl bg-card/90 px-3 py-1.5 flex items-center justify-between">
|
|
<span className="text-muted-foreground">Organic</span>
|
|
<span className="text-foreground">58%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|