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

2025-06-30 03:13:32 -05:00 · 2025-06-30 03:13:32 -05:00 · 4b83bdc1d9
commit 4b83bdc1d9
--- a/apps/web/public/dots-dark.png
+++ b/apps/web/public/dots-dark.png
--- a/apps/web/public/dots-light.png
+++ b/apps/web/public/dots-light.png
--- a/apps/web/src/app/contact/page.tsx
+++ b/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>
+  )
+}
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@ -139,7 +139,6 @@ body {
 }

 a {
-  color: inherit;
  text-decoration: none;
 }

--- a/apps/web/src/app/publishing/page.tsx
+++ b/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>
--- a/apps/web/src/components/dots-section.tsx
+++ b/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 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)]' />
+      <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' />

      {children}
    </section>
--- a/apps/web/src/components/footer/index.tsx
+++ b/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='flex flex-col md:grid md:grid-cols-4 gap-8'>
-          <div className='flex flex-col md:items-center'>
+      <div className='container px-4 sm:px-6 max-w-1200px'>
+        <div className='flex flex-col sm:grid sm:grid-cols-2 md:grid-cols-4 gap-8'>
+          <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>

--- a/apps/web/src/components/hero-button/styles.module.css
+++ b/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(
--- a/apps/web/src/components/ui/button.tsx
+++ b/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:
--- a/apps/web/src/lib/config.ts
+++ b/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',
--- a/docs/contact.mdx
+++ b/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.

--- a/docs/docs.json
+++ b/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"
        },
        {
--- a/docs/inject.js
+++ b/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')
 }
--- a/pnpm-lock.yaml
+++ b/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
--- a/pnpm-workspace.yaml
+++ b/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
--- a/todo.md
+++ b/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