New landing (#24)

* Update Hero3D and Navbar components for improved clarity and navigation

- Changed headings and descriptions in Hero3D to emphasize pay-per-use model.
- Updated button labels and links in Hero3D for better alignment with new messaging.
- Modified Navbar to reflect changes in navigation options, replacing 'REGISTER' with 'MONETIZE' and adjusting link paths accordingly.

* Reorganize sections in MCPBrowser component for improved layout

- Moved DeveloperInfo and Stats sections to a new position for better flow and visibility.
- Ensured ConsumerInfo and FAQSection remain accessible while enhancing overall structure.

* typo

* Update ConsumerInfo and DeveloperInfo components for clarity and new messaging

- Changed headings in ConsumerInfo to emphasize MCP server consumption.
- Updated DeveloperInfo heading to reflect the provision of paid endpoints.
- Added McpExampleCard to ConsumerInfo for enhanced user guidance.
- Modified Hero3D component headings to focus on payments infrastructure.

* Enhance UI components with new styles and features

- Added a green variant to highlighter text and icon components for improved visual options.
- Updated InfoCard, McpExampleCard, MinimalExplorer, StatsCard, and VisualProxy components to use a consistent rounded style.
- Modified McpExampleCard to include origin data and improved button functionality for copying server URLs.

* Refactor McpExampleCard layout and styling for improved mobile experience

- Adjusted image size and padding for better visual consistency across devices.
- Enhanced description layout for mobile, adding spacing for clarity and readability.
- Updated title gap for a more balanced appearance on different screen sizes.

* Remove example tool data from McpExampleCard component to streamline code and improve maintainability.

* Add origin URL prop to McpExampleCard for enhanced data handling

Author: marcelokunze

apps/app/public/x-logo.svg

@@ -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/app/page.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/consumer-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/developer-info.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/hero-3d.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/highlighter-text.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}