updated icons and card descriptions

Author: GiselleNessi

apps/dashboard/src/app/(app)/(dashboard)/support/page.tsx

@@ -2,15 +2,14 @@ import { getTeams } from "@/api/team";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { BookOpenIcon, ChevronRightIcon } from "lucide-react";
+import { HomeIcon, WalletIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
-import { BridgeIcon } from "../../../../../../portal/src/icons/products/BridgeIcon";
-import { ConnectIcon } from "../../../../../../portal/src/icons/products/ConnectIcon";
-import { EngineIcon } from "../../../../../../portal/src/icons/products/EngineIcon";
-import { InsightIcon } from "../../../../../../portal/src/icons/products/InsightIcon";
-import { NebulaIcon } from "../../../../../../portal/src/icons/products/NebulaIcon";
-import { PlaygroundIcon } from "../../../../../../portal/src/icons/products/PlaygroundIcon";
+import { EngineIcon } from "../../(dashboard)/(chain)/components/server/icons/EngineIcon";
+import { InsightIcon } from "../../(dashboard)/(chain)/components/server/icons/InsightIcon";
+import { PayIcon } from "../../(dashboard)/(chain)/components/server/icons/PayIcon";
 import { CustomChatButton } from "../../../nebula-app/(app)/components/CustomChat/CustomChatButton";
+import { NebulaIcon } from "../../../nebula-app/(app)/icons/NebulaIcon";
 import {
   getAuthToken,
   getAuthTokenWalletAddress,
@@ -25,64 +24,40 @@ export const metadata: Metadata = {
 const HELP_PRODUCTS = [
   {
     title: "Playground",
-    icon: PlaygroundIcon,
+    icon: HomeIcon,
     viewAllUrl:
       "https://playground.thirdweb.com/connect/sign-in/button?tab=code",
-    helpArticles: [
-      {
-        title: "Try out our interactive playground to get started",
-      },
-    ],
+    description: "Try out our interactive playground to get started",
   },
   {
     title: "Connect",
-    icon: ConnectIcon,
+    icon: WalletIcon,
     viewAllUrl: "https://portal.thirdweb.com/connect",
-    helpArticles: [
-      {
-        title: "Wallets, auth, and onchain interactions",
-      },
-    ],
+    description: "Wallets, auth, and onchain interactions",
   },
   {
     title: "Universal Bridge",
-    icon: BridgeIcon,
+    icon: PayIcon,
     viewAllUrl: "https://portal.thirdweb.com/pay",
-    helpArticles: [
-      {
-        title: "Bridge and onramp tokens on any chain",
-      },
-    ],
+    description: "Bridge and onramp tokens on any chain",
   },
   {
     title: "Engine",
     icon: EngineIcon,
     viewAllUrl: "https://portal.thirdweb.com/engine/v3",
-    helpArticles: [
-      {
-        title: "Reliable transactions and monitoring",
-      },
-    ],
+    description: "Reliable transactions and monitoring",
   },
   {
     title: "Insight",
     icon: InsightIcon,
     viewAllUrl: "https://portal.thirdweb.com/insight",
-    helpArticles: [
-      {
-        title: "Blockchain data queries and transformations",
-      },
-    ],
+    description: "Blockchain data queries and transformations",
   },
   {
     title: "Nebula",
     icon: NebulaIcon,
     viewAllUrl: "https://portal.thirdweb.com/nebula",
-    helpArticles: [
-      {
-        title: "API interface for LLMs",
-      },
-    ],
+    description: "API interface for LLMs",
   },
 ] as const;
 
@@ -169,16 +144,12 @@ export default async function SupportPage() {
                 </Button>
               </CardHeader>
 
-              <CardContent>
-                <ul className="flex flex-col gap-1">
-                  {product.helpArticles.map((article) => (
-                    <li key={article.title}>
-                      <span className="text-muted-foreground text-sm">
-                        {article.title}
-                      </span>
-                    </li>
-                  ))}
-                </ul>
+              <CardContent key={product.description}>
+                {product.description && (
+                  <p className="mb-2 text-muted-foreground text-sm">
+                    {product.description}
+                  </p>
+                )}
               </CardContent>
             </Card>
           ))}