Components
Loading preview...
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.
@dhiluxui
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/cybernetic-team-showcase"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://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=400&auto=format&fit=crop', socials: { github: '#', linkedin: '#', twitter: '#' } },
{ name: 'Kenji Tanaka', title: 'Quantum Engineer', avatar: 'https://images.unsplash.com/photo-1557862921-37829c790f19?q=80&w=400&auto=format&fit=crop', socials: { github: '#', linkedin: '#', twitter: '#' } },
{ name: 'Aria Vance', title: 'AI Ethicist', avatar: 'https://images.unsplash.com/photo-1580894742494-019a8453969d?q=80&w=400&auto=format&fit=crop', socials: { github: '#', linkedin: '#', twitter: '#' } },
{ name: 'Jax Corrigan', title: 'Systems Operator', avatar: 'https://images.unsplash.com/photo-1590086782792-42dd2350140d?q=80&w=400&auto=format&fit=crop', socials: { github: '#', linkedin: '#', twitter: '#' } },
];
return (
<main>
<ThemeSwitcher setTheme={setTheme} />
<ModernTeamShowcase teamMembers={teamData} />
</main>
);
}