From 9f206bac9cdf4865fb478e2bfe1425ba77306045 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 18 Oct 2025 02:01:22 +0000
Subject: [PATCH] Fix Explore duplication and revamp 'What We Build' with
 richer cards; add standalone Labs section

cgen-1d2e3df5344a4d66bac3c417cd705135
---
 client/pages/Explore.tsx | 154 +++++++++++++--------------------------
 1 file changed, 52 insertions(+), 102 deletions(-)

diff --git a/client/pages/Explore.tsx b/client/pages/Explore.tsx
index 18523a77..c7f1a1f3 100644
--- a/client/pages/Explore.tsx
+++ b/client/pages/Explore.tsx
@@ -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>
               ))}