From 54af78f1bf601f37ba1c38d03b587cfa40763169 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 18 Oct 2025 21:56:41 +0000
Subject: [PATCH] Revamp Investors page with red-themed robust layout mimicking
 About/Labs

cgen-c31b9a70c19049329f70e208897d9cb0
---
 client/pages/Investors.tsx | 317 ++++++++++++++++++++++++-------------
 1 file changed, 209 insertions(+), 108 deletions(-)

diff --git a/client/pages/Investors.tsx b/client/pages/Investors.tsx
index 537b5da6..1b4b450c 100644
--- a/client/pages/Investors.tsx
+++ b/client/pages/Investors.tsx
@@ -1,16 +1,35 @@
 import Layout from "@/components/Layout";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { useAuth } from "@/contexts/AuthContext";
-import { useState } from "react";
 import { useToast } from "@/hooks/use-toast";
+import { useRef, useState } from "react";
+import { Link } from "react-router-dom";
+import {
+  Flame,
+  BarChart3,
+  Layers,
+  Shield,
+  Handshake,
+  Building2,
+  Target,
+  Rocket,
+} from "lucide-react";
 
 export default function Investors() {
   const { user, profile, updateProfile } = useAuth();
   const { toast } = useToast();
+  const formRef = useRef<HTMLDivElement | null>(null);
+
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [amount, setAmount] = useState("");
@@ -18,6 +37,10 @@ export default function Investors() {
   const [message, setMessage] = useState("");
   const [submitting, setSubmitting] = useState(false);
 
+  const isClientRealm = (profile as any)?.user_type === "client";
+
+  const scrollToForm = () => formRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+
   const submit = async () => {
     if (!email.trim()) {
       toast({ variant: "destructive", description: "Email is required" });
@@ -32,7 +55,11 @@ export default function Investors() {
       });
       if (!resp.ok) throw new Error("Failed to submit");
       toast({ title: "Thanks!", description: "We’ll follow up with next steps." });
-      setName(""); setEmail(""); setAmount(""); setMessage(""); setAccredited(false);
+      setName("");
+      setEmail("");
+      setAmount("");
+      setMessage("");
+      setAccredited(false);
     } catch (e: any) {
       toast({ variant: "destructive", description: e?.message || "Try again later" });
     } finally {
@@ -49,122 +76,196 @@ export default function Investors() {
     }
   };
 
-  const isClientRealm = (profile as any)?.user_type === "client";
-
   return (
     <Layout>
-      <div className="mx-auto w-full max-w-6xl px-4 py-10 lg:px-6 space-y-8">
-        <div>
-          <Badge variant="outline" className="mb-2">Investors</Badge>
-          <h1 className="text-3xl font-bold">Partner with AeThex</h1>
-          <p className="text-muted-foreground max-w-2xl">Learn about our vision, traction, and how to participate in future financings. This page is informational and not an offer to sell securities.</p>
-        </div>
+      <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]" />
 
-        <div className="grid gap-6 md:grid-cols-2">
-          <Card>
-            <CardHeader>
-              <CardTitle>Investor interest</CardTitle>
-              <CardDescription>Request our investor packet and updates</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              <Input placeholder="Full name" value={name} onChange={(e) => setName(e.target.value)} />
-              <Input placeholder="Email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
-              <Input placeholder="Indicative amount (optional)" value={amount} onChange={(e) => setAmount(e.target.value)} />
-              <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={accredited} onChange={(e) => setAccredited(e.target.checked)} /> I am an accredited investor (self-attested)</label>
-              <Textarea placeholder="Message (optional)" value={message} onChange={(e) => setMessage(e.target.value)} />
-              <div className="flex gap-2">
-                <Button onClick={submit} disabled={submitting}>{submitting ? "Sending…" : "Request Info"}</Button>
-                <Button variant="outline" asChild>
-                  <a href="/docs" target="_self">View Docs</a>
-                </Button>
-              </div>
-              <p className="text-xs text-muted-foreground">Disclaimer: This is not an offer to sell securities. Any offering will be made only through proper exempt offering documents via a compliant portal.</p>
-            </CardContent>
-          </Card>
+        <main className="relative z-10">
+          {/* Hero */}
+          <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">
+                <Badge
+                  variant="outline"
+                  className="border-red-400/40 bg-red-500/10 text-red-300 shadow-[0_0_20px_rgba(239,68,68,0.2)]"
+                >
+                  <span className="mr-2 inline-flex h-2 w-2 animate-pulse rounded-full bg-red-300" />
+                  Investor Relations
+                </Badge>
 
-          <Card>
-            <CardHeader>
-              <CardTitle>Realm for investors</CardTitle>
-              <CardDescription>Investors map to the Client realm (strategic partners)</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              <p className="text-sm text-muted-foreground">The Client realm gives access to engagement dashboards, briefings, and investor updates. You can switch realms anytime from Realms.</p>
-              {user ? (
-                <Button onClick={activateClientRealm} disabled={isClientRealm}>
-                  {isClientRealm ? "Client realm active" : "Activate Client realm"}
-                </Button>
-              ) : (
-                <Button asChild>
-                  <a href="/onboarding">Create account to activate</a>
-                </Button>
-              )}
-              <Button variant="outline" asChild>
-                <a href="/realms">Open Realms</a>
-              </Button>
-            </CardContent>
-          </Card>
-        </div>
+                <h1 className="text-4xl font-black tracking-tight text-red-300 sm:text-5xl lg:text-6xl">
+                  AeThex | Building With Conviction
+                </h1>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>What is AeThex</CardTitle>
-            <CardDescription>Mission, vision, and how we operate</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="grid md:grid-cols-3 gap-4 text-sm text-muted-foreground">
-              <div>
-                <h4 className="font-semibold text-foreground mb-1">Mission</h4>
-                <p>Empower creators and companies to craft digital experiences faster through world‑class tooling, collaboration, and community.</p>
-              </div>
-              <div>
-                <h4 className="font-semibold text-foreground mb-1">Vision</h4>
-                <p>An ecosystem where ideas move from concept to playable/productized reality with less friction—open, collaborative, and measurable.</p>
-              </div>
-              <div>
-                <h4 className="font-semibold text-foreground mb-1">What we do</h4>
-                <ul className="list-disc pl-5 space-y-1">
-                  <li>Studios: design, engineering, and production services</li>
-                  <li>Platform: community, mentorship, and workflows</li>
-                  <li>Research: labs, prototypes, and technical content</li>
-                </ul>
+                <p className="text-lg text-red-100/90 sm:text-xl">
+                  We craft reliable, loved software and the platform that powers
+                  creators. Explore our thesis, traction, and how to participate
+                  in compliant offerings.
+                </p>
+
+                <div className="flex flex-col gap-4 sm:flex-row">
+                  <Button
+                    size="lg"
+                    className="bg-red-500 text-white shadow-[0_0_30px_rgba(239,68,68,0.35)] transition hover:bg-red-400"
+                    onClick={scrollToForm}
+                  >
+                    <Handshake className="mr-2 h-5 w-5" />
+                    Request Investor Info
+                  </Button>
+                  <Button
+                    asChild
+                    size="lg"
+                    variant="outline"
+                    className="border-red-400/60 text-red-300 hover:bg-red-500/10"
+                  >
+                    <Link to="/about">
+                      <Rocket className="mr-2 h-5 w-5" />
+                      Read About AeThex
+                    </Link>
+                  </Button>
+                </div>
               </div>
             </div>
-            <div className="grid md:grid-cols-2 gap-4 text-sm text-muted-foreground">
-              <div>
-                <h4 className="font-semibold text-foreground mb-1">How we execute</h4>
-                <ul className="list-disc pl-5 space-y-1">
-                  <li>Realm���based dashboards for client, community, and staff</li>
-                  <li>Data‑driven delivery and open collaboration</li>
-                  <li>Ethical, security‑first engineering practices</li>
-                </ul>
+          </section>
+
+          {/* Thesis + Segments */}
+          <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="mb-12 flex items-start justify-between gap-6">
+                <div>
+                  <h2 className="text-3xl font-bold text-red-300 sm:text-4xl">Investment Thesis</h2>
+                  <p className="mt-3 max-w-2xl text-sm text-red-100/70 sm:text-base">
+                    Software creation is shifting to collaborative, real‑time
+                    networks. AeThex aligns world‑class services, platform, and
+                    research to accelerate outcomes for builders and brands.
+                  </p>
+                </div>
+                <Flame className="hidden h-10 w-10 text-red-400/70 sm:block" />
               </div>
-              <div>
-                <h4 className="font-semibold text-foreground mb-1">Traction & roadmap</h4>
-                <ul className="list-disc pl-5 space-y-1">
-                  <li>Growing community and content footprint</li>
-                  <li>Mentorship and collaboration features shipping</li>
-                  <li>Commerce for merch/digital goods coming online</li>
-                </ul>
+
+              <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+                {[{
+                  icon: <Layers className=\"h-5 w-5\" />, title: "Three Engines", desc: "Studios (services), Platform (community), and Labs (R&D) compound value together."
+                },{
+                  icon: <Shield className=\"h-5 w-5\" />, title: "Trust & Quality", desc: "Security‑first engineering and measurable delivery keep churn low and NPS high."
+                },{
+                  icon: <Target className=\"h-5 w-5\" />, title: "Focused Markets", desc: "High‑signal segments: games, real‑time apps, and experience platforms."
+                }].map((b) => (
+                  <Card key={b.title} className="border border-red-400/20 bg-black/60 backdrop-blur">
+                    <CardHeader className="space-y-2">
+                      <CardTitle className="flex items-center gap-2 text-red-100">
+                        {b.icon}
+                        {b.title}
+                      </CardTitle>
+                      <CardDescription className="text-red-200/80">{b.desc}</CardDescription>
+                    </CardHeader>
+                  </Card>
+                ))}
               </div>
             </div>
-          </CardContent>
-        </Card>
+          </section>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>How to invest (legal paths)</CardTitle>
-            <CardDescription>We work with compliant frameworks</CardDescription>
-          </CardHeader>
-          <CardContent className="text-sm text-muted-foreground space-y-2">
-            <ul className="list-disc pl-5 space-y-1">
-              <li>Seed/SAFE via Reg D 506(c) for accredited investors (KYC/AML and accreditation checks required).</li>
-              <li>Community rounds via Reg CF on a registered funding portal (e.g., Wefunder/StartEngine) for non‑accredited participants.</li>
-              <li>Larger public-ready rounds via Reg A+ with audited financials and qualified offering circular.</li>
-            </ul>
-            <p>Investment funds are not accepted on this site. Product purchases (merch or digital goods) are separate consumer transactions and do not constitute securities.</p>
-          </CardContent>
-        </Card>
+          {/* KPIs */}
+          <section className="py-16">
+            <div className="container mx-auto max-w-6xl px-4">
+              <div className="grid gap-4 md:grid-cols-4">
+                {[{kpi: "50+", label: "Projects shipped"}, {kpi: "10x", label: "Perf improvements"}, {kpi: "99.9%", label: "Uptime targets"}, {kpi: "<30d", label: "MVP timelines"}].map((m) => (
+                  <Card key={m.label} className="border border-red-400/15 bg-black/70 text-center">
+                    <CardContent className="p-6">
+                      <div className="text-3xl font-bold text-red-300">{m.kpi}</div>
+                      <div className="mt-1 text-sm text-red-100/80">{m.label}</div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* Interest + Realm */}
+          <section ref={formRef} className="border-y border-red-400/10 bg-black/85 py-16">
+            <div className="container mx-auto max-w-6xl px-4">
+              <div className="grid gap-6 md:grid-cols-2">
+                <Card className="border border-red-400/20 bg-black/70">
+                  <CardHeader>
+                    <CardTitle className="text-red-100">Investor interest</CardTitle>
+                    <CardDescription className="text-red-200/80">Request our investor packet and updates</CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-3">
+                    <Input placeholder="Full name" value={name} onChange={(e) => setName(e.target.value)} />
+                    <Input placeholder="Email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+                    <Input placeholder="Indicative amount (optional)" value={amount} onChange={(e) => setAmount(e.target.value)} />
+                    <label className="flex items-center gap-2 text-sm text-red-100/80"><input type="checkbox" checked={accredited} onChange={(e) => setAccredited(e.target.checked)} /> I am an accredited investor (self‑attested)</label>
+                    <Textarea placeholder="Message (optional)" value={message} onChange={(e) => setMessage(e.target.value)} />
+                    <div className="flex flex-wrap gap-2">
+                      <Button onClick={submit} disabled={submitting} className="bg-red-500 hover:bg-red-400">
+                        {submitting ? "Sending…" : "Request Info"}
+                      </Button>
+                      <Button variant="outline" asChild className="border-red-400/60 text-red-300 hover:bg-red-500/10">
+                        <Link to="/docs">View Docs</Link>
+                      </Button>
+                    </div>
+                    <p className="text-xs text-red-200/70">This page is informational only and not an offer to sell securities.</p>
+                  </CardContent>
+                </Card>
+
+                <Card className="border border-red-400/20 bg-black/70">
+                  <CardHeader>
+                    <CardTitle className="text-red-100">Realm for investors</CardTitle>
+                    <CardDescription className="text-red-200/80">Investors map to the Client realm (strategic partners)</CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-3">
+                    <p className="text-sm text-red-100/80">Client realm provides engagement dashboards, briefings, and investor updates. Switch realms anytime from Realms.</p>
+                    {user ? (
+                      <Button onClick={activateClientRealm} disabled={isClientRealm} className="bg-red-500 hover:bg-red-400">
+                        {isClientRealm ? "Client realm active" : "Activate Client realm"}
+                      </Button>
+                    ) : (
+                      <Button asChild className="bg-red-500 hover:bg-red-400">
+                        <Link to="/onboarding">Create account to activate</Link>
+                      </Button>
+                    )}
+                    <Button variant="outline" asChild className="border-red-400/60 text-red-300 hover:bg-red-500/10">
+                      <Link to="/realms">Open Realms</Link>
+                    </Button>
+                    <div className="rounded border border-red-400/20 bg-black/60 p-4">
+                      <div className="mb-1 text-xs uppercase text-red-400/80">Why AeThex</div>
+                      <ul className="list-disc pl-5 text-sm text-red-100/80 space-y-1">
+                        <li>End‑to‑end capabilities (services + platform + labs)</li>
+                        <li>Strong builder brand, ethical engineering</li>
+                        <li>Clear roadmap to commerce (merch/digital goods)</li>
+                      </ul>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            </div>
+          </section>
+
+          {/* Legal */}
+          <section className="py-16">
+            <div className="container mx-auto max-w-6xl px-4">
+              <Card className="border border-red-400/15 bg-black/70">
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2 text-red-100">
+                    <Building2 className="h-5 w-5" /> How to invest (legal paths)
+                  </CardTitle>
+                  <CardDescription className="text-red-200/80">We work with compliant frameworks</CardDescription>
+                </CardHeader>
+                <CardContent className="text-sm text-red-100/80 space-y-2">
+                  <ul className="list-disc pl-5 space-y-1">
+                    <li>Seed/SAFE via Reg D 506(c) for accredited investors (KYC/AML and accreditation checks required).</li>
+                    <li>Community rounds via Reg CF on a registered funding portal (e.g., Wefunder/StartEngine) for non‑accredited participants.</li>
+                    <li>Larger public‑ready rounds via Reg A+ with audited financials and a qualified offering circular.</li>
+                  </ul>
+                  <p>Investment funds are not accepted on this site. Product purchases (merch or digital goods) are separate consumer transactions and do not constitute securities.</p>
+                </CardContent>
+              </Card>
+            </div>
+          </section>
+        </main>
       </div>
     </Layout>
   );
-}
+}
\ No newline at end of file