Bob AI: Populate the newly-created page at src/pages/DashboardPage.t

Merge version_1_1781983988360 into main

src/App.tsx

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import DashboardPage from "@/pages/DashboardPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/dashboard" element={<DashboardPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -34,7 +34,9 @@ export default function Layout() {
   {
     "name": "Testimonials",
     "href": "#testimonials"
-  }
+  },
+  { name: "Dashboard", href: "/dashboard" },
+
 ];
 
   return (

src/pages/DashboardPage.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import Card from "@/components/ui/Card";
+import Button from "@/components/ui/Button";
+import Input from "@/components/ui/Input";
+import CheckList from "@/components/ui/CheckList";
+import AnimatedBarChart from "@/components/ui/AnimatedBarChart";
+import Tag from "@/components/ui/Tag";
+import { MessageSquare } from "lucide-react";
+
+export default function DashboardPage() {
+  return (
+    <div className="w-full">
+      <div className="w-content-width mx-auto">
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold tracking-tight mb-2">Welcome back, Founder</h1>
+          <p className="text-accent mb-4">Your AI Coach is ready to help you execute your roadmap.</p>
+          <div className="flex gap-2 flex-wrap">
+            <Tag text="Goal: SaaS Business" className="border border-white/10" />
+            <Tag text="Level: Beginner" className="border border-white/10" />
+            <Tag text="Time: 2hrs/day" className="border border-white/10" />
+            <Tag text="Timeline: 30 Days" className="border border-white/10" />
+            <Tag text="Target: $1k/mo" className="border border-white/10" />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* AI Coach Chat Window */}
+          <Card className="col-span-1 lg:col-span-2 flex flex-col h-[600px] p-0 overflow-hidden border border-white/10">
+            <div className="p-4 border-b border-white/10 font-medium flex items-center gap-2 bg-background/50">
+              <MessageSquare className="w-4 h-4 text-primary-cta" /> AI Coach Atlas
+            </div>
+            
+            <div className="flex-1 overflow-y-auto p-4 space-y-4">
+              <div className="flex flex-col gap-1 items-start max-w-[80%]">
+                <div className="bg-background border border-white/10 rounded-theme rounded-tl-sm p-3 text-sm text-foreground">
+                  Based on your goal to reach $1,000/month, I've updated your 30-day roadmap. Today's focus is validating your core offer. Ready to start?
+                </div>
+                <span className="text-[10px] text-accent ml-1">10:00 AM</span>
+              </div>
+              
+              <div className="flex flex-col gap-1 items-end max-w-[80%] ml-auto">
+                <div className="bg-primary-cta text-primary-cta-text rounded-theme rounded-tr-sm p-3 text-sm">
+                  Yes, let's analyze my top 3 ideas. I have a few concepts for B2B SaaS tools.
+                </div>
+                <span className="text-[10px] text-accent mr-1">10:02 AM</span>
+              </div>
+
+              <div className="flex flex-col gap-1 items-start max-w-[80%]">
+                <div className="bg-background border border-white/10 rounded-theme rounded-tl-sm p-3 text-sm text-foreground">
+                  Great. Paste your ideas below, and I'll run them through our validation framework focusing on market demand, your current skills, and time-to-revenue.
+                </div>
+                <span className="text-[10px] text-accent ml-1">10:03 AM</span>
+              </div>
+            </div>
+
+            <div className="p-4 border-t border-white/10 bg-background/50 flex gap-2">
+              <Input placeholder="Type your message to Coach Atlas..." className="flex-1" />
+              <Button text="Send" variant="primary" />
+            </div>
+          </Card>
+
+          {/* Sidebar: Progress & Actions */}
+          <div className="space-y-6">
+            <Card className="p-5 border border-white/10">
+              <h2 className="font-semibold text-foreground mb-4">Quick Actions</h2>
+              <div className="space-y-3">
+                <Button text="Analyze Ideas" variant="secondary" className="w-full justify-start" />
+                <Button text="Generate Business Concepts" variant="secondary" className="w-full justify-start" />
+                <Button text="Create 30-Day Plan ($1k/mo)" variant="primary" className="w-full justify-start" />
+              </div>
+            </Card>
+
+            <Card className="p-5 border border-white/10">
+              <div className="flex justify-between items-center mb-4">
+                <h2 className="font-semibold text-foreground">Roadmap Progress</h2>
+                <span className="text-xs font-medium text-primary-cta">Phase 1</span>
+              </div>
+              <div className="h-32 mb-4 w-full">
+                <AnimatedBarChart />
+              </div>
+              <p className="text-sm text-accent text-center">Validation & Research (40% Complete)</p>
+            </Card>
+
+            <Card className="p-5 border border-white/10">
+              <h2 className="font-semibold text-foreground mb-4">Daily Action Plan</h2>
+              <CheckList 
+                items={[
+                  "Define target audience persona",
+                  "Draft 3 value propositions",
+                  "Set up landing page waitlist"
+                ]} 
+                className="text-sm text-accent"
+              />
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/routes.ts

@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/dashboard', label: 'Dashboard', pageFile: 'DashboardPage' },
 ];