add mcp section to the homepage

Author: okabak123

docs/home.mdx

@@ -220,6 +220,25 @@ icon: "house"
         </div>
       </div>
   </div>
+  <div class="home__theme-purple-dark">
+      <div class="home__container">
+        <div class="home__2col">
+          <div class="home__2col-content is-centered">
+            <h2 class="home__heading-lg">Elementary context <br/>in your tools.</h2>
+            <p>The MCP Server brings models, lineage, and incidents into tools like Cursor and Claude—so you can act without leaving your workflow.</p>
+            <div><a
+            href="/cloud/mcp/intro"
+            class="home__button"
+          >
+            Start here
+          </a></div>
+          </div>
+          <div class="home__mcp-image">
+              <img src="https://res.cloudinary.com/diuctyblm/image/upload/v1756374052/Docs_u3uaft.svg" noZoom/>
+          </div>
+        </div>
+    </div>
+  </div>
   <div class="home__page">
 
     <section>
@@ -385,6 +404,7 @@ icon: "house"
       </div>
     </div>
   </div>
+  
   <div class="home__theme-purple">
       <div class="home__container">
         <div class="home__guides-layout">

docs/styles.css

@@ -44,6 +44,16 @@ h1, h2, h3, h4, h5, h6 {
   color: white;
 }
 
+.home__theme-purple-dark {
+  background-color: #32113d;
+  color: white;
+}
+
+.dark .home__theme-purple-dark {
+  background-color: #32113d;
+  color: white;
+}
+
 .home__theme-pink {
   background-color: #f1386e;
   color: white;
@@ -1006,6 +1016,9 @@ h1, h2, h3, h4, h5, h6 {
   gap: 24px;
   max-width: 500px;
 }
+.home__2col-content.is-centered {
+  align-self: center;
+}
 
 .home__guides-layout{
   display: flex;
@@ -1118,4 +1131,13 @@ h1, h2, h3, h4, h5, h6 {
   background: #ff6b9d;
   color: #000;
   box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
+}
+
+/* ================================= */
+/* MCP */
+/* ================================= */
+.home__mcp-image {
+  border: 1px solid #7D4590;
+  border-radius: 0.75rem;
+  overflow: hidden;
 }