[BLD-330] Playground: Add missing payments overview page

Author: MananTank

apps/playground-web/src/app/data/pages-metadata.ts

@@ -4,6 +4,7 @@ import {
   BotIcon,
   BoxIcon,
   BringToFrontIcon,
+  CircleDollarSignIcon,
   CircleUserIcon,
   CreditCardIcon,
   DollarSignIcon,
@@ -186,6 +187,13 @@ export const paymentsFeatureCards: FeatureCardMetadata[] = [
     description:
       "Enable users to pay for onchain transactions with fiat or crypto",
   },
+  {
+    icon: CircleDollarSignIcon,
+    title: "x402",
+    link: "/payments/x402",
+    description:
+      "Use the x402 payment protocol to pay for API calls using any web3 wallet",
+  },
 ];
 
 export const accountAbstractionsFeatureCards: FeatureCardMetadata[] = [

apps/playground-web/src/app/payments/page.tsx

@@ -0,0 +1,14 @@
+import { OverviewPage } from "@/components/blocks/OverviewPage";
+import { PayIcon } from "@/icons/PayIcon";
+import { paymentsFeatureCards } from "../data/pages-metadata";
+
+export default function Page() {
+  return (
+    <OverviewPage
+      title="Payments"
+      description="thirdweb Payments allow developers to create advanced payment flows to monetize their apps through product sales, peer to peer payments, token sales, and more"
+      featureCards={paymentsFeatureCards}
+      icon={PayIcon}
+    />
+  );
+}

apps/playground-web/src/components/blocks/OverviewPage.tsx

@@ -19,7 +19,7 @@ export function OverviewPage(props: {
           <h1 className="mb-2 font-bold text-5xl tracking-tight">
             {props.title}
           </h1>
-          <p className="text-base text-muted-foreground leading-normal text-pretty">
+          <p className="text-base text-muted-foreground leading-normal text-pretty max-w-[80%]">
             {props.description}
           </p>
         </div>