Optimize hero images to WebP and fix mobile homepage layout

docs/app/(home)/components/TweetWall/TweetWall.module.css

@@ -78,14 +78,16 @@
   }
 
   .column {
-    flex: 0 0 200px;
+    flex: 0 0 230px;
   }
 
-  /* Render the card at 250px then scale the whole box down with zoom (shrinks the
-     layout box too, so columns stay tight and the loop has no gaps). 250 * 0.8 = 200. */
+  /* Render the card at 320px then scale the whole box down with zoom (shrinks the
+     layout box too, so columns stay tight and the loop has no gaps). 320 * 0.72 ≈ 230.
+     The wide base width lets tweet text breathe so cards aren't squeezed/too tall,
+     while the 0.72 scale keeps the cards compact. */
   .slot {
-    width: 250px;
-    zoom: 0.8;
+    width: 320px;
+    zoom: 0.72;
     margin-bottom: 0.625rem;
   }
 }

docs/app/(home)/openclaw-os/page.tsx

@@ -59,13 +59,13 @@ export default function OpenClawOSPage() {
             />
           }
           align="left"
-          desktopPreviewImage="/openclaw-os/hero-light.svg"
-          desktopPreviewImageDark="/openclaw-os/hero-dark.svg"
+          desktopPreviewImage="/openclaw-os/hero-light.webp"
+          desktopPreviewImageDark="/openclaw-os/hero-dark.webp"
           desktopPreviewImageAlt="OpenClaw OS workspace"
           desktopPreviewImageWidth={1568}
           desktopPreviewImageHeight={940}
-          mobilePreviewImage="/openclaw-os/hero-light.svg"
-          mobilePreviewImageDark="/openclaw-os/hero-dark.svg"
+          mobilePreviewImage="/openclaw-os/hero-light.webp"
+          mobilePreviewImageDark="/openclaw-os/hero-dark.webp"
           mobilePreviewImageAlt="OpenClaw OS workspace"
           mobilePreviewImageWidth={1568}
           mobilePreviewImageHeight={940}

docs/app/(home)/sections/HeroSection/HeroSection.tsx

@@ -41,14 +41,14 @@ function commandVariants(command: string): CommandVariant[] {
 }
 
 const DESKTOP_HERO_IMAGE = {
-  light: "/homepage/hero-web.svg",
-  dark: "/homepage/hero-web-dark.svg",
+  light: "/homepage/hero-web.webp",
+  dark: "/homepage/hero-web-dark.webp",
   width: 768,
   height: 454,
 } as const;
 const MOBILE_HERO_IMAGE = {
-  light: "/homepage/mobile-hero-light.svg",
-  dark: "/homepage/mobile-hero-dark.svg",
+  light: "/homepage/mobile-hero-light.webp",
+  dark: "/homepage/mobile-hero-dark.webp",
   width: 333,
   height: 440,
 } as const;

docs/app/(home)/sections/TweetWallSection/TweetWallSection.module.css

@@ -27,15 +27,46 @@
   font-size: 0.9375rem;
 }
 
+.statText {
+  min-width: 0;
+}
+
 .statNumber {
   font-weight: 600;
   font-variant-numeric: tabular-nums;
+  /* Keep "1 Million+" / "7,657" from ever splitting across lines. */
+  white-space: nowrap;
 }
 
 .statLabel {
   color: var(--openui-text-neutral-secondary);
 }
 
+/* Narrow phones: stack the two stats and let each label wrap as flowing text
+   right after its number, so the icon/number/label never get stranded apart. */
+@media (max-width: 480px) {
+  .stats {
+    flex-direction: column;
+    align-items: center;
+    gap: 0.625rem;
+  }
+
+  /* Render each stat as one centered line of text that wraps as a unit, with
+     the icon inline at the start — so the icon hugs its number instead of being
+     stranded, and nothing gets pushed apart on narrow screens. */
+  .statChip {
+    display: block;
+    max-width: 100%;
+    text-align: center;
+  }
+
+  .statChip svg {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 0.35rem;
+  }
+}
+
 @media (min-width: 1024px) {
   .section {
     padding-inline: 2rem;

docs/app/(home)/sections/TweetWallSection/TweetWallStats.tsx

@@ -20,13 +20,17 @@ export function TweetWallStats() {
     <div className={styles.stats}>
       <span className={styles.statChip}>
         <GitHubMark size={16} />
-        <span className={styles.statNumber}>{stars.toLocaleString()}</span>
-        <span className={styles.statLabel}>stars</span>
+        <span className={styles.statText}>
+          <span className={styles.statNumber}>{stars.toLocaleString()}</span>{" "}
+          <span className={styles.statLabel}>stars</span>
+        </span>
       </span>
       <span className={styles.statChip}>
         <NpmMark />
-        <span className={styles.statNumber}>1 Million+</span>
-        <span className={styles.statLabel}>downloads across all packages</span>
+        <span className={styles.statText}>
+          <span className={styles.statNumber}>1 Million+</span>{" "}
+          <span className={styles.statLabel}>downloads across all packages</span>
+        </span>
       </span>
     </div>
   );