From 7d2db2b25451471eced7426cac87ff60f95b10d7 Mon Sep 17 00:00:00 2001
From: Roberto Cano <3525807+robercano@users.noreply.github.com>
Date: Fri, 24 Jul 2026 08:01:42 +0200
Subject: [PATCH] feat(website): full reDeploy brand mark in the hero

The shared-header rework (#166/#167) deliberately keeps only the family
mark + ASCII product row in the sticky header, which left the full
product logo (amber v1.9 iter32 frame + lime ^^ glyph) absent from the
page. Adds it as a BrandMark component centered above the hero headline,
verbatim from brand/products/tsc-redeploy.svg.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/website/src/components/BrandMark.tsx | 19 +++++++++++++++++++
 apps/website/src/components/Hero.tsx      |  2 ++
 apps/website/src/styles.css               |  7 +++++++
 apps/website/test/App.test.tsx            |  8 ++++++++
 4 files changed, 36 insertions(+)
 create mode 100644 apps/website/src/components/BrandMark.tsx

diff --git a/apps/website/src/components/BrandMark.tsx b/apps/website/src/components/BrandMark.tsx
new file mode 100644
index 0000000..0f0afc2
--- /dev/null
+++ b/apps/website/src/components/BrandMark.tsx
@@ -0,0 +1,19 @@
+// The full reDeploy product mark (brand v1.9, iter32 frame): amber corporate frame +
+// lime ^^ glyph, verbatim from thesolidchain.com brand/products/tsc-redeploy.svg.
+// Lives in the hero — the sticky header intentionally carries only the family mark
+// and the ASCII product row (see Topbar.tsx).
+export default function BrandMark({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 120 120" role="img" aria-label="reDeploy logo">
+      <path
+        fill="#F5A524"
+        fillRule="evenodd"
+        d="M 107.28 55.23 L 100.12 55.23 A 2.39 2.39 0 0 1 97.73 52.84 L 97.73 51.78 A 17.66 17.66 0 0 0 80.07 34.12 L 39.63 34.12 A 17.66 17.66 0 0 0 21.97 51.78 L 21.97 52.84 A 2.39 2.39 0 0 1 19.58 55.23 L 12.42 55.23 L 12.42 51.78 A 27.21 27.21 0 0 1 39.63 24.57 L 80.07 24.57 A 27.21 27.21 0 0 1 107.28 51.78 L 107.28 55.23 Z M 80.07 95.2 L 39.63 95.2 A 27.21 27.21 0 0 1 12.42 67.99 L 12.42 64.78 L 19.58 64.78 A 2.39 2.39 0 0 1 21.97 67.17 L 21.97 67.99 A 17.66 17.66 0 0 0 39.63 85.65 L 80.07 85.65 A 17.66 17.66 0 0 0 97.73 67.99 L 97.73 67.17 A 2.39 2.39 0 0 1 100.12 64.78 L 107.28 64.78 L 107.28 67.99 A 27.21 27.21 0 0 1 80.07 95.2 Z"
+      />
+      <g stroke="#D6FF7A" strokeWidth="7.21" fill="none" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M47 57 L60 45 L73 57" />
+        <path d="M47 75 L60 63 L73 75" />
+      </g>
+    </svg>
+  );
+}
diff --git a/apps/website/src/components/Hero.tsx b/apps/website/src/components/Hero.tsx
index 3bbac31..596581b 100644
--- a/apps/website/src/components/Hero.tsx
+++ b/apps/website/src/components/Hero.tsx
@@ -1,9 +1,11 @@
 import { HERO } from "../content.js";
+import BrandMark from "./BrandMark.js";
 import RichText from "./RichText.js";
 
 export default function Hero() {
   return (
     <div className="heroText">
+      <BrandMark className="heroMark" />
       <h1>
         <RichText segments={HERO.headline} />
       </h1>
diff --git a/apps/website/src/styles.css b/apps/website/src/styles.css
index 37ce7c7..91a9c0b 100644
--- a/apps/website/src/styles.css
+++ b/apps/website/src/styles.css
@@ -174,6 +174,13 @@ body {
   padding: 52px 0 8px;
 }
 
+.heroMark {
+  width: clamp(84px, 12vw, 112px);
+  height: auto;
+  display: block;
+  margin: 0 auto 14px;
+}
+
 h1 {
   font-family: "Space Grotesk", var(--mono);
   font-size: clamp(30px, 5vw, 44px);
diff --git a/apps/website/test/App.test.tsx b/apps/website/test/App.test.tsx
index e9baaea..1351ec8 100644
--- a/apps/website/test/App.test.tsx
+++ b/apps/website/test/App.test.tsx
@@ -19,6 +19,14 @@ describe("App", () => {
     expect(screen.getByText(/Built on Hardhat Ignition\./)).toBeInTheDocument();
   });
 
+  it("renders the full reDeploy brand mark in the hero", () => {
+    render(<App />);
+
+    const mark = screen.getByRole("img", { name: "reDeploy logo" });
+    expect(mark).toBeInTheDocument();
+    expect(mark).toHaveClass("heroMark");
+  });
+
   it("renders the spec pane with the example contracts and the dependency graph", () => {
     render(<App />);