feat(hero): replace banner with full-frame architecture illustration
Deploy / build (push) Successful in 22s

The previous hero-banner was composed as a wide banner with an empty left
40% reserved for overlay text. In the 50/50 hero column it rendered as a
shrunken half-width picture with dead space on both sides.

New illustration fills the whole 16:9 frame edge to edge (code/CI/CD left,
container + host cluster centre, observability right) so the right hero
column reads as a system diagram at its native 518px width, with the
2048w lightbox for detail reading.

Also add a 1280w WebP so DPR2 desktops do not pull the 2048w asset on
first paint.
This commit is contained in:
hoelee committed 2026-10-26 11:11:22 +08:00
1 parent f0b98843e9
commit 2747950eac
7 files changed
+2 -2

No files matched your search

Binary file not shown.

After

Width:  |  Height:  |  Size: 187 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 87 KiB

After

Width:  |  Height:  |  Size: 313 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

After

Width:  |  Height:  |  Size: 195 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 329 KiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 136 KiB

+1 -1
View File
@@ -73,7 +73,7 @@ const featuredMetrics: Record<string, string> = {
aria-label="View full architecture diagram"
>
<picture>
<source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 960px) 100vw, 560px" type="image/webp" />
<source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner-1280.webp 1280w, /images/hero-banner.webp 1024w" sizes="(max-width: 960px) 100vw, 560px" type="image/webp" />
<img
class="hero-banner-img"
src="/images/hero-banner.jpg"
+1 -1
View File
@@ -74,7 +74,7 @@ const featuredMetrics: Record<string, string> = {
aria-label="点击放大架构图"
>
<picture>
<source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 960px) 100vw, 560px" type="image/webp" />
<source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner-1280.webp 1280w, /images/hero-banner.webp 1024w" sizes="(max-width: 960px) 100vw, 560px" type="image/webp" />
<img
class="hero-banner-img"
src="/images/hero-banner.jpg"