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.
No files matched your search
|
After Width: | Height: | Size: 187 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 313 KiB |
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 195 KiB |
|
Before Width: | Height: | Size: 329 KiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 136 KiB |
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||