Landing details (#25)

* Update metadata and headings to reflect new messaging for MCPay

* 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.

* 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.

* 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.

* 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.

* 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.

* 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.

Author: marcelokunze

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 your AIs more capable</div>
               </div>
               <div style={{ fontSize: 15, opacity: 0.55, paddingLeft: 22, display: "block" }}>mcpay.tech</div>
             </div>

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 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 — Payments for MCPs",
+    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 — Payments for MCPs',
+        alt: 'MCPay: make your AIs more capable',
       }
     ],
   },
   twitter: {
     card: 'summary_large_image',
-    title: "MCPay — Payments for MCPs",
+    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',

apps/app/src/app/page.tsx

@@ -5,17 +5,18 @@ 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 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')) {
@@ -125,6 +127,10 @@ export default function MCPBrowser() {
           <Hero3D />
         </section>
 
+        <section className="mb-8 md:mb-12">
+          <SupportedBySection />
+        </section>
+
         <section>
           <ConsumerInfo />
         </section>
@@ -159,17 +165,26 @@ export default function MCPBrowser() {
           <GithubInfo />
         </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}
-            />
+        <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.
+            </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>
   )
 }