First attempt at new link to Moderne

Related: #317

docs/running-recipes/popular-recipe-guides/common-static-analysis-issue-remediation.md

@@ -156,13 +156,9 @@ We don't have OpenRewrite recipes implemented for all publicly available policie
 
 ## See how this recipe works across multiple open-source repositories
 
-<a href="https://app.moderne.io/recipes/org.openrewrite.staticanalysis.CommonStaticAnalysis">
-    <img
-    src={require('/static/img/ModerneRecipeButton.png').default}
-    alt="Moderne Link Image"
-    width="50%"
-    />
-</a>
+import RecipeCallout from '@site/src/components/ModerneLink';
+
+<RecipeCallout link="https://app.moderne.io/recipes/org.openrewrite.staticanalysis.CommonStaticAnalysis" />
 
 The community edition of the Moderne platform enables you to easily run recipes across thousands of open-source repositories.
 

src/components/ModerneLink.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import ExternalSVG from './External.svg';
+import ZoomableImage from '../theme/MDXComponents/Img';
+import Styles from './button.module.css';
+
+export default function RecipeCallout({children, link}) {
+  return (
+    <div className={Styles.container}>
+      <div className={Styles.subContainer}>
+        <p className={Styles.heading}>
+          Run this recipe on OSS repos at scale with the Moderne SaaS.
+        </p>
+        <div>
+          <a href={link} className={Styles.link}>
+            Run this recipe here <ExternalSVG />
+          </a>
+        </div>
+      </div> 
+      <div>
+        <ZoomableImage src={require('../../static/img/run-at-scale.png').default} />
+      </div>
+    </div>
+  );
+}

src/components/button.module.css

@@ -0,0 +1,40 @@
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border: 1px solid #2546F0;
+  padding: 30px;
+  gap: 15px;
+  margin: 16px 0;
+}
+
+.subContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.heading {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 23px;
+  color: #FBFDFF;
+}
+
+.link {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 23px;
+  background-color: #2546F0;
+  padding: 8px;
+  align-items: center;
+  border-radius: 6px;
+  color: #FBFDFF;
+  display: inline-flex;
+  gap: 8px;
+}
+
+.link:hover {
+  background-color: #2546F080;
+  color: #FBFDFF;
+  text-decoration: none;
+}