From 8cfad128c19fa1264bbe7bf00c66f1d799f60e7c Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Sat, 18 Oct 2025 21:58:00 +0000
Subject: [PATCH] Fix and finalize red-themed Investors page

cgen-edd9a638ed5543fe96c91eea0d3dbc97
---
 client/pages/Investors.tsx | 141 +++++++++++--------------------------
 1 file changed, 43 insertions(+), 98 deletions(-)

diff --git a/client/pages/Investors.tsx b/client/pages/Investors.tsx
index 1b4b450c..8d915ac0 100644
--- a/client/pages/Investors.tsx
+++ b/client/pages/Investors.tsx
@@ -1,12 +1,6 @@
 import Layout from "@/components/Layout";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+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";
@@ -14,16 +8,9 @@ import { useAuth } from "@/contexts/AuthContext";
 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";
+import { Flame, BarChart3, Layers, Shield, Handshake, Building2, Target, Rocket } from "lucide-react";
+
+type ThesisPoint = { icon: JSX.Element; title: string; desc: string };
 
 export default function Investors() {
   const { user, profile, updateProfile } = useAuth();
@@ -55,11 +42,7 @@ 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 {
@@ -76,6 +59,19 @@ export default function Investors() {
     }
   };
 
+  const thesis: ThesisPoint[] = [
+    { 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." },
+  ];
+
+  const kpis = [
+    { kpi: "50+", label: "Projects shipped" },
+    { kpi: "10x", label: "Perf improvements" },
+    { kpi: "99.9%", label: "Uptime targets" },
+    { kpi: "<30d", label: "MVP timelines" },
+  ];
+
   return (
     <Layout>
       <div className="relative min-h-screen bg-black text-white">
@@ -87,79 +83,40 @@ export default function Investors() {
           <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)]"
-                >
+                <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>
-
-                <h1 className="text-4xl font-black tracking-tight text-red-300 sm:text-5xl lg:text-6xl">
-                  AeThex | Building With Conviction
-                </h1>
-
-                <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>
-
+                <h1 className="text-4xl font-black tracking-tight text-red-300 sm:text-5xl lg:text-6xl">AeThex | Building With Conviction</h1>
+                <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 size="lg" className="bg-red-500 text-white shadow-[0_0_30px_rgba(239,68,68,0.35)] transition hover:bg-red-400" onClick={() => formRef.current?.scrollIntoView({ behavior: "smooth" })}>
+                    <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 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>
           </section>
 
-          {/* Thesis + Segments */}
+          {/* Thesis */}
           <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>
+                  <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 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">
+                {thesis.map((point) => (
+                  <Card key={point.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>
+                      <CardTitle className="flex items-center gap-2 text-red-100">{point.icon}{point.title}</CardTitle>
+                      <CardDescription className="text-red-200/80">{point.desc}</CardDescription>
                     </CardHeader>
                   </Card>
                 ))}
@@ -171,7 +128,7 @@ export default function Investors() {
           <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) => (
+                {kpis.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>
@@ -196,15 +153,11 @@ export default function Investors() {
                     <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>
+                    <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>
+                      <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>
@@ -218,21 +171,15 @@ export default function Investors() {
                   <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 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 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>
+                    <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>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>
@@ -248,16 +195,14 @@ export default function Investors() {
             <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>
+                  <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>
+                    <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>
@@ -268,4 +213,4 @@ export default function Investors() {
       </div>
     </Layout>
   );
-}
\ No newline at end of file
+}