creative and interactive "Cybernetic Team Showcase" section. It displays your team members in a futuristic grid. When you hover over a card, a "cybernetic" scanning effect animates over their photo, and their social links appear with a glitchy animation.
"use client";
import React, { useState, useEffect } from "react";
import { Sun, Moon } from "lucide-react";
import ModernTeamShowcase from "@/components/ui/cybernetic-team-showcase";
// --- TYPE SAFETY ---
interface TeamMember {
name: string;
title: string;
avatar: string;
socials: Record<"github" | "linkedin" | "twitter", string>;
}
// --- THEMING & POLISHING DETAILS ---
const ThemeSwitcher = ({ setTheme }) => {
return (
<div className="fixed top-4 right-4 z-50">
<button
onClick={() => setTheme("light")}
className="p-2 bg-card rounded-l-md text-foreground border border-border"
>
<Sun />
</button>
<button
onClick={() => setTheme("dark")}
className="p-2 bg-card rounded-r-md text-foreground border border-border"
>
<Moon />
</button>
</div>
);
};
export default function DemoOne() {
const [theme, setTheme] = useState("dark");
// --- SSR & CLIENT-ONLY GUARDS ---
useEffect(() => {
// Guard against running on the server
if (typeof window !== "undefined") {
const root = window.document.documentElement;
root.classList.remove("light", "dark");
root.classList.add(theme);
}
}, [theme]);
// Team data is now strongly typed and defined separately.
const teamData: TeamMember[] = [
{
name: "Eva Rostova",
title: "Lead Architect",
avatar:
"https://cdn.21st.dev/assets/mirror/b2/b2733c5e9619cb247cb76083a10220c8c90ed7a7a59705ed409e856d1cb99d71.jpg",
socials: { github: "#", linkedin: "#", twitter: "#" },
},
{
name: "Kenji Tanaka",
title: "Quantum Engineer",
avatar:
"https://cdn.21st.dev/assets/mirror/db/db76da0d17c8068f20c02962581a4cc7cf9721733cb15721376fb29a486d0fbd.jpg",
socials: { github: "#", linkedin: "#", twitter: "#" },
},
{
name: "Aria Vance",
title: "AI Ethicist",
avatar:
"https://cdn.21st.dev/assets/localized/eb196d378acfeb336ffa5ecf64e935e83cc75f8b9223cd53f1232342d69cc115.jpg",
socials: { github: "#", linkedin: "#", twitter: "#" },
},
{
name: "Jax Corrigan",
title: "Systems Operator",
avatar:
"https://cdn.21st.dev/assets/mirror/dd/dd0c7c21753682f6161fba775a0015bd36dc3127a8562a3c3222dce6c43b34cd.jpg",
socials: { github: "#", linkedin: "#", twitter: "#" },
},
];
return (
<main>
<ThemeSwitcher setTheme={setTheme} />
<ModernTeamShowcase teamMembers={teamData} />
</main>
);
}