feat(web): improve footer, dots, and contact page

apps/web/src/app/contact/page.tsx

@@ -0,0 +1,58 @@
+import Link from 'next/link'
+
+import { DotsSection } from '@/components/dots-section'
+import { HeroButton } from '@/components/hero-button'
+import { PageContainer } from '@/components/page-container'
+import { Button } from '@/components/ui/button'
+import { calendarBookingUrl, emailUrl, twitterUrl } from '@/lib/config'
+
+export default function AboutPage() {
+  return (
+    <PageContainer className='gap-8'>
+      <h1 className='text-center text-balance leading-snug md:leading-none text-4xl font-semibold'>
+        Contact
+      </h1>
+
+      <section className='flex flex-col gap-4 max-w-2xl text-center'>
+        <p>
+          Agentic is currently a solo effort by{' '}
+          <Link
+            href={twitterUrl}
+            className='link'
+            target='_blank'
+            rel='noopener'
+          >
+            Travis Fischer
+          </Link>
+          . 👋
+        </p>
+
+        <p>
+          As with MCP itself, Agentic is an active work in progress, so please
+          reach out if you have any questions, feedback, or feature requests.
+        </p>
+      </section>
+
+      {/* CTA section */}
+      <DotsSection className='max-w-2xl'>
+        <div className='flex flex-row gap-8 relative p-8 z-10'>
+          <HeroButton asChild heroVariant='orange' className=''>
+            <Link href={twitterUrl} target='_blank' rel='noopener'>
+              DM me on Twitter / X
+            </Link>
+          </HeroButton>
+
+          <Button asChild variant='outline' className='h-full py-[9px]'>
+            <Link href={emailUrl}>Send me an email</Link>
+          </Button>
+
+          <Button asChild variant='outline' className='h-full py-[9px]'>
+            <Link href={calendarBookingUrl} target='_blank' rel='noopener'>
+              Book a call with me
+            </Link>
+          </Button>
+        </div>
+      </DotsSection>
+    </PageContainer>
+  )
+}

apps/web/src/app/globals.css

@@ -139,7 +139,6 @@ body {
 }
 
 a {
-  color: inherit;
   text-decoration: none;
 }
 

apps/web/src/app/publishing/page.tsx

@@ -125,7 +125,7 @@ export default function PublishingMCPsPage() {
 
       {/* CTA section */}
       <DotsSection className='mb-16'>
-        <div className='flex flex-col gap-12 z-10'>
+        <div className='flex flex-col gap-12 relative z-10'>
           <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
             Deploy Your MCP Today
           </h2>

apps/web/src/components/dots-section.tsx

@@ -9,9 +9,7 @@ export function DotsSection({
 }) {
   return (
     <section className={cn('relative', className)}>
-      <div className='absolute top-[-25%] bottom-[-25%] left-[-25%] right-[-25%] bg-[url(/dots.svg)] bg-repeat bg-center bg-size-[32px_auto] opacity-30 dark:opacity-100' />
+      <div className='absolute pointer-events-none top-[-50%] bottom-[-50%] left-[-50%] right-[-50%] bg-[url(/dots-light.png)] dark:bg-[url(/dots-dark.png)] bg-size-[1024px,256px] bg-no-repeat bg-center' />
-
-      <div className='absolute top-[-25%] bottom-[-25%] left-[-25%] right-[-25%] bg-radial from-[rgba(255,255,255,.3)] to-[rgb(255,255,255)] dark:from-[rgba(10,10,10,0)] dark:to-[rgb(10,10,10)]' />
 
       {children}
     </section>

apps/web/src/components/footer/index.tsx

@@ -10,9 +10,9 @@ import { DynamicFooter } from './dynamic'
 export function Footer() {
   return (
     <footer className='w-full pt-12 pb-4 border-t flex flex-col items-center'>
-      <div className='container px-4 md:px-6 max-w-1200px'>
+      <div className='container px-4 sm:px-6 max-w-1200px'>
-        <div className='flex flex-col md:grid md:grid-cols-4 gap-8'>
+        <div className='flex flex-col sm:grid sm:grid-cols-2 md:grid-cols-4 gap-8'>
-          <div className='flex flex-col md:items-center'>
+          <div className='flex flex-col sm:items-center'>
             <div className='space-y-4'>
               <h3 className='text-lg font-semibold'>Platform</h3>
 
@@ -40,7 +40,7 @@ export function Footer() {
             </div>
           </div>
 
-          <div className='flex flex-col md:items-center'>
+          <div className='flex flex-col sm:items-center'>
             <div className='space-y-4'>
               <h3 className='text-lg font-semibold'>Resources</h3>
 
@@ -54,9 +54,9 @@ export function Footer() {
                 <div>
                   <Link
                     href='https://docs.agentic.so/publishing'
-                    className='link inline-block'
+                    className='link'
                   >
-                    Publish your own MCP
+                    Publishing Docs
                   </Link>
                 </div>
 
@@ -69,6 +69,15 @@ export function Footer() {
                   </Link>
                 </div>
 
+                <div>
+                  <Link
+                    href='https://docs.agentic.so/publishing'
+                    className='link'
+                  >
+                    Agentic MCP Gateway
+                  </Link>
+                </div>
+
                 <div>
                   <Link
                     href='https://docs.agentic.so/marketplace/ts-sdks/openai-chat'
@@ -126,7 +135,7 @@ export function Footer() {
             </div>
           </div>
 
-          <div className='flex flex-col md:items-center'>
+          <div className='flex flex-col sm:items-center'>
             <div className='space-y-4'>
               <h3 className='text-lg font-semibold'>Company</h3>
 
@@ -158,7 +167,7 @@ export function Footer() {
             </div>
           </div>
 
-          <div className='flex flex-col md:items-center gap-4'>
+          <div className='flex flex-col sm:items-center gap-4'>
             <div className='space-y-4'>
               <h3 className='text-lg font-semibold'>Social</h3>
 

apps/web/src/components/hero-button/styles.module.css

@@ -24,6 +24,8 @@
 
 .heroButtonBg {
   position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   background-image: linear-gradient(

apps/web/src/components/ui/button.tsx

@@ -14,7 +14,7 @@ const buttonVariants = cva(
         destructive:
           'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-background dark:border-input dark:hover:bg-accent',
         secondary:
           'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
         ghost:

apps/web/src/lib/config.ts

@@ -19,6 +19,7 @@ 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'
 export const discordUrl = 'https://discord.agentic.so'
+export const emailUrl = 'mailto:travis@agentic.so'
 
 export const keywords = [
   'agentic',

docs/contact.mdx

@@ -2,7 +2,7 @@
 title: Contact
 ---
 
-Agentic's currently a solo effort by [Travis Fischer](https://x.com/transitive_bs). 👋
+Agentic is currently a solo effort by [Travis Fischer](https://x.com/transitive_bs). 👋
 
 As with MCP itself, Agentic is an active work in progress, so please reach out if you have any questions, feedback, or feature requests.
 

docs/docs.json

@@ -23,7 +23,7 @@
     "links": [
       {
         "label": "Contact",
-        "href": "https://docs.agentic.so/contact",
+        "href": "https://agentic.so/contact",
         "icon": "envelope"
       }
     ],
@@ -116,7 +116,7 @@
         },
         {
           "anchor": "Contact",
-          "href": "https://docs.agentic.so/contact",
+          "href": "https://agentic.so/contact",
           "icon": "envelope"
         },
         {

docs/inject.js

@@ -5,14 +5,13 @@ const isSafari =
 if (!isServer) {
   // Workaround for nav links not being able to point to relative paths
   for (const a of document.querySelectorAll(
-    'a[href="https://docs.agentic.so/contact"]'
+    'a[href="https://agentic.so/contact"]'
   )) {
     a.removeAttribute('target')
-    a.setAttribute('href', '/contact')
   }
 
   // document
-  //   .getElementById('https://docs.agentic.so/contact')
+  //   .getElementById('https://agentic.so/contact')
   //   .querySelector('.lucide-arrow-up-right')
   //   .classList.add('hidden')
 }

pnpm-lock.yaml

@@ -100,7 +100,7 @@ catalogs:
       specifier: ^2.1.7
       version: 2.1.7
     '@radix-ui/react-slot':
-      specifier: ^1.2.3
+      specifier: 1.2.3
       version: 1.2.3
     '@radix-ui/react-tabs':
       specifier: ^1.1.12

pnpm-workspace.yaml

@@ -42,7 +42,7 @@ catalog:
   '@pmndrs/assets': ^1.7.0
   '@radix-ui/react-dropdown-menu': ^2.1.15
   '@radix-ui/react-label': ^2.1.7
-  '@radix-ui/react-slot': ^1.2.3
+  '@radix-ui/react-slot': 1.2.3
   '@radix-ui/react-tabs': ^1.1.12
   '@radix-ui/react-tooltip': ^1.2.7
   '@react-email/components': ^0.1.1

todo.md

@@ -36,6 +36,8 @@
 - add ts sdk examples to e2e tests
 - consider allowing deployments to specify their proxy secret instead of a single, per-project proxy secret
 - fix weird git state and github actions marked as failing
+- fix marketing dark background
+- 404 page
 
 ## TODO: Post-MVP