Add links to stats on home page (modelcontextprotocol#1070)

* add links to stats

* format

* add links styles

* format

Author: ihrpr

docs/overview/index.mdx

@@ -6,78 +6,100 @@ mode: "custom"
 
 <div className="landing-page">
   <div className="hero-section">
-
     <div className="intro-video-section">
       <div className="intro-content-wrapper">
         <div className="intro-content left-aligned">
-          <h2 className="intro-title">Connect your AI applications to the world</h2>
+          <h2 className="intro-title">
+            Connect your AI applications to the world
+          </h2>
           <p className="intro-description">
-            AI-enabled tools are powerful, but they're often limited to the information you manually provide or require bespoke integrations.
+            AI-enabled tools are powerful, but they're often limited to the
+            information you manually provide or require bespoke integrations.
           </p>
           <p className="intro-description">
-            Whether it's reading files from your computer, searching through an internal or external knowledge base, or updating tasks in an project management tool, MCP provides a secure, standardized, *simple* way to give AI systems the context they need.
+            Whether it's reading files from your computer, searching through an
+            internal or external knowledge base, or updating tasks in an project
+            management tool, MCP provides a secure, standardized, *simple* way
+            to give AI systems the context they need.
           </p>
         </div>
         <div className="intro-logo">
           <img src="/mcp.png" alt="MCP Logo" />
         </div>
       </div>
     </div>
-
-
-
-
-
     <div className="how-section">
       <h2 className="section-title">How it works</h2>
       <div className="steps-container">
         <div className="step-item">
           <div className="step-content">
-            <h3><span className="step-number">1</span> Choose MCP servers</h3>
-            <p>Pick from pre-built servers for popular tools like GitHub, Google Drive, Slack and hundreds of others. Combine multiple servers for complete workflows, or easily build your own for custom integrations.</p>
+            <h3>
+              <span className="step-number">1</span> Choose MCP servers
+            </h3>
+            <p>
+              Pick from pre-built servers for popular tools like GitHub, Google
+              Drive, Slack and hundreds of others. Combine multiple servers for
+              complete workflows, or easily build your own for custom
+              integrations.
+            </p>
           </div>
         </div>
         <div className="step-connector"></div>
         <div className="step-item">
           <div className="step-content">
-            <h3><span className="step-number">2</span> Connect your AI application</h3>
-            <p>Configure your AI application (like Claude, VS Code, or ChatGPT) to connect to your MCP servers. The application can now see available tools, resources and prompts from all connected servers.</p>
+            <h3>
+              <span className="step-number">2</span> Connect your AI application
+            </h3>
+            <p>
+              Configure your AI application (like Claude, VS Code, or ChatGPT)
+              to connect to your MCP servers. The application can now see
+              available tools, resources and prompts from all connected servers.
+            </p>
           </div>
         </div>
         <div className="step-connector"></div>
         <div className="step-item">
           <div className="step-content">
-            <h3><span className="step-number">3</span> Work with context</h3>
-            <p>Your AI-powered application can now access real data, execute actions, and provide more helpful responses based on your actual context.</p>
+            <h3>
+              <span className="step-number">3</span> Work with context
+            </h3>
+            <p>
+              Your AI-powered application can now access real data, execute
+              actions, and provide more helpful responses based on your actual
+              context.
+            </p>
           </div>
         </div>
       </div>
     </div>
-
     <div className="ecosystem-section">
       <h2 className="section-title">Join a growing ecosystem</h2>
       <div className="stats-container">
         <div className="stats-grid">
-          <div className="stat-card">
+          <a href="/docs/sdk" target="_blank" className="stat-card">
             <div className="stat-number">9</div>
             <div className="stat-label">Official SDKs</div>
-          </div>
-          <div className="stat-card">
+          </a>
+          <a
+            href="https://github.com/modelcontextprotocol/servers?tab=readme-ov-file#%EF%B8%8F-official-integrations"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="stat-card"
+          >
             <div className="stat-number">1000+</div>
             <div className="stat-label">Available Servers</div>
-          </div>
-          <div className="stat-card">
+          </a>
+          <a href="/clients" target="_blank" className="stat-card">
             <div className="stat-number">70+</div>
             <div className="stat-label">Compatible Clients</div>
-          </div>
+          </a>
         </div>
       </div>
     </div>
-
   </div>
-   <div className="cta-buttons">
-      <a href="/docs/getting-started/intro" className="cta-primary">
-        Get Started
-      </a>
-    </div>
+  <div className="cta-buttons">
+    <a href="/docs/getting-started/intro" className="cta-primary">
+      Get Started
+    </a>
+  </div>
 </div>

docs/style.css

@@ -663,6 +663,24 @@ body:has(#schema-reference) {
   padding: 1rem;
 }
 
+.stat-card {
+  .stat-label {
+    font-weight: bold;
+    text-decoration: 2px solid underline;
+    text-underline-offset: 6px;
+  }
+
+  &:hover {
+    .stat-number {
+      text-shadow: 1px 1px 2px;
+    }
+
+    .stat-label {
+      text-decoration-thickness: 4px;
+    }
+  }
+}
+
 .stat-number {
   font-size: 3.5rem;
   font-weight: 800;