diff --git a/docs/docs-intro/index.mdx b/docs/docs-intro/index.mdx
deleted file mode 100644
index ad2539e..0000000
--- a/docs/docs-intro/index.mdx
+++ /dev/null
@@ -1,64 +0,0 @@
----
-sidebar_position: 1
----
-
-import Badge from "@site/src/components/Badge";
-
-# Support NeoHaskell
-
-## Building the Future, One Event at a Time
-
-Hi, this is Nick, the creator of NeoHaskell.
-
-NeoHaskell exists because we believe software development doesn't have to be painful. That adding your 100th feature should be as easy as your first. That teams should stay small and happy even as systems grow massive.
-
-Right now, I'm working on NeoHaskell full-time, living off my savings to make this vision real. Every contribution—whether financial, technical, or spreading the word—directly impacts how fast we can deliver a world where technical debt becomes obsolete.
-
-## Ways to Support
-
-### Financial Support
-
-Choose the platform that works best for you:
-
-- **[GitHub Sponsors](https://github.com/sponsors/NickSeagull)** - Direct support through GitHub
-- **[OpenCollective](https://opencollective.com/neohaskell)** - Transparent collective funding
-- **[Ko-fi](https://ko-fi.com/nickseagull)** - One-time or monthly contributions
-
-Every dollar extends the runway. Every month of runway means more features, better documentation, and a stronger foundation for the companies that will build their future on NeoHaskell.
-
-### Hire Me
-
-The best way to support NeoHaskell? **Use it in production.**
-
-I'm available for consulting to help your team:
-- Architect event-driven systems that actually work
-- Transition from CRUD to event sourcing without the pain
-- Build your next product with NeoHaskell
-- Train your team on event modeling and domain-driven design
-
-When you hire me, you're not just getting consulting—you're funding NeoHaskell's development while solving your own technical challenges. Every production use case makes NeoHaskell stronger.
-
-**[Contact me for consulting](mailto:consulting@nickseagull.dev)**
-
-### Other Ways to Help
-
-**Use It**: Build something with NeoHaskell. Your feedback shapes what we build next.
-
-**Share It**: Tell others who are suffering from exponential complexity. Write about your experience. Show what you've built.
-
-**Contribute**: Code, documentation, examples—every contribution matters. We're building this together.
-
-**Star It**: Give us a star on [GitHub](https://github.com/neohaskell/neohaskell). It helps others discover the project.
-
-## Why This Matters
-
-Your support isn't just funding a programming language. You're investing in a future where:
-
-- Startups don't fail from technical bankruptcy
-- Developers don't burn out from complexity
-- Companies scale without suffering
-- Software development becomes humane again
-
-Together, we're proving that software can get better, not worse, over time.
-
-**Thank you for believing in this vision.**
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 26ae00b..8a16e0d 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -8,7 +8,8 @@ const lightCodeTheme = require("prism-react-renderer/themes/shadesOfPurple");
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: "NeoHaskell",
-  tagline: "A Haskell dialect to think less and do more",
+  tagline:
+    "Model requests, decisions, events, and views so current state has an explainable history.",
   favicon: "img/favicon.ico",
 
   // Set the production url of your site here
@@ -71,15 +72,7 @@ const config = {
       "classic",
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
-        docs: {
-          sidebarPath: require.resolve("./sidebars.js"),
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
-          editUrl:
-            "https://github.com/neohaskell/neohaskell.github.io/tree/main/",
-          remarkPlugins: [math],
-          rehypePlugins: [katex],
-        },
+        docs: false,
         blog: {
           path: "blog/nhep/nhep",
           exclude: ["README.md"],
@@ -115,12 +108,6 @@ const config = {
           src: "img/logo.svg",
         },
         items: [
-          {
-            type: "docSidebar",
-            sidebarId: "tutorialSidebar",
-            position: "left",
-            label: "Support Us!",
-          },
           {
             href: "https://github.com/neohaskell/",
             label: "GitHub",
diff --git a/drafts/new-project.mdx b/drafts/new-project.mdx
index f8abdf5..3ad3ebf 100644
--- a/drafts/new-project.mdx
+++ b/drafts/new-project.mdx
@@ -10,7 +10,7 @@ import Badge from "@site/src/components/Badge";
 
 :::caution
 The documentation that you're reading is a design document where most of
-the features you're reading are yet to be implemented. Check the [Note on the Docs](/docs/docs-intro)
+the features described are yet to be implemented.
 :::
 
 Trying stuff in the REPL is cool and all that, but if you want to build something
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 9f71a5d..6a09234 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -1,23 +1,470 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
+.hero {
+  margin: 0 auto;
+  max-width: 92rem;
+  padding: 6rem 2rem 2rem;
+  text-align: center;
+}
+
+.hero h1 {
+  letter-spacing: -0.035em;
+  margin: 0 auto;
+  max-width: 16ch;
+}
+
+.heroLead {
+  font-size: clamp(1.125rem, 2vw, 1.5rem);
+  line-height: 1.6;
+  margin: 2rem auto 0;
+  max-width: 68ch;
+}
 
-.heroBanner {
-  padding: 4rem 0;
+.heroDiagram {
+  margin: 4rem auto 0;
+  max-width: 74rem;
+  text-align: left;
+}
+
+.content {
+  margin: 0 auto;
+  max-width: 78rem;
+  padding: 0 2rem 6rem;
+}
+
+.section {
+  margin: 8rem auto 0;
+}
+
+.sectionText {
+  max-width: 72ch;
+}
+
+.sectionText h2,
+.closing h2 {
+  font-size: clamp(2rem, 4vw, 3.5rem);
+  letter-spacing: -0.03em;
+  line-height: 1.15;
+  margin: 0 0 1.5rem;
+}
+
+.sectionText p,
+.closing p {
+  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
+  line-height: 1.7;
+  margin: 1.25rem 0 0;
+}
+
+.diagram {
+  background: white;
+  border: 4px solid black;
+  box-shadow: 8px 8px 0 black;
+  margin: 3rem 0 0;
+  padding: clamp(1.25rem, 3vw, 2.5rem);
+}
+
+.heroDiagram .diagram {
+  border: 0;
+  box-shadow: none;
+  margin: 0;
+  padding: 1rem 0;
+}
+
+.caption {
+  border-top: 2px solid black;
+  display: block;
+  font-family: "Ubuntu", sans-serif;
+  font-size: 1rem;
+  line-height: 1.55;
+  margin-top: 2rem;
+  padding-top: 1rem;
+}
+
+.flow {
+  align-items: stretch;
+  display: flex;
+  justify-content: center;
+}
+
+.flowStep {
+  align-items: center;
+  border: 3px solid black;
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 7.5rem;
+  padding: 1rem;
   text-align: center;
+}
+
+.flowStep strong {
+  font-family: "Lexend Mega", sans-serif;
+  font-size: clamp(0.9rem, 1.4vw, 1.15rem);
+  line-height: 1.25;
+}
+
+.flowStep span {
+  font-family: "Ubuntu", sans-serif;
+  line-height: 1.35;
+  margin-top: 0.45rem;
+}
+
+.cyan {
+  background: #cffafe;
+}
+
+.yellow {
+  background: #fef9c3;
+}
+
+.violet {
+  background: #ede9fe;
+}
+
+.flowConnector,
+.transitionConnector {
+  align-self: center;
+  background: black;
+  flex: 0 0 2rem;
+  height: 4px;
   position: relative;
-  overflow: hidden;
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
+.flowConnector::after,
+.transitionConnector::after {
+  border-bottom: 8px solid transparent;
+  border-left: 11px solid black;
+  border-top: 8px solid transparent;
+  content: "";
+  position: absolute;
+  right: -2px;
+  top: -6px;
+}
+
+.comparisonGrid {
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.comparisonPanel h3 {
+  font-size: 1.15rem;
+  letter-spacing: -0.02em;
+  margin: 0 0 1.5rem;
+  text-transform: uppercase;
+}
+
+.comparisonPanel > p {
+  font-size: 1rem;
+  line-height: 1.55;
+  margin: 1.5rem 0 0;
+}
+
+.stateTransition {
+  align-items: center;
+  display: flex;
+}
+
+.valueBlock {
+  border: 3px solid black;
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  min-width: 0;
+  padding: 1.25rem 0.75rem;
+  text-align: center;
+}
+
+.valueBlock span {
+  font-family: "Ubuntu", sans-serif;
+}
+
+.valueBlock strong {
+  font-family: "Lexend Mega", sans-serif;
+  font-size: clamp(1.8rem, 4vw, 3rem);
+  line-height: 1.1;
+  margin-top: 0.4rem;
 }
 
-.buttons {
+.timeline {
+  align-items: stretch;
   display: flex;
+  flex-direction: column;
+}
+
+.timelineItem {
+  align-items: center;
+  border: 3px solid black;
+  display: flex;
+  justify-content: space-between;
+  min-height: 3.75rem;
+  padding: 0.85rem 1rem;
+}
+
+.timelineItem strong,
+.timelineItem span {
+  font-family: "Comic Mono", monospace;
+}
+
+.timelineConnector {
+  align-self: center;
+  background: black;
+  height: 1rem;
+  width: 4px;
+}
+
+.foundationMap {
+  margin: 0;
+}
+
+.foundationRow {
+  align-items: center;
+  border-bottom: 2px solid black;
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: minmax(12rem, 0.8fr) 2fr;
+  padding: 1rem 0;
+}
+
+.foundationRow:first-child {
+  padding-top: 0;
+}
+
+.foundationRow:last-child {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+.foundationRow dt {
   align-items: center;
+  display: flex;
+  font-family: "Lexend Mega", sans-serif;
+  font-size: 1.05rem;
+  font-weight: 600;
+  gap: 0.8rem;
+}
+
+.foundationRow dt span {
+  align-items: center;
+  background: #cffafe;
+  border: 2px solid black;
+  border-radius: 999px;
+  display: inline-flex;
+  flex: 0 0 2.25rem;
+  height: 2.25rem;
   justify-content: center;
 }
+
+.foundationRow dd {
+  font-family: "Ubuntu", sans-serif;
+  font-size: 1.1rem;
+  margin: 0;
+}
+
+.costFigures {
+  display: grid;
+  gap: 2rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.costFigure h3 {
+  font-size: 1.15rem;
+  letter-spacing: -0.02em;
+  margin: 0 0 1.25rem;
+  text-transform: uppercase;
+}
+
+.costFigure > p {
+  font-size: 1rem;
+  line-height: 1.55;
+  margin: 1rem 0 0;
+}
+
+.costChart {
+  display: block;
+  height: auto;
+  overflow: visible;
+  width: 100%;
+}
+
+.chartAxis {
+  fill: none;
+  stroke: black;
+  stroke-width: 3;
+}
+
+.featureBlock {
+  fill: #cffafe;
+  stroke: black;
+  stroke-width: 2;
+}
+
+.reworkBlock {
+  fill: #fecaca;
+  stroke: black;
+  stroke-width: 2;
+}
+
+.blockLabel {
+  fill: black;
+  font-family: "Comic Mono", monospace;
+  font-size: 16px;
+  text-anchor: middle;
+}
+
+.risingCurve {
+  fill: none;
+  stroke: #ef4444;
+  stroke-width: 4;
+}
+
+.boundedCurve {
+  fill: none;
+  stroke: #0ea5e9;
+  stroke-width: 4;
+}
+
+.redArrow {
+  fill: #ef4444;
+}
+
+.blueArrow {
+  fill: #0ea5e9;
+}
+
+.curveLabel,
+.boundedLabel,
+.sharedLabel,
+.axisLabel {
+  fill: black;
+  font-family: "Comic Mono", monospace;
+  text-anchor: middle;
+}
+
+.curveLabel,
+.boundedLabel {
+  font-size: 14px;
+}
+
+.axisLabel,
+.sharedLabel {
+  font-size: 12px;
+}
+
+.sharedContract {
+  fill: none;
+  stroke: #9723c9;
+  stroke-width: 4;
+}
+
+.callout {
+  border-bottom: 3px solid black;
+  border-top: 3px solid black;
+  font-family: "Ubuntu", sans-serif;
+  font-size: clamp(1.2rem, 2vw, 1.6rem);
+  line-height: 1.6;
+  margin: 3.5rem 0 0;
+  max-width: 72ch;
+  padding: 1.5rem 0;
+}
+
+.closing {
+  margin-bottom: 2rem;
+}
+
+.closingContent {
+  padding: clamp(1rem, 3vw, 2rem);
+}
+
+.closingContent p {
+  max-width: 62ch;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.actions span {
+  font-family: "Lexend Mega", sans-serif;
+  font-size: 0.9rem;
+}
+
+@media screen and (max-width: 760px) {
+  .hero {
+    padding: 4rem 1rem 1rem;
+  }
+
+  .heroLead {
+    font-size: 1.1rem;
+  }
+
+  .heroDiagram {
+    margin-top: 2.5rem;
+  }
+
+  .content {
+    padding: 0 1rem 4rem;
+  }
+
+  .section {
+    margin-top: 5rem;
+  }
+
+  .flow {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .flowConnector,
+  .transitionConnector {
+    flex-basis: auto;
+    height: 2rem;
+    width: 4px;
+  }
+
+  .flowConnector::after,
+  .transitionConnector::after {
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 11px solid black;
+    bottom: -2px;
+    left: -6px;
+    right: auto;
+    top: auto;
+  }
+
+  .comparisonGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .costFigures {
+    grid-template-columns: 1fr;
+  }
+
+  .comparisonPanel + .comparisonPanel {
+    border-top: 3px solid black;
+    padding-top: 2rem;
+  }
+
+  .stateTransition {
+    flex-direction: column;
+  }
+
+  .valueBlock {
+    width: 100%;
+  }
+
+  .foundationRow {
+    align-items: start;
+    gap: 0.75rem;
+    grid-template-columns: 1fr;
+  }
+
+  .actions,
+  .actions a,
+  .actions button {
+    width: 100%;
+  }
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 727b691..cd65175 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,399 +1,431 @@
 import React from "react";
-import clsx from "clsx";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
-import HomepageFeatures from "@site/src/components/HomepageFeatures";
-import CodeBlock from "@theme/CodeBlock";
 
-import styles from "./index.module.css";
-import Frame from "../components/Frame";
 import Button from "../components/Button";
-import CodeFrame from "../components/CodeFrame";
-import Dialog from "../components/Dialog";
-import Modal from "../components/Modal";
-import Disclaimer from "../components/Disclaimer";
+import Frame from "../components/Frame";
+import styles from "./index.module.css";
 
-const dynC = (className: string, color: string) => `${className}-light${color}`;
+const flowSteps = [
+  { label: "Request", detail: "What should happen?", tone: "cyan" },
+  { label: "Decision", detail: "Accept or refuse", tone: "yellow" },
+  { label: "Accepted event", detail: "What happened", tone: "violet" },
+  { label: "Useful view", detail: "What is needed next", tone: "cyan" },
+] as const;
 
-function HomepageHeader() {
-  const { siteConfig } = useDocusaurusContext();
+function BehaviorFlow() {
+  return (
+    <figure className={styles.diagram} aria-labelledby="behavior-flow-caption">
+      <div className={styles.flow}>
+        {flowSteps.map((step, index) => (
+          <React.Fragment key={step.label}>
+            <div className={`${styles.flowStep} ${styles[step.tone]}`}>
+              <strong>{step.label}</strong>
+              <span>{step.detail}</span>
+            </div>
+            {index < flowSteps.length - 1 ? (
+              <span className={styles.flowConnector} aria-hidden="true" />
+            ) : null}
+          </React.Fragment>
+        ))}
+      </div>
+      <figcaption id="behavior-flow-caption" className={styles.caption}>
+        A request is checked against the rules before an event is accepted.
+        Views are derived from accepted history.
+      </figcaption>
+    </figure>
+  );
+}
+
+function HistoryComparison() {
   return (
-    <header className={`${dynC("text", "text")}`}>
-      <div className="px-8 my-24">
-        <div className="mb-10">
-          <div className="">
-            <h1 className="text-center tracking-supatight leading-relaxed lg:text-7xl md:text-6xl sm:text-5xl text-3xl">
-              Software Development Is Broken.{" "}
-              <span className=" text-lightsecondary ">
-                We're Fixing It From The Language Up.
-              </span>
-            </h1>
+    <figure className={styles.diagram} aria-labelledby="history-caption">
+      <div className={styles.comparisonGrid}>
+        <div className={styles.comparisonPanel}>
+          <h3>Current value only</h3>
+          <div className={styles.stateTransition}>
+            <div className={`${styles.valueBlock} ${styles.violet}`}>
+              <span>Balance</span>
+              <strong>€100</strong>
+            </div>
+            <span className={styles.transitionConnector} aria-hidden="true" />
+            <div className={`${styles.valueBlock} ${styles.violet}`}>
+              <span>Balance</span>
+              <strong>€70</strong>
+            </div>
+          </div>
+          <p>The new value replaces the old one. The reason is elsewhere.</p>
+        </div>
+
+        <div className={styles.comparisonPanel}>
+          <h3>Accepted history</h3>
+          <div className={styles.timeline}>
+            <div className={`${styles.timelineItem} ${styles.cyan}`}>
+              <strong>AccountOpened</strong>
+              <span>+€100</span>
+            </div>
+            <span className={styles.timelineConnector} aria-hidden="true" />
+            <div className={`${styles.timelineItem} ${styles.cyan}`}>
+              <strong>CashWithdrawn</strong>
+              <span>-€30</span>
+            </div>
+            <span className={styles.timelineConnector} aria-hidden="true" />
+            <div className={`${styles.timelineItem} ${styles.violet}`}>
+              <strong>Current balance</strong>
+              <span>€70</span>
+            </div>
           </div>
+          <p>The current value is reconstructed from the recorded facts.</p>
         </div>
       </div>
-      <div className="mx-auto mb-4 lg:w-2/3">
-        <Frame rainbow>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10">
-            Every successful software company follows the same tragic arc:
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - <strong>Day one:</strong> pure creativity, features ship in hours,
-            everyone understands everything.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - <strong>Year one:</strong> velocity slows, meetings multiply, "technical debt"
-            enters the vocabulary.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - <strong>Year three:</strong> the rewrite discussions begin.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - <strong>Year five:</strong> half your budget maintains what the other half tries to
-            replace.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            <strong>This isn't incompetence. It's not bad management.</strong> It's the
-            inevitable result of building on foundations that turn human
-            thoughts into machine instructions through layers of mistranslation.
-          </p>
-          <h2 className="text-4xl">The Broken Telephone Architecture</h2>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            Watch how a simple business need travels through your organization:
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            The CEO says: "When customers upgrade, we should celebrate with
-            them."
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            The CTO interprets: "Upon plan upgrade, trigger celebration
-            workflow."
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            The Product Manager writes: "Implement upgrade handler with
-            notification service integration."
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            The Developer codes:{" "}
-            <pre>
-              <code>
-                UPDATE users SET plan = 'premium'; INSERT INTO notifications...
-              </code>
-            </pre>
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            Six months later, nobody remembers why that code exists. The
-            celebration feature breaks. The developer who wrote it left. The new
-            developer is afraid to touch it. <strong>The cycle of decay has begun.</strong>
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            <strong>This isn't a people problem. It's a technology problem.</strong> We're
-            forcing humans to speak machine when machines should speak human.
-          </p>
-          <h2 className="text-4xl">Technology Shapes Thought</h2>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            The tools we use shape how we think. When your language forces you
-            to express everything as CREATE, READ, UPDATE, DELETE, you start
-            seeing the world as records to manipulate rather than events that
-            happen. You stop thinking "customer upgraded" and start thinking
-            "update customer record."
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            <strong>This subtle shift is poison.</strong> It disconnects your code from your
-            business. It makes simple things complex. It makes change dangerous.
-            It makes your software brittle where it should be antifragile.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            The oldest ideas survive because everything unnecessary has been
-            stripped away. <strong>Double-entry bookkeeping has worked for 700 years.</strong>
-            Event ledgers are how humans naturally think about change. Banks
-            don't UPDATE your balance; they record deposits and withdrawals.
-            History doesn't UPDATE the past; it records what happened.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            <strong>Why did we abandon this natural model for CRUD?</strong>
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            Because storage was expensive. Because computers were slow. Because
-            we optimized for machines instead of humans.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            <strong>Those constraints are gone. It's time for software development to
-            become human again.</strong>
-          </p>
-          <h2 className="text-4xl">
-            Enter NeoHaskell: Where Business Events Become Code
-          </h2>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            <strong>NeoHaskell isn't just another programming language.</strong> It's a
-            fundamental rethinking of how human intention becomes running
-            software.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            When your business team says "customer plan upgraded" that's
-            literally how you write it:
-          </p>
+      <figcaption id="history-caption" className={styles.caption}>
+        Illustrative account history. The application must explicitly model the
+        facts, reasons, authority, and evidence it needs to retain.
+      </figcaption>
+    </figure>
+  );
+}
+
+function FoundationMap() {
+  const foundations = [
+    ["Command / request", "Represents an intended change"],
+    ["Entity", "Reconstructs current state from prior events"],
+    ["Decision", "Accepts or refuses the request"],
+    ["Event", "Records an accepted domain fact"],
+    ["Query", "Builds a view for a particular question"],
+  ];
+
+  return (
+    <figure className={styles.diagram} aria-labelledby="foundation-caption">
+      <dl className={styles.foundationMap}>
+        {foundations.map(([term, description], index) => (
+          <div className={styles.foundationRow} key={term}>
+            <dt>
+              <span>{index + 1}</span>
+              {term}
+            </dt>
+            <dd>{description}</dd>
+          </div>
+        ))}
+      </dl>
+      <figcaption id="foundation-caption" className={styles.caption}>
+        These are explicit structures in the program, and the Neo IDE can show
+        their relationships.
+      </figcaption>
+    </figure>
+  );
+}
+
+function GrowthComparison() {
+  const features = ["A", "B", "C", "D", "E", "F", "G"];
+  const reworkLayers = [0, 0, 0, 1, 1, 2, 3];
+
+  return (
+    <figure className={styles.diagram} aria-labelledby="growth-caption">
+      <div className={styles.costFigures}>
+        <div className={styles.costFigure}>
+          <h3>Implicit dependencies</h3>
+          <svg
+            className={styles.costChart}
+            viewBox="0 0 460 280"
+            role="img"
+            aria-label="Chart showing rework accumulating as more behaviors depend on hidden shared assumptions"
+          >
+            <title>Implicit dependencies increase rework</title>
+            <defs>
+              <marker
+                id="red-arrow"
+                markerHeight="8"
+                markerWidth="8"
+                orient="auto"
+                refX="7"
+                refY="4"
+              >
+                <path d="M0,0 L8,4 L0,8 Z" className={styles.redArrow} />
+              </marker>
+            </defs>
+            <path className={styles.chartAxis} d="M42 24 V230 H430" />
+            <path
+              className={styles.risingCurve}
+              d="M54 172 C155 164 268 134 410 40"
+              markerEnd="url(#red-arrow)"
+            />
+            <text className={styles.curveLabel} x="245" y="105">
+              widening change surface
+            </text>
+            {features.map((feature, index) => {
+              const x = 56 + index * 51;
+              const layers = reworkLayers[index];
+              return (
+                <g key={feature}>
+                  {Array.from({ length: layers }).map((_, layer) => (
+                    <g key={layer}>
+                      <rect
+                        className={styles.reworkBlock}
+                        height="36"
+                        width="44"
+                        x={x}
+                        y={184 - layer * 38}
+                      />
+                      <text
+                        className={styles.blockLabel}
+                        x={x + 22}
+                        y={207 - layer * 38}
+                      >
+                        R
+                      </text>
+                    </g>
+                  ))}
+                  <rect
+                    className={styles.featureBlock}
+                    height="36"
+                    width="44"
+                    x={x}
+                    y={184 - layers * 38}
+                  />
+                  <text
+                    className={styles.blockLabel}
+                    x={x + 22}
+                    y={207 - layers * 38}
+                  >
+                    {feature}
+                  </text>
+                </g>
+              );
+            })}
+            <text className={styles.axisLabel} x="236" y="267">
+              behaviors in the system
+            </text>
+            <text
+              className={styles.axisLabel}
+              transform="rotate(-90 15 134)"
+              x="15"
+              y="134"
+            >
+              relative change effort
+            </text>
+          </svg>
           <p>
-            <CodeBlock className="!rounded-none !mb-0" language="haskell">
-              {`data CustomerPlanUpgraded = CustomerPlanUpgraded
-  { customer :: CustomerId,
-    fromPlan :: Plan,
-    toPlan :: Plan,
-    upgradeDate :: DateTime
-  }
-`}
-            </CodeBlock>
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            <strong>No translation. No abstraction. No impedance mismatch.</strong> Your business
-            logic reads like a business conversation.
-          </p>
-          <h2 className="text-4xl">What Makes NeoHaskell Different</h2>
-          <h2 className="text-3xl my-10">
-            Event Sourcing Is The Language, Not A Library
-          </h2>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            Other languages make you fight for event sourcing. You need
-            frameworks, libraries, careful discipline. One mistake and you're
-            back in CRUD hell.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            In NeoHaskell, <strong>event sourcing isn't something you add. It's
-            something you'd have to work to avoid.</strong> Every state change is an
-            event. Every event is immutable. Every system is automatically
-            auditable, replayable, debuggable.{" "}
-            <strong>
-              The compiler doesn't let you store something in the database where
-              you're not supposed to.
-            </strong>
-          </p>
-          <h2 className="text-3xl my-10">
-            Mathematical Guarantees, Human Expression
-          </h2>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            From Haskell, we inherit something profound: <strong>if it compiles, it
-            works.</strong> This isn't marketing, it's math. Entire categories of errors
-            become impossible. Race conditions, null pointer exceptions, type
-            mismatches, all gone.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            But unlike Haskell, we've optimized for developer happiness, and we
-            chase your success at all costs. The standard library feels
-            familiar. There are no millions of operators to memorize. The
-            concepts map to how you already think. The error messages actually
-            help.
-          </p>
-          <h2 className="text-3xl my-10">
-            Linear Complexity In A Exponential World
-          </h2>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            In traditional systems, feature #100 might take 10x longer than
-            feature #10. Dependencies tangle. Side effects multiply. Fear creeps
-            in.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            In NeoHaskell, <strong>feature #1000 takes the same effort as feature #1.</strong>
-            New events don't break old ones. New handlers don't destabilize
-            existing ones. Your system grows by addition, never by modification.
-          </p>
-          <h2 className="text-4xl my-10">Where We Are Today</h2>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            NeoHaskell is not complete. We're building this in public, with real
-            production users, solving real problems.
-          </p>
-          <h2 className="text-3xl my-10">What's Already Working:</h2>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - A Beautiful Standard Library: Carefully crafted APIs that make
-            simple things trivial and complex things possible. Every function
-            documented, every pattern thoughtful.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - Production-Ready Concurrency: Channels for message passing. Locks
-            when you need them. Thread-safe variables that actually work. These
-            are the primitives NeoHaskell is built on top of, ensuring your
-            system is not only correct, but also blazing fast.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - In-Memory Event Store: Perfect for development and testing. Your
-            events are safe, queryable, replayable.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - PostgreSQL Event Store (In Progress): Because production needs
-            production databases. Built on boring, bulletproof technology.
-            Coming together beautifully.
-          </p>
-          <h2 className="text-3xl my-10">What's Coming:</h2>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            We're building toward a complete platform that generates everything
-            you need from your event model. Automatic API generation.
-            Infrastructure that scales. Deployment that just works. The ease of
-            low-code with the power of real programming.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            Imagine describing your business events and getting:
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - A GraphQL (or Swagger, or gRPC, or...!) API that updates in
-            real-time
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - A scalable infrastructure that handles millions of events
+            Hidden shared assumptions widen the change surface. Red blocks
+            represent rework in earlier behavior.
           </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - Complete observability—know everything that ever happened
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - Time travel debugging—replay any scenario instantly
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - The ability to fork a stream of events from your production
-            environment to your development environment for debugging
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - Perfect audit trails—compliance becomes trivial
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            This isn't fantasy. We've already done parts of this in the past.
-            With every release, more becomes automatic.
-          </p>
-          <h2 className="text-4xl my-10">
-            The Philosophy: Remove Everything That Gets In The Way
-          </h2>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            We're not adding features for their own sake. Every decision follows
-            a simple principle: <strong>does this remove friction between human
-            intention and running software?</strong>
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - <strong>Configuration files? Removed.</strong> Your code should express intent
-            clearly enough.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - <strong>Dependency hell? Removed.</strong> One tool, one purpose, one way that
-            works.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - <strong>DevOps complexity? Removed.</strong> From code to cloud in one command.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - <strong>The fear of change? Removed.</strong> If it compiles, it works.
-          </p>
-          <h2 className="text-4xl my-10">Who This Is For</h2>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            You're a startup founder who knows that initial technical decisions
-            determine your company's fate. You can't afford to be rewriting in
-            two years when you should be scaling.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            You're an enterprise architect tired of managing complexity instead
-            of creating value. You want systems that grow gracefully, not ones
-            that calcify.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            You're a developer who came to this field to build, not to debug.
-            You want to write business logic, not boilerplate.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            You're a product manager exhausted by "technical limitations." You
-            want your ideas to become features, not tickets that languish in
-            backlogs.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            You're a CEO who suspects you're spending too much on engineering
-            for too little output. You're right. And it's not your team's fault.
-          </p>
-          <h2 className="text-4xl my-10">The Invitation</h2>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            We're not asking you to trust us blindly. We're building this with
-            real companies, solving real problems, in production, today.
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            If you're tired of:
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - Features that get exponentially harder to implement
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - Teams that grow faster than output
-          </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - Systems that everyone fears to change
+        </div>
+
+        <div className={styles.costFigure}>
+          <h3>Visible slices and contracts</h3>
+          <svg
+            className={styles.costChart}
+            viewBox="0 0 460 280"
+            role="img"
+            aria-label="Chart showing additive behavior slices with a bounded change surface"
+          >
+            <title>Visible slices keep changes local</title>
+            <defs>
+              <marker
+                id="blue-arrow"
+                markerHeight="8"
+                markerWidth="8"
+                orient="auto"
+                refX="7"
+                refY="4"
+              >
+                <path d="M0,0 L8,4 L0,8 Z" className={styles.blueArrow} />
+              </marker>
+            </defs>
+            <path className={styles.chartAxis} d="M42 24 V230 H430" />
+            <path
+              className={styles.boundedCurve}
+              d="M54 166 C155 164 292 160 410 152"
+              markerEnd="url(#blue-arrow)"
+            />
+            <text className={styles.boundedLabel} x="205" y="140">
+              Event Modeled
+            </text>
+            {features.map((feature, index) => {
+              const x = 56 + index * 51;
+              return (
+                <g key={feature}>
+                  <rect
+                    className={styles.featureBlock}
+                    height="36"
+                    width="44"
+                    x={x}
+                    y="184"
+                  />
+                  <text className={styles.blockLabel} x={x + 22} y="207">
+                    {feature}
+                  </text>
+                </g>
+              );
+            })}
+            <path className={styles.sharedContract} d="M56 220 H406" />
+            <text className={styles.sharedLabel} x="230" y="247">
+              shared contracts remain visible
+            </text>
+            <text className={styles.axisLabel} x="236" y="267">
+              behaviors in the system
+            </text>
+            <text
+              className={styles.axisLabel}
+              transform="rotate(-90 15 134)"
+              x="15"
+              y="134"
+            >
+              relative change effort
+            </text>
+          </svg>
+          <p>
+            Each slice gives the team a boundary to implement and test.
+            Shared contracts remain explicit coordination points.
           </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            - The constant specter of "the rewrite"
+        </div>
+      </div>
+      <figcaption id="growth-caption" className={styles.caption}>
+        Event Modeling gives each behavior a visible blueprint. NeoHaskell
+        turns that blueprint into typed Commands, Decisions, Events, Entities,
+        and Queries.
+      </figcaption>
+    </figure>
+  );
+}
+
+function HomepageHeader() {
+  return (
+    <header className={styles.hero}>
+      <h1 className="leading-relaxed lg:text-7xl md:text-6xl sm:text-5xl text-3xl">
+        Know what your software does.{" "}
+        <span className="text-lightsecondary">Explain why it did it.</span>
+      </h1>
+      <p className={styles.heroLead}>
+        NeoHaskell helps teams model a change as a request, a decision, a
+        recorded event, and a view. Those concepts stay visible from design
+        through implementation, so the current state has a history and the next
+        change has a place to start.
+      </p>
+      <div className={styles.heroDiagram}>
+        <Frame rainbow>
+          <BehaviorFlow />
+        </Frame>
+      </div>
+    </header>
+  );
+}
+
+function HomepageBody() {
+  return (
+    <main className={styles.content}>
+      <section className={styles.section}>
+        <div className={styles.sectionText}>
+          <h2>A Current Value Is A Summary</h2>
+          <p>
+            A balance of €70 tells you where an account ended, but not how it
+            got there. In an application backed by a persistent event store,
+            accepted events can provide the history from which current state is
+            reconstructed.
           </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            <strong>Join us.</strong>
+        </div>
+        <HistoryComparison />
+        <p className={styles.callout}>
+          History answers only the questions the application was designed to
+          preserve. Reasons, evidence, attribution, privacy, and retention are
+          still explicit design choices.
+        </p>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.sectionText}>
+          <h2>One Model, Carried Through The Toolchain</h2>
+          <p>
+            Event sourcing and domain modeling can be implemented in many
+            languages. NeoHaskell is designed to make their core concepts part
+            of the application model rather than conventions every team must
+            recreate.
           </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            <strong>Software development should be joyful, not painful.</strong> Systems should
-            become more valuable over time, not more dangerous. Technology
-            should amplify human creativity, not constrain it. <strong>Your 1000th day
-            of development should feel like your first.</strong>
+        </div>
+        <FoundationMap />
+        <p className={styles.callout}>
+          Types can make some invalid combinations unrepresentable. The
+          compiler catches type mismatches and can require exhaustive handling
+          where code uses closed alternatives. Tests exercise the policies and
+          boundary cases they cover. None of these checks can decide whether a
+          business rule is fair, complete, or right for the real world.
+        </p>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.sectionText}>
+          <h2>Add Behavior In Visible Slices</h2>
+          <p>
+            A behavior slice follows one useful change from request through
+            decision and accepted event to the view needed next. Stable
+            boundaries keep change local instead of forcing contributors to
+            reinterpret the whole system.
           </p>
-          <h2 className="text-4xl my-10">Start Today</h2>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            NeoHaskell is ready for pioneers. If you're building something new,
-            if you're ready to escape the rewrite trap, if you believe software
-            can be better: We're waiting for you.
+        </div>
+        <GrowthComparison />
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.sectionText}>
+          <h2>Correct Mistakes Without Erasing Them</h2>
+          <p>
+            If a withdrawal is recorded twice, changing the balance repairs the
+            number but not the history. A domain can instead define a request
+            to reverse the duplicate, a decision that checks whether it is
+            allowed, and a compensating event that records the correction.
           </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            <strong>The revolution isn't coming. It's being typed right now,</strong> one event
-            at a time, by developers who refuse to accept that suffering is the
-            price of scale.
+          <p>
+            Human- and agent-initiated changes can be routed through the same
+            request and authorization path. Automation can assist
+            implementation or submit a request; the team still owns the rule,
+            the authority to apply it, and the evidence that must be retained.
           </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            <strong>
-              Welcome to NeoHaskell. Welcome to software development as it
-              should be.
-            </strong>
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.sectionText}>
+          <h2>Use It Where History Earns Its Cost</h2>
+          <p>
+            This approach is strongest in domains with meaningful lifecycles:
+            orders, accounts, approvals, grants, projects, memberships, and
+            other systems where disputes, audit, or accountability matter.
           </p>
-          <p className="text-left md:text-2xl sm:text-xl text-lg justify-normal my-10 ">
-            <i>
-              The old world optimizes for machines. We're optimizing for humans.
-              Join us.
-            </i>
+          <p>
+            Simple content sites, disposable prototypes, static lookup data,
+            and workflows with no meaningful history may be better served by
+            conventional tools. Event sourcing introduces modeling and
+            operational costs; those costs should solve a real problem.
           </p>
-        </Frame>
-      </div>
-      <VideoPlayer />
-      <div className="relative text-center mx-auto mt-20 mb-10">
-        <div className="flex lg:flex-row flex-col justify-center gap-10">
-          <Link to="/docs/docs-intro">
-            <Button color="yellow" rounded="full" size="lg" className="w-full">
-              <h2 className="mx-4 my-2 sm:text-2xl text-xl">
-                Support the Project
-              </h2>
-            </Button>
-          </Link>
-          <Link to="https://discord.com/invite/wDj3UYzec8">
-            <Button color="violet" rounded="full" size="lg" className="w-full">
-              <h2 className="mx-4 my-2 sm:text-2xl text-xl">
-                Join the Discord server
-              </h2>
-            </Button>
-          </Link>
         </div>
-      </div>
-    </header>
-  );
-}
+      </section>
 
-function VideoPlayer({ enabled }: { enabled?: boolean }) {
-  return enabled ? (
-    <div className="mx-auto mt-24 width-full max-w-6xl">
-      <div className="relative overflow-hidden h-0 pb-16-9">
-        <iframe
-          className="absolute top-0 left-0 w-full h-full max-w-full"
-          src="https://www.youtube.com/embed/VM-2OVNt-eQ?si=A7JKcVobgEpi1fvt"
-          title="YouTube video player"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-          allowFullScreen
-        />
-      </div>
-    </div>
-  ) : (
-    <></>
+      <section className={`${styles.section} ${styles.closing}`}>
+        <Frame background="bg-yellow-200">
+          <div className={styles.closingContent}>
+            <h2>Start With One Rule You Can Explain</h2>
+            <p>
+              Pick one behavior. Name the request, the decision, the fact worth
+              keeping, and the information someone needs next. That gives the
+              implementation a shared model to preserve.
+            </p>
+            <div className={styles.actions}>
+              <Link to="https://github.com/neohaskell">
+                <Button color="yellow" rounded="full" size="lg">
+                  <span>Explore on GitHub</span>
+                </Button>
+              </Link>
+              <Link to="https://discord.com/invite/wDj3UYzec8">
+                <Button color="violet" rounded="full" size="lg">
+                  <span>Join the Discord Server</span>
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </Frame>
+      </section>
+    </main>
   );
 }
 
@@ -401,74 +433,8 @@ export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
     <Layout description={`${siteConfig.tagline}`}>
-      <div className="container">
-        {/* <Disclaimer /> */}
-        <HomepageHeader />
-
-        {/* <main className="pt-32">
-          <HomepageFeatures />
-          <div className="relative">
-            <img
-              className="absolute sm:h-36 h-24 top-0 -z-10"
-              src="img/Star1.svg"
-            />
-            <img
-              className="absolute sm:h-36 h-24 bottom-0 right-0 -z-10 "
-              src="img/Star2.svg"
-            />
-            <div className="lg:mx-32 mx-0 mb-32">
-              <Frame>
-                <div className="lg:p-16 p-0 flex flex-col gap-8">
-                  <img src="img/logo.svg" className="mx-auto lg:h-64 h-32" />
-                  <h2 className="text-center md:text-4xl text-2xl">
-                    A Community for People Like You
-                  </h2>
-                  <div className="flex flex-col gap-8 text-lg">
-                    <p>
-                      NeoHaskell is a community of people who are passionate
-                      about delivering software in an efficient and enjoyable
-                      way. We believe that programming should be fun, and that
-                      the best way to learn is to build things.
-                    </p>
-                    <p>
-                      Therefore, NeoHaskell is a work in progress project. We
-                      are aiming to build a language that is delightful to learn
-                      and use,{" "}
-                      <b>
-                        strongly focusing on optimizing developers' happiness
-                      </b>
-                      .
-                    </p>
-                    <p>
-                      Whether you're a freshman or a senior, a hacker or a
-                      rocket scientist, you'll find a place in our community.
-                    </p>
-                    <p>
-                      Together, we are building the best language for the next
-                      generation of developers. Join us!
-                    </p>
-                  </div>
-                  <div className="mx-auto">
-                    <Button
-                      className="mx-auto"
-                      color="violet"
-                      rounded="full"
-                      size="lg"
-                    >
-                      <a
-                        href="https://discord.com/invite/wDj3UYzec8"
-                        target="_blank"
-                      >
-                        <h3>JOIN THE DISCORD SERVER!</h3>
-                      </a>
-                    </Button>
-                  </div>
-                </div>
-              </Frame>
-            </div>
-          </div>
-        </main> */}
-      </div>
+      <HomepageHeader />
+      <HomepageBody />
     </Layout>
   );
 }