From 8186fdec116fd3c8a3cbb3ac2c3ca08f8b532815 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 23 Jul 2026 20:33:08 +0000
Subject: [PATCH] Add the shared thesolidchain.com status bar above the topbar

New StatusBar component replicates the corporate non-scrollable header
(cream chain mark linking home, traffic dots, user/uptime/region, amber
cursor). It sits with the existing product topbar inside one sticky
header; the topbar itself is no longer independently sticky.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PjJxDmntk8Wfw2cwTtEbtF
---
 apps/website/src/App.tsx                  |  6 +-
 apps/website/src/components/StatusBar.tsx | 31 +++++++++
 apps/website/src/styles.css               | 85 ++++++++++++++++++++++-
 3 files changed, 118 insertions(+), 4 deletions(-)
 create mode 100644 apps/website/src/components/StatusBar.tsx

diff --git a/apps/website/src/App.tsx b/apps/website/src/App.tsx
index 05079dc..49b001e 100644
--- a/apps/website/src/App.tsx
+++ b/apps/website/src/App.tsx
@@ -3,13 +3,17 @@ 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 StatusBar from "./components/StatusBar.js";
 import Studio from "./components/Studio.js";
 import Topbar from "./components/Topbar.js";
 
 export default function App() {
   return (
     <div className="page">
-      <Topbar />
+      <header className="hdr">
+        <StatusBar />
+        <Topbar />
+      </header>
       <div className="wrap">
         <main>
           <Hero />
diff --git a/apps/website/src/components/StatusBar.tsx b/apps/website/src/components/StatusBar.tsx
new file mode 100644
index 0000000..aec4a33
--- /dev/null
+++ b/apps/website/src/components/StatusBar.tsx
@@ -0,0 +1,31 @@
+export default function StatusBar() {
+  return (
+    <div className="statusbar">
+      <a className="brand" href="https://thesolidchain.com" aria-label="The Solid Chain">
+        <svg viewBox="0 0 120 120" width="56" height="56" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <path
+            fill="#e4dac2"
+            fillRule="evenodd"
+            d="M 107.28 54.5 L 98.48 54.5 A 2.2 2.2 0 0 1 96.28 52.3 L 96.28 51.78 A 16.21 16.21 0 0 0 80.07 35.57 L 39.63 35.57 A 16.21 16.21 0 0 0 23.42 51.78 L 23.42 52.3 A 2.2 2.2 0 0 1 21.22 54.5 L 12.42 54.5 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 54.5 Z M 94.11 58.0 L 86.82 58.0 A 9.14 9.14 0 0 0 77.88 50.73 L 66.24 50.73 A 9.14 9.14 0 0 0 58.21 55.5 L 50.48 55.5 A 16.35 16.35 0 0 1 66.23 43.53 L 77.87 43.53 A 16.35 16.35 0 0 1 94.11 58.0 Z M 70.61 66.6 L 66.21 66.6 A 6.64 6.64 0 0 1 62.83 65.67 A 9.14 9.14 0 0 0 64.6 62.0 L 27.59 62.0 A 16.35 16.35 0 0 1 43.81 43.6 L 56.73 43.6 A 18.85 18.85 0 0 0 49.71 50.81 L 43.8 50.81 A 9.14 9.14 0 0 0 34.87 58.0 L 71.92 58.0 A 16.35 16.35 0 0 1 70.61 66.6 Z M 71.41 55.5 L 63.68 55.5 A 9.14 9.14 0 0 0 62.8 54.19 A 6.64 6.64 0 0 1 66.24 53.23 L 70.59 53.23 A 16.35 16.35 0 0 1 71.41 55.5 Z M 77.91 76.31 L 66.25 76.31 A 16.35 16.35 0 0 1 50.53 64.5 L 58.29 64.5 A 9.14 9.14 0 0 0 66.24 69.1 L 77.93 69.1 A 9.14 9.14 0 0 0 86.83 62.0 L 94.13 62.0 A 16.35 16.35 0 0 1 77.91 76.31 Z M 56.68 76.21 L 43.81 76.21 A 16.35 16.35 0 0 1 28.13 64.5 L 35.94 64.5 A 9.14 9.14 0 0 0 43.82 69.01 L 49.7 69.01 A 18.85 18.85 0 0 0 56.68 76.21 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 65.5 L 21.22 65.5 A 2.2 2.2 0 0 1 23.42 67.7 L 23.42 67.99 A 16.21 16.21 0 0 0 39.63 84.2 L 80.07 84.2 A 16.21 16.21 0 0 0 96.28 67.99 L 96.28 67.7 A 2.2 2.2 0 0 1 98.48 65.5 L 107.28 65.5 L 107.28 67.99 A 27.21 27.21 0 0 1 80.07 95.2 Z"
+          />
+        </svg>
+      </a>
+      <span className="dots">
+        <span className="dot r"></span>
+        <span className="dot y"></span>
+        <span className="dot g"></span>
+      </span>
+      <span>
+        <b>roberto@thesolidchain</b>: ~
+      </span>
+      <span className="led">online</span>
+      <span>
+        uptime: <b>20y+</b>
+      </span>
+      <span>
+        region: <b>es-remote-1</b>
+      </span>
+      <span className="cursor" aria-hidden="true"></span>
+    </div>
+  );
+}
diff --git a/apps/website/src/styles.css b/apps/website/src/styles.css
index e23ee86..16a31be 100644
--- a/apps/website/src/styles.css
+++ b/apps/website/src/styles.css
@@ -40,6 +40,88 @@ body {
   color: var(--lime);
 }
 
+/* shared sticky header: corporate statusbar + product topbar */
+.hdr {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+}
+
+.statusbar {
+  display: flex;
+  gap: 18px;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 6px 18px;
+  background: var(--panel);
+  border-bottom: 1px solid var(--edge);
+  font-size: 11.5px;
+  color: var(--dim);
+}
+
+.statusbar .brand {
+  display: inline-flex;
+  align-items: center;
+}
+
+.statusbar .dots {
+  display: inline-flex;
+  gap: 6px;
+  margin-right: 4px;
+}
+
+.statusbar .dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.dot.r {
+  background: #e5534b;
+}
+
+.dot.y {
+  background: #d4a72c;
+}
+
+.dot.g {
+  background: #3fb950;
+}
+
+.statusbar b {
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.statusbar .led {
+  color: var(--ok);
+}
+
+.statusbar .led::before {
+  content: "\25cf ";
+}
+
+.statusbar .cursor {
+  display: inline-block;
+  width: 8px;
+  height: 14px;
+  margin-left: auto;
+  background: var(--accent);
+  animation: blink 1.1s steps(1) infinite;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .statusbar .cursor {
+    animation: none;
+  }
+}
+
 /* topbar */
 .topbar {
   display: flex;
@@ -48,9 +130,6 @@ body {
   padding: 12px 18px;
   border-bottom: 1px solid var(--edge);
   background: var(--panel);
-  position: sticky;
-  top: 0;
-  z-index: 5;
   font-size: 12px;
 }