docs: add mastracode integration docs and website agent grid card

refs #337

4 files changed, 8 insertions, 7 deletions

diff --git a/website/assets/agent-icons/mastracode.svg b/website/assets/agent-icons/mastracode.svg
new file mode 100644
index 00000000..10829437
--- /dev/null
+++ b/website/assets/agent-icons/mastracode.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0.5 5.655 33.069 20.691" fill="none">
+  <path d="m 4.99805,17.3481 c 2.48432,0 4.49804,2.0147 4.49804,4.4991 -1.9e-4,2.4841 -2.01384,4.498 -4.49804,4.498 C 2.51394,26.3451 0.500196,24.3313 0.5,21.8472 0.5,19.3629 2.51382,17.3483 4.99805,17.3481 Z M 10.8867,5.65479 c 2.4842,0 4.4979,2.01388 4.4981,4.49801 0,0.3397 -0.0378,0.6704 -0.1093,0.9884 -0.3137,1.395 -0.5802,2.9769 0.2173,4.1636 l 1.2647,1.8819 c 0.0788,0.1172 0.2152,0.1796 0.3562,0.1711 0.1232,-0.0074 0.2388,-0.0687 0.3077,-0.1712 l 1.2662,-1.8846 c 0.7896,-1.1752 0.536,-2.7394 0.2329,-4.1224 -0.0682,-0.3109 -0.1041,-0.6339 -0.1041,-0.9652 3e-4,-2.48416 2.0149,-4.49809 4.499,-4.49809 2.484,2.2e-4 4.4978,2.01407 4.4981,4.49809 0,0.3792 -0.047,0.7475 -0.1355,1.0993 -0.3233,1.2855 -0.5963,2.7204 0.0666,3.8682 l 1.2144,2.1029 c 0.0229,0.0397 0.0655,0.0633 0.1113,0.0633 2.4842,2e-4 4.4981,2.0148 4.4981,4.4991 -2e-4,2.4841 -2.014,4.4979 -4.4981,4.498 -2.4842,0 -4.4978,-2.0139 -4.498,-4.498 0,-0.3875 0.0489,-0.7636 0.141,-1.1223 0.3325,-1.2956 0.6165,-2.745 -0.0524,-3.9033 l -1.1565,-2.003 c -0.0388,-0.0672 -0.1113,-0.1052 -0.189,-0.1052 -0.0171,0 -0.033,0.0075 -0.0426,0.0217 l -1.2832,1.9092 c -0.8036,1.1956 -0.5274,2.7915 -0.2056,4.1956 0.0742,0.3238 0.1135,0.6609 0.1135,1.0073 -2e-4,2.484 -2.0141,4.4978 -4.4981,4.498 -2.4842,0 -4.4988,-2.0139 -4.499,-4.498 0,-0.2604 0.0222,-0.5156 0.0647,-0.7638 0.2208,-1.2886 0.3808,-2.7164 -0.3484,-3.8015 L 11.7419,15.9801 C 11.1829,15.1483 10.2191,14.7141 9.28286,14.3567 7.5906,13.7106 6.38867,12.0721 6.38867,10.1528 6.38886,7.66869 8.40254,5.65482 10.8867,5.65479 Z" fill="#000"/>
+</svg>
diff --git a/website/css/style.css b/website/css/style.css
index 09702b15..04c3f4b4 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -1942,7 +1942,7 @@ td:last-child {
 
 .agent-grid {
     display: grid;
-    grid-template-columns: repeat(7, minmax(0, 1fr));
+    grid-template-columns: repeat(8, minmax(0, 1fr));
     gap: 0.6rem;
 }
 
@@ -2338,10 +2338,6 @@ td:last-child {
         grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
-    .agent-card:nth-child(8) {
-        grid-column-start: auto;
-    }
-
     .mobile-proof,
     .differ-grid {
         grid-template-columns: 1fr;
diff --git a/website/index.html b/website/index.html
index adb502c2..304509d3 100644
--- a/website/index.html
+++ b/website/index.html
@@ -57,7 +57,7 @@
                 document.documentElement.setAttribute("data-palette", saved || system);
             })();
         </script>
-        <link rel="stylesheet" href="/css/style.css?v=40" />
+        <link rel="stylesheet" href="/css/style.css?v=41" />
     </head>
     <body>
         <header class="site-header">
@@ -704,6 +704,8 @@ $ herdr</code></pre>
                     <div class="agent-card"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/kiro-mask.svg')"></span><span>Kiro</span></div>
                     <div class="agent-card"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/github-copilot.svg')"></span><span>Copilot</span></div>
                     <div class="agent-card"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/qoder-mask.svg')"></span><span>Qoder CLI</span></div>
+                    <div class="agent-card"><span class="agent-icon" style="--agent-icon: url('/assets/agent-icons/mastracode.svg')"></span><span>MastraCode</span></div>
+                    <a class="agent-card agent-more" href="/docs/integrations/"><span>+ yours</span></a>
                 </div>
                 <p class="integration-note">
                     Any terminal agent works out of the box.
diff --git a/website/src/components/MarketingLayout.astro b/website/src/components/MarketingLayout.astro
index dfb68ca5..2a1d026b 100644
--- a/website/src/components/MarketingLayout.astro
+++ b/website/src/components/MarketingLayout.astro
@@ -58,7 +58,7 @@ const ogImageUrl = new URL(ogImage, 'https://herdr.dev').toString();
         document.documentElement.setAttribute("data-palette", saved || system);
       })();
     </script>
-    <link rel="stylesheet" href="/css/style.css?v=40" />
+    <link rel="stylesheet" href="/css/style.css?v=41" />
   </head>
   <body>
     <header class="site-header">