Fix Explore duplication and revamp 'What We Build' with richer cards; add standalone Labs section
cgen-1d2e3df5344a4d66bac3c417cd705135
This commit is contained in:
Builder.io
parent
df9bae390f
commit
9f206bac9c
1 changed files with 52 additions and 102 deletions
|
|
@ -245,26 +245,6 @@ export default function Explore() {
|
|||
Explore services, programs, resources, and community
|
||||
</p>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div className="mt-6 flex flex-wrap justify-center gap-3 animate-fade-in">
|
||||
{[
|
||||
{ label: "Dashboard", href: "/dashboard" },
|
||||
{ label: "Feed", href: "/feed" },
|
||||
{ label: "Passport", href: "/passport/me" },
|
||||
{ label: "Docs", href: "/docs" },
|
||||
{ label: "Community", href: "/community" },
|
||||
].map((q, i) => (
|
||||
<Button
|
||||
key={q.label}
|
||||
asChild
|
||||
variant="outline"
|
||||
className="border-border/50 hover:border-aethex-400/50"
|
||||
style={{ animationDelay: `${i * 0.05}s` }}
|
||||
>
|
||||
<Link to={q.href}>{q.label}</Link>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
|
|
@ -312,39 +292,6 @@ export default function Explore() {
|
|||
</Card>
|
||||
))}
|
||||
|
||||
<Card id="labs" className="relative overflow-hidden border border-yellow-400/40 bg-black/80 text-yellow-100 shadow-[0_0_20px_rgba(250,204,21,0.15)] transition-all duration-500 hover:-translate-y-1 hover:border-yellow-300 group">
|
||||
<div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-yellow-500/10 via-transparent to-transparent opacity-0 group-hover:opacity-40 transition-opacity duration-500" />
|
||||
<CardHeader className="relative space-y-2">
|
||||
<CardTitle className="flex items-center gap-2 text-lg">
|
||||
<Microscope className="h-5 w-5 text-yellow-300" />
|
||||
AeThex Labs
|
||||
</CardTitle>
|
||||
<CardDescription className="text-yellow-100/70">
|
||||
BlackSite R&D portal synced with Labs mainframe
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="relative space-y-3">
|
||||
<Button
|
||||
asChild
|
||||
className="w-full bg-yellow-400 text-black hover:bg-yellow-300 shadow-[0_0_18px_rgba(250,204,21,0.25)]"
|
||||
>
|
||||
<Link to="/research">Open Interface</Link>
|
||||
</Button>
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
className="w-full border-yellow-400/60 text-yellow-200 hover:bg-yellow-500/10"
|
||||
>
|
||||
<a
|
||||
href="https://labs.aethex.biz"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Visit labs.aethex.biz
|
||||
</a>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
|
||||
|
|
@ -414,73 +361,76 @@ export default function Explore() {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* Labs Spotlight */}
|
||||
<section id="labs" className="py-16 sm:py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
<Card className="relative overflow-hidden border border-yellow-400/40 bg-black/85 text-yellow-100 shadow-[0_0_24px_rgba(250,204,21,0.15)]">
|
||||
<div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-yellow-500/10 via-transparent to-transparent" />
|
||||
<CardContent className="p-8 grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
|
||||
<div className="space-y-3">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-yellow-400/40 px-3 py-1 text-xs uppercase tracking-widest">R&D</div>
|
||||
<h3 className="text-2xl font-bold flex items-center gap-2">
|
||||
<Microscope className="h-5 w-5 text-yellow-300" /> AeThex Labs
|
||||
</h3>
|
||||
<p className="text-yellow-100/80">
|
||||
Experimental interfaces, prototypes, and internal tooling. Enter the BlackSite to see what's next.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-end">
|
||||
<Button asChild className="bg-yellow-400 text-black hover:bg-yellow-300">
|
||||
<Link to="/research">Open Interface</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="border-yellow-400/60 text-yellow-200 hover:bg-yellow-500/10">
|
||||
<a href="https://labs.aethex.biz" target="_blank" rel="noreferrer">Visit labs.aethex.biz</a>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Technology Showcase */}
|
||||
<section id="technology" className="py-16 sm:py-20 relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-aethex-900/20 via-transparent to-neon-blue/20" />
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-12">
|
||||
<div className="max-w-5xl mx-auto text-center space-y-10">
|
||||
<div className="animate-slide-up">
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-6">
|
||||
<h2 className="text-3xl lg:text-4xl font-bold text-gradient mb-4">
|
||||
What We Build
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
Built on cutting-edge frameworks and powered by advanced
|
||||
algorithms
|
||||
<p className="text-lg text-muted-foreground max-w-3xl mx-auto">
|
||||
Systems, tools, and experiences that power creators and teams.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in">
|
||||
{[
|
||||
{
|
||||
name: "Game Studios",
|
||||
status: "Active",
|
||||
color: "from-purple-500 to-blue-600",
|
||||
},
|
||||
{
|
||||
name: "Design Systems",
|
||||
status: "Evolving",
|
||||
color: "from-blue-500 to-green-600",
|
||||
},
|
||||
{
|
||||
name: "Creator Tools",
|
||||
status: "Live",
|
||||
color: "from-green-500 to-yellow-600",
|
||||
},
|
||||
{
|
||||
name: "Launch Ops",
|
||||
status: "Scaling",
|
||||
color: "from-yellow-500 to-red-600",
|
||||
},
|
||||
{
|
||||
name: "Content Pipeline",
|
||||
status: "In Progress",
|
||||
color: "from-red-500 to-purple-600",
|
||||
},
|
||||
{
|
||||
name: "Edge Experiences",
|
||||
status: "Deployed",
|
||||
color: "from-purple-500 to-pink-600",
|
||||
},
|
||||
{ name: "Game Studios", status: "Active", color: "from-purple-500 to-blue-600", icon: Rocket, desc: "Production pipelines, content tooling, and live ops." },
|
||||
{ name: "Design Systems", status: "Evolving", color: "from-blue-500 to-green-600", icon: Layers, desc: "Unified components and patterns across apps." },
|
||||
{ name: "Creator Tools", status: "Live", color: "from-green-500 to-yellow-600", icon: Terminal, desc: "CLI, automation, and workflow accelerators." },
|
||||
{ name: "Launch Ops", status: "Scaling", color: "from-yellow-500 to-red-600", icon: Shield, desc: "Release orchestration, quality gates, and metrics." },
|
||||
{ name: "Content Pipeline", status: "In Progress", color: "from-red-500 to-purple-600", icon: BookOpen, desc: "Publishing, assets, and distribution systems." },
|
||||
{ name: "Edge Experiences", status: "Deployed", color: "from-purple-500 to-pink-600", icon: Users, desc: "Low-latency interfaces on the edge." },
|
||||
].map((tech, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className="relative overflow-hidden bg-card/30 border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift group animate-scale-in"
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
className="relative overflow-hidden bg-card/40 border-border/50 hover:border-aethex-400/50 transition-all duration-500 hover-lift group animate-scale-in"
|
||||
style={{ animationDelay: `${index * 0.08}s` }}
|
||||
>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-semibold text-gradient group-hover:animate-pulse">
|
||||
{tech.name}
|
||||
</h3>
|
||||
<div
|
||||
className={`w-3 h-3 rounded-full bg-gradient-to-r ${tech.color} animate-pulse`}
|
||||
/>
|
||||
<CardContent className="p-6 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-9 h-9 rounded-md bg-gradient-to-r ${tech.color} grid place-items-center`}>
|
||||
{/* @ts-ignore */}
|
||||
<tech.icon className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
<h3 className="font-semibold text-foreground">{tech.name}</h3>
|
||||
</div>
|
||||
<span className="text-xs px-2 py-0.5 rounded-full border border-white/10 text-muted-foreground">{tech.status}</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{tech.status}
|
||||
</p>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-aethex-400/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />
|
||||
<p className="text-sm text-muted-foreground">{tech.desc}</p>
|
||||
<div className={`mt-1 h-[2px] w-16 rounded-full bg-gradient-to-r ${tech.color} opacity-60 group-hover:opacity-100 transition-opacity`} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Reference in a new issue