From f06e7880bbe39843de6a16e7ecfdfc88ead02a48 Mon Sep 17 00:00:00 2001
From: Matt Roberts <code@rbrts.uk>
Date: Sun, 31 May 2026 11:39:15 +0100
Subject: [PATCH 1/7] docs: highlight Concerto Playground as the primary
 quick-start on the homepage

Make the in-browser Playground the headline way to get started: a four-way
hero path chooser (Playground / language / SDK / CLI) with the Playground
featured, a live embedded Playground iframe section near the top, a reworked
"Give it a try" flow that leads with the no-install Playground, and a
persistent Playground link in the navbar.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Matt Roberts <code@rbrts.uk>
---
 docusaurus.config.js                     |   5 +
 src/components/HomepageFeatures/index.js | 125 +++++++++++++++---
 src/css/custom.css                       | 159 +++++++++++++++++++++++
 3 files changed, 268 insertions(+), 21 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 6251ecd..18ffc37 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -76,6 +76,11 @@ const config = {
             position: 'right',
             label: 'Docs',
           },
+          {
+            href: 'https://concerto-playground.accordproject.org',
+            label: 'Playground',
+            position: 'right',
+          },
           {
             type: 'doc',
             docId: 'contributing',
diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index aef7939..323846a 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@@ -12,22 +12,58 @@ import samples from '../samples';
 
 import styles from './styles.module.css';
 
+const PLAYGROUND_URL = 'https://concerto-playground.accordproject.org';
+
+const startPaths = [
+  {
+    title: 'Try the Playground',
+    description: 'Write a model and see it compile live — no install.',
+    href: PLAYGROUND_URL,
+    target: '_blank',
+    featured: true,
+  },
+  {
+    title: 'Learn the language',
+    description: 'Start with the basics of modeling in Concerto.',
+    href: '/docs/intro',
+    target: '_self',
+  },
+  {
+    title: 'Use the SDK',
+    description: 'Parse, validate and generate code from JavaScript.',
+    href: '/docs/api/ref-js-api',
+    target: '_self',
+  },
+  {
+    title: 'Use the CLI',
+    description: 'Validate and compile models from your terminal.',
+    href: '/docs/tutorials/quick-start',
+    target: '_self',
+  },
+];
+
+function PathCard({title, description, href, target, featured}) {
+  const resolvedHref = useBaseUrl(href);
+  return (
+    <a
+      className={`PathCard ${featured ? 'featured' : ''}`}
+      href={resolvedHref}
+      target={target}
+      rel={target === '_blank' ? 'noopener noreferrer' : undefined}>
+      {featured && <span className="PathCard-badge">Recommended</span>}
+      <h3 className="PathCard-title">{title}</h3>
+      <p className="PathCard-description">{description}</p>
+    </a>
+  );
+}
+
 function HomeCallToAction() {
   return (
-    <>
-      <ActionButton
-        type="primary"
-        href={useBaseUrl('/docs/intro')}
-        target="_self">
-        Learn More
-      </ActionButton>
-      <ActionButton
-        type="secondary"
-        href={useBaseUrl('/docs/tutorials/quick-start')}
-        target="_self">
-        Quick Start Tutorial
-      </ActionButton>
-    </>
+    <div className="PathChooser">
+      {startPaths.map((path, idx) => (
+        <PathCard key={idx} {...path} />
+      ))}
+    </div>
   );
 }
 
@@ -282,6 +318,38 @@ function CrossPlatform() {
   );
 }
 
+function PlaygroundSection() {
+  return (
+    <Section className="Playground" background="tint">
+      <div className="content">
+        <Heading text="Try Concerto in your browser" />
+        <p className="Playground-lead">
+          No install required. Write a <code>.cto</code> model and watch it
+          compile live to TypeScript, Java, Go, JSON Schema, GraphQL, Protobuf
+          and more — everything runs client-side in your browser.
+        </p>
+        <div className="Playground-window">
+          <div className="Playground-chrome">
+            <span className="Playground-dots" />
+            <span className="Playground-url">concerto-playground.accordproject.org</span>
+          </div>
+          <iframe
+            className="Playground-frame"
+            src={PLAYGROUND_URL}
+            title="Concerto Playground"
+            loading="lazy"
+          />
+        </div>
+        <div className="Playground-cta">
+          <ActionButton type="primary" href={PLAYGROUND_URL} target="_blank">
+            Open full Playground ↗
+          </ActionButton>
+        </div>
+      </div>
+    </Section>
+  );
+}
+
 function GetStarted() {
   return (
     <Section className="GetStarted" background="dark">
@@ -289,19 +357,33 @@ function GetStarted() {
         <Heading text="Give it a try" />
         <ol className="steps">
           <li>
-            <p>Run this</p>
+            <p>No install needed — open the Playground</p>
+            <ActionButton type="primary" href={PLAYGROUND_URL} target="_blank">
+              Launch the Playground ↗
+            </ActionButton>
+          </li>
+          <li>
+            <p>Ready to build? Install the CLI</p>
             <div className="terminal">
               <code>npm i -g @accordproject/concerto-cli</code>
             </div>
           </li>
           <li>
             <p>Read these</p>
-            <ActionButton
-              type="primary"
-              href={useBaseUrl('/docs/tutorials/quick-start')}
-              target="_self">
-              Quick Start Tutorial
-            </ActionButton>
+            <div className="GetStarted-links">
+              <ActionButton
+                type="secondary"
+                href={useBaseUrl('/docs/tutorials/quick-start')}
+                target="_self">
+                Quick Start Tutorial
+              </ActionButton>
+              <ActionButton
+                type="secondary"
+                href={useBaseUrl('/docs/api/ref-js-api')}
+                target="_self">
+                SDK Reference
+              </ActionButton>
+            </div>
           </li>
         </ol>
       </div>
@@ -314,6 +396,7 @@ export default function HomepageFeatures() {
     <>
       <HomepageHeader />
       <main>
+        <PlaygroundSection />
         <Section className={styles.features}>
           <div className="container">
             <div className="row">
diff --git a/src/css/custom.css b/src/css/custom.css
index 4dc67a9..642e7e3 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -157,6 +157,158 @@
   }
 }
 
+/* Path Chooser */
+
+.PathChooser {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.PathCard {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 1.25rem 1.25rem 1.4rem;
+  border-radius: 12px;
+  background-color: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  text-decoration: none !important;
+  transition: transform 0.15s ease-out, border-color 0.15s ease-out,
+    background-color 0.15s ease-out;
+}
+
+.PathCard:hover {
+  transform: translateY(-3px);
+  border-color: var(--brand);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.PathCard.featured {
+  background-color: var(--brand);
+  border-color: var(--brand);
+}
+
+.PathCard.featured:hover {
+  background-color: #7ce3fc;
+}
+
+.PathCard-badge {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.85rem;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--dark);
+  opacity: 0.7;
+}
+
+.PathCard-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0.25rem 0 0.5rem;
+  color: var(--tintColor);
+}
+
+.PathCard-description {
+  font-size: 0.95rem;
+  line-height: 1.4;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.PathCard.featured .PathCard-title,
+.PathCard.featured .PathCard-description {
+  color: var(--dark);
+}
+
+@media only screen and (max-width: 996px) {
+  .PathChooser {
+    grid-template-columns: repeat(2, 1fr);
+    max-width: 640px;
+  }
+}
+
+@media only screen and (max-width: 560px) {
+  .PathChooser {
+    grid-template-columns: 1fr;
+    max-width: 420px;
+  }
+}
+
+/* Playground Section */
+
+.Playground .content {
+  max-width: 1000px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.Playground .Heading {
+  text-align: center;
+}
+
+.Playground-lead {
+  max-width: 720px;
+  margin: 0 auto 2rem;
+  font-size: 1.1rem;
+  line-height: 1.5;
+}
+
+.Playground-window {
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
+  border: 1px solid var(--ifm-table-border-color);
+  background-color: var(--dark);
+}
+
+.Playground-chrome {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.55rem 0.9rem;
+  background-color: var(--deepdark);
+}
+
+.Playground-dots {
+  flex: 0 0 auto;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #ff5f56;
+  box-shadow: 18px 0 0 #ffbd2e, 36px 0 0 #27c93f;
+  margin-right: 28px;
+}
+
+.Playground-url {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.55);
+  font-family: var(--ifm-font-family-monospace);
+}
+
+.Playground-frame {
+  display: block;
+  width: 100%;
+  height: 600px;
+  border: 0;
+  background-color: white;
+}
+
+.Playground-cta {
+  margin-top: 2rem;
+}
+
+@media only screen and (max-width: 760px) {
+  .Playground-frame {
+    height: 460px;
+  }
+}
+
 /* Header Hero */
 
 .HeaderHero {
@@ -491,6 +643,13 @@
   font-size: 17px;
 }
 
+.GetStarted .GetStarted-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: center;
+}
+
 .GetStarted .terminal {
   display: flex;
   flex-direction: column;

From 8b776ade9aa873dd2e3eea2774efeb3527d61eb4 Mon Sep 17 00:00:00 2001
From: Matt Roberts <code@rbrts.uk>
Date: Sun, 31 May 2026 11:40:39 +0100
Subject: [PATCH 2/7] docs: drop Twitter follow button and point SDK card at
 Using the API

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Matt Roberts <code@rbrts.uk>
---
 src/components/HomepageFeatures/index.js | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index 323846a..72861b8 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@@ -31,7 +31,7 @@ const startPaths = [
   {
     title: 'Use the SDK',
     description: 'Parse, validate and generate code from JavaScript.',
-    href: '/docs/api/ref-js-api',
+    href: '/docs/category/using-the-api',
     target: '_self',
   },
   {
@@ -73,7 +73,6 @@ function HomepageHeader() {
   return (
     <Section background="dark" className="HeaderHero">
         <div className="socialLinks">
-        <TwitterButton accountName="accordhq" />
         <GitHubStarButton />
       </div>
       <div className="container">
@@ -226,17 +225,6 @@ function TextColumn({title, text, moreContent}) {
   );
 }
 
-function TwitterButton({accountName}) {
-  return (
-    <a
-      href={`https://twitter.com/intent/follow?screen_name=${accountName}&region=follow_link`}
-      className="twitter-follow-button">
-      <div className="icon" />
-      Follow @{accountName}
-    </a>
-  );
-}
-
 function GitHubStarButton() {
   return (
     <div className="github-button">

From 50eebc2e0815e23bf1e4128f273abf21a168b9e5 Mon Sep 17 00:00:00 2001
From: Matt Roberts <code@rbrts.uk>
Date: Sun, 31 May 2026 11:41:44 +0100
Subject: [PATCH 3/7] docs: point Learn the language card at the namespaces
 specification

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Matt Roberts <code@rbrts.uk>
---
 src/components/HomepageFeatures/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index 72861b8..40ee5f3 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@@ -25,7 +25,7 @@ const startPaths = [
   {
     title: 'Learn the language',
     description: 'Start with the basics of modeling in Concerto.',
-    href: '/docs/intro',
+    href: '/docs/design/specification/model-namespaces',
     target: '_self',
   },
   {

From b392b66de1b917a43dba553f86d2783a50c1e79a Mon Sep 17 00:00:00 2001
From: Matt Roberts <code@rbrts.uk>
Date: Sun, 31 May 2026 11:42:32 +0100
Subject: [PATCH 4/7] docs: point Learn the language card at the specification
 introduction

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Matt Roberts <code@rbrts.uk>
---
 src/components/HomepageFeatures/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index 40ee5f3..52ba9e9 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@@ -25,7 +25,7 @@ const startPaths = [
   {
     title: 'Learn the language',
     description: 'Start with the basics of modeling in Concerto.',
-    href: '/docs/design/specification/model-namespaces',
+    href: '/docs/design/specification/model-introduction',
     target: '_self',
   },
   {

From cf14457b4bc0ff98e79e4b41185e05019ce71227 Mon Sep 17 00:00:00 2001
From: Matt Roberts <code@rbrts.uk>
Date: Sun, 31 May 2026 11:43:22 +0100
Subject: [PATCH 5/7] docs: say TypeScript instead of JavaScript on the SDK
 card

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Matt Roberts <code@rbrts.uk>
---
 src/components/HomepageFeatures/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index 52ba9e9..80d5f59 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@@ -30,7 +30,7 @@ const startPaths = [
   },
   {
     title: 'Use the SDK',
-    description: 'Parse, validate and generate code from JavaScript.',
+    description: 'Parse, validate and generate code from TypeScript.',
     href: '/docs/category/using-the-api',
     target: '_self',
   },

From 16eb78e3aff29739ee6552e9465976d5d4afe0ba Mon Sep 17 00:00:00 2001
From: Matt Roberts <code@rbrts.uk>
Date: Sun, 31 May 2026 11:50:59 +0100
Subject: [PATCH 6/7] docs: point Give it a try SDK link at prod, fix Mermaid
 rendering, tidy up

- SDK Reference button now links to the production Using the API docs
- Render Mermaid diagrams via mermaid.render() in an effect after mount, so
  the homepage UML example actually renders (it previously showed raw source
  because contentLoaded ran during render, before the node was in the DOM)
- Add rel="noopener noreferrer" to ActionButtons that open in a new tab
- Remove the now-orphaned Twitter follow button styles

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Matt Roberts <code@rbrts.uk>
---
 src/components/HomepageFeatures/index.js |  8 ++++--
 src/components/mermaid.js                | 30 ++++++++++++++++++---
 src/css/custom.css                       | 34 ------------------------
 3 files changed, 32 insertions(+), 40 deletions(-)

diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index 80d5f59..18379f2 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@@ -209,7 +209,11 @@ function Heading({text}) {
 
 function ActionButton({href, type = 'primary', target, children}) {
   return (
-    <a className={`ActionButton ${type}`} href={href} target={target}>
+    <a
+      className={`ActionButton ${type}`}
+      href={href}
+      target={target}
+      rel={target === '_blank' ? 'noopener noreferrer' : undefined}>
       {children}
     </a>
   );
@@ -367,7 +371,7 @@ function GetStarted() {
               </ActionButton>
               <ActionButton
                 type="secondary"
-                href={useBaseUrl('/docs/api/ref-js-api')}
+                href="https://concerto.accordproject.org/docs/category/using-the-api"
                 target="_self">
                 SDK Reference
               </ActionButton>
diff --git a/src/components/mermaid.js b/src/components/mermaid.js
index 90a2777..73e27d2 100644
--- a/src/components/mermaid.js
+++ b/src/components/mermaid.js
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import mermaid from "mermaid";
 
 mermaid.initialize({
+  "startOnLoad": false,
   "theme": "base",
   "themeVariables": {
     "primaryColor": "#61dafb",
@@ -10,7 +11,28 @@ mermaid.initialize({
   }
 });
 
+let idSeq = 0;
+
 export function Mermaid({chart}) {
-  mermaid.contentLoaded();
-  return <div className="mermaid">{chart}</div>;
-}
\ No newline at end of file
+  const ref = useRef(null);
+  const [id] = useState(() => `mermaid-${idSeq++}`);
+
+  useEffect(() => {
+    let cancelled = false;
+    mermaid
+      .render(id, chart)
+      .then(({svg}) => {
+        if (!cancelled && ref.current) {
+          ref.current.innerHTML = svg;
+        }
+      })
+      .catch((err) => {
+        console.error('Mermaid render failed', err);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [id, chart]);
+
+  return <div className="mermaid" ref={ref} />;
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 642e7e3..f6c8e21 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -326,7 +326,6 @@
   margin: -10px auto 0;
 }
 
-.HeaderHero .socialLinks .twitter-follow-button,
 .HeaderHero .socialLinks .github-button {
   margin-right: 1rem;
 }
@@ -701,39 +700,6 @@
   }
 }
 
-/* Twitter Follow Button */
-
-.twitter-follow-button {
-  display: inline-block;
-  position: relative;
-  height: 28px;
-  box-sizing: border-box;
-  padding: 1px 10px 1px 9px;
-  background-color: #1b95e0;
-  color: #fff;
-  border-radius: 4px;
-  font-weight: 400;
-  cursor: pointer;
-  font-size: 13px;
-  line-height: 26px;
-}  
-
-.twitter-follow-button :hover {
-  color: #fff;
-  background-color: #0c7abf;
-}
-
-.twitter-follow-button .icon {
-  position: relative;
-  display: inline-block;
-  top: 4px;
-  height: 18px;
-  width: 18px;
-  margin-right: 4px;
-  background: transparent 0 0 no-repeat;
-  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E);
-}
-
 .navbar__title{
   font-weight: 600;
   font-size: 1.2rem;

From 26915f28ae52b1e8e00f5cac54f6105e8d4abcfb Mon Sep 17 00:00:00 2001
From: Matt Roberts <code@rbrts.uk>
Date: Sun, 31 May 2026 11:56:30 +0100
Subject: [PATCH 7/7] docs: remove redundant code-sample tabs from homepage

The UML/TypeScript/JSON Schema tabbed examples are now redundant with
the embedded live Playground. Drop the CodeSamples component, delete the
now-unused Mermaid and samples helpers, and collapse the Cross-Platform
section to a single centered text column.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Matt Roberts <code@rbrts.uk>
---
 src/components/HomepageFeatures/index.js |  37 +-
 src/components/mermaid.js                |  38 --
 src/components/samples.js                | 433 -----------------------
 src/css/custom.css                       |  54 +--
 4 files changed, 10 insertions(+), 552 deletions(-)
 delete mode 100644 src/components/mermaid.js
 delete mode 100644 src/components/samples.js

diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index 18379f2..b6caa1c 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@@ -3,13 +3,8 @@ import clsx from 'clsx';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import GitHubButton from 'react-github-btn';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
 import CodeBlock from '@theme/CodeBlock';
 
-import { Mermaid } from '../mermaid';
-import samples from '../samples';
-
 import styles from './styles.module.css';
 
 const PLAYGROUND_URL = 'https://concerto-playground.accordproject.org';
@@ -141,22 +136,6 @@ Bootstrap your models from existing <a href="/docs/reference/import/infer-openap
    `,
 };
 
-function CodeSamples(){
-  return (
-    <Tabs>
-      <TabItem value="uml" label="UML" default>
-        <Mermaid chart={samples.mermaidUml} />
-      </TabItem>
-      <TabItem value="typescript" label="TypeScript">
-        <CodeBlock language="typescript" theme="dark">{samples.typescript}</CodeBlock>
-      </TabItem>
-      <TabItem value="jsonSchema" label="JSON Schema">
-        <CodeBlock language="json">{samples.jsonSchema}</CodeBlock>
-      </TabItem>
-    </Tabs>
-  )
-}
-
 /*Adjust the Svg property with current files*/
 const FeatureList = [
   {
@@ -296,16 +275,12 @@ function SchemasPeople() {
 function CrossPlatform() {
   return (
     <Section className="CrossPlatform" background="light">
-      <TwoColumns
-        reverse
-        columnOne={
-          <TextColumn
-            title="Platform Neutral, but Runtime Compatible"
-            text={textContent.languageConversion}
-          />
-        }
-        columnTwo={<CodeSamples/>}
-      />
+      <div className="content">
+        <TextColumn
+          title="Platform Neutral, but Runtime Compatible"
+          text={textContent.languageConversion}
+        />
+      </div>
     </Section>
   );
 }
diff --git a/src/components/mermaid.js b/src/components/mermaid.js
deleted file mode 100644
index 73e27d2..0000000
--- a/src/components/mermaid.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import mermaid from "mermaid";
-
-mermaid.initialize({
-  "startOnLoad": false,
-  "theme": "base",
-  "themeVariables": {
-    "primaryColor": "#61dafb",
-    "primaryTextColor": "#282c34",
-    "primaryBorderColor": "#61dafb",
-  }
-});
-
-let idSeq = 0;
-
-export function Mermaid({chart}) {
-  const ref = useRef(null);
-  const [id] = useState(() => `mermaid-${idSeq++}`);
-
-  useEffect(() => {
-    let cancelled = false;
-    mermaid
-      .render(id, chart)
-      .then(({svg}) => {
-        if (!cancelled && ref.current) {
-          ref.current.innerHTML = svg;
-        }
-      })
-      .catch((err) => {
-        console.error('Mermaid render failed', err);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [id, chart]);
-
-  return <div className="mermaid" ref={ref} />;
-}
diff --git a/src/components/samples.js b/src/components/samples.js
deleted file mode 100644
index ef9ef1a..0000000
--- a/src/components/samples.js
+++ /dev/null
@@ -1,433 +0,0 @@
-export default {
-  mermaidUml: `
-  classDiagram
-class ServiceType {
-<< enumeration>>
-+ GOLD
-+ SILVER
-+ BRONZE
-}
-
-class ServiceLevel {
-<< enumeration>>
-+ BASIC
-+ STANDARD
-+ PREMIUM
-}
-
-class Service {
-<< concept>>
-+ ServiceType serviceType
-+ ServiceLevel serviceLevel
-+ Double price
-}
-
-Service "1" *-- "1" ServiceType
-Service "1" *-- "1" ServiceLevel
-class Organization {
-<< concept>>
-+ String name
-+ String address
-+ String contactName
-+ String contactEmail
-}
-
-class ServiceLevelAgreement {
-<< concept>>
-+ Organization customer
-+ Organization provider
-+ Service service
-+ DateTime startDate
-+ DateTime endDate
-+ Double penaltyPercentage
-+ Boolean autoRenewal
-}
-
-ServiceLevelAgreement "1" *-- "1" Organization
-ServiceLevelAgreement "1" *-- "1" Organization
-ServiceLevelAgreement "1" *-- "1" Service
-
-  `,
-  typescript: ` 
-  // imports
-  import {IConcept} from './concerto@1.0.0';
-  
-  // interfaces
-  export enum ServiceType {
-     GOLD = 'GOLD',
-     SILVER = 'SILVER',
-     BRONZE = 'BRONZE',
-  }
-  
-  export enum ServiceLevel {
-     BASIC = 'BASIC',
-     STANDARD = 'STANDARD',
-     PREMIUM = 'PREMIUM',
-  }
-  
-  export interface IService extends IConcept {
-     serviceType: ServiceType;
-     serviceLevel: ServiceLevel;
-     price: number;
-  }
-  
-  export interface IOrganization extends IConcept {
-     name: string;
-     address: string;
-     contactName: string;
-     contactEmail: string;
-  }
-  
-  export interface IServiceLevelAgreement extends IConcept {
-     customer: IOrganization;
-     provider: IOrganization;
-     service: IService;
-     startDate: Date;
-     endDate: Date;
-     penaltyPercentage: number;
-     autoRenewal: boolean;
-  }`,
-  jsonSchema: `
-  {
-    "$schema": "http://json-schema.org/draft-07/schema#",
-    "definitions": {
-      "org.example.sla@0.0.2.ServiceType": {
-        "title": "ServiceType",
-        "description": "An instance of org.example.sla@0.0.2.ServiceType",
-        "enum": [
-          "GOLD",
-          "SILVER",
-          "BRONZE"
-        ]
-      },
-      "org.example.sla@0.0.2.ServiceLevel": {
-        "title": "ServiceLevel",
-        "description": "An instance of org.example.sla@0.0.2.ServiceLevel",
-        "enum": [
-          "BASIC",
-          "STANDARD",
-          "PREMIUM"
-        ]
-      },
-      "org.example.sla@0.0.2.Service": {
-        "title": "Service",
-        "description": "An instance of org.example.sla@0.0.2.Service",
-        "type": "object",
-        "properties": {
-          "$class": {
-            "type": "string",
-            "default": "org.example.sla@0.0.2.Service",
-            "pattern": "^org\\.example\\.sla@0\\.0\\.2\\.Service$",
-            "description": "The class identifier for org.example.sla@0.0.2.Service"
-          },
-          "serviceType": {
-            "$ref": "#/definitions/org.example.sla@0.0.2.ServiceType"
-          },
-          "serviceLevel": {
-            "$ref": "#/definitions/org.example.sla@0.0.2.ServiceLevel"
-          },
-          "price": {
-            "type": "number"
-          }
-        },
-        "required": [
-          "$class",
-          "serviceType",
-          "serviceLevel",
-          "price"
-        ]
-      },
-      "org.example.sla@0.0.2.Organization": {
-        "title": "Organization",
-        "description": "An instance of org.example.sla@0.0.2.Organization",
-        "type": "object",
-        "properties": {
-          "$class": {
-            "type": "string",
-            "default": "org.example.sla@0.0.2.Organization",
-            "pattern": "^org\\.example\\.sla@0\\.0\\.2\\.Organization$",
-            "description": "The class identifier for org.example.sla@0.0.2.Organization"
-          },
-          "name": {
-            "type": "string"
-          },
-          "address": {
-            "type": "string"
-          },
-          "contactName": {
-            "type": "string"
-          },
-          "contactEmail": {
-            "type": "string"
-          }
-        },
-        "required": [
-          "$class",
-          "name",
-          "address",
-          "contactName",
-          "contactEmail"
-        ]
-      },
-      "org.example.sla@0.0.2.ServiceLevelAgreement": {
-        "title": "ServiceLevelAgreement",
-        "description": "An instance of org.example.sla@0.0.2.ServiceLevelAgreement",
-        "type": "object",
-        "properties": {
-          "$class": {
-            "type": "string",
-            "default": "org.example.sla@0.0.2.ServiceLevelAgreement",
-            "pattern": "^org\\.example\\.sla@0\\.0\\.2\\.ServiceLevelAgreement$",
-            "description": "The class identifier for org.example.sla@0.0.2.ServiceLevelAgreement"
-          },
-          "customer": {
-            "$ref": "#/definitions/org.example.sla@0.0.2.Organization"
-          },
-          "provider": {
-            "$ref": "#/definitions/org.example.sla@0.0.2.Organization"
-          },
-          "service": {
-            "$ref": "#/definitions/org.example.sla@0.0.2.Service"
-          },
-          "startDate": {
-            "format": "date-time",
-            "type": "string"
-          },
-          "endDate": {
-            "format": "date-time",
-            "type": "string"
-          },
-          "penaltyPercentage": {
-            "type": "number"
-          },
-          "autoRenewal": {
-            "type": "boolean"
-          }
-        },
-        "required": [
-          "$class",
-          "customer",
-          "provider",
-          "service",
-          "startDate",
-          "endDate",
-          "penaltyPercentage",
-          "autoRenewal"
-        ]
-      }
-    }
-  }
-  `,
-  xmlSchema: `
-  <?xml version="1.0"?>
-<xs:schema xmlns:org.example.sla="org.example.sla" targetNamespace="org.example.sla" elementFormDefault="qualified" xmlns:xs="http://www.w3.org/2001/XMLSchema" 
-xmlns:concerto="concerto"
->
-<xs:import namespace="concerto" schemaLocation="concerto@1.0.0.xsd"/>
-<xs:simpleType name="ServiceType">
-   <xs:restriction base="xs:string">
-      <xs:enumeration value="GOLD"/>
-      <xs:enumeration value="SILVER"/>
-      <xs:enumeration value="BRONZE"/>
-   </xs:restriction>
-</xs:simpleType>
-<xs:element name="ServiceType" type="org.example.sla:ServiceType"/>
-<xs:simpleType name="ServiceLevel">
-   <xs:restriction base="xs:string">
-      <xs:enumeration value="BASIC"/>
-      <xs:enumeration value="STANDARD"/>
-      <xs:enumeration value="PREMIUM"/>
-   </xs:restriction>
-</xs:simpleType>
-<xs:element name="ServiceLevel" type="org.example.sla:ServiceLevel"/>
-<xs:complexType name="Service">
-   <xs:complexContent>
-   <xs:extension base="concerto:Concept">
-   <xs:sequence>
-      <xs:element name="serviceType" type="org.example.sla:ServiceType"/>
-      <xs:element name="serviceLevel" type="org.example.sla:ServiceLevel"/>
-      <xs:element name="price" type="xs:double"/>
-   </xs:sequence>
-   </xs:extension>
-   </xs:complexContent>
-</xs:complexType>
-<xs:element name="Service" type="org.example.sla:Service"/>
-<xs:complexType name="Organization">
-   <xs:complexContent>
-   <xs:extension base="concerto:Concept">
-   <xs:sequence>
-      <xs:element name="name" type="xs:string"/>
-      <xs:element name="address" type="xs:string"/>
-      <xs:element name="contactName" type="xs:string"/>
-      <xs:element name="contactEmail" type="xs:string"/>
-   </xs:sequence>
-   </xs:extension>
-   </xs:complexContent>
-</xs:complexType>
-<xs:element name="Organization" type="org.example.sla:Organization"/>
-<xs:complexType name="ServiceLevelAgreement">
-   <xs:complexContent>
-   <xs:extension base="concerto:Concept">
-   <xs:sequence>
-      <xs:element name="customer" type="org.example.sla:Organization"/>
-      <xs:element name="provider" type="org.example.sla:Organization"/>
-      <xs:element name="service" type="org.example.sla:Service"/>
-      <xs:element name="startDate" type="xs:dateTime"/>
-      <xs:element name="endDate" type="xs:dateTime"/>
-      <xs:element name="penaltyPercentage" type="xs:double"/>
-      <xs:element name="autoRenewal" type="xs:boolean"/>
-   </xs:sequence>
-   </xs:extension>
-   </xs:complexContent>
-</xs:complexType>
-<xs:element name="ServiceLevelAgreement" type="org.example.sla:ServiceLevelAgreement"/>
-</xs:schema>
-`,
-  csharp: `
-  namespace Org.Example.Sla;
-using AccordProject.Concerto;
-[System.Text.Json.Serialization.JsonConverter(typeof(System.Text.Json.Serialization.JsonStringEnumConverter))]
-public enum ServiceType {
-      GOLD,
-      SILVER,
-      BRONZE,
-}
-[System.Text.Json.Serialization.JsonConverter(typeof(System.Text.Json.Serialization.JsonStringEnumConverter))]
-public enum ServiceLevel {
-      BASIC,
-      STANDARD,
-      PREMIUM,
-}
-[AccordProject.Concerto.Type(Namespace = "org.example.sla", Version = "0.0.2", Name = "Service")]
-[System.Text.Json.Serialization.JsonConverter(typeof(AccordProject.Concerto.ConcertoConverterFactorySystem))]
-public class Service : Concept {
-   [System.Text.Json.Serialization.JsonPropertyName("$class")]
-   public override string _Class { get; } = "org.example.sla@0.0.2.Service";
-   [System.Text.Json.Serialization.JsonPropertyName("serviceType")]
-   public ServiceType ServiceType { get; set; }
-   [System.Text.Json.Serialization.JsonPropertyName("serviceLevel")]
-   public ServiceLevel ServiceLevel { get; set; }
-   [System.Text.Json.Serialization.JsonPropertyName("price")]
-   public float Price { get; set; }
-}
-[AccordProject.Concerto.Type(Namespace = "org.example.sla", Version = "0.0.2", Name = "Organization")]
-[System.Text.Json.Serialization.JsonConverter(typeof(AccordProject.Concerto.ConcertoConverterFactorySystem))]
-public class Organization : Concept {
-   [System.Text.Json.Serialization.JsonPropertyName("$class")]
-   public override string _Class { get; } = "org.example.sla@0.0.2.Organization";
-   [System.Text.Json.Serialization.JsonPropertyName("name")]
-   public string Name { get; set; }
-   [System.Text.Json.Serialization.JsonPropertyName("address")]
-   public string Address { get; set; }
-   [System.Text.Json.Serialization.JsonPropertyName("contactName")]
-   public string ContactName { get; set; }
-   [System.Text.Json.Serialization.JsonPropertyName("contactEmail")]
-   public string ContactEmail { get; set; }
-}
-[AccordProject.Concerto.Type(Namespace = "org.example.sla", Version = "0.0.2", Name = "ServiceLevelAgreement")]
-[System.Text.Json.Serialization.JsonConverter(typeof(AccordProject.Concerto.ConcertoConverterFactorySystem))]
-public class ServiceLevelAgreement : Concept {
-   [System.Text.Json.Serialization.JsonPropertyName("$class")]
-   public override string _Class { get; } = "org.example.sla@0.0.2.ServiceLevelAgreement";
-   [System.Text.Json.Serialization.JsonPropertyName("customer")]
-   public Organization Customer { get; set; }
-   [System.Text.Json.Serialization.JsonPropertyName("provider")]
-   public Organization Provider { get; set; }
-   [System.Text.Json.Serialization.JsonPropertyName("service")]
-   public Service Service { get; set; }
-   [System.Text.Json.Serialization.JsonPropertyName("startDate")]
-   public System.DateTime StartDate { get; set; }
-   [System.Text.Json.Serialization.JsonPropertyName("endDate")]
-   public System.DateTime EndDate { get; set; }
-   [System.Text.Json.Serialization.JsonPropertyName("penaltyPercentage")]
-   public float PenaltyPercentage { get; set; }
-   [System.Text.Json.Serialization.JsonPropertyName("autoRenewal")]
-   public bool AutoRenewal { get; set; }
-}
-
-  `,
-  go: `
-  package org_example_sla_0_0_2
-  import "time"
-  import "concerto_1_0_0";
-     
-  type ServiceType int
-  const (
-     GOLD ServiceType = 1 + iota
-     SILVER
-     BRONZE
-  )
-  type ServiceLevel int
-  const (
-     BASIC ServiceLevel = 1 + iota
-     STANDARD
-     PREMIUM
-  )
-  type Service struct {
-     concerto_1_0_0.Concept
-     ServiceType ServiceType \`json:"serviceType"\`
-     ServiceLevel ServiceLevel \`json:"serviceLevel"\`
-     Price float64 \`json:"price"\`
-  }
-  type Organization struct {
-     concerto_1_0_0.Concept
-     Name string \`json:"name"\`
-     Address string \`json:"address"\`
-     ContactName string \`json:"contactName"\`
-     ContactEmail string \`json:"contactEmail"\`
-  }
-  type ServiceLevelAgreement struct {
-     concerto_1_0_0.Concept
-     Customer Organization \`json:"customer"\`
-     Provider Organization \`json:"provider"\`
-     Service Service \`json:"service"\`
-     StartDate time.Time \`json:"startDate"\`
-     EndDate time.Time \`json:"endDate"\`
-     PenaltyPercentage float64 \`json:"penaltyPercentage"\`
-     AutoRenewal bool \`json:"autoRenewal"\`
-  }
-  `,
-  protobuf: `
-ssyntax = "proto3";
-
-package org.example.sla.v0_0_2;
-
-import "google/protobuf/timestamp.proto";
-
-enum ServiceType {
-  ServiceType_BRONZE = 0;
-  ServiceType_GOLD = 1;
-  ServiceType_SILVER = 2;
-}
-
-enum ServiceLevel {
-  ServiceLevel_BASIC = 0;
-  ServiceLevel_PREMIUM = 1;
-  ServiceLevel_STANDARD = 2;
-}
-
-message Service {
-  double price = 1;
-  ServiceLevel serviceLevel = 2;
-  ServiceType serviceType = 3;
-}
-
-message Organization {
-  string address = 1;
-  string contactEmail = 2;
-  string contactName = 3;
-  string name = 4;
-}
-
-message ServiceLevelAgreement {
-  bool autoRenewal = 1;
-  Organization customer = 2;
-  google.protobuf.Timestamp endDate = 3;
-  double penaltyPercentage = 4;
-  Organization provider = 5;
-  Service service = 6;
-  google.protobuf.Timestamp startDate = 7;
-}
-
-`,
-};
\ No newline at end of file
diff --git a/src/css/custom.css b/src/css/custom.css
index f6c8e21..e26235b 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -493,56 +493,10 @@
 
 /* Cross Platform */
 
-.CrossPlatform {
-  overflow: hidden;
-}
-
-@media only screen and (max-width: 960px) {
-  .CrossPlatform .column.last {
-    max-height: 300px;
-    overflow-y: auto ;
-  }
-  .CrossPlatform .column.last::-webkit-scrollbar {
-    width: 7px;
-}
-
-}
-
-@media only screen and (min-width: 481px) and (max-width: 960px) {
-  .CrossPlatform .column.last {
-    width: 66.7%;
-    margin: 0 auto;
-  }
-  .CrossPlatform .column.last::-webkit-scrollbar {
-    width: 7px;
-}
-
-}
-
-@media only screen and (min-width: 961px) {
-  .CrossPlatform {
-    max-height: 800px;
-  }
-
-  .CrossPlatform .column.last {
-    max-height: 800px;
-    overflow-y: auto;
-    
-  }
-
-  .CrossPlatform .column.last::-webkit-scrollbar {
-    width: 7px;
-}
-
-  /* Correct for whitespace in the image of phones */
-  .CrossPlatform .column.left {
-    margin-top: -25px;
-  }
-
-  .CrossPlatform .prism-code {
-    margin-top: -25px;
-    overflow-y: auto;
-  }
+.CrossPlatform .content {
+  max-width: 760px;
+  margin: 0 auto;
+  text-align: center;
 }
 
 /* Schemas for People */