From 6b23d6a96b599cf67e554116e18a00c7a1429886 Mon Sep 17 00:00:00 2001
From: Soumyadas15 <saumyadas2017@gmail.com>
Date: Mon, 26 May 2025 17:27:13 +0530
Subject: [PATCH] chore(ui): improved examples section

---
 .../_components/suggestions/examples.tsx      | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/(dashboard)/dashboard/_components/suggestions/examples.tsx b/frontend/src/app/(dashboard)/dashboard/_components/suggestions/examples.tsx
index ee702679..0dd4eeb4 100644
--- a/frontend/src/app/(dashboard)/dashboard/_components/suggestions/examples.tsx
+++ b/frontend/src/app/(dashboard)/dashboard/_components/suggestions/examples.tsx
@@ -7,6 +7,7 @@ import {
   Bot,
   Briefcase,
   Settings,
+  Sparkles,
 } from 'lucide-react';
 
 type PromptExample = {
@@ -19,22 +20,22 @@ const prompts: PromptExample[] = [
   {
     title: 'Market research dashboard',
     query: 'Create a comprehensive market research dashboard analyzing industry trends, customer segments, and competitive landscape. Include data visualization and actionable recommendations.',
-    icon: <BarChart3 size={16} />,
+    icon: <BarChart3 className="text-green-700 dark:text-green-400" size={16} />,
   },
   {
     title: 'Recommendation engine development',
     query: 'Develop a recommendation engine for personalized product suggestions. Include collaborative filtering, content-based filtering, and hybrid approaches with evaluation metrics.',
-    icon: <Bot size={16} />,
+    icon: <Bot className="text-blue-700 dark:text-blue-400" size={16} />,
   },
   {
     title: 'Go-to-market strategy',
     query: 'Develop a comprehensive go-to-market strategy for a new product. Include market sizing, customer acquisition channels, pricing strategy, and launch timeline.',
-    icon: <Briefcase size={16} />,
+    icon: <Briefcase className="text-rose-700 dark:text-rose-400" size={16} />,
   },
   {
     title: 'Data pipeline automation',
     query: 'Create an automated data pipeline for ETL processes. Include data validation, error handling, monitoring, and scalable architecture design.',
-    icon: <Settings size={16} />,
+    icon: <Settings className="text-purple-700 dark:text-purple-400" size={16} />,
   },
 ];
 
@@ -52,11 +53,15 @@ export const Examples = ({
             className="group cursor-pointer h-full shadow-none transition-all bg-sidebar hover:bg-neutral-100 dark:hover:bg-neutral-800/60"
             onClick={() => onSelectPrompt && onSelectPrompt(prompt.query)}
           >
-            <CardContent className="px-4 pt-0">
-              <p className="group-hover:text-foreground transition-all text-muted-foreground text-sm line-clamp-3">
-                {prompt.query}
-              </p>
-            </CardContent>
+            <CardHeader className="px-4">
+                <div className="flex items-center gap-2">
+                    {prompt.icon}
+                </div>
+                <CardTitle className="font-normal group-hover:text-foreground transition-all text-muted-foreground text-sm line-clamp-3">
+                    {prompt.title}
+                </CardTitle>
+            </CardHeader>
+
           </Card>
         ))}
       </div>