From 365dcfbbd2ef93caf85dfad77a48a39313a621a1 Mon Sep 17 00:00:00 2001
From: "IGNY8 VPS (Salman)" <vps@igny8.com>
Date: Sat, 6 Dec 2025 15:01:06 +0000
Subject: [PATCH] asd

---
 frontend/src/pages/Dashboard/Home.tsx | 495 ++++----------------------
 1 file changed, 70 insertions(+), 425 deletions(-)

diff --git a/frontend/src/pages/Dashboard/Home.tsx b/frontend/src/pages/Dashboard/Home.tsx
index 18e0565a..46b7335e 100644
--- a/frontend/src/pages/Dashboard/Home.tsx
+++ b/frontend/src/pages/Dashboard/Home.tsx
@@ -686,427 +686,72 @@ export default function Home() {
             />
           </div>
           
-          {/* Circular Progress Flow */}
-          <div className="relative py-8">
-            <div className="flex flex-wrap items-center justify-center gap-8 lg:gap-12">
-              {/* Site with Industry & Sectors */}
-              <Link
-                to="/sites"
-                className={`flex flex-col items-center gap-3 group relative ${
-                  progress.hasSiteWithSectors ? 'opacity-100' : 'opacity-60'
-                }`}
-              >
-                <div className="relative w-24 h-24">
-                  {/* Circular Progress Ring */}
-                  <svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
-                    <circle
-                      cx="50"
-                      cy="50"
-                      r="45"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="8"
-                      className="text-gray-200 dark:text-gray-700"
-                    />
-                    <circle
-                      cx="50"
-                      cy="50"
-                      r="45"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="8"
-                      strokeDasharray={`${2 * Math.PI * 45}`}
-                      strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.hasSiteWithSectors ? 1 : 0))}`}
-                      strokeLinecap="round"
-                      className="text-green-500 transition-all duration-500"
-                    />
-                  </svg>
-                  {/* Icon in Center */}
-                  <div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
-                    progress.hasSiteWithSectors
-                      ? 'bg-green-500 text-white shadow-lg scale-110'
-                      : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
-                  }`}>
-                    {progress.hasSiteWithSectors ? (
-                      <CheckCircleIcon className="w-10 h-10" />
-                    ) : (
-                      <GridIcon className="w-10 h-10" />
-                    )}
-                  </div>
+          {/* Icon-based Progress Flow */}
+          <div className="py-6">
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
+              <Link to="/sites" className="flex flex-col items-center gap-3">
+                <div className="flex items-center justify-center w-20 h-20 text-[#c0c7d3]">
+                  <GridIcon className="w-14 h-14" strokeWidth={2.4} />
                 </div>
-                <div className="text-center max-w-[100px]">
-                  <div className={`text-sm font-bold mb-1 ${
-                    progress.hasSiteWithSectors
-                      ? 'text-green-700 dark:text-green-300'
-                      : 'text-gray-600 dark:text-gray-400'
-                  }`}>
-                    Site & Sectors
-                  </div>
-                  <div className={`text-base font-semibold ${
-                    progress.hasSiteWithSectors
-                      ? 'text-green-600 dark:text-green-400'
-                      : 'text-gray-500 dark:text-gray-500'
-                  }`}>
-                    {sites.filter(s => s.active_sectors_count > 0).length}
-                  </div>
-                  <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                    Industry & sectors configured
-                  </div>
-                </div>
-                <div className="absolute -right-6 top-1/2 -translate-y-1/2 hidden lg:block">
-                  <ArrowRightIcon className={`w-8 h-8 ${
-                    progress.hasSiteWithSectors ? 'text-green-500' : 'text-gray-300'
-                  }`} />
+                <div className="text-center">
+                  <div className="text-sm font-semibold text-gray-800 dark:text-white">Site & Sectors</div>
+                  <div className="text-lg font-bold text-gray-900 dark:text-white">{sites.filter(s => s.active_sectors_count > 0).length}</div>
+                  <div className="text-xs text-gray-500 dark:text-gray-400">Industry & sectors configured</div>
                 </div>
               </Link>
 
-              {/* Keywords Research */}
-              <Link
-                to="/planner/keyword-opportunities"
-                className={`flex flex-col items-center gap-3 group relative ${
-                  progress.keywordsCount > 0 ? 'opacity-100' : 'opacity-60'
-                }`}
-              >
-                <div className="relative w-24 h-24">
-                  {/* Circular Progress Ring */}
-                  <svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
-                    <circle
-                      cx="50"
-                      cy="50"
-                      r="45"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="8"
-                      className="text-gray-200 dark:text-gray-700"
-                    />
-                    <circle
-                      cx="50"
-                      cy="50"
-                      r="45"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="8"
-                      strokeDasharray={`${2 * Math.PI * 45}`}
-                      strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.keywordsCount > 0 ? 1 : 0))}`}
-                      strokeLinecap="round"
-                      className="text-blue-500 transition-all duration-500"
-                    />
-                  </svg>
-                  {/* Icon in Center */}
-                  <div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
-                    progress.keywordsCount > 0
-                      ? 'bg-blue-500 text-white shadow-lg scale-110'
-                      : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
-                  }`}>
-                    {progress.keywordsCount > 0 ? (
-                      <CheckCircleIcon className="w-10 h-10" />
-                    ) : (
-                      <ListIcon className="w-10 h-10" />
-                    )}
-                  </div>
+              <Link to="/planner/keyword-opportunities" className="flex flex-col items-center gap-3">
+                <div className="flex items-center justify-center w-20 h-20 text-[#8bb9ff]">
+                  <ListIcon className="w-14 h-14" strokeWidth={2.4} />
                 </div>
-                <div className="text-center max-w-[100px]">
-                  <div className={`text-sm font-bold mb-1 ${
-                    progress.keywordsCount > 0
-                      ? 'text-blue-700 dark:text-blue-300'
-                      : 'text-gray-600 dark:text-gray-400'
-                  }`}>
-                    Keywords
-                  </div>
-                  <div className={`text-base font-semibold ${
-                    progress.keywordsCount > 0
-                      ? 'text-blue-600 dark:text-blue-400'
-                      : 'text-gray-500 dark:text-gray-500'
-                  }`}>
-                    {progress.keywordsCount}
-                  </div>
-                  <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                    Keywords added from opportunities
-                  </div>
-                </div>
-                <div className="absolute -right-6 top-1/2 -translate-y-1/2 hidden lg:block">
-                  <ArrowRightIcon className={`w-8 h-8 ${
-                    progress.keywordsCount > 0 ? 'text-blue-500' : 'text-gray-300'
-                  }`} />
+                <div className="text-center">
+                  <div className="text-sm font-semibold text-gray-800">Keywords</div>
+                  <div className="text-lg font-bold text-blue-600">{progress.keywordsCount}</div>
+                  <div className="text-xs text-gray-500">Keywords added from opportunities</div>
                 </div>
               </Link>
 
-              {/* Clustering */}
-              <Link
-                to="/planner/clusters"
-                className={`flex flex-col items-center gap-3 group relative ${
-                  progress.clustersCount > 0 ? 'opacity-100' : 'opacity-60'
-                }`}
-              >
-                <div className="relative w-24 h-24">
-                  {/* Circular Progress Ring */}
-                  <svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
-                    <circle
-                      cx="50"
-                      cy="50"
-                      r="45"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="8"
-                      className="text-gray-200 dark:text-gray-700"
-                    />
-                    <circle
-                      cx="50"
-                      cy="50"
-                      r="45"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="8"
-                      strokeDasharray={`${2 * Math.PI * 45}`}
-                      strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.clustersCount > 0 ? 1 : 0))}`}
-                      strokeLinecap="round"
-                      className="text-purple-500 transition-all duration-500"
-                    />
-                  </svg>
-                  {/* Icon in Center */}
-                  <div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
-                    progress.clustersCount > 0
-                      ? 'bg-purple-500 text-white shadow-lg scale-110'
-                      : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
-                  }`}>
-                    {progress.clustersCount > 0 ? (
-                      <CheckCircleIcon className="w-10 h-10" />
-                    ) : (
-                      <GroupIcon className="w-10 h-10" />
-                    )}
-                  </div>
+              <Link to="/planner/clusters" className="flex flex-col items-center gap-3">
+                <div className="flex items-center justify-center w-20 h-20 text-[#c088ff]">
+                  <GroupIcon className="w-14 h-14" strokeWidth={2.4} />
                 </div>
-                <div className="text-center max-w-[100px]">
-                  <div className={`text-sm font-bold mb-1 ${
-                    progress.clustersCount > 0
-                      ? 'text-purple-700 dark:text-purple-300'
-                      : 'text-gray-600 dark:text-gray-400'
-                  }`}>
-                    Clusters
-                  </div>
-                  <div className={`text-base font-semibold ${
-                    progress.clustersCount > 0
-                      ? 'text-purple-600 dark:text-purple-400'
-                      : 'text-gray-500 dark:text-gray-500'
-                  }`}>
-                    {progress.clustersCount}
-                  </div>
-                  <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                    Keywords grouped into clusters
-                  </div>
-                </div>
-                <div className="absolute -right-6 top-1/2 -translate-y-1/2 hidden lg:block">
-                  <ArrowRightIcon className={`w-8 h-8 ${
-                    progress.clustersCount > 0 ? 'text-purple-500' : 'text-gray-300'
-                  }`} />
+                <div className="text-center">
+                  <div className="text-sm font-semibold text-gray-800">Clusters</div>
+                  <div className="text-lg font-bold text-purple-600">{progress.clustersCount}</div>
+                  <div className="text-xs text-gray-500">Keywords grouped into clusters</div>
                 </div>
               </Link>
 
-              {/* Ideas/Outlines */}
-              <Link
-                to="/planner/ideas"
-                className={`flex flex-col items-center gap-3 group relative ${
-                  progress.ideasCount > 0 ? 'opacity-100' : 'opacity-60'
-                }`}
-              >
-                <div className="relative w-24 h-24">
-                  {/* Circular Progress Ring */}
-                  <svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
-                    <circle
-                      cx="50"
-                      cy="50"
-                      r="45"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="8"
-                      className="text-gray-200 dark:text-gray-700"
-                    />
-                    <circle
-                      cx="50"
-                      cy="50"
-                      r="45"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="8"
-                      strokeDasharray={`${2 * Math.PI * 45}`}
-                      strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.ideasCount > 0 ? 1 : 0))}`}
-                      strokeLinecap="round"
-                      className="text-orange-500 transition-all duration-500"
-                    />
-                  </svg>
-                  {/* Icon in Center */}
-                  <div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
-                    progress.ideasCount > 0
-                      ? 'bg-orange-500 text-white shadow-lg scale-110'
-                      : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
-                  }`}>
-                    {progress.ideasCount > 0 ? (
-                      <CheckCircleIcon className="w-10 h-10" />
-                    ) : (
-                      <BoltIcon className="w-10 h-10" />
-                    )}
-                  </div>
+              <Link to="/planner/ideas" className="flex flex-col items-center gap-3">
+                <div className="flex items-center justify-center w-20 h-20 text-[#f9a172]">
+                  <BoltIcon className="w-14 h-14" strokeWidth={2.4} />
                 </div>
-                <div className="text-center max-w-[100px]">
-                  <div className={`text-sm font-bold mb-1 ${
-                    progress.ideasCount > 0
-                      ? 'text-orange-700 dark:text-orange-300'
-                      : 'text-gray-600 dark:text-gray-400'
-                  }`}>
-                    Ideas
-                  </div>
-                  <div className={`text-base font-semibold ${
-                    progress.ideasCount > 0
-                      ? 'text-orange-600 dark:text-orange-400'
-                      : 'text-gray-500 dark:text-gray-500'
-                  }`}>
-                    {progress.ideasCount}
-                  </div>
-                  <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                    Content ideas and outlines
-                  </div>
-                </div>
-                <div className="absolute -right-6 top-1/2 -translate-y-1/2 hidden lg:block">
-                  <ArrowRightIcon className={`w-8 h-8 ${
-                    progress.ideasCount > 0 ? 'text-orange-500' : 'text-gray-300'
-                  }`} />
+                <div className="text-center">
+                  <div className="text-sm font-semibold text-gray-800">Ideas</div>
+                  <div className="text-lg font-bold text-orange-600">{progress.ideasCount}</div>
+                  <div className="text-xs text-gray-500">Content ideas and outlines</div>
                 </div>
               </Link>
 
-              {/* Content + Images */}
-              <Link
-                to="/writer/content"
-                className={`flex flex-col items-center gap-3 group relative ${
-                  progress.contentCount > 0 ? 'opacity-100' : 'opacity-60'
-                }`}
-              >
-                <div className="relative w-24 h-24">
-                  {/* Circular Progress Ring */}
-                  <svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
-                    <circle
-                      cx="50"
-                      cy="50"
-                      r="45"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="8"
-                      className="text-gray-200 dark:text-gray-700"
-                    />
-                    <circle
-                      cx="50"
-                      cy="50"
-                      r="45"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="8"
-                      strokeDasharray={`${2 * Math.PI * 45}`}
-                      strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.contentCount > 0 ? 1 : 0))}`}
-                      strokeLinecap="round"
-                      className="text-green-500 transition-all duration-500"
-                    />
-                  </svg>
-                  {/* Icon in Center */}
-                  <div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
-                    progress.contentCount > 0
-                      ? 'bg-green-500 text-white shadow-lg scale-110'
-                      : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
-                  }`}>
-                    {progress.contentCount > 0 ? (
-                      <CheckCircleIcon className="w-10 h-10" />
-                    ) : (
-                      <FileTextIcon className="w-10 h-10" />
-                    )}
-                  </div>
+              <Link to="/writer/content" className="flex flex-col items-center gap-3">
+                <div className="flex items-center justify-center w-20 h-20 text-[#79cd95]">
+                  <FileTextIcon className="w-14 h-14" strokeWidth={2.4} />
                 </div>
-                <div className="text-center max-w-[100px]">
-                  <div className={`text-sm font-bold mb-1 ${
-                    progress.contentCount > 0
-                      ? 'text-green-700 dark:text-green-300'
-                      : 'text-gray-600 dark:text-gray-400'
-                  }`}>
-                    Content
-                  </div>
-                  <div className={`text-base font-semibold ${
-                    progress.contentCount > 0
-                      ? 'text-green-600 dark:text-green-400'
-                      : 'text-gray-500 dark:text-gray-500'
-                  }`}>
-                    {progress.contentCount}
-                  </div>
-                  <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                    Content pieces + images created
-                  </div>
-                </div>
-                <div className="absolute -right-6 top-1/2 -translate-y-1/2 hidden lg:block">
-                  <ArrowRightIcon className={`w-8 h-8 ${
-                    progress.contentCount > 0 ? 'text-green-500' : 'text-gray-300'
-                  }`} />
+                <div className="text-center">
+                  <div className="text-sm font-semibold text-gray-800">Content</div>
+                  <div className="text-lg font-bold text-green-600">{progress.contentCount}</div>
+                  <div className="text-xs text-gray-500">Content pieces + images created</div>
                 </div>
               </Link>
 
-              {/* Publish Status */}
-              <Link
-                to="/writer/published"
-                className={`flex flex-col items-center gap-3 group relative ${
-                  progress.publishedCount > 0 ? 'opacity-100' : 'opacity-60'
-                }`}
-              >
-                <div className="relative w-24 h-24">
-                  {/* Circular Progress Ring */}
-                  <svg className="w-24 h-24 transform -rotate-90" viewBox="0 0 100 100">
-                    <circle
-                      cx="50"
-                      cy="50"
-                      r="45"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="8"
-                      className="text-gray-200 dark:text-gray-700"
-                    />
-                    <circle
-                      cx="50"
-                      cy="50"
-                      r="45"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="8"
-                      strokeDasharray={`${2 * Math.PI * 45}`}
-                      strokeDashoffset={`${2 * Math.PI * 45 * (1 - (progress.publishedCount > 0 ? 1 : 0))}`}
-                      strokeLinecap="round"
-                      className="text-indigo-500 transition-all duration-500"
-                    />
-                  </svg>
-                  {/* Icon in Center */}
-                  <div className={`absolute inset-0 flex items-center justify-center rounded-full transition-all ${
-                    progress.publishedCount > 0
-                      ? 'bg-indigo-500 text-white shadow-lg scale-110'
-                      : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
-                  }`}>
-                    {progress.publishedCount > 0 ? (
-                      <CheckCircleIcon className="w-10 h-10" />
-                    ) : (
-                      <PaperPlaneIcon className="w-10 h-10" />
-                    )}
-                  </div>
+              <Link to="/writer/published" className="flex flex-col items-center gap-3">
+                <div className="flex items-center justify-center w-20 h-20 text-[#8c97ff]">
+                  <PaperPlaneIcon className="w-14 h-14" strokeWidth={2.4} />
                 </div>
-                <div className="text-center max-w-[100px]">
-                  <div className={`text-sm font-bold mb-1 ${
-                    progress.publishedCount > 0
-                      ? 'text-indigo-700 dark:text-indigo-300'
-                      : 'text-gray-600 dark:text-gray-400'
-                  }`}>
-                    Published
-                  </div>
-                  <div className={`text-base font-semibold ${
-                    progress.publishedCount > 0
-                      ? 'text-indigo-600 dark:text-indigo-400'
-                      : 'text-gray-500 dark:text-gray-500'
-                  }`}>
-                    {progress.publishedCount}
-                  </div>
-                  <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                    Content published to site
-                  </div>
+                <div className="text-center">
+                  <div className="text-sm font-semibold text-gray-800">Published</div>
+                  <div className="text-lg font-bold text-indigo-600">{progress.publishedCount}</div>
+                  <div className="text-xs text-gray-500">Content published to site</div>
                 </div>
               </Link>
             </div>
@@ -1118,72 +763,72 @@ export default function Home() {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
           <Link
             to="/planner/keyword-opportunities"
-            className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-blue-500 hover:shadow-md transition group"
+            className="flex items-center gap-4 p-4 rounded-xl border border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm transition group"
           >
-            <div className="size-12 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white">
+            <div className="size-12 rounded-lg bg-blue-50 text-blue-600 border border-blue-100 flex items-center justify-center">
               <ListIcon className="h-6 w-6" />
             </div>
             <div className="flex-1">
-              <h4 className="font-semibold text-slate-900">Keyword Research</h4>
-              <p className="text-xs text-slate-600">Discover opportunities</p>
+              <h4 className="font-semibold text-gray-900">Keyword Research</h4>
+              <p className="text-xs text-gray-600">Discover opportunities</p>
             </div>
-            <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-blue-500 transition" />
+            <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
           </Link>
 
           <Link
             to="/planner/clusters"
-            className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-purple-500 hover:shadow-md transition group"
+            className="flex items-center gap-4 p-4 rounded-xl border border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm transition group"
           >
-            <div className="size-12 rounded-lg bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center text-white">
+            <div className="size-12 rounded-lg bg-purple-50 text-purple-600 border border-purple-100 flex items-center justify-center">
               <GroupIcon className="h-6 w-6" />
             </div>
             <div className="flex-1">
-              <h4 className="font-semibold text-slate-900">Clustering & Ideas</h4>
-              <p className="text-xs text-slate-600">Organize strategy</p>
+              <h4 className="font-semibold text-gray-900">Clustering & Ideas</h4>
+              <p className="text-xs text-gray-600">Organize strategy</p>
             </div>
-            <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-purple-500 transition" />
+            <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
           </Link>
 
           <Link
             to="/writer/content"
-            className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-green-500 hover:shadow-md transition group"
+            className="flex items-center gap-4 p-4 rounded-xl border border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm transition group"
           >
-            <div className="size-12 rounded-lg bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center text-white">
+            <div className="size-12 rounded-lg bg-green-50 text-green-600 border border-green-100 flex items-center justify-center">
               <PencilIcon className="h-6 w-6" />
             </div>
             <div className="flex-1">
-              <h4 className="font-semibold text-slate-900">Content Generation</h4>
-              <p className="text-xs text-slate-600">Create content</p>
+              <h4 className="font-semibold text-gray-900">Content Generation</h4>
+              <p className="text-xs text-gray-600">Create content</p>
             </div>
-            <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-green-500 transition" />
+            <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
           </Link>
 
           <Link
             to="/linker/content"
-            className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-indigo-500 hover:shadow-md transition group"
+            className="flex items-center gap-4 p-4 rounded-xl border border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm transition group"
           >
-            <div className="size-12 rounded-lg bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center text-white">
+            <div className="size-12 rounded-lg bg-indigo-50 text-indigo-600 border border-indigo-100 flex items-center justify-center">
               <PlugInIcon className="h-6 w-6" />
             </div>
             <div className="flex-1">
-              <h4 className="font-semibold text-slate-900">Internal Linking</h4>
-              <p className="text-xs text-slate-600">Link content</p>
+              <h4 className="font-semibold text-gray-900">Internal Linking</h4>
+              <p className="text-xs text-gray-600">Link content</p>
             </div>
-            <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-indigo-500 transition" />
+            <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
           </Link>
 
           <Link
             to="/optimizer/content"
-            className="flex items-center gap-4 p-4 rounded-lg border-2 border-slate-200 bg-white hover:border-orange-500 hover:shadow-md transition group"
+            className="flex items-center gap-4 p-4 rounded-xl border border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm transition group"
           >
-            <div className="size-12 rounded-lg bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center text-white">
+            <div className="size-12 rounded-lg bg-orange-50 text-orange-600 border border-orange-100 flex items-center justify-center">
               <BoltIcon className="h-6 w-6" />
             </div>
             <div className="flex-1">
-              <h4 className="font-semibold text-slate-900">Content Optimization</h4>
-              <p className="text-xs text-slate-600">Optimize content</p>
+              <h4 className="font-semibold text-gray-900">Content Optimization</h4>
+              <p className="text-xs text-gray-600">Optimize content</p>
             </div>
-            <ArrowRightIcon className="h-5 w-5 text-slate-400 group-hover:text-orange-500 transition" />
+            <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
           </Link>
         </div>
       </ComponentCard>