Merge version_7_1783200212037 into main

Merge version_7_1783200212037 into main

src/App.tsx

@@ -3,12 +3,16 @@ import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
 import DashboardPage from "@/pages/DashboardPage";
+import AiCommandCenterPage from "@/pages/AiCommandCenterPage";
+import InvestmentDashboardPage from "@/pages/InvestmentDashboardPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
         <Route path="/dashboard" element={<DashboardPage />} />
+        <Route path="/ai-command-center" element={<AiCommandCenterPage />} />
+        <Route path="/investment-dashboard" element={<InvestmentDashboardPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -29,6 +29,10 @@ export default function Layout() {
     "name": "Metrics",    "href": "#metrics"
   },
   { name: "Dashboard", href: "/dashboard" },
+  { name: "Ai Command Center", href: "/ai-command-center" },
+  { name: "Investment Dashboard", href: "/investment-dashboard" },
+
+
 
 ];
 

src/pages/AiCommandCenterPage.tsx

@@ -0,0 +1,27 @@
+import FeaturesIconCards from "@/components/sections/features/FeaturesIconCards";
+import FeaturesAlternatingSplit from "@/components/sections/features/FeaturesAlternatingSplit";
+
+export default function AiCommandCenterPage() {
+  return (
+    <>
+      <div data-webild-section="FeaturesIconCards"><FeaturesIconCards
+        tag="AI Command Center"
+        title="Your Autonomous Workforce"
+        description="Deploy specialized AI agents to manage every aspect of your agency. From high-level strategy to daily operations, Atlas handles it all."
+        primaryButton={{"text":"Deploy Agents","href":"/deploy"}}
+        secondaryButton={{"text":"View Capabilities","href":"#capabilities"}}
+        features={[{"icon":"BrainCircuit","title":"CEO AI","description":"High-level strategic planning, resource allocation, and performance monitoring."},{"icon":"TrendingUp","title":"Sales AI","description":"Automated outreach, deal closing, and pipeline management."},{"icon":"DollarSign","title":"Payroll AI","description":"Seamless compensation tracking, invoice generation, and financial reporting."},{"icon":"Target","title":"Lead Hunter AI","description":"Autonomous prospecting, data scraping, and lead qualification."},{"icon":"Megaphone","title":"Marketing AI","description":"Campaign creation, content generation, and multi-channel distribution."},{"icon":"Settings","title":"Operations AI","description":"Workflow automation, system maintenance, and daily task execution."}]}
+        textAnimation="fade-blur"
+      /></div>
+      <div data-webild-section="FeaturesAlternatingSplit"><FeaturesAlternatingSplit
+        tag="AI Command Center"
+        title="Your Autonomous Agency Workforce"
+        description="Deploy specialized AI agents to manage every aspect of your business, from high-level strategy to daily operations."
+        primaryButton={{"text":"Deploy Agents","href":"/deploy"}}
+        secondaryButton={{"text":"View Architecture","href":"#architecture"}}
+        items={[{"title":"CEO AI: Strategic Oversight","description":"Monitor agency health, analyze performance metrics, and make data-driven decisions autonomously.","imageSrc":"https://img.freepik.com/premium-photo/artificial-intelligence-technology-ai-tech-hologram-brain-concept-business-analysis-analytics_117023-1834.jpg","primaryButton":{"text":"View Dashboard","href":"/ceo-ai"}},{"title":"Sales & Lead Hunter AI","description":"Automatically prospect, qualify leads, and close deals 24/7 without human intervention.","imageSrc":"https://img.freepik.com/premium-photo/global-business-network-connection-data-exchange-customer-connection_117023-1835.jpg","primaryButton":{"text":"Configure Sales","href":"/sales-ai"}},{"title":"Marketing & Operations AI","description":"Execute multi-channel campaigns and streamline daily workflows with intelligent automation.","imageSrc":"https://img.freepik.com/premium-photo/automation-software-technology-process-system-business-concept_117023-1836.jpg","primaryButton":{"text":"Manage Workflows","href":"/operations-ai"}},{"title":"Payroll AI: Financial Control","description":"Manage contractor payouts, track expenses, and ensure compliance with zero manual data entry.","imageSrc":"https://img.freepik.com/premium-photo/financial-technology-fintech-cryptocurrency-investment-concept_117023-1837.jpg","primaryButton":{"text":"Review Payroll","href":"/payroll-ai"}},{"title":"Agency Studio Management","description":"Build websites, deploy AI chatbots, and manage hosting infrastructure from one centralized hub.","imageSrc":"https://img.freepik.com/premium-photo/web-design-development-programming-coding-concept_117023-1838.jpg","primaryButton":{"text":"Open Studio","href":"/agency-studio"}}]}
+        textAnimation="slide-up"
+      /></div>
+    </>
+  );
+}

src/pages/DashboardPage.tsx

@@ -1,46 +1,255 @@
-import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import { useState } from "react";
+import { Activity, Users, Phone, DollarSign, CheckSquare, BarChart } from "lucide-react";
+import { routes } from "@/routes";
 import Button from "@/components/ui/Button";
-import TextAnimation from "@/components/ui/TextAnimation";
-import GridOrCarousel from "@/components/ui/GridOrCarousel";
-import ScrollReveal from "@/components/ui/ScrollReveal";
-import MetricsIconCards from "@/components/sections/metrics/MetricsIconCards";
-import FeaturesBento from "@/components/sections/features/FeaturesBento";
+import Card from "@/components/ui/Card";
+import Tag from "@/components/ui/Tag";
+import { cls } from "@/lib/utils";
 
 export default function DashboardPage() {
+  const [activeTab, setActiveTab] = useState("Command Center");
+
+  const tabs = [
+    { name: "Command Center", icon: Activity },
+    { name: "CRM", icon: Users },
+    { name: "Payroll", icon: DollarSign },
+    { name: "Cold Calling", icon: Phone },
+    { name: "Tasks", icon: CheckSquare },
+  ];
+
   return (
-    <>
-      <div data-webild-section="HeroSplitKpi"><HeroSplitKpi
-        tag="Owner Dashboard"
-        title="Command Center Overview"
-        description="Monitor real-time performance across all teams. Track revenue, analyze AI lead conversions, and manage your entire operational footprint from one unified interface."
-        primaryButton={{"text":"View Reports","href":"/reports"}}
-        secondaryButton={{"text":"Manage Roles","href":"/settings/roles"}}
-        kpis={[{"value":"$1.2M","label":"Monthly Revenue"},{"value":"4,250","label":"Active Leads"},{"value":"8.4%","label":"AI Conversion Rate"}]}
-        imageSrc="https://img.freepik.com/free-photo/business-people-analyzing-statistics-financial-data-working-with-graphs-charts-screen-office_482257-88487.jpg"
-        textAnimation="fade-blur"
-      /></div>
-      <div data-webild-section="MetricsSimpleCards"><section aria-label="Metrics section" className="py-20"><div className="flex flex-col gap-8 md:gap-10"><div className="flex flex-col items-center gap-2 w-content-width mx-auto"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>System Overview</p></div><TextAnimation text="Performance at a Glance" variant="fade-blur" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Real-time insights across all teams, revenue streams, and AI lead generation." variant="fade-blur" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="View Full Report" href="/reports" variant="primary" /><Button text="Manage Teams" href="/teams" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="slide-up"><GridOrCarousel><div key="$450k" className="flex flex-col justify-between gap-6 p-6 md:p-10 min-h-60 md:min-h-70 2xl:min-h-80 h-full card rounded"><span className="text-9xl md:text-8xl font-semibold leading-none truncate">$450k</span><p className="text-base leading-snug text-balance">Net Profit (Monthly)</p></div>
-<div key="4,250" className="flex flex-col justify-between gap-6 p-6 md:p-10 min-h-60 md:min-h-70 2xl:min-h-80 h-full card rounded"><span className="text-9xl md:text-8xl font-semibold leading-none truncate">4,250</span><p className="text-base leading-snug text-balance">AI Leads Generated</p></div>
-<div key="342" className="flex flex-col justify-between gap-6 p-6 md:p-10 min-h-60 md:min-h-70 2xl:min-h-80 h-full card rounded"><span className="text-9xl md:text-8xl font-semibold leading-none truncate">342</span><p className="text-base leading-snug text-balance">Meetings Booked</p></div>
-<div key="$12.5k" className="flex flex-col justify-between gap-6 p-6 md:p-10 min-h-60 md:min-h-70 2xl:min-h-80 h-full card rounded"><span className="text-9xl md:text-8xl font-semibold leading-none truncate">$12.5k</span><p className="text-base leading-snug text-balance">Avg Employee Earnings</p></div></GridOrCarousel></ScrollReveal></div></section></div>
-      <div data-webild-section="MetricsIconCards"><MetricsIconCards
-        tag="Performance Overview"
-        title="Business Operations Dashboard"
-        description="Real-time insights into team performance, revenue generation, and AI lead conversion rates across the organization."
-        primaryButton={{"text":"View Reports","href":"/reports"}}
-        secondaryButton={{"text":"Manage Team","href":"/team"}}
-        metrics={[{"icon":"TrendingUp","title":"Monthly Revenue","value":"$1.2M"},{"icon":"Users","title":"Active Employees","value":"42"},{"icon":"PhoneCall","title":"Calls Made","value":"12,450"},{"icon":"Bot","title":"AI Leads Generated","value":"4,250"}]}
-        textAnimation="fade-blur"
-      /></div>
-      <div data-webild-section="FeaturesBento"><FeaturesBento
-        tag="Role-Based Access"
-        title="Tailored Dashboards for Every Role"
-        description="Atlas provides customized views for Owners, Partners, and Employees, ensuring everyone has the exact tools and metrics they need to succeed."
-        primaryButton={{"text":"View Live Demo","href":"/demo"}}
-        secondaryButton={{"text":"Manage Roles","href":"/settings/roles"}}
-        textAnimation="fade-blur"
-        features={[{"title":"Executive Overview","description":"Owners get full visibility into company-wide revenue, profit margins, and operational efficiency.","bentoComponent":"animated-bar-chart"},{"title":"Partner Metrics","description":"Track cold calling team performance, conversion rates, and profit metrics in real-time.","bentoComponent":"info-card-marquee","infoCards":[{"icon":"PhoneCall","label":"Calls Made","value":"12,450"},{"icon":"TrendingUp","label":"Conversion","value":"8.4%"},{"icon":"DollarSign","label":"Profit","value":"$450k"},{"icon":"Users","label":"Active Reps","value":"42"}]},{"title":"AI Lead Assistant","description":"Employees interact with our AI to qualify leads, handle objections, and close deals faster.","bentoComponent":"chat-marquee","aiIcon":"Bot","userIcon":"User","exchanges":[{"userMessage":"Lead objected to pricing.","aiResponse":"Highlight our ROI and flexible payment plans."},{"userMessage":"What's the next step?","aiResponse":"Send the contract via Atlas Sign."}],"placeholder":"Ask AI for guidance..."},{"title":"Script Viewer & Goals","description":"Follow the proven sales script step-by-step and track personal earnings progress.","bentoComponent":"checklist-timeline","heading":"Sales Script","subheading":"Standard Cold Call","checklistItems":[{"label":"Introduction","detail":"State name and company clearly."},{"label":"Value Prop","detail":"Explain how Atlas saves them time."},{"label":"Call to Action","detail":"Book a 15-minute demo."}],"completedLabel":"Script Completed"}]}
-      /></div>
-    </>
+    <div className="min-h-svh bg-background text-foreground">
+      <main className="w-content-width mx-auto flex flex-col md:flex-row gap-8 pt-8">
+        {/* Sidebar / Sub-nav */}
+        <aside className="w-full md:w-64 shrink-0 flex flex-col gap-2">
+          <div className="mb-6 px-4 md:px-0">
+            <div className="flex items-center gap-2 mb-4">
+              <div className="backdrop-blur-xl bg-white/10 border border-white/20 shadow-lg rounded-full px-3 py-1 flex items-center gap-2">
+                <div className="relative flex h-2 w-2">
+                  <span className="absolute animate-ping bg-green-400 opacity-75 rounded-full h-full w-full"></span>
+                  <span className="relative bg-green-500 rounded-full h-2 w-2"></span>
+                </div>
+                <span className="text-xs font-medium tracking-wider uppercase text-foreground">System Live</span>
+              </div>
+            </div>
+            <h1 className="text-2xl font-bold tracking-tight">Atlas v1.0</h1>
+            <p className="text-sm text-foreground/70 mt-1">Executive Terminal</p>
+          </div>
+          
+          <nav className="flex flex-col gap-2">
+            {tabs.map((tab) => {
+              const Icon = tab.icon;
+              const isActive = activeTab === tab.name;
+              return (
+                <button
+                  key={tab.name}
+                  onClick={() => setActiveTab(tab.name)}
+                  className={cls(
+                    "flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 text-sm font-medium whitespace-nowrap cursor-pointer",
+                    isActive 
+                      ? "primary-button text-primary-cta-text shadow-lg" 
+                      : "text-foreground hover:bg-white/5"
+                  )}
+                >
+                  <Icon className="w-4 h-4" />
+                  {tab.name}
+                </button>
+              );
+            })}
+          </nav>
+        </aside>
+
+        {/* Content Area */}
+        <div className="flex-1 min-w-0 px-4 md:px-0">
+          {activeTab === "Command Center" && (
+            <div className="flex flex-col gap-6">
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                <h2 className="text-3xl font-bold">Command Center</h2>
+                <Button text="Generate Report" variant="secondary" />
+              </div>
+              
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <Card className="p-6 flex flex-col gap-2">
+                  <p className="text-sm text-foreground/70 uppercase tracking-wider">Total Revenue</p>
+                  <p className="text-4xl font-bold">$2.4M</p>
+                  <p className="text-sm text-green-400">+14.5% from last month</p>
+                </Card>
+                <Card className="p-6 flex flex-col gap-2">
+                  <p className="text-sm text-foreground/70 uppercase tracking-wider">Active Leads</p>
+                  <p className="text-4xl font-bold">8,432</p>
+                  <p className="text-sm text-green-400">+2.1% conversion rate</p>
+                </Card>
+                <Card className="p-6 flex flex-col gap-2">
+                  <p className="text-sm text-foreground/70 uppercase tracking-wider">System Load</p>
+                  <p className="text-4xl font-bold">24%</p>
+                  <p className="text-sm text-foreground/70">Optimal performance</p>
+                </Card>
+              </div>
+
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <Card className="p-6 h-80 flex flex-col">
+                  <h3 className="text-lg font-semibold mb-4">Revenue Velocity</h3>
+                  <div className="flex-1 border border-white/10 rounded-lg bg-white/5 flex items-center justify-center">
+                    <BarChart className="w-12 h-12 text-foreground/30" />
+                  </div>
+                </Card>
+                <Card className="p-6 h-80 flex flex-col">
+                  <h3 className="text-lg font-semibold mb-4">Global Operations</h3>
+                  <div className="flex-1 border border-white/10 rounded-lg bg-white/5 flex items-center justify-center">
+                    <Activity className="w-12 h-12 text-foreground/30" />
+                  </div>
+                </Card>
+              </div>
+            </div>
+          )}
+
+          {activeTab === "CRM" && (
+            <div className="flex flex-col gap-6">
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                <h2 className="text-3xl font-bold">AI-Powered CRM</h2>
+                <Button text="Import Leads" variant="secondary" />
+              </div>
+              <Card className="p-0 overflow-hidden">
+                <div className="p-4 border-b border-white/10 bg-white/5 flex justify-between items-center">
+                  <h3 className="font-semibold">High-Priority Targets</h3>
+                  <Tag text="AI Scored" />
+                </div>
+                <div className="divide-y divide-white/10">
+                  {[1, 2, 3, 4, 5].map((i) => (
+                    <div key={i} className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-white/5 transition-colors">
+                      <div className="flex items-center gap-4">
+                        <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center shrink-0">
+                          <Users className="w-5 h-5 text-foreground/70" />
+                        </div>
+                        <div>
+                          <p className="font-medium">Enterprise Prospect {i}</p>
+                          <p className="text-sm text-foreground/70">Last contact: 2 hours ago</p>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-4">
+                        <span className="text-green-400 text-sm font-medium">98% Match</span>
+                        <Button text="Engage" variant="primary" className="h-8 px-4 text-xs" />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            </div>
+          )}
+
+          {activeTab === "Payroll" && (
+            <div className="flex flex-col gap-6">
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                <h2 className="text-3xl font-bold">Automated Payroll</h2>
+                <Button text="Run Cycle" variant="primary" />
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <Card className="p-6">
+                  <h3 className="text-lg font-semibold mb-2">Next Payout</h3>
+                  <p className="text-4xl font-bold mb-4">$482,150</p>
+                  <p className="text-sm text-foreground/70">Scheduled for Friday, 12:00 AM EST</p>
+                </Card>
+                <Card className="p-6">
+                  <h3 className="text-lg font-semibold mb-2">Active Employees</h3>
+                  <p className="text-4xl font-bold mb-4">142</p>
+                  <p className="text-sm text-foreground/70">All compliance checks passed</p>
+                </Card>
+              </div>
+              <Card className="p-6">
+                <h3 className="text-lg font-semibold mb-4">Recent Transactions</h3>
+                <div className="space-y-4">
+                  {[1, 2, 3].map((i) => (
+                    <div key={i} className="flex items-center justify-between p-3 rounded bg-white/5">
+                      <div className="flex items-center gap-3">
+                        <DollarSign className="w-5 h-5 text-foreground/70" />
+                        <span>Executive Bonus Pool Q{i}</span>
+                      </div>
+                      <span className="font-medium text-green-400">Completed</span>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            </div>
+          )}
+
+          {activeTab === "Cold Calling" && (
+            <div className="flex flex-col gap-6">
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                <h2 className="text-3xl font-bold">Dialer Workspace</h2>
+                <div className="flex gap-2">
+                  <Button text="End Session" variant="secondary" />
+                  <Button text="Next Lead" variant="primary" />
+                </div>
+              </div>
+              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <div className="lg:col-span-2 flex flex-col gap-6">
+                  <Card className="p-6">
+                    <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
+                      <h3 className="text-lg font-semibold">Active Script: Enterprise Pitch</h3>
+                      <Tag text="Live Sentiment: Positive" />
+                    </div>
+                    <div className="p-4 rounded-lg bg-white/5 border border-white/10 text-lg leading-relaxed text-foreground/70 h-64 overflow-y-auto">
+                      <p className="mb-4">"Hi [Name], this is [Agent] from Atlas. I noticed your team is currently scaling operations across multiple regions."</p>
+                      <p className="mb-4 text-foreground font-medium">"We've helped similar enterprise clients reduce operational overhead by 24% using our unified command center."</p>
+                      <p>"Would you be open to a brief technical overview this Thursday?"</p> </div> </Card> </div> <div className="flex flex-col gap-6">
+                  <Card className="p-6">
+                    <h3 className="text-lg font-semibold mb-4">Current Target</h3>
+                    <div className="space-y-4">
+                      <div>
+                        <p className="text-sm text-foreground/70">Name</p>
+                        <p className="font-medium">Sarah Jenkins</p>
+                      </div>
+                      <div>
+                        <p className="text-sm text-foreground/70">Role</p>
+                        <p className="font-medium">VP of Operations</p>
+                      </div>
+                      <div>
+                        <p className="text-sm text-foreground/70">Company</p>
+                        <p className="font-medium">TechFlow Global</p>
+                      </div>
+                      <div className="pt-2">
+                        <Button text="Call Now" variant="primary" className="w-full" />
+                      </div>
+                    </div>
+                  </Card>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {activeTab === "Tasks" && (
+            <div className="flex flex-col gap-6">
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                <h2 className="text-3xl font-bold">Task Management</h2>
+                <Button text="New Task" variant="primary" />
+              </div>
+              <Card className="p-0 overflow-hidden">
+                <div className="divide-y divide-white/10">
+                  {[
+                    { title: "Review Q3 Performance Metrics", status: "High Priority", time: "Due Today" },
+                    { title: "Approve Payroll Run #402", status: "Pending", time: "Tomorrow" },
+                    { title: "Update Cold Calling Scripts", status: "In Progress", time: "Next Week" },
+                    { title: "Onboard New Sales VP", status: "Scheduled", time: "Oct 15" }
+                  ].map((task, i) => (
+                    <div key={i} className="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-white/5 transition-colors">
+                      <div className="flex items-center gap-4">
+                        <div className="w-6 h-6 rounded border border-white/20 flex items-center justify-center cursor-pointer hover:bg-white/10 shrink-0">
+                          <CheckSquare className="w-4 h-4 text-transparent hover:text-white/50" />
+                        </div>
+                        <div>
+                          <p className="font-medium">{task.title}</p>
+                          <p className="text-sm text-foreground/70">{task.time}</p>
+                        </div>
+                      </div>
+                      <Tag text={task.status} />
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
   );
-}
+}

src/pages/HomePage.tsx

@@ -15,7 +15,12 @@ import MetricsSection from './HomePage/sections/Metrics';
 import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage(): React.JSX.Element {
+
+import RealEstateSection from './HomePage/sections/RealEstate';
+import FinanceSection from './HomePage/sections/Finance';
+import TrainingSection from './HomePage/sections/Training';
+import MobileAppSection from './HomePage/sections/MobileApp';
+import AtlasIntelligenceSection from './HomePage/sections/AtlasIntelligence';export default function HomePage(): React.JSX.Element {
   return (
 <>
   <HeroSection />
@@ -23,6 +28,11 @@ export default function HomePage(): React.JSX.Element {
   <FeaturesSection />
 
   <ProductSection />
+      <RealEstateSection />
+      <FinanceSection />
+      <TrainingSection />
+      <MobileAppSection />
+      <AtlasIntelligenceSection />
 
   <PricingSection />
 

src/pages/HomePage/sections/AtlasIntelligence.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+
+export default function AtlasIntelligenceSection() {
+  return (
+    <div data-webild-section="atlas-intelligence" id="atlas-intelligence">
+      <HeroSplitKpi
+        tag="AI ADVISOR"
+        title="Atlas Intelligence"
+        description="Your executive AI advisor. Atlas Intelligence analyzes your business data across all modules to provide actionable insights, forecast trends, and identify bottlenecks."
+        primaryButton={{ text: "Ask Atlas", href: "#" }}
+        secondaryButton={{ text: "Learn More", href: "#" }}
+        kpis={[
+          { value: "98%", label: "Forecast Accuracy" },
+          { value: "24/7", label: "Real-time Analysis" },
+          { value: "10x", label: "Faster Decisions" }
+        ]}
+        imageSrc="https://picsum.photos/seed/537565812/1200/800"
+        textAnimation="fade-blur"
+      />
+    </div>
+  );
+}

src/pages/HomePage/sections/Finance.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import FeaturesMediaCards from '@/components/sections/features/FeaturesMediaCards';
+
+export default function FinanceSection() {
+  return (
+    <div data-webild-section="finance" id="finance">
+      <FeaturesMediaCards
+        tag="FINANCE"
+        title="Automated Bookkeeping"
+        description="Real-time financial tracking, automated reconciliation, and comprehensive reporting."
+        items={[
+          {
+            title: "Smart Reconciliation",
+            description: "Automatically match transactions across all your accounts.",
+            imageSrc: "https://picsum.photos/seed/411430300/1200/800"
+          },
+          {
+            title: "Expense Tracking",
+            description: "Categorize and monitor business expenses in real-time.",
+            imageSrc: "https://picsum.photos/seed/931543788/1200/800"
+          },
+          {
+            title: "Financial Reports",
+            description: "Generate P&L, balance sheets, and cash flow statements instantly.",
+            imageSrc: "https://picsum.photos/seed/714605241/1200/800"
+          }
+        ]}
+        textAnimation="fade-blur"
+      />
+    </div>
+  );
+}

src/pages/HomePage/sections/MobileApp.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
+
+export default function MobileAppSection() {
+  return (
+    <div data-webild-section="mobile-app" id="mobile-app">
+      <HeroSplit
+        tag="MOBILE"
+        title="Atlas OS in your pocket."
+        description="Manage your entire business on the go. The Atlas mobile app gives you full access to CRM, payroll, and real estate modules from anywhere."
+        primaryButton={{ text: "Download App", href: "#" }}
+        secondaryButton={{ text: "View Features", href: "#" }}
+        imageSrc="https://picsum.photos/seed/2001139954/1200/800"
+        textAnimation="fade-blur"
+      />
+    </div>
+  );
+}

src/pages/HomePage/sections/RealEstate.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import FeaturesDetailedCards from '@/components/sections/features/FeaturesDetailedCards';
+
+export default function RealEstateSection() {
+  return (
+    <div data-webild-section="real-estate" id="real-estate">
+      <FeaturesDetailedCards
+        tag="REAL ESTATE"
+        title="Property & Section 8 Management"
+        description="End-to-end management for real estate portfolios, including specialized Section 8 workflows."
+        items={[
+          {
+            title: "Tenant Management",
+            description: "Track leases, payments, and maintenance requests in one centralized portal.",
+            tags: ["Leases", "Maintenance", "Portals"],
+            imageSrc: "http://img.b2bpic.net/free-photo/modern-residential-building_1048-10054.jpg"
+          },
+          {
+            title: "Section 8 Compliance",
+            description: "Automated compliance checks, voucher tracking, and inspection scheduling.",
+            tags: ["Vouchers", "Inspections", "Compliance"],
+            imageSrc: "http://img.b2bpic.net/free-photo/business-people-shaking-hands-together_1150-6051.jpg"
+          },
+          {
+            title: "Portfolio Analytics",
+            description: "Real-time ROI, occupancy metrics, and financial forecasting for your properties.",
+            tags: ["ROI", "Occupancy", "Forecasting"],
+            imageSrc: "http://img.b2bpic.net/free-photo/financial-data-analyzing-hand-writing-and-counting-on-calculator-in-office-on-wood-desk_1150-5830.jpg"
+          }
+        ]}
+        textAnimation="fade-blur"
+      />
+    </div>
+  );
+}

src/pages/HomePage/sections/Training.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import FeaturesMediaGrid from '@/components/sections/features/FeaturesMediaGrid';
+
+export default function TrainingSection() {
+  return (
+    <div data-webild-section="training" id="training">
+      <FeaturesMediaGrid
+        tag="TRAINING"
+        title="Employee Training Portal"
+        description="Onboard faster and upskill your team with our integrated learning management system."
+        items={[
+          {
+            title: "Onboarding Workflows",
+            description: "Automated day-one setup and orientation paths.",
+            imageSrc: "https://picsum.photos/seed/1338644346/1200/800"
+          },
+          {
+            title: "Video Courses",
+            description: "Host internal training videos and track completion.",
+            imageSrc: "https://picsum.photos/seed/2106098008/1200/800"
+          },
+          {
+            title: "Knowledge Base",
+            description: "Centralized documentation for company policies and procedures.",
+            imageSrc: "https://picsum.photos/seed/652282903/1200/800"
+          },
+          {
+            title: "Skill Assessments",
+            description: "Quizzes and evaluations to ensure comprehension.",
+            imageSrc: "https://picsum.photos/seed/1633900920/1200/800"
+          }
+        ]}
+        textAnimation="fade-blur"
+      />
+    </div>
+  );
+}

src/pages/InvestmentDashboardPage.tsx

@@ -0,0 +1,47 @@
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import MetricsIconCards from "@/components/sections/metrics/MetricsIconCards";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import FeaturesBento from "@/components/sections/features/FeaturesBento";
+
+export default function InvestmentDashboardPage() {
+  return (
+    <>
+      <div data-webild-section="HeroSplitKpi"><HeroSplitKpi
+        tag="Portfolio Overview"
+        title="Command Your Wealth"
+        description="Monitor real-time performance, analyze asset allocation, and track your global real estate holdings from a single, secure executive dashboard."
+        primaryButton={{"text":"View Portfolio","href":"#portfolio"}}
+        secondaryButton={{"text":"Generate Report","href":"#reports"}}
+        kpis={[{"value":"$2.4B","label":"Assets Under Management"},{"value":"14.2%","label":"YTD Return"},{"value":"34","label":"Active Properties"}]}
+        imageSrc="https://img.freepik.com/premium-photo/abstract-financial-graph-with-up-trend-line-candlestick-chart-in-stock-market-on-black-background_31965-3064.jpg"
+        textAnimation="fade-blur"
+      /></div>
+      <div data-webild-section="MetricsIconCards"><MetricsIconCards
+        tag="Portfolio Overview"
+        title="Investment Performance"
+        description="Real-time metrics and key performance indicators for your active real estate and business holdings."
+        primaryButton={{"text":"View Full Report","href":"/reports/current"}}
+        secondaryButton={{"text":"Download CSV","href":"#download"}}
+        metrics={[{"icon":"Briefcase","title":"Total AUM","value":"$2.4B"},{"icon":"Building","title":"Active Properties","value":"34"},{"icon":"TrendingUp","title":"YTD Return","value":"+14.2%"},{"icon":"Users","title":"Occupancy Rate","value":"96%"}]}
+        textAnimation="fade-blur"
+      /></div>
+      <div data-webild-section="FeaturesMediaGrid"><section aria-label="Features section" className="py-20"><div className="flex flex-col gap-8 md:gap-10"><div className="flex flex-col items-center w-content-width mx-auto gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Asset Management</p></div><TextAnimation text="Global Portfolio Intelligence" variant="fade-blur" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Command your investments with precision. Atlas provides real-time visibility into real estate performance, private equity, and market positions." variant="fade-blur" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Open Dashboard" href="/investment-dashboard" variant="primary" /><Button text="View Reports" href="/reports" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade-blur"><GridOrCarousel><div key="Commercial Real Estate" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/low-angle-view-skyscrapers_1359-1105.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">Commercial Real Estate</h3><p className="text-base leading-snug text-balance">Monitor occupancy rates, NOI, and property valuations across your global commercial assets.</p></div></div>
+<div key="Private Equity Holdings" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/financial-data-analyzing-graph-chart-report-concept_53876-13373.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">Private Equity Holdings</h3><p className="text-base leading-snug text-balance">Track capital deployment, operational milestones, and projected IRR for direct investments.</p></div></div>
+<div key="Market Equities" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/stock-market-exchange-economics-investment-graph_53876-13372.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">Market Equities</h3><p className="text-base leading-snug text-balance">Real-time analysis of liquid assets, dividend yields, and overall portfolio volatility.</p></div></div>
+<div key="AI Valuation Models" className="flex flex-col gap-4 xl:gap-5 2xl:gap-6 h-full"><div className="aspect-square overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/digital-hologram-smart-city-with-futuristic-buildings_53876-104058.jpg" className="rounded" /></div><div className="flex flex-col gap-1"><h3 className="text-3xl font-semibold leading-snug text-balance">AI Valuation Models</h3><p className="text-base leading-snug text-balance">Leverage predictive analytics for proactive asset management and market trend forecasting.</p></div></div></GridOrCarousel></ScrollReveal></div></section></div>
+      <div data-webild-section="FeaturesBento"><FeaturesBento
+        tag="Investment Dashboard"
+        title="Real Estate Portfolio"
+        description="Comprehensive oversight of your assets, cash flow, and acquisition pipeline managed by Atlas."
+        primaryButton={{"text":"View Full Reports","href":"/reports"}}
+        secondaryButton={{"text":"Contact Advisor","href":"/contact"}}
+        features={[{"title":"Portfolio Overview","description":"High-level metrics across your real estate assets.","bentoComponent":"info-card-marquee","infoCards":[{"icon":"Building","label":"Total Assets","value":"$2.4B"},{"icon":"Users","label":"Occupancy Rate","value":"96%"},{"icon":"TrendingUp","label":"YTD Return","value":"14.2%"}]},{"title":"Cash Flow Analysis","description":"Track monthly revenue and operational expenses.","bentoComponent":"animated-bar-chart"},{"title":"Recent Acquisitions","description":"Latest additions to the Atlas managed portfolio.","bentoComponent":"tilted-stack-cards","stackCards":[{"icon":"MapPin","title":"The Grand Plaza","subtitle":"Commercial","detail":"Acquired Q3 2023"},{"icon":"Home","title":"Oakwood Estates","subtitle":"Residential","detail":"Acquired Q2 2023"},{"icon":"Briefcase","title":"Tech Hub Alpha","subtitle":"Industrial","detail":"Acquired Q1 2023"}]},{"title":"Acquisition Pipeline","description":"Current status of pending real estate deals.","bentoComponent":"checklist-timeline","heading":"Project Phoenix","subheading":"Mixed-use development","checklistItems":[{"label":"Due Diligence","detail":"Financial and legal review completed."},{"label":"Financing Secured","detail":"Capital allocation approved."},{"label":"Closing","detail":"Finalizing transfer of ownership."}],"completedLabel":"On Track"}]}
+        textAnimation="fade-blur"
+      /></div>
+    </>
+  );
+}

src/routes.ts

@@ -7,4 +7,6 @@ export interface Route {
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
   { path: '/dashboard', label: 'Dashboard', pageFile: 'DashboardPage' },
+  { path: '/ai-command-center', label: 'Ai Command Center', pageFile: 'AiCommandCenterPage' },
+  { path: '/investment-dashboard', label: 'Investment Dashboard', pageFile: 'InvestmentDashboardPage' },
 ];