Design Finish Stage 1

1. Finish 3 pages design
2025-09-25 15:45:13 +03:00
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "my-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.544.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-router-dom": "^7.9.1",
+    "recharts": "^3.2.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.3",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.4.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.44.0",
+    "vite": "^7.1.7"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,31 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.container {
+    width: 100%;
+    /* max-width: 1500px;    */
+    margin: 0 auto;      
+    padding-left: 1rem;      
+    padding-right: 1rem;      
+    box-sizing: border-box;
+  }
+
+
+  @media (max-width: 1299px) {
+    .container {
+      max-width: 100%;
+    }
+  }
+
+  @media (min-width: 1300px) {
+    .container {
+      max-width: 1300px;
+    }
+  }
+  
+  @media (min-width: 1600px) {
+    .container {
+      max-width: 1824px;
+    }
+  }
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,32 @@
+import './App.css'
+import Header from './components/shared/Header'
+import Footer from './components/shared/Footer'
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Dashboard from './pages/Dashboard';
+import Portfolio from './pages/Portfolio';
+
+import Settings from './pages/Settings';
+import Strategy from './pages/Strategy';
+
+function App() {
+  return (
+    <Router>
+
+      <div className="min-h-screen bg-white">
+        <Header />
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/portfolio" element={<Portfolio />} />
+          <Route path="/strategy" element={<Strategy />} />
+          <Route path="/settings" element={<Settings />} />
+        </Routes>
+        <Footer />
+      </div>
+    </Router>
+  )
+}
+
+export default App
+
+
+
--- a/src/assets/icons/Vector.png
+++ b/src/assets/icons/Vector.png
--- a/src/assets/icons/Vector2.png
+++ b/src/assets/icons/Vector2.png
--- a/src/assets/icons/gpt.png
+++ b/src/assets/icons/gpt.png
--- a/src/assets/icons/preplextiy.png
+++ b/src/assets/icons/preplextiy.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/components/CampaignTracker.tsx
+++ b/src/components/CampaignTracker.tsx
@@ -0,0 +1,137 @@
+
+
+const CampaignTracker = () => {
+  const progressSections = [
+    {
+      title: "Social",
+      current: 42,
+      total: 80,
+      color: "bg-blue-500",
+      bgColor: "bg-blue-100",
+      icons: [
+        { name: "Pinterest", color: "bg-red-600", text: "P", textColor: "text-white" },
+        { name: "Amazon", color: "bg-black", text: "a", textColor: "text-white" },
+        { name: "PayPal", color: "bg-blue-600", text: "P", textColor: "text-white" },
+        { name: "Yelp", color: "bg-red-600", text: "★", textColor: "text-white" },
+        { name: "Uber", color: "bg-black", text: "uber", textColor: "text-white", fontSize: "text-xs" },
+      ],
+    },
+    {
+      title: "Citation",
+      current: 30,
+      total: 80,
+      color: "bg-blue-500",
+      bgColor: "bg-blue-100",
+      icons: [
+        { name: "Service", color: "bg-blue-400", text: "◐", textColor: "text-white" },
+        { name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" },
+        { name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" },
+        { name: "Yelp", color: "bg-red-600", text: "★", textColor: "text-white" },
+        { name: "Pinterest", color: "bg-red-600", text: "P", textColor: "text-white" },
+      ],
+    },
+    {
+      title: "Web 2.0",
+      current: 15,
+      total: 70,
+      color: "bg-green-500",
+      bgColor: "bg-green-100",
+      icons: [
+        { name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" },
+        { name: "Fox", color: "bg-red-600", text: "FOX", textColor: "text-white", fontSize: "text-xs" },
+        { name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" },
+        { name: "Service", color: "bg-green-600", text: "≡", textColor: "text-white" },
+        { name: "Platform", color: "bg-red-600", text: "⬜", textColor: "text-white" },
+      ],
+    },
+    {
+      title: "Multimedia",
+      current: 5,
+      total: 15,
+      color: "bg-yellow-500",
+      bgColor: "bg-yellow-100",
+      icons: [
+        { name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" },
+        { name: "Service", color: "bg-green-600", text: "≡", textColor: "text-white" },
+        { name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" },
+        { name: "Uber", color: "bg-black", text: "uber", textColor: "text-white", fontSize: "text-xs" },
+        { name: "Amazon", color: "bg-black", text: "a", textColor: "text-white" },
+      ],
+    },
+    {
+      title: "Crowd",
+      current: 5,
+      total: 15,
+      color: "bg-red-500",
+      bgColor: "bg-red-100",
+      icons: [
+        { name: "Directory", color: "bg-blue-600", text: "◐", textColor: "text-white" },
+        { name: "PayPal", color: "bg-blue-600", text: "P", textColor: "text-white" },
+        { name: "Package", color: "bg-yellow-400", text: "📦", textColor: "text-white" },
+        { name: "Service", color: "bg-green-600", text: "≡", textColor: "text-white" },
+        { name: "Platform", color: "bg-red-600", text: "⬜", textColor: "text-white" },
+      ],
+    },
+  ]
+
+  return (
+    <div className="max-w-4xl mx-auto p-3 bg-white">
+     
+
+      {/* Status Cards */}
+      <div className="grid grid-cols-3 gap-4 mb-8">
+        <div className="bg-gray-50 rounded-lg p-1 border">
+          <div className="text-sm text-gray-600 mb-1">Indexed:</div>
+          <div className="text-sm font-bold text-gray-900">77%</div>
+        </div>
+        <div className="bg-gray-50 rounded-lg p-1 border">
+          <div className="text-sm text-gray-600 mb-1">Interlinked:</div>
+          <div className="text-sm font-bold text-gray-900">5%</div>
+        </div>
+        <div className="bg-gray-50 rounded-lg p-1 border">
+          <div className="text-sm text-gray-600 mb-1">Publishing:</div>
+          <div className="text-sm font-bold text-gray-900">Locked</div>
+        </div>
+      </div>
+
+      {/* Progress Sections */}
+      <div className="space-y-6">
+        {progressSections.map((section, index) => {
+          const progressPercentage = (section.current / section.total) * 100
+
+          return (
+            <div key={index} className="space-y-1">
+              {/* Section Title and Progress */}
+              <div className="flex items-center justify-between">
+                <h3 className="text-sm font-semibold text-gray-900">
+                  {section.title}: {section.current}/{section.total}
+                </h3>
+                <div className="flex gap-2">
+                  {section.icons.map((icon, iconIndex) => (
+                    <div
+                      key={iconIndex}
+                      className={`w-6 h-6 rounded-lg ${icon.color} ${icon.textColor} flex items-center justify-center font-bold ${icon.fontSize || "text-sm"}`}
+                      title={icon.name}
+                    >
+                      {icon.text}
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Progress Bar */}
+              <div className={`w-full h-3 ${section.bgColor} rounded-full overflow-hidden`}>
+                <div
+                  className={`h-full ${section.color} rounded-full transition-all duration-500 ease-out`}
+                  style={{ width: `${progressPercentage}%` }}
+                />
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default CampaignTracker
--- a/src/components/DashboardGrid.tsx
+++ b/src/components/DashboardGrid.tsx
@@ -0,0 +1,326 @@
+// DashboardGrid.tsx
+
+import { useState } from "react";
+import MultiRingCircularProgress from "./MultiRingCircularProgress";
+import CampaignTracker from "./CampaignTracker";
+import {
+    ArrowLeft, Menu, FileText,
+    TrendingUp,
+    Info,
+    ArrowUp,
+    Link,
+    ChevronDown
+} from "lucide-react";
+import MetricCard from "./shared/MetricCard";
+import UrlDropdown from "./shared/UrlDropdown";
+import HeaderPage from "./shared/HeaderPage";
+
+const CARDS = [
+    {
+        title: "Richard Bower CPA",
+        percent: 99,
+        rings: [
+            { color: "#4285F4", value: 99 }, // blue
+            { color: "#34A853", value: 80 }, // green
+            { color: "#FBBC05", value: 60 }, // yellow
+            { color: "#EA4335", value: 40 }  // red
+        ],
+        tags: [
+            { text: "G 14", extra: "+1", color: "#4285F4" },
+            { text: "Ai" },
+            { text: "LLM" },
+        ]
+    },
+    {
+        title: "CPA Los Angeles",
+        percent: 24,
+        rings: [
+            { color: "#4285F4", value: 24 },
+            { color: "#34A853", value: 18 },
+            { color: "#FBBC05", value: 14 },
+            { color: "#EA4335", value: 8 }
+        ],
+        tags: [
+            { text: "G 14", extra: "-2", color: "#4285F4" }
+        ]
+    },
+    {
+        title: "CPA Los Angeles4",
+        percent: 45,
+        rings: [
+            { color: "#4285F4", value: 45 },
+            { color: "#34A853", value: 42 },
+            { color: "#FBBC05", value: 32 },
+            { color: "#EA4335", value: 24 }
+        ],
+        tags: [
+            { text: "G 14", extra: "-2", color: "#4285F4" },
+            { text: "+7" },
+            { text: "Ai" }
+        ]
+    },
+    {
+        title: "Best CPA Los Angeles5",
+        percent: 89,
+        rings: [
+            { color: "#4285F4", value: 89 },
+            { color: "#34A853", value: 80 },
+            { color: "#FBBC05", value: 72 },
+            { color: "#EA4335", value: 57 }
+        ],
+        tags: [
+            { text: "G 14", extra: "+1", color: "#4285F4" },
+            { text: "+7" },
+            { text: "Ai" }
+        ]
+    },
+    {
+        title: "CPA Hollywood",
+        percent: 100,
+        rings: [
+            { color: "#4285F4", value: 100 },
+            { color: "#34A853", value: 100 },
+            { color: "#FBBC05", value: 100 },
+            { color: "#EA4335", value: 100 }
+        ],
+        tags: [
+            { text: "G 14", extra: "+1", color: "#4285F4" },
+            { text: "+7" },
+            { text: "Ai" }
+        ],
+        badge: "Content Unlocked",
+        actionLink: "View Published Content "
+    },
+    {
+        title: "Best CPA Los Angeles21",
+        percent: 89,
+        rings: [
+            { color: "#cccccc", value: 89 },
+            { color: "#cccccc", value: 80 },
+            { color: "#cccccc", value: 72 },
+            { color: "#cccccc", value: 57 }
+        ],
+        tags: [
+            { text: "G 14", extra: "+1", color: "#cccccc" },
+            { text: "+7", color: "#cccccc" },
+            { text: "Ai", color: "#cccccc" }
+        ],
+        faded: true,
+        paused: true
+    }
+];
+
+const pillClass = (val: string) =>
+    val === 'Done' ? 'bg-green-100 text-green-700 font-bold'
+        : val === 'In Progress' ? 'bg-blue-100 text-blue-700 font-bold'
+            : 'bg-gray-100 text-gray-700 font-bold';
+
+export default function DashboardGrid() {
+    const [selectedCampaigns, setSelectedCampaigns] = useState<string[]>([])
+    const [tableView, setTableView] = useState<string | null>(null)
+    const [activeCard, setActiveCard] = useState<string | null>(null)
+
+    const handleCardClick = (campaignName: string, paused: boolean) => {
+        if (paused) return;
+
+        if (!selectedCampaigns.includes(campaignName)) {
+            setSelectedCampaigns(prev => [...prev, campaignName])
+        }
+        setActiveCard(campaignName)
+    }
+
+    const handleBackClick = () => {
+        if (tableView) {
+            setTableView(null)
+        } else if (activeCard) {
+            // Remove only the active card from selected campaigns
+            setSelectedCampaigns(prev => prev.filter(card => card !== activeCard))
+            setActiveCard(null)
+        }
+    }
+
+    const handleMenuClick = (campaignName: string) => {
+        setTableView(campaignName)
+    }
+
+
+    return (
+        <>
+            <HeaderPage title="Dashboard" />
+
+            {/* Main content area with new metric cards */}
+            <main className="pb-4  px-2 border-collapse border-2 mb-6 rounded-lg">
+                <div className="flex flex-wrap gap-4 lg:flex-row flex-col">
+                    <MetricCard
+                        icon={FileText}
+                        value="5"
+                        label="Active Keywords"
+                        // tooltipText="Total Keywords"
+                        valueChange="10"
+                    />
+                    <MetricCard
+                        icon={Link}
+                        value="112"
+                        label="Total Backlinks"
+                        // tooltipText="Total Backlinks"
+                        valueChange="10"
+                    />
+                    <MetricCard
+                        icon={TrendingUp}
+                        value="34%"
+                        valueChange="+6%"
+                        label="Portfolio Performance"
+                        tooltipText="The % of keywords with top rankings, including page 1, map pack, and Ai."
+                    />
+                </div>
+            </main>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7">
+                {CARDS.map((card, idx) => (
+                    <div
+                        key={idx}
+                        className={`bg-white rounded-2xl shadow-lg border transition-all duration-700 ease-in-out transform 
+                            hover:shadow-2xl hover:scale-105 cursor-pointer
+                            ${card.faded ? "opacity-60" : ""}
+                            ${activeCard === card.title ? "cursor-default" : "cursor-pointer"}
+                            ${selectedCampaigns.includes(card.title)
+                                ? 'shadow-2xl scale-[1.02] '
+                                : 'hover:scale-105 hover:shadow-xl'
+                            }`}
+                        onClick={() => handleCardClick(card.title, card.paused)}
+                        style={{
+                            transform: selectedCampaigns.includes(card.title)
+                                ? 'translateY(-5px) scale(1.02)'
+                                : 'translateY(0px) scale(1)'
+                        }}
+                    >
+                        {selectedCampaigns.includes(card.title) && activeCard === card.title ? (
+                            <div className="py-3 flex flex-col">
+                                {/* Header */}
+                                <div className="flex items-center justify-between  border-b border-gray-200 pb-2">
+                                    <div className="flex items-center gap-4">
+                                        <button
+                                            onClick={handleBackClick}
+                                            className="p-2 hover:bg-gray-100 rounded-lg transition-all duration-300 hover:scale-110"
+                                        >
+                                            <ArrowLeft className="w-5 h-5 text-gray-600" />
+                                        </button>
+                                        <h1 className="text-xl font-bold text-gray-900">{card.title}</h1>
+                                    </div>
+                                    <button
+                                        onClick={() => handleMenuClick(card.title)}
+                                        className="p-2 hover:bg-gray-100 rounded-lg transition-all duration-300 hover:scale-110"
+                                        title="View table"
+                                    >
+                                        <Menu className="w-5 h-5 text-gray-600" />
+                                    </button>
+                                </div>
+
+                                {/* Content with smooth transitions */}
+                                <div className={`transition-all duration-700 ease-in-out ${tableView === card.title
+                                    ? 'opacity-0 translate-y-4 pointer-events-none'
+                                    : 'opacity-100 translate-y-0'
+                                    }`}
+                                    style={{ display: tableView !== card.title ? 'block' : 'none' }}>
+                                    <CampaignTracker />
+                                </div>
+
+                                {/* Table View with smooth transitions */}
+                                <div className={`transition-all duration-700 ease-in-out ${tableView === card.title
+                                    ? 'opacity-100 translate-y-0'
+                                    : 'opacity-0 translate-y-4 pointer-events-none'
+                                    }`}
+                                    style={{ display: tableView === card.title ? 'block' : 'none' }}
+                                >
+                                    <div className="custom-scrollbar-table">
+                                        <table className="w-full rounded-lg ">
+                                            <tbody>
+                                                {[
+                                                    { icon: '🅰️', title: 'Questions to ask your CPA httpAmazon' },
+                                                    { icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon' },
+                                                    { icon: '🎵', title: 'Questions to ask your CPA Published on Amazon AWS' },
+                                                    { icon: '🅰️', title: 'Questions to ask your CPA httpAmazon' },
+                                                    { icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon' },
+                                                    { icon: '🎵', title: 'Questions to ask your CPA Published on Amazon AWS' },
+                                                    { icon: '🅰️', title: 'Questions to ask your CPA httpAmazon' },
+                                                    { icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon' },
+                                                    { icon: '🎵', title: 'Questions to ask your CPA Published on Amazon AWS' },
+                                                    { icon: '🅿️', title: 'Pinterest DR 97 DA 95 Traffic 3,989,220' },
+                                                    { icon: '📄', title: 'Questions to ask your CPA Substack DR 97 DA 95' }
+                                                ].map((row, rIdx) => (
+                                                    <tr key={rIdx} className='border-b last:border-0 hover:bg-[#f1f7fe] transition-colors'>
+                                                        <td className='py-3 pl-2 text-center w-10'>{row.icon}</td>
+                                                        <td className='py-3 px-1 min-w-[300px] text-[#4285F4] hover:text-[#1e40af] cursor-pointer font-medium' title={row.title}>
+                                                            <div className='truncate max-w-[300px] text-sm underline'>{row.title}</div>
+                                                        </td>
+                                                    </tr>
+                                                ))}
+                                            </tbody>
+
+                                        </table>
+
+                                    </div>
+                                    <div className="text-blue-600 text-sm cursor-pointer hover:underline transition-all duration-300 hover:text-blue-800 text-center pt-3" style={{ boxShadow: '#dadada 0px -6px 10px' }}>View All</div>
+                                </div>
+
+                            </div>
+                        ) : (
+                            // Card preview state
+                            <div className="p-5 flex flex-col items-center">
+                                {card.badge && (
+                                    <div className="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-xs font-bold transform rotate-12 shadow-lg">
+                                        {card.badge}
+                                    </div>
+                                )}
+                                <MultiRingCircularProgress card={card} />
+                                <div className={`mt-4 font-bold text-lg text-center ${card.faded ? "text-gray-400" : "text-gray-900"}`}>
+                                    {card.title}
+                                </div>
+                                <div className="mt-3 flex flex-row gap-2 flex-wrap justify-center">
+                                    {card.tags.map((tag, i) => (
+                                        <span
+                                            key={i}
+                                            className={`rounded-full border-2 bg-white px-3 py-1 flex items-center text-sm font-medium transition-all duration-300 hover:scale-105 ${card.faded
+                                                ? "text-gray-400 border-gray-300"
+                                                : "text-gray-700 border-gray-200 hover:border-blue-300"
+                                                }`}
+                                            style={tag.color ? { color: tag.color, borderColor: tag.color } : {}}
+                                        >
+                                            {tag.text}
+                                            {tag.extra && (
+                                                <span className={`ml-1 text-xs ${card.faded ? "text-gray-400" : "text-green-600 font-bold"
+                                                    }`}>
+                                                    {tag.extra}
+                                                </span>
+                                            )}
+                                        </span>
+                                    ))}
+                                </div>
+                                {card.actionLink && (
+                                    <div className="mt-3 text-blue-600 text-sm cursor-pointer hover:underline transition-all duration-300 hover:text-blue-800">
+                                        {card.actionLink}
+                                    </div>
+                                )}
+                                {card.paused && (
+                                    <div className="mt-3 text-center">
+                                        <div className="text-gray-400 text-sm">Campaign paused</div>
+                                        <button className="text-blue-600 text-sm hover:underline transition-all duration-300 hover:text-blue-800">Resume</button>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+
+                    </div>
+                ))}
+
+
+            </div>
+        </>
+    );
+}
+
+// This line to make just try to open one card
+// 106
+// 112
+// 118-121
+// 149
--- a/src/components/IntegratedStrategy.tsx
+++ b/src/components/IntegratedStrategy.tsx
@@ -0,0 +1,377 @@
+import './shared/scrollableComponent.css';
+
+
+interface TaskItem {
+  id: string
+  platform: string
+  icon: string
+  title: string
+  metrics?: string
+  isLink?: boolean
+}
+
+interface Category {
+  name: string
+  count: number
+  color: string
+  items: TaskItem[]
+}
+
+interface Column {
+  title: string
+  count: number
+  date?: string
+  categories: Category[]
+}
+
+const IntegratedStrategy = () => {
+  const columns: Column[] = [
+    {
+      title: "Built",
+      count: 104,
+      categories: [
+        {
+          name: "Social",
+          count: 4,
+          color: "bg-blue-100",
+          items: [
+            {
+              id: "1",
+              platform: "Pinterest",
+              icon: "🅿️",
+              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+              isLink: true,
+            },
+            {
+              id: "2",
+              platform: "Substack",
+              icon: "🟠",
+              title: "Substack DR 97 DA 95",
+              isLink: true,
+            },
+            {
+              id: "3",
+              platform: "PayPal",
+              icon: "🅿️",
+              title: "Paypal DR 97 DA 95 Traffic",
+              isLink: true,
+            },
+            {
+              id: "4",
+              platform: "PayPal",
+              icon: "🅿️",
+              title: "Paypal DR 97 DA 95 Traffic",
+              isLink: true,
+            },
+          ],
+        },
+        {
+          name: "Citation",
+          count: 2,
+          color: "bg-blue-100",
+          items: [
+            {
+              id: "5",
+              platform: "Pinterest",
+              icon: "🅿️",
+              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+              isLink: true,
+            },
+            {
+              id: "6",
+              platform: "Substack",
+              icon: "🟠",
+              title: "Substack DR 97 DA 95 Traffic",
+              isLink: true,
+            },
+          ],
+        },
+        {
+          name: "Web 2.0",
+          count: 3,
+          color: "bg-green-100",
+          items: [
+            {
+              id: "7",
+              platform: "Apple Music",
+              icon: "🎵",
+              title: "Apple Music DR 97 DA 95 Traffic",
+              isLink: true,
+            },
+            {
+              id: "8",
+              platform: "Pinterest",
+              icon: "🅿️",
+              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+              isLink: true,
+            },
+            {
+              id: "9",
+              platform: "Pinterest",
+              icon: "⚫",
+              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+              isLink: true,
+            },
+          ],
+        },
+        {
+          name: "Multimedia",
+          count: 1,
+          color: "bg-yellow-100",
+          items: [
+            {
+              id: "10",
+              platform: "Pinterest",
+              icon: "⚫",
+              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+              isLink: true,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: "In Progress",
+      count: 14,
+      date: "23 Oct 2025",
+      categories: [
+        {
+          name: "Social",
+          count: 3,
+          color: "bg-blue-100",
+          items: [
+            {
+              id: "11",
+              platform: "Pinterest",
+              icon: "🅿️",
+              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+            },
+            {
+              id: "12",
+              platform: "Substack",
+              icon: "🟠",
+              title: "Substack DR 97 DA 95",
+            },
+            {
+              id: "13",
+              platform: "PayPal",
+              icon: "🅿️",
+              title: "Paypal DR 97 DA 95 Traffic",
+            },
+          ],
+        },
+        {
+          name: "Citation",
+          count: 5,
+          color: "bg-blue-100",
+          items: [
+            {
+              id: "14",
+              platform: "Pinterest",
+              icon: "🅿️",
+              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+            },
+            {
+              id: "15",
+              platform: "Pinterest",
+              icon: "🅿️",
+              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+            },
+            {
+              id: "16",
+              platform: "Substack",
+              icon: "🟠",
+              title: "Substack DR 97 DA 95 Traffic",
+            },
+            {
+              id: "17",
+              platform: "PayPal",
+              icon: "🅿️",
+              title: "Paypal DR 97 DA 95 Traffic 3,989,220",
+            },
+            {
+              id: "18",
+              platform: "Apple Music",
+              icon: "🎵",
+              title: "Apple Music DR 97 DA 95 Traffic",
+            },
+          ],
+        },
+        {
+          name: "Web 2.0",
+          count: 5,
+          color: "bg-green-100",
+          items: [
+            {
+              id: "19",
+              platform: "Pinterest",
+              icon: "🅿️",
+              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+            },
+            {
+              id: "20",
+              platform: "Questions",
+              icon: "⚫",
+              title: "Questions to ask your CPA Published o...",
+            },
+            {
+              id: "21",
+              platform: "PayPal",
+              icon: "🅿️",
+              title: "Paypal DR 97 DA 95 Traffic",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: "Coming up",
+      count: 10,
+      date: "23 Nov 2025",
+      categories: [
+        {
+          name: "Social",
+          count: 5,
+          color: "bg-blue-100",
+          items: [
+            {
+              id: "22",
+              platform: "Pinterest",
+              icon: "🅿️",
+              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+            },
+            {
+              id: "23",
+              platform: "Substack",
+              icon: "🟠",
+              title: "Substack DR 97 DA 95",
+            },
+            {
+              id: "24",
+              platform: "PayPal",
+              icon: "🅿️",
+              title: "Paypal DR 97 DA 95 Traffic",
+            },
+            {
+              id: "25",
+              platform: "Pinterest",
+              icon: "🅿️",
+              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+            },
+            {
+              id: "26",
+              platform: "PayPal",
+              icon: "🅿️",
+              title: "Paypal DR 97 DA 95 Traffic",
+            },
+          ],
+        },
+        {
+          name: "Citation",
+          count: 5,
+          color: "bg-blue-100",
+          items: [
+            {
+              id: "27",
+              platform: "Pinterest",
+              icon: "🅿️",
+              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+            },
+            {
+              id: "28",
+              platform: "Pinterest",
+              icon: "🅿️",
+              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+            },
+            {
+              id: "29",
+              platform: "Substack",
+              icon: "🟠",
+              title: "Substack DR 97 DA 95 Traffic",
+            },
+            {
+              id: "30",
+              platform: "PayPal",
+              icon: "🅿️",
+              title: "Paypal DR 97 DA 95 Traffic",
+            },
+            {
+              id: "31",
+              platform: "Apple Music",
+              icon: "🎵",
+              title: "Apple Music DR 97 DA 95 Traffic",
+            },
+          ],
+        },
+        {
+          name: "Web 2.0",
+          count: 2,
+          color: "bg-green-100",
+          items: [
+            {
+              id: "32",
+              platform: "Pinterest",
+              icon: "🅿️",
+              title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+            },
+          ],
+        },
+      ],
+    },
+  ]
+
+  const CategorySection = ({ category }: { category: Category }) => (
+    <div className="mb-4">
+      <div className={`${category.color} px-3 py-2 border-l-4 border-blue-500`}>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
+          <span className="font-medium text-gray-700">{category.name}</span>
+          <span className="text-gray-600 text-sm">{category.count}</span>
+        </div>
+      </div>
+      <div className="bg-white border border-t-0 rounded-b-md">
+        {category.items.map((item) => (
+          <div key={item.id} className="px-3 py-2 border-b border-gray-100 last:border-b-0">
+            <div className="flex items-center gap-2">
+              <span className="text-lg mt-0.5">{item.icon}</span>
+              <span
+                className={`text-sm text-blue-600 hover:text-blue-800  ${item.isLink ? "underline cursor-pointer" : "text-gray-700"}`}
+              >
+                {item.title}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+
+  return (
+    <div className="p-2 bg-gray-50">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {columns.map((column, index) => (
+          <div key={index} className="bg-white rounded-lg shadow-sm border">
+            <div className="border-b border-gray-200 p-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <h2 className="text-lg font-semibold text-gray-900">{column.title}</h2>
+                  <span className="bg-gray-100 text-gray-600 px-2 py-1 rounded-full text-sm font-medium">
+                    {column.count}
+                  </span>
+                </div>
+                {column.date && <span className="text-sm text-gray-500">{column.date}</span>}
+              </div>
+            </div>
+            <div className=' custom-scrollbar'>
+              {column.categories.map((category, categoryIndex) => (
+                <CategorySection key={categoryIndex} category={category} />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default IntegratedStrategy
--- a/src/components/MultiRingCircularProgress.tsx
+++ b/src/components/MultiRingCircularProgress.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { PieChart, Pie, Cell } from "recharts";
+
+interface Ring {
+  color: string;
+  value: number;
+}
+
+interface Card {
+  percent: number;
+  rings: Ring[];
+}
+
+interface MultiRingCircularProgressProps {
+  card: Card;
+}
+
+export default function MultiRingCircularProgress({ card }: MultiRingCircularProgressProps) {
+  const { percent, rings } = card;
+  
+  // Create ring data with proper outer and inner radius calculations
+  const ringData = rings.map((ring, index) => ({
+    ...ring,
+    outerRadius: 120 - (index * 18), // Decrease by 18px for each ring
+    innerRadius: 105 - (index * 18), // Decrease by 18px for each ring
+  }));
+
+  return (
+    <div className="flex items-center justify-center pointer-events-none hover:scale-115 transition-all duration-300">
+      <PieChart width={400} height={400}>
+        {ringData.map((ring, index) => (
+          <Pie
+            key={index}
+            data={[{ value: ring.value }, { value: 100 - ring.value }]}
+            dataKey="value"
+            startAngle={90}
+            endAngle={-270}
+            cornerRadius={50}
+            cx="50%"
+            cy="50%"
+            innerRadius={ring.innerRadius}
+            outerRadius={ring.outerRadius}
+            paddingAngle={0}
+            isAnimationActive={false}
+          >
+            <Cell fill={ring.color} />
+            <Cell fill="#f2f3f5" />
+          </Pie>
+        ))}
+        <text
+          x={200}
+          y={204}
+          textAnchor="middle"
+          dominantBaseline="middle"
+          style={{ fontSize: "1.3rem", fontWeight: "bold" }}
+        >
+          {percent}%
+        </text>
+      </PieChart>
+    </div>
+  );
+}
--- a/src/components/Portfolio/BacklinkTypeDropdown.tsx
+++ b/src/components/Portfolio/BacklinkTypeDropdown.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+
+const BacklinkTypeDropdown = () => {
+
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    const [checkedRings, setCheckedRings] = useState<Record<string, boolean>>({
+        Social: true, Citation: true, 'Web 2.0': true, Multimedia: false, Crowd: false
+    });
+
+    const toggleRing = (ring: string) => setCheckedRings(r => ({ ...r, [ring]: !r[ring] }));
+
+    return (
+        <div className='relative'>
+            <button
+                className='border rounded-lg px-3 py-1 bg-white text-gray-700 font-medium flex items-center text-xs'
+                onClick={() => setDropdownOpen(v => !v)}
+            >
+                Backlink Type <svg className='ml-2 w-4 h-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M19 9l-7 7-7-7' />
+                </svg>
+            </button>
+            {dropdownOpen && (
+                <div className='absolute z-10 bg-white shadow-lg border rounded-lg top-[110%] right-0 px-4 py-3 min-w-[190px]'>
+                    <div className='font-semibold text-xs text-gray-700 mb-2'>Show rings:</div>
+                    {Object.keys(checkedRings).map((ring, idx) => (
+                        <label
+                            key={idx}
+                            className='flex items-center gap-2 py-1 text-[14px] cursor-pointer select-none'
+                            style={{ fontWeight: 500 }}
+                        >
+                            <input
+                                type='checkbox'
+                                checked={checkedRings[ring]}
+                                className='form-checkbox accent-blue-600 w-4 h-4'
+                                onChange={() => toggleRing(ring)}
+                            />
+                            {ring}
+                        </label>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+
+}
+
+export default BacklinkTypeDropdown;
--- a/src/components/Strategy/ProgressMetrics.tsx
+++ b/src/components/Strategy/ProgressMetrics.tsx
@@ -0,0 +1,93 @@
+import Preplextiy from "../../assets/icons/Preplextiy.png"
+import ChatGPT from "../../assets/icons/gpt.png"
+import MetricCard from "../shared/MetricCard"
+
+
+function ProgressMetrics() {
+    return (
+        <div className="bg-white rounded-lg border border-gray-200 p-3 mb-6">
+            <h3 className="text-lg font-bold text-gray-600 mb-2">CPA Los Angeles</h3>
+
+            <div className="flex items-center justify-between border-2 border-solid border-gray-100 rounded-lg p-4">
+                {/* Left section with progress indicators */}
+                <div className="flex items-center   w-1/4 ">
+                    {/* 60% Progress */}
+                    <div className="w-[100%]">
+                        <div className="flex items-center justify-between">
+                            <div className="text-4xl font-bold text-gray-900 mb-1">60%</div>
+                            <div className="text-md font-bold text-gray-900 mb-1">120/250 <span className="text-gray-500">links</span></div>
+                        </div>
+                        <div className="text-sm text-gray-500 mb-2">until content publishing + LLM seeding unlocked</div>
+                        {/* Progress bar */}
+                        <div className="w-70 h-2 bg-gray-200 rounded-full overflow-hidden">
+                            <div
+                                className="h-full bg-gradient-to-r from-blue-500 via-green-500 via-yellow-500 to-orange-500 rounded-full"
+                                style={{ width: "60%" }}
+                            ></div>
+                        </div>
+                    </div>
+
+                </div>
+
+                <div className="flex items-center  w-1/3 2xl:gap-32 gap-3">
+                    {/* 75% Keyword Visibility */}
+                    <div className="w-[30%]">
+                        <div className="text-4xl font-bold text-gray-900 mb-1">75%</div>
+                        <div className="text-sm text-gray-500">Keyword Visibility</div>
+                    </div>
+
+                    <div className="flex items-center gap-3 w-[100%]">
+                        <div className="flex items-center gap-8">
+                            <MetricCard
+                                img={ChatGPT}
+                                value="10" label="ChatGPT" tooltipText="ChatGPT is a chatbot that can answer questions and help with tasks." valueChange="+1" size="sm" />
+                            {/* <img src={ChatGPT} alt="ChatGPT" className="w-8 h-8" /> */}
+
+                            <MetricCard
+                                img={Preplextiy}
+                                value="10" label="Preplextiy" tooltipText="Preplextiy is a chatbot that can answer questions and help with tasks." valueChange="+1" size="sm" />
+                        </div>
+                    </div>
+                </div>
+
+                {/* Right section with Chat GPT and metrics */}
+                <div className="flex items-center w-1/3">
+
+                    {/* Performance metrics with chart */}
+                    <div className="flex items-center gap-4">
+                        <div className="w-42 h-24 relative">
+                            <svg viewBox="0 0 96 48" className="w-full h-full">
+                                <defs>
+                                    <linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                                        <stop offset="0%" stopColor="#10B981" stopOpacity="0.3" />
+                                        <stop offset="100%" stopColor="#10B981" stopOpacity="0.1" />
+                                    </linearGradient>
+                                </defs>
+                                <path d="M0,40 Q24,35 48,25 Q72,20 96,15" fill="none" stroke="#10B981" strokeWidth="2" />
+                                <path d="M0,40 Q24,35 48,25 Q72,20 96,15 L96,48 L0,48 Z" fill="url(#chartGradient)" />
+                                <circle cx="96" cy="15" r="2" fill="#10B981" />
+                            </svg>
+                        </div>
+                        <div className="text-right">
+                            <div className="flex items-center justify-end gap-1 mb-1">
+                                <span className="text-gray-400">G</span>
+                                <span className="text-lg font-bold text-gray-900">7</span>
+                                <span className="text-lg text-green-600 font-medium">+10</span>
+                            </div>
+                            <div className="flex items-center justify-end gap-1 mb-1">
+                                <span className="text-orange-500">📍</span>
+                                <span className="text-lg font-bold text-gray-900">5</span>
+                                <span className="text-lg text-green-600 font-medium">+3</span>
+                            </div>
+                            <div className="text-xs text-gray-500">Current Rank</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* <ShowDetails /> */}
+        </div>
+    )
+}
+
+export default ProgressMetrics
--- a/src/components/Strategy/RoadmapSidebar.tsx
+++ b/src/components/Strategy/RoadmapSidebar.tsx
@@ -0,0 +1,70 @@
+import Vector from "../../assets/icons/Vector.png"
+import Vector2 from "../../assets/icons/Vector2.png"
+
+// Roadmap sidebar component
+const RoadmapSidebar = ({
+    selectedKeyword,
+    onKeywordSelect,
+    mode
+}: {
+    selectedKeyword: string
+    onKeywordSelect: (keyword: string) => void
+    mode: string
+}) => {
+    const keywords = [
+        "CPA Los Angeles",
+        "Richard Bower CPA",
+        "CPA Los Angeles 2",
+        "CPA Hollywood",
+        "Best CPA Los Angeles",
+        "CPA Los Angeles 4",
+    ]
+
+    return (
+        <div className="w-80 h-[100%] bg-white border-2 border-gray-200 rounded-lg">
+            {mode ?
+                null
+                :
+                <div className="mb-2 border-b-2 border-gray-200  p-6">
+                    <h2 className="text-xl font-bold text-gray-900 mb-2">Roadmap</h2>
+                    <div className="flex items-center gap-2">
+                        <span className="text-3xl font-bold text-green-600">1001</span>
+                        <div>
+                            <div className="font-semibold text-gray-900">Total Links</div>
+                            <div className="text-sm text-gray-500">Across all keywords</div>
+                        </div>
+                    </div>
+                </div>
+            }
+
+
+            <div className="space-y-2  pt-0">
+                {keywords.map((keyword, index) => (
+                    <button
+                        key={index}
+                        onClick={() => onKeywordSelect(keyword)}
+                        className={`w-full text-left p-3 rounded-lg flex items-center gap-3 transition-colors ${selectedKeyword === keyword ? "bg-blue-50 border-2 border-dashed border-blue-300" : "hover:bg-gray-50"}`}
+                    >
+                        {
+                            selectedKeyword === keyword
+                                ?
+                                <>
+                                <img src={Vector} alt={keyword} className="w-4 h-4" />
+                                <span className="text-md text-blue-600 font-bold">{keyword}</span>
+                                </>
+                                :
+                                <>
+                                <img src={Vector2} alt={keyword} className="w-4 h-4" />
+                                <span className="text-md text-gray-700 font-bold">{keyword}</span>
+                                </>
+
+                        }
+                        
+                    </button>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default RoadmapSidebar
--- a/src/components/Strategy/ShowDetails.tsx
+++ b/src/components/Strategy/ShowDetails.tsx
@@ -0,0 +1,262 @@
+
+import { useState } from "react"
+
+interface Task {
+  id: string
+  title: string
+  platform: "wordpress" | "substack" | "paypal" | "pinterest" | "apple-music"
+  metrics?: string
+}
+
+interface Column {
+  id: string
+  title: string
+  count: number
+  date: string
+  tasks: Task[]
+}
+
+const platformIcons = {
+  wordpress: (
+    <div className="w-5 h-5 bg-blue-600 rounded-sm flex items-center justify-center">
+      <span className="text-white text-xs font-bold">W</span>
+    </div>
+  ),
+  substack: (
+    <div className="w-5 h-5 bg-orange-500 rounded-sm flex items-center justify-center">
+      <span className="text-white text-xs font-bold">S</span>
+    </div>
+  ),
+  paypal: (
+    <div className="w-5 h-5 bg-blue-500 rounded-sm flex items-center justify-center">
+      <span className="text-white text-xs font-bold">P</span>
+    </div>
+  ),
+  pinterest: (
+    <div className="w-5 h-5 bg-red-500 rounded-sm flex items-center justify-center">
+      <span className="text-white text-xs font-bold">P</span>
+    </div>
+  ),
+  "apple-music": (
+    <div className="w-5 h-5 bg-black rounded-sm flex items-center justify-center">
+      <span className="text-white text-xs font-bold">A</span>
+    </div>
+  ),
+}
+
+const initialData: Column[] = [
+  {
+    id: "published",
+    title: "Published",
+    count: 10,
+    date: "Since 23 Oct 2025",
+    tasks: [
+      {
+        id: "1",
+        title: "Questions to ask your CPA Published o...",
+        platform: "wordpress",
+      },
+      {
+        id: "2",
+        title: "Substack DR 97 DA 95",
+        platform: "substack",
+      },
+      {
+        id: "3",
+        title: "Paypal DR 97 DA 95 Traffic",
+        platform: "paypal",
+      },
+      {
+        id: "4",
+        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+        platform: "pinterest",
+      },
+      {
+        id: "5",
+        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+        platform: "pinterest",
+      },
+      {
+        id: "6",
+        title: "Substack DR 97 DA 95 Traffic",
+        platform: "substack",
+      },
+      {
+        id: "7",
+        title: "Paypal DR 97 DA 95 Traffic 3,989,220",
+        platform: "paypal",
+      },
+      {
+        id: "8",
+        title: "Apple Music DR 97 DA 95 Traffic",
+        platform: "apple-music",
+      },
+      {
+        id: "9",
+        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+        platform: "pinterest",
+      },
+      {
+        id: "10",
+        title: "Questions to ask your CPA Published o...",
+        platform: "wordpress",
+      },
+    ],
+  },
+  {
+    id: "in-progress",
+    title: "In Progress",
+    count: 10,
+    date: "23 Oct 2025",
+    tasks: [
+      {
+        id: "11",
+        title: "Questions to ask your CPA Published o...",
+        platform: "wordpress",
+      },
+      {
+        id: "12",
+        title: "Substack DR 97 DA 95",
+        platform: "substack",
+      },
+      {
+        id: "13",
+        title: "Paypal DR 97 DA 95 Traffic",
+        platform: "paypal",
+      },
+      {
+        id: "14",
+        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+        platform: "pinterest",
+      },
+      {
+        id: "15",
+        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+        platform: "pinterest",
+      },
+      {
+        id: "16",
+        title: "Substack DR 97 DA 95 Traffic",
+        platform: "substack",
+      },
+      {
+        id: "17",
+        title: "Paypal DR 97 DA 95 Traffic 3,989,220",
+        platform: "paypal",
+      },
+      {
+        id: "18",
+        title: "Apple Music DR 97 DA 95 Traffic",
+        platform: "apple-music",
+      },
+      {
+        id: "19",
+        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+        platform: "pinterest",
+      },
+      {
+        id: "20",
+        title: "Questions to ask your CPA Published o...",
+        platform: "wordpress",
+      },
+    ],
+  },
+  {
+    id: "next-month",
+    title: "Next month",
+    count: 10,
+    date: "23 Nov 2025",
+    tasks: [
+      {
+        id: "21",
+        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+        platform: "pinterest",
+      },
+      {
+        id: "22",
+        title: "Substack DR 97 DA 95",
+        platform: "substack",
+      },
+      {
+        id: "23",
+        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+        platform: "pinterest",
+      },
+      {
+        id: "24",
+        title: "Paypal DR 97 DA 95 Traffic",
+        platform: "paypal",
+      },
+      {
+        id: "25",
+        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+        platform: "pinterest",
+      },
+      {
+        id: "26",
+        title: "Substack DR 97 DA 95 Traffic",
+        platform: "substack",
+      },
+      {
+        id: "27",
+        title: "Paypal DR 97 DA 95 Traffic 3,989,220",
+        platform: "paypal",
+      },
+      {
+        id: "28",
+        title: "Apple Music DR 97 DA 95 Traffic",
+        platform: "apple-music",
+      },
+      {
+        id: "29",
+        title: "Pinterest DR 97 DA 95 Traffic 3,989,220",
+        platform: "pinterest",
+      },
+      {
+        id: "30",
+        title: "Questions to ask your CPA Published o...",
+        platform: "wordpress",
+      },
+    ],
+  },
+]
+
+function ShowDetails() {
+  const [columns, setColumns] = useState<Column[]>(initialData)
+
+  return (
+    <div className="p-2">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {columns.map((column) => (
+          <div key={column.id} className="bg-white rounded-lg shadow-sm border border-gray-200 ">
+            {/* Column Header */}
+            <div className="p-4 border-b border-gray-200 bg-[#F6F6FA] rounded-lg flex justify-between items-center ">
+              <div className="flex items-center justify-between">
+                <h3 className="font-semibold text-gray-900 text-lg">{column.title}</h3>
+                <span className="bg-gray-100 text-gray-600 text-sm px-2 py-1 rounded-full">{column.count}</span>
+              </div>
+              <p className="text-sm text-gray-500">{column.date}</p>
+            </div>
+
+            {/* Tasks List */}
+            <div className="p-3 space-y-3 max-h-96 custom-scrollbar">
+              {column.tasks.map((task) => (
+                <div
+                  key={task.id}
+                  className="flex items-start gap-3 p-1 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer border-b-2 border-[#f1eeee]"
+                >
+                  {platformIcons[task.platform]}
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm line-clamp-2 leading-relaxed truncate max-w-[350px] whitespace-pre-wrap text-blue-600 hover:text-blue-800 underline">{task.title}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default ShowDetails
--- a/src/components/shared/ContainerPage.tsx
+++ b/src/components/shared/ContainerPage.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const ContainerPage = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className='min-h-screen container  pt-6 pb-20'>
+        {children}
+    </div>
+  )
+}
+
+export default ContainerPage
--- a/src/components/shared/Footer.tsx
+++ b/src/components/shared/Footer.tsx
@@ -0,0 +1,32 @@
+import { Link } from "react-router-dom"
+
+const Footer = () => {
+  return (
+    <footer className="bg-gray-100 py-6">
+      <div className="max-w-7xl mx-auto px-6">
+        {/* Navigation Links */}
+        <nav className="flex flex-wrap items-center justify-center space-x-8 mb-4">
+          <Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">Home</Link>
+          <Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">About</Link>
+          <Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">Journal</Link>
+          <Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">SEO Tools</Link>
+          <Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">Backlinks</Link>
+          <Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">Help Desk</Link>
+        </nav>
+
+        {/* Copyright and Legal */}
+        <div className="flex items-center justify-center text-sm text-gray-600 lg:flex-row flex-col">
+          <span>©One Keyword LLC. Premiere Position LLC.</span>
+          <span className="mx-2">|</span>
+          <span>30745 Pacific Coast Hwy Ste 21 Malibu, CA 90265</span>
+          <span className="mx-2">|</span>
+          <Link to="#" className="hover:text-gray-800">Terms of Service</Link>
+          <span className="mx-2">|</span>
+          <Link to="#" className="hover:text-gray-800">Privacy Policy</Link>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer
--- a/src/components/shared/Header.tsx
+++ b/src/components/shared/Header.tsx
@@ -0,0 +1,220 @@
+import { useLocation } from "react-router-dom";
+import {
+  LayoutDashboard,
+  BookOpen,
+  CalendarDays,
+  Plus,
+  User,
+  Settings,
+  CreditCard,
+  HelpCircle,
+  MessageCircle,
+  LogOut,
+  ChevronDown,
+  Menu,
+  X,
+} from 'lucide-react';
+
+import logo from "../../assets/logo.png";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+
+const Header = () => {
+  const location = useLocation();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
+
+  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
+  const toggleMobileNav = () => setIsMobileNavOpen(!isMobileNavOpen);
+
+  const navLinks = [
+    { name: 'Dashboard', to: '/', icon: LayoutDashboard },
+    { name: 'Portfolio', to: '/portfolio', icon: BookOpen },
+    { name: 'Strategy', to: '/strategy', icon: CalendarDays },
+  ];
+
+  const menuItems = [
+    { name: 'Edit Profile', icon: User, to: '/profile' },
+    { name: 'Settings', icon: Settings, to: '/settings' },
+    { name: 'Billing', icon: CreditCard, to: '/billing' },
+    { name: 'Help Desk', icon: HelpCircle, to: '/help-desk' },
+    { name: 'Feature Request', icon: MessageCircle, to: '/feature-request' },
+  ];
+
+  useEffect(() => {
+    setIsMenuOpen(false)
+  }, [location.pathname]);
+
+
+  return (
+    <header className="pb-20">
+      <nav className="bg-white/80 backdrop-blur-md shadow-sm fixed top-0 left-0 right-0 z-50">
+        <div className="container mx-auto px-4 py-3 flex justify-between items-center">
+          {/* Left: Logo */}
+          <div className="flex items-center justify-between w-full md:w-auto">
+            <Link to="/" className="flex items-center space-x-2">
+              <img
+                src={logo}
+                alt="logo"
+                className="w-auto h-8 sm:h-10 hover:scale-105 transition-all duration-300"
+              />
+            </Link>
+
+            {/* Mobile menu toggle */}
+            <div className="md:hidden">
+              <button onClick={toggleMobileNav}>
+                {isMobileNavOpen ? <X size={24} /> : <Menu size={24} />}
+              </button>
+            </div>
+          </div>
+
+          {/* Center Nav Links - Hidden on Mobile */}
+          <div className="hidden md:flex md:justify-center md:items-center md:flex-grow">
+            <div className="p-1 rounded-full bg-blue-100/70 shadow-inner flex">
+              {navLinks.map((link, index) => (
+                <Link
+                  key={index}
+                  to={link.to}
+                  className={`px-4 py-2 flex items-center space-x-2 rounded-full font-medium transition-colors duration-200 ${
+                    location.pathname === link.to
+                      ? 'bg-blue-500/80 text-white shadow-md'
+                      : 'text-black/80 hover:bg-blue-200/50'
+                  }`}
+                >
+                  <link.icon size={18} />
+                  <span>{link.name}</span>
+                </Link>
+              ))}
+            </div>
+          </div>
+
+          {/* Right Side - Desktop Only */}
+          <div className="hidden md:flex items-center space-x-4 relative">
+            {/* Add Keyword Button */}
+            <button className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-full font-medium shadow-md hover:bg-blue-700 transition-colors duration-200">
+              <Plus size={18} />
+              <span>Add Keyword</span>
+            </button>
+
+            {/* Profile Dropdown */}
+            <div className="relative">
+              <button
+                onClick={toggleMenu}
+                className="flex items-center space-x-2 rounded-full focus:outline-none"
+              >
+                <img
+                  src="https://placehold.co/40x40/94a3b8/ffffff?text=U"
+                  alt="User avatar"
+                  className="w-10 h-10 rounded-full border-2 border-orange-400"
+                />
+                <ChevronDown
+                  size={16}
+                  className={`text-gray-500 transition-transform duration-200 ${
+                    isMenuOpen ? 'rotate-180' : 'rotate-0'
+                  }`}
+                />
+              </button>
+
+              {/* Dropdown Menu */}
+              {isMenuOpen && (
+                <div className="absolute right-0 mt-3 w-64 bg-white rounded-xl shadow-2xl overflow-hidden py-2 text-gray-700 z-50">
+                  <div className="px-4 py-3 flex items-center space-x-3 border-b border-gray-200">
+                    <img
+                      src="https://placehold.co/40x40/94a3b8/ffffff?text=U"
+                      alt="User avatar"
+                      className="w-10 h-10 rounded-full"
+                    />
+                    <div>
+                      <p className="font-semibold text-sm text-gray-800">Mohammed Said</p>
+                      <p className="text-xs text-gray-500">mohammedsaidaker@gmail.com</p>
+                    </div>
+                  </div>
+                  <div className="py-2">
+                    {menuItems.map((item, index) => (
+                      <Link
+                        key={index}
+                        to={item.to}
+                        className="w-full flex items-center space-x-4 px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors duration-200"
+                      >
+                        <item.icon size={20} className="text-gray-500" />
+                        <span>{item.name}</span>
+                      </Link>
+                    ))}
+                  </div>
+                  <div className="border-t border-gray-200 pt-2">
+                    <button className="w-full flex items-center space-x-4 px-4 py-2 text-gray-700 hover:bg-gray-100 transition-colors duration-200">
+                      <LogOut size={20} className="text-gray-500" />
+                      <span>Log Out</span>
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Mobile nav - visible when toggled */}
+        {isMobileNavOpen && (
+          <div className="md:hidden px-4 pb-4">
+            {/* Nav links */}
+            <div className="flex flex-col gap-2 rounded-xl bg-blue-100/30 p-3 mt-2">
+              {navLinks.map((link, index) => (
+                <Link
+                  key={index}
+                  to={link.to}
+                  className={`flex items-center px-3 py-2 rounded-lg transition-colors duration-200 ${
+                    location.pathname === link.to
+                      ? 'bg-blue-500/80 text-white shadow-md'
+                      : 'text-black/80 hover:bg-blue-200/50'
+                  }`}
+                >
+                  <link.icon size={18} className="mr-2" />
+                  <span>{link.name}</span>
+                </Link>
+              ))}
+            </div>
+
+            {/* Add Keyword Button */}
+            <button className="mt-4 w-full flex items-center justify-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-full font-medium shadow-md hover:bg-blue-700 transition-colors duration-200">
+              <Plus size={18} />
+              <span>Add Keyword</span>
+            </button>
+
+            {/* Profile menu */}
+            <div className="mt-4 p-3 bg-white rounded-xl shadow-md">
+              <div className="flex items-center space-x-3 border-b pb-3 mb-2">
+                <img
+                  src="https://placehold.co/40x40/94a3b8/ffffff?text=U"
+                  alt="User avatar"
+                  className="w-10 h-10 rounded-full"
+                />
+                <div>
+                  <p className="font-semibold text-sm text-gray-800">Mohammed Said</p>
+                  <p className="text-xs text-gray-500">mohammedsaidaker@gmail.com</p>
+                </div>
+              </div>
+              <div className="flex flex-col space-y-2">
+                {menuItems.map((item, index) => (
+                  <Link
+                    key={index}
+                    to={item.to}
+                    className="flex items-center space-x-3 px-4 py-2 rounded-md text-gray-700 hover:bg-gray-100"
+                  >
+                    <item.icon size={18} />
+                    <span>{item.name}</span>
+                  </Link>
+                ))}
+                <button className="flex items-center space-x-3 px-4 py-2 rounded-md text-gray-700 hover:bg-gray-100">
+                  <LogOut size={18} />
+                  <span>Log Out</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </nav>
+    </header>
+  );
+};
+
+export default Header;
--- a/src/components/shared/HeaderPage.tsx
+++ b/src/components/shared/HeaderPage.tsx
@@ -0,0 +1,20 @@
+import MetricCard from "./MetricCard"
+import UrlDropdown from "./UrlDropdown"
+
+const HeaderPage = ({ title }: { title: string }) => {
+    return (
+        <div className="flex space-x-4 my-4 lg:flex-row flex-col items-baseline">
+            <h1 className="text-3xl font-bold text-gray-800">{title}</h1>
+
+            <UrlDropdown />
+
+            <div className="flex space-x-4">
+                <MetricCard value="12" label="DR" valueChange="+1" size="sm" />
+                <MetricCard value="14" label="DA" valueChange="+3" size="sm" />
+                <MetricCard value="10" label="AIQ" valueChange="+2" size="sm" />
+            </div>
+        </div>
+    )
+}
+
+export default HeaderPage
--- a/src/components/shared/MetricCard.tsx
+++ b/src/components/shared/MetricCard.tsx
@@ -0,0 +1,78 @@
+import { ArrowUp, Info } from "lucide-react";
+import { useState } from "react";
+
+// Reusable Metric Card Component
+const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChange, size }: { icon: any, img: any, value: any, label: any, tooltipText: any, valueChange: any, size: any }) => {
+    const [isHovered, setIsHovered] = useState(false);
+
+    if (Img) {
+        return (
+            <div className="relative cursor-pointer"
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}>
+                <img src={Img} alt="Img" className="w-12 h-12" />
+                <div className=" ">
+                    {tooltipText && (
+                        <div className="relative">
+                            {isHovered && (
+                                <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-72 bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
+                                    {/* Tooltip triangle */}
+                                    <div className="absolute bottom-full left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-b-gray-800"></div>
+                                    {tooltipText}
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </div>
+
+            </div>
+        )
+    }
+    return (
+        <div
+            className="flex-1 min-w-[50px] bg-white rounded-xl shadow-sm p-2 flex items-center space-x-2 relative"
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+        >
+            {Icon && (
+                <div className="p-3 bg-gray-100 rounded-lg">
+                    <Icon size={24} className="text-gray-500" />
+                </div>
+            )}
+
+
+
+            <div className="flex-1">
+                <div className={`${size === 'sm' ? 'text-sm border-2 border-gray-200 px-1 rounded-lg' : 'text-xl'} font-bold text-gray-800 flex items-center space-x-2`}>
+                    <span>{value}</span>
+                    {valueChange && (
+                        <div className="flex items-center text-sm font-semibold text-green-500">
+                            {Icon && (
+                                <ArrowUp size={14} className="inline-block mr-1" />
+                            )}
+                            <span>{valueChange}</span>
+                        </div>
+                    )}
+
+                    <div className="flex items-center space-x-1 mt-1 text-gray-500">
+                        <span className="text-sm">{label}</span>
+                        {tooltipText && (
+                            <div className="relative">
+                                <Info size={16} className="text-gray-400 cursor-pointer" />
+                                {isHovered && (
+                                    <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-72 bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
+                                        {/* Tooltip triangle */}
+                                        <div className="absolute bottom-full left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-b-gray-800"></div>
+                                        {tooltipText}
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default MetricCard
--- a/src/components/shared/MyScrollableComponent.tsx
+++ b/src/components/shared/MyScrollableComponent.tsx
@@ -0,0 +1,11 @@
+import './scrollableComponent.css';
+
+export default function MyScrollableComponent() {
+  return (
+    <div className="custom-scrollbar">
+      {[...Array(30)].map((_, index) => (
+        <p key={index}>Line {index + 1}</p>
+      ))}
+    </div>
+  );
+}
--- a/src/components/shared/UrlDropdown.tsx
+++ b/src/components/shared/UrlDropdown.tsx
@@ -0,0 +1,56 @@
+// components/UrlDropdown.jsx
+import { useState } from "react";
+
+const urlOptions = [
+    "http://www.mysite.com",
+    "http://www.myseosucks.com",
+    "http://www.sribbble.com",
+    "http://www.myseosucks.com",
+    "http://www.myseosucks.com",
+    "http://www.myseosucks.com",
+];
+
+export default function UrlDropdown() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selected, setSelected] = useState(urlOptions[0]);
+
+    const toggleDropdown = () => setIsOpen((prev) => !prev);
+    const handleSelect = (url) => {
+        setSelected(url);
+        setIsOpen(false);
+    };
+
+    return (
+        <div className="relative text-sm max-w-[400px] min-w-[220px]">
+            {/* Input box */}
+            <div
+                className="flex justify-between items-center border border-gray-300 bg-white px-2 py-1 rounded-xl cursor-pointer"
+                onClick={toggleDropdown}
+            >
+                <span className="truncate text-gray-800">{selected}</span>
+                <div className="flex items-center gap-2">
+                    <span className="text-gray-500 text-xs">▼</span>
+                </div>
+            </div>
+
+            {/* Dropdown list */}
+            {isOpen && (
+                <div className="absolute mt-1 w-full bg-white border border-gray-200 rounded shadow max-h-60 overflow-y-auto z-10">
+                    {urlOptions.map((url, index) => (
+                        <div
+                            key={index}
+                            onClick={() => handleSelect(url)}
+                            className={`flex justify-between items-center px-3 py-2 hover:bg-gray-100 cursor-pointer ${selected === url ? "font-bold text-black" : "text-gray-700"
+                                }`}
+                        >
+                            <span className="truncate">{url}</span>
+                            {selected === url && (
+                                <span className="text-green-500 text-sm">✔</span>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
--- a/src/components/shared/scrollableComponent.css
+++ b/src/components/shared/scrollableComponent.css
@@ -0,0 +1,44 @@
+.custom-scrollbar {
+    max-height: 600px;
+    overflow-y: scroll;
+    border: 1px solid #ccc;
+    /* padding: 10px; */
+}
+
+.custom-scrollbar-table {
+    max-height: 460px;
+    overflow-y: scroll;
+    border: 1px solid #ccc;
+}
+
+/* ==== WebKit-based browsers (Chrome, Edge, Safari) ==== */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 12px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: #eee;
+  border-radius: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #999;
+  border-radius: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* Remove the up/down arrows */
+.custom-scrollbar::-webkit-scrollbar-button {
+  display: none;
+  height: 0;
+  width: 0;
+}
+
+/* ==== Firefox ==== */
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: #999 #eee;
+}
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,11 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import './App.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -0,0 +1,12 @@
+import DashboardGrid from "../components/DashboardGrid";
+import ContainerPage from "../components/shared/ContainerPage";
+
+const Dashboard = () => {
+  return (
+    <ContainerPage>
+      <DashboardGrid />
+    </ContainerPage>
+  )
+}
+
+export default Dashboard
--- a/src/pages/Portfolio.tsx
+++ b/src/pages/Portfolio.tsx
@@ -0,0 +1,204 @@
+import React, { useState } from 'react';
+
+import Vector from "../assets/icons/Vector.png"
+import Vector2 from "../assets/icons/Vector2.png"
+import BacklinkTypeDropdown from '../components/Portfolio/BacklinkTypeDropdown';
+import RoadmapSidebar from '../components/Strategy/RoadmapSidebar';
+import HeaderPage from '../components/shared/HeaderPage';
+import ContainerPage from '../components/shared/ContainerPage';
+
+
+// Sidebar data
+const sidebarLinks = [
+    'CPA Los Angeles',
+    'Richard Bower CPA',
+    'CPA Los Angeles',
+    'CPA Hollywood',
+    'Best CPA Los Angeles',
+    'CPA Los Angeles',
+];
+
+// Category table data
+const categories = [
+    {
+        name: 'Social',
+        color: 'border-l-4 border-[#4285F4] bg-[#001EE21C]',
+        rows: [
+            { icon: '🅰️', title: 'Questions to ask your CPA httpAmazon', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
+            { icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
+            { icon: '🎵', title: 'Questions to ask your CPA Published on Amazon AWS', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'In Progress', interlinked: 'N/A', date: '9/16/25' },
+            { icon: '🅿️', title: 'Pinterest DR 97 DA 95 Traffic 3,989,220', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
+            { icon: '📄', title: 'Questions to ask your CPA Substack DR 97 DA 95', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'In Progress', interlinked: 'In Progress', date: '9/16/25' }
+        ]
+    },
+    {
+        name: 'Citation',
+        color: 'border-l-4 border-[#0ea5e9] bg-[#3C87FF2B]',
+        rows: [
+            { icon: '📄', title: 'Substack DR 97 DA 95', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'N/A', date: '9/16/25' },
+            { icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon AWS', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
+            { icon: '🅿️', title: 'Paypal DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' }
+        ]
+    },
+    {
+        name: 'Web 2.0',
+        color: 'border-l-4 border-[#22c55e] bg-[#f0fdf4]',
+        rows: [
+            { icon: '🅿️', title: 'Paypal DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'In Progress', interlinked: 'Done', date: '9/16/25' },
+            { icon: '🎵', title: 'Apple Music DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
+            { icon: '📄', title: 'Substack DR 97 DA 95', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
+            { icon: '🅰️', title: 'Questions to ask your CPA Published on Amazon AWS', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' },
+            { icon: '🅿️', title: 'Pin DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: 'Done', interlinked: 'Done', date: '9/16/25' }
+        ]
+    }
+];
+
+const pillClass = (val: string) =>
+    val === 'Done' ? 'bg-green-100 text-green-700 font-bold'
+        : val === 'In Progress' ? 'bg-blue-100 text-blue-700 whitespace-nowrap font-bold'
+            : 'bg-gray-100 text-gray-700 font-bold';
+
+function Portfolio() {
+    const [selectedKeyword, setSelectedKeyword] = useState("CPA Los Angeles")
+
+
+    return (
+        <ContainerPage>
+            <HeaderPage title="Live Library" />
+            <div className='flex gap-8 mx-auto'>
+                {/* Sidebar */}
+                {/* <aside className='w-72 border rounded-2xl shadow-sm bg-white px-5 py-6 h-fit'>
+                    <div className='font-extrabold text-xl mb-5 text-[#4285F4] flex items-center'>
+                        <span className='w-3 h-3 rounded-full bg-[#4285F4] mr-2'></span>
+                        Live Library
+                    </div>
+                    <ul className='space-y-2'>
+                        {sidebarLinks.map((link, idx) => (
+                            <li key={idx} className={`px-3 py-2 text-md flex items-center gap-2 rounded-xl cursor-pointer hover:bg-[#e3edfc] transition-colors ${idx === 0 ? 'bg-[#e3edfc] text-[#4285F4] font-bold' : 'text-gray-700'}`}>
+
+                                {
+                                    idx === 0
+                                        ?
+                                        <img src={Vector} alt={link} className="w-4 h-4" />
+                                        :
+                                        <img src={Vector2} alt={link} className="w-4 h-4" />
+
+                                }
+                                {link}
+                            </li>
+                        ))}
+                    </ul>
+                </aside> */}
+
+                <RoadmapSidebar mode={"portfolio"} selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />
+
+
+                {/* Table Section */}
+                <section className='flex-1 bg-white border rounded-2xl shadow-sm px-6 py-4'>
+                    {/* Title Bar */}
+                    <div className='flex items-center justify-between mb-2'>
+                        <div className='flex flex-col items-start gap-3'>
+                            <span className='text-2xl font-extrabold text-[#4285F4]'>CPA Los Angeles</span>
+                            <span className='bg-[#f1f5f9] text-gray-700 px-3 py-1 rounded-md text-xs border font-medium'>Links: <b>Indexed 32%</b> • Interlinked <b>4%</b></span>
+                            
+                            <span className='flex items-center gap-2 text-gray-800'>Content Publishing: 
+                                <span className='bg-[#fee2e2] text-[#dc2626] px-2 py-0 rounded-md text-xs font-bold border'>Locked</span>
+                            </span>
+                        </div>
+                        <div className='flex items-center gap-3'>
+                            <BacklinkTypeDropdown />
+                            <select className='border px-3 py-1 rounded-lg text-xs bg-[#e3edfc] font-bold text-[#4285F4] hover:bg-[#4285F4] hover:text-white transition-colors'>
+                                <option>DA</option>
+                                <option>DR</option>
+                                <option>Traffic</option>
+                            </select>
+                            <select className='border px-3 py-1 rounded-lg text-xs bg-[#e3edfc] font-bold text-[#4285F4] hover:bg-[#4285F4] hover:text-white transition-colors'>
+                                <option>Traffic</option>
+                                <option>DA</option>
+                                <option>DR</option>
+                            </select>
+                            <button className='bg-[#e3edfc] text-[#4285F4] border px-4 py-1 rounded-lg text-xs font-bold hover:bg-[#4285F4] hover:text-white transition-colors'>Export</button>
+                        </div>
+                    </div>
+
+                    {/* Global Filter/Sort Header Row */}
+                    <div className='flex items-center justify-end gap-4 mb-2 px-4 py-3 '>
+                        <div className='flex items-center gap-8 text-sm font-medium text-gray-600'>
+                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
+                                DR <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
+                                    <path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
+                                </svg>
+                            </span>
+                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
+                                DA <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
+                                    <path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
+                                </svg>
+                            </span>
+                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
+                                Traffic <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
+                                    <path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
+                                </svg>
+                            </span>
+                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
+                                Indexed <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
+                                    <path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
+                                </svg>
+                            </span>
+                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
+                                Interlinked <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
+                                    <path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
+                                </svg>
+                            </span>
+                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
+                                Date <svg className='ml-1 w-4 h-4' fill='currentColor' viewBox='0 0 20 20'>
+                                    <path fillRule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clipRule='evenodd' />
+                                </svg>
+                            </span>
+                        </div>
+                    </div>
+
+                    {/* Tables */}
+                    {categories.map((cat, idx) => (
+                        <div key={idx} className='mb-8 last:mb-0'>
+                            <div className={`px-4 py-3 rounded-lg font-bold text-sm ${cat.color} mb-3`}>
+                                <div className='flex items-center gap-3'>
+                                    <div className='flex items-center gap-2'>
+                                        <span className='text-lg'>{cat.name === 'Social' ? '💬' : cat.name === 'Citation' ? '📊' : '🌐'}</span>
+                                        <span>{cat.name}</span>
+                                    </div>
+                                    <span className='text-xs font-semibold text-gray-500 bg-white px-2 py-1 rounded-full'>{cat.rows.length}</span>
+                                </div>
+                            </div>
+                            <div className='bg-white rounded-xl border overflow-hidden shadow-sm'>
+                                <table className='w-full'>
+                                    <tbody>
+                                        {cat.rows.map((row, rIdx) => (
+                                            <tr key={rIdx} className='border-b last:border-0 hover:bg-[#f1f7fe] transition-colors'>
+                                                <td className='py-3 px-4 text-center w-12'>{row.icon}</td>
+                                                <td className='py-3 px-4 w-full text-[#4285F4] hover:text-[#1e40af] cursor-pointer font-medium' title={row.title}>
+                                                    <div className='truncate max-w-[350px] whitespace-pre-wrap'>{row.title}</div>
+                                                </td>
+                                                <td className='py-3 px-4 text-center w-16 font-semibold'>{row.DR}</td>
+                                                <td className='py-3 px-4 text-center w-16 font-semibold'>{row.DA}</td>
+                                                <td className='py-3 px-4 text-center w-24 font-semibold'>{row.traffic}</td>
+                                                <td className='py-3 px-4 text-center w-20'>
+                                                    <span className={`px-2 py-1 rounded-full text-xs ${pillClass(row.indexed)}`}>{row.indexed}</span>
+                                                </td>
+                                                <td className='py-3 px-4 text-center w-24'>
+                                                    <span className={`px-2 py-1 rounded-full text-xs ${pillClass(row.interlinked)}`}>{row.interlinked}</span>
+                                                </td>
+                                                <td className='py-3 px-4 text-center w-20 font-medium text-gray-600'>{row.date}</td>
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    ))}
+                </section>
+            </div>
+        </ContainerPage>
+    );
+}
+
+export default Portfolio;
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -0,0 +1,217 @@
+import React, { useState } from 'react';
+
+const Settings = () => {
+  const [activeSection, setActiveSection] = useState("profile");
+  const [activeSubSection, setActiveSubSection] = useState("payment-history");
+
+  const sidebarItems = [
+    {
+      id: "profile",
+      label: "Profile",
+      icon: (
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
+        </svg>
+      ),
+      hasSubItems: false
+    },
+    {
+      id: "campaigns",
+      label: "Campaigns",
+      icon: (
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
+        </svg>
+      ),
+      hasSubItems: false
+    },
+    {
+      id: "billing",
+      label: "Billing",
+      icon: (
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z" />
+          <path fillRule="evenodd" d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z" clipRule="evenodd" />
+        </svg>
+      ),
+      hasSubItems: true,
+      subItems: [
+        "Billing info",
+        "Update",
+        "Monthly Engagement",
+        "Billing Date",
+        "Payment History",
+        "Cancel Membership"
+      ]
+    },
+    {
+      id: "help-desk",
+      label: "Help Desk",
+      icon: (
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
+        </svg>
+      ),
+      hasSubItems: false
+    },
+    {
+      id: "feature-request",
+      label: "Feature Request",
+      icon: (
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z" clipRule="evenodd" />
+        </svg>
+      ),
+      hasSubItems: false
+    }
+  ];
+
+  const handleSectionClick = (sectionId: string) => {
+    setActiveSection(sectionId);
+    if (sectionId === "billing") {
+      setActiveSubSection("payment-history");
+    }
+  };
+
+  const handleSubSectionClick = (subSection: string) => {
+    setActiveSubSection(subSection);
+  };
+
+  return (
+      <div className="max-w-7xl mx-auto px-6 py-8">
+        <div className="flex gap-8">
+          {/* Sidebar */}
+          <div className="w-64 flex-shrink-0">
+            <h1 className="text-3xl font-bold text-gray-900 mb-8">Settings</h1>
+            
+            <nav className="space-y-2">
+              {sidebarItems.map((item) => (
+                <div key={item.id}>
+                  <button
+                    onClick={() => handleSectionClick(item.id)}
+                    className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-left transition-colors ${
+                      activeSection === item.id
+                        ? "bg-blue-50 text-blue-600"
+                        : "text-gray-700 hover:bg-gray-50"
+                    }`}
+                  >
+                    {item.icon}
+                    <span className="font-medium">{item.label}</span>
+                    {item.hasSubItems && (
+                      <svg className="w-4 h-4 ml-auto" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
+                      </svg>
+                    )}
+                  </button>
+                  
+                  {item.hasSubItems && activeSection === item.id && (
+                    <div className="ml-8 mt-2 space-y-1">
+                      {item.subItems?.map((subItem) => (
+                        <button
+                          key={subItem}
+                          onClick={() => handleSubSectionClick(subItem.toLowerCase().replace(/\s+/g, "-"))}
+                          className={`w-full flex items-center px-4 py-2 rounded-lg text-left transition-colors ${
+                            activeSubSection === subItem.toLowerCase().replace(/\s+/g, "-")
+                              ? "bg-blue-600 text-white"
+                              : "text-gray-600 hover:bg-gray-50"
+                          }`}
+                        >
+                          {activeSubSection === subItem.toLowerCase().replace(/\s+/g, "-") && (
+                            <div className="w-1 h-6 bg-blue-600 rounded-full mr-3"></div>
+                          )}
+                          <span className="text-sm">{subItem}</span>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </nav>
+          </div>
+
+          {/* Main Content */}
+          <div className="flex-1">
+            <div className="bg-white">
+              <h2 className="text-3xl font-bold text-gray-900 mb-2">Basic Information</h2>
+              <p className="text-gray-600 mb-8">
+                View and update your personal details and account information.
+              </p>
+
+              <form className="space-y-6">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Name
+                  </label>
+                  <input
+                    type="text"
+                    defaultValue="Eugiene Jonathan"
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Email
+                  </label>
+                  <input
+                    type="email"
+                    defaultValue="Eugiene Jonathan"
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Password
+                  </label>
+                  <input
+                    type="password"
+                    defaultValue="Eugiene Jonathan"
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Member Since
+                  </label>
+                  <input
+                    type="text"
+                    defaultValue="12 Aug 2025"
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    <div className="flex items-center space-x-2">
+                      <span>Total Keywords Campaigns</span>
+                      <svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
+                      </svg>
+                    </div>
+                  </label>
+                  <input
+                    type="text"
+                    defaultValue="234,029"
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+
+                <div className="flex justify-end">
+                  <button
+                    type="submit"
+                    className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
+                  >
+                    Save
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+  );
+};
+
+export default Settings;
--- a/src/pages/Strategy.tsx
+++ b/src/pages/Strategy.tsx
@@ -0,0 +1,47 @@
+"use client"
+import { useState } from "react"
+// import { Search, MessageSquare } from "lucide-react"
+import IntegratedStrategy from "../components/IntegratedStrategy"
+import Vector from "../assets/icons/Vector.png"
+import Vector2 from "../assets/icons/Vector2.png"
+import ShowDetails from "../components/Strategy/ShowDetails"
+import ProgressMetrics from "../components/Strategy/ProgressMetrics"
+import RoadmapSidebar from "../components/Strategy/RoadmapSidebar"
+import HeaderPage from "../components/shared/HeaderPage"
+import ContainerPage from "../components/shared/ContainerPage"
+
+
+
+
+// Main integrated dashboard component
+function Strategy() {
+    const [selectedKeyword, setSelectedKeyword] = useState("CPA Los Angeles")
+
+    return (
+        <ContainerPage>
+            <HeaderPage title="Strategy" />
+            <div className="flex  bg-white h-[100%]">
+
+                {/* <RoadmapSidebar selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} /> */}
+
+                <RoadmapSidebar selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />
+
+                <div className="flex-1 px-4">
+                    <ProgressMetrics />
+
+                    <div className="bg-white rounded-lg border border-gray-200 p-3 pb-10">
+
+                        {
+                            selectedKeyword === "CPA Los Angeles" ? <IntegratedStrategy /> : <ShowDetails />
+                        }
+                        {/* <IntegratedStrategy /> */}
+                        {/* <ShowDetails /> */}
+                    </div>
+                </div>
+
+            </div>
+        </ContainerPage>
+    )
+}
+
+export default Strategy
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,25 @@
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+    container: {
+      center: true,
+      padding: '1rem',
+      screens: {
+        sm: '100%',
+        md: '768px',
+        lg: '1024px',
+        xl: '1400px',
+        '2xl': '1800px',
+        // '3xl': '1800px',
+      },
+    },
+  },
+  plugins: [],
+}
+
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// // https://vite.dev/config/
+export default defineConfig({
+
+  plugins: [react()],
+})
+// /** @type {import('tailwindcss').Config} */
+// export default {
+//   content: [
+//     "./index.html",
+//     "./src/**/*.{js,ts,jsx,tsx}",
+//   ],
+//   theme: {
+//     extend: {},
+//   },
+//   plugins: [react()],
+// }
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>