From a379149bc462c978e70657a01a878312a0875369 Mon Sep 17 00:00:00 2001
From: Marcelo Kunze <marcelokunze220@gmail.com>
Date: Thu, 4 Dec 2025 16:16:22 -0300
Subject: [PATCH 1/7] Update metadata and headings to reflect new messaging for
 MCPay

---
 apps/app/src/app/api/og/server/[id]/route.tsx | 2 +-
 apps/app/src/app/layout.tsx                   | 8 ++++----
 apps/app/src/components/custom-ui/hero-3d.tsx | 4 ++--
 context/mcpay-v1.md                           | 8 ++++----
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/app/src/app/api/og/server/[id]/route.tsx b/apps/app/src/app/api/og/server/[id]/route.tsx
index 2037f3c..a34ee35 100644
--- a/apps/app/src/app/api/og/server/[id]/route.tsx
+++ b/apps/app/src/app/api/og/server/[id]/route.tsx
@@ -116,7 +116,7 @@ export async function GET(
                     display: "block",
                   }}
                 />
-                <div style={{ fontWeight: 500, display: "block" }}>MCPay — Payments for MCPs</div>
+                <div style={{ fontWeight: 500, display: "block" }}>MCPay — Make AI more capable</div>
               </div>
               <div style={{ fontSize: 15, opacity: 0.55, paddingLeft: 22, display: "block" }}>mcpay.tech</div>
             </div>
diff --git a/apps/app/src/app/layout.tsx b/apps/app/src/app/layout.tsx
index 378b96b..d851798 100644
--- a/apps/app/src/app/layout.tsx
+++ b/apps/app/src/app/layout.tsx
@@ -28,7 +28,7 @@ const hostGrotesk = Host_Grotesk({
 });
 
 export const metadata: Metadata = {
-  title: "MCPay — Payments for MCPs",
+  title: "MCPay — Make AI more capable",
   description: "Add micropayments per tool call to your MCP servers or APIs without rewriting infrastructure. Prepare your stack for agent-to-agent payments.",
   icons: {
     icon: [
@@ -45,7 +45,7 @@ export const metadata: Metadata = {
     ],
   },
   openGraph: {
-    title: "MCPay — Payments for MCPs",
+    title: "MCPay — Make AI more capable",
     description: "Add micropayments per tool call to your MCP servers or APIs without rewriting infrastructure. Prepare your stack for agent-to-agent payments.",
     type: "website",
     url: "https://mcpay.tech",
@@ -55,13 +55,13 @@ export const metadata: Metadata = {
         url: '/mcpay-agentic-payments-og-image-14112025.png',
         width: 1200,
         height: 630,
-        alt: 'MCPay — Payments for MCPs',
+        alt: 'MCPay — Make AI more capable',
       }
     ],
   },
   twitter: {
     card: 'summary_large_image',
-    title: "MCPay — Payments for MCPs",
+    title: "MCPay — Make AI more capable",
     description: "Add micropayments per tool call to your MCP servers or APIs without rewriting infrastructure. Prepare your stack for agent-to-agent payments.",
     images: ['/mcpay-agentic-payments-og-image-14112025.png'],
     creator: '@mcpaytech',
diff --git a/apps/app/src/components/custom-ui/hero-3d.tsx b/apps/app/src/components/custom-ui/hero-3d.tsx
index 0e24384..dd95680 100644
--- a/apps/app/src/components/custom-ui/hero-3d.tsx
+++ b/apps/app/src/components/custom-ui/hero-3d.tsx
@@ -120,7 +120,7 @@ export default function Hero3D({
           variants={fadeUp}
         >
           <h1 className="text-3xl sm:text-3xl lg:text-4xl font-bold font-host text-foreground leading-tight">
-            Payments infrastructure for the agent economy
+            The best way for AI to access and pay for online services
           </h1>
           <p className="text-sm sm:text-lg text-foreground/80 leading-relaxed max-w-lg">
             Single connection to use paid MCP tools across any client.<br />
@@ -227,7 +227,7 @@ export default function Hero3D({
           >
             {/* Heading */}
             <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold font-host text-foreground leading-tight">
-              Payments infrastructure for the agent economy
+              The best way for AI to access and pay for online services
             </h1>
 
             {/* Subheading */}
diff --git a/context/mcpay-v1.md b/context/mcpay-v1.md
index 60484e7..53e01d6 100644
--- a/context/mcpay-v1.md
+++ b/context/mcpay-v1.md
@@ -1360,7 +1360,7 @@ const hostGrotesk = Host_Grotesk({
 });
 
 export const metadata: Metadata = {
-  title: "MCPay — Payments for MCPs",
+  title: "MCPay — Make AI more capable",
   description: "Add micropayments per tool call to your MCP servers or APIs without rewriting infrastructure. Prepare your stack for agent-to-agent payments.",
   icons: {
     icon: [
@@ -1377,7 +1377,7 @@ export const metadata: Metadata = {
     ],
   },
   openGraph: {
-    title: "MCPay — Payments for MCPs",
+    title: "MCPay — Make AI more capable",
     description: "Add micropayments per tool call to your MCP servers or APIs without rewriting infrastructure. Prepare your stack for agent-to-agent payments.",
     type: "website",
     url: "https://mcpay.tech",
@@ -1387,13 +1387,13 @@ export const metadata: Metadata = {
         url: '/mcpay-agentic-payments-og-image-14112025.png',
         width: 1200,
         height: 630,
-        alt: 'MCPay — Payments for MCPs',
+        alt: 'MCPay — Make AI more capable',
       }
     ],
   },
   twitter: {
     card: 'summary_large_image',
-    title: "MCPay — Payments for MCPs",
+    title: "MCPay — Make AI more capable",
     description: "Add micropayments per tool call to your MCP servers or APIs without rewriting infrastructure. Prepare your stack for agent-to-agent payments.",
     images: ['/mcpay-agentic-payments-og-image-14112025.png'],
     creator: '@mcpaytech',

From ed92ca8c14f22724314a585421de748e5294c4a6 Mon Sep 17 00:00:00 2001
From: Marcelo Kunze <marcelokunze220@gmail.com>
Date: Thu, 4 Dec 2025 16:31:05 -0300
Subject: [PATCH 2/7] Enhance MCPBrowser and Navbar components with account
 modal integration

- Added account modal functionality to MCPBrowser for user sign-in.
- Updated button labels in Navbar to reflect 'SIGN IN' instead of 'Connect' for improved clarity.
- Modified layout in MCPBrowser to include a new heading and sign-in button, enhancing user engagement.
---
 apps/app/src/app/page.tsx                    | 29 ++++++++++++++------
 apps/app/src/components/custom-ui/navbar.tsx |  6 ++--
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index 5c02c56..b866463 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -8,14 +8,15 @@ import GithubInfo from "@/components/custom-ui/github-info"
 import Hero3D from "@/components/custom-ui/hero-3d"
 import ServersGrid from "@/components/custom-ui/servers-grid"
 import Stats from "@/components/custom-ui/stats"
-import TypingAnimation from "@/components/custom-ui/typing-animation"
 import { useTheme } from "@/components/providers/theme-context"
 import { Button } from "@/components/ui/button"
-import { useWindowScroll } from "@/hooks/use-chat-scroll"
 import { mcpDataApi, McpServer } from "@/lib/client/utils"
 import { ArrowRight, Rocket } from "lucide-react"
 import Link from "next/link"
 import { useEffect, useState } from "react"
+import { useAccountModal } from "@/components/hooks/use-account-modal"
+import { AccountModal } from "@/components/custom-ui/account-modal"
+import { useSession } from "@/lib/client/auth"
 
 
 export default function MCPBrowser() {
@@ -37,7 +38,8 @@ export default function MCPBrowser() {
 
 
   const { isDark } = useTheme()
-  const { isAtBottom: hasReachedBottom } = useWindowScroll(200)
+  const { isOpen, defaultTab, openModal, closeModal } = useAccountModal()
+  const { data: session } = useSession()
 
   const getFriendlyErrorMessage = (error: string) => {
     if (error.includes('404')) {
@@ -160,16 +162,25 @@ export default function MCPBrowser() {
         </section>
 
         <section className="mb-2">
-          <div className="max-w-6xl px-4 md:px-6 mx-auto text-center">
-            <TypingAnimation
-              text="Join the future of agentic payments."
-              trigger={hasReachedBottom}
-              speed={20}
-            />
+          <div className="max-w-6xl px-4 md:px-6 mx-auto text-center space-y-6">
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-medium font-host text-foreground leading-tight">
+              Make your AIs more capable.
+            </h2>
+            {!session?.user && (
+              <Button
+                variant="customTallAccent"
+                size="tall"
+                onClick={() => openModal("wallets")}
+                className="min-w-[220px]"
+              >
+                SIGN IN
+              </Button>
+            )}
           </div>
         </section>
       </div>
       <Footer />
+      <AccountModal isOpen={isOpen} onClose={closeModal} defaultTab={defaultTab} />
     </div>
   )
 }
diff --git a/apps/app/src/components/custom-ui/navbar.tsx b/apps/app/src/components/custom-ui/navbar.tsx
index 67c2d18..6f6bbcc 100644
--- a/apps/app/src/components/custom-ui/navbar.tsx
+++ b/apps/app/src/components/custom-ui/navbar.tsx
@@ -103,7 +103,7 @@ export default function Navbar() {
               onClick={() => openModal("wallets")}
               disabled={sessionLoading}
               className="flex items-center gap-2 px-3 py-2 text-sm font-medium transition-colors duration-200 cursor-pointer"
-              aria-label={session?.user ? "Open account" : "Connect"}
+              aria-label={session?.user ? "Open account" : "Sign in"}
             >
               {session?.user ? (
                 <>
@@ -127,8 +127,8 @@ export default function Navbar() {
                   </span>
                 </>
               ) : (
-                // No icon; always show "Connect" label (mobile + desktop)
-                <span>Connect</span>
+                // No icon; always show "SIGN IN" label (mobile + desktop)
+                <span>SIGN IN</span>
               )}
             </Button>
 

From afdd79aabf9902d11b174fc0f288c619dfbdd80b Mon Sep 17 00:00:00 2001
From: Marcelo Kunze <marcelokunze220@gmail.com>
Date: Thu, 4 Dec 2025 16:34:11 -0300
Subject: [PATCH 3/7] Update Hero3D component headings for improved emphasis on
 messaging

- Changed font weight of headings in Hero3D to 'semibold' for better visual hierarchy and clarity.
- Ensured consistency in styling across different screen sizes while maintaining the focus on AI payment services.
---
 apps/app/src/components/custom-ui/hero-3d.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/custom-ui/hero-3d.tsx b/apps/app/src/components/custom-ui/hero-3d.tsx
index dd95680..c1a0655 100644
--- a/apps/app/src/components/custom-ui/hero-3d.tsx
+++ b/apps/app/src/components/custom-ui/hero-3d.tsx
@@ -119,7 +119,7 @@ export default function Hero3D({
           animate={isMounted ? "visible" : "hidden"}
           variants={fadeUp}
         >
-          <h1 className="text-3xl sm:text-3xl lg:text-4xl font-bold font-host text-foreground leading-tight">
+          <h1 className="text-3xl sm:text-3xl lg:text-4xl font-semibold font-host text-foreground leading-tight">
             The best way for AI to access and pay for online services
           </h1>
           <p className="text-sm sm:text-lg text-foreground/80 leading-relaxed max-w-lg">
@@ -226,7 +226,7 @@ export default function Hero3D({
             variants={fadeUp}
           >
             {/* Heading */}
-            <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold font-host text-foreground leading-tight">
+            <h1 className="text-2xl sm:text-3xl lg:text-4xl font-semibold font-host text-foreground leading-tight">
               The best way for AI to access and pay for online services
             </h1>
 

From 5759d633db1f4668fc4f4cfb64a686e63c9919d7 Mon Sep 17 00:00:00 2001
From: Marcelo Kunze <marcelokunze220@gmail.com>
Date: Thu, 4 Dec 2025 16:44:55 -0300
Subject: [PATCH 4/7] Add SupportedBySection to Hero3D component and reorganize
 layout

- Introduced SupportedBySection to display supported logos, enhancing the visual appeal and information delivery.
- Adjusted layout in Hero3D for better mobile responsiveness, moving stats to a more appropriate position.
- Improved overall structure and clarity of the Hero3D component, ensuring a cohesive user experience.
---
 apps/app/src/app/page.tsx                     |   6 +-
 apps/app/src/components/custom-ui/hero-3d.tsx | 220 +++++++-----------
 2 files changed, 95 insertions(+), 131 deletions(-)

diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index b866463..83719c4 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -5,7 +5,7 @@ import DeveloperInfo from "@/components/custom-ui/developer-info"
 import FAQSection from "@/components/custom-ui/faq-section"
 import Footer from "@/components/custom-ui/footer"
 import GithubInfo from "@/components/custom-ui/github-info"
-import Hero3D from "@/components/custom-ui/hero-3d"
+import Hero3D, { SupportedBySection } from "@/components/custom-ui/hero-3d"
 import ServersGrid from "@/components/custom-ui/servers-grid"
 import Stats from "@/components/custom-ui/stats"
 import { useTheme } from "@/components/providers/theme-context"
@@ -127,6 +127,10 @@ export default function MCPBrowser() {
           <Hero3D />
         </section>
 
+        <section className="mb-8 md:mb-12">
+          <SupportedBySection />
+        </section>
+
         <section>
           <ConsumerInfo />
         </section>
diff --git a/apps/app/src/components/custom-ui/hero-3d.tsx b/apps/app/src/components/custom-ui/hero-3d.tsx
index c1a0655..be037af 100644
--- a/apps/app/src/components/custom-ui/hero-3d.tsx
+++ b/apps/app/src/components/custom-ui/hero-3d.tsx
@@ -64,6 +64,79 @@ const getMaskStyle = (src: string): React.CSSProperties => ({
   WebkitMaskPosition: "center",
 })
 
+export function SupportedBySection() {
+  const prefersReduced = useReducedMotion()
+  const [isMounted, setIsMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  const fadeUp: Variants = React.useMemo(
+    () => ({
+      hidden: { opacity: 0, y: prefersReduced ? 0 : 8 },
+      visible: {
+        opacity: 1,
+        y: 0,
+        transition: { duration: prefersReduced ? 0 : 0.4, ease: easeOut },
+      },
+    }),
+    [prefersReduced]
+  )
+
+  return (
+    <motion.section
+      className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-8 sm:py-16"
+      initial="hidden"
+      animate={isMounted ? "visible" : "hidden"}
+      variants={fadeUp}
+    >
+      <div className="flex flex-col items-start space-y-4">
+        <HighlighterText>SUPPORTED BY</HighlighterText>
+        <div className="flex flex-wrap gap-3">
+          {SUPPORTED_BY_LOGOS.map((logo) => {
+            const logoSize = getLogoSize(logo.name)
+            return (
+              <Link
+                key={logo.name}
+                href={logo.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group"
+              >
+                <div
+                  className={cn(
+                    "h-8 px-4 flex items-center justify-center rounded-[2px] transition-all duration-300",
+                    "bg-muted/50",
+                    "group-hover:bg-muted"
+                  )}
+                >
+                  <div
+                    className={cn(
+                      "transition-all duration-300",
+                      logoSize.className,
+                      "opacity-70 group-hover:opacity-100",
+                      "[background-color:var(--foreground)]"
+                    )}
+                    style={getMaskStyle(logo.src)}
+                  />
+                  <Image
+                    src={logo.src}
+                    alt={`${logo.name} logo`}
+                    width={logoSize.width}
+                    height={logoSize.height}
+                    className="sr-only"
+                  />
+                </div>
+              </Link>
+            )
+          })}
+        </div>
+      </div>
+    </motion.section>
+  )
+}
+
 export default function Hero3D({
   className,
 }: {
@@ -97,24 +170,9 @@ export default function Hero3D({
     >
       <div className="flex flex-col lg:grid lg:grid-cols-2 gap-8 lg:gap-12 lg:items-stretch lg:min-h-[600px]">
         {/* Mobile Layout */}
-        {/* Stats */}
-        <motion.div
-          className="flex flex-wrap gap-3 order-1 lg:hidden"
-          initial="hidden"
-          animate={isMounted ? "visible" : "hidden"}
-          variants={fadeUp}
-        >
-          <HighlighterText>
-            TRANSACTIONS: <span className="!text-foreground">+ 100,000</span>
-          </HighlighterText>
-          <HighlighterText>
-            VOLUME: <span className="!text-foreground">+ $30,000</span>
-          </HighlighterText>
-        </motion.div>
-
         {/* Heading and Subheading - Mobile */}
         <motion.div
-          className="flex flex-col gap-1 order-2 lg:hidden"
+          className="flex flex-col gap-1 order-1 lg:hidden"
           initial="hidden"
           animate={isMounted ? "visible" : "hidden"}
           variants={fadeUp}
@@ -123,104 +181,50 @@ export default function Hero3D({
             The best way for AI to access and pay for online services
           </h1>
           <p className="text-sm sm:text-lg text-foreground/80 leading-relaxed max-w-lg">
-            Single connection to use paid MCP tools across any client.<br />
-            Pay-per-use instead of expensive subscriptions.
+            Single connection to use paid MCP tools across any client. Pay-per-use instead of expensive subscriptions.
           </p>
         </motion.div>
 
         {/* 3D Container - Mobile */}
-        <div className="order-4 lg:hidden">
+        <div className="order-2 lg:hidden">
           <Logo3D className="h-[300px] min-h-0" delay={prefersReduced ? 0 : 0.4} duration={prefersReduced ? 0 : 1.2} />
         </div>
 
         {/* CTAs - Mobile */}
         <motion.div
-          className="flex gap-4 pt-2 order-5 lg:hidden -mx-4 px-4"
+          className="flex flex-col gap-4 pt-2 order-3 lg:hidden -mx-4 px-4"
           initial="hidden"
           animate={isMounted ? "visible" : "hidden"}
           variants={fadeUp}
         >
-          <Link href="/servers" className="flex-1 min-w-0">
+          <Link href="/servers" className="w-full">
             <Button variant="customTallPrimary" size="tall" className="w-full px-3 lg:px-6">
               BROWSE SERVERS
             </Button>
           </Link>
-          <Link href="/register" className="flex-1 min-w-0">
+          <Link href="/register" className="w-full">
             <Button variant="customTallSecondary" size="tall" className="w-full px-3 lg:px-6">
               MONETIZE SERVERS
             </Button>
           </Link>
         </motion.div>
 
-        {/* Supported By Section - Mobile */}
+        {/* Stats - Mobile (moved to bottom) */}
         <motion.div
-          className="space-y-4 order-6 lg:hidden"
+          className="flex flex-wrap gap-3 order-4 lg:hidden text-muted-foreground font-mono text-sm tracking-wider uppercase"
           initial="hidden"
           animate={isMounted ? "visible" : "hidden"}
           variants={fadeUp}
         >
-          <HighlighterText>SUPPORTED BY</HighlighterText>
-          <div className="flex flex-wrap gap-3">
-            {SUPPORTED_BY_LOGOS.map((logo) => {
-              const logoSize = getLogoSize(logo.name)
-              return (
-                <Link
-                  key={logo.name}
-                  href={logo.href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="group"
-                >
-                  <div
-                    className={cn(
-                      "h-8 px-4 flex items-center justify-center rounded-[2px] transition-all duration-300",
-                      "bg-muted/50",
-                      "group-hover:bg-muted"
-                    )}
-                  >
-                    <div
-                      className={cn(
-                        "transition-all duration-300",
-                        logoSize.className,
-                        "opacity-70 group-hover:opacity-100",
-                        "[background-color:var(--foreground)]"
-                      )}
-                      style={getMaskStyle(logo.src)}
-                    />
-                    <Image
-                      src={logo.src}
-                      alt={`${logo.name} logo`}
-                      width={logoSize.width}
-                      height={logoSize.height}
-                      className="sr-only"
-                    />
-                  </div>
-                </Link>
-              )
-            })}
-          </div>
+          <span>TRANSACTIONS: <span className="!text-foreground font-medium">+100,000</span></span>
+          <span>VOLUME: <span className="!text-foreground font-medium">+$30,000</span></span>
         </motion.div>
 
         {/* Desktop Layout - Left Column */}
         <div className="hidden lg:flex lg:flex-col lg:justify-between lg:gap-24 lg:order-1 lg:col-span-1 lg:h-full">
-          {/* Stats */}
+          {/* Main Content - Top Aligned */}
           <motion.div
-            className="flex flex-wrap gap-3"
-            initial="hidden"
-            animate={isMounted ? "visible" : "hidden"}
-            variants={fadeUp}
-          >
-            <HighlighterText>
-              TRANSACTIONS: <span className="text-foreground">+ 100,000</span>
-            </HighlighterText>
-            <HighlighterText>
-              VOLUME: <span className="text-foreground">+ $30,000</span>
-            </HighlighterText>
-          </motion.div>
-
-          {/* Main Content */}
-          <motion.div
-            className="flex-1 flex flex-col justify-center space-y-3 max-w-lg"
+            className="flex flex-col space-y-3 max-w-lg"
             initial="hidden"
             animate={isMounted ? "visible" : "hidden"}
             variants={fadeUp}
@@ -237,7 +241,7 @@ export default function Hero3D({
             </p>
 
             {/* CTAs */}
-            <div className="flex flex-wrap gap-4 pt-2">
+            <div className="flex flex-wrap gap-4 pt-6">
               <Link href="/servers" className="flex-1 lg:flex-none">
                 <Button variant="customTallPrimary" size="tall" className="w-full min-w-[220px]">
                   BROWSE SERVERS
@@ -251,59 +255,15 @@ export default function Hero3D({
             </div>
           </motion.div>
 
-          {/* Supported By Section */}
+          {/* Stats - Bottom Aligned */}
           <motion.div
-            className="space-y-4"
+            className="flex flex-wrap gap-3 text-muted-foreground font-mono text-sm tracking-wider uppercase"
             initial="hidden"
             animate={isMounted ? "visible" : "hidden"}
             variants={fadeUp}
           >
-            <HighlighterText>SUPPORTED BY</HighlighterText>
-            <div className="flex flex-wrap gap-3">
-              {SUPPORTED_BY_LOGOS.map((logo) => (
-                <Link
-                  key={logo.name}
-                  href={logo.href}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="group"
-                >
-                  <div
-                    className={cn(
-                      "h-8 px-4 flex items-center justify-center rounded-[2px] transition-all duration-300",
-                      "bg-muted/50",
-                      "group-hover:bg-muted"
-                    )}
-                  >
-                    <div
-                      className={cn(
-                        "transition-all duration-300",
-                        logo.name === "coinbase" ? "h-7 w-[70px]" : logo.name === "polygon" ? "h-8 w-[80px]" : logo.name === "vlayer" ? "h-6 w-[60px]" : logo.name === "ethglobal" ? "h-5 w-[80px]" : "h-12 w-[160px]",
-                        "opacity-70 group-hover:opacity-100",
-                        "[background-color:var(--foreground)]"
-                      )}
-                      style={{
-                        maskImage: `url(${logo.src})`,
-                        maskSize: "contain",
-                        maskRepeat: "no-repeat",
-                        maskPosition: "center",
-                        WebkitMaskImage: `url(${logo.src})`,
-                        WebkitMaskSize: "contain",
-                        WebkitMaskRepeat: "no-repeat",
-                        WebkitMaskPosition: "center"
-                      }}
-                    />
-                    <Image
-                      src={logo.src}
-                      alt={`${logo.name} logo`}
-                      width={logo.name === "coinbase" ? 35 : logo.name === "polygon" ? 45 : logo.name === "vlayer" ? 40 : logo.name === "ethglobal" ? 40 : 80}
-                      height={logo.name === "coinbase" ? 14 : logo.name === "polygon" ? 18 : logo.name === "vlayer" ? 16 : logo.name === "ethglobal" ? 10 : 32}
-                      className="sr-only"
-                    />
-                  </div>
-                </Link>
-              ))}
-            </div>
+            <span>TRANSACTIONS: <span className="text-foreground font-medium">+100,000</span></span>
+            <span>VOLUME: <span className="text-foreground font-medium">+$30,000</span></span>
           </motion.div>
         </div>
 

From a028b0a66fa824a4d94c387e497da62ef512d764 Mon Sep 17 00:00:00 2001
From: Marcelo Kunze <marcelokunze220@gmail.com>
Date: Thu, 4 Dec 2025 16:55:37 -0300
Subject: [PATCH 5/7] Update button components with animation support and
 adjust MCPBrowser layout

- Added animated prop to Button component for enhanced user interaction.
- Updated button instances in Hero3D to utilize the new animated feature for improved visual feedback.
- Increased margin in MCPBrowser section for better spacing and layout consistency.
---
 apps/app/src/app/page.tsx                     |  2 +-
 apps/app/src/components/custom-ui/hero-3d.tsx |  8 ++--
 apps/app/src/components/ui/button.tsx         | 45 ++++++++++++++++++-
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/apps/app/src/app/page.tsx b/apps/app/src/app/page.tsx
index 83719c4..8d3fd2f 100644
--- a/apps/app/src/app/page.tsx
+++ b/apps/app/src/app/page.tsx
@@ -165,7 +165,7 @@ export default function MCPBrowser() {
           <GithubInfo />
         </section>
 
-        <section className="mb-2">
+        <section className="mb-20">
           <div className="max-w-6xl px-4 md:px-6 mx-auto text-center space-y-6">
             <h2 className="text-3xl sm:text-4xl lg:text-5xl font-medium font-host text-foreground leading-tight">
               Make your AIs more capable.
diff --git a/apps/app/src/components/custom-ui/hero-3d.tsx b/apps/app/src/components/custom-ui/hero-3d.tsx
index be037af..6925319 100644
--- a/apps/app/src/components/custom-ui/hero-3d.tsx
+++ b/apps/app/src/components/custom-ui/hero-3d.tsx
@@ -198,12 +198,12 @@ export default function Hero3D({
           variants={fadeUp}
         >
           <Link href="/servers" className="w-full">
-            <Button variant="customTallPrimary" size="tall" className="w-full px-3 lg:px-6">
+            <Button variant="customTallPrimary" size="tall" animated className="w-full px-3 lg:px-6">
               BROWSE SERVERS
             </Button>
           </Link>
           <Link href="/register" className="w-full">
-            <Button variant="customTallSecondary" size="tall" className="w-full px-3 lg:px-6">
+            <Button variant="customTallSecondary" size="tall" animated className="w-full px-3 lg:px-6">
               MONETIZE SERVERS
             </Button>
           </Link>
@@ -243,12 +243,12 @@ export default function Hero3D({
             {/* CTAs */}
             <div className="flex flex-wrap gap-4 pt-6">
               <Link href="/servers" className="flex-1 lg:flex-none">
-                <Button variant="customTallPrimary" size="tall" className="w-full min-w-[220px]">
+                <Button variant="customTallPrimary" size="tall" animated className="w-full min-w-[220px]">
                   BROWSE SERVERS
                 </Button>
               </Link>
               <Link href="/register" className="flex-1 lg:flex-none">
-                <Button variant="customTallSecondary" size="tall" className="w-full min-w-[220px]">
+                <Button variant="customTallSecondary" size="tall" animated className="w-full min-w-[220px]">
                   MONETIZE SERVERS
                 </Button>
               </Link>
diff --git a/apps/app/src/components/ui/button.tsx b/apps/app/src/components/ui/button.tsx
index 3f4008c..d227cd7 100644
--- a/apps/app/src/components/ui/button.tsx
+++ b/apps/app/src/components/ui/button.tsx
@@ -1,6 +1,7 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
+import { ChevronRight } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -56,19 +57,59 @@ function Button({
   variant,
   size,
   asChild = false,
+  animated = false,
+  children,
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean
+    animated?: boolean
   }) {
   const Comp = asChild ? Slot : "button"
 
+  const buttonClasses = cn(
+    buttonVariants({ variant, size }),
+    animated && "relative overflow-hidden group",
+    className
+  )
+
+  if (animated && !asChild) {
+    return (
+      <Comp
+        data-slot="button"
+        className={buttonClasses}
+        {...props}
+      >
+        <span className="relative inline-flex items-center transition-transform duration-300 ease-out group-hover:-translate-x-1">
+          {children}
+          <ChevronRight className="absolute left-full ml-2 h-4 w-4 shrink-0 opacity-0 -translate-x-2 transition-all duration-300 ease-out group-hover:opacity-100 group-hover:translate-x-0" />
+        </span>
+      </Comp>
+    )
+  }
+  
+  if (animated && asChild) {
+    // When asChild is true, we can't add the icon, so just add the group class
+    // The parent component should handle the animation
+    return (
+      <Comp
+        data-slot="button"
+        className={buttonClasses}
+        {...props}
+      >
+        {children}
+      </Comp>
+    )
+  }
+
   return (
     <Comp
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
+      className={buttonClasses}
       {...props}
-    />
+    >
+      {children}
+    </Comp>
   )
 }
 

From d57a676af5153803b903938d4661f48f18d28046 Mon Sep 17 00:00:00 2001
From: Marcelo Kunze <marcelokunze220@gmail.com>
Date: Thu, 4 Dec 2025 17:24:15 -0300
Subject: [PATCH 6/7] Refactor McpExampleCard to enhance tool display with
 tooltips and improved layout

- Integrated Tooltip component to provide additional information for tools, enhancing user experience.
- Adjusted layout to include an info icon next to tool names, improving clarity and accessibility.
- Streamlined button functionality and styling for better visual consistency across devices.
---
 .../components/custom-ui/mcp-example-card.tsx | 132 ++++++++++--------
 1 file changed, 73 insertions(+), 59 deletions(-)

diff --git a/apps/app/src/components/custom-ui/mcp-example-card.tsx b/apps/app/src/components/custom-ui/mcp-example-card.tsx
index 7396bd3..394fdc7 100644
--- a/apps/app/src/components/custom-ui/mcp-example-card.tsx
+++ b/apps/app/src/components/custom-ui/mcp-example-card.tsx
@@ -6,12 +6,13 @@ import { cn } from "@/lib/utils"
 import HighlighterText from "./highlighter-text"
 import { Button } from "@/components/ui/button"
 import Link from "next/link"
-import { PlugZap } from "lucide-react"
+import { PlugZap, Info } from "lucide-react"
 import { ToolExecutionModal, type ToolFromMcpServerWithStats } from "./tool-execution-modal"
 import { mcpDataApi, urlUtils } from "@/lib/client/utils"
 import { Spinner } from "@/components/ui/spinner"
 import Image from "next/image"
 import { toast } from "sonner"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 
 interface McpExampleCardProps extends React.HTMLAttributes<HTMLDivElement> {
   className?: string
@@ -157,9 +158,9 @@ export default function McpExampleCard({
               {/* Description - hidden on mobile, shown next to title on desktop */}
               <p className="hidden sm:block text-sm sm:text-base text-muted-foreground">
                 <span className="text-foreground">Regular subscription</span>{" "}
-                <HighlighterText variant="red" className="!text-sm">$200 /month</HighlighterText>{" "}
+                <HighlighterText variant="red">$200 /month</HighlighterText>{" "}
                 <span className="text-foreground">via MCPay</span>{" "}
-                <HighlighterText variant="green" className="!text-sm">$0.05 /tool</HighlighterText>
+                <HighlighterText variant="green">$0.05 /tool</HighlighterText>
               </p>
             </div>
           </div>
@@ -178,43 +179,54 @@ export default function McpExampleCard({
         </div>
 
         {/* Tools List - First 5 tools */}
-        <div className="space-y-3">
-          {loading ? (
-            <div className="text-center py-8 text-muted-foreground">Loading tools...</div>
-          ) : displayTools.length === 0 ? (
-            <div className="text-center py-8 text-muted-foreground">No tools available</div>
-          ) : (
-            displayTools.map((tool) => (
-            <div
-              key={tool.id}
-              className="flex items-center justify-between gap-4 p-4 pr-6 md:pr-4 rounded-[2px] bg-muted-2"
-            >
-              {/* Left: Name + Description */}
-              <div className="flex-1 min-w-0">
-                <h4 className="font-mono text-sm font-medium text-foreground mb-1">{tool.name}</h4>
-                {tool.description && (
-                  <p className="text-sm text-muted-foreground">{tool.description}</p>
-                )}
-              </div>
-              
-              {/* Right: Price + RUN Button */}
-              <div className="flex items-center gap-2 shrink-0">
-                {tool.paymentHint && tool.paymentPriceUSD && (
-                  <HighlighterText variant="blue">${tool.paymentPriceUSD}</HighlighterText>
-                )}
-                <Button
-                  variant="customTallAccent"
-                  size="sm"
-                  className="h-8 rounded-[2px]"
-                  onClick={() => openToolModal(tool)}
-                >
-                  RUN
-                </Button>
+        <TooltipProvider>
+          <div className="space-y-3">
+            {loading ? (
+              <div className="text-center py-8 text-muted-foreground">Loading tools...</div>
+            ) : displayTools.length === 0 ? (
+              <div className="text-center py-8 text-muted-foreground">No tools available</div>
+            ) : (
+              displayTools.map((tool) => (
+              <div
+                key={tool.id}
+                className="flex items-center justify-between gap-4 p-4 pr-6 md:pr-4 rounded-[2px] bg-muted-2"
+              >
+                {/* Left: Name + Info Icon */}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <h4 className="font-mono text-sm font-medium text-foreground">{tool.name}</h4>
+                    {tool.description && (
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Info className="h-4 w-4 text-muted-foreground opacity-60" />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p className="max-w-xs">{tool.description}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    )}
+                  </div>
+                </div>
+                
+                {/* Right: Price + RUN Button */}
+                <div className="flex items-center gap-2 shrink-0">
+                  {tool.paymentHint && tool.paymentPriceUSD && (
+                    <HighlighterText variant="blue" className="h-8 py-0 flex items-center text-sm">${tool.paymentPriceUSD}</HighlighterText>
+                  )}
+                  <Button
+                    variant="customTallAccent"
+                    size="sm"
+                    className="h-8 rounded-[2px]"
+                    onClick={() => openToolModal(tool)}
+                  >
+                    RUN
+                  </Button>
+                </div>
               </div>
-            </div>
-            ))
-          )}
-        </div>
+              ))
+            )}
+          </div>
+        </TooltipProvider>
 
         {/* Text + Buttons Section */}
         <div className="flex flex-col lg:flex-row lg:items-center gap-6 lg:gap-12">
@@ -222,34 +234,36 @@ export default function McpExampleCard({
             <span className="text-foreground">Consume any paid MCP server with a single account.</span>{" "}
             <span className="text-muted-foreground">Pay per tool call, no subscriptions required.</span>
           </p>
-          <div className="flex flex-col lg:flex-row gap-4 lg:max-w-[50%] lg:flex-1">
+          <div className="flex flex-col lg:flex-row gap-4 lg:flex-1">
             {data?.serverId && (
               <Link 
                 href={`/servers/${data.serverId}`}
-                className="w-full lg:flex-1 block"
+                className="w-full lg:flex-1 lg:min-w-0"
               >
-                <Button variant="customTallSecondary" size="tall" className="w-full rounded-[2px]">
+                <Button variant="customTallPrimary" size="tall" className="w-full rounded-[2px]">
                   SERVER DETAILS
                 </Button>
               </Link>
             )}
-            <Button
-              variant="customTallAccentAmber"
-              size="tall"
-              className="w-full lg:flex-1 rounded-[2px]"
-              onClick={() => {
-                if (data?.origin) {
-                  const url = urlUtils.getMcpUrl(data.origin)
-                  navigator.clipboard.writeText(url)
-                  toast.success("Copied MCP endpoint to clipboard")
-                } else {
-                  toast.error("Server URL not available")
-                }
-              }}
-            >
-              <PlugZap className="size-4 mr-2" />
-              CONNECT
-            </Button>
+            <div className="w-full lg:flex-1 lg:min-w-0">
+              <Button
+                variant="customTallSecondary"
+                size="tall"
+                className="w-full rounded-[2px]"
+                onClick={() => {
+                  if (data?.origin) {
+                    const url = urlUtils.getMcpUrl(data.origin)
+                    navigator.clipboard.writeText(url)
+                    toast.success("Copied MCP endpoint to clipboard")
+                  } else {
+                    toast.error("Server URL not available")
+                  }
+                }}
+              >
+                <PlugZap className="size-4 mr-2" />
+                CONNECT
+              </Button>
+            </div>
           </div>
         </div>
       </div>

From 15c8f476003d9464d121de5084432b0375723211 Mon Sep 17 00:00:00 2001
From: Marcelo Kunze <marcelokunze220@gmail.com>
Date: Thu, 4 Dec 2025 17:30:31 -0300
Subject: [PATCH 7/7] Update MCPay metadata and display text for consistency in
 messaging

- Changed title and alt text in metadata and Open Graph settings to "MCPay: make your AIs more capable" for improved clarity and branding.
- Updated display text in the OG server route to match the new title, ensuring consistency across the application.
---
 apps/app/src/app/api/og/server/[id]/route.tsx | 2 +-
 apps/app/src/app/layout.tsx                   | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/app/src/app/api/og/server/[id]/route.tsx b/apps/app/src/app/api/og/server/[id]/route.tsx
index a34ee35..ac08570 100644
--- a/apps/app/src/app/api/og/server/[id]/route.tsx
+++ b/apps/app/src/app/api/og/server/[id]/route.tsx
@@ -116,7 +116,7 @@ export async function GET(
                     display: "block",
                   }}
                 />
-                <div style={{ fontWeight: 500, display: "block" }}>MCPay — Make AI more capable</div>
+                <div style={{ fontWeight: 500, display: "block" }}>MCPay: make your AIs more capable</div>
               </div>
               <div style={{ fontSize: 15, opacity: 0.55, paddingLeft: 22, display: "block" }}>mcpay.tech</div>
             </div>
diff --git a/apps/app/src/app/layout.tsx b/apps/app/src/app/layout.tsx
index d851798..864cb0b 100644
--- a/apps/app/src/app/layout.tsx
+++ b/apps/app/src/app/layout.tsx
@@ -28,7 +28,7 @@ const hostGrotesk = Host_Grotesk({
 });
 
 export const metadata: Metadata = {
-  title: "MCPay — Make AI more capable",
+  title: "MCPay: make your AIs more capable",
   description: "Add micropayments per tool call to your MCP servers or APIs without rewriting infrastructure. Prepare your stack for agent-to-agent payments.",
   icons: {
     icon: [
@@ -45,7 +45,7 @@ export const metadata: Metadata = {
     ],
   },
   openGraph: {
-    title: "MCPay — Make AI more capable",
+    title: "MCPay: make your AIs more capable",
     description: "Add micropayments per tool call to your MCP servers or APIs without rewriting infrastructure. Prepare your stack for agent-to-agent payments.",
     type: "website",
     url: "https://mcpay.tech",
@@ -55,13 +55,13 @@ export const metadata: Metadata = {
         url: '/mcpay-agentic-payments-og-image-14112025.png',
         width: 1200,
         height: 630,
-        alt: 'MCPay — Make AI more capable',
+        alt: 'MCPay: make your AIs more capable',
       }
     ],
   },
   twitter: {
     card: 'summary_large_image',
-    title: "MCPay — Make AI more capable",
+    title: "MCPay: make your AIs more capable",
     description: "Add micropayments per tool call to your MCP servers or APIs without rewriting infrastructure. Prepare your stack for agent-to-agent payments.",
     images: ['/mcpay-agentic-payments-og-image-14112025.png'],
     creator: '@mcpaytech',