Labs landing page with full-page yellow immersive styling

cgen-6bc072443dd14d42a3cadd4429bf743d
This commit is contained in:
Builder.io 2025-11-06 18:41:03 +00:00
parent ddebf59ce4
commit bcb5c9bded
4 changed files with 457 additions and 369 deletions

View file

@ -1,34 +1,50 @@
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Briefcase, Settings, TrendingUp, Users } from "lucide-react"; import { Briefcase, Settings, TrendingUp, Users } from "lucide-react";
export default function Corp() { export default function Corp() {
return ( return (
<Layout> <Layout>
<div className="min-h-screen bg-aethex-gradient py-8"> <div className="relative min-h-screen bg-black text-white">
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#3b82f6_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(59,130,246,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
<main className="relative z-10">
{/* Hero Section */} {/* Hero Section */}
<section className="relative overflow-hidden"> <section className="relative overflow-hidden py-20 lg:py-28">
<div className="absolute inset-0 bg-gradient-to-b from-blue-500/10 to-transparent" /> <div className="container mx-auto max-w-6xl px-4 text-center">
<div className="container mx-auto max-w-7xl relative px-4 py-20 md:py-32"> <div className="mx-auto flex max-w-3xl flex-col items-center gap-8">
<div className="text-center space-y-6 animate-slide-down"> <Badge
<div className="inline-block"> variant="outline"
<div className="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-500/20 border border-blue-500/30 text-blue-400"> className="border-blue-400/40 bg-blue-500/10 text-blue-300 shadow-[0_0_20px_rgba(59,130,246,0.2)]"
<Briefcase className="h-4 w-4" /> >
<span className="text-sm font-medium">Aethex Corp</span> <span className="mr-2 inline-flex h-2 w-2 animate-pulse rounded-full bg-blue-300" />
</div> Aethex Corp
</div> </Badge>
<h1 className="text-5xl md:text-6xl font-bold text-white">
<h1 className="text-4xl font-black tracking-tight text-blue-300 sm:text-5xl lg:text-6xl">
Enterprise Solutions Enterprise Solutions
</h1> </h1>
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
<p className="text-lg text-blue-100/90 sm:text-xl">
Strategic consulting, technology integration, and digital transformation for enterprises. We help companies navigate the future. Strategic consulting, technology integration, and digital transformation for enterprises. We help companies navigate the future.
</p> </p>
<div className="flex gap-4 justify-center pt-4">
<Button size="lg" className="bg-blue-500 hover:bg-blue-600 text-white"> <div className="flex flex-col gap-4 sm:flex-row">
<Button
size="lg"
className="bg-blue-400 text-black shadow-[0_0_30px_rgba(59,130,246,0.35)] transition hover:bg-blue-300"
>
<Briefcase className="mr-2 h-5 w-5" />
Schedule Consultation Schedule Consultation
</Button> </Button>
<Button size="lg" variant="outline"> <Button
size="lg"
variant="outline"
className="border-blue-400/60 text-blue-300 hover:bg-blue-500/10"
>
View Case Studies View Case Studies
</Button> </Button>
</div> </div>
@ -37,72 +53,78 @@ export default function Corp() {
</section> </section>
{/* Services Grid */} {/* Services Grid */}
<section className="container mx-auto max-w-7xl px-4 py-16"> <section className="border-y border-blue-400/10 bg-black/80 py-16">
<div className="container mx-auto max-w-6xl px-4">
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<Card className="bg-card/50 border-border/50 hover:border-blue-500/50 transition-colors"> <Card className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-colors">
<CardHeader> <CardHeader>
<Settings className="h-8 w-8 text-blue-400 mb-2" /> <Settings className="h-8 w-8 text-blue-400 mb-2" />
<CardTitle>Consulting</CardTitle> <CardTitle className="text-blue-300">Consulting</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-gray-400"> <p className="text-sm text-blue-200/70">
Strategic guidance for digital transformation and technology adoption. Strategic guidance for digital transformation and technology adoption.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card/50 border-border/50 hover:border-blue-500/50 transition-colors"> <Card className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-colors">
<CardHeader> <CardHeader>
<TrendingUp className="h-8 w-8 text-blue-400 mb-2" /> <TrendingUp className="h-8 w-8 text-blue-400 mb-2" />
<CardTitle>Scale & Growth</CardTitle> <CardTitle className="text-blue-300">Scale & Growth</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-gray-400"> <p className="text-sm text-blue-200/70">
Build robust systems designed for enterprise scale and reliability. Build robust systems designed for enterprise scale and reliability.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card/50 border-border/50 hover:border-blue-500/50 transition-colors"> <Card className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-colors">
<CardHeader> <CardHeader>
<Users className="h-8 w-8 text-blue-400 mb-2" /> <Users className="h-8 w-8 text-blue-400 mb-2" />
<CardTitle>Team Partnership</CardTitle> <CardTitle className="text-blue-300">Team Partnership</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-gray-400"> <p className="text-sm text-blue-200/70">
Work with dedicated teams augmenting your existing development capacity. Work with dedicated teams augmenting your existing development capacity.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card/50 border-border/50 hover:border-blue-500/50 transition-colors"> <Card className="bg-blue-950/20 border-blue-400/30 hover:border-blue-400/60 transition-colors">
<CardHeader> <CardHeader>
<Briefcase className="h-8 w-8 text-blue-400 mb-2" /> <Briefcase className="h-8 w-8 text-blue-400 mb-2" />
<CardTitle>Solutions</CardTitle> <CardTitle className="text-blue-300">Solutions</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-gray-400"> <p className="text-sm text-blue-200/70">
Custom solutions tailored to your business needs and technical requirements. Custom solutions tailored to your business needs and technical requirements.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
</div>
</section> </section>
{/* CTA Section */} {/* CTA Section */}
<section className="container mx-auto max-w-7xl px-4 py-16"> <section className="py-20 lg:py-28">
<div className="rounded-xl bg-gradient-to-r from-blue-500/20 to-blue-600/20 border border-blue-500/30 p-8 md:p-16 text-center"> <div className="container mx-auto max-w-4xl px-4 text-center">
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4"> <h2 className="text-4xl font-bold text-blue-300 mb-4">
Transform Your Business Transform Your Business
</h2> </h2>
<p className="text-lg text-gray-300 mb-8 max-w-2xl mx-auto"> <p className="text-lg text-blue-100/80 mb-8">
Let's discuss how AeThex Corp can help accelerate your digital initiatives and drive growth. Let's discuss how AeThex Corp can help accelerate your digital initiatives and drive growth.
</p> </p>
<Button size="lg" className="bg-blue-500 hover:bg-blue-600 text-white"> <Button
size="lg"
className="bg-blue-400 text-black shadow-[0_0_30px_rgba(59,130,246,0.35)] hover:bg-blue-300"
>
Contact Us Contact Us
</Button> </Button>
</div> </div>
</section> </section>
</main>
</div> </div>
</Layout> </Layout>
); );

View file

@ -1,34 +1,50 @@
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Heart, BookOpen, Code, Globe } from "lucide-react"; import { Heart, BookOpen, Code, Globe } from "lucide-react";
export default function Foundation() { export default function Foundation() {
return ( return (
<Layout> <Layout>
<div className="min-h-screen bg-aethex-gradient py-8"> <div className="relative min-h-screen bg-black text-white">
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#ef4444_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(239,68,68,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
<main className="relative z-10">
{/* Hero Section */} {/* Hero Section */}
<section className="relative overflow-hidden"> <section className="relative overflow-hidden py-20 lg:py-28">
<div className="absolute inset-0 bg-gradient-to-b from-red-500/10 to-transparent" /> <div className="container mx-auto max-w-6xl px-4 text-center">
<div className="container mx-auto max-w-7xl relative px-4 py-20 md:py-32"> <div className="mx-auto flex max-w-3xl flex-col items-center gap-8">
<div className="text-center space-y-6 animate-slide-down"> <Badge
<div className="inline-block"> variant="outline"
<div className="flex items-center gap-2 px-4 py-2 rounded-lg bg-red-500/20 border border-red-500/30 text-red-400"> className="border-red-400/40 bg-red-500/10 text-red-300 shadow-[0_0_20px_rgba(239,68,68,0.2)]"
<Heart className="h-4 w-4" /> >
<span className="text-sm font-medium">Aethex Foundation</span> <span className="mr-2 inline-flex h-2 w-2 animate-pulse rounded-full bg-red-300" />
</div> Aethex Foundation
</div> </Badge>
<h1 className="text-5xl md:text-6xl font-bold text-white">
<h1 className="text-4xl font-black tracking-tight text-red-300 sm:text-5xl lg:text-6xl">
Open Source &amp; Education Open Source &amp; Education
</h1> </h1>
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
<p className="text-lg text-red-100/90 sm:text-xl">
Democratizing technology through open source and education. We believe knowledge should be free, and great tools should be accessible to everyone. Democratizing technology through open source and education. We believe knowledge should be free, and great tools should be accessible to everyone.
</p> </p>
<div className="flex gap-4 justify-center pt-4">
<Button size="lg" className="bg-red-500 hover:bg-red-600 text-white"> <div className="flex flex-col gap-4 sm:flex-row">
<Button
size="lg"
className="bg-red-400 text-black shadow-[0_0_30px_rgba(239,68,68,0.35)] transition hover:bg-red-300"
>
<Heart className="mr-2 h-5 w-5" />
Contribute Contribute
</Button> </Button>
<Button size="lg" variant="outline"> <Button
size="lg"
variant="outline"
className="border-red-400/60 text-red-300 hover:bg-red-500/10"
>
Learn More Learn More
</Button> </Button>
</div> </div>
@ -37,72 +53,78 @@ export default function Foundation() {
</section> </section>
{/* Mission Grid */} {/* Mission Grid */}
<section className="container mx-auto max-w-7xl px-4 py-16"> <section className="border-y border-red-400/10 bg-black/80 py-16">
<div className="container mx-auto max-w-6xl px-4">
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<Card className="bg-card/50 border-border/50 hover:border-red-500/50 transition-colors"> <Card className="bg-red-950/20 border-red-400/30 hover:border-red-400/60 transition-colors">
<CardHeader> <CardHeader>
<Code className="h-8 w-8 text-red-400 mb-2" /> <Code className="h-8 w-8 text-red-400 mb-2" />
<CardTitle>Open Source</CardTitle> <CardTitle className="text-red-300">Open Source</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-gray-400"> <p className="text-sm text-red-200/70">
Publishing and maintaining tools that benefit the entire community. Publishing and maintaining tools that benefit the entire community.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card/50 border-border/50 hover:border-red-500/50 transition-colors"> <Card className="bg-red-950/20 border-red-400/30 hover:border-red-400/60 transition-colors">
<CardHeader> <CardHeader>
<BookOpen className="h-8 w-8 text-red-400 mb-2" /> <BookOpen className="h-8 w-8 text-red-400 mb-2" />
<CardTitle>Education</CardTitle> <CardTitle className="text-red-300">Education</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-gray-400"> <p className="text-sm text-red-200/70">
Accessible learning resources for developers at all skill levels. Accessible learning resources for developers at all skill levels.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card/50 border-border/50 hover:border-red-500/50 transition-colors"> <Card className="bg-red-950/20 border-red-400/30 hover:border-red-400/60 transition-colors">
<CardHeader> <CardHeader>
<Globe className="h-8 w-8 text-red-400 mb-2" /> <Globe className="h-8 w-8 text-red-400 mb-2" />
<CardTitle>Community</CardTitle> <CardTitle className="text-red-300">Community</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-gray-400"> <p className="text-sm text-red-200/70">
Building a welcoming ecosystem where everyone can grow and contribute. Building a welcoming ecosystem where everyone can grow and contribute.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card/50 border-border/50 hover:border-red-500/50 transition-colors"> <Card className="bg-red-950/20 border-red-400/30 hover:border-red-400/60 transition-colors">
<CardHeader> <CardHeader>
<Heart className="h-8 w-8 text-red-400 mb-2" /> <Heart className="h-8 w-8 text-red-400 mb-2" />
<CardTitle>Impact</CardTitle> <CardTitle className="text-red-300">Impact</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-gray-400"> <p className="text-sm text-red-200/70">
Creating positive change through technology and knowledge sharing. Creating positive change through technology and knowledge sharing.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
</div>
</section> </section>
{/* CTA Section */} {/* CTA Section */}
<section className="container mx-auto max-w-7xl px-4 py-16"> <section className="py-20 lg:py-28">
<div className="rounded-xl bg-gradient-to-r from-red-500/20 to-red-600/20 border border-red-500/30 p-8 md:p-16 text-center"> <div className="container mx-auto max-w-4xl px-4 text-center">
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4"> <h2 className="text-4xl font-bold text-red-300 mb-4">
Make an Impact Make an Impact
</h2> </h2>
<p className="text-lg text-gray-300 mb-8 max-w-2xl mx-auto"> <p className="text-lg text-red-100/80 mb-8">
Join us in our mission to make technology education and open source accessible to everyone around the world. Join us in our mission to make technology education and open source accessible to everyone around the world.
</p> </p>
<Button size="lg" className="bg-red-500 hover:bg-red-600 text-white"> <Button
size="lg"
className="bg-red-400 text-black shadow-[0_0_30px_rgba(239,68,68,0.35)] hover:bg-red-300"
>
Get Involved Get Involved
</Button> </Button>
</div> </div>
</section> </section>
</main>
</div> </div>
</Layout> </Layout>
); );

View file

@ -1,34 +1,50 @@
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Gamepad2, Zap, Target, Trophy } from "lucide-react"; import { Gamepad2, Zap, Target, Trophy } from "lucide-react";
export default function GameForge() { export default function GameForge() {
return ( return (
<Layout> <Layout>
<div className="min-h-screen bg-aethex-gradient py-8"> <div className="relative min-h-screen bg-black text-white">
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#22c55e_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(34,197,94,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
<main className="relative z-10">
{/* Hero Section */} {/* Hero Section */}
<section className="relative overflow-hidden"> <section className="relative overflow-hidden py-20 lg:py-28">
<div className="absolute inset-0 bg-gradient-to-b from-green-500/10 to-transparent" /> <div className="container mx-auto max-w-6xl px-4 text-center">
<div className="container mx-auto max-w-7xl relative px-4 py-20 md:py-32"> <div className="mx-auto flex max-w-3xl flex-col items-center gap-8">
<div className="text-center space-y-6 animate-slide-down"> <Badge
<div className="inline-block"> variant="outline"
<div className="flex items-center gap-2 px-4 py-2 rounded-lg bg-green-500/20 border border-green-500/30 text-green-400"> className="border-green-400/40 bg-green-500/10 text-green-300 shadow-[0_0_20px_rgba(34,197,94,0.2)]"
<Gamepad2 className="h-4 w-4" /> >
<span className="text-sm font-medium">GameForge</span> <span className="mr-2 inline-flex h-2 w-2 animate-pulse rounded-full bg-green-300" />
</div> GameForge
</div> </Badge>
<h1 className="text-5xl md:text-6xl font-bold text-white">
<h1 className="text-4xl font-black tracking-tight text-green-300 sm:text-5xl lg:text-6xl">
The Heart of AeThex The Heart of AeThex
</h1> </h1>
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
<p className="text-lg text-green-100/90 sm:text-xl">
Month-to-month shipping cycles. Rapid iteration. Continuous delivery. We don't just build gameswe build experiences with unstoppable momentum. Month-to-month shipping cycles. Rapid iteration. Continuous delivery. We don't just build gameswe build experiences with unstoppable momentum.
</p> </p>
<div className="flex gap-4 justify-center pt-4">
<Button size="lg" className="bg-green-500 hover:bg-green-600 text-black"> <div className="flex flex-col gap-4 sm:flex-row">
<Button
size="lg"
className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] transition hover:bg-green-300"
>
<Gamepad2 className="mr-2 h-5 w-5" />
Start Building Start Building
</Button> </Button>
<Button size="lg" variant="outline"> <Button
size="lg"
variant="outline"
className="border-green-400/60 text-green-300 hover:bg-green-500/10"
>
View Portfolio View Portfolio
</Button> </Button>
</div> </div>
@ -37,72 +53,78 @@ export default function GameForge() {
</section> </section>
{/* Features Grid */} {/* Features Grid */}
<section className="container mx-auto max-w-7xl px-4 py-16"> <section className="border-y border-green-400/10 bg-black/80 py-16">
<div className="container mx-auto max-w-6xl px-4">
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<Card className="bg-card/50 border-border/50 hover:border-green-500/50 transition-colors"> <Card className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors">
<CardHeader> <CardHeader>
<Zap className="h-8 w-8 text-green-400 mb-2" /> <Zap className="h-8 w-8 text-green-400 mb-2" />
<CardTitle>Monthly Releases</CardTitle> <CardTitle className="text-green-300">Monthly Releases</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-gray-400"> <p className="text-sm text-green-200/70">
Predictable shipping cycles. Every month, new features and improvements live. Predictable shipping cycles. Every month, new features and improvements live.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card/50 border-border/50 hover:border-green-500/50 transition-colors"> <Card className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors">
<CardHeader> <CardHeader>
<Target className="h-8 w-8 text-green-400 mb-2" /> <Target className="h-8 w-8 text-green-400 mb-2" />
<CardTitle>Rapid Iteration</CardTitle> <CardTitle className="text-green-300">Rapid Iteration</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-gray-400"> <p className="text-sm text-green-200/70">
Fast feedback loops. We listen, iterate, and ship what matters. Fast feedback loops. We listen, iterate, and ship what matters.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card/50 border-border/50 hover:border-green-500/50 transition-colors"> <Card className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors">
<CardHeader> <CardHeader>
<Trophy className="h-8 w-8 text-green-400 mb-2" /> <Trophy className="h-8 w-8 text-green-400 mb-2" />
<CardTitle>Quality Driven</CardTitle> <CardTitle className="text-green-300">Quality Driven</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-gray-400"> <p className="text-sm text-green-200/70">
High standards. Polished experiences. Every release is battle-tested. High standards. Polished experiences. Every release is battle-tested.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card/50 border-border/50 hover:border-green-500/50 transition-colors"> <Card className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-colors">
<CardHeader> <CardHeader>
<Gamepad2 className="h-8 w-8 text-green-400 mb-2" /> <Gamepad2 className="h-8 w-8 text-green-400 mb-2" />
<CardTitle>Player First</CardTitle> <CardTitle className="text-green-300">Player First</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-gray-400"> <p className="text-sm text-green-200/70">
Always focused on player experience. We build what gets played. Always focused on player experience. We build what gets played.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
</div>
</section> </section>
{/* CTA Section */} {/* CTA Section */}
<section className="container mx-auto max-w-7xl px-4 py-16"> <section className="py-20 lg:py-28">
<div className="rounded-xl bg-gradient-to-r from-green-500/20 to-green-600/20 border border-green-500/30 p-8 md:p-16 text-center"> <div className="container mx-auto max-w-4xl px-4 text-center">
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4"> <h2 className="text-4xl font-bold text-green-300 mb-4">
Ship With Momentum Ship With Momentum
</h2> </h2>
<p className="text-lg text-gray-300 mb-8 max-w-2xl mx-auto"> <p className="text-lg text-green-100/80 mb-8">
Join the fastest shipping team in the industry. We're looking for creators, developers, and visionaries. Join the fastest shipping team in the industry. We're looking for creators, developers, and visionaries.
</p> </p>
<Button size="lg" className="bg-green-500 hover:bg-green-600 text-black"> <Button
size="lg"
className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] hover:bg-green-300"
>
Join GameForge Join GameForge
</Button> </Button>
</div> </div>
</section> </section>
</main>
</div> </div>
</Layout> </Layout>
); );

View file

@ -1,34 +1,50 @@
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Beaker, Lightbulb, Zap, Users } from "lucide-react"; import { Beaker, Lightbulb, Zap, Users } from "lucide-react";
export default function Labs() { export default function Labs() {
return ( return (
<Layout> <Layout>
<div className="min-h-screen bg-aethex-gradient py-8"> <div className="relative min-h-screen bg-black text-white">
<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]" />
<main className="relative z-10">
{/* Hero Section */} {/* Hero Section */}
<section className="relative overflow-hidden"> <section className="relative overflow-hidden py-20 lg:py-28">
<div className="absolute inset-0 bg-gradient-to-b from-yellow-500/10 to-transparent" /> <div className="container mx-auto max-w-6xl px-4 text-center">
<div className="container mx-auto max-w-7xl relative px-4 py-20 md:py-32"> <div className="mx-auto flex max-w-3xl flex-col items-center gap-8">
<div className="text-center space-y-6 animate-slide-down"> <Badge
<div className="inline-block"> variant="outline"
<div className="flex items-center gap-2 px-4 py-2 rounded-lg bg-yellow-500/20 border border-yellow-500/30 text-yellow-400"> 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-4 w-4" /> >
<span className="text-sm font-medium">Aethex Labs</span> <span className="mr-2 inline-flex h-2 w-2 animate-pulse rounded-full bg-yellow-300" />
</div> Aethex Labs
</div> </Badge>
<h1 className="text-5xl md:text-6xl font-bold text-white">
<h1 className="text-4xl font-black tracking-tight text-yellow-300 sm:text-5xl lg:text-6xl">
Research &amp; Development Research &amp; Development
</h1> </h1>
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
<p className="text-lg text-yellow-100/90 sm:text-xl">
Where innovation meets experimentation. We push the boundaries of what's possible, exploring cutting-edge technologies and building the future. Where innovation meets experimentation. We push the boundaries of what's possible, exploring cutting-edge technologies and building the future.
</p> </p>
<div className="flex gap-4 justify-center pt-4">
<Button size="lg" className="bg-yellow-500 hover:bg-yellow-600 text-black"> <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"
>
<Beaker className="mr-2 h-5 w-5" />
Explore Research Explore Research
</Button> </Button>
<Button size="lg" variant="outline"> <Button
size="lg"
variant="outline"
className="border-yellow-400/60 text-yellow-300 hover:bg-yellow-500/10"
>
Join Our Team Join Our Team
</Button> </Button>
</div> </div>
@ -37,72 +53,78 @@ export default function Labs() {
</section> </section>
{/* Features Grid */} {/* Features Grid */}
<section className="container mx-auto max-w-7xl px-4 py-16"> <section className="border-y border-yellow-400/10 bg-black/80 py-16">
<div className="container mx-auto max-w-6xl px-4">
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<Card className="bg-card/50 border-border/50 hover:border-yellow-500/50 transition-colors"> <Card className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-colors">
<CardHeader> <CardHeader>
<Lightbulb className="h-8 w-8 text-yellow-400 mb-2" /> <Lightbulb className="h-8 w-8 text-yellow-400 mb-2" />
<CardTitle>Innovation</CardTitle> <CardTitle className="text-yellow-300">Innovation</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-gray-400"> <p className="text-sm text-yellow-200/70">
Exploring new technologies and methodologies to stay ahead of the curve. Exploring new technologies and methodologies to stay ahead of the curve.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card/50 border-border/50 hover:border-yellow-500/50 transition-colors"> <Card className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-colors">
<CardHeader> <CardHeader>
<Zap className="h-8 w-8 text-yellow-400 mb-2" /> <Zap className="h-8 w-8 text-yellow-400 mb-2" />
<CardTitle>Experimentation</CardTitle> <CardTitle className="text-yellow-300">Experimentation</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-gray-400"> <p className="text-sm text-yellow-200/70">
Testing ideas in controlled environments to validate concepts before production. Testing ideas in controlled environments to validate concepts before production.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card/50 border-border/50 hover:border-yellow-500/50 transition-colors"> <Card className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-colors">
<CardHeader> <CardHeader>
<Users className="h-8 w-8 text-yellow-400 mb-2" /> <Users className="h-8 w-8 text-yellow-400 mb-2" />
<CardTitle>Collaboration</CardTitle> <CardTitle className="text-yellow-300">Collaboration</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-gray-400"> <p className="text-sm text-yellow-200/70">
Working with researchers and developers to push technical boundaries. Working with researchers and developers to push technical boundaries.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-card/50 border-border/50 hover:border-yellow-500/50 transition-colors"> <Card className="bg-yellow-950/20 border-yellow-400/30 hover:border-yellow-400/60 transition-colors">
<CardHeader> <CardHeader>
<Beaker className="h-8 w-8 text-yellow-400 mb-2" /> <Beaker className="h-8 w-8 text-yellow-400 mb-2" />
<CardTitle>Documentation</CardTitle> <CardTitle className="text-yellow-300">Documentation</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-gray-400"> <p className="text-sm text-yellow-200/70">
Sharing findings and insights with the community for collective growth. Sharing findings and insights with the community for collective growth.
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
</div>
</section> </section>
{/* CTA Section */} {/* CTA Section */}
<section className="container mx-auto max-w-7xl px-4 py-16"> <section className="py-20 lg:py-28">
<div className="rounded-xl bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 border border-yellow-500/30 p-8 md:p-16 text-center"> <div className="container mx-auto max-w-4xl px-4 text-center">
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4"> <h2 className="text-4xl font-bold text-yellow-300 mb-4">
Be Part of the Future Be Part of the Future
</h2> </h2>
<p className="text-lg text-gray-300 mb-8 max-w-2xl mx-auto"> <p className="text-lg text-yellow-100/80 mb-8">
Join our research initiatives and help shape the next generation of technology. Join our research initiatives and help shape the next generation of technology.
</p> </p>
<Button size="lg" className="bg-yellow-500 hover:bg-yellow-600 text-black"> <Button
size="lg"
className="bg-yellow-400 text-black shadow-[0_0_30px_rgba(251,191,36,0.35)] hover:bg-yellow-300"
>
Get Involved Get Involved
</Button> </Button>
</div> </div>
</section> </section>
</main>
</div> </div>
</Layout> </Layout>
); );