Bob AI: Add portfolio page

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 PortfolioPage from "@/pages/PortfolioPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/portfolio" element={<PortfolioPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -34,7 +34,9 @@ export default function Layout() {
   {
     "name": "Faq",
     "href": "#faq"
-  }
+  },
+  { name: "Portfolio", href: "/portfolio" },
+
 ];
 
   return (

src/pages/PortfolioPage.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
+import MetricsFeatureCards from "@/components/sections/metrics/MetricsFeatureCards";
+import FeaturesIconCards from "@/components/sections/features/FeaturesIconCards";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function PortfolioPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <NavbarCentered
+        logo="Orca"
+        navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Connect Wallet", href: "#" }}
+      />
+
+      <main>
+        <HeroSplitKpi
+          tag="Portfolio Overview"
+          title="Manage Your Assets"
+          description="Track your liquidity positions, token balances, and yield across the ecosystem in real-time."
+          primaryButton={{ text: "Deposit Funds", href: "/trade" }}
+          secondaryButton={{ text: "View History", href: "#" }}
+          kpis={[
+            { value: "$12,450.00", label: "Total Balance" },
+            { value: "+$450.20", label: "24h Yield" }
+          ]}
+          imageSrc="https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?auto=format&fit=crop&q=80"
+        />
+
+        <MetricsFeatureCards
+          tag="Your Positions"
+          title="Active Liquidity"
+          description="Monitor your concentrated liquidity positions and accumulated fees."
+          metrics={[
+            {
+              title: "SOL / USDC",
+              value: "$5,200.00",
+              features: ["Fee Tier: 0.3%", "Est. APR: 12.5%", "Status: In Range"]
+            },
+            {
+              title: "ORCA / SOL",
+              value: "$3,100.00",
+              features: ["Fee Tier: 1.0%", "Est. APR: 45.2%", "Status: In Range"]
+            },
+            {
+              title: "BONK / USDC",
+              value: "$850.00",
+              features: ["Fee Tier: 0.05%", "Est. APR: 8.4%", "Status: Out of Range"]
+            }
+          ]}
+        />
+
+        <FeaturesIconCards
+          tag="Quick Actions"
+          title="Explore the Ecosystem"
+          description="Navigate to key features to optimize your portfolio."
+          features={[
+            {
+              icon: "Zap",
+              title: "Trade Tokens",
+              description: "Swap assets instantly with minimal slippage and low fees."
+            },
+            {
+              icon: "Droplets",
+              title: "Liquidity Pools",
+              description: "Browse top performing pools and provide liquidity to earn yield."
+            },
+            {
+              icon: "PlusCircle",
+              title: "Create Pool",
+              description: "Launch a new market for any token pair permissionlessly."
+            }
+          ]}
+        />
+      </main>
+
+      <FooterSimple
+        brand="Orca"
+        copyright="© 2024 Orca. All rights reserved."
+        columns={[
+          {
+            title: "App",
+            items: [
+              { label: "Trade", href: "/trade" },
+              { label: "Pools", href: "/pools" },
+              { label: "Create Pool", href: "/create-pool" }
+            ]
+          }
+        ]}
+        links={[
+          { label: "Official Site", href: "https://www.orca.so" },
+          { label: "Terms of Service", href: "#" }
+        ]}
+      />
+    </div>
+  );
+}

src/routes.ts

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