😃

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

@@ -180,14 +180,12 @@ export default function AboutPage() {
       </section>
 
       {/* CTA section */}
-      <DotsSection>
-        <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'>
-            Don't miss out on the AI wave
-          </h2>
+      <DotsSection className='flex flex-col gap-12'>
+        <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
+          Don't miss out on the AI wave
+        </h2>
 
-          <SupplySideCTA variant='github-2' />
-        </div>
+        <SupplySideCTA variant='github-2' />
       </DotsSection>
     </PageContainer>
   )

apps/web/src/app/not-found.tsx

@@ -0,0 +1,48 @@
+import { ArrowLeft } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+
+import { Button } from '@/components/ui/button'
+// https://images.unsplash.com/photo-1545972154-9bb223aac798?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&fm=jpg&fit=crop&w=2048&q=80&exp=8&con=-15&sat=-75
+import NotFoundImage from '@/public/not-found.jpg'
+
+export default function NotFound() {
+  return (
+    <>
+      <section className='relative max-w-2xl isolate min-h-full flex-auto'>
+        <Image
+          alt='404 not found'
+          src={NotFoundImage.src}
+          width={NotFoundImage.width}
+          height={NotFoundImage.height}
+          blurDataURL={NotFoundImage.blurDataURL}
+          placeholder='blur'
+          priority
+          className='absolute inset-0 -z-10 size-full object-cover object-top rounded-xl'
+        />
+
+        <div className='mx-auto max-w-7xl px-6 py-32 text-center sm:py-40 lg:px-8'>
+          <p className='text-base/8 font-semibold text-white'>404</p>
+
+          <h1 className='mt-4 text-balance text-5xl font-semibold tracking-tight text-white sm:text-7xl'>
+            Page not found
+          </h1>
+
+          <p className='mt-6 text-pretty text-lg font-medium text-white/70 sm:text-xl/8'>
+            Sorry, we couldn’t find the page you’re looking for.
+          </p>
+        </div>
+      </section>
+
+      <Button asChild>
+        <Link href='/'>
+          <ArrowLeft
+            aria-hidden='true'
+            className='inline-block w-[1.2em] h-[1.2em] mr-1'
+          />
+          Back to home
+        </Link>
+      </Button>
+    </>
+  )
+}

apps/web/src/app/page.tsx

@@ -127,20 +127,18 @@ export default async function TheBestDamnLandingPageEver() {
       </section>
 
       {/* CTA section */}
-      <DotsSection className='mb-16'>
-        <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'>
-            Publish your own MCP products with Agentic
-          </h2>
+      <DotsSection className='flex flex-col gap-12 mb-16'>
+        <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
+          Publish your own MCP products with Agentic
+        </h2>
 
-          <h5 className='text-center max-w-2xl'>
-            Run one command to turn any MCP server or OpenAPI service into a
-            paid MCP product. With built-in support for every major LLM SDK and
-            MCP client.
-          </h5>
+        <h5 className='text-center max-w-2xl'>
+          Run one command to turn any MCP server or OpenAPI service into a paid
+          MCP product. With built-in support for every major LLM SDK and MCP
+          client.
+        </h5>
 
-          <SupplySideCTA variant='docs' />
-        </div>
+        <SupplySideCTA variant='docs' />
       </DotsSection>
 
       {/* Open source section */}
@@ -186,14 +184,12 @@ export default async function TheBestDamnLandingPageEver() {
       </section> */}
 
       {/* Demand-side CTA section */}
-      <DotsSection className='mb-16'>
-        <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'>
-            Level up your AI Agents with the best tools
-          </h2>
+      <DotsSection className='flex flex-col gap-12 mb-16'>
+        <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
+          Level up your AI Agents with the best tools
+        </h2>
 
-          <DemandSideCTA />
-        </div>
+        <DemandSideCTA />
       </DotsSection>
     </PageContainer>
   )

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

@@ -124,14 +124,12 @@ export default function PublishingMCPsPage() {
       </section>
 
       {/* CTA section */}
-      <DotsSection className='mb-16'>
-        <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>
+      <DotsSection className='flex flex-col gap-12 mb-16'>
+        <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
+          Deploy Your MCP Today
+        </h2>
 
-          <SupplySideCTA variant='github-2' />
-        </div>
+        <SupplySideCTA variant='github-2' />
       </DotsSection>
     </PageContainer>
   )

apps/web/src/components/demand-side-cta.tsx

@@ -5,14 +5,14 @@ import { Button } from '@/components/ui/button'
 
 export function DemandSideCTA() {
   return (
-    <div className='flex justify-center items-center gap-8 md:gap-12'>
+    <div className='flex justify-center items-center gap-4 sm:gap-8'>
       <HeroButton asChild className='h-full'>
         <Link href='/marketplace' className='font-mono'>
           gotoTools();
         </Link>
       </HeroButton>
 
-      <Button variant='outline' asChild className='h-full'>
+      <Button variant='outline' asChild className='h-full py-[9px]'>
         <Link href='https://docs.agentic.so' className='font-mono'>
           readTheDocs();
         </Link>

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

@@ -9,7 +9,7 @@ export function DotsSection({
 }) {
   return (
     <section className={cn('relative', className)}>
-      <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 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 -z-10' />
 
       {children}
     </section>

apps/web/src/components/supply-side-cta.tsx

@@ -21,7 +21,7 @@ export function SupplySideCTA({
   const ctx = useAgentic()
 
   return (
-    <div className='flex justify-center items-center gap-8 md:gap-12'>
+    <div className='flex justify-center items-center gap-4 sm:gap-8'>
       <HeroButton asChild heroVariant={heroVariant}>
         <Link
           href={

apps/web/tsconfig.json

@@ -9,6 +9,7 @@
     "rootDir": ".",
     "baseUrl": ".",
     "paths": {
+      "@/public/*": ["public/*"],
       "@/*": ["src/*"]
     }
   },

todo.md

@@ -35,7 +35,6 @@
 - 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
 - page metadata
 
 ## TODO: Post-MVP