From f74ef81d8be095bd2ec9e38bf89e5d34c0dade03 Mon Sep 17 00:00:00 2001
From: Xisheng-Zhao <parker.z@live.cn>
Date: Mon, 8 Jun 2026 16:15:03 +0800
Subject: [PATCH] Polish hero phone stack, workspace sizing, and background
 gradient

---
 site/src/App.tsx    | 37 ++++++++++++------------
 site/src/styles.css | 68 +++++++++++++++++++--------------------------
 2 files changed, 49 insertions(+), 56 deletions(-)

diff --git a/site/src/App.tsx b/site/src/App.tsx
index 5edf32b..960d78f 100644
--- a/site/src/App.tsx
+++ b/site/src/App.tsx
@@ -289,26 +289,29 @@ function TypewriterEffect({ active, text, reduced }: { active: boolean; text: st
 /* ── PhoneMockup (hero) ── */
 function PhoneMockup({ reduced }: { reduced: boolean }) {
   return (
-    <motion.div className="phone-wrap-stacked" {...fade(reduced, 0.1)}>
-      <motion.div
-        className="phone-back"
-        initial={reduced ? {} : { opacity: 0, x: 80, rotate: -14 }}
-        whileInView={{ opacity: 0.68, x: 0, rotate: -9 }}
+    <div className="hero-phone-stack">
+      <motion.img
+        src={inboxImg} alt="Inbox preview"
+        initial={reduced ? {} : { opacity: 0, x: 60, rotate: -14 }}
+        whileInView={{ opacity: 0.72, x: 0, rotate: -8 }}
         viewport={{ once: true }}
         transition={{ duration: 0.85, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] as const }}
-      >
-        <img src={issueDetailImg} alt="Issue detail preview" />
-      </motion.div>
-      <motion.div
-        className="phone-front"
-        initial={reduced ? {} : { opacity: 0, x: 100, rotate: 10 }}
-        whileInView={{ opacity: 1, x: 0, rotate: 5 }}
+      />
+      <motion.img
+        src={issuesListImg} alt="Issues list preview"
+        initial={reduced ? {} : { opacity: 0, x: 80, rotate: 8 }}
+        whileInView={{ opacity: 1, x: 0, rotate: 4 }}
         viewport={{ once: true }}
-        transition={{ duration: 0.85, delay: 0.35, ease: [0.25, 0.1, 0.25, 1] as const }}
-      >
-        <img src={issueSubImg} alt="Issue subtasks preview" />
-      </motion.div>
-    </motion.div>
+        transition={{ duration: 0.85, delay: 0.3, ease: [0.25, 0.1, 0.25, 1] as const }}
+      />
+      <motion.img
+        src={issueDetailImg} alt="Issue detail preview"
+        initial={reduced ? {} : { opacity: 0, x: 60, rotate: 14 }}
+        whileInView={{ opacity: 0.86, x: 0, rotate: 10 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.85, delay: 0.4, ease: [0.25, 0.1, 0.25, 1] as const }}
+      />
+    </div>
   );
 }
 
diff --git a/site/src/styles.css b/site/src/styles.css
index e524484..ff5c089 100644
--- a/site/src/styles.css
+++ b/site/src/styles.css
@@ -20,10 +20,11 @@ html { scroll-behavior: smooth; }
 body {
   margin: 0;
   min-width: 320px;
+  overflow-x: hidden;
   background:
-    radial-gradient(circle at 80% 5%, rgba(255, 228, 92, 0.32), transparent 30%),
-    radial-gradient(circle at 15% 25%, rgba(22, 71, 255, 0.14), transparent 28%),
-    var(--paper);
+    radial-gradient(circle at 82% 5%, rgba(255, 228, 92, 0.4), transparent 31%),
+    radial-gradient(circle at 10% 30%, rgba(22, 71, 255, 0.16), transparent 30%),
+    linear-gradient(180deg, #fbfcff 0%, var(--paper) 72%, #eef3ff 100%);
 }
 
 body, button, input { font: inherit; }
@@ -194,13 +195,28 @@ h3 {
   transform-origin: center;
 }
 
-.phone-wrap-stacked {
-  width: min(390px, 82vw);
+.hero-phone-stack {
+  min-height: 720px;
   position: relative;
-  transform-origin: center;
-  min-height: 480px;
+  perspective: 1200px;
 }
 
+.hero-phone-stack img {
+  position: absolute;
+  width: min(310px, 54vw);
+  height: 676px;
+  border-radius: 46px;
+  border: 12px solid #11141d;
+  background: white;
+  object-fit: cover;
+  object-position: top center;
+  box-shadow: var(--shadow);
+}
+
+.hero-phone-stack img:nth-child(1) { left: 2%; top: 48px; transform: rotate(-8deg) translateZ(-20px); }
+.hero-phone-stack img:nth-child(2) { left: 28%; top: 0; transform: rotate(4deg) translateZ(40px); }
+.hero-phone-stack img:nth-child(3) { right: 0; top: 132px; transform: rotate(10deg) translateZ(10px); }
+
 .phone-shell {
   position: relative;
   padding: 14px;
@@ -263,39 +279,7 @@ h3 {
   object-position: top center;
 }
 
-.phone-back, .phone-front {
-  position: absolute;
-  box-shadow: var(--shadow);
-}
 
-.phone-back {
-  width: 200px;
-  padding: 10px;
-  border-radius: 38px;
-  background: #11141d;
-  right: 90px;
-  top: -40px;
-  transform: rotate(-9deg);
-  z-index: 0;
-  opacity: 0.68;
-}
-
-.phone-front {
-  width: 230px;
-  padding: 10px;
-  border-radius: 38px;
-  background: #11141d;
-  right: -10px;
-  top: 10px;
-  transform: rotate(5deg);
-  z-index: 1;
-}
-
-.phone-back img, .phone-front img {
-  width: 100%;
-  display: block;
-  border-radius: 28px;
-}
 
 .tap-ring {
   position: absolute;
@@ -562,6 +546,10 @@ h3 {
   margin-bottom: 48px;
 }
 
+.workspace-phone-wrap .phone-shell-compact {
+  width: min(320px, 72vw);
+}
+
 /* Mention picker overlay */
 .mention-overlay {
   position: absolute;
@@ -816,6 +804,8 @@ pre {
   .topbar { border-radius: 24px; align-items: flex-start; flex-direction: column; }
   .nav-links { flex-wrap: wrap; }
   .hero-grid, .two-col, .demo-grid, .video-copy, .feature-grid, .trust-grid, .release-grid { grid-template-columns: 1fr; }
+  .hero-phone-stack { min-height: 620px; }
+  .hero-phone-stack img { height: 600px; }
   .journey-layout { grid-template-columns: 1fr; }
   .journey-phone-area { position: relative; top: 0; order: -1; }
   .journey-phone-container { justify-content: center; }