[MNY-106] Playground: Add overview pages for all sections in sidebar

apps/playground-web/src/app/account-abstraction/page.tsx

@@ -0,0 +1,19 @@
+import { OverviewPage } from "@/components/blocks/OverviewPage";
+import { SmartAccountIcon } from "../../icons/SmartAccountIcon";
+import { accountAbstractionsFeatureCards } from "../data/pages-metadata";
+
+export default function Page() {
+  return (
+    <OverviewPage
+      icon={SmartAccountIcon}
+      title="Account Abstraction"
+      description={
+        <>
+          Transaction infrastructure for gasless or permissioned transactions
+          utilizing EIP-4337 and 7702 specs
+        </>
+      }
+      featureCards={accountAbstractionsFeatureCards}
+    />
+  );
+}

apps/playground-web/src/app/ai/ai-sdk/components/chat-container.tsx

@@ -120,7 +120,7 @@ export function ChatContainer() {
 
         <PromptInput
           onSubmit={handleSubmit}
-          className="mt-4 w-full max-w-2xl mx-auto relative"
+          className="mt-4 w-full max-w-2xl mx-auto relative border-x-0 border-b-0 rounded-t-none"
         >
           <PromptInputTextarea
             value={input}

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

@@ -0,0 +1,19 @@
+import { BotIcon } from "lucide-react";
+import { OverviewPage } from "@/components/blocks/OverviewPage";
+import { aiFeatureCards } from "../data/pages-metadata";
+
+export default function Page() {
+  return (
+    <OverviewPage
+      icon={BotIcon}
+      title="thirdweb AI"
+      description={
+        <>
+          Query onchain data, analyze transactions, prepare contract calls, and
+          do swaps with AI
+        </>
+      }
+      featureCards={aiFeatureCards}
+    />
+  );
+}

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

@@ -0,0 +1,14 @@
+import { OverviewPage } from "@/components/blocks/OverviewPage";
+import { ContractIcon } from "../../icons/ContractIcon";
+import { contractsFeatureCards } from "../data/pages-metadata";
+
+export default function Page() {
+  return (
+    <OverviewPage
+      title="Contracts"
+      description="Comprehensive toolkit to create, deploy, and manage smart contracts"
+      featureCards={contractsFeatureCards}
+      icon={ContractIcon}
+    />
+  );
+}

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

@@ -0,0 +1,297 @@
+import {
+  ArrowLeftRightIcon,
+  BlocksIcon,
+  BotIcon,
+  BoxIcon,
+  BracesIcon,
+  CircleUserIcon,
+  CreditCardIcon,
+  DollarSignIcon,
+  GlobeIcon,
+  ImageIcon,
+  LinkIcon,
+  LockIcon,
+  PanelTopIcon,
+  PencilIcon,
+  PlaneIcon,
+  RectangleHorizontalIcon,
+  RssIcon,
+  ScanTextIcon,
+  ShieldIcon,
+  ShoppingBagIcon,
+  SquircleDashedIcon,
+  StampIcon,
+  UserIcon,
+  WalletCardsIcon,
+} from "lucide-react";
+import { InsightIcon } from "../../icons/InsightIcon";
+
+export type FeatureCardMetadata = {
+  icon: React.FC<{ className?: string }>;
+  title: string;
+  link: string;
+  description: string;
+};
+
+export const walletsFeatureCards: FeatureCardMetadata[] = [
+  {
+    icon: RectangleHorizontalIcon,
+    title: "Connect Button",
+    link: "/wallets/sign-in/button",
+    description:
+      "Wallet connection component for EOA or email, mobile, social, and passkey logins",
+  },
+  {
+    icon: PanelTopIcon,
+    title: "Connect Embed",
+    link: "/wallets/sign-in/embed",
+    description: "Embedded component to view balance, get funds, and more",
+  },
+
+  {
+    icon: SquircleDashedIcon,
+    title: "Headless Connect",
+    link: "/wallets/sign-in/headless",
+    description: "Customizable wallet connection components using React hooks",
+  },
+
+  {
+    icon: UserIcon,
+    title: "In-App Wallets",
+    link: "/wallets/in-app-wallet",
+    description:
+      "Add social login, passkey, phone, or email sign-in to your app",
+  },
+
+  {
+    icon: LockIcon,
+    title: "Authentication (SIWE)",
+    link: "/wallets/auth",
+    description: "Authenticate users to your backend using their wallet",
+  },
+
+  {
+    icon: GlobeIcon,
+    title: "Social Profiles",
+    link: "/wallets/social",
+    description:
+      "Get user profiles across apps like ENS, Lens, Farcaster, and more",
+  },
+
+  {
+    icon: BoxIcon,
+    title: "Headless Components",
+    link: "/wallets/headless",
+    description: "Components for rendering various wallet related information",
+  },
+];
+
+export const headlessComponentsFeatureCards: FeatureCardMetadata[] = [
+  {
+    icon: CircleUserIcon,
+    title: "Account Components",
+    link: "/wallets/headless/account-components",
+    description: "Components for rendering various account related information",
+  },
+  {
+    icon: LinkIcon,
+    title: "Chain Components",
+    link: "/wallets/headless/chain-components",
+    description: "Components for rendering various chain related information",
+  },
+  {
+    icon: WalletCardsIcon,
+    title: "Wallet Components",
+    link: "/wallets/headless/wallet-components",
+    description: "Components for rendering various wallet related information",
+  },
+];
+
+export const transactionsFeatureCards: FeatureCardMetadata[] = [
+  {
+    icon: PlaneIcon,
+    title: "Airdrop Tokens",
+    link: "/transactions/airdrop-tokens",
+    description:
+      "Airdrop any token with a few lines of code with gas sponsorship, optional.",
+  },
+  {
+    icon: StampIcon,
+    title: "Mint NFTs",
+    link: "/transactions/mint-tokens",
+    description:
+      "Gasless and efficient token minting with just a wallet address",
+  },
+
+  {
+    icon: RssIcon,
+    title: "Webhooks",
+    link: "/transactions/webhooks",
+    description:
+      "Receive real-time notifications for transactions and wallet events.",
+  },
+];
+
+export const contractsFeatureCards: FeatureCardMetadata[] = [
+  {
+    icon: ScanTextIcon,
+    title: "Read Contract",
+    link: "/contracts/read",
+    description: "Read data from any contract on any EVM",
+  },
+  {
+    icon: PencilIcon,
+    title: "Write Contract",
+    link: "/contracts/write",
+    description: "Send transactions from the connected wallet",
+  },
+  {
+    icon: BlocksIcon,
+    title: "Pre-Built Extensions",
+    link: "/contracts/extensions",
+    description: "High-level read and write functions",
+  },
+  {
+    icon: RssIcon,
+    title: "Listen Contract Events",
+    link: "/contracts/events",
+    description: "Subscribe to any contract event",
+  },
+];
+
+export const paymentsFeatureCards: FeatureCardMetadata[] = [
+  {
+    icon: BoxIcon,
+    title: "Payments UI Components",
+    link: "/payments/ui-components",
+    description: "Onramp, swap, and bridge over 1,000+ crypto tokens",
+  },
+  {
+    icon: ShoppingBagIcon,
+    title: "Buy Crypto",
+    link: "/payments/fund-wallet",
+    description:
+      "Buy any token with ability to customize theme, amounts, and more",
+  },
+  {
+    icon: CreditCardIcon,
+    title: "Checkout",
+    link: "/payments/commerce",
+    description:
+      "Enable crypto payments for services and get notified on each sale",
+  },
+  {
+    icon: ArrowLeftRightIcon,
+    title: "Transactions",
+    link: "/payments/transactions",
+    description:
+      "Enable users to pay for onchain transactions with fiat or crypto",
+  },
+  {
+    icon: BracesIcon,
+    title: "Payments API",
+    link: "/payments/backend",
+    description: "Create customizable UIs or backend flows using the HTTP API",
+  },
+];
+
+export const insightFeatureCards: FeatureCardMetadata[] = [
+  {
+    icon: InsightIcon,
+    title: "Events",
+    link: "/insight",
+    description: "Query contract events on any supported EVM chain",
+  },
+  {
+    icon: InsightIcon,
+    title: "Transactions",
+    link: "/insight",
+    description: "Query transactions to and from specified recipients",
+  },
+  {
+    icon: InsightIcon,
+    title: "Tokens",
+    link: "/insight",
+    description: "Query token owners, transfers, prices, and more",
+  },
+  {
+    icon: InsightIcon,
+    title: "NFTs",
+    link: "/insight",
+    description:
+      "Query NFT balances, collections, transfers, metadata, and more.",
+  },
+  {
+    icon: InsightIcon,
+    title: "Wallets",
+    link: "/insight",
+    description: "Query transactions to and from specific wallets",
+  },
+  {
+    icon: InsightIcon,
+    title: "Contracts",
+    link: "/insight",
+    description: "Query a contract's ABI or metadata",
+  },
+];
+
+export const accountAbstractionsFeatureCards: FeatureCardMetadata[] = [
+  {
+    icon: ShieldIcon,
+    title: "EIP-4337",
+    link: "/account-abstraction/eip-4337",
+    description:
+      "Implement via a higher-layer mempool using objects and bundlers",
+  },
+  {
+    icon: ShieldIcon,
+    title: "EIP-7702",
+    link: "/account-abstraction/eip-7702",
+    description:
+      "Allow EOAs to temporarily behave like smart contracts during txs",
+  },
+  {
+    icon: ShieldIcon,
+    title: "EIP-5792",
+    link: "/account-abstraction/eip-5792",
+    description:
+      "Define a standard RPC interface for smart account interactions",
+  },
+  {
+    icon: ShieldIcon,
+    title: "Native AA (zkSync)",
+    link: "/account-abstraction/native-aa",
+    description: "Native account abstraction available for zkSync chains",
+  },
+];
+
+export const tokensFeatureCards: FeatureCardMetadata[] = [
+  {
+    icon: DollarSignIcon,
+    title: "Token Components",
+    link: "/tokens/token-components",
+    description:
+      "Headless UI components for rendering token image, name, and symbol",
+  },
+  {
+    icon: ImageIcon,
+    title: "NFT Components",
+    link: "/tokens/nft-components",
+    description: "Headless UI components for rendering NFT Media and metadata",
+  },
+];
+
+export const aiFeatureCards: FeatureCardMetadata[] = [
+  {
+    icon: BotIcon,
+    title: "Blockchain LLM",
+    link: "/ai/chat",
+    description: "thirdweb AI demo chat application",
+  },
+  {
+    icon: BotIcon,
+    title: "AI SDK Integration",
+    link: "/ai/ai-sdk",
+    description: "Use the thirdweb blockchain models with the Vercel AI SDK",
+  },
+];