fix(apis): add page to present mesh apis at /apis

Author: smutyala1at

apps/docs/app/(home)/page.mdx

@@ -102,7 +102,7 @@ import {
         </div>
       </div>
 
-      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 items-stretch">
         {[
           {
             title: "Wallets",
@@ -184,7 +184,7 @@ import {
           }
         ].map((card) => (
           <Link key={card.title} href={card.href}>
-            <Card className="text-center hover:border-primary/50 transition-colors px-4 py-8">
+            <Card className="h-full text-center hover:border-primary/50 transition-colors px-4 py-8">
               <CardTitle className="font-heading">{card.title}</CardTitle>
               <CardDescription>{card.description}</CardDescription>
             </Card>

apps/docs/content/docs/apis/index.mdx

@@ -0,0 +1,63 @@
+---
+title: "Mesh API"
+description: "From wallet integrations to transaction builders, Mesh makes Web3 development easy with reliable, scalable, and well-engineered APIs & developer tools."
+---
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  BoltIcon,
+  PaintBrushIcon,
+  RocketLaunchIcon,
+  WalletIcon,
+  BanknotesIcon,
+  MagnifyingGlassIcon,
+  WrenchScrewdriverIcon,
+  ComputerDesktopIcon,
+  DocumentCheckIcon,
+  CloudIcon,
+} from "@heroicons/react/24/solid";
+import Link from "next/link";
+
+<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 items-stretch">
+  {[
+    {
+      title: "Wallets",
+      href: "/apis/wallets",
+      icon: <WalletIcon />,
+      description: "Wallets APIs for interacting with the blockchain"
+    },
+    {
+      title: "Transaction Builder",
+      href: "/apis/txbuilder",
+      icon: <BanknotesIcon />,
+      description: "Build transactions with cardano-cli like APIs"
+    },
+    {
+      title: "Transaction Parser",
+      href: "/apis/txparser",
+      icon: <MagnifyingGlassIcon />,
+      description: "Parse transactions for testing and rebuilding"
+    },
+    {
+      title: "Utilities",
+      href: "/apis/utilities",
+      icon: <WrenchScrewdriverIcon />,
+      description: "Serializers, resolvers and data types for converting between different formats"
+    },
+  ].map((card) => (
+    <Link key={card.title} href={card.href} className="no-underline">
+      <Card className="h-full text-center hover:border-primary/50 transition-colors px-4 py-8">
+        <CardTitle className="font-heading">{card.title}</CardTitle>
+        <CardDescription>{card.description}</CardDescription>
+      </Card>
+    </Link>
+  ))}
+</div>