Build LabsExploreResearch - Research projects deep-dive
cgen-bfcbe0cec41c4d2aba8fbbe64343a8af
This commit is contained in:
Builder.io
parent
9499eb218a
commit
17693ce264
3 changed files with 664 additions and 375 deletions
|
|
@ -2,16 +2,87 @@ import Layout from "@/components/Layout";
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Beaker, BookOpen, Lightbulb, Award } from "lucide-react";
|
||||
import { ArrowRight, Users, Clock, Zap, Download, ExternalLink } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function LabsExploreResearch() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const researchProjects = [
|
||||
{
|
||||
title: "AI-Powered NPC Behavior Systems",
|
||||
status: "Active Research",
|
||||
team: 5,
|
||||
duration: "6 months",
|
||||
description:
|
||||
"Machine learning models for realistic, adaptive NPC behavior in games. Uses reinforcement learning to create NPCs that learn from player interactions.",
|
||||
keyAchievements: [
|
||||
"50% faster training time vs baseline",
|
||||
"Natural conversation patterns",
|
||||
"Dynamic difficulty scaling",
|
||||
],
|
||||
technologies: ["TensorFlow", "Python", "Lua"],
|
||||
impact: "Shipping in Q2 2025 GameForge games",
|
||||
paper: null,
|
||||
code: "github.com/aethex/ai-npc",
|
||||
},
|
||||
{
|
||||
title: "Next-Gen Web Architecture",
|
||||
status: "Exploration Phase",
|
||||
team: 3,
|
||||
duration: "3 months",
|
||||
description:
|
||||
"Exploring edge computing and serverless patterns for ultra-low latency experiences. Focus on reducing load times to <100ms.",
|
||||
keyAchievements: [
|
||||
"Proof of concept complete",
|
||||
"80% latency reduction achieved",
|
||||
"Framework design finalized",
|
||||
],
|
||||
technologies: ["Cloudflare Workers", "WebAssembly", "TypeScript"],
|
||||
impact: "Foundation for next-gen platform",
|
||||
paper: "Next-Gen Architecture White Paper (Dec 2024)",
|
||||
code: null,
|
||||
},
|
||||
{
|
||||
title: "Procedural Content Generation",
|
||||
status: "Published",
|
||||
team: 4,
|
||||
duration: "8 months",
|
||||
description:
|
||||
"Algorithms for infinite, dynamic game world generation. Published research accepted at Game Dev Summit 2024.",
|
||||
keyAchievements: [
|
||||
"Paper published in proceedings",
|
||||
"Open-source library released",
|
||||
"3K+ GitHub stars",
|
||||
],
|
||||
technologies: ["Rust", "Perlin Noise", "Graph Theory"],
|
||||
impact: "Used in 5+ community games",
|
||||
paper: "Procedural Generation at Scale",
|
||||
code: "github.com/aethex/proc-gen",
|
||||
},
|
||||
{
|
||||
title: "Real-Time Ray Tracing Optimization",
|
||||
status: "Development",
|
||||
team: 6,
|
||||
duration: "5 months",
|
||||
description:
|
||||
"Breakthrough techniques for ray tracing on consumer hardware without sacrificing performance. Hybrid rasterization + ray tracing approach.",
|
||||
keyAchievements: [
|
||||
"4x performance improvement",
|
||||
"Production-ready implementation",
|
||||
"Works on mobile hardware",
|
||||
],
|
||||
technologies: ["GLSL", "C++", "GPU Compute"],
|
||||
impact: "Launching as free SDK in 2025",
|
||||
paper: null,
|
||||
code: "github.com/aethex/raytracing-sdk",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Animated grid background */}
|
||||
{/* 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" />
|
||||
|
|
@ -19,123 +90,153 @@ export default function LabsExploreResearch() {
|
|||
<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">
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden py-20 lg:py-28">
|
||||
<div className="container mx-auto max-w-6xl px-4 text-center">
|
||||
<div className="mx-auto flex max-w-3xl flex-col items-center gap-8">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-yellow-300 hover:bg-yellow-500/10"
|
||||
onClick={() => navigate("/labs")}
|
||||
>
|
||||
← Back to Labs
|
||||
</Button>
|
||||
{/* 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>
|
||||
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-yellow-400/40 bg-yellow-500/10 text-yellow-300 shadow-[0_0_20px_rgba(251,191,36,0.2)]"
|
||||
>
|
||||
<Beaker className="h-5 w-5 mr-2" />
|
||||
Research & Innovation
|
||||
</Badge>
|
||||
<h1 className="text-4xl lg:text-5xl font-black text-yellow-300 mb-4">
|
||||
Research Projects
|
||||
</h1>
|
||||
<p className="text-lg text-yellow-100/80 max-w-3xl">
|
||||
Explore the cutting-edge research being conducted in AeThex Labs. Each project represents our commitment to pushing the boundaries of technology.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h1 className="text-4xl font-black tracking-tight text-yellow-300 sm:text-5xl lg:text-6xl">
|
||||
Explore Our Research
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-yellow-100/90 sm:text-xl">
|
||||
Discover cutting-edge projects, publications, and
|
||||
breakthroughs from our research initiatives. See what we're
|
||||
working on to shape the future.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-4 sm:flex-row">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-yellow-400 text-black shadow-[0_0_30px_rgba(251,191,36,0.35)] transition hover:bg-yellow-300"
|
||||
{/* Projects Grid */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="space-y-8">
|
||||
{researchProjects.map((project, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-all"
|
||||
>
|
||||
<BookOpen className="mr-2 h-5 w-5" />
|
||||
Browse Projects
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-yellow-400/60 text-yellow-300 hover:bg-yellow-500/10"
|
||||
>
|
||||
Read Publications
|
||||
</Button>
|
||||
</div>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between gap-4 mb-4">
|
||||
<div>
|
||||
<CardTitle className="text-2xl text-yellow-300 mb-2">
|
||||
{project.title}
|
||||
</CardTitle>
|
||||
<Badge className={`${
|
||||
project.status === "Published"
|
||||
? "bg-green-500/20 border border-green-400/40 text-green-300"
|
||||
: project.status === "Active Research"
|
||||
? "bg-yellow-500/20 border border-yellow-400/40 text-yellow-300"
|
||||
: "bg-purple-500/20 border border-purple-400/40 text-purple-300"
|
||||
}`}>
|
||||
{project.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-yellow-400 font-semibold">
|
||||
{project.team} researchers
|
||||
</p>
|
||||
<p className="text-sm text-yellow-200/70">
|
||||
{project.duration}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
{/* Description */}
|
||||
<p className="text-yellow-200/80">{project.description}</p>
|
||||
|
||||
{/* Key Achievements */}
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-yellow-400 mb-3">
|
||||
Key Achievements
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
{project.keyAchievements.map((achievement, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className="flex items-center gap-2 text-sm text-yellow-200/80"
|
||||
>
|
||||
<Zap className="h-4 w-4 text-yellow-400" />
|
||||
{achievement}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Technologies */}
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-yellow-400 mb-3">
|
||||
Technologies
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.technologies.map((tech, i) => (
|
||||
<Badge
|
||||
key={i}
|
||||
className="bg-yellow-500/20 text-yellow-300 border border-yellow-400/40"
|
||||
>
|
||||
{tech}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Impact & Links */}
|
||||
<div className="pt-4 border-t border-yellow-400/10 flex flex-wrap items-center justify-between gap-4">
|
||||
<p className="text-sm text-yellow-200/80">
|
||||
<span className="font-semibold text-yellow-400">Impact:</span>{" "}
|
||||
{project.impact}
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
{project.paper && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-yellow-300 hover:bg-yellow-500/10"
|
||||
>
|
||||
<Download className="h-4 w-4 mr-1" />
|
||||
Paper
|
||||
</Button>
|
||||
)}
|
||||
{project.code && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-yellow-300 hover:bg-yellow-500/10"
|
||||
>
|
||||
<ExternalLink className="h-4 w-4 mr-1" />
|
||||
Code
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Research Grid */}
|
||||
<section className="border-y border-yellow-400/10 bg-black/80 py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-yellow-300 mb-8">
|
||||
Featured Research
|
||||
{/* 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">
|
||||
Interested in Research?
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Lightbulb className="h-8 w-8 text-yellow-400 mb-2" />
|
||||
<CardTitle className="text-yellow-300">
|
||||
AI & Machine Learning
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-yellow-200/70">
|
||||
Exploring neural networks and intelligent systems for game
|
||||
development and interactive experiences.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Award className="h-8 w-8 text-yellow-400 mb-2" />
|
||||
<CardTitle className="text-yellow-300">
|
||||
Performance Optimization
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-yellow-200/70">
|
||||
Breakthrough research in rendering, physics, and real-time
|
||||
graphics optimization.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Beaker className="h-8 w-8 text-yellow-400 mb-2" />
|
||||
<CardTitle className="text-yellow-300">
|
||||
Roblox Platform
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-yellow-200/70">
|
||||
Advanced techniques for Roblox development, scripting, and
|
||||
ecosystem expansion.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<BookOpen className="h-8 w-8 text-yellow-400 mb-2" />
|
||||
<CardTitle className="text-yellow-300">
|
||||
Developer Tools
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-yellow-200/70">
|
||||
Building open-source tools and frameworks for the
|
||||
developer community.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<p className="text-lg text-yellow-100/80 mb-8">
|
||||
Join our research team and contribute to the future of technology.
|
||||
</p>
|
||||
<Button
|
||||
className="bg-yellow-400 text-black hover:bg-yellow-300"
|
||||
onClick={() => navigate("/careers")}
|
||||
>
|
||||
View Research Positions
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,90 @@ import Layout from "@/components/Layout";
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Zap, Code, Globe, Lightbulb } from "lucide-react";
|
||||
import { CheckCircle, Users, BookOpen, Code, Zap, ArrowRight } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function LabsGetInvolved() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const opportunities = [
|
||||
{
|
||||
title: "Research Partnerships",
|
||||
description: "Collaborate with our team on research projects",
|
||||
details: [
|
||||
"Co-author research papers",
|
||||
"Access to our lab facilities",
|
||||
"Joint publications",
|
||||
"Revenue sharing on commercialized research",
|
||||
],
|
||||
icon: <BookOpen className="h-6 w-6" />,
|
||||
color: "from-purple-500 to-pink-500",
|
||||
},
|
||||
{
|
||||
title: "Open Source Contributions",
|
||||
description: "Help us build and improve our open-source projects",
|
||||
details: [
|
||||
"Fork and contribute to projects",
|
||||
"Get recognized as contributor",
|
||||
"Influence project direction",
|
||||
"Build your open-source portfolio",
|
||||
],
|
||||
icon: <Code className="h-6 w-6" />,
|
||||
color: "from-green-500 to-emerald-500",
|
||||
},
|
||||
{
|
||||
title: "Speaking & Workshops",
|
||||
description: "Share your expertise with our community",
|
||||
details: [
|
||||
"Host technical workshops",
|
||||
"Speak at our conferences",
|
||||
"Lead educational content",
|
||||
"Build your professional brand",
|
||||
],
|
||||
icon: <Users className="h-6 w-6" />,
|
||||
color: "from-blue-500 to-cyan-500",
|
||||
},
|
||||
{
|
||||
title: "Technical Advisory",
|
||||
description: "Advise us on emerging technologies",
|
||||
details: [
|
||||
"Join our advisory board",
|
||||
"Shape research direction",
|
||||
"Quarterly meetings",
|
||||
"Competitive advisory fees",
|
||||
],
|
||||
icon: <Zap className="h-6 w-6" />,
|
||||
color: "from-orange-500 to-red-500",
|
||||
},
|
||||
];
|
||||
|
||||
const process = [
|
||||
{
|
||||
step: 1,
|
||||
title: "Express Interest",
|
||||
description: "Tell us which opportunity excites you",
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
title: "Initial Conversation",
|
||||
description: "Meet with our team to discuss details",
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
title: "Formalize Agreement",
|
||||
description: "Sign partnership terms and get started",
|
||||
},
|
||||
{
|
||||
step: 4,
|
||||
title: "Collaborate",
|
||||
description: "Work together to advance technology",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="relative min-h-screen bg-black text-white overflow-hidden">
|
||||
{/* Animated grid background */}
|
||||
{/* 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" />
|
||||
|
|
@ -19,124 +93,172 @@ export default function LabsGetInvolved() {
|
|||
<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">
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden py-20 lg:py-28">
|
||||
<div className="container mx-auto max-w-6xl px-4 text-center">
|
||||
<div className="mx-auto flex max-w-3xl flex-col items-center gap-8">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-yellow-300 hover:bg-yellow-500/10"
|
||||
onClick={() => navigate("/labs")}
|
||||
>
|
||||
← Back to Labs
|
||||
</Button>
|
||||
{/* 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>
|
||||
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-yellow-400/40 bg-yellow-500/10 text-yellow-300 shadow-[0_0_20px_rgba(251,191,36,0.2)]"
|
||||
>
|
||||
<Zap className="h-5 w-5 mr-2" />
|
||||
<div className="space-y-4 mb-12">
|
||||
<h1 className="text-4xl lg:text-5xl font-black text-yellow-300">
|
||||
Get Involved
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-4xl font-black tracking-tight text-yellow-300 sm:text-5xl lg:text-6xl">
|
||||
Contribute to Innovation
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-yellow-100/90 sm:text-xl">
|
||||
Multiple ways to get involved with Labs. Whether you're a
|
||||
student, developer, or researcher, there's a place for you.
|
||||
<p className="text-lg text-yellow-100/80 max-w-3xl">
|
||||
There are many ways to collaborate with AeThex Labs. Whether you're a researcher, developer, or thought leader, we'd love to work together.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-4 sm:flex-row">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-yellow-400 text-black shadow-[0_0_30px_rgba(251,191,36,0.35)] transition hover:bg-yellow-300"
|
||||
>
|
||||
<Lightbulb className="mr-2 h-5 w-5" />
|
||||
Start Contributing
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-yellow-400/60 text-yellow-300 hover:bg-yellow-500/10"
|
||||
>
|
||||
View Guidelines
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Ways to Get Involved */}
|
||||
<section className="border-y border-yellow-400/10 bg-black/80 py-16">
|
||||
{/* Opportunities Grid */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{opportunities.map((opp, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-all"
|
||||
>
|
||||
<CardHeader>
|
||||
<div className={`w-12 h-12 rounded-lg bg-gradient-to-r ${opp.color} flex items-center justify-center text-white mb-4`}>
|
||||
{opp.icon}
|
||||
</div>
|
||||
<CardTitle className="text-yellow-300">
|
||||
{opp.title}
|
||||
</CardTitle>
|
||||
<p className="text-sm text-yellow-200/70 mt-2">
|
||||
{opp.description}
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2">
|
||||
{opp.details.map((detail, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className="flex items-start gap-2 text-sm text-yellow-200/80"
|
||||
>
|
||||
<CheckCircle className="h-4 w-4 text-yellow-400 mt-0.5 flex-shrink-0" />
|
||||
{detail}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How It Works */}
|
||||
<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-12">
|
||||
How to Get Started
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
{process.map((item) => (
|
||||
<Card
|
||||
key={item.step}
|
||||
className="bg-yellow-950/20 border-yellow-400/30"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-4xl font-black text-yellow-400 mb-3">
|
||||
{item.step}
|
||||
</div>
|
||||
<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>
|
||||
|
||||
{/* Benefits */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-yellow-300 mb-8">
|
||||
Ways to Get Involved
|
||||
Why Partner With Labs
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<Card className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Code className="h-8 w-8 text-yellow-400 mb-2" />
|
||||
<CardTitle className="text-yellow-300">
|
||||
Contribute Code
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-yellow-200/70">
|
||||
Help develop open-source projects and tools used by
|
||||
developers worldwide.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Lightbulb className="h-8 w-8 text-yellow-400 mb-2" />
|
||||
<CardTitle className="text-yellow-300">
|
||||
Share Ideas
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-yellow-200/70">
|
||||
Propose research topics or contribute ideas to ongoing
|
||||
projects.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Globe className="h-8 w-8 text-yellow-400 mb-2" />
|
||||
<CardTitle className="text-yellow-300">
|
||||
Community Feedback
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-yellow-200/70">
|
||||
Test beta features, provide feedback, and help shape our
|
||||
roadmap.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<Zap className="h-8 w-8 text-yellow-400 mb-2" />
|
||||
<CardTitle className="text-yellow-300">
|
||||
Collaborate
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-yellow-200/70">
|
||||
Partner on research initiatives or joint projects with our
|
||||
team.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{[
|
||||
{
|
||||
title: "Cutting-Edge Technology",
|
||||
description:
|
||||
"Access to our latest research and innovations before they're public",
|
||||
},
|
||||
{
|
||||
title: "Global Reach",
|
||||
description:
|
||||
"Connect with 50K+ developers in our ecosystem and beyond",
|
||||
},
|
||||
{
|
||||
title: "Professional Growth",
|
||||
description:
|
||||
"Build your reputation through published research and speaking engagements",
|
||||
},
|
||||
{
|
||||
title: "Revenue Sharing",
|
||||
description:
|
||||
"Get compensated for contributions that drive business value",
|
||||
},
|
||||
{
|
||||
title: "Mentorship",
|
||||
description:
|
||||
"Learn from world-class researchers and engineers on our team",
|
||||
},
|
||||
{
|
||||
title: "Community Impact",
|
||||
description:
|
||||
"Help shape the future of gaming and digital technology",
|
||||
},
|
||||
].map((benefit, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
className="bg-yellow-950/20 border-yellow-400/30"
|
||||
>
|
||||
<CardContent className="pt-6">
|
||||
<CheckCircle className="h-6 w-6 text-yellow-400 mb-3" />
|
||||
<h3 className="font-bold text-yellow-300 mb-2">
|
||||
{benefit.title}
|
||||
</h3>
|
||||
<p className="text-sm text-yellow-200/70">
|
||||
{benefit.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">
|
||||
Ready to Collaborate?
|
||||
</h2>
|
||||
<p className="text-lg text-yellow-100/80 mb-8">
|
||||
Reach out to learn more about our partnership opportunities.
|
||||
</p>
|
||||
<Button
|
||||
className="bg-yellow-400 text-black hover:bg-yellow-300"
|
||||
onClick={() => navigate("/contact")}
|
||||
>
|
||||
Contact Us
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,86 @@
|
|||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Users, Briefcase, Heart, ArrowRight } from "lucide-react";
|
||||
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">
|
||||
{/* Animated grid background */}
|
||||
{/* 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" />
|
||||
|
|
@ -19,167 +88,164 @@ export default function LabsJoinTeam() {
|
|||
<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">
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden py-20 lg:py-28">
|
||||
<div className="container mx-auto max-w-6xl px-4 text-center">
|
||||
<div className="mx-auto flex max-w-3xl flex-col items-center gap-8">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-yellow-300 hover:bg-yellow-500/10"
|
||||
onClick={() => navigate("/labs")}
|
||||
>
|
||||
← Back to Labs
|
||||
</Button>
|
||||
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-yellow-400/40 bg-yellow-500/10 text-yellow-300 shadow-[0_0_20px_rgba(251,191,36,0.2)]"
|
||||
>
|
||||
<Users className="h-5 w-5 mr-2" />
|
||||
Join Our Team
|
||||
</Badge>
|
||||
|
||||
<h1 className="text-4xl font-black tracking-tight text-yellow-300 sm:text-5xl lg:text-6xl">
|
||||
We're Hiring Innovators
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-yellow-100/90 sm:text-xl">
|
||||
Join a team of passionate researchers and developers pushing
|
||||
the boundaries of technology. Help us shape the future.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col gap-4 sm:flex-row">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-yellow-400 text-black shadow-[0_0_30px_rgba(251,191,36,0.35)] transition hover:bg-yellow-300"
|
||||
>
|
||||
<Briefcase className="mr-2 h-5 w-5" />
|
||||
View Open Positions
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-yellow-400/60 text-yellow-300 hover:bg-yellow-500/10"
|
||||
>
|
||||
Learn About Culture
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Open Positions Grid */}
|
||||
<section className="border-y border-yellow-400/10 bg-black/80 py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-yellow-300 mb-8">
|
||||
Open Positions
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<Card className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-yellow-300">
|
||||
Senior Researcher
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm text-yellow-200/70">
|
||||
Lead groundbreaking research initiatives and mentor junior
|
||||
researchers.
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-yellow-400/60 text-yellow-300 hover:bg-yellow-500/10 w-full"
|
||||
>
|
||||
Apply Now <ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-yellow-300">
|
||||
Full Stack Engineer
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm text-yellow-200/70">
|
||||
Build tools and platforms that empower our research
|
||||
efforts.
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-yellow-400/60 text-yellow-300 hover:bg-yellow-500/10 w-full"
|
||||
>
|
||||
Apply Now <ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-colors">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-yellow-300">
|
||||
Research Intern
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm text-yellow-200/70">
|
||||
Start your career in cutting-edge research and
|
||||
development.
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-yellow-400/60 text-yellow-300 hover:bg-yellow-500/10 w-full"
|
||||
>
|
||||
Apply Now <ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Benefits Section */}
|
||||
{/* Header */}
|
||||
<section className="py-16">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
<h2 className="text-3xl font-bold text-yellow-300 mb-8 text-center">
|
||||
Why Join Labs
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<Card className="bg-yellow-950/20 border-yellow-400/30">
|
||||
<CardHeader>
|
||||
<Heart className="h-8 w-8 text-yellow-400 mb-2" />
|
||||
<CardTitle className="text-yellow-300">
|
||||
Meaningful Work
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-yellow-200/70">
|
||||
Contribute to research that shapes the future of
|
||||
technology and impacts millions.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-yellow-300 hover:bg-yellow-500/10 mb-8"
|
||||
onClick={() => navigate("/labs")}
|
||||
>
|
||||
← Back to Labs
|
||||
</Button>
|
||||
|
||||
<Card className="bg-yellow-950/20 border-yellow-400/30">
|
||||
<CardHeader>
|
||||
<Users className="h-8 w-8 text-yellow-400 mb-2" />
|
||||
<CardTitle className="text-yellow-300">
|
||||
Amazing Team
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-yellow-200/70">
|
||||
Work alongside brilliant minds passionate about innovation
|
||||
and discovery.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue