Glassmorphic People Card

1'use client';
2
3import React from 'react';
4import { CheckCircle2, MapPin, ExternalLink } from 'lucide-react';
5import { FaGithub, FaLinkedin, FaXTwitter, FaDribbble } from 'react-icons/fa6';
6
7export default function GlassmorphicPeopleCard() {
8  return (
9    <div className="w-full max-w-xs sm:max-w-sm rounded-3xl border border-slate-200/80 dark:border-slate-800/80 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl p-6 shadow-xl transition-all hover:border-blue-500/40 dark:hover:border-blue-500/40">
10      <div className="flex items-center gap-4">
11        <div className="relative shrink-0">
12          <div className="h-16 w-16 rounded-2xl bg-gradient-to-tr from-blue-600 via-indigo-600 to-purple-600 p-0.5 shadow-md">
13            <div className="h-full w-full rounded-[14px] bg-slate-100 dark:bg-slate-800 flex items-center justify-center font-bold text-xl text-blue-600 dark:text-blue-400">
14              SC
15            </div>
16          </div>
17          <span className="absolute -bottom-1 -right-1 h-4 w-4 rounded-full bg-emerald-500 ring-2 ring-white dark:ring-slate-900" title="Available for work" />
18        </div>
19
20        <div className="min-w-0 flex-1">
21          <div className="flex items-center gap-1.5">
22            <h3 className="text-base font-bold text-slate-900 dark:text-slate-100 truncate">Sophia Chen</h3>
23            <CheckCircle2 className="h-4 w-4 text-blue-500 shrink-0" />
24          </div>
25          <p className="text-xs font-semibold text-blue-600 dark:text-blue-400 truncate">Principal AI Architect</p>
26          <div className="flex items-center gap-1 text-[11px] text-slate-500 dark:text-slate-400 mt-0.5">
27            <MapPin className="h-3 w-3 shrink-0 text-slate-400" />
28            <span className="truncate">San Francisco, CA</span>
29          </div>
30        </div>
31      </div>
32
33      <p className="mt-4 text-xs text-slate-600 dark:text-slate-300 leading-relaxed">
34        Building next-gen spatial AI infrastructure &amp; distributed deep learning models. Ex-OpenAI, MIT CS.
35      </p>
36
37      <div className="mt-3 flex flex-wrap gap-1.5">
38        {['PyTorch', 'CUDA', 'LLMs', 'Next.js'].map((tag) => (
39          <span
40            key={tag}
41            className="rounded-full border border-slate-200 dark:border-slate-800 bg-slate-100/80 dark:bg-slate-800/60 px-2.5 py-0.5 text-[10px] font-medium text-slate-600 dark:text-slate-400"
42          >
43            {tag}
44          </span>
45        ))}
46      </div>
47
48      <div className="mt-5 flex items-center justify-between border-t border-slate-200/60 dark:border-slate-800/60 pt-4">
49        <span className="text-xs font-medium text-slate-500 dark:text-slate-400">Connect</span>
50        <div className="flex items-center gap-1.5">
51          <a
52            href="https://github.com"
53            target="_blank"
54            rel="noreferrer"
55            className="rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/80 p-2 text-slate-700 dark:text-slate-300 hover:border-blue-500 hover:text-blue-600 dark:hover:text-blue-400 transition"
56            aria-label="GitHub"
57          >
58            <FaGithub className="h-3.5 w-3.5" />
59          </a>
60          <a
61            href="https://linkedin.com"
62            target="_blank"
63            rel="noreferrer"
64            className="rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/80 p-2 text-slate-700 dark:text-slate-300 hover:border-blue-500 hover:text-blue-600 dark:hover:text-blue-400 transition"
65            aria-label="LinkedIn"
66          >
67            <FaLinkedin className="h-3.5 w-3.5" />
68          </a>
69          <a
70            href="https://twitter.com"
71            target="_blank"
72            rel="noreferrer"
73            className="rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/80 p-2 text-slate-700 dark:text-slate-300 hover:border-blue-500 hover:text-blue-600 dark:hover:text-blue-400 transition"
74            aria-label="Twitter"
75          >
76            <FaXTwitter className="h-3.5 w-3.5" />
77          </a>
78          <a
79            href="https://dribbble.com"
80            target="_blank"
81            rel="noreferrer"
82            className="rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/80 p-2 text-slate-700 dark:text-slate-300 hover:border-blue-500 hover:text-blue-600 dark:hover:text-blue-400 transition"
83            aria-label="Dribbble"
84          >
85            <FaDribbble className="h-3.5 w-3.5" />
86          </a>
87          <a
88            href="#"
89            className="rounded-xl bg-blue-600 hover:bg-blue-700 p-2 text-white transition shadow-xs ml-1"
90            aria-label="Website"
91          >
92            <ExternalLink className="h-3.5 w-3.5" />
93          </a>
94        </div>
95      </div>
96    </div>
97  );
98}