New landing

apps/app/src/app/page.tsx

@@ -125,14 +125,6 @@ export default function MCPBrowser() {
           <Hero3D />
         </section>
 
-        <section>
-          <DeveloperInfo />
-        </section>
-
-        <section className="mb-40">
-          <Stats />
-        </section>
-
         <section>
           <ConsumerInfo />
         </section>
@@ -151,6 +143,14 @@ export default function MCPBrowser() {
           </div>
         </section>
 
+        <section>
+          <DeveloperInfo />
+        </section>
+
+        <section className="mb-40">
+          <Stats />
+        </section>
+
         <section className="mb-20">
           <FAQSection />
         </section>

apps/app/src/components/custom-ui/consumer-info.tsx

@@ -5,6 +5,7 @@ import { cn } from "@/lib/utils"
 import HighlighterText from "./highlighter-text"
 import InfoCard from "./info-card"
 import { ChartLine, DoorOpen, PiggyBank } from "lucide-react"
+import McpExampleCard from "./mcp-example-card"
 
 interface ConsumerInfoProps extends React.HTMLAttributes<HTMLElement> {
   className?: string
@@ -26,14 +27,17 @@ export default function ConsumerInfo({
         {/* Header */}
         <div className="flex flex-col gap-4">
           <div className="inline-flex">
-            <HighlighterText>FOR ANY HUMAN</HighlighterText>
+            <HighlighterText>CONSUME MCP SERVERS</HighlighterText>
           </div>
-          <h2 className="text-xl sm:text-2xl lg:text-3xl font-bold font-host text-foreground leading-tight max-w-3xl">
-            Let your agents transact.{" "}
-            <span className="font-normal text-muted-foreground">Fund your account with FIAT and use any paid MCP.</span>
+          <h2 className="text-xl sm:text-2xl lg:text-3xl font-bold font-host text-foreground leading-tight max-w-4xl">
+            Pay cents per tool call.{" "}
+            <span className="font-normal text-muted-foreground">Instead of expensive subscriptions. Consume any paid MCP with a single account.</span>
           </h2>
         </div>
 
+        {/* MCP Example Card */}
+        <McpExampleCard serverId="d534ddca-b113-4807-9f9f-e28f74f2cc49" />
+
         {/* Info Cards Grid */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           <InfoCard

apps/app/src/components/custom-ui/developer-info.tsx

@@ -27,7 +27,7 @@ export default function DeveloperInfo({
         {/* Header */}
         <div className="flex flex-col gap-4">
           <div className="inline-flex">
-            <HighlighterText>FOR BUSINESSES & DEVELOPERS</HighlighterText>
+            <HighlighterText>PROVIDE PAID ENDPOINTS</HighlighterText>
           </div>
           <h2 className="text-xl sm:text-2xl lg:text-3xl font-bold font-host text-foreground leading-tight max-w-3xl">
             The AI Gateway for your app.{" "}

apps/app/src/components/custom-ui/hero-3d.tsx

@@ -123,7 +123,8 @@ export default function Hero3D({
             Payments infrastructure for the agent economy
           </h1>
           <p className="text-sm sm:text-lg text-foreground/80 leading-relaxed max-w-lg">
-            In one minute, add our open-source proxy to your APIs or MCPs and get discovered and paid by autonomous agents.
+            Single connection to use paid MCP tools across any client.<br />
+            Pay-per-use instead of expensive subscriptions.
           </p>
         </motion.div>
 
@@ -139,14 +140,14 @@ export default function Hero3D({
           animate={isMounted ? "visible" : "hidden"}
           variants={fadeUp}
         >
-          <Link href="/register" className="flex-1 min-w-0">
+          <Link href="/servers" className="flex-1 min-w-0">
             <Button variant="customTallPrimary" size="tall" className="w-full px-3 lg:px-6">
-              MONETIZE SERVERS
+              BROWSE SERVERS
             </Button>
           </Link>
-          <Link href="https://docs.mcpay.tech" target="_blank" rel="noopener noreferrer" className="flex-1 min-w-0">
+          <Link href="/register" className="flex-1 min-w-0">
             <Button variant="customTallSecondary" size="tall" className="w-full px-3 lg:px-6">
-              DOCUMENTATION
+              MONETIZE SERVERS
             </Button>
           </Link>
         </motion.div>
@@ -231,19 +232,20 @@ export default function Hero3D({
 
             {/* Subheading */}
             <p className="text-base sm:text-lg text-foreground/80 leading-relaxed">
-              In one minute, add our open-source proxy to your APIs or MCPs and get discovered and paid by autonomous agents.
+              Single connection to use paid MCP tools across any client.<br />
+              Pay-per-use instead of expensive subscriptions.
             </p>
 
             {/* CTAs */}
             <div className="flex flex-wrap gap-4 pt-2">
-              <Link href="/register" className="flex-1 lg:flex-none">
+              <Link href="/servers" className="flex-1 lg:flex-none">
                 <Button variant="customTallPrimary" size="tall" className="w-full min-w-[220px]">
-                  MONETIZE SERVERS
+                  BROWSE SERVERS
                 </Button>
               </Link>
-              <Link href="https://docs.mcpay.tech" target="_blank" rel="noopener noreferrer" className="flex-1 lg:flex-none">
+              <Link href="/register" className="flex-1 lg:flex-none">
                 <Button variant="customTallSecondary" size="tall" className="w-full min-w-[220px]">
-                  DOCUMENTATION
+                  MONETIZE SERVERS
                 </Button>
               </Link>
             </div>

apps/app/src/components/custom-ui/highlighter-text.tsx

@@ -11,6 +11,8 @@ const highlighterTextVariants = cva(
         default: "bg-muted text-muted-foreground",
         blue: "text-blue-700 bg-blue-500/10 dark:text-blue-200 dark:bg-blue-800/50",
         amber: "text-amber-700 bg-amber-500/10 dark:text-amber-200 dark:bg-amber-800/50",
+        red: "text-red-700 bg-red-500/10 dark:text-red-200 dark:bg-red-800/50",
+        green: "text-teal-700 bg-teal-500/10 dark:text-teal-200 dark:bg-teal-800/50",
       },
     },
     defaultVariants: {
@@ -27,6 +29,8 @@ const highlighterIconVariants = cva(
         default: "bg-muted text-muted-foreground",
         blue: "text-blue-700 bg-blue-500/10 dark:text-blue-200 dark:bg-blue-800/50",
         amber: "text-amber-700 bg-amber-500/10 dark:text-amber-200 dark:bg-amber-800/50",
+        red: "text-red-700 bg-red-500/10 dark:text-red-200 dark:bg-red-800/50",
+        green: "text-teal-700 bg-teal-500/10 dark:text-teal-200 dark:bg-teal-800/50",
       },
     },
     defaultVariants: {

apps/app/src/components/custom-ui/info-card.tsx

@@ -25,7 +25,7 @@ export default function InfoCard({
   return (
     <div
       className={cn(
-        "flex flex-col gap-8 p-6 rounded-lg bg-card",
+        "flex flex-col gap-8 p-6 rounded-[2px] bg-card",
         className
       )}
       {...props}