151 lines
6.6 KiB
JavaScript
151 lines
6.6 KiB
JavaScript
"use client"
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Badge } from '@/components/ui/badge'
|
|
|
|
const adminTeam = [
|
|
{ name: 'Chris Chrome', ext: '1000', image: '/chris.webp', discord: '@chrischrome', role: 'Head Admin' },
|
|
{ name: 'ashton', ext: '1007', image: '/ashton.webp', discord: '@ashtoncarlson', role: 'Head Admin' },
|
|
{ name: 'Cayden', ext: '1001', image: '/cayden.webp', discord: '@freepbx', role: 'Admin' },
|
|
{ name: 'Faux Lemons', ext: '1011', image: '/faux_lemons.webp', discord: '@faux_lemons', role: 'Admin' },
|
|
{ name: 'rocord', ext: '1010', image: '/rocord.webp', discord: '@rocord', role: 'Admin' },
|
|
{ name: 'Maddix', ext: '1005', image: '/maddix.webp', discord: '@maddix6859', role: 'Admin' },
|
|
{ name: 'Theliftoperator', ext: '1134', image: '/theliftoperator.webp', discord: '@theliftoperator', role: 'Admin' },
|
|
]
|
|
|
|
const modTeam = [
|
|
{ name: 'Vince', ext: '4001', image: '/vince.webp', discord: '@maybvince', role: 'Moderator' },
|
|
{ name: 'Nik', ext: '1008', image: '/nottimwakefield.webp', discord: '@nottimwakefield', role: 'Moderator' },
|
|
{ name: 'Ryan', ext: '1135', image: '/ryan.webp', discord: '@ryann_207', role: 'Moderator' },
|
|
]
|
|
|
|
function TeamMember({ name, ext, image, discord, role }) {
|
|
return (
|
|
<Card className="group relative bg-gray-950/50 text-white border-gray-800 transition-all duration-500 ease-out transform hover:-translate-y-2 hover:border-blue-500/50 hover:shadow-2xl hover:shadow-blue-500/10 overflow-hidden">
|
|
{/* Animated background */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
|
|
|
<CardHeader className="relative flex flex-row items-center gap-4 space-y-0 pb-4">
|
|
<div className="relative">
|
|
<Avatar className="h-16 w-16 border-2 border-gray-700 group-hover:border-blue-500/50 transition-all duration-300 group-hover:scale-105">
|
|
<AvatarImage src={image} alt={name} className="group-hover:scale-110 transition-transform duration-300" />
|
|
<AvatarFallback className="bg-gray-800 text-white text-lg font-semibold">
|
|
{name[0]}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<CardTitle className="text-white group-hover:text-blue-100 transition-colors duration-300 text-lg">
|
|
{name}
|
|
</CardTitle>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<Badge variant="outline" className="text-xs bg-gray-800/50 border-gray-600 text-gray-300">
|
|
{role}
|
|
</Badge>
|
|
</div>
|
|
<div className="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-300 mt-1">
|
|
{discord}
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent className="relative pt-0">
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-sm font-mono text-blue-400 bg-blue-900/20 border border-blue-600/30 rounded-full px-3 py-1.5 inline-block group-hover:bg-blue-900/40 group-hover:border-blue-500/50 transition-all duration-300">
|
|
x{ext}
|
|
</div>
|
|
<div className="text-xs text-gray-500 group-hover:text-gray-400 transition-colors duration-300">
|
|
Extension
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
|
|
{/* Hover glow effect */}
|
|
<div className="absolute inset-0 rounded-lg bg-gradient-to-r from-blue-500/0 via-blue-500/0 to-blue-500/0 group-hover:from-blue-500/5 group-hover:via-transparent group-hover:to-blue-500/5 transition-all duration-500 pointer-events-none" />
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default function Team() {
|
|
return (
|
|
<section id="team" className="relative py-32 overflow-hidden">
|
|
<div className="container relative">
|
|
<div className="text-center max-w-3xl mx-auto mb-16 px-4">
|
|
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-6 bg-gradient-to-r from-white via-purple-100 to-white bg-clip-text text-transparent pb-2">
|
|
Meet the Team
|
|
</h2>
|
|
<p className="text-lg sm:text-xl text-gray-300 leading-relaxed">
|
|
The dedicated people who keep LiteNet running smoothly and help our community grow.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-16">
|
|
{/* Administration Team */}
|
|
<div>
|
|
<div className="flex items-center justify-center mb-8">
|
|
<div className="flex items-center gap-4">
|
|
<h3 className="text-xl sm:text-2xl font-semibold text-center text-gray-200 bg-gradient-to-r from-blue-400 to-blue-300 bg-clip-text text-transparent pb-2">
|
|
Administration Team
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<div className="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
{adminTeam.map((member, index) => (
|
|
<div
|
|
key={member.ext}
|
|
style={{
|
|
animationDelay: `${index * 100}ms`,
|
|
animation: 'fadeInUp 0.8s ease-out forwards'
|
|
}}
|
|
>
|
|
<TeamMember {...member} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Moderation Team */}
|
|
<div>
|
|
<div className="flex items-center justify-center mb-8">
|
|
<div className="flex items-center gap-4">
|
|
<h3 className="text-xl sm:text-2xl font-semibold text-center text-gray-200 bg-gradient-to-r from-purple-400 to-purple-300 bg-clip-text text-transparent pb-2">
|
|
Moderation Team
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<div className="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
{modTeam.map((member, index) => (
|
|
<div
|
|
key={member.ext}
|
|
style={{
|
|
animationDelay: `${(index + adminTeam.length) * 100}ms`,
|
|
animation: 'fadeInUp 0.8s ease-out forwards'
|
|
}}
|
|
>
|
|
<TeamMember {...member} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
`}</style>
|
|
</section>
|
|
)
|
|
}
|
|
|