256 lines
10 KiB
TypeScript
256 lines
10 KiB
TypeScript
import Layout from "@/components/Layout";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Users, Linkedin, Github, Mail, ArrowRight } from "lucide-react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
export default function LabsJoinTeam() {
|
|
const navigate = useNavigate();
|
|
|
|
const team = [
|
|
{
|
|
name: "Dr. Sarah Chen",
|
|
role: "Research Director",
|
|
bio: "PhD in Computer Science (MIT). 15+ years in game technology. Led AI research at major studios.",
|
|
expertise: ["AI/ML", "Game Architecture", "Team Leadership"],
|
|
social: {
|
|
linkedin: "#",
|
|
github: "#",
|
|
email: "sarah@aethex.com",
|
|
},
|
|
},
|
|
{
|
|
name: "Marcus Johnson",
|
|
role: "Senior Graphics Engineer",
|
|
bio: "GPU optimization specialist. Published research on ray tracing. Built rendering engines at AAA studios.",
|
|
expertise: ["Graphics", "GPU Computing", "Performance"],
|
|
social: {
|
|
linkedin: "#",
|
|
github: "#",
|
|
email: "marcus@aethex.com",
|
|
},
|
|
},
|
|
{
|
|
name: "Elena Rodriguez",
|
|
role: "Distributed Systems Engineer",
|
|
bio: "Expert in scalable backend architecture. Built systems handling 1M+ concurrent connections.",
|
|
expertise: ["Distributed Systems", "Cloud Architecture", "DevOps"],
|
|
social: {
|
|
linkedin: "#",
|
|
github: "#",
|
|
email: "elena@aethex.com",
|
|
},
|
|
},
|
|
{
|
|
name: "David Kim",
|
|
role: "ML Engineer",
|
|
bio: "TensorFlow contributor. Specializes in game AI and procedural generation algorithms.",
|
|
expertise: ["Machine Learning", "Game AI", "Neural Networks"],
|
|
social: {
|
|
linkedin: "#",
|
|
github: "#",
|
|
email: "david@aethex.com",
|
|
},
|
|
},
|
|
{
|
|
name: "Sophia Patel",
|
|
role: "Research Scientist",
|
|
bio: "Published 10+ papers on game optimization. PhD from Stanford. Published in top conferences.",
|
|
expertise: ["Algorithm Design", "Optimization", "Research"],
|
|
social: {
|
|
linkedin: "#",
|
|
github: "#",
|
|
email: "sophia@aethex.com",
|
|
},
|
|
},
|
|
{
|
|
name: "Alex Morgan",
|
|
role: "Director of Innovation",
|
|
bio: "20+ years driving innovation. Mentor to the team. Visionary for future of gaming tech.",
|
|
expertise: ["Vision", "Mentorship", "Strategy"],
|
|
social: {
|
|
linkedin: "#",
|
|
github: "#",
|
|
email: "alex@aethex.com",
|
|
},
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
|
{/* Background */}
|
|
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#fbbf24_0,rgba(0,0,0,0.45)_55%,rgba(0,0,0,0.9)_100%)]" />
|
|
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(transparent_0,transparent_calc(100%-1px),rgba(251,191,36,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
|
|
<div className="pointer-events-none absolute inset-0 opacity-[0.08] [background-image:linear-gradient(90deg,rgba(251,191,36,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(251,191,36,0.1)_1px,transparent_1px)] [background-size:50px_50px] animate-pulse" />
|
|
<div className="pointer-events-none absolute top-20 left-10 w-72 h-72 bg-yellow-500/20 rounded-full blur-3xl animate-blob" />
|
|
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-yellow-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
|
|
|
|
<main className="relative z-10">
|
|
{/* Header */}
|
|
<section className="py-16">
|
|
<div className="container mx-auto max-w-6xl px-4">
|
|
<Button
|
|
variant="ghost"
|
|
className="text-yellow-300 hover:bg-yellow-500/10 mb-8"
|
|
onClick={() => navigate("/labs")}
|
|
>
|
|
← Back to Labs
|
|
</Button>
|
|
|
|
<div className="space-y-4 mb-12">
|
|
<h1 className="text-4xl lg:text-5xl font-black text-yellow-300">
|
|
Meet the Lab
|
|
</h1>
|
|
<p className="text-lg text-yellow-100/80 max-w-3xl">
|
|
World-class researchers and engineers dedicated to advancing
|
|
technology. Our team includes PhD researchers, published
|
|
authors, and visionary thinkers.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Team Grid */}
|
|
<section className="py-16">
|
|
<div className="container mx-auto max-w-6xl px-4">
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{team.map((member, idx) => (
|
|
<Card
|
|
key={idx}
|
|
className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-all"
|
|
>
|
|
<CardContent className="pt-6 space-y-4">
|
|
{/* Avatar Placeholder */}
|
|
<div className="w-16 h-16 rounded-full bg-gradient-to-r from-yellow-500 to-orange-500 flex items-center justify-center text-white font-bold text-xl">
|
|
{member.name
|
|
.split(" ")
|
|
.map((n) => n[0])
|
|
.join("")}
|
|
</div>
|
|
|
|
{/* Name & Role */}
|
|
<div>
|
|
<h3 className="text-lg font-bold text-yellow-300">
|
|
{member.name}
|
|
</h3>
|
|
<p className="text-sm text-yellow-400 font-medium">
|
|
{member.role}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Bio */}
|
|
<p className="text-sm text-yellow-200/70">{member.bio}</p>
|
|
|
|
{/* Expertise */}
|
|
<div className="space-y-2">
|
|
<p className="text-xs font-semibold text-yellow-400">
|
|
Expertise
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{member.expertise.map((skill, i) => (
|
|
<Badge
|
|
key={i}
|
|
className="bg-yellow-500/20 text-yellow-300 border border-yellow-400/40 text-xs"
|
|
>
|
|
{skill}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Social Links */}
|
|
<div className="flex gap-2 pt-4 border-t border-yellow-400/10">
|
|
<a
|
|
href={member.social.linkedin}
|
|
className="p-2 rounded hover:bg-yellow-500/10 text-yellow-300 hover:text-yellow-200 transition-colors"
|
|
>
|
|
<Linkedin className="h-4 w-4" />
|
|
</a>
|
|
<a
|
|
href={member.social.github}
|
|
className="p-2 rounded hover:bg-yellow-500/10 text-yellow-300 hover:text-yellow-200 transition-colors"
|
|
>
|
|
<Github className="h-4 w-4" />
|
|
</a>
|
|
<a
|
|
href={`mailto:${member.social.email}`}
|
|
className="p-2 rounded hover:bg-yellow-500/10 text-yellow-300 hover:text-yellow-200 transition-colors ml-auto"
|
|
>
|
|
<Mail className="h-4 w-4" />
|
|
</a>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Culture */}
|
|
<section className="py-16 border-t border-yellow-400/10 bg-black/40">
|
|
<div className="container mx-auto max-w-6xl px-4">
|
|
<h2 className="text-3xl font-bold text-yellow-300 mb-8">
|
|
Lab Culture
|
|
</h2>
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
{[
|
|
{
|
|
title: "Push Boundaries",
|
|
description:
|
|
"We tackle problems nobody else is solving. Innovation over comfort.",
|
|
},
|
|
{
|
|
title: "Publish Results",
|
|
description:
|
|
"Share your research with the world. Present at conferences. Build your reputation.",
|
|
},
|
|
{
|
|
title: "Mentor Others",
|
|
description:
|
|
"Junior researchers learn from seniors. We grow as a team and help the community.",
|
|
},
|
|
].map((item, idx) => (
|
|
<Card
|
|
key={idx}
|
|
className="bg-yellow-950/20 border-yellow-400/30"
|
|
>
|
|
<CardContent className="pt-6">
|
|
<h3 className="font-bold text-yellow-300 mb-2">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-sm text-yellow-200/70">
|
|
{item.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<section className="py-16 border-t border-yellow-400/10">
|
|
<div className="container mx-auto max-w-4xl px-4 text-center">
|
|
<h2 className="text-3xl font-bold text-yellow-300 mb-4">
|
|
Join the Lab
|
|
</h2>
|
|
<p className="text-lg text-yellow-100/80 mb-8">
|
|
We're looking for brilliant minds to join our team. Researchers,
|
|
engineers, and visionaries welcome.
|
|
</p>
|
|
<Button
|
|
className="bg-yellow-400 text-black hover:bg-yellow-300"
|
|
onClick={() => navigate("/careers")}
|
|
>
|
|
See Open Positions
|
|
<ArrowRight className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|