feat: add github section

apps/web/package.json

@@ -25,6 +25,7 @@
     "@agentic/platform-core": "workspace:*",
     "@agentic/platform-types": "workspace:*",
     "@agentic/platform-validators": "workspace:*",
+    "@number-flow/react": "^0.5.10",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-slot": "^1.2.3",

apps/web/src/app/page.tsx

@@ -1,10 +1,11 @@
+import { OpenSourceSection } from '@/components/open-source-section'
 import { SupplySideCTA } from '@/components/supply-side-cta'
 
 export default function IndexPage() {
   return (
     <>
       <section className='gap-8'>
-        <h1 className='my-0! text-center text-balance leading-snug md:leading-none text-4xl font-extrabold'>
+        <h1 className='text-center text-balance leading-snug md:leading-none text-4xl font-extrabold'>
           Your API → Paid MCP, Instantly
         </h1>
 
@@ -22,6 +23,8 @@ export default function IndexPage() {
 
         <div>TODO</div>
       </section>
+
+      <OpenSourceSection />
     </>
   )
 }

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

@@ -12,7 +12,7 @@ export function DemandSideCTA() {
       </HeroButton>
 
       <Button variant='outline' asChild className='h-full'>
-        <Link href={docsMarketplaceUrl}>Check out the marketplace docs</Link>
+        <Link href={docsMarketplaceUrl}>Check out the docs</Link>
       </Button>
     </div>
   )

apps/web/src/components/github-star-counter.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import NumberFlow from '@number-flow/react'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+
+import { GitHubIcon } from '@/icons/github'
+import { githubUrl } from '@/lib/config'
+
+import { Button } from './ui/button'
+
+// TODO: fetch this dynamically
+const numGitHubStars = 17_600
+
+export function GitHubStarCounter() {
+  const [numStars, setNumStars] = useState(0)
+  useEffect(() => {
+    setNumStars(numGitHubStars)
+  }, [])
+
+  return (
+    <Button variant='outline' className='flex items-center gap-2' asChild>
+      <Link href={githubUrl} target='_blank' rel='noopener'>
+        <GitHubIcon className='' />
+
+        <NumberFlow
+          value={numStars}
+          format={{
+            notation: 'compact',
+            roundingPriority: 'morePrecision'
+          }}
+          suffix=' stars'
+        />
+      </Link>
+    </Button>
+  )
+}

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

@@ -26,10 +26,6 @@ export function Header() {
             Docs
           </ActiveLink>
 
-          <ActiveLink href='/about' className='link'>
-            About
-          </ActiveLink>
-
           {ctx?.isAuthenticated ? (
             <>
               <ActiveLink href='/app' className='link'>

apps/web/src/components/open-source-section.tsx

@@ -0,0 +1,13 @@
+import { GitHubStarCounter } from './github-star-counter'
+
+export function OpenSourceSection() {
+  return (
+    <section className='flex flex-col items-center gap-8'>
+      <h2 className='text-center text-balance leading-snug md:leading-none text-2xl font-heading italic'>
+        Agentic is 100% open source
+      </h2>
+
+      <GitHubStarCounter />
+    </section>
+  )
+}

pnpm-lock.yaml

@@ -530,6 +530,9 @@ importers:
       '@agentic/platform-validators':
         specifier: workspace:*
         version: link:../../packages/validators
+      '@number-flow/react':
+        specifier: ^0.5.10
+        version: 0.5.10(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.15
         version: 2.1.15(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -2152,6 +2155,12 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@number-flow/react@0.5.10':
+    resolution: {integrity: sha512-a8Wh5eNITn7Km4xbddAH7QH8eNmnduR6k34ER1hkHSGO4H2yU1DDnuAWLQM99vciGInFODemSc0tdxrXkJEpbA==}
+    peerDependencies:
+      react: ^18 || ^19
+      react-dom: ^18 || ^19
+
   '@octokit/app@16.0.1':
     resolution: {integrity: sha512-kgTeTsWmpUX+s3Fs4EK4w1K+jWCDB6ClxLSWUWTyhlw7+L3jHtuXDR4QtABu2GsmCMdk67xRhruiXotS3ay3Yw==}
     engines: {node: '>= 20'}
@@ -4458,6 +4467,9 @@ packages:
       jiti:
         optional: true
 
+  esm-env@1.2.2:
+    resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
+
   espree@10.4.0:
     resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -5594,6 +5606,9 @@ packages:
     resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
     engines: {node: '>=18'}
 
+  number-flow@0.5.8:
+    resolution: {integrity: sha512-FPr1DumWyGi5Nucoug14bC6xEz70A1TnhgSHhKyfqjgji2SOTz+iLJxKtv37N5JyJbteGYCm6NQ9p1O4KZ7iiA==}
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -7932,6 +7947,13 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.19.1
 
+  '@number-flow/react@0.5.10(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      esm-env: 1.2.2
+      number-flow: 0.5.8
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   '@octokit/app@16.0.1':
     dependencies:
       '@octokit/auth-app': 8.0.1
@@ -10409,6 +10431,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  esm-env@1.2.2: {}
+
   espree@10.4.0:
     dependencies:
       acorn: 8.15.0
@@ -11520,6 +11544,10 @@ snapshots:
       path-key: 4.0.0
       unicorn-magic: 0.3.0
 
+  number-flow@0.5.8:
+    dependencies:
+      esm-env: 1.2.2
+
   object-assign@4.1.1: {}
 
   object-inspect@1.13.4: {}