Go to your lab buttons

src/components/LandingPage/components/SanityContentRTF/SanityContentTitle/SanityContentTitle.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { ContentForRichTextTitle } from '../../../content/types';
 import Title from '../../Title';
+import { makeSpecialWidget } from './special-widget';
 
 import styles from './SanityContentTitle.module.css';
 
@@ -14,6 +15,10 @@ export default function SanityContentTitle({ value }: SanityContentTitleProps) {
     case 'h2':
       return <Title value={value.title} />;
     default:
-      return <h2 className={styles.sanityContentTitle}>{value.title}</h2>;
+      return (
+        makeSpecialWidget(value.title) ?? (
+          <h2 className={styles.sanityContentTitle}>{value.title}</h2>
+        )
+      );
   }
 }

src/components/LandingPage/components/SanityContentRTF/SanityContentTitle/special-widget.tsx

@@ -0,0 +1,43 @@
+import Link from 'next/link';
+
+import { styleBlockSmall, styleButtonSquare } from '@/components/LandingPage/styles';
+
+const RX_CODE = /^[ \t]*\{\{([a-zA-Z0-9-]+)\}/g;
+
+export function makeSpecialWidget(rawCode: string) {
+  const code = rawCode.trim();
+  RX_CODE.lastIndex = -1;
+  const m = RX_CODE.exec(code);
+  if (!m) return null;
+
+  const [all, name] = m;
+  const rest = code.slice(all.length, -1).trim().slice(1, -1);
+  const args = rest.split(/\s*\}\s*\{\s*/);
+  switch (name) {
+    case 'button': {
+      const [href, text] = args;
+      return (
+        <div className={styleBlockSmall}>
+          <Link href={href} className={styleButtonSquare} style={{ fontSize: '200%' }}>
+            {text}
+          </Link>
+        </div>
+      );
+    }
+    default:
+      return (
+        <div className={styleBlockSmall}>
+          <pre>
+            {JSON.stringify(
+              {
+                name,
+                args,
+              },
+              null,
+              '  '
+            )}
+          </pre>
+        </div>
+      );
+  }
+}

src/components/LandingPage/layout/Menu/Menu.tsx

@@ -40,7 +40,7 @@ export default function Menu({ className, scrollHasStarted, section }: MenuProps
           ))}
 
           <Link href="/coming-soon" className={styles.loginButton}>
-            Login to the Platform
+            Go to your lab
           </Link>
         </div>
         <div className={styles.hamburger}>

src/components/LandingPage/styles.module.css

@@ -16,21 +16,26 @@ a.hoverableButton:active,
   background: var(--color-primary);
 }
 
-button.hoverableButton[disabled] {
+button.hoverableButton[disabled],
+a.hoverableButton[disabled] {
   pointer-events: none;
   opacity: 0.5;
   filter: grayscale(100%);
 }
 
-button.squareButton {
+button.squareButton,
+a.squareButton {
+  display: inline-block;
   color: var(--color-primary);
   border: 1px solid currentColor;
   line-height: 3;
   padding: 0 2em;
   white-space: nowrap;
 }
 
-button.roundedButton {
+button.roundedButton,
+a.roundedButton {
+  display: inline-block;
   color: var(--color-primary);
   border: 1px solid currentColor;
   line-height: 3;
@@ -40,7 +45,8 @@ button.roundedButton {
 }
 
 @media (max-width: 480px) {
-  button.squareButton {
+  button.squareButton,
+  a.squareButton {
     padding: 0 1em;
   }
 }