robercano · robercano-ghbot · Jul 23, 2026 · Jul 22, 2026 · Jul 23, 2026
diff --git a/apps/website/index.html b/apps/website/index.html
@@ -3,10 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>reDeploy — declarative, idempotent, resumable smart-contract deployments</title>
+    <title>reDeploy · The Solid Chain</title>
     <meta
       name="description"
-      content="reDeploy is a deployment system built on top of Hardhat Ignition: declarative deploy/config, idempotent resumable deployments, verification, a read-only reader library, and a visual authoring/inspection studio."
+      content="reDeploy — declarative, idempotent, verifiable smart-contract deployments on Hardhat Ignition. By The Solid Chain."
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap"
+      rel="stylesheet"
     />
   </head>
   <body>

diff --git a/apps/website/src/App.tsx b/apps/website/src/App.tsx
@@ -1,17 +1,25 @@
 import Hero from "./components/Hero.js";
-import Benefits from "./components/Benefits.js";
-import Features from "./components/Features.js";
 import Footer from "./components/Footer.js";
+import Packages from "./components/Packages.js";
+import Pipeline from "./components/Pipeline.js";
+import SpecGraphSection from "./components/SpecGraphSection.js";
+import Studio from "./components/Studio.js";
+import Topbar from "./components/Topbar.js";
 
 export default function App() {
   return (
     <div className="page">
-      <main>
-        <Hero />
-        <Benefits />
-        <Features />
-      </main>
-      <Footer />
+      <Topbar />
+      <div className="wrap">
+        <main>
+          <Hero />
+          <SpecGraphSection />
+          <Pipeline />
+          <Studio />
+          <Packages />
+        </main>
+        <Footer />
+      </div>
     </div>
   );
 }
diff --git a/apps/website/src/assets/studio-deploy-flow.png b/apps/website/src/assets/studio-deploy-flow.png
diff --git a/apps/website/src/assets/studio-inspector.png b/apps/website/src/assets/studio-inspector.png
diff --git a/apps/website/src/assets/studio-templates.png b/apps/website/src/assets/studio-templates.png
diff --git a/apps/website/src/components/Benefits.tsx b/apps/website/src/components/Benefits.tsx
diff --git a/apps/website/src/components/DependencyGraph.tsx b/apps/website/src/components/DependencyGraph.tsx
@@ -0,0 +1,78 @@
+import { GRAPH_PANE } from "../content.js";
+
+/** The dependency graph the example spec (SPEC_JSON) compiles to. */
+export default function DependencyGraph() {
+  return (
+    <svg
+      viewBox="0 0 380 250"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ width: "100%", maxWidth: 420 }}
+      role="img"
+      aria-label={GRAPH_PANE.svgLabel}
+    >
+      <defs>
+        <marker id="arr" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="7" markerHeight="7" orient="auto">
+          <path d="M0 0 L8 4 L0 8 z" fill="#f5a524" />
+        </marker>
+        <marker id="arrL" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="7" markerHeight="7" orient="auto">
+          <path d="M0 0 L8 4 L0 8 z" fill="#D6FF7A" />
+        </marker>
+      </defs>
+      {/* edges */}
+      <path
+        d="M118 62 C170 62 190 100 232 116"
+        fill="none"
+        stroke="#f5a524"
+        strokeWidth="1.6"
+        markerEnd="url(#arr)"
+      />
+      <path
+        d="M118 190 C170 190 190 152 232 136"
+        fill="none"
+        stroke="#f5a524"
+        strokeWidth="1.6"
+        strokeDasharray="5 4"
+        markerEnd="url(#arr)"
+      />
+      <path
+        d="M96 176 C140 150 200 84 244 108"
+        fill="none"
+        stroke="#D6FF7A"
+        strokeWidth="1.4"
+        strokeDasharray="2 4"
+        markerEnd="url(#arrL)"
+      />
+      {/* nodes */}
+      <g fontFamily="ui-monospace,monospace">
+        <rect x="18" y="40" width="100" height="44" rx="7" fill="#121008" stroke="#292112" />
+        <text x="68" y="59" fill="#f7eed9" fontSize="13" textAnchor="middle" fontWeight="600">
+          Token
+        </text>
+        <text x="68" y="75" fill="#8a7b5c" fontSize="9" textAnchor="middle">
+          0x9f1a…c44e ✓
+        </text>
+        <rect x="18" y="168" width="100" height="44" rx="7" fill="#121008" stroke="#292112" />
+        <text x="68" y="187" fill="#f7eed9" fontSize="13" textAnchor="middle" fontWeight="600">
+          Registry
+        </text>
+        <text x="68" y="203" fill="#8a7b5c" fontSize="9" textAnchor="middle">
+          0x27b3…08d1 ✓
+        </text>
+        <rect x="238" y="100" width="118" height="52" rx="7" fill="#121008" stroke="#D6FF7A" />
+        <text x="297" y="119" fill="#D6FF7A" fontSize="13" textAnchor="middle" fontWeight="600">
+          Vault ^^
+        </text>
+        <text x="297" y="136" fill="#8a7b5c" fontSize="9" textAnchor="middle">
+          CREATE · pending
+        </text>
+        {/* legend */}
+        <text x="20" y="21" fill="#8a7b5c" fontSize="9">
+          {GRAPH_PANE.legendTop}
+        </text>
+        <text x="20" y="240" fill="#8a7b5c" fontSize="9">
+          {GRAPH_PANE.legendBottom}
+        </text>
+      </g>
+    </svg>
+  );
+}
diff --git a/apps/website/src/components/Features.tsx b/apps/website/src/components/Features.tsx
diff --git a/apps/website/src/components/Footer.tsx b/apps/website/src/components/Footer.tsx
@@ -1,24 +1,20 @@
-import { FOOTER_LINKS } from "../content.js";
-
-const currentYear = new Date().getFullYear();
+import { FOOTER } from "../content.js";
 
 export default function Footer() {
   return (
-    <footer className="footer">
-      <nav aria-label="Footer links" className="footer__links">
-        {FOOTER_LINKS.map((link) => (
-          <a key={link.label} href={link.href} target="_blank" rel="noreferrer">
-            {link.label}
-          </a>
+    <footer>
+      <span>
+        <span className="prompt">{FOOTER.promptUser}</span> {FOOTER.promptRest}
+      </span>
+      <span className="fam">
+        family:{" "}
+        {FOOTER.family.map((link, i) => (
+          <span key={link.label}>
+            {i > 0 ? " · " : ""}
+            {link.current ? <span className="cur">{link.label}</span> : <a href={link.href}>{link.label}</a>}
+          </span>
         ))}
-      </nav>
-      <p className="footer__attribution">
-        &copy; {currentYear} reDeploy. Built on{" "}
-        <a href="https://hardhat.org/ignition" target="_blank" rel="noreferrer">
-          Hardhat Ignition
-        </a>
-        .
-      </p>
+      </span>
     </footer>
   );
 }
diff --git a/apps/website/src/components/Hero.tsx b/apps/website/src/components/Hero.tsx
@@ -1,16 +1,15 @@
 import { HERO } from "../content.js";
+import RichText from "./RichText.js";
 
 export default function Hero() {
   return (
-    <section className="hero" aria-labelledby="hero-headline">
-      <p className="hero__eyebrow">{HERO.eyebrow}</p>
-      <h1 id="hero-headline" className="hero__headline">
-        {HERO.headline}
+    <div className="heroText">
+      <h1>
+        <RichText segments={HERO.headline} />
       </h1>
-      <p className="hero__subhead">{HERO.subhead}</p>
-      <a className="hero__cta" href={HERO.ctaHref} target="_blank" rel="noreferrer">
-        {HERO.ctaLabel}
-      </a>
-    </section>
+      <p>
+        <RichText segments={HERO.subhead} />
+      </p>
+    </div>
   );
 }
diff --git a/apps/website/src/components/Packages.tsx b/apps/website/src/components/Packages.tsx
@@ -0,0 +1,20 @@
+import { PACKAGES, PACKAGES_HEADING } from "../content.js";
+
+export default function Packages() {
+  return (
+    <section id="packages">
+      <div className="mh">
+        <b>{PACKAGES_HEADING.label}</b>
+        {PACKAGES_HEADING.rest}
+      </div>
+      <div className="pkgs">
+        {PACKAGES.map((pkg) => (
+          <div className="pkg" key={pkg.name}>
+            <div className="n">{pkg.name}</div>
+            <div className="d">{pkg.description}</div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/apps/website/src/components/Pipeline.tsx b/apps/website/src/components/Pipeline.tsx
@@ -0,0 +1,29 @@
+import { PIPELINE_HEADING, PIPELINE_NOTE, PIPELINE_STAGES } from "../content.js";
+import RichText from "./RichText.js";
+
+export default function Pipeline() {
+  return (
+    <section id="pipeline">
+      <div className="mh">
+        <b>{PIPELINE_HEADING.label}</b>
+        {PIPELINE_HEADING.rest}
+      </div>
+      <div className="pipe">
+        {PIPELINE_STAGES.map((stage) => (
+          <div className="stage" key={stage.id}>
+            <span className="num">{stage.num}</span>
+            <h3>
+              <RichText segments={stage.title} />
+            </h3>
+            <p>
+              <RichText segments={stage.description} />
+            </p>
+          </div>
+        ))}
+      </div>
+      <p className="pipeNote">
+        <RichText segments={PIPELINE_NOTE} />
+      </p>
+    </section>
+  );
+}
diff --git a/apps/website/src/components/RichText.tsx b/apps/website/src/components/RichText.tsx
@@ -0,0 +1,28 @@
+import { Fragment } from "react";
+import type { RichSegment } from "../content.js";
+
+/** Renders an array of RichSegment as inline nodes: code/em/b elements or a lime `<span>`. */
+export default function RichText({ segments }: { segments: RichSegment[] }) {
+  return (
+    <>
+      {segments.map((seg, i) => {
+        switch (seg.as) {
+          case "code":
+            return <code key={i}>{seg.text}</code>;
+          case "em":
+            return <em key={i}>{seg.text}</em>;
+          case "b":
+            return <b key={i}>{seg.text}</b>;
+          case "hl":
+            return (
+              <span key={i} className="hl">
+                {seg.text}
+              </span>
+            );
+          default:
+            return <Fragment key={i}>{seg.text}</Fragment>;
+        }
+      })}
+    </>
+  );
+}