Analysis Page

updated design IntegratedStrategy
fixed style
2025-10-16 20:49:22 +03:00 · 2025-10-13 13:20:10 +03:00 · 2025-10-13 06:03:31 -04:00 · 2025-10-13 05:59:39 -04:00 · 2025-10-13 05:59:32 -04:00 · 2025-10-13 12:58:42 +03:00
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
        "lucide-react": "^0.544.0",
        "react": "^19.1.1",
        "react-dom": "^19.1.1",
        "react-icons": "^5.5.0",
        "react-router-dom": "^7.9.1",
        "recharts": "^3.2.1"
      },
@@ -4257,6 +4258,15 @@
        "react": "^19.1.1"
      }
    },
    "node_modules/react-icons": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
      "license": "MIT",
      "peerDependencies": {
        "react": "*"
      }
    },
    "node_modules/react-is": {
      "version": "19.1.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz",
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
    "lucide-react": "^0.544.0",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
    "react-icons": "^5.5.0",
    "react-router-dom": "^7.9.1",
    "recharts": "^3.2.1"
  },
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,7 +4,7 @@ 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 Analysis from './pages/Analysis';
 import Settings from './pages/Settings';
 import Strategy from './pages/Strategy';
 import Login from './pages/login';
@@ -19,16 +19,18 @@ function App() {
        <Routes>
          <Route path="/login" element={<Login />} />
-          <Route path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
+          {/* <Route path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
          <Route path="/portfolio" element={<ProtectedRoute><Portfolio /></ProtectedRoute>} />
          <Route path="/analysis" element={<ProtectedRoute><Analysis /></ProtectedRoute>} />
          <Route path="/strategy" element={<ProtectedRoute><Strategy /></ProtectedRoute>} />
          <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
 */}
-
+           <Route path="/" element={<Dashboard />} />
           {/* <Route path="/" element={<Dashboard />} />
           <Route path="/portfolio" element={<Portfolio />} />
           <Route path="/strategy" element={<Strategy />} />
-           <Route path="/settings" element={<Settings />} /> */}
+           <Route path="/settings" element={<Settings />} />
           <Route path="/analysis" element={<Analysis />} />
        </Routes>
--- a/src/assets/icons/iconheader/info.svg
+++ b/src/assets/icons/iconheader/info.svg
@@ -0,0 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 20 20" id="Info">
  <path d="M10 .4C4.697.4.399 4.698.399 10A9.6 9.6 0 0 0 10 19.601c5.301 0 9.6-4.298 9.6-9.601 0-5.302-4.299-9.6-9.6-9.6zm.896 3.466c.936 0 1.211.543 1.211 1.164 0 .775-.62 1.492-1.679 1.492-.886 0-1.308-.445-1.282-1.182 0-.621.519-1.474 1.75-1.474zM8.498 15.75c-.64 0-1.107-.389-.66-2.094l.733-3.025c.127-.484.148-.678 0-.678-.191 0-1.022.334-1.512.664l-.319-.523c1.555-1.299 3.343-2.061 4.108-2.061.64 0 .746.756.427 1.92l-.84 3.18c-.149.562-.085.756.064.756.192 0 .82-.232 1.438-.719l.362.486c-1.513 1.512-3.162 2.094-3.801 2.094z" fill="#999bad" class="color000000 svgShape"></path>
 </svg>
--- a/src/assets/image.png
+++ b/src/assets/image.png
--- a/src/components/Analysis/AnalysisSearch.tsx
+++ b/src/components/Analysis/AnalysisSearch.tsx
@@ -0,0 +1,77 @@
 import { useState } from 'react';
 import { Search } from 'lucide-react';
 const AnalysisSearch = () => {
  const [aiq, setAiq] = useState('10');
  const [website, setWebsite] = useState('mysite.com');
  const handleAnalyze = () => {
    console.log('Analyzing:', { aiq, website });
  };
  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
      <div className="max-w-4xl mx-auto">
        <div className="flex flex-col md:flex-row items-center gap-4">
          <div className="flex items-center gap-3 bg-gray-50 rounded-xl px-6 py-4 border-2 border-gray-200">
            <label htmlFor="aiq" className="text-gray-700 font-medium">
              AIQ
            </label>
            <input
              id="aiq"
              type="number"
              value={aiq}
              onChange={(e) => setAiq(e.target.value)}
              className="w-16 text-center bg-transparent text-xl font-semibold text-gray-900 focus:outline-none"
              min="1"
              max="100"
            />
          </div>
          <div className="flex-1 w-full md:w-auto relative">
            <input
              type="text"
              value={website}
              onChange={(e) => setWebsite(e.target.value)}
              placeholder="Enter website URL"
              className="w-full px-6 py-4 bg-gray-50 border-2 border-gray-200 rounded-xl text-gray-900 font-medium focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all"
            />
            <div className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400">
              <svg
                className="w-5 h-5"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M19 9l-7 7-7-7"
                />
              </svg>
            </div>
          </div>
          <button
            onClick={handleAnalyze}
            className="flex items-center gap-2 px-8 py-4 bg-white hover:bg-gray-100 text-gray-900 font-medium rounded-xl transition-all shadow-lg  active:scale-95"
          >
            <Search className="w-5 h-5" />
            Analyze
          </button>
        </div>
        <div className="mt-6 flex items-center justify-center gap-2 text-sm text-gray-500">
          <div className="flex items-center gap-1">
            <span className="font-medium text-gray-700">AIQ Score:</span>
            <span>Measures AI visibility and authority</span>
          </div>
        </div>
      </div>
    </div>
  );
 };
 export default AnalysisSearch;
--- a/src/components/Analysis/BecomeTheSource.tsx
+++ b/src/components/Analysis/BecomeTheSource.tsx
@@ -0,0 +1,150 @@
 import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
 import { Info, Zap } from 'lucide-react';
 import type { IconType } from 'react-icons';
 import {
    FaBehance, FaPinterest, FaTrello, FaFoursquare,
    FaWordpress, FaMedium, FaStackOverflow,
    FaYoutube, FaPodcast, FaQuora, FaReddit, FaTelegram
 } from 'react-icons/fa';
 import { SiAboutdotme } from 'react-icons/si';
 type SocialIconItem =
    | { Icon: IconType; className: string }
    | { icon: string; className: string };
 const data = [
    { name: 'Branded Aesthetics Social Signals', value: 30, color: '#4E73DF' },
    { name: 'Local + Medical-Cosmetic Citations', value: 30, color: '#5A9FFF' },
    { name: 'Web 2.0 Microblogging Sites', value: 20, color: '#36B37E' },
    { name: 'Multimedia Content & Beauty Visuals', value: 20, color: '#FDB91A' },
    { name: 'Community and UGC Signals', value: 10, color: '#EF5350' },
 ];
 const socialIcons: SocialIconItem[][] = [
    [
        { Icon: FaBehance, className: "text-blue-600" },
        { Icon: FaPinterest, className: "text-red-600" },
        { Icon: FaTrello, className: "text-red-500" }
    ],
    [
        { Icon: FaFoursquare, className: "text-pink-500" },
        { Icon: FaMedium, className: "text-yellow-500" },
        { Icon: SiAboutdotme, className: "text-cyan-400" }
    ],
    [
        { Icon: FaWordpress, className: "text-blue-700" },
        { Icon: FaMedium, className: "text-gray-900" },
        { Icon: FaStackOverflow, className: "text-orange-500" }
    ],
    [
        { Icon: FaYoutube, className: "text-red-600" },
        { Icon: FaPodcast, className: "text-purple-500" },
        { icon: '⦿', className: "text-red-500 text-2xl" }
    ],
    [
        { Icon: FaReddit, className: "text-orange-600" },
        { Icon: FaQuora, className: "text-red-700" },
        { Icon: FaTelegram, className: "text-blue-400" }
    ],
 ];
 const BecomeTheSource = () => {
    return (
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
            <div className="mb-8">
                <h2 className="text-2xl font-bold text-gray-900 mb-2">
                    Become the Source
                </h2>
                <p className="text-gray-500">
                    Custom Authority Beacons & Backlink Strategy, Tailored for{' '}
                    <span className="text-gray-900 font-semibold">Medical Spas</span>
                </p>
            </div>
            <div className="flex items-center mb-8">
                <div className="space-y-4 fl ">
                    <div className="h-80 w-[342px] flex items-center justify-center">
                        <ResponsiveContainer width="100%" height="100%">
                            <PieChart>
                                <Pie
                                    data={data}
                                    cx="50%"
                                    cy="50%"
                                    innerRadius={80}
                                    outerRadius={140}
                                    paddingAngle={2}
                                    dataKey="value"
                                >
                                    {data.map((entry, index) => {
                                        return <Cell key={`cell-${index}`} fill={entry.color} />;
                                    })}
                                </Pie>
                            </PieChart>
                        </ResponsiveContainer>
                    </div>
                </div>
                <div className="space-y-2">
                    {data.map((item, index) => {
                        return (
                            <div key={index} className="flex flex-col items-start gap-1">
                                <div className="flex items-center gap-1">
                                    <div
                                        className="w-3 h-3 rounded-full flex-shrink-0"
                                        style={{ backgroundColor: item.color }}
                                    />
                                    <span className="text-lg font-bold text-gray-900">{item.value}%</span>
                                    <Info className="w-4 h-4 text-gray-400" />
                                </div>
                                <span className="text-sm text-gray-700">{item.name}</span>
                            </div>
                        );
                    })}
                </div>
                <div className="flex items-center justify-center">
                    <div className="flex flex-col gap-3">
                        {socialIcons.map((row, rowIndex) => {
                            return (
                                <div key={rowIndex} className="flex gap-0">
                                    {row.map((item, iconIndex) => {
                                        return (
                                            <div
                                                key={iconIndex}
                                                className="w-10 h-10 rounded-xl ?flex items-center justify-center text-2xl"
                                            >
                                                {'Icon' in item ? (
                                                    (() => {
                                                        const IconComponent = item.Icon;
                                                        return <IconComponent className={item.className} />;
                                                    })()
                                                ) : (
                                                    <span className={item.className}>{item.icon}</span>
                                                )}
                                            </div>
                                        );
                                    })}
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
            <button className="w-[65%] px-6 rounded-2xl bg-white border-4 border-transparent bg-gradient-to-r from-blue-500 via-red-500 via-orange-400 via-yellow-400 to-green-500 bg-clip-padding relative group hover:shadow-xl transition-all py-6 mx-auto">
                <div className="absolute inset-0 bg-white rounded-xl m-[3px] flex items-center justify-center gap-3">
                    <div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center">
                        <Zap className="w-5 h-5 text-white fill-white" />
                    </div>
                    <span className="text-md font-semibold text-gray-900">
                        Add your Keywords and Become the Source
                    </span>
                </div>
            </button>
        </div>
    );
 };
 export default BecomeTheSource;
--- a/src/components/Analysis/SourcesChart.tsx
+++ b/src/components/Analysis/SourcesChart.tsx
@@ -0,0 +1,85 @@
 import { PieChart, Pie, Cell, ResponsiveContainer, Legend } from 'recharts';
 import { Lightbulb } from 'lucide-react';
 const data = [
  { name: 'Consumer Health Giants', value: 40, color: '#6B8FE8' },
  { name: 'Mainstream Media Sections', value: 30, color: '#4E73DF' },
  { name: 'Elite Medical Journals', value: 20, color: '#2E5BC7' },
  { name: 'Specialty Platforms', value: 10, color: '#FDB91A' },
  { name: 'Professional/Academic Crossovers', value: 3, color: '#EF5350' },
 ];
 const SourcesChart = () => {
  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
      <h2 className="text-2xl font-semibold text-gray-900 mb-8">
        AI Frequently Cited Sources in Healthcare
      </h2>
      <div className="grid md:grid-cols-2 gap-8 items-center">
        <div className="h-80 flex items-center justify-center">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={data}
                cx="50%"
                cy="50%"
                innerRadius={80}
                outerRadius={140}
                paddingAngle={2}
                dataKey="value"
              >
                {data.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
            </PieChart>
          </ResponsiveContainer>
        </div>
        <div className="space-y-3">
          {data.map((item, index) => (
            <div
              key={index}
              className="flex items-center gap-4 p-4 rounded-xl bg-gray-50 hover:bg-gray-100 transition-colors"
            >
              <div
                className="w-3 h-3 rounded-full flex-shrink-0"
                style={{ backgroundColor: item.color }}
              />
              <div className="flex-1">
                <span className="text-2xl font-bold text-gray-900">
                  {item.value}%
                </span>
                <span className="ml-2 text-gray-600">{item.name}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="mt-8 bg-blue-50 rounded-xl p-6">
        <div className="flex items-start gap-3">
          <Lightbulb className="w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5" />
          <div>
            <h3 className="font-semibold text-gray-900 mb-2">
              How AI and LLMs Choose Their Sources
            </h3>
            <p className="text-gray-700 leading-relaxed">
              Our analysis reveals distinct patterns in how leading AIs source and prioritize 
              industry information. For example, ChatGPT leans heavily on user-generated content, 
              while Google's AI Overviews favors authoritative tech review sites. Across the 
              board, backlink quality plays a crucial role, with...{' '}
              <button className="text-blue-600 font-medium hover:text-blue-700">
                read more
              </button>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
 };
 export default SourcesChart;
--- a/src/components/Analysis/VisibilityAnalysis.tsx
+++ b/src/components/Analysis/VisibilityAnalysis.tsx
@@ -0,0 +1,125 @@
 import { Info, Share2 } from 'lucide-react';
 import { useState } from 'react';
 type Tab = 'aio' | 'backlinks' | 'gpos' | 'maps' | 'ai-overview' | 'chatgpt' | 'gemini' | 'perplexity';
 const VisibilityAnalysis = () => {
  const [activeTab, setActiveTab] = useState<Tab>('aio');
  const tabs = [
    { id: 'aio' as Tab, label: 'AIO Health', hasInfo: true },
    { id: 'backlinks' as Tab, label: 'Backlinks', hasInfo: true },
    { id: 'gpos' as Tab, label: 'G Pos #' },
    { id: 'maps' as Tab, label: 'Maps' },
    { id: 'ai-overview' as Tab, label: 'AI Overview' },
    { id: 'chatgpt' as Tab, label: 'Chat GPT' },
    { id: 'gemini' as Tab, label: 'Gemini' },
    { id: 'perplexity' as Tab, label: 'Perplexity' },
  ];
  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
      <h2 className="text-2xl font-semibold text-gray-900 mb-6">Analysis of Visibility</h2>
      <div className="mb-6">
        <h3 className="text-xl font-bold text-gray-900">BH Medical Spa of Beverly Hills</h3>
        <div className="flex items-center gap-4 text-sm text-gray-600 mt-1">
          <span>
            <span className="font-medium">Sector:</span> Healthcare
          </span>
          <span>
            <span className="font-medium">Industry:</span> Medical Spa
          </span>
        </div>
      </div>
      <div className="flex items-center justify-between gap-4 mb-6 overflow-x-auto pb-2">
        <div className="flex items-center gap-2">
          {tabs.map((tab) => {
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap flex items-center gap-1 transition-colors ${
                  activeTab === tab.id
                    ? 'bg-gray-900 text-white'
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                }`}
              >
                {tab.label}
                {tab.hasInfo && <Info className="w-3 h-3" />}
              </button>
            );
          })}
        </div>
        <button className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors whitespace-nowrap">
          <Share2 className="w-4 h-4" />
          Share
        </button>
      </div>
      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-3">
        <div className="flex flex-col items-center justify-center p-4 bg-gray-50 rounded-xl min-h-[100px]">
          <div className="w-10 h-10 mb-2 rounded-full border-4 border-blue-500 border-t-transparent animate-[spin_3s_linear_infinite]" />
          <span className="text-xl font-bold text-gray-900">24%</span>
        </div>
        <div className="flex flex-col items-center justify-center p-4 bg-gray-50 rounded-xl min-h-[100px]">
          <div className="w-10 h-10 mb-2 rounded-full border-4 border-blue-500 border-t-transparent animate-[spin_3s_linear_infinite]" />
          <span className="text-xl font-bold text-gray-900">14%</span>
          <span className="text-xs text-gray-500 mt-1">50/370 links</span>
        </div>
        <div className="flex flex-col items-center justify-center p-4 bg-gray-50 rounded-xl min-h-[100px]">
          <div className="w-8 h-8 mb-2 flex items-center justify-center text-2xl font-bold text-blue-600">G</div>
          <span className="text-xl font-bold text-gray-900">5</span>
        </div>
        <div className="flex flex-col items-center justify-center p-4 bg-gray-50 rounded-xl min-h-[100px]">
          <div className="w-8 h-8 mb-2 text-2xl">📍</div>
          <span className="text-xl font-bold text-gray-900">8</span>
        </div>
        <div className="flex flex-col items-center justify-center p-4 bg-gray-50 rounded-xl min-h-[100px]">
          <div className="w-8 h-8 mb-2 flex items-center justify-center">
            <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
            </svg>
          </div>
          <span className="text-xs text-gray-500">Invisible</span>
        </div>
        <div className="flex flex-col items-center justify-center p-4 bg-gray-50 rounded-xl min-h-[100px]">
          <div className="w-8 h-8 mb-2 flex items-center justify-center">
            <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
            </svg>
          </div>
          <span className="text-xs text-gray-500">Invisible</span>
        </div>
        <div className="flex flex-col items-center justify-center p-4 bg-gray-50 rounded-xl min-h-[100px]">
          <div className="w-8 h-8 mb-2 flex items-center justify-center">
            <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
            </svg>
          </div>
          <span className="text-xs text-gray-500">Invisible</span>
        </div>
        <div className="flex flex-col items-center justify-center p-4 bg-gray-50 rounded-xl min-h-[100px]">
          <div className="w-8 h-8 mb-2 flex items-center justify-center">
            <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
          <span className="text-xs text-gray-500">Invisible</span>
        </div>
      </div>
    </div>
  );
 };
 export default VisibilityAnalysis;
--- a/src/components/CampaignTracker.tsx
+++ b/src/components/CampaignTracker.tsx
@@ -79,32 +79,32 @@ const CampaignTracker = ({ handleMenuClick }: { handleMenuClick: () => void }) =
      {/* Status Cards */}
-      <div className="grid grid-cols-3 gap-4 mb-8">
+      <div className="grid grid-cols-3 gap-4 mb-4">
        <div className="px-2 rounded-lg p-1 border">
-          <div className=" text-gray-700 mb-1 ">Indexed:</div>
+          <div className=" text-gray-700  ">Indexed:</div>
          <div className="text-sm font-bold text-gray-900">77%</div>
        </div>
        <div className="px-2 rounded-lg p-1 border">
-          <div className="text- text-gray-700 mb-1 ">Interlinked:</div>
+          <div className="text- text-gray-700 ">Interlinked:</div>
          <div className="text-sm font-bold text-gray-900">5%</div>
        </div>
        <div className="px-2 rounded-lg p-1 border">
-          <div className="text- text-gray-700 mb-1 ">Publishing:</div>
+          <div className="text- text-gray-700  ">Publishing:</div>
          <div className="text-sm font-bold text-gray-900">Locked</div>
        </div>
      </div>
      {/* Progress Sections */}
-      <div className="space-y-8">
+      <div className="space-y-7">
        {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 mb-2">
+              <div className="flex items-center justify-between mb-1">
                <h3 className="text-sm font-semibold text-gray-900">
-                  {section.title}: {section.current}/{section.total}
+                  {section.title}: {section.current}<span className="text-gray-400">/{section.total}</span>
                </h3>
                <div className="flex gap-2">
                  {section.icons.map((icon, iconIndex) => (
@@ -130,6 +130,7 @@ const CampaignTracker = ({ handleMenuClick }: { handleMenuClick: () => void }) =
          )
        })}
      </div>
    </div>
  )
 }
--- a/src/components/DashboardGrid.tsx
+++ b/src/components/DashboardGrid.tsx
@@ -4,31 +4,20 @@ import React, { useState } from "react";
 import MultiRingCircularProgress from "./MultiRingCircularProgress";
 import CampaignTracker from "./CampaignTracker";
 import {
-    ArrowLeft, Menu, FileText,
+    ArrowLeft,
    TrendingUp,
    Info,
    ArrowUp,
    Link,
    ChevronDown,
    MapPin,
    Sparkles
 } from "lucide-react";
 import MetricCard from "./shared/MetricCard";
 import UrlDropdown from "./shared/UrlDropdown";
 import HeaderPage from "./shared/HeaderPage";
 import Google from "../assets/icons/google-original-logo.svg";
 import Gemini from "../assets/icons/gemini.svg";
 import Gemini2 from "../assets/icons/gemini2.svg";
 import Perplexity from "../assets/icons/perplexity-dark-logo.svg";
 import Vector from "../assets/icons/Vector.png";
 import Vector2 from "../assets/icons/Vector2.png";
 import GPT from "../assets/icons/gpt.svg";
 import Map from "../assets/icons/maps.svg";
 import TotalBacklinks from "../assets/icons/iconheader/total.svg";
 import ActiveKeywords from "../assets/icons/iconheader/active.svg";
 import PortfolioPerformance from "../assets/icons/iconheader/portfolio.svg";
-import InfoBadge from "../assets/icons/iconheader/Info-badge.png";
+import InfoBadge from "../assets/icons/iconheader/info.svg";
 import Amazon from "../assets/icons/amazon.svg";
 interface TagContent {
@@ -336,10 +325,6 @@ const competitors = [
 ]
 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[]>([]);
@@ -380,9 +365,6 @@ export default function DashboardGrid() {
        setShowKeywordAnalysis(campaignName);
    };
    const handleCloseKeywordAnalysis = () => {
        setShowKeywordAnalysis(null);
    };
    const TagComponent = ({ content, color = "#4285F4", faded = false }: Tag & { faded?: boolean }) => {
        const getIconContent = (item: TagContent) => {
@@ -469,28 +451,31 @@ export default function DashboardGrid() {
    };
-    const CardHeader = ({ title, value, valueChange, icon, tooltipText }: { title: string, value: string, valueChange?: string, icon: string, tooltipText?: string }) => {
+    const CardHeader = ({ title, value, valueChange, icon, tooltipText, extra }: { title: string, value: string, valueChange?: string, icon: string, tooltipText?: string, extra?: string }) => {
        return (
            <div className="flex items-center gap-2 border-r-2 border-gray-200 pr-4 last:border-r-0 w-full lg:w-[32%] py-2 lg:py-0"
-                onMouseEnter={() => {
+            >
                    if (tooltipText) {
                        setIsHovered(true)
                    }
                }}
                onMouseLeave={() => {
                    if (tooltipText) {
                        setIsHovered(false)
                    }
                }}>
                <img src={icon} alt="Active Keywords" className="w-12 h-12 sm:w-14 sm:h-14" />
                <div className="flex flex-col px-2 sm:px-4">
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-1">
-                        <span className="text-xl sm:text-2xl text-gray-500 font-bold">{value}</span>
+                        <span className="text-xl sm:text-3xl  font-semibold">{value}</span>
                        {extra && <span className="text-lg text-gray-400 font-medium ">{extra}</span>}
                        {tooltipText && <div className="relative w-[10%]"
-                        {tooltipText && <div className="relative">
+                            onMouseEnter={() => {
                                if (tooltipText) {
                                    setIsHovered(true)
                                }
                            }}
                            onMouseLeave={() => {
                                if (tooltipText) {
                                    setIsHovered(false)
                                }
                            }}
                        >
                            {/* <Info size={16} className="text-gray-800 cursor-pointer" /> */}
                            <img src={InfoBadge} alt="Info" className="w-4 h-4 text-gray-800 cursor-pointer" />
@@ -503,7 +488,7 @@ export default function DashboardGrid() {
                            )}
                        </div>}
                    </div>
-                    <div className="text-sm sm:text-base lg:text-lg text-gray-500 ">{title}</div>
+                    <div className="text-sm sm:text-base lg:text-lg text-gray-500 font-normal ">{title}</div>
                    <div className="text-sm sm:text-base lg:text-lg text-gray-500 flex items-center gap-2">
                        <span className="text-sm sm:text-base lg:text-lg text-gray-500 font-bold">{valueChange}</span>
                    </div>
@@ -524,7 +509,7 @@ export default function DashboardGrid() {
            <main className="pb-4 px-2 sm:px-4 border-collapse border-2 mb-6 rounded-lg">
                <div className="flex flex-col lg:flex-row flex-wrap gap-4 justify-between items-stretch py-4 px-2 sm:px-4">
                    <CardHeader title="Active Keywords" value="5" icon={ActiveKeywords} />
-                    <CardHeader title="Total Backlinks" value="112/1012" icon={TotalBacklinks} />
+                    <CardHeader title="Total Backlinks" value="112" extra="/1012" icon={TotalBacklinks} />
                    <CardHeader title="Portfolio Performance" value="34%" icon={PortfolioPerformance} tooltipText="Portfolio Performance is the percentage of keywords that are performing well." />
                </div>
@@ -534,13 +519,13 @@ export default function DashboardGrid() {
                {CARDS.map((card, idx) => (
                    <div
                        key={idx}
-                        className="[perspective:1000px] h-[560px]"
+                        className="[perspective:1000px] h-[480px]"
                        onClick={() => handleCardClick(card.title, card.paused || false)}
                    >
                        <div className={`relative w-full h-full transition-transform duration-700 ease-in-out [transform-style:preserve-3d] ${selectedCampaigns.includes(card.title) ? '[transform:rotateY(180deg)]' : ''
                            }`}>
                            {/* Front of card */}
-                            <div className={`absolute w-full h-full [backface-visibility:hidden] bg-white rounded-2xl  border transition-all duration-300 ease-in-out cursor-pointer ${card.faded ? "opacity- 60" : ""} 
+                            <div className={`absolute w-full h-full [backface-visibility:hidden] bg-white rounded-xl  border transition-all duration-300 ease-in-out cursor-pointer ${card.faded ? "opacity- 60" : ""} 
                            ${selectedCampaigns.includes(card.title) ? 'shadow-md scale-[1.02]' : 'hover:scale-135 hover:shadow-md'
                                }`}
                                style={{
@@ -554,7 +539,7 @@ export default function DashboardGrid() {
                                        <div className="bg-[#f6f8fe] rounded-xl shadow-sm border border-gray-200 p-6 px-20 h-full">
                                            {/* New Keyword Badge */}
-                                            <div className="flex justify-center mb-4">
+                                            <div className="flex justify-center mb-2">
                                                <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium text-[#197232]" style={{ background: "linear-gradient(90deg, #d6fbe2 30%, #edf9d5 100%)" }}>
                                                    <Sparkles className="w-4 h-4" />
                                                    NEW High-Value Keyword Found
@@ -562,12 +547,12 @@ export default function DashboardGrid() {
                                            </div>
                                            {/* Keyword Title */}
-                                            <h2 className="text-2xl font-bold text-gray-900 text-center mb-6">Tax Prep Attorney Los Angeles</h2>
+                                            <h2 className="text-2xl font-bold text-gray-900 text-center mb-4">Tax Prep Attorney Los Angeles</h2>
                                            {/* Competitors List */}
-                                            <div className="space-y-4 mb-6">
+                                            <div className="space-y-3 mb-4">
                                                {competitors.map((competitor, index) => (
-                                                    <div key={index} className="space-y-2">
+                                                    <div key={index} className="space-y-0">
                                                        <div className="text-md text-gray-600 font-bold">{competitor.domain}</div>
                                                        <div className="flex items-center gap-3 flex-wrap">
                                                            {competitor.tags.map((tag, i) => (
@@ -594,27 +579,47 @@ export default function DashboardGrid() {
                                            </div>
                                        </div>
                                        :
-                                        <div className="p-5 flex flex-col items-center h-full">
+                                        <div className={`p-5 pt-8 flex flex-col items-center h-full `}>
                                            {card.badge && (
-                                                <div className="absolute top-0 right-0 overflow-hidden w-32 h-32 pointer-events-none">
+                                                <div className="absolute top-0 right-0 overflow-hidden w-40 h-40 pointer-events-none">
-                                                    <div className="absolute top-6 right-[-100px] w-[320px] bg-[#0CAA75] text-white font-semibold py-4 flex items-center justify-center gap-3 rotate-45 shadow-lg">
+                                                    <div className="absolute top-8 -right-10 w-48 bg-[#0CAA75] text-white font-bold py-2 text-center shadow-lg transform rotate-45">
-                                                        <div className="flex items-center justify-center gap-1 text-xs font-bold whitespace-nowrap">
+                                                        <div className="flex items-center justify-center gap-2 text-xs whitespace-nowrap px-8">
-                                                            <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="11" viewBox="0 0 15 11" fill="none">
-                                                                <path d="M6.20122 0.94856L9.60703 1.3343C11.8086 1.58456 12.9094 1.70875 13.0543 2.33535C13.1991 2.96195 12.2508 3.50763 10.3588 4.59994L10.18 4.70343C9.4979 5.09764 9.15638 5.29427 9.06888 5.6358L9.06417 5.65367C8.98326 5.99802 9.18836 6.35365 9.59857 7.06304C10.3371 8.34164 10.7069 8.98046 10.4434 9.42077L10.4293 9.44241C10.1527 9.87331 9.43957 9.7924 8.0095 9.63058L4.60462 9.2439C2.40307 8.99552 1.30323 8.87039 1.15834 8.24379C1.01345 7.61719 1.96088 7.07057 3.85289 5.97826L4.03165 5.87477C4.71376 5.48244 5.05434 5.28486 5.14372 4.94334L5.14842 4.92547C5.22839 4.58206 5.02329 4.22643 4.61403 3.5161C3.87547 2.2375 3.50573 1.59868 3.76916 1.15837L3.78327 1.13673C4.058 0.705826 4.77303 0.786737 6.20122 0.94856Z" stroke="white" strokeWidth="1.625" />
+                                                                <path d="M6.45122 0.948562L9.85703 1.3343C12.0586 1.58457 13.1594 1.70876 13.3043 2.33535C13.4491 2.96195 12.5008 3.50763 10.6088 4.59994L10.43 4.70343C9.7479 5.09764 9.40638 5.29428 9.31888 5.6358L9.31417 5.65367C9.23326 5.99802 9.43836 6.35365 9.84857 7.06304C10.5871 8.34164 10.9569 8.98046 10.6934 9.42077L10.6793 9.44241C10.4027 9.87331 9.68957 9.7924 8.2595 9.63058L4.85462 9.2439C2.65307 8.99552 1.55323 8.87039 1.40834 8.24379C1.26345 7.6172 2.21088 7.07057 4.10289 5.97826L4.28165 5.87477C4.96376 5.48244 5.30434 5.28487 5.39372 4.94334L5.39842 4.92547C5.47839 4.58206 5.27329 4.22643 4.86403 3.5161C4.12547 2.2375 3.75573 1.59868 4.01916 1.15837L4.03327 1.13673C4.308 0.705828 5.02303 0.786739 6.45122 0.948562Z" stroke="white" stroke-width="1.625" />
                                                            </svg>
                                                            <span>{card.badge}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            )}
                                            {idx === 3 && (
                                                <div className="absolute top-4 left-4">
                                                    <div className="inline-flex items-center gap-2 px-3 py-2 rounded-full text-sm font-bold bg-[#ffebef] border-[#f8d0de] border-2 border-solid mr-2 h-[30px]" style={{ color: "#FFFFFF" }}>
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16" fill="none">
                                                            <path d="M5.83716 4.23774C7.31896 4.23774 8.74008 4.81435 9.78788 5.84071C10.8357 6.86707 11.4243 8.25912 11.4243 9.71062C11.4243 11.1621 10.8357 12.5542 9.78788 13.5805C8.74008 14.6069 7.31896 15.1835 5.83716 15.1835C4.35535 15.1835 2.93424 14.6069 1.88644 13.5805C0.838645 12.5542 0.25 11.1621 0.25 9.71062C0.25 8.25912 0.838645 6.86707 1.88644 5.84071C2.93424 4.81435 4.35535 4.23774 5.83716 4.23774ZM5.83716 5.60596C4.7258 5.60596 3.65997 6.03841 2.87412 6.80819C2.08827 7.57796 1.64679 8.62199 1.64679 9.71062C1.64679 10.7992 2.08827 11.8433 2.87412 12.613C3.65997 13.3828 4.7258 13.8153 5.83716 13.8153C6.94851 13.8153 8.01435 13.3828 8.8002 12.613C9.58604 11.8433 10.0275 10.7992 10.0275 9.71062C10.0275 8.62199 9.58604 7.57796 8.8002 6.80819C8.01435 6.03841 6.94851 5.60596 5.83716 5.60596ZM5.83716 6.63212L6.76044 8.46554L8.82629 8.7597L7.33172 10.1861L7.68441 12.2015L5.83716 11.2499L3.9899 12.2008L4.34259 10.1861L2.84803 8.75902L4.91388 8.46485L5.83716 6.63212ZM10.0275 0.817195V2.86952L9.07561 3.64804C8.28592 3.24152 7.42338 2.98853 6.53555 2.90304V0.817195H10.0275ZM5.13876 0.816511V2.90304C4.25123 2.98841 3.38893 3.24116 2.5994 3.64736L1.64679 2.86952V0.817195L5.13876 0.816511Z" fill="#D55169" />
                                                        </svg>
                                                        <span className="text-[#D55169]">Top rankings</span>
                                                    </div>
                                                    <div
                                                        className="inline-flex items-center gap-2 px-3 py-2 rounded-full text-sm font-bold border-[#9af2b3] border-2 border-solid h-[30px]"
                                                        style={{
                                                            color: "#FFFFFF",
                                                            background: "linear-gradient(278deg, rgba(240, 250, 181, 0.60) 0.47%, rgba(193, 254, 207, 0.60) 46.54%)"
                                                        }}
                                                    >
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16" fill="none">
                                                            <path d="M5.95435 4.23774C7.43615 4.23774 8.85727 4.81435 9.90506 5.84071C10.9529 6.86707 11.5415 8.25912 11.5415 9.71062C11.5415 11.1621 10.9529 12.5542 9.90506 13.5805C8.85727 14.6069 7.43615 15.1835 5.95435 15.1835C4.47254 15.1835 3.05142 14.6069 2.00363 13.5805C0.955833 12.5542 0.367188 11.1621 0.367188 9.71062C0.367188 8.25912 0.955833 6.86707 2.00363 5.84071C3.05142 4.81435 4.47254 4.23774 5.95435 4.23774ZM5.95435 5.60596C4.84299 5.60596 3.77715 6.03841 2.99131 6.80819C2.20546 7.57796 1.76398 8.62199 1.76398 9.71062C1.76398 10.7992 2.20546 11.8433 2.99131 12.613C3.77715 13.3828 4.84299 13.8153 5.95435 13.8153C7.0657 13.8153 8.13154 13.3828 8.91738 12.613C9.70323 11.8433 10.1447 10.7992 10.1447 9.71062C10.1447 8.62199 9.70323 7.57796 8.91738 6.80819C8.13154 6.03841 7.0657 5.60596 5.95435 5.60596ZM5.95435 6.63212L6.87762 8.46554L8.94348 8.7597L7.44891 10.1861L7.8016 12.2015L5.95435 11.2499L4.10709 12.2008L4.45978 10.1861L2.96522 8.75902L5.03107 8.46485L5.95435 6.63212ZM10.1447 0.817195V2.86952L9.1928 3.64804C8.40311 3.24152 7.54056 2.98853 6.65274 2.90304V0.817195H10.1447ZM5.25595 0.816511V2.90304C4.36841 2.98841 3.50612 3.24116 2.71659 3.64736L1.76398 2.86952V0.817195L5.25595 0.816511Z" fill="#30A372" /></svg>
                                                        <span className="text-[#197232]">Top rankings</span>
                                                    </div>
                                                </div>
                                            )}
                                            <MultiRingCircularProgress
                                                card={card}
                                                hoveredIndex={hoverState.cardId === card.title ? hoverState.ringIndex : null}
                                                onHover={(index) => handleRingHover(card.title, index)}
                                                cardId={card.title}
                                            />
-                                            <div className={`mt-1 font-bold text-lg text-center ${card.faded ? "text-gray-400" : "text-gray-900"}`}>
+                                            <div className={`mt-1 font-semibold text-lg text-center ${card.faded ? "text-gray-400" : "text-gray-900"}`}>
                                                {card.title}
                                            </div>
                                            {/* Tags */}
@@ -672,7 +677,7 @@ export default function DashboardGrid() {
                                            >
                                                <ArrowLeft className="w-5 h-5 text-gray-600" />
                                            </button>
-                                            <h1 className="text-xl font-bold text-gray-900">{card.title}</h1>
+                                            <h1 className="text-xl font-semibold text-gray-900">{card.title}</h1>
                                        </div>
                                        {/* <button
                                            onClick={() => handleMenuClick(card.title)}
--- a/src/components/IntegratedStrategy.tsx
+++ b/src/components/IntegratedStrategy.tsx
@@ -14,6 +14,7 @@ interface Category {
  name: string
  count: number
  color: string
  highlight: string
  items: TaskItem[]
 }
@@ -33,7 +34,8 @@ const IntegratedStrategy = () => {
        {
          name: "Social",
          count: 4,
-          color: "bg-blue-100",
+          color: "bg-[rgba(0,30,226,0.11)]",
          highlight: "bg-[#4C60E5]",
          items: [
            {
              id: "1",
@@ -68,7 +70,8 @@ const IntegratedStrategy = () => {
        {
          name: "Citation",
          count: 2,
-          color: "bg-blue-100",
+          color: "bg-[rgba(60,135,255,0.17)]",
          highlight: "bg-[#4285F4]",
          items: [
            {
              id: "5",
@@ -89,7 +92,8 @@ const IntegratedStrategy = () => {
        {
          name: "Web 2.0",
          count: 3,
-          color: "bg-green-100",
+          color: "bg-[rgba(31,228,84,0.16)]",
          highlight: "bg-[#34A853]",
          items: [
            {
              id: "7",
@@ -117,7 +121,8 @@ const IntegratedStrategy = () => {
        {
          name: "Multimedia",
          count: 1,
-          color: "bg-yellow-100",
+          color: "bg-[rgba(255,197,30,0.27)]",
          highlight: "bg-[#FBBC05]",
          items: [
            {
              id: "10",
@@ -138,7 +143,8 @@ const IntegratedStrategy = () => {
        {
          name: "Social",
          count: 3,
-          color: "bg-blue-100",
+          color: "bg-[rgba(0,30,226,0.11)]",
          highlight: "bg-[#4C60E5]",
          items: [
            {
              id: "11",
@@ -163,7 +169,8 @@ const IntegratedStrategy = () => {
        {
          name: "Citation",
          count: 5,
-          color: "bg-blue-100",
+          color: "bg-[rgba(60,135,255,0.17)]",
          highlight: "bg-[#4285F4]",
          items: [
            {
              id: "14",
@@ -200,7 +207,8 @@ const IntegratedStrategy = () => {
        {
          name: "Web 2.0",
          count: 5,
-          color: "bg-green-100",
+          color: "bg-[rgba(31,228,84,0.16)]",
          highlight: "bg-[#34A853]",
          items: [
            {
              id: "19",
@@ -232,7 +240,8 @@ const IntegratedStrategy = () => {
        {
          name: "Social",
          count: 5,
-          color: "bg-blue-100",
+          color: "bg-[rgba(0,30,226,0.11)]",
          highlight: "bg-[#4C60E5]",
          items: [
            {
              id: "22",
@@ -269,7 +278,8 @@ const IntegratedStrategy = () => {
        {
          name: "Citation",
          count: 5,
-          color: "bg-blue-100",
+          color: "bg-[rgba(60,135,255,0.17)]",
          highlight: "bg-[#4285F4]",
          items: [
            {
              id: "27",
@@ -306,7 +316,8 @@ const IntegratedStrategy = () => {
        {
          name: "Web 2.0",
          count: 2,
-          color: "bg-green-100",
+          color: "bg-[rgba(31,228,84,0.16)]",
          highlight: "bg-[#34A853]",
          items: [
            {
              id: "32",
@@ -321,21 +332,22 @@ const IntegratedStrategy = () => {
  ]
  const CategorySection = ({ category }: { category: Category }) => (
-    <div className="mb-4">
+    <div className="mb- bg-white pt-1">
-      <div className={`${category.color} px-3 py-2 border-l-4 border-blue-500`}>
+      <div className={`${category.color} px-3 py-2 mt-2  mb-2 ml-2 mr-2 rounded-xl border-blue-500`}>
        <div className="flex items-center gap-2">
-          <div className="w-2 h-5 bg-blue-500 rounded"></div>
+          <div className={`w-2 h-5 ${category.highlight} rounded`}></div>
-          <span className="font-medium text-lg text-[#2B2D3B]">{category.name}</span>
+
-          <span className="text-[#2B2D3B] text-lg font-bold bg-white py-[1px] px-[10px] rounded-full">{category.count}</span>
+          <span className="font-semibold text-lg text-[#2B2D3B]">{category.name}</span>
          <span className="text-[#2B2D3B] text-lg font-semibold bg-white py-[1px] px-[10px] rounded-full">{category.count}</span>
        </div>
      </div>
-      <div className="bg-white border border-t-0 rounded-b-md">
+      <div className="bg-white border border-l-0 border-r-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-xl mt-0.5">{item.icon}</span>
              <span
-                className={`text-md font-semibold text-blue-600 hover:text-blue-800  ${item.isLink ? "underline cursor-pointer" : "text-gray-700"}`}
+                className={`text-md font-normal text-blue-600 hover:text-blue-800  ${item.isLink ? "underline cursor-pointer" : "text-gray-700"}`}
              >
                {item.title}
              </span>
@@ -347,22 +359,23 @@ const IntegratedStrategy = () => {
  )
  return (
-    <div className="p-2 bg-gray-50">
+    <div className="p-2 ">
      <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 key={index} className="bg-[#f6f6fa] rounded-xl">
-            <div className="border-b border-gray-200 bg-[#f6f6fa] p-4 shadow-lg ">
+            <div className="  p-4 rounded-t-lg border-0 rounded-b-xl"> 
              {/* shadow-[0_4px_8px_0_rgba(0,0,0,0.08)] */}
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
-                  <h2 className="text-lg font-bold text-[#2B2D3B]">{column.title}</h2>
+                  <h2 className="text-lg font-semibold text-[#2B2D3B]">{column.title}</h2>
                  <span className="text-[#2B2D3B] bg-[#e9eaf1] px-2 py-1 rounded-full text-md  font-semibold">
                    {column.count}
                  </span>
                </div>
-                {column.date && <span className="text-sm text-gray-500">{column.date}</span>}
+                {column.date && <span className="text-sm text-gray-500 font-medium">{column.date}</span>}
              </div>
            </div>
-            <div className=' custom-scrollbar'>
+            <div className=' custom-scrollbar rounded-xl px-1' style={{ border: 0}}>
              {column.categories.map((category, categoryIndex) => (
                <CategorySection key={categoryIndex} category={category} />
              ))}
--- a/src/components/MultiRingCircularProgress.tsx
+++ b/src/components/MultiRingCircularProgress.tsx
@@ -1,5 +1,4 @@
-import React from "react";
+import { PieChart, Pie, Cell } from "recharts";
 import { PieChart, Pie, Cell } from "recharts";
 interface Ring {
  color: string;
@@ -15,17 +14,16 @@ interface MultiRingCircularProgressProps {
  card: Card;
  hoveredIndex: number | null;
  onHover: (index: number | null) => void;
  cardId: string;
 }
-export default function MultiRingCircularProgress({ card, hoveredIndex, onHover, cardId }: MultiRingCircularProgressProps) {
+export default function MultiRingCircularProgress({ card, hoveredIndex, onHover }: MultiRingCircularProgressProps) {
  const { percent, rings } = card;
  // Create ring data with proper outer and inner radius calculations
  const ringData = rings.map((ring, index) => ({
    ...ring,
-    outerRadius: 125 - (index * 20), // Decrease by 20px for each ring
+    outerRadius: 110 - (index * 18), // Decrease by 18px for each ring
-    innerRadius: 110 - (index * 20), // Decrease by 20px for each ring
+    innerRadius: 95 - (index * 18), // Decrease by 18px for each ring
  }));
  // When a ring is hovered, other rings become gray
@@ -45,7 +43,7 @@ export default function MultiRingCircularProgress({ card, hoveredIndex, onHover,
      style={{ outline: "none", border: "none" }}
      tabIndex={-1}
    >
-      <PieChart width={400} height={400} className="focus-visible:outline-none focus-visible:ring-0 focus-visible:border-none" >
+      <PieChart width={300} height={300} className="focus-visible:outline-none focus-visible:ring-0 focus-visible:border-none" >
        {ringData.map((ring, index) => (
          <Pie
            key={index}
@@ -74,8 +72,8 @@ export default function MultiRingCircularProgress({ card, hoveredIndex, onHover,
          </Pie>
        ))}
        <text
-          x={200}
+          x={150}
-          y={204}
+          y={154}
          textAnchor="middle"
          dominantBaseline="middle"
          style={{ fontSize: "1.3rem", fontWeight: "bold" }}
--- a/src/components/Portfolio/BacklinkTypeDropdown.tsx
+++ b/src/components/Portfolio/BacklinkTypeDropdown.tsx
@@ -28,11 +28,12 @@ const BacklinkTypeDropdown = ({ options, title, subTitle }: { options: Record<st
    return (
        <div className='relative' ref={dropdownRef}>
            <button
-                className={`border rounded-lg px-3 py-1 bg-white text-gray-500 font-medium flex items-center text-md ${dropdownOpen ? "border-2 border-solid border-blue-500" : ""}`}
+                className={`border rounded-lg px-3 py-1 bg-white  font-normal flex items-center text-md ${dropdownOpen ? "border-2 border-solid border-blue-500" : ""}`}
                onClick={() => setDropdownOpen(v => !v)}
            >
                {title} 
-                <ChevronDown className='ml-2' />
+                <ChevronDown className='ml-2 text-[#65677D]' />
            </button>
            {dropdownOpen && (
                <div className={`absolute z-10 bg-white shadow-lg border rounded-lg top-[110%] right-0 px-4 py-3 min-w-[150px] `}>
--- a/src/components/Strategy/ProgressMetrics.tsx
+++ b/src/components/Strategy/ProgressMetrics.tsx
@@ -1,5 +1,4 @@
 import MetricCard from "../shared/MetricCard"
 import { Stepper } from "../shared/Stepper"
 import Preplextiy from "../../assets/icons/perplextiy.svg"
 import ChatGPT from "../../assets/icons/gpt.svg"
@@ -7,14 +6,13 @@ import Gemini from "../../assets/icons/gemini2.svg"
 import Google from "../../assets/icons/google-original-logo.svg"
 import Map from "../../assets/icons/maps.svg"
 function ProgressMetrics() {
    return (
-        <div className="bg-white rounded-lg border border-gray-200 p-3 mb-6">
+        <div className="bg-white rounded-t-lg border border-b-0 border-gray-200 p-3 ">
            <div className="flex items-center md:flex-row flex-col justify-between pb-3 px-2">
-                <h3 className="text-lg font-bold text-gray-600">CPA Los Angeles</h3>
+                <h3 className="text-lg font-bold text-[#2B2D3B]">CPA Los Angeles</h3>
                {/* Example 2: With Completed Status */}
                <div>
                    <Stepper
@@ -33,13 +31,13 @@ function ProgressMetrics() {
                <div className="flex items-center md:w-1/3 w-full md:border-r-2 border-0 border-solid border-gray-300 md:pr-10 pr-0">
                    {/* 60% Progress */}
                    <div className="w-[100%]">
-                        <div className="flex items-center justify-between">
+                        <div className="flex items-center justify-between mb-1">
-                            <div className="text-lg 3xl:text-4xl font-bold text-gray-900 mb-1">60%</div>
+                            <div className="text-xl 2xl:text-3xl font-bold text-gray-900">60%</div>
-                            <div className="text-md 3xl:text-3xl font-bold text-gray-900 mb-1">120/250 <span className="text-gray-500">links</span></div>
+                            <div className="text-xl 2xl:text-3xl font-bold text-gray-900">120/250 <span className="text-gray-500 text-lg">links</span></div>
                        </div>
-                        <div className="text-xs 2xl:text-sm text-gray-500 mb-2">until content publishing + LLM seeding unlocked</div>
+                        <div className="text-xs 2xl:text-sm text-gray-500 whitespace-nowrap">until content publishing + LLM seeding unlocked</div>
                        {/* Progress bar */}
-                        <div className="w-70 h-3 bg-gray-200 rounded-full overflow-hidden">
+                        <div className="w-full h-3 bg-gray-200 rounded-full overflow-hidden mt-2">
                            <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%" }}
@@ -84,17 +82,35 @@ function ProgressMetrics() {
                    {/* 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">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="119" height="71" viewBox="0 0 119 71" fill="none">
-                                <defs>
+                    <rect width="118" height="70" transform="translate(0.75 0.907593)" fill="white"/>
-                                    <linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                    <mask id="mask0_11446_9597"  maskUnits="userSpaceOnUse" x="3" y="14" width="114" height="52">
-                                        <stop offset="0%" stopColor="#10B981" stopOpacity="0.3" />
+                    <path d="M5.64838 59.4745C5.29306 59.7785 4.46666 60.91 3.91666 61.6963C3.72883 61.9648 3.61438 62.2769 3.57864 62.6027L3.55778 62.7928C3.42792 63.9766 4.35494 65.0109 5.54585 65.0109H114.083C115.187 65.0109 116.083 64.1155 116.083 63.0109V16.0255C116.083 15.4493 115.635 14.9719 115.06 14.934C114.828 14.9188 114.598 14.9775 114.402 15.1023C112.937 16.0346 110.35 17.6811 109.717 18.0872C109.166 18.4407 108.066 18.4994 107.312 18.4766C107.009 18.4675 106.719 18.3693 106.459 18.2136L103.127 16.2099C102.995 16.1305 102.855 16.0663 102.707 16.0216C101.783 15.7416 100.103 15.3214 99.3211 15.4551C98.5905 15.5801 96.2353 15.6692 94.6916 15.7109C94.2535 15.7228 93.8327 15.8756 93.4864 16.1443C91.7793 17.469 88.8713 19.5764 87.6518 19.9024C86.5411 20.1994 84.0773 20.5975 82.3848 20.8485C81.7606 20.9411 81.2146 21.3178 80.904 21.8672C79.6241 24.1312 77.4572 27.7623 76.1946 29.1601C74.3912 31.1569 74.073 31.1569 72.5878 32.246C71.9824 32.6899 71.3514 32.9171 70.8125 33.0212C70.0862 33.1614 69.3304 33.4254 68.8712 34.0053L67.3896 35.8765L65.7129 38.0624C65.4134 38.4528 64.8477 38.5121 64.4738 38.1922C64.0004 37.7872 63.264 38.005 63.0643 38.5952C62.7131 39.6334 62.271 40.7595 61.9793 40.9591C61.4489 41.3222 60.7063 42.5928 60.1759 42.9559C58.9733 43.779 57.1758 42.0663 56.7173 43.4496L56.269 44.8018C56.1202 45.2508 55.8168 45.6318 55.4157 45.8826C54.8933 46.2093 54.2639 46.6112 53.9169 46.8586C53.2803 47.3124 51.2647 48.7646 50.6282 48.8553C49.9917 48.9461 46.4909 49.6722 45.4301 50.0353C44.7384 50.272 43.7648 51.6502 43.1411 52.6761C42.898 53.0761 42.5396 53.3957 42.1053 53.5702C40.6848 54.1409 38.5818 55.0196 38.0042 55.3902C37.1555 55.9348 34.079 55.6625 32.9121 55.3902C31.7452 55.1179 28.6687 54.5733 26.9713 54.5733C25.274 54.5733 26.1227 56.5701 25.274 57.1147C24.595 57.5503 22.5865 58.1433 21.6671 58.3853L17.8781 58.9527C17.5791 58.9974 17.2941 59.1094 17.0446 59.2802L15.9356 60.0392C15.5277 60.3184 15.031 60.437 14.5413 60.3695C13.3132 60.2004 11.6092 59.9553 11.0586 59.8375C10.21 59.656 9.99779 59.2022 7.55784 58.6576C5.11789 58.113 6.17874 59.0207 5.64838 59.4745Z" fill="url(#paint0_linear_11446_9597)"/>
-                                        <stop offset="100%" stopColor="#10B981" stopOpacity="0.1" />
+                    </mask>
-                                    </linearGradient>
+                    <g mask="url(#mask0_11446_9597)">
-                                </defs>
+                    <path opacity="0.25" d="M5.64839 59.4745C5.29307 59.7785 4.46667 60.91 3.91667 61.6963C3.72884 61.9648 3.61438 62.2769 3.57864 62.6027L3.55778 62.7928C3.42792 63.9766 4.35494 65.0109 5.54585 65.0109H114.083C115.188 65.0109 116.083 64.1155 116.083 63.0109V16.0255C116.083 15.4493 115.636 14.9719 115.061 14.934C114.829 14.9188 114.599 14.9775 114.403 15.1023C112.937 16.0346 110.351 17.6811 109.718 18.0872C109.167 18.4407 108.066 18.4994 107.312 18.4766C107.01 18.4675 106.719 18.3693 106.46 18.2136L103.127 16.2099C102.995 16.1305 102.855 16.0663 102.708 16.0216C101.784 15.7416 100.103 15.3214 99.3215 15.4551C98.591 15.5801 96.2357 15.6692 94.692 15.7109C94.2539 15.7228 93.8331 15.8756 93.4868 16.1443C91.7797 17.469 88.8717 19.5764 87.6522 19.9024C86.5415 20.1994 84.0776 20.5975 82.3852 20.8485C81.7609 20.9411 81.215 21.3178 80.9044 21.8672C79.6244 24.1311 77.4575 27.7623 76.195 29.1601C74.3915 31.1569 74.0733 31.1569 72.5881 32.246C71.9827 32.6899 71.3517 32.9171 70.8128 33.0212C70.0865 33.1614 69.3307 33.4254 68.8715 34.0053L67.3899 35.8765L65.7132 38.0624C65.4137 38.4528 64.848 38.5121 64.4741 38.1922C64.0007 37.7872 63.2643 38.005 63.0646 38.5952C62.7133 39.6334 62.2713 40.7595 61.9796 40.9591C61.4491 41.3222 60.7065 42.5928 60.1761 42.9559C58.9735 43.779 57.176 42.0663 56.7175 43.4496L56.2693 44.8018C56.1204 45.2508 55.817 45.6318 55.416 45.8826C54.8935 46.2093 54.2641 46.6112 53.9171 46.8586C53.2806 47.3124 51.265 48.7646 50.6284 48.8553C49.9919 48.9461 46.4911 49.6722 45.4303 50.0353C44.7386 50.272 43.765 51.6502 43.1413 52.6761C42.8982 53.0761 42.5398 53.3957 42.1055 53.5702C40.685 54.1409 38.5819 55.0196 38.0043 55.3902C37.1556 55.9348 34.0792 55.6625 32.9122 55.3902C31.7453 55.1179 28.6688 54.5733 26.9714 54.5733C25.2741 54.5733 26.1228 56.5701 25.2741 57.1147C24.5951 57.5503 22.5866 58.1433 21.6672 58.3853L17.8781 58.9527C17.5791 58.9974 17.2942 59.1094 17.0447 59.2802L15.9357 60.0392C15.5278 60.3184 15.031 60.437 14.5414 60.3695C13.3133 60.2004 11.6093 59.9553 11.0587 59.8375C10.21 59.656 9.99782 59.2022 7.55786 58.6576C5.1179 58.113 6.17875 59.0207 5.64839 59.4745Z" fill="url(#paint1_linear_11446_9597)"/>
-                                <path d="M0,40 Q24,35 48,25 Q72,20 96,15" fill="none" stroke="#10B981" strokeWidth="2" />
+                    </g>
-                                <path d="M0,40 Q24,35 48,25 Q72,20 96,15 L96,48 L0,48 Z" fill="url(#chartGradient)" />
+                    <path d="M3.63379 62.1066C4.12877 61.3805 5.22481 59.8376 5.6491 59.4745C6.17946 59.0207 5.11862 58.113 7.55857 58.6576C9.99851 59.2022 10.2107 59.656 11.0594 59.8375C11.6099 59.9553 13.3139 60.2004 14.542 60.3695C15.0317 60.437 15.5285 60.3184 15.9364 60.0392L17.0453 59.2802C17.2948 59.1094 17.5798 58.9974 17.8788 58.9527L21.6678 58.3853C22.5872 58.1433 24.5958 57.5503 25.2747 57.1147C26.1234 56.5701 25.2747 54.5733 26.9721 54.5733C28.6694 54.5733 31.7459 55.1179 32.9128 55.3902C34.0797 55.6625 37.1562 55.9348 38.0049 55.3902C38.5825 55.0196 40.6855 54.1409 42.106 53.5702C42.5404 53.3957 42.8987 53.0761 43.1419 52.6761C43.7655 51.6502 44.7391 50.272 45.4308 50.0353C46.4917 49.6722 49.9924 48.9461 50.629 48.8553C51.2655 48.7646 53.2811 47.3124 53.9176 46.8586C54.2646 46.6112 54.894 46.2093 55.4165 45.8826C55.8175 45.6318 56.1209 45.2508 56.2698 44.8018L56.718 43.4496C57.1765 42.0663 58.974 43.779 60.1766 42.9559C60.707 42.5928 61.4496 41.3222 61.98 40.9591C62.2717 40.7595 62.7138 39.6334 63.0651 38.5952C63.2647 38.005 64.0011 37.7872 64.4746 38.1922C64.8484 38.5121 65.4142 38.4528 65.7136 38.0624L67.3903 35.8765L68.8719 34.0053C69.3311 33.4254 70.0869 33.1614 70.8132 33.0212C71.3521 32.9171 71.9832 32.6899 72.5885 32.246C74.0737 31.1569 74.3919 31.1569 76.1954 29.1601C77.4579 27.7623 79.6248 24.1312 80.9048 21.8672C81.2153 21.3178 81.7613 20.9411 82.3856 20.8485C84.078 20.5975 86.5419 20.1994 87.6525 19.9024C88.872 19.5764 91.78 17.469 93.4871 16.1443C93.8334 15.8756 94.2542 15.7228 94.6923 15.7109C96.236 15.6692 98.5913 15.5801 99.3218 15.4551C100.103 15.3214 101.784 15.7416 102.708 16.0216C102.855 16.0663 102.995 16.1305 103.127 16.2099L106.46 18.2136C106.719 18.3693 107.01 18.4675 107.312 18.4766C108.067 18.4994 109.167 18.4407 109.718 18.0872C110.316 17.7033 112.66 16.211 114.153 15.2614C114.511 15.0332 114.933 14.9256 115.357 14.9535L116.083 15.0013" stroke="url(#paint2_linear_11446_9597)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-                                <circle cx="96" cy="15" r="2" fill="#10B981" />
+                    <defs>
-                            </svg>
+                    <linearGradient id="paint0_linear_11446_9597" x1="59.6985" y1="14.9105" x2="59.6985" y2="65.0109" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#DF8D2D"/>
                    <stop offset="1" stop-color="#794D18" stop-opacity="0"/>
                    </linearGradient>
                    <linearGradient id="paint1_linear_11446_9597" x1="3.31445" y1="39.9607" x2="142.824" y2="39.942" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#2F82F8"/>
                    <stop offset="0.348569" stop-color="#0EB65E"/>
                    <stop offset="0.67237" stop-color="#F6CA09"/>
                    <stop offset="1" stop-color="#F5484A"/>
                    </linearGradient>
                    <linearGradient id="paint2_linear_11446_9597" x1="3.63379" y1="38.5085" x2="142.748" y2="38.4888" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#2F82F8"/>
                    <stop offset="0.348569" stop-color="#0EB65E"/>
                    <stop offset="0.67237" stop-color="#F6CA09"/>
                    <stop offset="1" stop-color="#F5484A"/>
                    </linearGradient>
                    </defs>
                    </svg>
                        </div>
                        <div className="text-right">    
                            <div className="flex items-center justify-start gap-1 mb-1">
@@ -103,7 +119,7 @@ function ProgressMetrics() {
                                <span className="text-lg text-green-600 font-medium">+10</span>
                            </div>
                            <div className="flex items-center justify-start gap-1 mb-1">
-                                <img src={Google} className="w-5 h-5 mr-2" alt="" />
+                                <img src={Map} className="w-5 h-8 mr-2" alt="" />
                                <span className="text-lg font-bold text-gray-900">5</span>
                                <span className="text-lg text-green-600 font-medium">+3</span>
                            </div>
--- a/src/components/Strategy/RoadmapSidebar.tsx
+++ b/src/components/Strategy/RoadmapSidebar.tsx
@@ -1,3 +1,6 @@
 // بسم الله الرحمن الرحيم
 // بسم الله الرحمن الرحيم
 import Vector from "../../assets/icons/Vector.png"
 import Vector2 from "../../assets/icons/Vector2.png"
@@ -21,16 +24,20 @@ const RoadmapSidebar = ({
    ]
    return (
-        <div className="lg:w-80 w-[96%] mb-3 lg:mb-0 h-[100%] bg-white border-2 border-gray-200 rounded-lg">
+        <div className="lg:w-80 w-[96%] mb-3 lg:mb-0 h-[100%] bg-white border border-gray-200 rounded-lg shadow-md">
            {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-4">
-                    <div className="flex items-center gap-2">
+                        <span 
-                        <span className="text-3xl font-bold text-green-600">1001</span>
+                        className="text-3xl font-semibold text-[#198135] rounded-lg inline-block px-4 py-2"
                        style={{ background: '#E8FCED' }}
                        >
                        1001
                        </span>
                        <div>
-                            <div className="font-semibold text-gray-900">Total Links</div>
+                            <div className="font-bold font-text-gray-900">Total Links</div>
                            <div className="text-sm text-gray-500">Across all keywords</div>
                        </div>
                    </div>
@@ -38,29 +45,34 @@ const RoadmapSidebar = ({
            }
-            <div className="space-y-2  pt-0">
+            <div className="space-y-0 pt-0">
                {keywords.map((keyword, index) => (
-                    <button
+                    <div key={index} className="border-b border-gray-200 last:border-b-0 ">
-                        key={index}
+                        <button
-                        onClick={() => onKeywordSelect(keyword)}
+                            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"}`}
+                            className={`w-full text-left p-3 rounded-lg flex items-center gap-3 transition-colors ${selectedKeyword === keyword ? "bg-blue-50 p-[10px]" : "hover:bg-gray-50"}`}
-                    >
+                        >
-                        {
+                            {
-                            selectedKeyword === keyword
+                                selectedKeyword === keyword
-                                ?
+                                    ?
-                                <>
+                                    <>
-                                <img src={Vector} alt={keyword} className="w-4 h-4" />
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                                <span className="text-md text-blue-600 font-bold">{keyword}</span>
+  <path d="M9.79395 2.05469C10.8674 2.05469 11.8712 2.25835 12.8096 2.66309C13.7575 3.07196 14.5758 3.62411 15.2695 4.31836C15.9635 5.01287 16.5158 5.83158 16.9258 6.7793C17.3313 7.71663 17.5347 8.71943 17.5332 9.79297V9.87109L16.8818 9.6709C16.8536 7.75376 16.1674 6.10878 14.8232 4.76465C13.4504 3.39187 11.7638 2.70215 9.79395 2.70215C7.82405 2.70217 6.13746 3.39184 4.76465 4.76465C3.39184 6.13746 2.70217 7.82405 2.70215 9.79395C2.70215 11.7638 3.39187 13.4504 4.76465 14.8232C6.10878 16.1674 7.75376 16.8536 9.6709 16.8818L9.87109 17.5332H9.79395C8.71942 17.5332 7.71633 17.3294 6.7793 16.9248C5.83235 16.5159 5.01341 15.964 4.31836 15.2695C3.6235 14.5752 3.07137 13.7569 2.66309 12.8096C2.25888 11.8717 2.05523 10.8681 2.05469 9.79395C2.05417 8.72012 2.258 7.71688 2.66309 6.7793C3.07254 5.8317 3.62445 5.01281 4.31836 4.31836C5.01206 3.62414 5.83046 3.07195 6.77832 2.66309C7.7167 2.25836 8.72049 2.0547 9.79395 2.05469ZM16.3711 12.2891L14.7656 12.8213L13.9961 13.0762L17.7383 16.8184L16.8184 17.7383L13.0762 13.9961L12.8213 14.7656L12.2891 16.3711L10.5391 10.5391L16.3711 12.2891ZM9.79395 5.35059C10.9995 5.35059 12.0153 5.75553 12.8682 6.57129C13.5433 7.21715 13.9662 7.97246 14.1455 8.84863L13.4121 8.63086C13.1826 7.90877 12.7672 7.30069 12.167 6.81934C11.4847 6.27219 10.6861 5.99867 9.79395 5.99805C8.75399 5.99806 7.8517 6.37486 7.11328 7.11328C6.37486 7.8517 5.99806 8.75399 5.99805 9.79395C5.99805 10.6864 6.27148 11.4846 6.81934 12.167C7.30108 12.7671 7.90911 13.1826 8.63086 13.4121L8.84863 14.1455C7.97246 13.9662 7.21715 13.5433 6.57129 12.8682C5.75553 12.0153 5.35059 10.9995 5.35059 9.79395C5.3506 8.55185 5.7791 7.51191 6.64551 6.64551C7.51191 5.7791 8.55185 5.3506 9.79395 5.35059Z" fill="#65677D" stroke="#4C60E5"/>
-                                </>
+</svg>
-                                :
+                                    <span className="text-md text-blue-600 font-semibold">{keyword}</span>
-                                <>
+                                    </>
-                                <img src={Vector2} alt={keyword} className="w-4 h-4" />
+                                    :
-                                <span className="text-md text-gray-700 font-bold">{keyword}</span>
+                                    <>
-                                </>
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <path d="M9.79395 2.05469C10.8674 2.05469 11.8712 2.25835 12.8096 2.66309C13.7575 3.07196 14.5758 3.62411 15.2695 4.31836C15.9635 5.01287 16.5158 5.83158 16.9258 6.7793C17.3313 7.71663 17.5347 8.71943 17.5332 9.79297V9.87109L16.8818 9.6709C16.8536 7.75376 16.1674 6.10878 14.8232 4.76465C13.4504 3.39187 11.7638 2.70215 9.79395 2.70215C7.82405 2.70217 6.13746 3.39184 4.76465 4.76465C3.39184 6.13746 2.70217 7.82405 2.70215 9.79395C2.70215 11.7638 3.39187 13.4504 4.76465 14.8232C6.10878 16.1674 7.75376 16.8536 9.6709 16.8818L9.87109 17.5332H9.79395C8.71942 17.5332 7.71633 17.3294 6.7793 16.9248C5.83235 16.5159 5.01341 15.964 4.31836 15.2695C3.6235 14.5752 3.07137 13.7569 2.66309 12.8096C2.25888 11.8717 2.05523 10.8681 2.05469 9.79395C2.05417 8.72012 2.258 7.71688 2.66309 6.7793C3.07254 5.8317 3.62445 5.01281 4.31836 4.31836C5.01206 3.62414 5.83046 3.07195 6.77832 2.66309C7.7167 2.25836 8.72049 2.0547 9.79395 2.05469ZM16.3711 12.2891L14.7656 12.8213L13.9961 13.0762L17.7383 16.8184L16.8184 17.7383L13.0762 13.9961L12.8213 14.7656L12.2891 16.3711L10.5391 10.5391L16.3711 12.2891ZM9.79395 5.35059C10.9995 5.35059 12.0153 5.75553 12.8682 6.57129C13.5433 7.21715 13.9662 7.97246 14.1455 8.84863L13.4121 8.63086C13.1826 7.90877 12.7672 7.30069 12.167 6.81934C11.4847 6.27219 10.6861 5.99867 9.79395 5.99805C8.75399 5.99806 7.8517 6.37486 7.11328 7.11328C6.37486 7.8517 5.99806 8.75399 5.99805 9.79395C5.99805 10.6864 6.27148 11.4846 6.81934 12.167C7.30108 12.7671 7.90911 13.1826 8.63086 13.4121L8.84863 14.1455C7.97246 13.9662 7.21715 13.5433 6.57129 12.8682C5.75553 12.0153 5.35059 10.9995 5.35059 9.79395C5.3506 8.55185 5.7791 7.51191 6.64551 6.64551C7.51191 5.7791 8.55185 5.3506 9.79395 5.35059Z" fill="#65677D" stroke="#787B91"/>
 </svg>
                                    <span className="text-md text-gray-700 font-semibold">{keyword}</span>
                                    </>
-                        }
+                            }
-                    </button>
+                        </button>
                    </div>
                ))}
            </div>
        </div>
--- a/src/components/Strategy/ShowDetails.tsx
+++ b/src/components/Strategy/ShowDetails.tsx
@@ -232,7 +232,7 @@ function ShowDetails() {
            {/* 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>
+                <h3 className="text-lg  font-bold text-[#2B2D3B]">{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>
--- a/src/components/flip-card.tsx
+++ b/src/components/flip-card.tsx
@@ -158,7 +158,7 @@ console.log(CARDS)
            >
              <div className="p-5 flex flex-col items-center h-full justify-center">
                {card.badge && (
-                   <div className="absolute top-8 right-[-100px] w-[320px] bg-green-600 text-white font-semibold py-4 flex items-center justify-center gap-3 rotate-45 shadow-lg">
+                   <div className="absolute top-8 right-[-100px] w-[320px] bg-[#0CAA75] text-white font-semibold py-4 flex items-center justify-center gap-3 rotate-45 shadow-lg">
                   {/* Unlock Icon (SVG) */}
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
--- a/src/components/shared/Footer.tsx
+++ b/src/components/shared/Footer.tsx
@@ -6,12 +6,12 @@ const Footer = () => {
      <div className="container px-6">
        {/* Navigation Links */}
        <nav className="flex flex-wrap items-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-[#2B2D3B] hover:text-gray-800 font-normal m-0">Home</Link>
-          <Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">About</Link>
+          <Link to="#" className="text-[#2B2D3B] hover:text-gray-800 font-normal m-0">About</Link>
-          <Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">Journal</Link>
+          <Link to="#" className="text-[#2B2D3B] hover:text-gray-800 font-normal 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-[#2B2D3B] hover:text-gray-800 font-normal 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-[#2B2D3B] hover:text-gray-800 font-normal m-0">Backlinks</Link>
-          <Link to="#" className="text-gray-600 hover:text-gray-800 font-medium m-0">Help Desk</Link>
+          <Link to="#" className="text-[#2B2D3B] hover:text-gray-800 font-normal m-0">Help Desk</Link>
        </nav>
        {/* Copyright and Legal */}
@@ -20,9 +20,9 @@ const Footer = () => {
          <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>
+          <Link to="#" className="hover:text-gray-800 text-black">Terms of Service</Link>
          <span className="mx-2">|</span>
-          <Link to="#" className="hover:text-gray-800">Privacy Policy</Link>
+          <Link to="#" className="hover:text-gray-800 text-black">Privacy Policy</Link>
        </div>
      </div>
    </footer>
--- a/src/components/shared/Header.tsx
+++ b/src/components/shared/Header.tsx
@@ -49,7 +49,7 @@ const BookOpen = () => {
 const BookOpenLight = () => {
  return (
    <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8.89431 5.36141C8.89431 4.58941 8.58763 3.84902 8.04174 3.30313C7.49585 2.75724 6.75547 2.45056 5.98346 2.45056H1.61719V13.3662H6.71117C7.29018 13.3662 7.84547 13.5963 8.25489 14.0057C8.6643 14.4151 8.89431 14.9704 8.89431 15.5494M8.89431 5.36141V15.5494M8.89431 5.36141C8.89431 4.58941 9.20023 3.84902 9.74612 3.30313C10.292 2.75724 11.0324 2.45056 11.8044 2.45056H16.1707V13.3662H11.0767C10.4977 13.3662 9.9424 13.5963 9.53298 14.0057C9.12356 14.4151 8.89431 14.9704 8.89431 15.5494" stroke="#4C60E5" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M8.89431 5.36141C8.89431 4.58941 8.58763 3.84902 8.04174 3.30313C7.49585 2.75724 6.75547 2.45056 5.98346 2.45056H1.61719V13.3662H6.71117C7.29018 13.3662 7.84547 13.5963 8.25489 14.0057C8.6643 14.4151 8.89431 14.9704 8.89431 15.5494M8.89431 5.36141V15.5494M8.89431 5.36141C8.89431 4.58941 9.20023 3.84902 9.74612 3.30313C10.292 2.75724 11.0324 2.45056 11.8044 2.45056H16.1707V13.3662H11.0767C10.4977 13.3662 9.9424 13.5963 9.53298 14.0057C9.12356 14.4151 8.89431 14.9704 8.89431 15.5494" stroke="#4C60E5" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
@@ -75,7 +75,10 @@ const CalendarDaysLight = () => {
    </svg>
  )
 }
 // const CalendarDays = () => {
 //   return (
 //   )}
 const Header = () => {
  const location = useLocation();
@@ -84,13 +87,23 @@ const Header = () => {
  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
  const toggleMobileNav = () => setIsMobileNavOpen(!isMobileNavOpen);
  const AnalysisIcon = () => {
    return (
      <svg width="20" height="20" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M15.2127 14.5406C15.3937 14.5406 15.5619 14.4433 15.6439 14.2819C16.1591 13.2693 16.4495 12.123 16.4495 10.909C16.4495 6.79475 13.1142 3.45941 8.99987 3.45941C4.88559 3.45941 1.55029 6.79475 1.55029 10.909C1.55029 12.123 1.8407 13.2693 2.35581 14.2819C2.4379 14.4433 2.60602 14.5406 2.78708 14.5406H15.2127Z" stroke="#2B2D3B" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M9.76179 12.1088C9.31188 12.5587 8.58242 12.5587 8.13251 12.1088C7.6826 11.6589 7.6826 10.9294 8.13251 10.4795C8.43502 10.177 10.7947 8.55389 12.3084 7.52282C12.5809 7.33724 12.904 7.66043 12.7185 7.93288C11.6874 9.44659 10.0643 11.8063 9.76179 12.1088Z" fill="#2B2D3B" />
      </svg>
    )
  }
  const navLinks = [
    { name: 'Dashboard', to: '/', icon: LayoutDashboard, iconLight: LayoutDashboardLight },
    { name: 'Portfolio', to: '/portfolio', icon: BookOpen, iconLight: BookOpenLight },
    { name: 'Strategy', to: '/strategy', icon: CalendarDays, iconLight: CalendarDaysLight },
    { name: 'Analysis', to: '/analysis', icon: AnalysisIcon, iconLight: AnalysisIcon },
  ];  
  const menuItems = [
    { name: 'Edit Profile', icon: User, to: '/profile' },
    { name: 'Settings', icon: Settings, to: '/settings' },
@@ -106,7 +119,7 @@ const Header = () => {
  return (
    <header className="pb-20">
-      <nav className="bg-white/80 backdrop-blur-md shadow-sm fixed top-0 left-0 right-0 z-50">
+      <nav className="bg-[#E6ECFB] 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">
@@ -154,11 +167,15 @@ const Header = () => {
          {/* 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">
+
            <button className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-xl font-medium shadow-md hover:bg-blue-700 transition-colors duration-200 ">
              <Plus size={18} />
-              <span>Add Keyword</span>
+              <span>Add Keywords</span>
            </button>
            <div className="w-0 h-6 outline outline-1 outline-offset-[-0.50px] outline-indigo-200"></div>
            {/* Profile Dropdown */}
            <div className="relative">
              <button
@@ -168,7 +185,7 @@ const Header = () => {
                <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"
+                  className="w-10 h-10 rounded-full  "
                />
                <ChevronDown
                  size={16}
@@ -236,10 +253,15 @@ const Header = () => {
            </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">
+            {/* <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>
+            </button> */}
            <div className="w-0 h-6 outline outline-1 outline-offset-[-0.50px] outline-indigo-200"></div>
            {/* Profile menu */}
            <div className="mt-4 p-3 bg-white rounded-xl shadow-md">
@@ -250,7 +272,7 @@ const Header = () => {
                  className="w-10 h-10 rounded-full"
                />
                <div>
-                  <p className="font-semibold text-sm text-gray-800">Mohammed Said</p>
+                  <p className="font-semibold text-sm text-gray-800">Mohammed Sukkar</p>
                  <p className="text-xs text-gray-500">mohammedsaidaker@gmail.com</p>
                </div>
              </div>
--- a/src/components/shared/HeaderPage.tsx
+++ b/src/components/shared/HeaderPage.tsx
@@ -3,15 +3,41 @@ import UrlDropdown from "./UrlDropdown"
 const HeaderPage = ({ title }: { title: string }) => {
    return (
-        <div className="flex space-x-4 my-0 md:my-4 lg:flex-row flex-col items-baseline">
+        <div className="flex flex-col lg:flex-row items-baseline gap-4 my-0 md:my-4">
-            <h1 className="text-3xl font-bold text-gray-800 mb:mb-0 mb-4">{title}</h1>
+            <div className="flex items-baseline gap-4 flex-wrap">
                <h1 className="text-xl font-bold text-gray-800 leading-tight">{title}</h1>
-            <UrlDropdown />
+                {/* First SVG dot */}
                <svg 
                    xmlns="http://www.w3.org/2000/svg" 
                    width="4" 
                    height="4" 
                    viewBox="0 0 4 4" 
                    fill="none"
                    className="flex-shrink-0 -translate-y-1"
                >
                    <circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
                </svg>
-            <div className="flex space-x-4">
+                <UrlDropdown />
-                <MetricCard value="12" label="DR" valueChange="+1" size="sm" />
+
-                <MetricCard value="14" label="DA" valueChange="+3" size="sm" />
+                {/* Second SVG dot */}
-                <MetricCard value="10" label="AIQ" valueChange="+2" size="sm" />
+                <svg 
                    xmlns="http://www.w3.org/2000/svg" 
                    width="4" 
                    height="4" 
                    viewBox="0 0 4 4" 
                    fill="none"
                    className="flex-shrink-0 -translate-y-1"
                >
                    <circle cx="2" cy="2" r="2" fill="#E9EAF1"/>
                </svg>
                <div className="flex gap-1 flex-wrap">
                    <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>
        </div>
    )
--- a/src/components/shared/MetricCard.tsx
+++ b/src/components/shared/MetricCard.tsx
@@ -5,14 +5,14 @@ import { useState } from "react";
 // Reusable Metric Card Component
 const MetricCard = ({ icon: Icon, img: Img, value, label, tooltipText, valueChange, size, extraStyle, disabled }: { icon?: any, img?: any, value?: any, label?: any, tooltipText?: any, valueChange?: any, size?: any, extraStyle?: any, disabled?: any }) => {
    const [isHovered, setIsHovered] = useState(false);
-console.log(Img);
+    console.log(Img);
    if (Img) {
        return (
            <div className="relative cursor-pointer"
                onMouseEnter={() => setIsHovered(true)}
                onMouseLeave={() => setIsHovered(false)}>
                <div className={`${extraStyle} ${disabled ? "opacity-30" : ""}`}>
-                    <img src={Img} alt="Img" className={` ${disabled ? "w-6 2xl:w-6 h-6 2xl:h-6" : "w-6 2xl:w-8 h-6 2xl:h-8"}${value === 'Map' ? ' scale-125' : ""} ` } />
+                    <img src={Img} alt="Img" className={` ${disabled ? "w-6 2xl:w-6 h-6 2xl:h-6" : "w-6 2xl:w-8 h-6 2xl:h-8"}${value === 'Map' ? ' scale-125' : ""} `} />
                </div>
                <div className="">
                    {tooltipText && (
@@ -34,7 +34,7 @@ console.log(Img);
    return (
        <div
-            className="flex-1 min-w-[50px] bg-white rounded-xl shadow-sm p-2 flex items-center space-x-2 relative"
+            className="flex-1 min-w-[50px] bg-white rounded-xl  p-2 flex items-center space-x-2 relative"
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
        >
@@ -45,12 +45,12 @@ console.log(Img);
            )}
            <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`}>
+                <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 p-[3px] justify-between `}>
-                    <span className="text-sm text-gray-400">{!tooltipText && label}</span>
+                    <span className="text-sm font-semibold text-[#787B91]">{!tooltipText && label}</span>
-                    <span className="text-gray-600 bg-gray-200 px-1 py-1 rounded-md">{value}</span>
+                    <span className="text-[#787B91] font-semibold bg-gray-200 px-1 py-0 rounded-md">{value}</span>
                    {valueChange && (
-                        <div className="flex items-center text-sm font-semibold text-green-500">
+                        <div className="flex items-center text-md font-medium text-[#029056]">
                            {Icon && (
                                <ArrowUp size={14} className="inline-block mr-1" />
                            )}
@@ -58,9 +58,9 @@ console.log(Img);
                        </div>
                    )}
-                    <div className="flex items-center space-x-1 mt-1 text-gray-500">
+                    {tooltipText && (
-                        <span className="text-sm">{tooltipText && label}</span>
+                        <div className="flex items-center space-x-1 mt-1 text-gray-500">
-                        {tooltipText && (
+                            <span className="text-sm">{label}</span>
                            <div className="relative">
                                <Info size={16} className="text-gray-400 cursor-pointer" />
                                {isHovered && (
@@ -71,8 +71,8 @@ console.log(Img);
                                    </div>
                                )}
                            </div>
-                        )}
+                        </div>
-                    </div>
+                    )}
                </div>
            </div>
        </div>
--- a/src/components/shared/UrlDropdown.tsx
+++ b/src/components/shared/UrlDropdown.tsx
@@ -5,9 +5,7 @@ const urlOptions = [
    "http://www.mysite.com",
    "http://www.myseosucks.com",
    "http://www.sribbble.com",
-    "http://www.myseosucks.com",
+    "http://onekeyword.com"
    "http://www.myseosucks.com",
    "http://www.myseosucks.com",
 ];
 export default function UrlDropdown() {
@@ -24,18 +22,26 @@ export default function UrlDropdown() {
        <div className="relative text-sm max-w-[400px] min-w-[220px] mb:mb-0 mb-4">
            {/* Input box */}
            <div
-                className="flex justify-between items-center border border-gray-300 bg-white px-2 py-1 rounded cursor-pointer focus:border-2 focus:border-blue-500"
+                className={`flex justify-between items-center border-2 bg-white px-2 py-1 rounded-lg cursor-pointer ${isOpen ? "border-blue-500" : "border-gray-300"} transition-all duration-100`}
                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>
+                    {isOpen ? (
                        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9 5L5 1L1 5" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    ) : (
                        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 1L5 5L9 1" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    )}
                </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 ">
+                <div className="absolute mt-1 bg-white border border-gray-200 rounded shadow max-h-60 overflow-y-auto z-10 w-[110%]">
                    {urlOptions.map((url, index) => (
                        <div
                            key={index}
@@ -45,7 +51,10 @@ export default function UrlDropdown() {
                        >
                            <span className="truncate">{url}</span>
                            {selected === url && (
-                                <span className="text-green-500 text-sm">✔</span>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="12" viewBox="0 0 15 12" fill="none">
                                    <path d="M1 6.25L5 10.25L13.5 1.75" stroke="#4C60E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            )}
                        </div>
                    ))}
--- a/src/components/shared/scrollableComponent.css
+++ b/src/components/shared/scrollableComponent.css
@@ -6,7 +6,7 @@
 }
 .custom-scrollbar-table {
-    max-height: 460px;
+    max-height: 380px;
    overflow-y: scroll;
    border: 1px solid #ccc;
 }
@@ -40,5 +40,4 @@
 /* ==== Firefox ==== */
 .custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #999 #eee;
 }
--- a/src/pages/Analysis.tsx
+++ b/src/pages/Analysis.tsx
@@ -0,0 +1,22 @@
 import ContainerPage from "../components/shared/ContainerPage";
 import SourcesChart from "../components/Analysis/SourcesChart";
 import AnalysisSearch from "../components/Analysis/AnalysisSearch";
 import BecomeTheSource from "../components/Analysis/BecomeTheSource";
 import VisibilityAnalysis from "../components/Analysis/VisibilityAnalysis";
 const Analysis = () => {
  return (
    <ContainerPage>
      <div className="space-y-8">
        <AnalysisSearch />
        <VisibilityAnalysis />
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <SourcesChart />
          <BecomeTheSource />
        </div>
      </div>
    </ContainerPage>
  );
 };
 export default Analysis;
--- a/src/pages/Portfolio.tsx
+++ b/src/pages/Portfolio.tsx
@@ -24,7 +24,8 @@ const nA = <div className='flex items-center gap-2'>
 const categories = [
    {
        name: 'Social',
-        color: 'border-l-4 border-[#4285F4] bg-[#001EE21C]',
+        color: ' border-[#4285F4] bg-[#001EE21C]',
        after: "bg-[#4C60E5]",
        rows: [
            {
                icon: Amazing, title: 'Questions to ask your CPA httpAmazon', DR: 90, DA: 97, traffic: '3,902,293',
@@ -39,7 +40,8 @@ const categories = [
    },
    {
        name: 'Citation',
-        color: 'border-l-4 border-[#0ea5e9] bg-[#3C87FF2B]',
+        color: ' border-[#0ea5e9] bg-[#3C87FF2B]',
        after: "bg-[#4285F4]",
        rows: [
            { icon: Amazing, title: 'Substack DR 97 DA 95', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: nA, date: '9/16/25' },
            { icon: Amazing, 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' },
@@ -48,7 +50,8 @@ const categories = [
    },
    {
        name: 'Web 2.0',
-        color: 'border-l-4 border-[#22c55e] bg-[#f0fdf4]',
+        color: 'border-[#22c55e] bg-[#f0fdf4]',
        after: "bg-[#34A853]",
        rows: [
            { icon: Amazing, title: 'Paypal DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: progress, interlinked: done, date: '9/16/25' },
            { icon: Amazing, title: 'Apple Music DR 97 DA 95 Traffic', DR: 90, DA: 97, traffic: '3,902,293', indexed: done, interlinked: nA, date: '9/16/25' },
@@ -70,64 +73,69 @@ function Portfolio() {
    return (
        <ContainerPage>
-            <HeaderPage title="Live Library" />
+            <HeaderPage title="Live Signals Portfolio" />
            <div className='flex flex-col lg:flex-row gap-6 lg:gap-8 mx-auto'>
                <RoadmapSidebar mode={"portfolio"} selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />
                {/* Table Section */}
-                <section className='flex-1 bg-white border rounded-2xl shadow-sm px-4 sm:px-6 py-4 overflow-x-auto'>
+                <section className='flex-1 bg-white border rounded-2xl shadow-sm  py-4 overflow-x-auto'>
                    {/* Title Bar */}
-                    <div className='flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-4'>
+                    <div className='flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-4 px-4'>
                        <div className='flex flex-col items-start gap-2'>
-                            <span className='text-xl sm:text-2xl font-extrabold text-[#4285F4]'>CPA Los Angeles</span>
+                            <span className='text-xl sm:text-2xl font-bold '>CPA Los Angeles</span>
-                            <span className='text-gray-500 rounded-md text-sm sm:text-md font-medium'>
+                            <span className='text-gray-500  rounded-md text-sm sm:text-md font-normal'>
-                                <span className='font-bold pr-2 sm:pr-3 text-black'>Links:</span>
+                                <span className='font-bold pr-2 sm:pr-3 text-[#2B2D3B]'>Links:</span>
-                                Indexed  <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 rounded-md mx-1 mr-3 sm:mr-5 text-xs sm:text-sm'>32%</b>
+                                Indexed  <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 border-[#B8D8EB] border-2 rounded-xl mx-1 mr-3 sm:mr-5 text-xs sm:text-sm'>32%</b>
-                                Interlinked <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 rounded-md mx-1 text-xs sm:text-sm'>4%</b>
+                                
                                Interlinked <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 border-[#B8D8EB] border-2 rounded-xl mx-1 text-xs sm:text-sm'>4%</b>
                            </span>
-                            <span className='flex items-center gap-2 text-gray-800 text-sm sm:text-md'>Content Publishing:
+                            <span className='flex items-center font-normal   gap-2 text-[#787B91]  sm:text-md'>Content Publishing
-                                <span className='bg-[#f9eaef] text-[#8B0E3A] px-2 py-0 rounded-md font-bold border text-xs sm:text-sm'>Locked</span>
+                                <span className='bg-[#f9eaef] text-[#8B0E3A] px-2 py-1 rounded-xl font-bold border-2 border-[#F7D2DF] text-xs sm:text-sm'>Locked</span>
                            </span>
                        </div>
                        <div className='flex flex-wrap items-center gap-2 sm:gap-3'>
                            <BacklinkTypeDropdown options={
                                {
                                    Social: true, Citation: true, 'Web 2.0': true, Multimedia: false, Crowd: false
-                                }} title="Backlink Type" subTitle="Show rings:" />
+                                }} title="Backlink Type" subTitle="Show rings" />
-                            <BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="DA" subTitle="Show rings:" />
+                            <BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="DA" subTitle="Show rings" />
-                            <BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="DA" subTitle="Show rings:" />
+                            <BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="DR" subTitle="Show rings" />
-                            <BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="Traffic" subTitle="Show rings:" />
+                            <BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="Traffic" subTitle="Show rings" />
                            <button className='bg-[#fff]  border px-3 sm:px-4 py-2 rounded-lg text-sm sm:text-md font-bold transition-colors flex items-center gap-2'>
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
                                    <path d="M1.80154 10.583C1.7998 10.2479 1.7998 9.88794 1.7998 9.49999C1.7998 6.80829 1.7998 5.46245 2.37857 4.45999C2.75773 3.80327 3.30308 3.25792 3.95981 2.87876C4.96226 2.29999 6.30811 2.29999 8.9998 2.29999C11.6915 2.29999 13.0373 2.29999 14.0398 2.87876C14.6965 3.25792 15.2419 3.80327 15.621 4.45999C16.1998 5.46245 16.1998 6.80829 16.1998 9.49999C16.1998 12.1917 16.1998 13.5375 15.621 14.54C15.2419 15.1967 14.6965 15.7421 14.0398 16.1212C13.0373 16.7 11.6915 16.7 8.9998 16.7C8.60253 16.7 8.23457 16.7 7.8927 16.6981" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" />
                                    <path d="M6.99503 6.79999H11.7002M11.7002 6.79999V11.5059M11.7002 6.79999L2.7002 15.8" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            <button className='bg-[#fff] text-gray-500 border px-3 sm:px-4 py-2 rounded-lg text-sm sm:text-md font-bold transition-colors flex items-center gap-2'>
                                <img src={Share2} alt="" className='w-4 h-4' />
                                <span>Export</span>
                            </button>
                        </div>
                    </div>
                    {/* Global Filter/Sort Header Row */}
-                    <div className='hidden lg:flex items-center justify-end gap-4 mb-2 px-4 py-3 '>
+                    <div className='hidden lg:flex items-center justify-end gap-4 mb-2 px-4 py-3 border-b border-gray-100 border-solid'>
-                        <div className='flex items-center gap-4 xl:gap-8 text-xs xl:text-sm font-medium text-gray-600'>
+                        <div className='flex items-center gap-4 xl:gap-8 text-xs xl:text-sm font-medium text-gray-600 pr-6'>
-                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors '>
+                            <span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4] transition-colors '>
                                DR <SortIcon />
                            </span>
-                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
+                            <span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4]  transition-colors'>
                                DA <SortIcon />
                            </span>
-                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
+                            <span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4] transition-colors'>
                                Traffic <SortIcon />
                            </span>
-                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
+                            <span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4] transition-colors'>
                                Indexed <SortIcon />
                            </span>
-                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
+                            <span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4]  transition-colors'>
                                Interlinked <SortIcon />
                            </span>
-                            <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors'>
+                            <span className='flex items-center cursor-pointer text-[#65677D] hover:text-[#4285F4] transition-colors'>
                                Date <SortIcon />
                            </span>
                        </div>
@@ -136,16 +144,17 @@ function Portfolio() {
                    {/* 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={`px-4 py-1 rounded-lg font-bold text-sm m-2 ${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> */}
                                        <div className={`w-2 h-5 rounded ${cat.after}`}></div>
                                        <span>{cat.name}</span>
                                    </div>
                                    <span className='text-md font-bold bg-white p-1 px-2  rounded-full'>{cat.rows.length}</span>
                                </div>
                            </div>
-                            <div className='bg-white rounded-xl border overflow-x-auto shadow-sm'>
+                            <div className='bg-white  border-l-0 border-r-0 border last:border-b-0 overflow-x-auto shadow-sm'>
                                <table className='w-full min-w-[800px]'>
                                    <tbody>
                                        {cat.rows.map((row, rIdx) => (
@@ -157,7 +166,7 @@ function Portfolio() {
                                                    </div>
                                                </td>
-                                                <td className='w-full text-[#4285F4] hover:text-[#1e40af] font-medium' title={row.title}>
+                                                <td className='w-full text-[#4C60E5] hover:text-[#1e40af] font-normal leading-5 text-md' title={row.title}>
                                                    <div className='truncate max-w-[250px] sm:max-w-[400px] whitespace-pre-wrap underline py-1 cursor-pointer text-sm'>{row.title}</div>
                                                </td>
                                                <td className='py-3 px-2 sm:px-4 text-center w-16 sm:w-20 font-semibold text-gray-700 text-sm'>{row.DR}</td>
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -118,10 +118,10 @@ const Settings = () => {
  // Initialize form data when profile loads
  useEffect(() => {
    if (profileData?.user_profiles) {
-      const userProfile = profileData.user_profiles[0];
+      const userProfile = profileData?.user_profiles[0];
      setFormData({
-        displayName: userProfile.display_name || '',
+        displayName: userProfile?.display_name || '',
-        email: userProfile.email || ''
+        email: userProfile?.email || ''
      });
    }
  }, [profileData]);
@@ -333,7 +333,7 @@ const Settings = () => {
        </div>
        {/* Main Content */}
-        <div className="flex-1">
+        <div className="flex-1 min-h-screen">
          {activeSection === "profile" && (
            <div className="bg-white">
              <h2 className="text-3xl font-bold text-gray-900 mb-2">Basic Information</h2>
--- a/src/pages/Strategy.tsx
+++ b/src/pages/Strategy.tsx
@@ -19,7 +19,7 @@ function Strategy() {
    return (
        <ContainerPage>
-            <HeaderPage title="Strategy" />
+            <HeaderPage title="Strategy Overview" />
            <div className="flex lg:flex-row flex-col items-center lg:items-start bg-white h-[100%] gap-6 lg:gap-8">
                <RoadmapSidebar selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />
@@ -27,7 +27,7 @@ function Strategy() {
                <div className="flex-1 px-2 sm:px-4 w-full lg:w-auto">
                    <ProgressMetrics />
-                    <div className="bg-white rounded-lg border border-gray-200 p-2 sm:p-3 pb-6 sm:pb-10">
+                    <div className="bg-white rounded-b-lg border border-t-0 border-gray-200 p-2 sm:p-3 pb-6 sm:pb-10">
                        {selectedKeyword === "CPA Los Angeles" ? <IntegratedStrategy /> : <ShowDetails />
                        }
المؤلف	SHA1	الرسالة	التاريخ
mohammedsaid18	81a4683c50	Analysis Page	2025-10-16 20:49:22 +03:00
mohammedsaid18	2d133252df	updated design IntegratedStrategy	2025-10-13 13:20:10 +03:00
Your Name	f0155cae32	fixed style	2025-10-13 06:03:31 -04:00
Your Name	d7afdda419	Merge branch 'main' of https://app.gitpasha.com/mohammedsaid18/dashboard	2025-10-13 05:59:39 -04:00
Your Name	fef26fdc24	fixed fonts	2025-10-13 05:59:32 -04:00
mohammedsaid18	5eccd767f9	update IntegratedStrategy	2025-10-13 12:58:42 +03:00
Your Name	117a639fe3	minor fixes	2025-10-13 05:46:38 -04:00
Your Name	d1ff73456d	Table fixes	2025-10-13 05:25:59 -04:00
mohammedsaid18	7bdcad1385	Update somefiles in the desgin	2025-10-13 12:24:02 +03:00
Your Name	bb807d16fa	Merge branch 'main' of https://app.gitpasha.com/mohammedsaid18/dashboard	2025-10-13 04:38:26 -04:00
Your Name	bc33f20959	more fixes	2025-10-13 04:37:49 -04:00
mohammedsaid18	69c1d73e3b	update cards and padding app	2025-10-13 10:04:36 +03:00
Your Name	411fd9a43a	trello borders	2025-10-12 13:25:26 -04:00
Your Name	7934176792	fixed trello header	2025-10-12 12:47:55 -04:00
Your Name	ad23f0d214	more fixes	2025-10-12 12:20:35 -04:00
Your Name	848dd920e3	fixed color schema	2025-10-12 12:00:57 -04:00
mohammedsaid18	f779ac3417	Updated icons header	2025-10-12 17:01:40 +03:00
Your Name	b18b7260d2	fixed trello	2025-10-12 13:53:32 +00:00
Your Name	73297bfbed	fixed stategy	2025-10-12 13:31:43 +00:00
Your Name	c683ba6252	fixing styles	2025-10-12 13:22:38 +00:00