From a5dfc9d0c7c930f8eb30c4217ba37b79d25c2f69 Mon Sep 17 00:00:00 2001
From: KtorZ <matthias.benkort@gmail.com>
Date: Fri, 29 Mar 2024 18:31:49 +0100
Subject: [PATCH] Finalize project layout.

---
 src/components/Card.astro                |  13 +-
 src/components/ExternalLink.astro        |   2 +-
 src/components/Footer.astro              |   6 +-
 src/components/Hero.astro                |  33 ++
 src/components/Pattern.astro             |   5 +
 src/components/Section.astro             |   6 +-
 src/components/roadmaps/Journey.astro    | 462 +++++++++++++++++++++++
 src/content/maintainers/microproofs.yaml |   8 +
 src/content/maintainers/rvcas.yaml       |   8 +
 src/content/projects/aiken.md            |  44 +++
 src/content/projects/amaru.md            |  83 ++--
 src/css/global.css                       |  81 +++-
 src/layouts/base.astro                   |   1 +
 src/layouts/project.astro                | 293 ++++++++++++++
 src/pages/about.astro                    |   8 +-
 src/pages/faq.astro                      |   7 -
 src/pages/index.astro                    |  74 ++--
 src/pages/members.astro                  |   7 +-
 src/pages/projects/aiken.astro           |   8 +
 src/pages/projects/amaru.astro           | 413 +-------------------
 20 files changed, 1054 insertions(+), 508 deletions(-)
 create mode 100644 src/components/Hero.astro
 create mode 100644 src/components/roadmaps/Journey.astro
 create mode 100644 src/content/maintainers/microproofs.yaml
 create mode 100644 src/content/maintainers/rvcas.yaml
 create mode 100644 src/content/projects/aiken.md
 create mode 100644 src/layouts/project.astro
 create mode 100644 src/pages/projects/aiken.astro

diff --git a/src/components/Card.astro b/src/components/Card.astro
index 5317348..e4765ae 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -20,7 +20,7 @@ const pixels = Array.from(digest).map((digit) => {
   <div class="pixel" data-x={pixels[0].x} data-y="0"></div>
   <div class="pixel" data-x={pixels[1].x} data-y="0"></div>
   <div class="pixel" data-x={pixels[2].x} data-y="0"></div>
-  <h3>{title}</h3>
+  <h4>{title}</h4>
   <p class="justified"><slot /></p>
   <a class="no-effect" href={href} aria-label={title}></a>
   <span class="more">
@@ -44,7 +44,7 @@ const pixels = Array.from(digest).map((digit) => {
     flex: 1 1 0;
     background: var(--color-primary-dark);
     padding: var(--gap-lg);
-    min-height: calc(max(28rem, min(55vh, 55vw)));
+    min-height: calc(max(30rem, min(60vh, 60vw)));
     position: relative;
   }
 
@@ -93,11 +93,9 @@ const pixels = Array.from(digest).map((digit) => {
     }
   }
 
-  h3 {
+  h4 {
     font-family: var(--font-secondary);
     color: var(--color-secondary);
-    margin-bottom: var(--gap-md);
-    font-size: 1.5em;
     font-weight: 300;
   }
 
@@ -105,15 +103,16 @@ const pixels = Array.from(digest).map((digit) => {
     display: inline-block;
     color: var(--color-secondary);
     font-family: var(--font-mono);
-    font-variant: small-caps;
     margin-top: auto;
     text-decoration: none;
+    font-size: 0.8em;
     text-align: right;
+    text-transform: uppercase;
     position: relative;
 
     & > svg.icon.slide {
       position: absolute;
-      top: 0.1em;
+      top: 0.2em;
       right: 0;
       opacity: 0;
       transition: all 100ms ease-in;
diff --git a/src/components/ExternalLink.astro b/src/components/ExternalLink.astro
index c8b8c34..33b5a53 100644
--- a/src/components/ExternalLink.astro
+++ b/src/components/ExternalLink.astro
@@ -6,6 +6,6 @@ type Props = HTMLAttributes<'a'>;
 const { href, ...attributes } = Astro.props;
 ---
 
-<a href={href} {...attributes}>
+<a href={href} target="_blank" {...attributes}>
   <slot /><svg class="icon slide"><use xlink:href="#external-link"></use></svg>
 </a>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index da4bea3..a28068f 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -21,7 +21,7 @@ const twitterUrl = `https://twitter.com/${socials.twitter}`;
       <use xlink:href="#logo-mark"></use>
     </svg>
     <aside>
-      <h2>Build together. With PRAGMA.</h2>
+      <h4>Build together. With PRAGMA.</h4>
 
       <ul class="flex-col">
         <li><a href="/privacy-policy">Privacy Policy</a></li>
@@ -89,10 +89,8 @@ const twitterUrl = `https://twitter.com/${socials.twitter}`;
     }
   }
 
-  h2 {
+  h4 {
     grid-area: title;
-    font-size: 2em;
-    margin-bottom: var(--gap-md);
   }
 
   ul {
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
new file mode 100644
index 0000000..0855bf6
--- /dev/null
+++ b/src/components/Hero.astro
@@ -0,0 +1,33 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+import Grid from '../components/Grid.astro';
+
+interface Props extends HTMLAttributes<'section'> {
+  title: string;
+  tag: string;
+}
+
+const { title, tag, ...props } = Astro.props;
+---
+
+<header {...props}>
+  <span class="tag">{tag}</span>
+  <h1>{title}</h1>
+  <slot />
+</header>
+
+<Grid rows={1} actives={new Set([2, 3, 6, 7, 8, 9, 12, 13, 18, 19])} />
+
+<style>
+  header {
+    padding: var(--gap-md);
+  }
+
+  span.tag {
+    font-size: 0.8em;
+    display: inline-block;
+    font-family: var(--font-mono);
+    color: var(--color-secondary);
+  }
+</style>
diff --git a/src/components/Pattern.astro b/src/components/Pattern.astro
index 05dd94c..9ba0fb7 100644
--- a/src/components/Pattern.astro
+++ b/src/components/Pattern.astro
@@ -71,6 +71,11 @@ const patternId = createHash('sha256')
 </svg>
 
 <style>
+  svg {
+    outline: 1px solid var(--color-primary);
+    outline-offset: -1px;
+  }
+
   svg pattern > polygon {
     filter: url(#outline);
     fill: transparent;
diff --git a/src/components/Section.astro b/src/components/Section.astro
index 3653612..9cebfd2 100644
--- a/src/components/Section.astro
+++ b/src/components/Section.astro
@@ -20,18 +20,16 @@ const { title, tag, ...props } = Astro.props;
     padding: var(--gap-md);
 
     & h2 {
-      font-size: 2.5em;
-      max-width: 65vw;
+      max-width: 55vw;
       text-align: center;
-      margin-bottom: var(--gap-md);
     }
   }
 
   span.tag {
+    font-size: 0.8em;
     display: inline-block;
     font-family: var(--font-mono);
     color: var(--color-secondary);
-    margin-bottom: var(--gap-md);
   }
 
   @media (max-width: 770px) {
diff --git a/src/components/roadmaps/Journey.astro b/src/components/roadmaps/Journey.astro
new file mode 100644
index 0000000..a6d15c0
--- /dev/null
+++ b/src/components/roadmaps/Journey.astro
@@ -0,0 +1,462 @@
+---
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import rehypeStringify from 'rehype-stringify';
+
+import Pattern from '../../components/Pattern.astro';
+import Section from '../../components/Section.astro';
+import ExternalLink from '../../components/ExternalLink.astro';
+
+const { roadmap, title } = Astro.props;
+
+const render = (md) =>
+  unified()
+    .use(remarkParse)
+    .use(remarkRehype)
+    .use(rehypeStringify)
+    .processSync(md);
+---
+
+<Section tag="Journey" id="journey" title={title}>
+  <div class="wrapper">
+    <>
+      {
+        roadmap.phases.flatMap((phase, ix) => {
+          const milestones = phase.milestones.flatMap((milestone, jx) => (
+            <>
+              <input
+                type="radio"
+                name="roadmap"
+                id={`milestone-${ix + 1}-${jx + 1}`}
+                class={`milestone phase-${ix + 1} milestone-${jx + 1}`}
+                value={milestone.title}
+              />
+              <label
+                style={`--color: ${phase.color}`}
+                for={`milestone-${ix + 1}-${jx + 1}`}
+                class="milestone">
+                <>
+                  <span />
+                  <span>{milestone.when}</span>
+                </>
+              </label>
+            </>
+          ));
+          const checked = ix === 0;
+          return (
+            <>
+              <input
+                type="radio"
+                name="roadmap"
+                id={`phase-${ix + 1}`}
+                class={`phase phase-${ix + 1}`}
+                value={`Phase ${ix + 1}`}
+                {checked}
+              />
+              <label
+                style={`--color: ${phase.color}`}
+                data-number={ix + 1}
+                for={`phase-${ix + 1}`}
+                class="phase">
+                <>
+                  <span>Phase {ix + 1}</span>
+                  <span>{phase.start}</span>
+                </>
+              </label>
+              <>{milestones}</>
+            </>
+          );
+        })
+      }
+    </>
+
+    <main>
+      <>
+        {
+          roadmap.phases.map((phase, ix) => (
+            <article data-phase={ix + 1} style={`--color: ${phase.color};`}>
+              <h3 data-number={ix + 1}>{phase.name}</h3>
+              <>{render(phase.description)}</>
+              <hr />
+              <>
+                {phase.milestones.map((milestone, jx) => (
+                  <div data-milestone={jx + 1} class="milestone">
+                    <div class="content">
+                      <Pattern actives={new Set(milestone.pattern)} />
+                      <div class="flex-col">
+                        <h4
+                          data-milesone={`${ix + 1}.${jx + 1}`}
+                          data-when={milestone.when}>
+                          {milestone.title}
+                        </h4>
+                        <>{render(milestone.description)}</>
+                        <hr />
+                        <ExternalLink href={milestone.link} class="more">
+                          Read more
+                        </ExternalLink>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </>
+              <div class="wrapper">
+                <ul>
+                  {phase.packages.map((pkg, jx) => {
+                    const checked = jx === 0;
+                    return (
+                      <li>
+                        <input
+                          type="radio"
+                          name={`work-packages-${ix + 1}`}
+                          id={`pkg-${ix + 1}-${jx + 1}`}
+                          value={pkg.title}
+                          class="package"
+                          checked={checked}
+                        />
+                        <label for={`pkg-${ix + 1}-${jx + 1}`}>
+                          {pkg.title}
+                        </label>
+                        <aside class={`pkg-${ix + 1}-${jx + 1}`}>
+                          <h4 data-pkg={`${ix + 1}.${jx + 1}`}>{pkg.title}</h4>
+                          <>{render(pkg.description)}</>
+                          <hr />
+                          <ExternalLink href={pkg.link} class="more">
+                            Read more
+                          </ExternalLink>
+                        </aside>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            </article>
+          ))
+        }
+      </>
+    </main>
+  </div>
+</Section>
+
+<style>
+  ul {
+    margin: 0;
+    list-style: none;
+  }
+
+  input[type='radio'].phase,
+  input[type='radio'].milestone,
+  input[type='radio'].package {
+    display: none;
+  }
+
+  input[type='radio'] + label {
+    cursor: pointer;
+  }
+
+  label.phase,
+  label.milestone {
+    display: flex;
+    justify-content: center;
+    position: relative;
+    color: var(--color);
+    height: 5rem;
+    width: 20%;
+    min-width: 12rem;
+
+    & > span {
+      width: 50%;
+    }
+
+    & > span:first-child {
+      text-align: right;
+      margin-right: 1rem;
+    }
+
+    & > span:last-child {
+      text-align: left;
+      margin-left: 1rem;
+    }
+
+    &:not([data-number='4'])::before {
+      content: '';
+      height: 100%;
+      width: 1px;
+      background-color: var(--color);
+      position: absolute;
+      left: calc(50%);
+      top: 0.1em;
+    }
+
+    &::after {
+      content: '';
+      width: 1rem;
+      height: 1rem;
+      display: inline-block;
+      border: 1px solid var(--color);
+      background-color: var(--color-primary);
+      position: absolute;
+      left: calc(50% - 0.5rem);
+      transition: background-color 200ms ease-out;
+      top: 0.1em;
+    }
+  }
+
+  label.milestone {
+    &::after {
+      width: 0.6rem;
+      height: 0.6rem;
+      left: calc(50% - 0.3rem);
+      top: 0.4em;
+    }
+  }
+
+  input[type='radio']:checked + label {
+    &::after {
+      background-color: var(--color);
+    }
+  }
+
+  #journey {
+    & .wrapper {
+      position: relative;
+      width: 100%;
+      max-width: 100%;
+    }
+
+    & input.phase-1:checked ~ main article[data-phase='1'],
+    & input.phase-2:checked ~ main article[data-phase='2'],
+    & input.phase-3:checked ~ main article[data-phase='3'],
+    & input.phase-4:checked ~ main article[data-phase='4'] {
+      display: flex;
+      flex-direction: column;
+    }
+
+    & input.milestone-1:checked ~ main div[data-milestone='1'],
+    & input.milestone-2:checked ~ main div[data-milestone='2'],
+    & input.milestone-3:checked ~ main div[data-milestone='3'],
+    & input.milestone-4:checked ~ main div[data-milestone='4'] {
+      display: flex;
+      flex-direction: column;
+    }
+
+    & input.milestone-1:checked ~ main div.wrapper,
+    & input.milestone-2:checked ~ main div.wrapper,
+    & input.milestone-3:checked ~ main div.wrapper,
+    & input.milestone-4:checked ~ main div.wrapper {
+      display: none;
+    }
+
+    & main {
+      position: absolute;
+      width: auto;
+      top: 0;
+      left: max(15rem, 20%);
+
+      & article {
+        --color-secondary: var(--color);
+        display: none;
+      }
+
+      & :global(p) {
+        padding: var(--gap-xs) 0;
+      }
+
+      & hr {
+        border-color: var(--color);
+        margin: var(--gap-md) 0;
+        opacity: 0.6;
+      }
+
+      & h3,
+      & h4 {
+        color: var(--color);
+      }
+
+      & div.milestone {
+        display: none;
+
+        & h4 {
+          position: relative;
+        }
+
+        & > .content {
+          display: grid;
+          grid-template-columns: 12.5rem auto;
+          grid-template-rows: auto;
+          gap: var(--gap-md);
+          padding: var(--gap-md) var(--gap-lg);
+
+          & > :global(svg) {
+            color: var(--color);
+          }
+        }
+
+        & h4::after {
+          content: 'Milestone ' attr(data-milesone) ' — ' attr(data-when);
+          font-size: 0.3em;
+          opacity: 0.5;
+          position: absolute;
+          top: -1.5em;
+          left: 0;
+        }
+      }
+
+      & div.wrapper {
+        display: flex;
+      }
+
+      & ul {
+        display: inline-flex;
+        flex-direction: column;
+      }
+
+      & ul > li {
+        margin: var(--gap-xs) 0;
+
+        &:first-child {
+          margin-top: 0;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        & > label {
+          display: inline-flex;
+          width: 100%;
+          padding: var(--gap-xs) var(--gap-sm);
+          color: var(--color);
+        }
+
+        & > aside {
+          position: absolute;
+          top: 0;
+          height: 100%;
+          width: auto;
+          display: none;
+          padding: 0 var(--gap-md);
+
+          & h4::before {
+            content: 'Work package ' attr(data-pkg);
+            font-size: 0.3em;
+            opacity: 0.5;
+            position: relative;
+            left: 0;
+            margin-top: -1em;
+            display: block;
+          }
+        }
+
+        & > input.package:checked ~ aside {
+          display: inline-flex;
+          flex-direction: column;
+
+          & > hr {
+            margin-top: auto;
+          }
+        }
+
+        & > input.package:checked ~ label {
+          background-color: var(--color);
+          color: var(--color-primary);
+        }
+      }
+    }
+  }
+
+  @media (max-width: 950px) {
+    #journey {
+      & .wrapper {
+        display: grid;
+        justify-content: center;
+        align-items: center;
+        gap: var(--gap-sm);
+        grid-template-columns: auto;
+        grid-template-rows: auto;
+        grid-template-areas:
+          '. .'
+          '. .'
+          'm m';
+      }
+
+      & label.phase {
+        padding-left: 1.5em;
+        display: flex;
+        min-width: unset;
+        width: unset;
+        height: unset;
+
+        & > span:first-child {
+          text-align: center;
+          margin: 0;
+        }
+
+        & > span:last-child {
+          display: none;
+          margin: 0;
+        }
+
+        &::before {
+          display: none;
+        }
+
+        &::after {
+          left: calc(50% - 3em);
+        }
+      }
+
+      & label.milestone {
+        display: none;
+      }
+
+      & main {
+        grid-area: m;
+        position: initial;
+
+        & article {
+          padding: var(--gap-sm) 0;
+        }
+
+        & article > hr {
+          display: none;
+        }
+
+        & ul {
+          margin-top: var(--gap-md);
+        }
+
+        & ul > li {
+          border-bottom: 1px solid var(--color);
+          padding: var(--gap-sm) 0;
+          margin: 0;
+
+          &:first-child {
+            border-top: 1px solid var(--color);
+          }
+
+          &:last-child {
+            border-bottom: 0;
+          }
+
+          & > aside {
+            position: initial;
+            padding: 0;
+
+            & hr {
+              display: none;
+            }
+
+            & h4 {
+              margin-top: var(--gap-md);
+            }
+
+            & h4::before {
+              font-size: 0.6em;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/content/maintainers/microproofs.yaml b/src/content/maintainers/microproofs.yaml
new file mode 100644
index 0000000..b2b3419
--- /dev/null
+++ b/src/content/maintainers/microproofs.yaml
@@ -0,0 +1,8 @@
+id: microproofs
+firstname: Kasey
+lastname: White
+company: Cardano Foundation
+role: Senior Software Engineer
+github: MicroProofs
+twitter: MicroProofs
+linkedIn: null
diff --git a/src/content/maintainers/rvcas.yaml b/src/content/maintainers/rvcas.yaml
new file mode 100644
index 0000000..00511b8
--- /dev/null
+++ b/src/content/maintainers/rvcas.yaml
@@ -0,0 +1,8 @@
+id: rvcas
+firstname: Lucas
+lastname: Rosa
+company: Cardano Foundation
+role: Senior Software Engineer
+github: rvcas
+twitter: rvcas
+linkedIn: null
diff --git a/src/content/projects/aiken.md b/src/content/projects/aiken.md
new file mode 100644
index 0000000..13b22c7
--- /dev/null
+++ b/src/content/projects/aiken.md
@@ -0,0 +1,44 @@
+---
+name: Aiken
+
+shortDescription: |
+  A modern smart contract platform for Cardano
+
+summary: |
+  Aiken is a modern and accessible programming language, specifically
+  created to both simplify and enhance the development of smart
+  contracts on Cardano. It comes in an easy to learn syntax, designed
+  for effortless integration with other tools and languages, plus
+  includes various state-of-the-art features that meet the current
+  expectations of developers.
+
+maintainers:
+  - KtorZ
+  - rvcas
+  - MicroProofs
+
+links:
+  - to: Source code
+    href: https://github.com/aiken-lang/aiken
+
+  - to: Project tracking
+    href: https://github.com/orgs/aiken-lang/projects/2
+
+  - to: Installation instructions
+    href: https://aiken-lang.org/installation-instructions
+
+  - to: Documentation
+    href: https://aiken-lang.org
+
+roadmap:
+  type: past-present-future
+  past: []
+  present: []
+  future: []
+---
+
+## Foster growth in the Cardano ecosystem.
+
+In true Open Source fashion, Aiken arose from the dedicated efforts of various individuals. After the original kickoff with the support of TxPipe on the foundational tooling, the Cardano Foundation helped in materialising the ideas behind a smart contract programming language. Both saw the potential of Aiken and how it could foster growth in the Cardano ecosystem. Over the course of its development, Aiken has rapidly grown to become one of the most loved frameworks for building smart-contracts on Cardano with many of the largest dApps migrating to it.
+
+While Aiken-the-language has been mostly stable for a while, its ecosystem of tools keeps evolving and reshaping to ensure the best developer experience possible to its users. This is only truly achievable as a collaborative effort, with more than 40 code contributors and even more contributors providing feedback and ideas constantly. So it is only natural for Aiken to become one of the first projects hosted under PRAGMA as it already embodies the very core principles behind PRAGMA.
diff --git a/src/content/projects/amaru.md b/src/content/projects/amaru.md
index 8fd4bb4..eb80dd1 100644
--- a/src/content/projects/amaru.md
+++ b/src/content/projects/amaru.md
@@ -23,13 +23,14 @@ links:
     href: https://github.com/orgs/pragma-org/projects/1
 
   - to: Installation instructions
-    href: '#'
+    href: '/#'
 
   - to: Documentation
-    href: '#'
+    href: '/#'
 
 roadmap:
-  type: phases
+  type: journey
+  title: An incremental roadmap in 4-phases.
   phases:
     - name: Client node
       color: '#99c2ff'
@@ -45,16 +46,9 @@ roadmap:
         this point.
       start: Q1 2024
       milestones:
-        - when: mid-April
-          title: Chain-Synchronization PoC
-          description: |
-            Perform basic chain-synchronization of the latest Cardano era
-            through [Dolos](https://github.com/txpipe/dolos) to demonstrate the
-            capabilities of the base Rust primitives.
-          link: https://github.com/pragma-org/amaru/milestone/1
-
-        - when: Buidler Fest
-          title: Workshop
+        - when: April
+          title: Workshop at Buidler Fest
+          pattern: [0, 1, 10, 11, 20, 21, 30, 31]
           description: |
             Organize workshop(s) during the [Buidler
             Fest](https://buidl.2024.cardano.org/) second day to gather
@@ -62,8 +56,40 @@ roadmap:
             alternative node.
           link: https://github.com/pragma-org/amaru/milestone/2
 
-        - when: June
+        - when: May
+          title: Chain-Synchronization PoC
+          pattern: [0, 1, 10, 11, 12, 13, 18, 19, 20, 21, 30, 31]
+          description: |
+            Perform basic chain-synchronization of the latest Cardano era
+            through [Dolos](https://github.com/txpipe/dolos) to demonstrate the
+            capabilities of the base Rust primitives.
+          link: https://github.com/pragma-org/amaru/milestone/1
+
+        - when: June/July
           title: (Partial) validator
+          pattern:
+            [
+              0,
+              1,
+              6,
+              7,
+              10,
+              11,
+              12,
+              13,
+              18,
+              19,
+              20,
+              21,
+              24,
+              25,
+              26,
+              27,
+              28,
+              29,
+              30,
+              31,
+            ]
           description: |
             Apply a subset of the ledger rules to partially validate
             transactions sent through the node in an attempt to provide better
@@ -113,12 +139,6 @@ roadmap:
             specifically, we are interested in validation that only requires
             protocol parameters but not a full ledger state yet.
 
-            This is because the communication between Amaru and its trusted
-            peer happens through node-to-node protocols.
-
-            Submitting an invalid transaction has therefore no visible effects
-            and doesn't generate feedback for the submitter.
-
         - title: Packaging & distribution
           link: https://github.com/pragma-org/amaru/issues/9
           description: |
@@ -150,7 +170,18 @@ roadmap:
         Such node doesn't yet take part in the consensus and cannot produce
         blocks. It can however fully replace any relay and is, from the
         perspective of any external observer, a Cardano relay node.
-      milestones: []
+      milestones:
+        - when: December
+          title: Hybrid Testnet
+          pattern: [0, 1, 2, 5, 6, 7, 8, 15, 16, 23, 27, 28]
+          description: |
+            While a relay node isn't capable of producing blocks on its own, it
+            should perfectly blend in a hybrid testnet comprises of classic
+            Haskell nodes acting as block producers and Amaru relay nodes.
+
+            If you are a **stake pool operator** on Cardano, we welcome you to **reach out**
+            and help us launch this into orbit.
+          link: https://github.com/pragma-org/amaru/milestone/4
       packages:
         - title: Dynamic peer management
           description: |
@@ -178,7 +209,7 @@ roadmap:
 
     - name: Full node
       color: '#d8829d'
-      start: Q1 2025
+      start: Q2 2025
       description: |
         A node that can produce blocks and take part to the consensus. It can
         monitor the leader schedule, manage a mempool, forge blocks and follow
@@ -208,7 +239,7 @@ roadmap:
             TODO
 
     - name: Archive node
-      color: '#0d0a0b'
+      color: '#b2bec3'
       description: |
         A node that can validate any historical part of the chain, including
         the Byron era of Cardano. Its purpose is to produce ledger and
@@ -230,8 +261,8 @@ roadmap:
             TODO
 ---
 
-Amaru aspires to bring an alternative node to operate the Cardano blockchain in order to further increase the decentralisation of the platform while fostering an even more rich open source ecosystem.
+## Build a new fully interoperable block-producing Cardano node.
 
-The project is ambitious and spans over many areas such as networking, cryptography or language theory. It is developed from several parts each covering a different aspect of the node and its surrounding ecosystem. One of the core objectives is to achieve a full block-producing Cardano node which can run side-by-side the existing Haskell nodes in a fully interoperable manner.
+One of the core objectives is to achieve a full block-producing Cardano node which can run side-by-side the existing Haskell nodes in a fully interoperable manner. The project is ambitious and spans over many areas such as networking, cryptography or language theory. It is developed from several parts each covering a different aspect of the node and its surrounding ecosystem.
 
-Besides, Amaru is also geared towards developer experience and aims at providing easy to grasp interfaces using widely spread technologies such as gRPC while maintaining compatibility with the strong ecosystem of middlewares, such as Ogmios or Oura, that constitutes the backbone of Cardano services.
+Besides, Amaru is also **geared towards developer experience** and aims at providing easy to grasp interfaces using widely spread technologies such as gRPC while maintaining compatibility with the strong ecosystem of middlewares, such as Ogmios or Oura, that constitutes the backbone of Cardano services.
diff --git a/src/css/global.css b/src/css/global.css
index 97a8347..bad8d0e 100644
--- a/src/css/global.css
+++ b/src/css/global.css
@@ -66,17 +66,12 @@
   margin: 0;
 }
 html {
-  line-height: 1.15;
   box-sizing: border-box;
   font-family: sans-serif;
 }
 main {
   display: block;
 }
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
 abbr[title] {
   -webkit-text-decoration: underline dotted;
   text-decoration: underline dotted;
@@ -297,6 +292,71 @@ h3,
 h4,
 h5 {
   font-family: var(--font-secondary);
+  margin: 0 0 0.67em 0;
+}
+
+h1 {
+  font-size: 4.5em;
+}
+
+h2 {
+  font-size: 3.5em;
+}
+
+h3 {
+  font-size: 2.5em;
+}
+
+h4 {
+  font-size: 2em;
+}
+
+h5 {
+  font-size: 1.5em;
+}
+
+@media (max-width: 1000px) {
+  h1 {
+    font-size: 4em;
+  }
+
+  h2 {
+    font-size: 2.625em;
+  }
+
+  h3 {
+    font-size: 1.875em;
+  }
+
+  h4 {
+    font-size: 1.375em;
+  }
+
+  h5 {
+    font-size: 1.125em;
+  }
+}
+
+@media (max-width: 770px) {
+  h1 {
+    font-size: 3em;
+  }
+
+  h2 {
+    font-size: 2.5em;
+  }
+
+  h3 {
+    font-size: 2em;
+  }
+
+  h4 {
+    font-size: 1.5em;
+  }
+
+  h5 {
+    font-size: 1.25em;
+  }
 }
 
 pre,
@@ -354,6 +414,13 @@ a:visited {
   }
 }
 
+a.more {
+  margin-left: auto;
+  margin-right: 1em;
+  text-transform: uppercase;
+  font-size: 0.8em;
+}
+
 svg.icon {
   display: inline-block;
   width: 1em;
@@ -383,8 +450,8 @@ svg.icon {
 }
 
 .justified {
-  text-align: justify;
+  text-align: left;
   word-wrap: break-word;
   hyphens: auto;
-  line-height: 1.25em;
+  max-width: 30rem;
 }
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index 6d80c61..6a852bf 100644
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -247,6 +247,7 @@ const title = Astro.props.title ? `PRAGMA – ${Astro.props.title}` : `PRAGMA`;
   <body>
     <Header />
     <slot />
+    <hr style="visibility: hidden; height: var(--gap-xl)" />
     <Footer />
   </body>
 
diff --git a/src/layouts/project.astro b/src/layouts/project.astro
new file mode 100644
index 0000000..d9d1f11
--- /dev/null
+++ b/src/layouts/project.astro
@@ -0,0 +1,293 @@
+---
+import { getEntry } from 'astro:content';
+
+import Layout from '../layouts/base.astro';
+
+import { Image } from 'astro:assets';
+import Card from '../components/Card.astro';
+import Pattern from '../components/Pattern.astro';
+import Section from '../components/Section.astro';
+import Journey from '../components/roadmaps/Journey.astro';
+
+const { project } = Astro.props;
+
+const maintainers = await Promise.all(
+  project.data.maintainers.map(async (id: string) => {
+    const { data } = await getEntry('maintainers', id.toLowerCase());
+    return data;
+  }),
+);
+
+const { Content } = await project.render();
+---
+
+<Layout title={project.data.name} description={project.data.shortDescription}>
+  <main>
+    <header id="project" class="flex-col flex-center">
+      <span class="tag">Project</span>
+      <h1>{project.data.name}</h1>
+      <Pattern actives={new Set([1, 6, 7, 10, 20, 24, 25, 30])} nRow={2} />
+      <Pattern actives={new Set([1, 6, 7, 10, 20, 24, 25, 30])} nRow={2} />
+      <p>{project.data.summary}</p>
+    </header>
+
+    <Section tag="Goal" id="goal">
+      <Content id="content" />
+    </Section>
+
+    <Section tag="Maintainers" id="maintainers">
+      <div class="wrapper">
+        {
+          maintainers.map((m) => (
+            <article>
+              <Image
+                alt={`${m.id}'s avatar`}
+                src={`https://github.com/${m.github}.png`}
+                width="48"
+                height="48"
+                loading="lazy"
+              />
+              <span style="color: var(--color-secondary);">
+                {m.firstname} {m.lastname}
+              </span>
+              <span>
+                {m.role} @ {m.company}
+              </span>
+              <aside>
+                <a href={`https://github.com/${m.github}`} class="no-effect">
+                  <svg class="icon">
+                    <title>Github</title>
+                    <use xlink:href="#github" />
+                  </svg>
+                </a>
+                {m.twitter ? (
+                  <a href={`https://x.com/${m.twitter}`} class="no-effect">
+                    <svg class="icon">
+                      <title>Twitter/X</title>
+                      <use xlink:href="#twitter" />
+                    </svg>
+                  </a>
+                ) : null}
+                {m.linkedIn ? (
+                  <a
+                    href={`https://linkedin.com/in/${m.linkedIn}`}
+                    class="no-effect">
+                    <svg class="icon">
+                      <title>LinkedIn</title>
+                      <use xlink:href="#linkedIn" />
+                    </svg>
+                  </a>
+                ) : null}
+              </aside>
+            </article>
+          ))
+        }
+      </div>
+    </Section>
+
+    {
+      project.data.roadmap.type === 'journey' ? (
+        <Journey
+          roadmap={project.data.roadmap}
+          title={project.data.roadmap.title}
+        />
+      ) : // TODO: Implement past-present-future roadmap type
+      null
+    }
+
+    <Section
+      tag="Getting started"
+      title="Explore and contribute."
+      id="getting-started">
+      <nav>
+        {
+          project.data.links.map((link) => (
+            <Card title={link.to} href={link.href}></Card>
+          ))
+        }
+      </nav>
+    </Section>
+  </main>
+</Layout>
+
+<style>
+  ul {
+    margin: 0;
+    list-style: none;
+  }
+
+  main > :global(section):not(:first-child) {
+    margin-top: var(--gap-lg);
+  }
+
+  #project {
+    position: relative;
+    padding: var(--gap-md);
+    margin-bottom: calc(2 * var(--gap-lg));
+
+    & span.tag {
+      font-size: 0.8em;
+      display: inline-block;
+      font-family: var(--font-mono);
+      color: var(--color-secondary);
+    }
+
+    & > :global(h2) {
+      font-size: 4em;
+    }
+
+    & > :global(p) {
+      margin: var(--gap-sm) 0;
+      max-width: 30rem;
+      text-align: center;
+    }
+
+    & :global(svg) {
+      --size-pattern: 12rem;
+      width: var(--size-pattern);
+      position: absolute;
+      top: var(--gap-lg);
+      color: var(--color-secondary);
+
+      &:nth-child(3) {
+        left: 0;
+      }
+
+      &:nth-child(4) {
+        right: 0;
+        transform-origin: center;
+        transform: scaleX(-1);
+      }
+    }
+  }
+
+  #goal {
+    margin-top: var(--gap-lg);
+
+    & :global(p) {
+      max-width: 30rem;
+      margin-left: auto;
+    }
+
+    & :global(p) + :global(p) {
+      margin-top: var(--gap-md);
+    }
+  }
+
+  #maintainers {
+    background: var(--color-primary-dark);
+    display: flex;
+
+    & .wrapper {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      gap: var(--gap-md);
+      justify-content: center;
+      margin-top: var(--gap-md);
+    }
+
+    & article {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      max-width: 30vw;
+      gap: var(--gap-xs);
+
+      & > img {
+        width: 3rem;
+        height: 3rem;
+        border-radius: 50%;
+      }
+
+      & > aside {
+        display: flex;
+        gap: var(--gap-sm);
+        justify-content: flex-end;
+        margin-top: auto;
+        padding-top: var(--gap-sm);
+        border-top: 1px solid var(--color-secondary);
+      }
+    }
+  }
+
+  #getting-started {
+    width: 100%;
+
+    & nav {
+      width: 100%;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: auto;
+      gap: var(--gap-md);
+
+      & > :global(article) {
+        min-height: unset;
+        height: min(40vh, 40vw);
+      }
+    }
+  }
+
+  @media (max-width: 950px) {
+    #project {
+      & :global(svg) {
+        --size-pattern: 9rem;
+      }
+    }
+  }
+
+  @media (max-width: 770px) {
+    #maintainers {
+      & .wrapper {
+        flex-direction: column;
+      }
+
+      & article {
+        max-width: 100vw;
+
+        & > aside {
+          padding-bottom: var(--gap-md);
+          border-top: none;
+          border-bottom: 1px solid var(--color-secondary);
+        }
+
+        &:last-child > aside {
+          border-bottom: none;
+        }
+      }
+    }
+
+    #project {
+      & :global(svg) {
+        --size-pattern: 25vw;
+
+        top: unset;
+        bottom: var(--gap-sm);
+
+        &:nth-child(3) {
+          left: 0;
+          transform: rotate(90deg);
+          transform-origin: bottom left;
+        }
+
+        &:nth-child(4) {
+          right: 0;
+          transform: rotate(-90deg);
+          transform-origin: bottom right;
+        }
+      }
+    }
+
+    #goal {
+      margin-top: calc(25vw + var(--gap-lg));
+    }
+  }
+
+  @media (max-width: 650px) {
+    #getting-started {
+      & nav {
+        grid-template-columns: 1fr;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 9a5c86f..c630202 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,6 +1,7 @@
 ---
 import Layout from '../layouts/base.astro';
 
+import Hero from '../components/Hero.astro';
 import Section from '../components/Section.astro';
 import Pattern from '../components/Pattern.astro';
 import Grid from '../components/Grid.astro';
@@ -8,9 +9,9 @@ import Grid from '../components/Grid.astro';
 
 <Layout title="About" description="">
   <main class="flex-col">
-    <Section
+    <Hero
       tag="About us"
-      title="A cooperative effort amongst different organizations with a similar outlook and mindset regarding open source."
+      title="A cooperative effort amongst like-minded organizations."
       id="hero"
     />
 
@@ -293,6 +294,7 @@ import Grid from '../components/Grid.astro';
         padding-top: 1em;
         margin-bottom: var(--gap-md);
         position: relative;
+        max-width: 30rem;
       }
 
       & > li:before {
@@ -360,6 +362,7 @@ import Grid from '../components/Grid.astro';
       padding-left: 1.5em;
       position: relative;
       margin: var(--gap-xs) 0;
+      max-width: 30rem;
     }
 
     & > li::before {
@@ -370,6 +373,7 @@ import Grid from '../components/Grid.astro';
       max-height: 1em;
       position: absolute;
       left: 0;
+      top: 0.2em;
       display: inline-block;
       background: var(--color-secondary);
       -webkit-mask-image: var(--mask);
diff --git a/src/pages/faq.astro b/src/pages/faq.astro
index 75a8f5f..8701502 100644
--- a/src/pages/faq.astro
+++ b/src/pages/faq.astro
@@ -92,7 +92,6 @@ const twitterUrl = `https://twitter.com/${socials.twitter}`;
 
   h1 {
     grid-area: h1;
-    font-size: 3em;
     text-align: center;
   }
 
@@ -111,7 +110,6 @@ const twitterUrl = `https://twitter.com/${socials.twitter}`;
     & h3 {
       font-family: var(--font-mono);
       color: var(--color-secondary);
-      margin-bottom: var(--gap-md);
     }
 
     & ul {
@@ -141,11 +139,6 @@ const twitterUrl = `https://twitter.com/${socials.twitter}`;
     width: 100%;
     padding: var(--gap-md);
 
-    & h2 {
-      font-size: 2.5em;
-      margin-bottom: var(--gap-md);
-    }
-
     & > details {
       border-bottom: 1px solid var(--color-secondary);
       padding: var(--gap-md) 0;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 52fcfa7..acc133e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,6 +9,7 @@ import Pattern from '../components/Pattern.astro';
 import Section from '../components/Section.astro';
 
 const members = await getCollection('members');
+const projects = await getCollection('projects');
 ---
 
 <Layout
@@ -33,27 +34,21 @@ const members = await getCollection('members');
       title="Hosting open-source projects and helping them to thrive"
       id="projects">
       <div class="flex-row flex-center" id="cards">
-        <Card title="Amaru" href="/projects/amaru">
-          An alternative Rust node client for the Cardano blockchain. Aimed as
-          an entrypoint for client applications initially, it aspires to become
-          a full block-producing node running side-by-side the Haskell nodes to
-          further increase the decentralisation of the platform while fostering
-          its rich open source ecosystem.
-        </Card>
-        <Card title="Aiken" href="/projects/aiken">
-          Aiken is a novel and accessible programming language, specifically
-          created to both simplify and enhance the development of smart
-          contracts on Cardano. It comes in an easy to learn syntax, designed
-          for effortless integration with other tools and languages, plus
-          includes various state-of-the-art features that meet the current
-          expectations of developers.
-        </Card>
+        {
+          projects.map((project) => (
+            <Card
+              title={project.data.name}
+              href={`/projects/${project.data.name.toLowerCase()}`}>
+              {project.data.summary}
+            </Card>
+          ))
+        }
       </div>
     </Section>
 
     <Section
       tag="Who we are"
-      title="PRAGMA is a team of passionate software engineers from various backgrounds."
+      title="A team of passionate software engineers"
       id="who-we-are">
       <div class="flex-row">
         <div id="members">
@@ -63,14 +58,14 @@ const members = await getCollection('members');
             ))
           }
         </div>
-        <p class="justified">
+        <p>
           PRAGMA aims to foster an alternative open-source ecosystem for Cardano <i
             >and beyond</i
           >. Said differently, we are a team of passionate software engineers
           from various backgrounds who build open-source tools for developers
           aiming for mass adoption.
 
-          <a href="/about">
+          <a href="/about" class="more">
             Learn about PRAGMA<svg class="icon slide"
               ><use xlink:href="#arrow-right"></use></svg
             >
@@ -80,30 +75,29 @@ const members = await getCollection('members');
 
       <section id="principles">
         <div>
-          <h3>Simple, transparent, efficient</h3>
           <Pattern
             actives={new Set([
-              2, 3, 4, 5, 8, 9, 14, 15, 16, 17, 22, 23, 26, 27, 28, 29,
+              3, 4, 9, 10, 11, 12, 13, 14, 16, 17, 19, 20, 22, 23, 24, 25, 27,
+              28, 30, 31,
             ])}
           />
+          <span>A home for blockchain open-source projects</span>
         </div>
+
         <div>
-          <h3>A home for blockchain open-source projects</h3>
           <Pattern
             actives={new Set([
-              3, 4, 9, 10, 11, 12, 13, 14, 16, 17, 19, 20, 22, 23, 24, 25, 27,
-              28, 30, 31,
+              2, 3, 4, 5, 8, 9, 14, 15, 16, 17, 22, 23, 26, 27, 28, 29,
             ])}
           />
+          <span>A cooperative efforts between ecosystem actors</span>
         </div>
+
         <div>
-          <h3>Step-by-step, in useful increments</h3>
           <Pattern
-            actives={new Set([
-              6, 7, 12, 13, 14, 15, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28,
-              29, 30, 31,
-            ])}
+            actives={new Set([6, 7, 16, 24, 25, 26, 27, 28, 29, 30, 31])}
           />
+          <span>An inspiration for future generations</span>
         </div>
       </section>
     </Section>
@@ -265,6 +259,8 @@ const members = await getCollection('members');
       width: 100%;
       max-height: 100%;
       display: inline-block;
+      filter: grayscale(95%);
+      opacity: 0.8;
     }
 
     & > img:nth-child(4) {
@@ -273,21 +269,31 @@ const members = await getCollection('members');
   }
 
   #principles {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    margin-top: var(--gap-md);
+    width: 100%;
+    display: flex;
+    justify-content: center;
     color: var(--color-secondary);
-    padding: var(--gap-lg);
+    gap: var(--gap-lg);
 
     & > * {
       display: flex;
       flex-direction: column;
       align-items: center;
-      height: 17.5vw;
+      max-width: 15vw;
+    }
+
+    & :global(svg) {
+      min-height: 10vw;
+      height: 10vw;
     }
 
-    & h3 {
+    & span {
+      display: flex;
       text-align: center;
-      margin-bottom: var(--gap-md);
+      margin-top: var(--gap-sm);
+      padding-top: var(--gap-sm);
+      border-top: 1px solid var(--color-secondary);
     }
   }
 
diff --git a/src/pages/members.astro b/src/pages/members.astro
index 07314bf..b838ee5 100644
--- a/src/pages/members.astro
+++ b/src/pages/members.astro
@@ -3,8 +3,7 @@ import { getCollection } from 'astro:content';
 
 import Layout from '../layouts/base.astro';
 
-import Grid from '../components/Grid.astro';
-import Section from '../components/Section.astro';
+import Hero from '../components/Hero.astro';
 
 const members = await Promise.all(
   (await getCollection('members')).map(async (q) => {
@@ -17,13 +16,11 @@ const members = await Promise.all(
   title="Members"
   description="A steadfast committee of dedicated industry experts.">
   <main>
-    <Section
+    <Hero
       tag="Members"
       title="Unwavering industry experts, dedicated to improving the blockchain ecosystem."
     />
 
-    <Grid rows={1} actives={new Set([2, 3, 6, 7, 8, 9, 12, 13, 18, 19])} />
-
     <section id="members">
       {
         members.map(
diff --git a/src/pages/projects/aiken.astro b/src/pages/projects/aiken.astro
new file mode 100644
index 0000000..a92cfd1
--- /dev/null
+++ b/src/pages/projects/aiken.astro
@@ -0,0 +1,8 @@
+---
+import { getEntry } from 'astro:content';
+import Layout from '../../layouts/project.astro';
+
+const project = await getEntry('projects', 'aiken');
+---
+
+<Layout project={project} />
diff --git a/src/pages/projects/amaru.astro b/src/pages/projects/amaru.astro
index 4cb306f..c1044d3 100644
--- a/src/pages/projects/amaru.astro
+++ b/src/pages/projects/amaru.astro
@@ -1,417 +1,8 @@
 ---
 import { getEntry } from 'astro:content';
-import { unified } from 'unified';
-import remarkParse from 'remark-parse';
-import remarkRehype from 'remark-rehype';
-import rehypeStringify from 'rehype-stringify';
-
-import Layout from '../../layouts/base.astro';
-
-import Card from '../../components/Card.astro';
-import Grid from '../../components/Grid.astro';
-import Pattern from '../../components/Pattern.astro';
-import Section from '../../components/Section.astro';
+import Layout from '../../layouts/project.astro';
 
 const project = await getEntry('projects', 'amaru');
-
-const maintainers = await Promise.all(
-  project.data.maintainers.map(async (id: string) => {
-    const { data } = await getEntry('maintainers', id.toLowerCase());
-    return data;
-  }),
-);
-
-const { Content } = await project.render();
-
-const render = (md) =>
-  unified()
-    .use(remarkParse)
-    .use(remarkRehype)
-    .use(rehypeStringify)
-    .processSync(md);
 ---
 
-<Layout description={project.data.shortDescription}>
-  <main>
-    <Section tag="Project" id="project" title={project.data.name}>
-      <Pattern actives={new Set([1, 6, 7, 10, 20, 24, 25, 30])} nRow={2} />
-      <Pattern actives={new Set([1, 6, 7, 10, 20, 24, 25, 30])} nRow={2} />
-      <Content id="content" />
-    </Section>
-    <Section tag="Maintainers" id="maintainers">
-      <div class="wrapper">
-        {
-          maintainers.map((m) => (
-            <article>
-              <img
-                alt={`${m.id}'s avatar`}
-                src={`https://github.com/${m.github}.png`}
-                loading="lazy"
-              />
-              <h3>
-                {m.firstname} {m.lastname}
-              </h3>
-              <span>
-                {m.role} @ {m.company}
-              </span>
-              <aside>
-                <a href={`https://github.com/${m.github}`} class="no-effect">
-                  <svg class="icon">
-                    <use xlink:href="#github" />
-                  </svg>
-                </a>
-                <a href={`https://x.com/${m.twitter}`} class="no-effect">
-                  <svg class="icon">
-                    <use xlink:href="#twitter" />
-                  </svg>
-                </a>
-                <a
-                  href={`https://linkedin.com/in/${m.linkedIn}`}
-                  class="no-effect">
-                  <svg class="icon">
-                    <use xlink:href="#linkedIn" />
-                  </svg>
-                </a>
-              </aside>
-            </article>
-          ))
-        }
-      </div>
-    </Section>
-    <Section
-      tag="Journey"
-      id="journey"
-      title="An incremental roadmap in 4-phases">
-      <div class="wrapper">
-        <>
-          {
-            project.data.roadmap.phases.flatMap((phase, ix) => {
-              const milestones = phase.milestones.flatMap((milestone, jx) => (
-                <>
-                  <input
-                    type="radio"
-                    name="roadmap"
-                    id={`milestone-${ix + 1}-${jx + 1}`}
-                    value={milestone.title}
-                    class="milestone"
-                  />
-                  <label
-                    style={`--color: ${phase.color}`}
-                    for={`milestone-${ix + 1}-${jx + 1}`}
-                    class="milestone">
-                    <>
-                      <span />
-                      <span>{milestone.when}</span>
-                    </>
-                  </label>
-                </>
-              ));
-              const checked = ix === 0;
-              return (
-                <>
-                  <input
-                    type="radio"
-                    name="roadmap"
-                    id={`phase-${ix + 1}`}
-                    value={`Phase ${ix + 1}`}
-                    class="phase"
-                    {checked}
-                  />
-                  <label
-                    style={`--color: ${phase.color}`}
-                    data-number={ix + 1}
-                    for={`phase-${ix + 1}`}
-                    class="phase">
-                    <>
-                      <span>Phase {ix + 1}</span>
-                      <span>{phase.start}</span>
-                    </>
-                  </label>
-                  <>{milestones}</>
-                </>
-              );
-            })
-          }
-        </>
-
-        <main>
-          {
-            project.data.roadmap.phases.map((phase, ix) => (
-              <article data-phase={ix + 1} style={`--color: ${phase.color};`}>
-                <h3 data-number={ix + 1}>{phase.name}</h3>
-                <>{render(phase.description)}</>
-                <hr />
-                <div class="wrapper">
-                  <ul>
-                    {phase.packages.map((pkg, jx) => {
-                      const checked = jx === 0;
-                      return (
-                        <li>
-                          <input
-                            type="radio"
-                            name={`work-packages-${ix + 1}`}
-                            id={`pkg-${ix + 1}-${jx + 1}`}
-                            value={pkg.title}
-                            class="package"
-                            checked={checked}
-                          />
-                          <label for={`pkg-${ix + 1}-${jx + 1}`}>
-                            {pkg.title}
-                          </label>
-                          <aside class={`pkg-${ix + 1}-${jx + 1}`}>
-                            <h4>{pkg.title}</h4>
-                            <>{render(pkg.description)}</>
-                            <a href="" />
-                          </aside>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </div>
-              </article>
-            ))
-          }
-        </main>
-      </div>
-    </Section>
-  </main>
-</Layout>
-
-<style>
-  ul {
-    margin: 0;
-    list-style: none;
-  }
-
-  #project {
-    position: relative;
-
-    & > :global(h2) {
-      font-size: 4em;
-    }
-
-    & > :global(p) {
-      margin: var(--gap-sm) 0;
-      max-width: 30rem;
-      text-align: center;
-    }
-
-    & :global(svg) {
-      --size-pattern: 12rem;
-      width: var(--size-pattern);
-      position: absolute;
-      top: var(--gap-lg);
-      color: var(--color-secondary);
-      outline: 1px solid var(--color-primary);
-      outline-offset: -1px;
-
-      &:nth-child(3) {
-        left: 0;
-      }
-
-      &:nth-child(4) {
-        right: 0;
-        transform-origin: center;
-        transform: scaleX(-1);
-      }
-    }
-  }
-
-  #maintainers {
-    background: var(--color-primary-dark);
-    display: flex;
-
-    & .wrapper {
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      gap: var(--gap-md);
-      justify-content: center;
-    }
-
-    & article {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      max-width: 30vw;
-      gap: var(--gap-sm);
-
-      & > h3 {
-        color: var(--color-secondary);
-      }
-
-      & > img {
-        width: 3rem;
-        height: 3rem;
-        border-radius: 50%;
-      }
-
-      & > aside {
-        display: flex;
-        gap: var(--gap-sm);
-        justify-content: flex-end;
-        margin-top: auto;
-        padding-top: var(--gap-sm);
-        border-top: 1px solid var(--color-secondary-light);
-      }
-    }
-  }
-
-  input[type='radio'].phase,
-  input[type='radio'].milestone,
-  input[type='radio'].package {
-    display: none;
-  }
-
-  input[type='radio'] + label {
-    cursor: pointer;
-  }
-
-  label.phase,
-  label.milestone {
-    display: flex;
-    justify-content: center;
-    position: relative;
-    color: var(--color);
-    height: 5rem;
-    width: 20%;
-    min-width: 12rem;
-
-    & > span {
-      width: 50%;
-    }
-
-    & > span:first-child {
-      text-align: right;
-      margin-right: 1rem;
-    }
-
-    & > span:last-child {
-      text-align: left;
-      margin-left: 1rem;
-    }
-
-    &::before {
-      content: '';
-      height: 100%;
-      width: 1px;
-      background-color: var(--color);
-      position: absolute;
-      left: calc(50%);
-    }
-
-    &::after {
-      content: '';
-      width: 1rem;
-      height: 1rem;
-      display: inline-block;
-      border: 1px solid var(--color);
-      background-color: var(--color-primary);
-      position: absolute;
-      left: calc(50% - 0.5rem);
-      transition: background-color 200ms ease-out;
-    }
-  }
-
-  label.milestone {
-    &::after {
-      width: 0.6rem;
-      height: 0.6rem;
-      left: calc(50% - 0.3rem);
-      top: 0.3em;
-    }
-  }
-
-  input[type='radio']:checked + label {
-    &::after {
-      background-color: var(--color);
-    }
-  }
-
-  input#phase-1:checked ~ main article[data-phase='1'],
-  input#phase-2:checked ~ main article[data-phase='2'],
-  input#phase-3:checked ~ main article[data-phase='3'],
-  input#phase-4:checked ~ main article[data-phase='4'] {
-    display: flex;
-    flex-direction: column;
-  }
-
-  #journey {
-    & .wrapper {
-      position: relative;
-      width: 100%;
-      max-width: 100%;
-    }
-
-    & main {
-      position: absolute;
-      width: auto;
-      top: 0;
-      left: max(15rem, 20%);
-
-      & article {
-        display: none;
-      }
-
-      & :global(p) {
-        padding: var(--gap-xs) 0;
-      }
-
-      & hr {
-        border-color: var(--color);
-        margin: var(--gap-md) 0;
-      }
-
-      & h3,
-      & h4 {
-        color: var(--color);
-        margin-bottom: var(--gap-md);
-      }
-
-      & div.wrapper {
-        display: flex;
-      }
-
-      & ul {
-        display: inline-flex;
-        flex-direction: column;
-      }
-
-      & ul > li {
-        margin: var(--gap-xs) 0;
-
-        &:first-child {
-          margin-top: 0;
-        }
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-
-        & > label {
-          display: inline-flex;
-          width: 100%;
-          padding: var(--gap-xs) var(--gap-sm);
-          color: var(--color);
-        }
-
-        & > aside {
-          position: absolute;
-          top: 0;
-          width: auto;
-          display: none;
-          padding: 0 var(--gap-md);
-        }
-
-        & > input.package:checked ~ aside {
-          display: inline-block;
-        }
-
-        & > input.package:checked ~ label {
-          background-color: var(--color);
-          color: var(--color-primary);
-        }
-      }
-    }
-  }
-</style>
+<Layout project={project} />