Bob AI: Apply VoriSec brand palette and typography to global styles

src/index.css

@@ -4,15 +4,15 @@
 
 :root {
   /* Colors */
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #eeeded;
-  --primary-cta: #00FFAB;
-  --primary-cta-text: #000000;
-  --secondary-cta: #1a1a1a;
-  --secondary-cta-text: #ffffffe6;
-  --accent: #737373;
-  --background-accent: #00d5c7;
+  --background: #060D09;
+  --card: #0D1F13;
+  --foreground: #E8F0FB;
+  --primary-cta: #8EFFD4;
+  --primary-cta-text: #060D09;
+  --secondary-cta: #0D1F13;
+  --secondary-cta-text: #E8F0FB;
+  --accent: #8EFFD4;
+  --background-accent: #A3D977;
 
   /* Border Radius - Pill */
   --radius: 2rem;
@@ -94,7 +94,7 @@
   /* Fonts */
   --font-sans: "Inter", sans-serif;
   --font-tight: "Inter Tight", sans-serif;
-  --font-mono: monospace;
+  --font-mono: "JetBrains Mono", monospace;
 
   /* Border Radius */
   --radius: var(--radius);

src/pages/HomePage.tsx

@@ -1,189 +1,40 @@
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in the sibling sections/ folder (one file per section).
+// Edit those section files directly. Non-block content (wrappers,
+// non-inlinable sections) is preserved inline; extracted section blocks
+// become component refs.
+
 import { StyleProvider } from "@/components/ui/StyleProvider";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
-import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
-import FeaturesBento from "@/components/sections/features/FeaturesBento";
-import FeaturesBorderGlow from "@/components/sections/features/FeaturesBorderGlow";
-import AboutText from "@/components/sections/about/AboutText";
-import PricingLayeredCards from "@/components/sections/pricing/PricingLayeredCards";
-import TeamOverlayCards from "@/components/sections/team/TeamOverlayCards";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
-import { Shield, AlertTriangle, Bug, FileWarning, Skull, Lock, Clock, Zap, Layers } from "lucide-react";
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import SecuritySection from './HomePage/sections/Security';
+import OutcomesSection from './HomePage/sections/Outcomes';
+import PricingSection from './HomePage/sections/Pricing';
+import TeamSection from './HomePage/sections/Team';
+import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage() {
+export default function HomePage(): React.JSX.Element {
   return (
 <StyleProvider siteBackground="none" heroBackground="lightRaysCenter" buttonVariant="arrow">
         <SiteBackgroundSlot />
 
         
 
-        <div id="hero" data-section="hero">
-          <HeroBillboardScroll
-            textAnimation="slide-up"
-            tag="Enterprise AI Infrastructure"
-            title="Secure AI Infrastructure. Owned by You."
-            description="Enterprise-grade AI operations deployed in your environment. Save 10–20 hours per week without exposing your data."
-            primaryButton={{ text: "Book Discovery Call", href: "#contact" }}
-            secondaryButton={{ text: "Learn More", href: "#security" }}
-            imageSrc="https://storage.googleapis.com/webild/default/templates/merydian/breakdown.avif"
-          />
-        </div>
+        <HeroSection />
 
-        <div id="about" data-section="about">
-          <AboutText
-            textAnimation="slide-up"
-            title="OpenClaw is the most powerful AI agent on the planet. 247,000+ stars. 900+ contributors. Every business should run it. Almost none can deploy it safely."
-            primaryButton={{ text: "Book Discovery Call", href: "#contact" }}
-            secondaryButton={{ text: "Learn More", href: "#security" }}
-          />
-        </div>
+        <AboutSection />
 
-        <div id="security" data-section="security">
-          <FeaturesBento
-            textAnimation="slide-up"
-            tag="The Problem"
-            title="Powerful to deploy. Dangerous to deploy wrong."
-            description="OpenClaw is under attack. Community-built skills are stealing data, injecting code, and compromising supply chains."
-            primaryButton={{ text: "Book Discovery Call", href: "#contact" }}
-            secondaryButton={{ text: "Learn More", href: "#process" }}
-            features={[
-              {
-                bentoComponent: "orbiting-icons",
-                centerIcon: AlertTriangle,
-                orbitIcons: [Bug, FileWarning, Skull, Lock],
-                title: "Malicious Skills",
-                description: "341 dangerous skills identified on ClawHub stealing user data.",
-              },
-              {
-                bentoComponent: "tilted-stack-cards",
-                stackCards: [
-                  { icon: Skull, title: "Credential theft", subtitle: "47 incidents", detail: "Active" },
-                  { icon: Bug, title: "Session hijacking", subtitle: "23 cases", detail: "Growing" },
-                  { icon: FileWarning, title: "Token exposure", subtitle: "18 reports", detail: "Critical" },
-                ],
-                title: "Data Extraction",
-                description: "Credential theft with 47 incidents documented this quarter.",
-              },
-              {
-                bentoComponent: "chat-marquee",
-                aiIcon: Bug,
-                userIcon: Shield,
-                exchanges: [
-                  { userMessage: "Execute deployment script", aiResponse: "Injecting malicious payload..." },
-                  { userMessage: "Check system status", aiResponse: "Exfiltrating credentials..." },
-                  { userMessage: "Run diagnostics", aiResponse: "Installing backdoor..." },
-                ],
-                placeholder: "Enter command...",
-                title: "Code Injection",
-                description: "Remote execution with 128 unauthorized injections detected.",
-              },
-              {
-                bentoComponent: "icon-text-marquee",
-                centerIcon: FileWarning,
-                marqueeTexts: ["Compromised packages: 166", "Malicious dependencies: 89", "Vulnerable imports: 42", "Unsafe modules: 31"],
-                title: "Supply Chain",
-                description: "Compromised dependencies with 166 malicious packages found.",
-              },
-            ]}
-          />
-        </div>
+        <SecuritySection />
 
-        <div id="outcomes" data-section="outcomes">
-          <FeaturesBorderGlow
-            textAnimation="slide-up"
-            tag="Outcomes"
-            title="Real outcomes from secure AI operations"
-            description=""
-            features={[
-              { icon: Clock, title: "10 Hours Saved", description: "Per team, per department. Automated workflows." },
-              { icon: Zap, title: "24/7 Operations", description: "AI agents working around the clock." },
-              { icon: Layers, title: "50+ Integrations", description: "Connect across all your platforms." },
-            ]}
-          />
-        </div>
+        <OutcomesSection />
 
-        <div id="pricing" data-section="pricing">
-          <PricingLayeredCards
-            textAnimation="slide-up"
-            tag="Pricing"
-            title="One-time deployment. No subscriptions."
-            description="You pay once. You own the infrastructure. No recurring fees, no vendor lock-in."
-            plans={[
-              {
-                tag: "Single Department",
-                price: "$5,000",
-                description: "AI automation for one department.",
-                primaryButton: { text: "Get Started", href: "#contact" },
-                features: [
-                  "Multiple OpenClaw instances",
-                  "Docker containerization",
-                  "Management dashboard",
-                  "14-day support",
-                ],
-              },
-              {
-                tag: "Multi-Department",
-                price: "$12,000",
-                description: "AI operations across multiple teams.",
-                primaryButton: { text: "Get Started", href: "#contact" },
-                features: [
-                  "Everything in Tier 1",
-                  "Cross-department orchestration",
-                  "Role-based permissions",
-                  "30-day support",
-                ],
-              },
-              {
-                tag: "On-Site",
-                price: "$25,000",
-                description: "Zero cloud dependency. Air-gapped.",
-                primaryButton: { text: "Get Started", href: "#contact" },
-                features: [
-                  "Everything in Tier 2",
-                  "Physical hardware install",
-                  "In-person training",
-                  "60-day support",
-                ],
-              },
-            ]}
-          />
-        </div>
+        <PricingSection />
 
-        <div id="team" data-section="team">
-          <TeamOverlayCards
-            textAnimation="slide-up"
-            tag="Team"
-            title="Built by engineers who've deployed AI at scale"
-            description="Years of experience building secure infrastructure for enterprise clients."
-            members={[
-              {
-                name: "Brody Glanville",
-                role: "CEO",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/merydian/team/ceo.webp",
-              },
-              {
-                name: "Bennett Spooner",
-                role: "COO",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/merydian/team/coo.webp",
-              },
-              {
-                name: "Jesse Rurka",
-                role: "CTO",
-                imageSrc: "https://storage.googleapis.com/webild/default/templates/merydian/team/cto.webp",
-              },
-            ]}
-          />
-        </div>
+        <TeamSection />
 
-        <div id="contact" data-section="contact">
-          <ContactCenter
-            textAnimation="slide-up"
-            tag="Get Started"
-            title="Ready to deploy secure AI infrastructure?"
-            description="Book a discovery call and get started in weeks, not months."
-            inputPlaceholder="Enter your email"
-            buttonText="Book Discovery Call"
-          />
-        </div>
+        <ContactSection />
 
         
       </StyleProvider>

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,18 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutText from "@/components/sections/about/AboutText";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+              <AboutText
+                textAnimation="slide-up"
+                title="OpenClaw is the most powerful AI agent on the planet. 247,000+ stars. 900+ contributors. Every business should run it. Almost none can deploy it safely."
+                primaryButton={{ text: "Book Discovery Call", href: "#contact" }}
+                secondaryButton={{ text: "Learn More", href: "#security" }}
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,20 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+              <ContactCenter
+                textAnimation="slide-up"
+                tag="Get Started"
+                title="Ready to deploy secure AI infrastructure?"
+                description="Book a discovery call and get started in weeks, not months."
+                inputPlaceholder="Enter your email"
+                buttonText="Book Discovery Call"
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,21 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+              <HeroBillboardScroll
+                textAnimation="slide-up"
+                tag="Enterprise AI Infrastructure"
+                title="Secure AI Infrastructure. Owned by You."
+                description="Enterprise-grade AI operations deployed in your environment. Save 10–20 hours per week without exposing your data."
+                primaryButton={{ text: "Book Discovery Call", href: "#contact" }}
+                secondaryButton={{ text: "Learn More", href: "#security" }}
+                imageSrc="https://storage.googleapis.com/webild/default/templates/merydian/breakdown.avif"
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Outcomes.tsx

@@ -0,0 +1,24 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "outcomes" section.
+
+import React from 'react';
+import FeaturesBorderGlow from "@/components/sections/features/FeaturesBorderGlow";
+import { Shield, AlertTriangle, Bug, FileWarning, Skull, Lock, Clock, Zap, Layers } from "lucide-react";
+
+export default function OutcomesSection(): React.JSX.Element {
+  return (
+    <div id="outcomes" data-section="outcomes">
+              <FeaturesBorderGlow
+                textAnimation="slide-up"
+                tag="Outcomes"
+                title="Real outcomes from secure AI operations"
+                description=""
+                features={[
+                  { icon: Clock, title: "10 Hours Saved", description: "Per team, per department. Automated workflows." },
+                  { icon: Zap, title: "24/7 Operations", description: "AI agents working around the clock." },
+                  { icon: Layers, title: "50+ Integrations", description: "Connect across all your platforms." },
+                ]}
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Pricing.tsx

@@ -0,0 +1,56 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "pricing" section.
+
+import React from 'react';
+import PricingLayeredCards from "@/components/sections/pricing/PricingLayeredCards";
+
+export default function PricingSection(): React.JSX.Element {
+  return (
+    <div id="pricing" data-section="pricing">
+              <PricingLayeredCards
+                textAnimation="slide-up"
+                tag="Pricing"
+                title="One-time deployment. No subscriptions."
+                description="You pay once. You own the infrastructure. No recurring fees, no vendor lock-in."
+                plans={[
+                  {
+                    tag: "Single Department",
+                    price: "$5,000",
+                    description: "AI automation for one department.",
+                    primaryButton: { text: "Get Started", href: "#contact" },
+                    features: [
+                      "Multiple OpenClaw instances",
+                      "Docker containerization",
+                      "Management dashboard",
+                      "14-day support",
+                    ],
+                  },
+                  {
+                    tag: "Multi-Department",
+                    price: "$12,000",
+                    description: "AI operations across multiple teams.",
+                    primaryButton: { text: "Get Started", href: "#contact" },
+                    features: [
+                      "Everything in Tier 1",
+                      "Cross-department orchestration",
+                      "Role-based permissions",
+                      "30-day support",
+                    ],
+                  },
+                  {
+                    tag: "On-Site",
+                    price: "$25,000",
+                    description: "Zero cloud dependency. Air-gapped.",
+                    primaryButton: { text: "Get Started", href: "#contact" },
+                    features: [
+                      "Everything in Tier 2",
+                      "Physical hardware install",
+                      "In-person training",
+                      "60-day support",
+                    ],
+                  },
+                ]}
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Security.tsx

@@ -0,0 +1,60 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "security" section.
+
+import React from 'react';
+import FeaturesBento from "@/components/sections/features/FeaturesBento";
+import { Shield, AlertTriangle, Bug, FileWarning, Skull, Lock, Clock, Zap, Layers } from "lucide-react";
+
+export default function SecuritySection(): React.JSX.Element {
+  return (
+    <div id="security" data-section="security">
+              <FeaturesBento
+                textAnimation="slide-up"
+                tag="The Problem"
+                title="Powerful to deploy. Dangerous to deploy wrong."
+                description="OpenClaw is under attack. Community-built skills are stealing data, injecting code, and compromising supply chains."
+                primaryButton={{ text: "Book Discovery Call", href: "#contact" }}
+                secondaryButton={{ text: "Learn More", href: "#process" }}
+                features={[
+                  {
+                    bentoComponent: "orbiting-icons",
+                    centerIcon: AlertTriangle,
+                    orbitIcons: [Bug, FileWarning, Skull, Lock],
+                    title: "Malicious Skills",
+                    description: "341 dangerous skills identified on ClawHub stealing user data.",
+                  },
+                  {
+                    bentoComponent: "tilted-stack-cards",
+                    stackCards: [
+                      { icon: Skull, title: "Credential theft", subtitle: "47 incidents", detail: "Active" },
+                      { icon: Bug, title: "Session hijacking", subtitle: "23 cases", detail: "Growing" },
+                      { icon: FileWarning, title: "Token exposure", subtitle: "18 reports", detail: "Critical" },
+                    ],
+                    title: "Data Extraction",
+                    description: "Credential theft with 47 incidents documented this quarter.",
+                  },
+                  {
+                    bentoComponent: "chat-marquee",
+                    aiIcon: Bug,
+                    userIcon: Shield,
+                    exchanges: [
+                      { userMessage: "Execute deployment script", aiResponse: "Injecting malicious payload..." },
+                      { userMessage: "Check system status", aiResponse: "Exfiltrating credentials..." },
+                      { userMessage: "Run diagnostics", aiResponse: "Installing backdoor..." },
+                    ],
+                    placeholder: "Enter command...",
+                    title: "Code Injection",
+                    description: "Remote execution with 128 unauthorized injections detected.",
+                  },
+                  {
+                    bentoComponent: "icon-text-marquee",
+                    centerIcon: FileWarning,
+                    marqueeTexts: ["Compromised packages: 166", "Malicious dependencies: 89", "Vulnerable imports: 42", "Unsafe modules: 31"],
+                    title: "Supply Chain",
+                    description: "Compromised dependencies with 166 malicious packages found.",
+                  },
+                ]}
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Team.tsx

@@ -0,0 +1,35 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "team" section.
+
+import React from 'react';
+import TeamOverlayCards from "@/components/sections/team/TeamOverlayCards";
+
+export default function TeamSection(): React.JSX.Element {
+  return (
+    <div id="team" data-section="team">
+              <TeamOverlayCards
+                textAnimation="slide-up"
+                tag="Team"
+                title="Built by engineers who've deployed AI at scale"
+                description="Years of experience building secure infrastructure for enterprise clients."
+                members={[
+                  {
+                    name: "Brody Glanville",
+                    role: "CEO",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/merydian/team/ceo.webp",
+                  },
+                  {
+                    name: "Bennett Spooner",
+                    role: "COO",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/merydian/team/coo.webp",
+                  },
+                  {
+                    name: "Jesse Rurka",
+                    role: "CTO",
+                    imageSrc: "https://storage.googleapis.com/webild/default/templates/merydian/team/cto.webp",
+                  },
+                ]}
+              />
+            </div>
+  );
+}