Hover Overlay People Card

1'use client';
2
3import React from 'react';
4import { FaGithub, FaLinkedin, FaXTwitter, FaGlobe } from 'react-icons/fa6';
5import { ArrowUpRight } from 'lucide-react';
6
7export default function HoverOverlayPeopleCard() {
8  return (
9    <div className="group relative w-full max-w-xs sm:max-w-sm overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-xl transition-all duration-300">
10      <div className="h-28 w-full rounded-2xl bg-gradient-to-tr from-purple-600 via-pink-600 to-rose-500 relative overflow-hidden flex items-end p-4">
11        <div className="absolute inset-0 bg-black/10 group-hover:bg-black/0 transition-colors" />
12        <span className="relative z-10 text-[10px] font-bold uppercase tracking-widest text-white/90 bg-black/30 backdrop-blur-md px-2.5 py-1 rounded-full border border-white/20">
13          VP OF PRODUCT
14        </span>
15      </div>
16
17      <div className="relative -mt-10 px-2 flex items-end justify-between">
18        <div className="h-20 w-20 rounded-2xl border-4 ring-2 ring-blue-500/20 ring-offset-2 ring-offset-white dark:ring-offset-slate-900 border-white dark:border-slate-900 bg-gradient-to-tr from-indigo-500 to-purple-600 flex items-center justify-center font-black text-2xl text-white shadow-lg">
19          ER
20        </div>
21        <a
22          href="#"
23          className="flex h-10 w-10 items-center justify-center rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-600 transition shadow-xs"
24          aria-label="View Profile"
25        >
26          <ArrowUpRight className="h-4 w-4" />
27        </a>
28      </div>
29
30      <div className="mt-4">
31        <h3 className="text-lg font-extrabold text-slate-900 dark:text-slate-100">Elena Rostova</h3>
32        <p className="text-xs font-semibold text-purple-600 dark:text-purple-400">Head of Growth &amp; Strategy</p>
33        <p className="mt-2 text-xs text-slate-600 dark:text-slate-400 leading-relaxed">
34          Scaling cloud products from 0 to 10M+ active users. Passionate about developer UX and growth loops.
35        </p>
36      </div>
37
38      <div className="mt-5 pt-4 border-t border-slate-100 dark:border-slate-800/80 flex items-center justify-between">
39        <span className="text-xs font-semibold text-slate-400">Socials</span>
40        <div className="flex items-center gap-2">
41          <a
42            href="https://github.com"
43            target="_blank"
44            rel="noreferrer"
45            className="flex h-8 w-8 items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-purple-600 hover:text-white dark:hover:bg-purple-600 transition"
46            aria-label="GitHub"
47          >
48            <FaGithub className="h-3.5 w-3.5" />
49          </a>
50          <a
51            href="https://linkedin.com"
52            target="_blank"
53            rel="noreferrer"
54            className="flex h-8 w-8 items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-purple-600 hover:text-white dark:hover:bg-purple-600 transition"
55            aria-label="LinkedIn"
56          >
57            <FaLinkedin className="h-3.5 w-3.5" />
58          </a>
59          <a
60            href="https://twitter.com"
61            target="_blank"
62            rel="noreferrer"
63            className="flex h-8 w-8 items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-purple-600 hover:text-white dark:hover:bg-purple-600 transition"
64            aria-label="Twitter"
65          >
66            <FaXTwitter className="h-3.5 w-3.5" />
67          </a>
68          <a
69            href="https://example.com"
70            target="_blank"
71            rel="noreferrer"
72            className="flex h-8 w-8 items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-purple-600 hover:text-white dark:hover:bg-purple-600 transition"
73            aria-label="Website"
74          >
75            <FaGlobe className="h-3.5 w-3.5" />
76          </a>
77        </div>
78      </div>
79    </div>
80  );
81}