Add MCP servers banner (#606)

Author: ericglau

packages/ui/public/cairo.html

@@ -50,6 +50,18 @@
       <a class="link" href="https://x.com/OpenZeppelin" target="_blank" rel="noopener noreferrer"><img src="/icons/x-logo.svg" width="20" alt="Twitter/X"></a>
     </div>
   </div>
+  <div class="banner flex w-full gap-2">
+    <div class="bg-blue-100 text-blue-600 px-2 py-0.5 rounded-md text-sm font-medium">New</div>
+    <div>
+      Build secure, OpenZeppelin-standard smart contracts with your favorite AI using the
+      <a
+        href="https://mcp.openzeppelin.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-gray-600 hover:underline">Contracts MCP</a
+      >.
+    </div>
+  </div>
   <div class="nav">
     <a class="switch switch-solidity" href="/"><img src="/icons/solidity.svg" alt="solidity">Solidity</a>
     <div class="switch switch-cairo active with-version" id="cairo-switch">
@@ -63,7 +75,6 @@
     <a class="switch switch-stellar" href="/stellar"><img src="/icons/stellar.svg" alt="stellar">Stellar</a>
     <a class="switch switch-stylus" href="/stylus"><img src="/icons/stylus.svg" alt="stylus">Stylus</a>
   </div>
-
   <div class="wizard-container">
     <oz-wizard class="wizard" data-sync-url="fragment" data-lang="cairo"></oz-wizard>
   </div>

packages/ui/public/index.html

@@ -81,14 +81,25 @@
       <a class="link" href="https://x.com/OpenZeppelin" target="_blank" rel="noopener noreferrer"><img src="/icons/x-logo.svg" width="20" alt="Twitter/X"></a>
     </div>
   </div>
+  <div class="banner flex w-full gap-2">
+    <div class="bg-blue-100 text-blue-600 px-2 py-0.5 rounded-md text-sm font-medium">New</div>
+    <div>
+      Build secure, OpenZeppelin-standard smart contracts with your favorite AI using the
+      <a
+        href="https://mcp.openzeppelin.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-gray-600 hover:underline">Contracts MCP</a
+      >.
+    </div>
+  </div>
   <div class="nav">
     <a class="switch switch-solidity active" href="/"><img src="/icons/solidity.svg" alt="solidity">Solidity</a>
     <a class="switch switch-cairo" href="/cairo"><img src="/icons/cairo.svg" alt="cairo">Cairo</a>
     <a class="switch switch-stellar" href="/stellar"><img src="/icons/stellar.svg" alt="stellar">Stellar</a>
     <a class="switch switch-stylus" href="/stylus"><img src="/icons/stylus.svg" alt="stylus">Stylus</a>
   </div>
   <div class="wizard-container">
-
     <oz-wizard class="wizard" data-sync-url="fragment"></oz-wizard>
   </div>
 

packages/ui/public/stellar.html

@@ -49,14 +49,25 @@
       <a class="link" href="https://x.com/OpenZeppelin" target="_blank" rel="noopener noreferrer"><img src="/icons/x-logo.svg" width="20" alt="Twitter/X"></a>
     </div>
   </div>
+  <div class="banner flex w-full gap-2">
+    <div class="bg-blue-100 text-blue-600 px-2 py-0.5 rounded-md text-sm font-medium">New</div>
+    <div>
+      Build secure, OpenZeppelin-standard smart contracts with your favorite AI using the
+      <a
+        href="https://mcp.openzeppelin.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-gray-600 hover:underline">Contracts MCP</a
+      >.
+    </div>
+  </div>
   <div class="nav">
     <a class="switch switch-solidity" href="/"><img src="/icons/solidity.svg" alt="solidity">Solidity</a>
     <a class="switch switch-cairo" href="/cairo"><img src="/icons/cairo.svg" alt="cairo">Cairo</a>
     <a class="switch switch-stellar active" href="#"><img src="/icons/stellar.svg" alt="stellar">Stellar</a>
     <a class="switch switch-stylus" href="/stylus"><img src="/icons/stylus.svg" alt="stylus">Stylus</a>
   </div>
   <div class="wizard-container">
-
     <oz-wizard class="wizard" data-sync-url="fragment" data-lang="stellar"></oz-wizard>
   </div>
 

packages/ui/public/stylus.html

@@ -49,14 +49,25 @@
       <a class="link" href="https://x.com/OpenZeppelin" target="_blank" rel="noopener noreferrer"><img src="/icons/x-logo.svg" width="20" alt="Twitter/X"></a>
     </div>
   </div>
+  <div class="banner flex w-full gap-2">
+    <div class="bg-blue-100 text-blue-600 px-2 py-0.5 rounded-md text-sm font-medium">New</div>
+    <div>
+      Build secure, OpenZeppelin-standard smart contracts with your favorite AI using the
+      <a
+        href="https://mcp.openzeppelin.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-gray-600 hover:underline">Contracts MCP</a
+      >.
+    </div>
+  </div>
   <div class="nav">
     <a class="switch switch-solidity" href="/"><img src="/icons/solidity.svg" alt="solidity">Solidity</a>
     <a class="switch switch-cairo" href="/cairo"><img src="/icons/cairo.svg" alt="cairo">Cairo</a>
     <a class="switch switch-stellar" href="/stellar"><img src="/icons/stellar.svg" alt="stellar">Stellar</a>
     <a class="switch switch-stylus active" href="#"><img src="/icons/stylus_active.svg" alt="stylus">Stylus</a>
   </div>
   <div class="wizard-container">
-
     <oz-wizard class="wizard" data-sync-url="fragment" data-lang="stylus"></oz-wizard>
   </div>
 

packages/ui/src/standalone.css

@@ -43,6 +43,19 @@ body {
   margin-right: 20px;
 }
 
+.banner {
+  text-align: left;
+  padding: 0px 20px;
+  font-family: 'inter', Arial, Helvetica, sans-serif;
+  display: flex;
+  flex-direction: row;
+  min-height: 36px;
+  justify-content: center;
+  align-items: center;
+  background-color: #f5f6ff;
+  min-width: 800px;
+}
+
 /* Navigation */
 .nav {
   text-align: left;