[docs] Promote Platform APIs on homepage

docs/api/platform-api/platform-overview.mdx

@@ -0,0 +1,32 @@
+---
+title: Platform API Overview
+slug: /api/platform-api
+---
+
+# Platform API
+
+The Glean Platform APIs let you build search experiences and run Glean agents from your applications. Use the API references below to choose the capabilities your integration needs.
+
+## Explore the APIs
+
+<CardGroup cols={2}>
+  <Card title="Agents API" icon="agent" iconSet="glean" href="/api/platform-api/agents-overview">
+    Discover available agents, inspect their input and output schemas, and create agent runs.
+  </Card>
+
+  <Card title="Search API" icon="Search" href="/api/platform-api/search-overview">
+    Search across your organization's connected content with filters and time ranges.
+  </Card>
+</CardGroup>
+
+## Resources
+
+<CardGroup cols={2}>
+  <Card title="OpenAPI Specification" icon="FileText" href="https://developers.glean.com/oas/platform">
+    View the complete Platform API specification.
+  </Card>
+
+  <Card title="Error Reference" icon="AlertCircle" href="/errors">
+    Review shared error codes and remediation guidance.
+  </Card>
+</CardGroup>

sidebars.ts

@@ -521,6 +521,11 @@ const baseSidebars: SidebarsConfig = {
         flag: 'platform-api',
       },
       items: [
+        {
+          type: 'doc',
+          id: 'api/platform-api/platform-overview',
+          label: 'Overview',
+        },
         {
           type: 'category',
           label: 'Agents',

src/components/Homepage/index.module.css

@@ -11,7 +11,8 @@
 
 /* TOP BANNER */
 .topBanner {
-  padding: 1rem 0;
+  padding: 1.5rem 2rem;
+  margin-bottom: 1.5rem;
   background-image: url('/img/get-started-bg.png');
   background-size: cover;
   background-position: center;
@@ -22,14 +23,22 @@
   min-height: 80px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
   border-radius: 0.75rem;
 }
 
-h3.bannerTitle {
-  margin-top: 0.5rem !important;
+.bannerContent {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+}
+
+.bannerTitle {
+  color: #fff;
   font-size: 1.5rem;
   font-weight: 700;
-  margin-bottom: 0.5rem;
+  margin: 0 0 0.35rem;
   line-height: 1.2;
 }
 
@@ -45,13 +54,24 @@ h3.bannerTitle {
 
 .badge {
   display: inline-block;
+  flex-shrink: 0;
   padding: 0.25rem 0.75rem;
   background: rgba(255, 255, 255, 0.15);
   border-radius: 9999px;
   font-size: 0.875rem;
   font-weight: 500;
 }
 
+.bannerButton {
+  flex-shrink: 0;
+  border: 0;
+  color: var(--ifm-color-primary-darkest);
+}
+
+.bannerButton:hover {
+  color: var(--ifm-color-primary-darkest);
+}
+
 /* CODE BLOCK */
 .codeWrap {
   margin: 2rem 0;
@@ -156,7 +176,7 @@ h3.bannerTitle {
   }
 
   .bannerTitle {
-    font-size: 1.75rem;
+    font-size: 1.35rem;
   }
 
   .bannerSubtitle {
@@ -167,12 +187,20 @@ h3.bannerTitle {
 @media (max-width: 768px) {
   .topBanner {
     padding: 1.5rem 0;
+    flex-direction: column;
+    gap: 1.25rem;
     text-align: center;
     min-height: 100px;
   }
 
+  .bannerContent {
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 0 1.25rem;
+  }
+
   .bannerTitle {
-    font-size: 1.5rem;
+    font-size: 1.35rem;
   }
 
   .bannerSubtitle {
@@ -187,6 +215,10 @@ h3.bannerTitle {
     font-size: 0.75rem;
   }
 
+  .bannerButton {
+    margin: 0 1.25rem;
+  }
+
   .mcpSection ul {
     padding-left: 1rem;
   }

src/components/Homepage/index.tsx

@@ -46,6 +46,35 @@ export default function Home() {
 
   return (
     <>
+      <section
+        className={clsx('container', styles.wideContainer)}
+        aria-labelledby="platform-api-banner-title"
+      >
+        <div className={styles.topBanner}>
+          <div className={styles.bannerContent}>
+            <span className={styles.badge}>New</span>
+            <div>
+              <h2 id="platform-api-banner-title" className={styles.bannerTitle}>
+                Introducing Glean Platform APIs
+              </h2>
+              <p className={styles.bannerSubtitle}>
+                Build search experiences and run Glean agents in your
+                applications with our new Platform APIs.
+              </p>
+            </div>
+          </div>
+          <Link
+            to="/api/platform-api"
+            className={clsx(
+              'button button--secondary button--lg',
+              styles.bannerButton,
+            )}
+          >
+            Explore Platform APIs
+          </Link>
+        </div>
+      </section>
+
       {/* Dynamic Carousel Section */}
       <CarouselSection />