Cyber Telemetry People Card

1'use client';
2
3import React from 'react';
4import { Terminal, ShieldCheck } from 'lucide-react';
5import { FaGithub, FaLinkedin, FaXTwitter } from 'react-icons/fa6';
6
7export default function CyberTelemetryPeopleCard() {
8  return (
9    <div className="relative w-full max-w-xs sm:max-w-sm rounded-2xl border border-cyan-500/30 bg-slate-950 p-5 font-mono text-cyan-400 shadow-[0_0_25px_rgba(6,182,212,0.12)]">
10      <div className="flex items-center justify-between border-b border-cyan-500/20 pb-3 mb-4 text-[10px] tracking-wider text-cyan-500">
11        <span className="flex items-center gap-1.5">
12          <span className="h-2 w-2 rounded-full bg-cyan-400 animate-pulse" />
13          SYS // ONLINE
14        </span>
15        <span className="text-slate-500">ID: #8094-KV</span>
16      </div>
17
18      <div className="flex items-center gap-4">
19        <div className="relative shrink-0">
20          <div className="h-16 w-16 rounded-xl border border-cyan-500/40 bg-cyan-950/40 flex items-center justify-center font-bold text-2xl text-cyan-300 shadow-[inset_0_0_15px_rgba(6,182,212,0.2)]">
21            KV
22          </div>
23          <ShieldCheck className="absolute -bottom-1 -right-1 h-5 w-5 text-cyan-400 bg-slate-950 rounded-full p-0.5" />
24        </div>
25
26        <div className="min-w-0 flex-1">
27          <div className="text-xs font-semibold text-cyan-500 uppercase tracking-widest">[OPERATOR]</div>
28          <h3 className="text-base font-bold text-slate-100 tracking-tight truncate">Kaelen Vance</h3>
29          <p className="text-xs text-cyan-400 font-mono mt-0.5 truncate">Lead Security Engineer</p>
30        </div>
31      </div>
32
33      <div className="mt-4 rounded-xl border border-cyan-500/20 bg-slate-900/80 p-3 text-[11px] text-slate-300 space-y-1">
34        <div className="flex items-center justify-between text-[10px] text-slate-400">
35          <span>SPEC: Zero-Trust Protocols</span>
36          <span className="text-cyan-400 font-bold">100% SECURE</span>
37        </div>
38        <div className="h-1.5 w-full rounded-full bg-slate-800 overflow-hidden">
39          <div className="h-full w-4/5 rounded-full bg-cyan-400 shadow-[0_0_8px_#22d3ee]" />
40        </div>
41      </div>
42
43      <div className="mt-5 flex items-center justify-between gap-2 border-t border-cyan-500/20 pt-4">
44        <span className="text-[10px] text-slate-400 flex items-center gap-1">
45          <Terminal className="h-3 w-3 text-cyan-400" /> CONNECT
46        </span>
47        <div className="flex items-center gap-1.5 font-mono text-[11px]">
48          <a
49            href="https://github.com"
50            target="_blank"
51            rel="noreferrer"
52            className="rounded-lg border border-cyan-500/30 bg-cyan-950/30 px-2.5 py-1 text-cyan-300 hover:border-cyan-400 hover:bg-cyan-500/20 hover:text-white transition"
53          >
54            <FaGithub className="h-3.5 w-3.5" />
55          </a>
56          <a
57            href="https://linkedin.com"
58            target="_blank"
59            rel="noreferrer"
60            className="rounded-lg border border-cyan-500/30 bg-cyan-950/30 px-2.5 py-1 text-cyan-300 hover:border-cyan-400 hover:bg-cyan-500/20 hover:text-white transition"
61          >
62            <FaLinkedin className="h-3.5 w-3.5" />
63          </a>
64          <a
65            href="https://twitter.com"
66            target="_blank"
67            rel="noreferrer"
68            className="rounded-lg border border-cyan-500/30 bg-cyan-950/30 px-2.5 py-1 text-cyan-300 hover:border-cyan-400 hover:bg-cyan-500/20 hover:text-white transition"
69          >
70            <FaXTwitter className="h-3.5 w-3.5" />
71          </a>
72        </div>
73      </div>
74    </div>
75  );
76}