From 8f752139b4b2a1adc6cf4b1e7994971c82d366e8 Mon Sep 17 00:00:00 2001
From: Travis Fischer <fisch0920@gmail.com>
Date: Wed, 18 Jun 2025 18:21:45 +0800
Subject: [PATCH] feat: website improvements

---
 apps/web/src/app/page.tsx                     | 15 +++---
 apps/web/src/components/active-link.tsx       |  9 +++-
 apps/web/src/components/demand-side-cta.tsx   | 19 +++++++
 apps/web/src/components/header/index.tsx      |  5 ++
 apps/web/src/components/hero-button/index.tsx | 50 ++++++++-----------
 .../components/hero-button/styles.module.css  | 17 ++-----
 apps/web/src/components/supply-side-cta.tsx   | 21 ++++++++
 apps/web/src/lib/config.ts                    |  7 +++
 8 files changed, 91 insertions(+), 52 deletions(-)
 create mode 100644 apps/web/src/components/demand-side-cta.tsx
 create mode 100644 apps/web/src/components/supply-side-cta.tsx

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 8e148a34..a763ae3d 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,19 +1,20 @@
-import { HeroButton } from '@/components/hero-button'
+import { SupplySideCTA } from '@/components/supply-side-cta'
 
 export default function IndexPage() {
   return (
     <>
-      <section>
+      <section className='gap-8'>
         <h1 className='my-0! text-center text-balance leading-snug md:leading-none text-4xl font-extrabold'>
-          MCP tools that actually work
+          Your API → Paid MCP, Instantly
         </h1>
 
-        <h5 className='my-8! text-center text-balance text-lg'>
-          Deploy any MCP server or OpenAPI service to Agentic's MCP gateway, and
-          in minutes have a production-ready, monetizable MCP product.
+        <h5 className='text-center text-lg max-w-2xl'>
+          Run one command to turn any MCP server or OpenAPI service into a paid
+          MCP product,{' '}
+          <em>with built-in distribution to over 20k AI engineers</em>.
         </h5>
 
-        <HeroButton>Get Started</HeroButton>
+        <SupplySideCTA />
       </section>
 
       <section className='flex-1'>
diff --git a/apps/web/src/components/active-link.tsx b/apps/web/src/components/active-link.tsx
index afc8ab4f..06eb6ba9 100644
--- a/apps/web/src/components/active-link.tsx
+++ b/apps/web/src/components/active-link.tsx
@@ -37,9 +37,14 @@ export const ActiveLink = React.forwardRef(function ActiveLink(
   const [disabled, setDisabled] = React.useState(false)
 
   React.useEffect(() => {
-    const linkPathname = new URL(href as string, location.href).pathname
+    const currentUrl = new URL(location.href)
+    const url = new URL(href as string, currentUrl)
+    const linkPathname = url.pathname
+    const linkOrigin = url.origin
 
-    setDisabled(compare(linkPathname, pathname))
+    setDisabled(
+      compare(linkPathname, pathname) && compare(linkOrigin, currentUrl.origin)
+    )
   }, [pathname, href, compare])
 
   const styleOverride = React.useMemo<React.CSSProperties>(
diff --git a/apps/web/src/components/demand-side-cta.tsx b/apps/web/src/components/demand-side-cta.tsx
new file mode 100644
index 00000000..d3b97663
--- /dev/null
+++ b/apps/web/src/components/demand-side-cta.tsx
@@ -0,0 +1,19 @@
+import Link from 'next/link'
+
+import { HeroButton } from '@/components/hero-button'
+import { Button } from '@/components/ui/button'
+import { docsMarketplaceUrl } from '@/lib/config'
+
+export function DemandSideCTA() {
+  return (
+    <div className='flex justify-center items-center gap-8'>
+      <HeroButton asChild className='h-full'>
+        <Link href='/marketplace'>MCP Marketplace</Link>
+      </HeroButton>
+
+      <Button variant='outline' asChild className='h-full'>
+        <Link href={docsMarketplaceUrl}>Check out the marketplace docs</Link>
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/web/src/components/header/index.tsx b/apps/web/src/components/header/index.tsx
index da3f3b17..55ebee8d 100644
--- a/apps/web/src/components/header/index.tsx
+++ b/apps/web/src/components/header/index.tsx
@@ -3,6 +3,7 @@
 import { ActiveLink } from '@/components/active-link'
 import { useAgentic } from '@/components/agentic-provider'
 import { DarkModeToggle } from '@/components/dark-mode-toggle'
+import { docsUrl } from '@/lib/config'
 
 import styles from './styles.module.css'
 
@@ -21,6 +22,10 @@ export function Header() {
             Marketplace
           </ActiveLink>
 
+          <ActiveLink href={docsUrl} className='link'>
+            Docs
+          </ActiveLink>
+
           <ActiveLink href='/about' className='link'>
             About
           </ActiveLink>
diff --git a/apps/web/src/components/hero-button/index.tsx b/apps/web/src/components/hero-button/index.tsx
index 0cd70ff7..3c81ff07 100644
--- a/apps/web/src/components/hero-button/index.tsx
+++ b/apps/web/src/components/hero-button/index.tsx
@@ -1,56 +1,46 @@
 import type * as React from 'react'
+import type { Simplify } from 'type-fest'
 import cs from 'clsx'
-import Link from 'next/link'
 
-import { Button } from '@/components/ui/button'
+import { Button, type ButtonProps } from '@/components/ui/button'
 
 import styles from './styles.module.css'
 
 export type HeroButtonVariant = 'orange' | 'blue' | 'purple'
 
+export type HeroButtonProps = Simplify<
+  {
+    heroVariant?: HeroButtonVariant
+    className?: string
+    buttonClassName?: string
+  } & ButtonProps
+>
+
 export function HeroButton({
-  variant = 'purple',
+  heroVariant = 'purple',
   className,
   buttonClassName,
-  children,
   ...buttonProps
-}: {
-  variant?: HeroButtonVariant
-  className?: string
-  buttonClassName?: string
-  children: React.ReactNode
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+}: HeroButtonProps) {
   return (
     <div className={cs(styles.heroButtonWrapper, className)}>
-      {variant === 'blue' && (
+      {heroVariant === 'blue' && (
         <span className={cs(styles.heroButtonBg, styles.heroButtonBg1)} />
       )}
 
-      {variant === 'purple' && (
+      {heroVariant === 'purple' && (
         <span className={cs(styles.heroButtonBg, styles.heroButtonBg2)} />
       )}
 
-      {variant === 'orange' && (
+      {heroVariant === 'orange' && (
         <span className={cs(styles.heroButtonBg, styles.heroButtonBg3)} />
       )}
 
-      {buttonProps.href ? (
-        <Link
-          className={cs(styles.heroButton, buttonClassName)}
-          href={buttonProps.href}
-          {...buttonProps}
-        >
-          <div className={styles.heroButtonContent}>{children}</div>
-        </Link>
-      ) : (
-        <Button
-          className={cs(styles.heroButton, buttonClassName)}
-          {...(buttonProps as any)}
-          type='button'
-        >
-          <div className={styles.heroButtonContent}>{children}</div>
-        </Button>
-      )}
+      <Button
+        className={cs(styles.heroButton, buttonClassName)}
+        type='button'
+        {...(buttonProps as any)}
+      />
     </div>
   )
 }
diff --git a/apps/web/src/components/hero-button/styles.module.css b/apps/web/src/components/hero-button/styles.module.css
index 02e8ecfa..bdafae79 100644
--- a/apps/web/src/components/hero-button/styles.module.css
+++ b/apps/web/src/components/hero-button/styles.module.css
@@ -1,6 +1,7 @@
 .heroButtonWrapper {
   position: relative;
-  z-index: 100;
+  max-width: 100%;
+  z-index: 99;
 }
 
 .heroButtonBg1 {
@@ -53,7 +54,6 @@
 }
 
 .heroButton {
-  position: relative;
   cursor: pointer;
 
   background-color: var(--background);
@@ -64,17 +64,15 @@
   transition-property: color, background-color, box-shadow;
   transition-duration: 0.15s;
   transition-timing-function: ease;
-  padding: 12px 24px;
-  line-height: 1.5em;
+  padding: 20px 24px;
   border-radius: 5px;
   max-width: 100%;
-  font-weight: 400;
-  font-size: 1rem;
   display: flex;
   justify-content: center;
   align-items: center;
   user-select: none;
   outline: none;
+  white-space: nowrap;
 
   --lighten-color: hsla(0, 0%, 100%, 0.8);
   background-image: linear-gradient(
@@ -88,13 +86,6 @@
   --lighten-color: rgba(0, 0, 0, 0.75);
 }
 
-.heroButtonContent {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  display: inline-block;
-}
-
 .heroButton:hover {
   --lighten-color: transparent;
   background-color: transparent;
diff --git a/apps/web/src/components/supply-side-cta.tsx b/apps/web/src/components/supply-side-cta.tsx
new file mode 100644
index 00000000..aff86af4
--- /dev/null
+++ b/apps/web/src/components/supply-side-cta.tsx
@@ -0,0 +1,21 @@
+import Link from 'next/link'
+
+import { HeroButton } from '@/components/hero-button'
+import { Button } from '@/components/ui/button'
+import { calendarBookingUrl, docsQuickStartUrl } from '@/lib/config'
+
+export function SupplySideCTA() {
+  return (
+    <div className='flex justify-center items-center gap-8'>
+      <HeroButton asChild className='h-full'>
+        <Link href={docsQuickStartUrl}>Get Started</Link>
+      </HeroButton>
+
+      <Button variant='outline' asChild className='h-full'>
+        <Link href={calendarBookingUrl} target='_blank' rel='noopener'>
+          Book a call with me 👋
+        </Link>
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/web/src/lib/config.ts b/apps/web/src/lib/config.ts
index 2d2dd5fe..7cdcb1a9 100644
--- a/apps/web/src/lib/config.ts
+++ b/apps/web/src/lib/config.ts
@@ -15,6 +15,13 @@ export const twitterUrl = `https://x.com/${authorTwitterUsername}`
 export const copyright = `© ${new Date().getFullYear()} Agentic. All rights reserved.`
 export const githubUrl = 'https://github.com/transitive-bullshit/agentic'
 
+// TODO: make an agentic-specific calendar for this
+export const calendarBookingUrl =
+  'https://cal.com/travis-fischer/15min?overlayCalendar=true'
+export const docsUrl = 'https://docs.agentic.so'
+export const docsQuickStartUrl = `${docsUrl}/quick-start`
+export const docsMarketplaceUrl = `${docsUrl}/marketplace`
+
 export const keywords = [
   'agentic',
   'MCP',