feat: webapp about page and minor updates

apps/api/src/db/schema/project.ts

@@ -264,6 +264,13 @@ export const projectSelectSchema = createSelectSchema(projects, {
     // .openapi('Deployment', { type: 'object' })
   })
   .strip()
+  // TODO
+  // .refine((project) => ({
+  //   ...project,
+  //   gatewayBaseUrl: `${env.AGENTIC_GATEWAY_BASE_URL}/${project.identifier}`,
+  //   gatewayMcpUrl: `${env.AGENTIC_GATEWAY_BASE_URL}/${project.identifier}/mcp`,
+  //   webBaseUrl: `${env.AGENTIC_WEB_BASE_URL}/marketplace/projects/${project.identifier}`
+  // }))
   .describe(
     `A Project represents a single Agentic API product. It is comprised of a series of immutable Deployments, each of which contains pricing data, origin API config, OpenAPI or MCP specs, tool definitions, and various metadata.
 

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

@@ -1,3 +1,7 @@
+import Link from 'next/link'
+
+import { SupplySideCTA } from '@/components/supply-side-cta'
+import { githubUrl, twitterUrl } from '@/lib/config'
 import { cn } from '@/lib/utils'
 
 import styles from './styles.module.css'
@@ -5,79 +9,181 @@ import styles from './styles.module.css'
 export default function AboutPage() {
   return (
     <>
+      <h1 className='text-center text-balance leading-snug md:leading-none text-4xl font-semibold'>
+        About
+      </h1>
+
       <section className={cn('prose dark:prose-invert', styles.markdown)}>
-        <h1>About</h1>
+        <h2>Setting the stage</h2>
 
-        <h2>Our Mission</h2>
         <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+          it's 2025. LLMs are still scaling. AI agents are just starting to take
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          off. MCP is exploding. the singularity looms. shoggoth looks back on
-          <b>Ut enim ad minim veniam</b>, quis nostrud exercitation ullamco
+          us from the near future and gives a sly smile that doesn't quite reach
-          laboris nisi ut aliquip ex ea commodo consequat.
+          His inhuman eyes.
         </p>
 
-        <h2>Our Story</h2>
         <p>
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          in this increasingly AI-native world, what's the best way for "normal"
-          dolore eu fugiat nulla pariatur.
+          software engineers like us to stay relevant and provide value for both
-          <em>Excepteur sint occaecat cupidatat non proident</em>, sunt in culpa
+          our families as well as our future AI edgelords?
-          qui officia deserunt mollit anim id est laborum.
         </p>
 
-        <h2>Our Values</h2>
         <p>
-          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+          well, i don't know about you, but contributing to foundation models,
-          accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
+          AI alignment, and AGI research all seem incredibly sexy but are also a
-          ab illo inventore veritatis et quasi architecto beatae vitae dicta
+          lil outside my areas of expertise.
-          sunt explicabo.
         </p>
 
-        <h2>Our Team</h2>
         <p>
-          Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
+          that's why agentic is focused solely on building value at the LLM tool
-          fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
+          calling layer. MCPs are a great example here.
-          sequi nesciunt.
         </p>
 
-        <h2>Our Technology</h2>
         <p>
-          At vero eos et accusamus et iusto odio dignissimos ducimus qui
+          there's a lot that will change in AI over the next decade, but one
-          blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
+          thing i believe strongly is that no matter how much the underlying AI
-          et quas molestias <b>excepturi sint occaecati</b> cupiditate non
+          systems change,{' '}
-          provident.
+          <span className='font-semibold'>
+            providing access to high quality tools that are specifically
+            designed and optimized for agents will become increasingly important
+            over time
+          </span>
+          .
         </p>
 
-        <h2>Our Impact</h2>
         <p>
-          Similique sunt in culpa qui officia deserunt mollitia animi, id est
+          we call this <span className='font-semibold'>Agentic UX</span>, and
-          laborum et dolorum fuga.
+          it's at the heart of Agentic's mission.
-          <em>Et harum quidem rerum facilis est et expedita distinctio</em>. Nam
-          libero tempore, cum soluta nobis est eligendi optio.
         </p>
 
-        <h2>Our Future</h2>
+        <h2>Mission</h2>
-        <p>
+        <p className='font-semibold italic'>
-          Temporibus autem quibusdam et aut officiis debitis aut rerum
+          our mission is to build the world's de facto standard library of tools
-          necessitatibus saepe eveniet ut et voluptates repudiandae sint et
+          for AI agents.
-          molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente
-          delectus.
         </p>
 
-        <h2>Our Community</h2>
+        {/* <h2>What is Agentic UX?</h2>
         <p>
-          Ut aut reiciendis voluptatibus maiores alias consequatur aut
+          Agentic User Experience measures how optimized a resource is for
-          perferendis doloribus asperiores repellat. Sed ut perspiciatis unde
+          consumption by LLM-based apps and more autonomous AI agents.
-          omnis iste natus error sit voluptatem accusantium doloremque
-          laudantium.
         </p>
 
-        <h2>Our Commitment</h2>
         <p>
-          Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
+          `llms.txt` is a great example of a readonly format optimized for
-          quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+          Agentic UX.
-          voluptas nulla pariatur?{' '}
-          <b>Excepteur sint occaecat cupidatat non proident</b>.
         </p>
+
+        <p>
+          Anthropic's Model Context Protocol (MCP) and Google's Agent to Agent
+          Protocol (A2A) are both examples of protocols purpose-built for
+          Agentic UX. There are dozens of other aspirational protocols with
+          similar aims. [xkcd standards]
+        </p> */}
+
+        <h2>Team</h2>
+        <p>
+          Agentic was founded in 2023 by{' '}
+          <Link
+            href={twitterUrl}
+            target='_blank'
+            rel='noopener'
+            className='link'
+          >
+            Travis Fischer
+          </Link>{' '}
+          (hey hey 👋) . We're backed by{' '}
+          <Link
+            href='https://hf0.com'
+            target='_blank'
+            rel='noopener'
+            className='link'
+          >
+            HF0
+          </Link>
+          ,{' '}
+          <Link
+            href='https://hf0.com'
+            target='_blank'
+            rel='noopener'
+            className='link'
+          >
+            Backend Capital
+          </Link>
+          , and
+          <Link
+            href='https://hf0.com'
+            target='_blank'
+            rel='noopener'
+            className='link'
+          >
+            Transpose Capital
+          </Link>
+          .
+        </p>
+
+        <p>
+          I'm currently running Agentic as a solo founder while traveling around
+          the world, but i'm actively looking to hire a few remote engineers and
+          would consider bringing on a co-founder if they're a really strong
+          fit.
+        </p>
+
+        <p>
+          If you're an expert TypeScript dev who vibes with our mission and
+          loves open source – and if you have an interest in AI engineering, AI
+          agents, API gateways, OpenAPI, MCP, AI codegen, etc, feel free to{' '}
+          <Link
+            href={twitterUrl}
+            target='_blank'
+            rel='noopener'
+            className='link'
+          >
+            DM me on twitter
+          </Link>
+          , and please include a few links to your GitHub + related projects.
+        </p>
+
+        <p className='text-sm italic'>
+          (this page was written with love and an intentional lack of LLM
+          assistance on a very long and sleepy international flight 💕)
+        </p>
+
+        <h2>Tech stack</h2>
+        <ul>
+          <li>TypeScript</li>
+          <li>Node.js</li>
+          <li>Postgres</li>
+          <li>Drizzle ORM</li>
+          <li>Hono</li>
+          <li>Stripe</li>
+          <li>Cloudflare Workers</li>
+          <li>Vercel</li>
+          <li>Sentry</li>
+          <li>Resend</li>
+          <li>Cursor</li>
+        </ul>
+
+        <p>
+          <Link
+            href={githubUrl}
+            target='_blank'
+            rel='noopener'
+            className='link'
+          >
+            Check out the source on GitHub for more details
+          </Link>
+          .
+        </p>
+      </section>
+
+      {/* CTA section */}
+      <section 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 this AI wave
+        </h2>
+
+        <SupplySideCTA variant='github-2' />
       </section>
     </>
   )

apps/web/src/app/about/styles.module.css

@@ -13,6 +13,10 @@
   max-width: 830px;
 }
 
+.markdown > :last-child {
+  margin-bottom: 0;
+}
+
 .markdown > *:first-child {
   margin-top: 0 !important;
 }

apps/web/src/app/globals.css

@@ -182,7 +182,6 @@ main section {
   display: flex;
   flex-direction: column;
   align-items: center;
-  @apply mb-16;
 }
 
 main section:last-of-type {

apps/web/src/app/page.tsx

@@ -13,8 +13,8 @@ export default function TheBestDamnLandingPageEver() {
   return (
     <>
       {/* Hero section */}
-      <section className='gap-8'>
+      <section className='gap-8 mb-16'>
-        <h1 className='text-center text-balance leading-snug md:leading-none text-4xl font-bold'>
+        <h1 className='text-center text-balance leading-snug md:leading-none text-4xl font-semibold'>
           Your API → Paid MCP, Instantly
         </h1>
 
@@ -28,7 +28,7 @@ export default function TheBestDamnLandingPageEver() {
       </section>
 
       {/* How it works section */}
-      <section className='flex flex-col gap-8'>
+      <section className='flex flex-col gap-8 mb-16'>
         <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
           How It Works
         </h2>
@@ -37,7 +37,7 @@ export default function TheBestDamnLandingPageEver() {
       </section>
 
       {/* Features section */}
-      <section className='flex flex-col gap-8'>
+      <section className='flex flex-col gap-8 mb-16'>
         <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
           Production-Ready and Extremely Flexible
         </h2>
@@ -183,7 +183,7 @@ export default function TheBestDamnLandingPageEver() {
       </section>
 
       {/* Marketplace section */}
-      {/* <section className='flex flex-col gap-8'>
+      {/* <section className='flex flex-col gap-8 mb-16'>
         <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
           MCP Marketplace
         </h2>
@@ -194,7 +194,7 @@ export default function TheBestDamnLandingPageEver() {
       </section> */}
 
       {/* Open source section */}
-      <section className='flex flex-col items-center gap-8 max-w-2xl text-center'>
+      <section className='flex flex-col items-center gap-8 max-w-2xl text-center mb-16'>
         <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
           Agentic is 100% Open Source
         </h2>
@@ -202,9 +202,8 @@ export default function TheBestDamnLandingPageEver() {
         <p className=''>
           Open source is very dear to my heart, and I couldn't be happier that
           Agentic is fully OSS. It's written in{' '}
-          <span className='font-semibold'>TypeScript</span>, stands on the
+          <span className='font-semibold'>TypeScript</span> and has a small but
-          shoulders of infra giants (Vercel, Cloudflare, Postgres), and has a
+          vibrant developer community.{' '}
-          small but vibrant developer community.{' '}
           <Link
             href={githubUrl}
             target='_blank'
@@ -220,16 +219,16 @@ export default function TheBestDamnLandingPageEver() {
             rel='noopener'
             className='link'
           >
-            ping me on Twitter
+            ping me on Twitter with questions / feedback
-          </Link>{' '}
+          </Link>
-          with questions / feedback.
+          .
         </p>
 
         <GitHubStarCounter />
       </section>
 
       {/* Social proof section */}
-      <section className='gap-8'>
+      <section className='gap-8 mb-16'>
         <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
           TODO: social proof
         </h2>
@@ -238,13 +237,11 @@ export default function TheBestDamnLandingPageEver() {
       </section>
 
       {/* CTA section */}
-      <section className='flex flex-col gap-12'>
+      <section 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 Product Today
+          Deploy Your MCP Today
         </h2>
 
-        <p>Join the AI gold rush && deploy your first MCP product today.</p>
-
         <SupplySideCTA variant='github-2' />
       </section>
     </>