🍁

apps/web/src/app/layout.tsx

@@ -50,7 +50,7 @@ export default function RootLayout({
           <div className='w-full min-h-[100vh] relative flex flex-col items-center'>
             <Header />
 
-            <main className='flex-1 w-full flex flex-col items-center max-w-[1200px] gap-16 pt-16 pb-24 px-4 md:px-0 overflow-x-hidden'>
+            <main className='flex-1 w-full flex flex-col items-center max-w-[1200px] gap-16 pt-16 pb-24 px-2 overflow-x-hidden'>
               {children}
             </main>
 

apps/web/src/app/mcp-authors/page.tsx

@@ -58,7 +58,7 @@ export default function MCPAuthorsPage() {
       </section>
 
       {/* Features section */}
-      <section className='flex flex-col gap-8 mb-16'>
+      <section className='flex flex-col gap-8 md:gap-12 mb-16'>
         <h2 className='text-center text-balance leading-snug md:leading-none text-3xl font-heading'>
           Production-Ready MCP Gateway
         </h2>
@@ -73,9 +73,9 @@ export default function MCPAuthorsPage() {
         </h2>
 
         <p className=''>
-          Agentic is fully OSS. It's written in{' '}
+          Agentic is a fully OSS{' '}
-          <span className='font-semibold'>TypeScript</span> and has a small but
+          <span className='font-semibold'>TypeScript</span> project with a small
-          vibrant developer community.{' '}
+          but vibrant developer community.{' '}
           <Link
             href={githubUrl}
             target='_blank'

apps/web/src/app/page.tsx

@@ -105,9 +105,9 @@ export default async function TheBestDamnLandingPageEver() {
         </h2>
 
         <p className=''>
-          Agentic is fully OSS. It's written in{' '}
+          Agentic is a fully OSS{' '}
-          <span className='font-semibold'>TypeScript</span> and has a small but
+          <span className='font-semibold'>TypeScript</span> project with a small
-          vibrant developer community.{' '}
+          but vibrant developer community.{' '}
           <Link
             href={githubUrl}
             target='_blank'

apps/web/src/components/code-block/highlight.ts

@@ -16,7 +16,7 @@ export async function highlight({
   theme?: string
   className?: string
 }): Promise<JSX.Element> {
-  className = cn('w-full text-wrap p-4 text-sm rounded-sm', className)
+  className = cn('w-full text-wrap p-2 md:p-4 text-sm rounded-sm', className)
 
   const hast = await codeToHast(code, {
     lang,

apps/web/src/components/example-agentic-configs.tsx

@@ -49,6 +49,20 @@ export function ExampleAgenticConfigs() {
     return <LoadingIndicator className='w-full max-w-3xl' />
   }
 
+  return (
+    <div className='w-full max-w-3xl flex flex-col items-center border rounded-lg shadow-sm p-2 md:p-4'>
+      <ExampleAgenticConfigsContent config={config} setConfig={setConfig} />
+    </div>
+  )
+}
+
+function ExampleAgenticConfigsContent({
+  config,
+  setConfig
+}: {
+  config: ExampleAgenticConfig
+  setConfig: (config: ExampleAgenticConfig) => void
+}) {
   const codeSnippet = getCodeSnippetForExampleAgenticConfig(config)
 
   return (
@@ -99,8 +113,14 @@ export function ExampleAgenticConfigs() {
             <TabsContent
               key={originAdaptor}
               value={originAdaptor}
-              className='w-full'
+              className='w-full flex flex-col gap-2'
             >
+              <div className='text-sm text-gray-500'>
+                {config.format === 'typescript'
+                  ? 'agentic.config.ts'
+                  : 'agentic.config.json'}
+              </div>
+
               <CodeBlock code={codeSnippet.code} lang={codeSnippet.lang} />
             </TabsContent>
           ))}

apps/web/src/components/example-usage.tsx

@@ -90,8 +90,43 @@ export function ExampleUsage({
   //   enabled: !!ctx?.isAuthenticated
   // })
 
+  return (
+    <div className='w-full max-w-3xl flex flex-col items-center border rounded-lg shadow-sm p-2 md:p-4'>
+      <ExampleUsageContent
+        projectIdentifier={projectIdentifier}
+        prompt={prompt}
+        initialCodeBlock={initialCodeBlock}
+        isLoading={isLoading}
+        isError={isError}
+        project={project}
+        config={config}
+        setConfig={setConfig}
+      />
+    </div>
+  )
+}
+
+function ExampleUsageContent({
+  projectIdentifier,
+  prompt,
+  initialCodeBlock,
+  isLoading,
+  isError,
+  project,
+  config,
+  setConfig
+}: {
+  projectIdentifier: string
+  prompt: string
+  initialCodeBlock?: JSX.Element
+  isLoading: boolean
+  isError: boolean
+  project?: Project
+  config?: DeveloperConfig
+  setConfig: (config: DeveloperConfig) => void
+}) {
   if (isLoading || !config) {
-    return <LoadingIndicator className='w-full max-w-3xl' />
+    return <LoadingIndicator />
   }
 
   // TODO: allow to target a specific deployment
@@ -124,7 +159,7 @@ export function ExampleUsage({
           target: value as Target
         })
       }
-      className='w-full max-w-3xl'
+      className='w-full'
     >
       <TabsList>
         {targets.map((target) => (

apps/web/src/components/features.tsx

@@ -37,7 +37,7 @@ const FEATURES: Feature[] = [
     name: 'Auth',
     description: (
       <>
-        Ship to production fast with Agentic's free, built-in authentication.
+        Ship to production fast with Agentic's free, hosted authentication.
         Email & password, OAuth, GitHub, Google, Twitter, etc – if your origin
         API requires OAuth credentials, Agentic likely already supports it, and
         if not,{' '}
@@ -118,14 +118,14 @@ const FEATURES: Feature[] = [
     }
   },
   {
-    name: 'Rate-limiting',
+    name: 'Rate-Limiting',
     description: (
       <>
-        All agentic products are protected by durable rate-limiting built on top
+        Agentic durable rate-limiting is built on top of Cloudflare's global
-        of Cloudflare's global infrastructure. Customize the default
+        infrastructure. Customize the default rate-limits, change them based on
-        rate-limits, change them based on a customer's pricing plan, or create
+        a customer's pricing plan, or create custom tool-specific overrides.
-        custom tool-specific overrides. REST assured that your origin API will
+        REST assured that your origin API will be safe behind Agentic's MCP
-        be safe behind Agentic's MCP gateway.
+        gateway.
       </>
     ),
     icon: ShieldCheckIcon,
@@ -144,9 +144,8 @@ const FEATURES: Feature[] = [
         Opt-in to caching with familiar <em>cache-control</em> and{' '}
         <em>stale-while-revalidate</em> options. MCP tool calls include caching
         information in their <em>_meta</em> fields, providing parity with
-        standard HTTP headers. All caching takes place in Cloudflare's global
+        standard HTTP headers. Agentic uses Cloudflare's global edge cache for
-        edge cache, and caching will only be enabled if you choose to enable it
+        caching, which guarantees unmatched global performance.
-        for your product or individual tools.
       </>
     ),
     icon: DatabaseZapIcon,
@@ -177,12 +176,12 @@ const FEATURES: Feature[] = [
     name: 'Versioning & Instant Rollbacks',
     description: (
       <>
-        Just like Vercel, Agentic uses immutable deployments, so every time you
+        Agentic uses immutable deployments, so every time you make a change to
-        make a change to your product's config, pricing, or docs, a unique
+        your product, a unique preview deployment is created. This enables
-        preview deployment is created for that change. This enables instant
+        instant rollbacks if there are problems with a deployment. Publishing
-        rollbacks if there are problems with a deployment. Publishing uses{' '}
+        uses <span className='font-semibold'>semver</span> (semantic
-        <span className='font-semibold'>semver</span> (semantic versioning), so
+        versioning), so your customers can choose how to handle breaking
-        your customers can choose how to handle breaking changes.
+        changes.
       </>
     ),
     icon: HistoryIcon,
@@ -231,15 +230,15 @@ function Feature({ name, description, icon, pattern, href }: Feature) {
 
       <div className='ring-gray-900/7.5 group-hover:ring-gray-900/10 absolute inset-0 rounded-2xl ring-1 ring-inset dark:ring-white/10 dark:group-hover:ring-white/20' />
 
-      <div className='relative rounded-2xl px-4 pb-4 pt-16'>
+      <div className='relative rounded-2xl p-4 flex flex-col gap-6 pt-12'>
         <FeatureIcon icon={icon} />
 
-        <h3 className='text-gray-900 mt-4 text-[0.875rem] font-semibold leading-7 dark:text-white'>
+        <h3 className='text-gray-900 text-lg font-semibold leading-0 dark:text-white'>
           {/* <span className='absolute inset-0 rounded-2xl' /> */}
           {name}
         </h3>
 
-        <p className='text-gray-600 dark:text-gray-400 mt-1 text-[0.875rem] leading-[1.5rem]'>
+        <p className='text-gray-600 dark:text-gray-400 text-[0.875rem] leading-[1.5rem]'>
           {description}
         </p>
       </div>