From 98d3d7bb720c27fdba85937e15434203618d9156 Mon Sep 17 00:00:00 2001
From: Joaquim Verges <joaquim.verges@gmail.com>
Date: Wed, 26 Mar 2025 22:25:44 +1300
Subject: [PATCH] [Portal] Redesign documentation homepage with SDK cards and
 product icons

---
 apps/portal/src/app/page.tsx                  | 162 +++++++++++++++---
 .../src/components/Document/SDKCard.tsx       |  10 +-
 apps/portal/src/icons/products/BridgeIcon.tsx |  24 +++
 .../portal/src/icons/products/ConnectIcon.tsx |  21 +++
 .../src/icons/products/ContractsIcon.tsx      |  21 +++
 apps/portal/src/icons/products/EngineIcon.tsx |  21 +++
 .../portal/src/icons/products/InsightIcon.tsx |  21 +++
 apps/portal/src/icons/products/NebulaIcon.tsx |  24 +++
 .../src/icons/products/PlaygroundIcon.tsx     |  21 +++
 9 files changed, 299 insertions(+), 26 deletions(-)
 create mode 100644 apps/portal/src/icons/products/BridgeIcon.tsx
 create mode 100644 apps/portal/src/icons/products/ConnectIcon.tsx
 create mode 100644 apps/portal/src/icons/products/ContractsIcon.tsx
 create mode 100644 apps/portal/src/icons/products/EngineIcon.tsx
 create mode 100644 apps/portal/src/icons/products/InsightIcon.tsx
 create mode 100644 apps/portal/src/icons/products/NebulaIcon.tsx
 create mode 100644 apps/portal/src/icons/products/PlaygroundIcon.tsx

diff --git a/apps/portal/src/app/page.tsx b/apps/portal/src/app/page.tsx
index 29c18906d8d..6d4264fe24e 100644
--- a/apps/portal/src/app/page.tsx
+++ b/apps/portal/src/app/page.tsx
@@ -1,17 +1,29 @@
-import { Heading } from "@/components/Document";
+import { Grid, Heading, SDKCard } from "@/components/Document";
 import Image from "next/image";
 import Link from "next/link";
+import { UnityIcon } from "../icons";
+import { DotNetIcon } from "../icons";
+import { UnrealEngineIcon } from "../icons";
+import { ReactIcon } from "../icons";
+import { TypeScriptIcon } from "../icons";
+import { BridgeIcon } from "../icons/products/BridgeIcon";
+import { ConnectIcon } from "../icons/products/ConnectIcon";
+import { ContractsIcon } from "../icons/products/ContractsIcon";
+import { EngineIcon } from "../icons/products/EngineIcon";
+import { InsightIcon } from "../icons/products/InsightIcon";
+import { NebulaIcon } from "../icons/products/NebulaIcon";
+import { PlaygroundIcon } from "../icons/products/PlaygroundIcon";
+import { cn } from "../lib/utils";
 import DocsHeroDark from "./_images/docs-hero-dark.png";
 import DocsHeroLight from "./_images/docs-hero-light.png";
-
 export default function Page() {
   return (
     <main className="container max-w-[900px] grow pb-20" data-noindex>
       <Hero />
       <div className="grid grid-cols-1 gap-8">
-        <FrontendSection />
-        <BackendSection />
-        <ContractsSection />
+        <PlaygroundSection />
+        <LearningResourcesSection />
+        <ReferenceSection />
       </div>
     </main>
   );
@@ -42,53 +54,139 @@ function Hero() {
   );
 }
 
-function FrontendSection() {
+function PlaygroundSection() {
   return (
     <section>
-      <SectionTitle id="frontend" title="Frontend" />
+      <SectionTitle id="playground" title="Live Demos" />
       <ArticleCardIndex
-        href="/connect"
-        title="Connect"
-        description="Wallets, auth, and onchain interactions"
+        href="https://playground.thirdweb.com"
+        title="Playground"
+        external
+        description="Try out our interactive playground to get started"
+        icon={PlaygroundIcon}
       />
     </section>
   );
 }
 
-function ContractsSection() {
+function ReferenceSection() {
   return (
     <section>
-      <SectionTitle id="onchain" title="Onchain" />
-      <ArticleCardIndex
-        title="Contracts"
-        description="Solidity contracts and deployment tools"
-        href="/contracts"
+      <SectionTitle id="reference" title="API Reference" />
+      <SectionTitle
+        id="client"
+        title="Client libraries"
+        level={4}
+        className="text-muted-foreground"
+      />
+      <Grid>
+        <SDKCard
+          title="TypeScript"
+          href="/typescript/v5"
+          icon={TypeScriptIcon}
+        />
+        <SDKCard title="React" href="/react/v5" icon={ReactIcon} />
+        <SDKCard
+          title="React Native"
+          href="/react-native/v5"
+          icon={ReactIcon}
+        />
+        <SDKCard title="DotNet" href="/dotnet" icon={DotNetIcon} />
+        <SDKCard title="Unity" href="/unity" icon={UnityIcon} />
+        <SDKCard
+          title="Unreal Engine"
+          href="/unreal-engine"
+          icon={UnrealEngineIcon}
+        />
+      </Grid>
+      <SectionTitle
+        id="backend"
+        title="Backend APIs"
+        level={4}
+        className="text-muted-foreground"
       />
+      <Grid>
+        <SDKCard
+          title="Engine"
+          href="https://thirdweb-engine.apidocumentation.com/"
+          icon={EngineIcon}
+          isExternal
+          iconClassName="text-muted-foreground"
+        />
+        <SDKCard
+          title="Insight"
+          href="https://insight-api.thirdweb.com/reference"
+          icon={InsightIcon}
+          isExternal
+          iconClassName="text-muted-foreground"
+        />
+        <SDKCard
+          title="Universal Bridge"
+          href="https://bridge.thirdweb.com/reference"
+          icon={BridgeIcon}
+          isExternal
+          iconClassName="text-muted-foreground"
+        />
+        <SDKCard
+          title="Contracts"
+          href="https://contracts.thirdweb.com/reference"
+          icon={ContractsIcon}
+          isExternal
+          iconClassName="text-muted-foreground"
+        />
+        <SDKCard
+          title="Wallets"
+          href="/connect/wallet/get-users" // TODO: actual openAPI docs
+          icon={ConnectIcon}
+          iconClassName="text-muted-foreground"
+        />
+        <SDKCard
+          title="Nebula"
+          href="/nebula/api-reference" // TODO: actual openAPI docs
+          icon={NebulaIcon}
+          iconClassName="text-muted-foreground"
+        />
+      </Grid>
     </section>
   );
 }
 
-function BackendSection() {
+function LearningResourcesSection() {
   return (
     <section>
-      <SectionTitle id="backend" title="Backend" />
-      <div className="flex flex-col gap-4">
+      <SectionTitle id="learning" title="Learning Resources" />
+      <Grid className="md:grid-cols-1 lg:grid-cols-2">
+        <ArticleCardIndex
+          href="/connect"
+          title="Connect"
+          description="Wallets, auth, and onchain interactions"
+          icon={ConnectIcon}
+        />
         <ArticleCardIndex
           href="/engine"
           title="Engine"
           description="Reliable transactions and monitoring"
+          icon={EngineIcon}
         />
         <ArticleCardIndex
           href="/insight"
           title="Insight"
           description="Blockchain data queries and transformations"
+          icon={InsightIcon}
         />
         <ArticleCardIndex
           href="/nebula"
-          title="AI"
+          title="Nebula"
           description="API interface for LLMs"
+          icon={NebulaIcon}
         />
-      </div>
+        <ArticleCardIndex
+          title="Contracts"
+          description="Solidity contracts and deployment tools"
+          href="/contracts"
+          icon={ContractsIcon}
+        />
+      </Grid>
     </section>
   );
 }
@@ -97,9 +195,15 @@ function SectionTitle(props: {
   title: string;
   id: string;
   level?: number;
+  className?: string;
 }) {
   return (
-    <Heading id={props.id} level={props.level || 2} anchorClassName="mb-4 mt-0">
+    <Heading
+      id={props.id}
+      level={props.level || 2}
+      anchorClassName="mb-4 mt-0"
+      className={cn(props.className)}
+    >
       {props.title}
     </Heading>
   );
@@ -112,15 +216,23 @@ function ArticleCardIndex(props: {
   title: string;
   description: string;
   href: string;
+  icon?: React.FC<{ className?: string }>;
+  external?: boolean;
 }) {
   return (
     <Link
       href={props.href}
+      target={props.external ? "_blank" : undefined}
       className="flex items-center gap-4 rounded-lg border bg-card p-4 transition-colors hover:border-active-border"
     >
-      <div className="flex flex-col gap-0.5">
-        <h3 className="font-semibold text-foreground text-lg">{props.title}</h3>
-        <p className="text-muted-foreground">{props.description}</p>
+      <div className="flex items-center gap-3">
+        {props.icon && <props.icon className="text-muted-foreground" />}
+        <div className="flex flex-col gap-0.5">
+          <h3 className="font-semibold text-foreground text-lg">
+            {props.title}
+          </h3>
+          <p className="text-muted-foreground">{props.description}</p>
+        </div>
       </div>
     </Link>
   );
diff --git a/apps/portal/src/components/Document/SDKCard.tsx b/apps/portal/src/components/Document/SDKCard.tsx
index 73aa2388dc9..8d0062be67d 100644
--- a/apps/portal/src/components/Document/SDKCard.tsx
+++ b/apps/portal/src/components/Document/SDKCard.tsx
@@ -1,16 +1,24 @@
 import Link from "next/link";
+import { cn } from "../../lib/utils";
 
 export function SDKCard(props: {
   title: string;
   href: string;
+  isExternal?: boolean;
   icon?: React.FC<{ className?: string }>;
+  iconClassName?: string;
 }) {
   return (
     <Link
       href={props.href}
+      target={props.isExternal ? "_blank" : undefined}
       className="flex items-center gap-2 rounded-lg border bg-card p-4 transition-colors hover:border-active-border"
     >
-      {props.icon && <props.icon className="size-6 shrink-0 text-foreground" />}
+      {props.icon && (
+        <props.icon
+          className={cn("size-6 shrink-0 text-foreground", props.iconClassName)}
+        />
+      )}
       <h3 className="font-semibold text-base text-foreground tracking-tight">
         {props.title}
       </h3>
diff --git a/apps/portal/src/icons/products/BridgeIcon.tsx b/apps/portal/src/icons/products/BridgeIcon.tsx
new file mode 100644
index 00000000000..00f88f67e48
--- /dev/null
+++ b/apps/portal/src/icons/products/BridgeIcon.tsx
@@ -0,0 +1,24 @@
+export function BridgeIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="presentation"
+      className={className}
+    >
+      <path
+        d="M13.8939 12.5808L16.5342 13.7124C16.6642 13.768 16.8143 13.8323 16.9397 13.8995C17.0808 13.9751 17.2866 14.1025 17.4539 14.3273C17.6655 14.6116 17.7696 14.9617 17.7477 15.3155C17.7304 15.5951 17.6276 15.8143 17.5506 15.9547C17.4823 16.0795 17.3917 16.2153 17.3132 16.3329C16.8225 17.0692 16.381 18.0866 15.6848 18.6588C15.5325 18.784 15.357 18.878 15.1683 18.9353C14.2961 19.2002 12.7076 19.2484 11.8114 18.8959C11.5777 18.804 11.3708 18.6549 11.2097 18.4623C10.6052 17.7393 10.4447 16.4969 10.1561 15.6306L10.1484 15.6079C10.12 15.5246 10.0614 15.3527 10.0454 15.1674C10.0318 15.0106 10.0431 14.8526 10.0787 14.6993C10.2262 14.0637 10.6368 13.4001 10.9664 12.8503C11.0351 12.7356 11.1415 12.581 11.3119 12.4437C11.5359 12.2631 11.8071 12.1507 12.0932 12.12C12.3108 12.0967 12.4953 12.1308 12.625 12.1633C13.051 12.2699 13.4916 12.4084 13.8939 12.5808Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM3.50553 9.01869C3.17808 9.95174 3 10.9551 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 8.1675 18.6045 4.89451 15.2291 3.59664C15.1462 4.84217 15.5812 6.80831 14.5371 7.76943C13.4421 8.77736 11.4822 9.2136 10.1439 9.8083L9.25538 10.993C9.18549 11.0863 9.10167 11.1981 9.01972 11.2908C8.92445 11.3984 8.77813 11.544 8.56315 11.6514C8.284 11.7907 7.96834 11.8396 7.66013 11.7911C7.42276 11.7538 7.23928 11.6592 7.11593 11.5854C7.00979 11.5218 6.89611 11.4406 6.80129 11.3728L3.50553 9.01869Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/apps/portal/src/icons/products/ConnectIcon.tsx b/apps/portal/src/icons/products/ConnectIcon.tsx
new file mode 100644
index 00000000000..d17a2f8fcb9
--- /dev/null
+++ b/apps/portal/src/icons/products/ConnectIcon.tsx
@@ -0,0 +1,21 @@
+export function ConnectIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="presentation"
+      {...props}
+    >
+      <path
+        d="M16 7.99983V4.50048C16 3.66874 16 3.25287 15.8248 2.9973C15.6717 2.77401 15.4346 2.62232 15.1678 2.57691C14.8623 2.52493 14.4847 2.6992 13.7295 3.04775L4.85901 7.14182C4.18551 7.45267 3.84875 7.6081 3.60211 7.84915C3.38406 8.06225 3.21762 8.32238 3.1155 8.60966C3 8.93462 3 9.30551 3 10.0473V14.9998M16.5 14.4998H16.51M3 11.1998L3 17.7998C3 18.9199 3 19.48 3.21799 19.9078C3.40973 20.2841 3.71569 20.5901 4.09202 20.7818C4.51984 20.9998 5.07989 20.9998 6.2 20.9998H17.8C18.9201 20.9998 19.4802 20.9998 19.908 20.7818C20.2843 20.5901 20.5903 20.2841 20.782 19.9078C21 19.48 21 18.9199 21 17.7998V11.1998C21 10.0797 21 9.51967 20.782 9.09185C20.5903 8.71552 20.2843 8.40956 19.908 8.21782C19.4802 7.99983 18.9201 7.99983 17.8 7.99983L6.2 7.99983C5.0799 7.99983 4.51984 7.99983 4.09202 8.21781C3.7157 8.40956 3.40973 8.71552 3.21799 9.09185C3 9.51967 3 10.0797 3 11.1998ZM17 14.4998C17 14.776 16.7761 14.9998 16.5 14.9998C16.2239 14.9998 16 14.776 16 14.4998C16 14.2237 16.2239 13.9998 16.5 13.9998C16.7761 13.9998 17 14.2237 17 14.4998Z"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/apps/portal/src/icons/products/ContractsIcon.tsx b/apps/portal/src/icons/products/ContractsIcon.tsx
new file mode 100644
index 00000000000..849a9fc6fcd
--- /dev/null
+++ b/apps/portal/src/icons/products/ContractsIcon.tsx
@@ -0,0 +1,21 @@
+export function ContractsIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="presentation"
+      className={className}
+    >
+      <path
+        d="M14 11H8M10 15H8M16 7H8M20 6.8V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H15.2C16.8802 2 17.7202 2 18.362 2.32698C18.9265 2.6146 19.3854 3.07354 19.673 3.63803C20 4.27976 20 5.11984 20 6.8Z"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/apps/portal/src/icons/products/EngineIcon.tsx b/apps/portal/src/icons/products/EngineIcon.tsx
new file mode 100644
index 00000000000..7e99d6b3c68
--- /dev/null
+++ b/apps/portal/src/icons/products/EngineIcon.tsx
@@ -0,0 +1,21 @@
+export function EngineIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="presentation"
+      {...props}
+    >
+      <path
+        d="M6.5 19C4.01472 19 2 16.9853 2 14.5C2 12.1564 3.79151 10.2313 6.07974 10.0194C6.54781 7.17213 9.02024 5 12 5C14.9798 5 17.4522 7.17213 17.9203 10.0194C20.2085 10.2313 22 12.1564 22 14.5C22 16.9853 19.9853 19 17.5 19C13.1102 19 10.3433 19 6.5 19Z"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/apps/portal/src/icons/products/InsightIcon.tsx b/apps/portal/src/icons/products/InsightIcon.tsx
new file mode 100644
index 00000000000..bdea8080daf
--- /dev/null
+++ b/apps/portal/src/icons/products/InsightIcon.tsx
@@ -0,0 +1,21 @@
+export function InsightIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="presentation"
+      className={className}
+    >
+      <path
+        d="M20.5 7.27783L12 12.0001M12 12.0001L3.49997 7.27783M12 12.0001L12 21.5001M21 12.0001V7.94153C21 7.59889 21 7.42757 20.9495 7.27477C20.9049 7.13959 20.8318 7.01551 20.7354 6.91082C20.6263 6.79248 20.4766 6.70928 20.177 6.54288L12.777 2.43177C12.4934 2.27421 12.3516 2.19543 12.2015 2.16454C12.0685 2.13721 11.9315 2.13721 11.7986 2.16454C11.6484 2.19543 11.5066 2.27421 11.223 2.43177L3.82297 6.54288C3.52345 6.70928 3.37368 6.79248 3.26463 6.91082C3.16816 7.01551 3.09515 7.13959 3.05048 7.27477C3 7.42757 3 7.59889 3 7.94153V16.0586C3 16.4013 3 16.5726 3.05048 16.7254C3.09515 16.8606 3.16816 16.9847 3.26463 17.0893C3.37368 17.2077 3.52346 17.2909 3.82297 17.4573L11.223 21.5684C11.5066 21.726 11.6484 21.8047 11.7986 21.8356C11.9315 21.863 12.0685 21.863 12.2015 21.8356C12.3516 21.8047 12.4934 21.726 12.777 21.5684L13 21.4445M7.5 4.50008L16.5 9.50008M22 21.5001L21 20.5001M22 18.0001C22 19.6569 20.6569 21.0001 19 21.0001C17.3431 21.0001 16 19.6569 16 18.0001C16 16.3432 17.3431 15.0001 19 15.0001C20.6569 15.0001 22 16.3432 22 18.0001Z"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/apps/portal/src/icons/products/NebulaIcon.tsx b/apps/portal/src/icons/products/NebulaIcon.tsx
new file mode 100644
index 00000000000..a66ec07c35b
--- /dev/null
+++ b/apps/portal/src/icons/products/NebulaIcon.tsx
@@ -0,0 +1,24 @@
+export function NebulaIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="presentation"
+      className={className}
+    >
+      <path
+        d="M12.0005 10.4661C12.8477 10.4661 13.5344 11.1529 13.5344 12C13.5344 12.8472 12.8477 13.5339 12.0005 13.5339C11.1534 13.5339 10.4666 12.8472 10.4666 12C10.4666 11.1529 11.1534 10.4661 12.0005 10.4661Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.37637 9.10092C6.76715 8.60917 7.19621 8.12726 7.66198 7.6615C11.6555 3.66799 16.8353 2.37304 19.2314 4.76914C20.3274 5.86517 20.6512 7.54363 20.2976 9.42458C21.1404 9.97137 21.6979 10.9206 21.6979 12C21.6979 13.6943 20.3244 15.0678 18.6301 15.0678C18.2779 15.0678 17.9396 15.0085 17.6246 14.8993C17.2338 15.391 16.8048 15.8728 16.339 16.3386C12.3455 20.3321 7.16573 21.627 4.76963 19.2309C3.67365 18.1349 3.34989 16.4566 3.70338 14.5757C2.8604 14.029 2.30273 13.0796 2.30273 12C2.30273 10.3057 3.67624 8.93223 5.37054 8.93223C5.72284 8.93223 6.06127 8.99161 6.37637 9.10092ZM8.74661 8.74613C10.5806 6.91216 12.6367 5.75258 14.4177 5.30732C16.2333 4.85342 17.4794 5.18639 18.1468 5.85377C18.732 6.43903 19.0601 7.46927 18.8259 8.93838C18.7611 8.9343 18.6958 8.93223 18.6301 8.93223C16.9358 8.93223 15.5622 10.3057 15.5622 12C15.5622 12.7857 15.8576 13.5024 16.3434 14.0452C16.0118 14.4551 15.6487 14.8596 15.2544 15.2539C13.4204 17.0879 11.3643 18.2475 9.58328 18.6927C7.76768 19.1466 6.52164 18.8137 5.85426 18.1463C5.26901 17.561 4.94093 16.5308 5.17513 15.0617C5.23974 15.0658 5.3049 15.0678 5.37054 15.0678C7.06484 15.0678 8.43835 13.6943 8.43835 12C8.43835 11.2145 8.14307 10.4978 7.65744 9.95512C7.98905 9.54515 8.35224 9.1405 8.74661 8.74613ZM5.37076 13.5339C4.87982 13.5339 4.44277 13.3032 4.16205 12.9443C4.16201 12.9444 4.1621 12.9441 4.16205 12.9443C3.95826 12.6839 3.83664 12.3563 3.83664 12C3.83664 11.1529 4.52339 10.4661 5.37054 10.4661C6.21769 10.4661 6.90444 11.1529 6.90444 12C6.90444 12.8391 6.23074 13.5208 5.39476 13.5338C5.38685 13.5339 5.3787 13.5339 5.37076 13.5339ZM18.5973 13.5336C18.6082 13.5338 18.6191 13.5339 18.6301 13.5339C19.4772 13.5339 20.164 12.8472 20.164 12C20.164 11.6439 20.0426 11.3161 19.839 11.0558C19.5758 10.7193 19.1751 10.4955 18.7215 10.4688C18.6912 10.467 18.6607 10.4661 18.63 10.4661C18.5574 10.4661 18.486 10.4712 18.416 10.4809C17.6702 10.5851 17.0962 11.2255 17.0962 12C17.0962 12.2677 17.1647 12.5194 17.2853 12.7384C17.5412 13.2037 18.0316 13.5218 18.5973 13.5336Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/apps/portal/src/icons/products/PlaygroundIcon.tsx b/apps/portal/src/icons/products/PlaygroundIcon.tsx
new file mode 100644
index 00000000000..129bd4e3bd3
--- /dev/null
+++ b/apps/portal/src/icons/products/PlaygroundIcon.tsx
@@ -0,0 +1,21 @@
+export function PlaygroundIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="presentation"
+      {...props}
+    >
+      <path
+        d="M4.5 22V17M4.5 7V2M2 4.5H7M2 19.5H7M13 3L11.2658 7.50886C10.9838 8.24209 10.8428 8.60871 10.6235 8.91709C10.4292 9.1904 10.1904 9.42919 9.91709 9.62353C9.60871 9.84281 9.24209 9.98381 8.50886 10.2658L4 12L8.50886 13.7342C9.24209 14.0162 9.60871 14.1572 9.91709 14.3765C10.1904 14.5708 10.4292 14.8096 10.6235 15.0829C10.8428 15.3913 10.9838 15.7579 11.2658 16.4911L13 21L14.7342 16.4911C15.0162 15.7579 15.1572 15.3913 15.3765 15.0829C15.5708 14.8096 15.8096 14.5708 16.0829 14.3765C16.3913 14.1572 16.7579 14.0162 17.4911 13.7342L22 12L17.4911 10.2658C16.7579 9.98381 16.3913 9.8428 16.0829 9.62353C15.8096 9.42919 15.5708 9.1904 15.3765 8.91709C15.1572 8.60871 15.0162 8.24209 14.7342 7.50886L13 3Z"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}