From ebf6a9f27ac1583724782adaacd80db05598e4b3 Mon Sep 17 00:00:00 2001
From: "IGNY8 VPS (Salman)" <vps@igny8.com>
Date: Thu, 25 Dec 2025 08:48:35 +0000
Subject: [PATCH] UX: Update Dashboard and Sidebar navigation with
 user-friendly text

- Dashboard: Changed title to 'Your Content Creation Dashboard'
- Dashboard: Updated 'Your Progress' to 'Your Content Journey'
- Dashboard: Improved metric card descriptions for clarity
- Dashboard: Simplified Quick Action labels (Find Keywords, Organize Topics, etc.)
- Sidebar: Updated section headers (GET STARTED, CREATE CONTENT, PREFERENCES, SUPPORT)
- Sidebar: Changed menu labels (Find Keywords, Your Websites, Organize Keywords, Create Content)
- Sidebar: Renamed 'Help & Documentation' to 'Help Center'
---
 frontend/src/layout/AppSidebar.tsx    | 20 +++++++--------
 frontend/src/pages/Dashboard/Home.tsx | 36 +++++++++++++--------------
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/frontend/src/layout/AppSidebar.tsx b/frontend/src/layout/AppSidebar.tsx
index 804d6567..aa15f038 100644
--- a/frontend/src/layout/AppSidebar.tsx
+++ b/frontend/src/layout/AppSidebar.tsx
@@ -66,7 +66,7 @@ const AppSidebar: React.FC = () => {
     const setupItems: NavItem[] = [
       {
         icon: <DocsIcon />,
-        name: "Add Keywords",
+        name: "Find Keywords",
         path: "/setup/add-keywords",
       },
     ];
@@ -75,7 +75,7 @@ const AppSidebar: React.FC = () => {
     if (isModuleEnabled('site_builder')) {
       setupItems.push({
         icon: <GridIcon />,
-        name: "Sites",
+        name: "Your Websites",
         path: "/sites", // Submenus shown as in-page navigation
       });
     }
@@ -84,7 +84,7 @@ const AppSidebar: React.FC = () => {
     if (isModuleEnabled('thinker')) {
       setupItems.push({
         icon: <BoltIcon />,
-        name: "Thinker",
+        name: "Content Strategy",
         path: "/thinker/prompts", // Default to prompts, submenus shown as in-page navigation
       });
     }
@@ -96,7 +96,7 @@ const AppSidebar: React.FC = () => {
     if (isModuleEnabled('planner')) {
       workflowItems.push({
         icon: <ListIcon />,
-        name: "Planner",
+        name: "Organize Keywords",
         path: "/planner/keywords", // Default to keywords, submenus shown as in-page navigation
       });
     }
@@ -105,7 +105,7 @@ const AppSidebar: React.FC = () => {
     if (isModuleEnabled('writer')) {
       workflowItems.push({
         icon: <TaskIcon />,
-        name: "Writer",
+        name: "Create Content",
         path: "/writer/tasks", // Default to tasks, submenus shown as in-page navigation
       });
     }
@@ -150,11 +150,11 @@ const AppSidebar: React.FC = () => {
         ],
       },
       {
-        label: "SETUP",
+        label: "GET STARTED",
         items: setupItems,
       },
       {
-        label: "WORKFLOW",
+        label: "CREATE CONTENT",
         items: workflowItems,
       },
       {
@@ -183,7 +183,7 @@ const AppSidebar: React.FC = () => {
         ],
       },
       {
-        label: "SETTINGS",
+        label: "PREFERENCES",
         items: [
           {
             icon: <UserCircleIcon />,
@@ -208,11 +208,11 @@ const AppSidebar: React.FC = () => {
         ],
       },
       {
-        label: "HELP & DOCS",
+        label: "SUPPORT",
         items: [
           {
             icon: <DocsIcon />,
-            name: "Help & Documentation",
+            name: "Help Center",
             path: "/help",
           },
         ],
diff --git a/frontend/src/pages/Dashboard/Home.tsx b/frontend/src/pages/Dashboard/Home.tsx
index c3fcb1f7..c1595d37 100644
--- a/frontend/src/pages/Dashboard/Home.tsx
+++ b/frontend/src/pages/Dashboard/Home.tsx
@@ -592,7 +592,7 @@ export default function Home() {
       {/* Custom Header with Site Selector and Refresh */}
       <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
         <div className="flex-1">
-          <h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">Dashboard</h2>
+          <h2 className="text-2xl font-bold text-gray-800 dark:text-white/90">Your Content Creation Dashboard</h2>
           {lastUpdated && (
             <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
               Last updated: {lastUpdated.toLocaleTimeString()}
@@ -679,7 +679,7 @@ export default function Home() {
 
       <div className="space-y-6">
         {/* Progress Flow - Circular Design with Progress Bar */}
-        <ComponentCard title="Your Progress" desc="Track your content creation workflow completion">
+        <ComponentCard title="Your Content Journey" desc="Track your content creation progress from ideas to published articles">
           {/* Percentage and Progress Bar */}
           <div className="mb-8">
             <div className="flex items-center justify-between mb-3">
@@ -781,8 +781,8 @@ export default function Home() {
               <ListIcon className="h-6 w-6" />
             </div>
             <div className="flex-1">
-              <h4 className="font-semibold text-gray-900">Keyword Research</h4>
-              <p className="text-xs text-gray-600">Discover opportunities</p>
+              <h4 className="font-semibold text-gray-900">Find Keywords</h4>
+              <p className="text-xs text-gray-600">Search for topics</p>
             </div>
             <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
           </Link>
@@ -795,8 +795,8 @@ export default function Home() {
               <GroupIcon className="h-6 w-6" />
             </div>
             <div className="flex-1">
-              <h4 className="font-semibold text-gray-900">Clustering & Ideas</h4>
-              <p className="text-xs text-gray-600">Organize strategy</p>
+              <h4 className="font-semibold text-gray-900">Organize Topics</h4>
+              <p className="text-xs text-gray-600">Group & plan content</p>
             </div>
             <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
           </Link>
@@ -809,8 +809,8 @@ export default function Home() {
               <PencilIcon className="h-6 w-6" />
             </div>
             <div className="flex-1">
-              <h4 className="font-semibold text-gray-900">Content Generation</h4>
-              <p className="text-xs text-gray-600">Create content</p>
+              <h4 className="font-semibold text-gray-900">Create Articles</h4>
+              <p className="text-xs text-gray-600">Generate content</p>
             </div>
             <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
           </Link>
@@ -823,8 +823,8 @@ export default function Home() {
               <PlugInIcon className="h-6 w-6" />
             </div>
             <div className="flex-1">
-              <h4 className="font-semibold text-gray-900">Internal Linking</h4>
-              <p className="text-xs text-gray-600">Link content</p>
+              <h4 className="font-semibold text-gray-900">Add Links</h4>
+              <p className="text-xs text-gray-600">Connect articles</p>
             </div>
             <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
           </Link>
@@ -837,8 +837,8 @@ export default function Home() {
               <BoltIcon className="h-6 w-6" />
             </div>
             <div className="flex-1">
-              <h4 className="font-semibold text-gray-900">Content Optimization</h4>
-              <p className="text-xs text-gray-600">Optimize content</p>
+              <h4 className="font-semibold text-gray-900">Improve Content</h4>
+              <p className="text-xs text-gray-600">Boost performance</p>
             </div>
             <ArrowRightIcon className="h-5 w-5 text-gray-400 group-hover:text-gray-600 transition" />
           </Link>
@@ -848,18 +848,18 @@ export default function Home() {
         {/* Key Metrics */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
           <EnhancedMetricCard
-            title="Total Keywords"
+            title="Your Keywords"
             value={insights?.totalKeywords.toLocaleString() || "0"}
-            subtitle={`${insights?.totalClusters || 0} clusters • ${insights?.totalIdeas || 0} ideas`}
+            subtitle={`Organized into ${insights?.totalClusters || 0} topic groups with ${insights?.totalIdeas || 0} content ideas`}
             icon={<ListIcon className="size-6" />}
             accentColor="blue"
             trend={0}
             href="/planner/keywords"
           />
           <EnhancedMetricCard
-            title="Content Pieces"
+            title="Articles Created"
             value={insights?.totalContent.toLocaleString() || "0"}
-            subtitle={`${insights?.publishedContent || 0} published • ${insights?.contentThisWeek || 0} this week`}
+            subtitle={`${insights?.publishedContent || 0} live on your site, ${insights?.contentThisWeek || 0} added this week`}
             icon={<FileTextIcon className="size-6" />}
             accentColor="green"
             trend={0}
@@ -868,7 +868,7 @@ export default function Home() {
           <EnhancedMetricCard
             title="Images Generated"
             value={insights?.totalImages.toLocaleString() || "0"}
-            subtitle={`${insights?.totalContent || 0} content pieces • ${insights?.totalTasks || 0} tasks`}
+            subtitle={`AI-created images for ${insights?.totalContent || 0} articles`}
             icon={<FileIcon className="size-6" />}
             accentColor="purple"
             trend={0}
@@ -877,7 +877,7 @@ export default function Home() {
           <EnhancedMetricCard
             title="Workflow Completion"
             value={`${insights?.workflowCompletionRate || 0}%`}
-            subtitle={`${insights?.totalKeywords || 0} keywords → ${insights?.publishedContent || 0} published`}
+            subtitle={`From ${insights?.totalKeywords || 0} keywords to ${insights?.publishedContent || 0} published articles`}
             icon={<CheckCircleIcon className="size-6" />}
             accentColor="success"
             trend={0}