From 5d2b3ee3dae5942ea8c338e42334b4513837b7ad Mon Sep 17 00:00:00 2001
From: dynalab <dynalab@dynalab.io>
Date: Mon, 21 Sep 2026 14:43:11 +0200
Subject: [PATCH] landing-alpinelab-style-with-ode

---
 index.html | 173 ++++++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 146 insertions(+), 27 deletions(-)
diff --git a/index.html b/index.html
index 3c7e4c4..6e85d99 100644
--- a/index.html
+++ b/index.html
@@ -1,33 +1,152 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Dynalab</title>
-<meta name="description" content="Dynalab">
-<meta name="theme-color" content="#2f8fa8">
-<style>
-  html, body { height: 100%; margin: 0; }
-  body {
-    background: #2f8fa8 url("landing.png") center / cover no-repeat;
-    image-rendering: pixelated;
-    display: grid;
-    place-items: center;
-    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
-  }
-  h1 {
-    margin: 0 0 22vh;
-    padding: 0 16px;
-    color: #fff;
-    font-size: clamp(2.5rem, 9vw, 7rem);
-    font-weight: 700;
-    letter-spacing: .12em;
-    text-transform: uppercase;
-    text-shadow: 0 4px 0 rgba(16, 48, 64, .55), 0 0 40px rgba(16, 48, 64, .35);
-  }
-</style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>dynalab</title>
+  <meta name="description" content="dynalab — two nodes, one cluster">
+  <meta name="theme-color" content="#0a0a0a">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: 'Courier New', monospace;
+      background: #0a0a0a;
+      color: #e0e0e0;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .hero {
+      position: relative;
+      width: 100%;
+      height: 60vh;
+      overflow: hidden;
+    }
+
+    .hero img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      image-rendering: pixelated;
+      display: block;
+    }
+
+    .hero-overlay {
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(
+        to bottom,
+        rgba(10, 10, 10, 0) 50%,
+        rgba(10, 10, 10, 1) 100%
+      );
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+      padding: 0 20px 40px;
+    }
+
+    .hero-text { text-align: center; }
+
+    .hero-text h1 {
+      font-size: clamp(1.8rem, 8vw, 3rem);
+      letter-spacing: 0.3em;
+      margin-right: -0.3em;
+      color: #fff;
+      text-shadow: 0 0 30px rgba(255, 90, 140, 0.35);
+    }
+
+    .hero-text p {
+      font-size: clamp(0.75rem, 3vw, 1rem);
+      color: #888;
+      margin-top: 8px;
+      letter-spacing: 0.15em;
+      margin-right: -0.15em;
+    }
+
+    .content {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 50px 24px 60px;
+      flex: 1;
+      text-align: center;
+    }
+
+    .ode-title {
+      font-size: 0.8rem;
+      color: #666;
+      letter-spacing: 0.25em;
+      margin-bottom: 44px;
+    }
+
+    .ode-title .heart { color: #ff5a8c; }
+
+    .haiku {
+      font-size: clamp(1rem, 3.6vw, 1.3rem);
+      color: #ccc;
+      line-height: 1.9;
+      margin-bottom: 40px;
+    }
+
+    .haiku .prompt { color: #ff5a8c; }
+
+    footer {
+      text-align: center;
+      padding: 30px;
+      color: #444;
+      font-size: 0.75rem;
+      letter-spacing: 0.1em;
+    }
+  </style>
 </head>
 <body>
-  <h1>Dynalab</h1>
+
+  <div class="hero">
+    <img src="landing.png" alt="dynalab">
+    <div class="hero-overlay">
+      <div class="hero-text">
+        <h1>dynalab</h1>
+        <p>two nodes, one cluster</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="content">
+    <p class="ode-title">ode to dany <span class="heart">&hearts;</span> andy</p>
+
+    <p class="haiku">
+      she opens his ports &mdash;<br>
+      no firewall, no timeout,<br>
+      handshake turns to heat.
+    </p>
+
+    <p class="haiku">
+      he pings, she replies.<br>
+      zero packet loss tonight,<br>
+      latency: one kiss.
+    </p>
+
+    <p class="haiku">
+      root access granted.<br>
+      she sudos straight to his core,<br>
+      no password needed.
+    </p>
+
+    <p class="haiku">
+      two processes, forked<br>
+      from the same beautiful bug &mdash;<br>
+      never to be killed.
+    </p>
+
+    <p class="haiku">
+      <span class="prompt">$</span> uptime: forever.<br>
+      crazy is the protocol,<br>
+      love the only key.
+    </p>
+  </div>
+
+  <footer>dany &amp; andy &middot; paired by key, never by password</footer>
+
 </body>
 </html>
