diff --git a/docs/app/(home)/components/TweetWall/TweetWall.module.css b/docs/app/(home)/components/TweetWall/TweetWall.module.css
index 23dc7a915..904b37808 100644
--- a/docs/app/(home)/components/TweetWall/TweetWall.module.css
+++ b/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;
}
}
diff --git a/docs/app/(home)/openclaw-os/page.tsx b/docs/app/(home)/openclaw-os/page.tsx
index 1232f807e..3b65ca24b 100644
--- a/docs/app/(home)/openclaw-os/page.tsx
+++ b/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}
diff --git a/docs/app/(home)/sections/HeroSection/HeroSection.tsx b/docs/app/(home)/sections/HeroSection/HeroSection.tsx
index 530c720be..f9c471645 100644
--- a/docs/app/(home)/sections/HeroSection/HeroSection.tsx
+++ b/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;
diff --git a/docs/app/(home)/sections/TweetWallSection/TweetWallSection.module.css b/docs/app/(home)/sections/TweetWallSection/TweetWallSection.module.css
index b54badeb5..d43901817 100644
--- a/docs/app/(home)/sections/TweetWallSection/TweetWallSection.module.css
+++ b/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;
diff --git a/docs/app/(home)/sections/TweetWallSection/TweetWallStats.tsx b/docs/app/(home)/sections/TweetWallSection/TweetWallStats.tsx
index 0fe5cad06..e421cc505 100644
--- a/docs/app/(home)/sections/TweetWallSection/TweetWallStats.tsx
+++ b/docs/app/(home)/sections/TweetWallSection/TweetWallStats.tsx
@@ -20,13 +20,17 @@ export function TweetWallStats() {
- {stars.toLocaleString()}
- stars
+
+ {stars.toLocaleString()}{" "}
+ stars
+
- 1 Million+
- downloads across all packages
+
+ 1 Million+{" "}
+ downloads across all packages
+
);
diff --git a/docs/public/homepage/hero-web-dark.svg b/docs/public/homepage/hero-web-dark.svg
deleted file mode 100644
index 42a6378f4..000000000
--- a/docs/public/homepage/hero-web-dark.svg
+++ /dev/null
@@ -1,334 +0,0 @@
-
diff --git a/docs/public/homepage/hero-web-dark.webp b/docs/public/homepage/hero-web-dark.webp
new file mode 100644
index 000000000..29d1723a9
Binary files /dev/null and b/docs/public/homepage/hero-web-dark.webp differ
diff --git a/docs/public/homepage/hero-web.svg b/docs/public/homepage/hero-web.svg
deleted file mode 100644
index c4085d417..000000000
--- a/docs/public/homepage/hero-web.svg
+++ /dev/null
@@ -1,348 +0,0 @@
-
diff --git a/docs/public/homepage/hero-web.webp b/docs/public/homepage/hero-web.webp
new file mode 100644
index 000000000..b5cb85da5
Binary files /dev/null and b/docs/public/homepage/hero-web.webp differ
diff --git a/docs/public/homepage/mobile-hero-dark.svg b/docs/public/homepage/mobile-hero-dark.svg
deleted file mode 100644
index f9bfed421..000000000
--- a/docs/public/homepage/mobile-hero-dark.svg
+++ /dev/null
@@ -1,168 +0,0 @@
-
diff --git a/docs/public/homepage/mobile-hero-dark.webp b/docs/public/homepage/mobile-hero-dark.webp
new file mode 100644
index 000000000..73f591666
Binary files /dev/null and b/docs/public/homepage/mobile-hero-dark.webp differ
diff --git a/docs/public/homepage/mobile-hero-light.svg b/docs/public/homepage/mobile-hero-light.svg
deleted file mode 100644
index 37f9e536e..000000000
--- a/docs/public/homepage/mobile-hero-light.svg
+++ /dev/null
@@ -1,188 +0,0 @@
-
diff --git a/docs/public/homepage/mobile-hero-light.webp b/docs/public/homepage/mobile-hero-light.webp
new file mode 100644
index 000000000..581f83bb7
Binary files /dev/null and b/docs/public/homepage/mobile-hero-light.webp differ
diff --git a/docs/public/openclaw-os/hero-dark.svg b/docs/public/openclaw-os/hero-dark.svg
deleted file mode 100644
index a68b452e6..000000000
--- a/docs/public/openclaw-os/hero-dark.svg
+++ /dev/null
@@ -1,948 +0,0 @@
-
diff --git a/docs/public/openclaw-os/hero-dark.webp b/docs/public/openclaw-os/hero-dark.webp
new file mode 100644
index 000000000..74e1d4ff7
Binary files /dev/null and b/docs/public/openclaw-os/hero-dark.webp differ
diff --git a/docs/public/openclaw-os/hero-light.svg b/docs/public/openclaw-os/hero-light.svg
deleted file mode 100644
index 0861ead51..000000000
--- a/docs/public/openclaw-os/hero-light.svg
+++ /dev/null
@@ -1,948 +0,0 @@
-
diff --git a/docs/public/openclaw-os/hero-light.webp b/docs/public/openclaw-os/hero-light.webp
new file mode 100644
index 000000000..1eef93ffc
Binary files /dev/null and b/docs/public/openclaw-os/hero-light.webp differ