more impeorventes for kewyrods libreary

frontend/src/pages/Dashboard/Home.tsx

@@ -13,6 +13,8 @@ import { GridIcon, PlusIcon } from "../../icons";
 import { 
   fetchSites,
   Site,
+  fetchKeywordStats,
+  KeywordStats,
 } from "../../services/api";
 import { getDashboardStats } from "../../services/billing.api";
 import { useSiteStore } from "../../store/siteStore";
@@ -33,6 +35,7 @@ import AutomationStatusWidget, { AutomationData } from "../../components/dashboa
 import SitesOverviewWidget from "../../components/dashboard/SitesOverviewWidget";
 import CreditsUsageWidget from "../../components/dashboard/CreditsUsageWidget";
 import AccountInfoWidget from "../../components/dashboard/AccountInfoWidget";
+import KeywordLibraryStatsWidget from "../../components/dashboard/KeywordLibraryStatsWidget";
 import { getSubscriptions, Subscription } from "../../services/billing.api";
 
 export default function Home() {
@@ -52,6 +55,8 @@ export default function Home() {
   const [showAddSite, setShowAddSite] = useState(false);
   const [loading, setLoading] = useState(true);
   const [subscription, setSubscription] = useState<Subscription | null>(null);
+  const [keywordStats, setKeywordStats] = useState<KeywordStats | null>(null);
+  const [keywordStatsLoading, setKeywordStatsLoading] = useState(true);
 
   // Dashboard data state
   const [attentionItems, setAttentionItems] = useState<AttentionItem[]>([]);
@@ -114,9 +119,23 @@ export default function Home() {
     loadSites();
     loadBalance();
     loadSubscription();
+    loadKeywordStats();
     loadFromBackend().catch(() => {});
   }, [loadFromBackend, loadBalance]);
 
+  // Load keyword stats
+  const loadKeywordStats = async () => {
+    try {
+      setKeywordStatsLoading(true);
+      const stats = await fetchKeywordStats();
+      setKeywordStats(stats);
+    } catch (error) {
+      console.error('Failed to load keyword stats:', error);
+    } finally {
+      setKeywordStatsLoading(false);
+    }
+  };
+
   // Load subscription info
   const loadSubscription = async () => {
     try {
@@ -414,6 +433,24 @@ export default function Home() {
             />
           </div>
 
+          {/* Row 6: Keyword Library Stats (3 columns) */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div>
+                <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                  Quick-Start Keywords — Complimentary
+                </h2>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Ready-to-use, pre-vetted keywords to jumpstart your content creation — no research needed
+                </p>
+              </div>
+            </div>
+            <KeywordLibraryStatsWidget 
+              stats={keywordStats} 
+              loading={keywordStatsLoading}
+            />
+          </div>
+
           {/* Add Site Button - Floating */}
           {canAddMoreSites && (
             <div className="fixed bottom-6 right-6 z-50">