design: add optimized product screenshot

Author: aleksnick

assets/selflify-dashboard.jpg

@@ -151,29 +151,24 @@ <h1>Run Netlify-like preview flows on your own server</h1>
           <aside class="hero-panel">
             <div class="panel-header">
               <span class="status-dot"></span>
-              <span>stable</span>
-              <span class="muted">/var/www/app/stable</span>
+              <span>Dashboard</span>
+              <span class="muted">Selflify admin panel</span>
             </div>
 
-            <div class="panel-stack">
-              <article class="signal-card emphasis">
-                <p>Preview Control</p>
-                <strong>app.example.dev</strong>
-                <span>stable + preview routing via generated Caddyfile</span>
-              </article>
-
-              <article class="signal-card">
-                <p>Deploy inventory</p>
-                <strong>pr-6825.app.example.dev</strong>
-                <span>preview auth, size stats and delete flow from one UI</span>
-              </article>
-
-              <article class="signal-card">
-                <p>Operation manager</p>
-                <strong>config write → validate → reload</strong>
-                <span>revision checks, backups and rollback-aware side effects</span>
-              </article>
-            </div>
+            <figure class="hero-screenshot">
+              <img
+                src="./assets/selflify-dashboard.jpg"
+                alt="Selflify dashboard showing sites, deploy metrics, recent deploys and site management cards."
+                width="1600"
+                height="1078"
+                loading="eager"
+                decoding="async"
+              />
+            </figure>
+
+            <p class="hero-panel-note">
+              Real UI: site inventory, recent deploys, disk stats and config flows in one panel.
+            </p>
           </aside>
         </div>
       </header>

index.html

@@ -300,49 +300,32 @@ img {
   color: rgba(255, 240, 244, 0.56);
 }
 
-.panel-stack {
-  display: grid;
-  gap: 0.9rem;
-  margin-top: 1rem;
-}
-
-.signal-card {
-  display: grid;
-  gap: 0.35rem;
-  padding: 1rem 1rem 1.05rem;
-  border-radius: var(--radius-lg);
+.hero-screenshot {
+  margin: 1rem 0 0;
+  overflow: hidden;
+  border-radius: 1.25rem;
   border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.025);
-}
-
-.signal-card p,
-.note-card h3,
-.feature-card h3,
-.timeline-step h3 {
-  margin: 0;
-}
-
-.signal-card p {
-  font-size: 0.8rem;
-  text-transform: uppercase;
-  letter-spacing: 0.16em;
-  color: #ffb1c3;
+  background: rgba(255, 255, 255, 0.02);
+  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.32);
 }
 
-.signal-card strong {
-  font-family: "Space Grotesk", sans-serif;
-  font-size: 1.05rem;
+.hero-screenshot img {
+  display: block;
+  width: 100%;
+  height: auto;
 }
 
-.signal-card span {
-  color: var(--muted);
+.hero-panel-note {
+  margin: 0.95rem 0 0;
+  color: rgba(255, 240, 244, 0.62);
   line-height: 1.65;
+  font-size: 0.94rem;
 }
 
-.signal-card.emphasis {
-  background:
-    linear-gradient(180deg, rgba(161, 33, 65, 0.28), rgba(161, 33, 65, 0.08)),
-    rgba(255, 255, 255, 0.03);
+.note-card h3,
+.feature-card h3,
+.timeline-step h3 {
+  margin: 0;
 }
 
 .section {