AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create Labs Teams page (yellow)

Browse source 
cgen-7a8f3a7ad9b04c089d324f9bf630846a
This commit is contained in:
Builder.io 2025-11-06 20:07:17 +00:00
parent 072cafac73
commit dc7b134ee8
4 changed files with 636 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

128
client/pages/labs/LabsAbout.tsx Normal file
View file

@ -0,0 +1,128 @@
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, Target, Users, BookOpen } from "lucide-react";
import { useNavigate } from "react-router-dom";
export default function LabsAbout() {
const navigate = useNavigate();
return (
<Layout>
<div className="relative min-h-screen bg-black text-white overflow-hidden">
{/* Animated backgrounds */}
<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" />
<main className="relative z-10">
{/* Header */}
<section className="relative overflow-hidden py-12 lg:py-16">
<div className="container mx-auto max-w-6xl px-4">
<Button
onClick={() => navigate("/labs")}
variant="ghost"
className="text-yellow-300 hover:bg-yellow-500/10 mb-8"
>
← Back to Labs
</Button>
<h1 className="text-4xl font-black tracking-tight text-yellow-300 sm:text-5xl mb-4">
About AeThex Labs
</h1>
<p className="text-lg text-yellow-100/80 max-w-2xl">
Pushing the boundaries of what's possible in game development
</p>
</div>
</section>
{/* Mission */}
<section className="py-12 lg:py-16">
<div className="container mx-auto max-w-4xl px-4">
<div className="rounded-lg border border-yellow-400/30 bg-yellow-950/20 p-8 mb-12">
<h2 className="text-2xl font-bold text-yellow-300 mb-4">Our Mission</h2>
<p className="text-yellow-200/80 text-lg leading-relaxed">
AeThex Labs is dedicated to advancing the state of game development through cutting-edge research,
comprehensive documentation, and community education. We believe in the power of collaborative innovation
and are committed to making game development more accessible and efficient for creators everywhere.
</p>
</div>
{/* Values */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
<Card className="bg-yellow-950/20 border-yellow-400/30">
<CardHeader>
<Zap className="h-8 w-8 text-yellow-400 mb-2" />
<CardTitle className="text-yellow-300">Innovation</CardTitle>
</CardHeader>
<CardContent>
<p className="text-yellow-200/70">
Constantly exploring new techniques and frameworks to push creative boundaries
</p>
</CardContent>
</Card>
<Card className="bg-yellow-950/20 border-yellow-400/30">
<CardHeader>
<Target className="h-8 w-8 text-yellow-400 mb-2" />
<CardTitle className="text-yellow-300">Excellence</CardTitle>
</CardHeader>
<CardContent>
<p className="text-yellow-200/70">
Maintaining the highest standards in our research and educational initiatives
</p>
</CardContent>
</Card>
<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">Collaboration</CardTitle>
</CardHeader>
<CardContent>
<p className="text-yellow-200/70">
Working together with developers, studios, and tools like Dev-Link to grow the ecosystem
</p>
</CardContent>
</Card>
<Card className="bg-yellow-950/20 border-yellow-400/30">
<CardHeader>
<BookOpen className="h-8 w-8 text-yellow-400 mb-2" />
<CardTitle className="text-yellow-300">Education</CardTitle>
</CardHeader>
<CardContent>
<p className="text-yellow-200/70">
Creating resources and knowledge that empower the next generation of developers
</p>
</CardContent>
</Card>
</div>
{/* Dev-Link Connection */}
<div className="rounded-lg border border-yellow-400/30 bg-yellow-950/20 p-8">
<Badge className="border-yellow-400/40 bg-yellow-500/10 text-yellow-300 mb-4">
Ecosystem
</Badge>
<h3 className="text-2xl font-bold text-yellow-300 mb-4">
Partnering with Dev-Link
</h3>
<p className="text-yellow-200/80 mb-4">
AeThex Labs works closely with Dev-Link, our professional network platform for Roblox developers,
to ensure our research and innovations directly benefit the developer community. Through Dev-Link,
we connect researchers with talented developers who can implement and refine our findings.
</p>
<Button
onClick={() => navigate("/dev-link/waitlist")}
className="bg-yellow-400 text-black hover:bg-yellow-300"
>
Join Dev-Link
</Button>
</div>
</div>
</section>
</main>
</div>
</Layout>
);
}

187
client/pages/labs/LabsCaseStudies.tsx Normal file
View file

@ -0,0 +1,187 @@
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 { ArrowRight, TrendingUp } from "lucide-react";
import { useNavigate } from "react-router-dom";
const CASE_STUDIES = [
{
title: "Scaling Game Performance",
studio: "MegaStudios Inc.",
challenge:
"Handling 10,000+ concurrent players while maintaining 60fps performance",
solution:
"Implemented Labs optimization framework and distributed architecture patterns",
results: ["99.8% uptime", "2x performance improvement", "30% cost reduction"],
image: "🚀",
},
{
title: "Dev-Link Integration",
studio: "TalentFlow Collective",
challenge:
"Recruiting and retaining top Roblox developers across multiple timezones",
solution:
"Adopted Dev-Link platform for community building and skill matching, combined with Labs training resources",
results: [
"150% increase in quality hires",
"40% faster onboarding",
"Enhanced developer satisfaction",
],
image: "🌐",
highlighted: true,
},
{
title: "Framework Modernization",
studio: "InnovateGames Ltd.",
challenge: "Upgrading legacy codebase while maintaining live product",
solution:
"Used Labs best practices and graduated migration strategy to modernize framework",
results: [
"Zero production downtime",
"50% code reduction",
"Modern architecture established",
],
image: "⚙️",
},
{
title: "Team Growth & Development",
studio: "GrowthLabs Studio",
challenge:
"Building a world-class engineering team from junior developers",
solution:
"Leveraged Labs educational resources and Dev-Link community for talent discovery and mentorship",
results: [
"10 developers trained and promoted",
"Internal innovation projects launched",
"Industry recognition achieved",
],
image: "👥",
},
];
export default function LabsCaseStudies() {
const navigate = useNavigate();
return (
<Layout>
<div className="relative min-h-screen bg-black text-white overflow-hidden">
{/* Animated backgrounds */}
<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" />
<main className="relative z-10">
{/* Header */}
<section className="relative overflow-hidden py-12 lg:py-16">
<div className="container mx-auto max-w-6xl px-4">
<Button
onClick={() => navigate("/labs")}
variant="ghost"
className="text-yellow-300 hover:bg-yellow-500/10 mb-8"
>
← Back to Labs
</Button>
<h1 className="text-4xl font-black tracking-tight text-yellow-300 sm:text-5xl mb-4">
Case Studies
</h1>
<p className="text-lg text-yellow-100/80 max-w-2xl">
See how leading studios use AeThex Labs and Dev-Link to achieve their goals
</p>
</div>
</section>
{/* Case Studies */}
<section className="py-12 lg:py-16">
<div className="container mx-auto max-w-6xl px-4">
<div className="space-y-8">
{CASE_STUDIES.map((study) => (
<Card
key={study.title}
className={`border transition-all ${
study.highlighted
? "bg-yellow-950/40 border-yellow-400 ring-2 ring-yellow-400/50"
: "bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60"
}`}
>
<CardHeader>
<div className="flex items-start justify-between mb-4">
<div className="flex-1">
<CardTitle className="text-yellow-300 mb-2">
{study.title}
</CardTitle>
<p className="text-sm text-yellow-200/70">{study.studio}</p>
</div>
<div className="text-4xl">{study.image}</div>
</div>
{study.highlighted && (
<Badge className="border-yellow-400/40 bg-yellow-500/10 text-yellow-300 w-fit">
<TrendingUp className="h-3 w-3 mr-2" />
Featured
</Badge>
)}
</CardHeader>
<CardContent className="space-y-4">
<div>
<h4 className="font-semibold text-yellow-300 mb-2">
Challenge
</h4>
<p className="text-yellow-200/70">{study.challenge}</p>
</div>
<div>
<h4 className="font-semibold text-yellow-300 mb-2">
Solution
</h4>
<p className="text-yellow-200/70">{study.solution}</p>
</div>
<div>
<h4 className="font-semibold text-yellow-300 mb-2">
Results
</h4>
<div className="flex flex-wrap gap-2">
{study.results.map((result) => (
<Badge
key={result}
className="bg-yellow-500/20 text-yellow-300 border-0"
>
✓ {result}
</Badge>
))}
</div>
</div>
</CardContent>
</Card>
))}
</div>
{/* CTA */}
<div className="mt-12 rounded-lg border border-yellow-400/30 bg-yellow-950/20 p-8 text-center">
<h2 className="text-2xl font-bold text-yellow-300 mb-4">
Ready to Write Your Success Story?
</h2>
<p className="text-yellow-200/80 mb-6 max-w-2xl mx-auto">
Combine AeThex Labs research with Dev-Link's professional community to accelerate your growth
</p>
<div className="flex gap-4 justify-center flex-wrap">
<Button className="bg-yellow-400 text-black hover:bg-yellow-300">
Get Started with Labs
</Button>
<Button
variant="outline"
className="border-yellow-400/60 text-yellow-300 hover:bg-yellow-500/10"
onClick={() => navigate("/dev-link/waitlist")}
>
Join Dev-Link <ArrowRight className="h-4 w-4 ml-2" />
</Button>
</div>
</div>
</div>
</section>
</main>
</div>
</Layout>
);
}

176
client/pages/labs/LabsPricing.tsx Normal file
View file

@ -0,0 +1,176 @@
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 { Check } from "lucide-react";
import { useNavigate } from "react-router-dom";
const PRICING_TIERS = [
{
name: "Starter",
description: "Perfect for indie developers",
price: "Free",
features: [
"Access to documentation",
"Community forums",
"Monthly research updates",
"Basic tools and templates",
],
cta: "Get Started",
highlighted: false,
},
{
name: "Professional",
description: "For growing studios",
price: "$49",
period: "/month",
features: [
"Everything in Starter",
"Advanced optimization guides",
"Priority support",
"Exclusive research previews",
"API access",
"Custom consulting hours",
],
cta: "Start Free Trial",
highlighted: true,
},
{
name: "Enterprise",
description: "For large-scale operations",
price: "Custom",
features: [
"Everything in Professional",
"Dedicated support team",
"Custom research projects",
"On-site training",
"API SLA guarantee",
"Custom integrations",
],
cta: "Contact Sales",
highlighted: false,
},
];
export default function LabsPricing() {
const navigate = useNavigate();
return (
<Layout>
<div className="relative min-h-screen bg-black text-white overflow-hidden">
{/* Animated backgrounds */}
<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" />
<main className="relative z-10">
{/* Header */}
<section className="relative overflow-hidden py-12 lg:py-16">
<div className="container mx-auto max-w-6xl px-4">
<Button
onClick={() => navigate("/labs")}
variant="ghost"
className="text-yellow-300 hover:bg-yellow-500/10 mb-8"
>
← Back to Labs
</Button>
<h1 className="text-4xl font-black tracking-tight text-yellow-300 sm:text-5xl mb-4">
Labs Pricing
</h1>
<p className="text-lg text-yellow-100/80 max-w-2xl">
Invest in your development journey with flexible pricing plans
</p>
</div>
</section>
{/* Pricing Cards */}
<section className="py-12 lg:py-16">
<div className="container mx-auto max-w-6xl px-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{PRICING_TIERS.map((tier) => (
<Card
key={tier.name}
className={`border transition-all ${
tier.highlighted
? "bg-yellow-950/40 border-yellow-400 ring-2 ring-yellow-400/50"
: "bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60"
}`}
>
<CardHeader>
<CardTitle className="text-yellow-300">{tier.name}</CardTitle>
<p className="text-sm text-yellow-200/70 mt-2">{tier.description}</p>
</CardHeader>
<CardContent className="space-y-6">
<div>
<div className="text-3xl font-bold text-yellow-300">
{tier.price}
</div>
{tier.period && (
<p className="text-sm text-yellow-200/70">{tier.period}</p>
)}
</div>
<ul className="space-y-3">
{tier.features.map((feature) => (
<li key={feature} className="flex items-start gap-3">
<Check className="h-5 w-5 text-yellow-400 flex-shrink-0 mt-0.5" />
<span className="text-yellow-200/80">{feature}</span>
</li>
))}
</ul>
<Button
className={
tier.highlighted
? "w-full bg-yellow-400 text-black hover:bg-yellow-300"
: "w-full border-yellow-400/60 text-yellow-300 hover:bg-yellow-500/10"
}
variant={tier.highlighted ? "default" : "outline"}
>
{tier.cta}
</Button>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* FAQ Section */}
<section className="py-12 lg:py-16">
<div className="container mx-auto max-w-4xl px-4">
<h2 className="text-2xl font-bold text-yellow-300 mb-8">Frequently Asked Questions</h2>
<div className="space-y-4">
{[
{
q: "Can I change plans anytime?",
a: "Yes, upgrade or downgrade your plan at any time.",
},
{
q: "Do you offer discounts for annual billing?",
a: "Yes, save 20% with annual plans on Professional and Enterprise tiers.",
},
{
q: "Is there a free trial?",
a: "Professional tier includes a 14-day free trial. No credit card required.",
},
].map((item) => (
<div
key={item.q}
className="rounded-lg border border-yellow-400/30 bg-yellow-950/20 p-4"
>
<h3 className="font-semibold text-yellow-300 mb-2">{item.q}</h3>
<p className="text-yellow-200/70">{item.a}</p>
</div>
))}
</div>
</div>
</section>
</main>
</div>
</Layout>
);
}

145
client/pages/labs/LabsTeams.tsx Normal file
View file

@ -0,0 +1,145 @@
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, Github, Mail, Linkedin } from "lucide-react";
import { useNavigate } from "react-router-dom";
const TEAM_MEMBERS = [
{
name: "Dr. Sarah Chen",
role: "Head of Research",
bio: "Leading innovation in game development frameworks",
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah",
skills: ["Research", "Architecture", "Leadership"],
social: { github: "#", linkedin: "#", email: "#" },
},
{
name: "Marcus Johnson",
role: "Senior Engineer",
bio: "Expert in Roblox optimization and scaling",
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Marcus",
skills: ["Engineering", "Performance", "DevOps"],
social: { github: "#", linkedin: "#", email: "#" },
},
{
name: "Emma Rodriguez",
role: "Product Manager",
bio: "Driving Labs initiatives and collaboration",
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Emma",
skills: ["Product", "Strategy", "Design"],
social: { github: "#", linkedin: "#", email: "#" },
},
{
name: "James Lee",
role: "Documentation Lead",
bio: "Creating comprehensive learning resources",
avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=James",
skills: ["Documentation", "Education", "Content"],
social: { github: "#", linkedin: "#", email: "#" },
},
];
export default function LabsTeams() {
const navigate = useNavigate();
return (
<Layout>
<div className="relative min-h-screen bg-black text-white overflow-hidden">
{/* Animated backgrounds */}
<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" />
<main className="relative z-10">
{/* Header */}
<section className="relative overflow-hidden py-12 lg:py-16">
<div className="container mx-auto max-w-6xl px-4">
<Button
onClick={() => navigate("/labs")}
variant="ghost"
className="text-yellow-300 hover:bg-yellow-500/10 mb-8"
>
← Back to Labs
</Button>
<div className="mb-12">
<Badge className="border-yellow-400/40 bg-yellow-500/10 text-yellow-300 mb-4">
<Users className="h-4 w-4 mr-2" />
Our Team
</Badge>
<h1 className="text-4xl font-black tracking-tight text-yellow-300 sm:text-5xl mb-4">
Meet the AeThex Labs Team
</h1>
<p className="text-lg text-yellow-100/80 max-w-2xl">
Passionate researchers and engineers dedicated to advancing game development
</p>
</div>
</div>
</section>
{/* Team Grid */}
<section className="py-12 lg:py-16">
<div className="container mx-auto max-w-6xl px-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
{TEAM_MEMBERS.map((member) => (
<Card
key={member.name}
className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 hover:bg-yellow-950/30 transition-all"
>
<CardHeader className="text-center">
<img
src={member.avatar}
alt={member.name}
className="w-20 h-20 rounded-full mx-auto mb-4 border-2 border-yellow-400/50"
/>
<CardTitle className="text-yellow-300">{member.name}</CardTitle>
<p className="text-sm text-yellow-200/70 mt-1">{member.role}</p>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-sm text-yellow-200/70">{member.bio}</p>
<div className="flex flex-wrap gap-2">
{member.skills.map((skill) => (
<Badge
key={skill}
className="bg-yellow-500/20 text-yellow-300 border-0 text-xs"
>
{skill}
</Badge>
))}
</div>
<div className="flex gap-3 pt-2">
<a href={member.social.github} className="text-yellow-400 hover:text-yellow-300">
<Github className="h-5 w-5" />
</a>
<a href={member.social.linkedin} className="text-yellow-400 hover:text-yellow-300">
<Linkedin className="h-5 w-5" />
</a>
<a href={member.social.email} className="text-yellow-400 hover:text-yellow-300">
<Mail className="h-5 w-5" />
</a>
</div>
</CardContent>
</Card>
))}
</div>
{/* Hiring Section */}
<div className="rounded-lg border border-yellow-400/30 bg-yellow-950/20 p-8 text-center">
<h2 className="text-2xl font-bold text-yellow-300 mb-4">Join Our Team</h2>
<p className="text-yellow-200/80 mb-6 max-w-2xl mx-auto">
We're always looking for talented researchers, engineers, and educators to join AeThex Labs
</p>
<Button className="bg-yellow-400 text-black hover:bg-yellow-300">
View Open Positions
</Button>
</div>
</div>
</section>
</main>
</div>
</Layout>
);
}