From 567ff2fa8a26af6fe04e2ed30e23a5b0d531211c Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sun, 21 Jun 2026 17:17:01 +0000
Subject: [PATCH] Bob AI: Add portfolio page

---
 src/App.tsx                 |  2 +
 src/components/Layout.tsx   |  4 +-
 src/pages/PortfolioPage.tsx | 99 +++++++++++++++++++++++++++++++++++++
 src/routes.ts               |  1 +
 4 files changed, 105 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/PortfolioPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 33d15f9..4cc1975 100644
--- a/src/App.tsx
+++ b/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>
   );
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 9d99953..46b6439 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -34,7 +34,9 @@ export default function Layout() {
   {
     "name": "Faq",
     "href": "#faq"
-  }
+  },
+  { name: "Portfolio", href: "/portfolio" },
+
 ];
 
   return (
diff --git a/src/pages/PortfolioPage.tsx b/src/pages/PortfolioPage.tsx
new file mode 100644
index 0000000..0ed46f5
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/src/routes.ts b/src/routes.ts
index 362ecb5..bf82e0c 100644
--- a/src/routes.ts
+++ b/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' },
 ];