Updated Servers Route (#23)

Author: marcelokunze

apps/app/public/logos/vlayer_ Signet_Black.svg

@@ -52,7 +52,7 @@ export const metadata: Metadata = {
     siteName: "MCPay",
     images: [
       {
-        url: '/mcpay-agentic-payments-og-image.png',
+        url: '/mcpay-agentic-payments-og-image-14112025.png',
         width: 1200,
         height: 630,
         alt: 'MCPay — Payments for MCPs',
@@ -63,7 +63,7 @@ export const metadata: Metadata = {
     card: 'summary_large_image',
     title: "MCPay — Payments for MCPs",
     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.png'],
+    images: ['/mcpay-agentic-payments-og-image-14112025.png'],
     creator: '@mcpaytech',
     site: '@mcpaytech',
   },

…blic/mcpay-agentic-payments-og-image.png …y-agentic-payments-og-image-14112025.pngapps/app/public/mcpay-agentic-payments-og-image.png renamed to apps/app/public/mcpay-agentic-payments-og-image-14112025.png apps/app/public/mcpay-agentic-payments-og-image.png renamed to apps/app/public/mcpay-agentic-payments-og-image-14112025.png

@@ -1,8 +1,41 @@
 import * as React from "react"
 import { LucideIcon } from "lucide-react"
+import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
-interface HighlighterTextProps extends React.HTMLAttributes<HTMLDivElement> {
+const highlighterTextVariants = cva(
+  "inline-flex items-center font-mono text-xs uppercase font-medium tracking-wide px-2 py-1 rounded-[2px]",
+  {
+    variants: {
+      variant: {
+        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",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const highlighterIconVariants = cva(
+  "flex items-center justify-center font-mono text-xs uppercase font-medium tracking-wide size-6 rounded-[2px]",
+  {
+    variants: {
+      variant: {
+        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",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+interface HighlighterTextProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof highlighterTextVariants> {
   children: React.ReactNode
   icon?: LucideIcon
 }
@@ -11,27 +44,17 @@ export default function HighlighterText({
   children,
   className,
   icon: Icon,
+  variant,
   ...props
 }: HighlighterTextProps) {
   if (Icon) {
     return (
       <div className="inline-flex items-center gap-1.5">
-        <div
-          className={cn(
-            "flex items-center justify-center font-mono text-xs uppercase font-medium tracking-wide",
-            "bg-muted text-muted-foreground",
-            "size-6 rounded-[2px]"
-          )}
-        >
+        <div className={cn(highlighterIconVariants({ variant }))}>
           <Icon className="size-4" />
         </div>
         <div
-          className={cn(
-            "inline-flex items-center font-mono text-xs uppercase font-medium tracking-wide",
-            "bg-muted text-muted-foreground",
-            "px-2 py-1 rounded-[2px]",
-            className
-          )}
+          className={cn(highlighterTextVariants({ variant }), className)}
           {...props}
         >
           {children}
@@ -42,12 +65,7 @@ export default function HighlighterText({
 
   return (
     <div
-      className={cn(
-        "inline-flex items-center font-mono text-xs uppercase font-medium tracking-wide",
-        "bg-muted text-muted-foreground",
-        "px-2 py-1 rounded-[2px]",
-        className
-      )}
+      className={cn(highlighterTextVariants({ variant }), className)}
       {...props}
     >
       {children}