diff options
| author | Fuwn <[email protected]> | 2026-01-29 05:57:50 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2026-01-29 05:57:50 -0800 |
| commit | 39ec404434ab13d4686f792584da4ba9e814128a (patch) | |
| tree | 7e808356d6002b16f4159ee1cdc44abee897b213 /src/lib/Landing.svelte | |
| parent | feat(Landing): Update to match LandingHero (diff) | |
| download | due.moe-39ec404434ab13d4686f792584da4ba9e814128a.tar.xz due.moe-39ec404434ab13d4686f792584da4ba9e814128a.zip | |
perf: Optimise landing page performance
Diffstat (limited to 'src/lib/Landing.svelte')
| -rw-r--r-- | src/lib/Landing.svelte | 20 |
1 files changed, 16 insertions, 4 deletions
diff --git a/src/lib/Landing.svelte b/src/lib/Landing.svelte index 4c824a8d..4a5c7df0 100644 --- a/src/lib/Landing.svelte +++ b/src/lib/Landing.svelte @@ -187,7 +187,16 @@ tabindex="0" onkeydown={(e) => e.key === 'Enter' && (demoFocused = true)} > - <img src="https://i.imgur.com/j5vfKbx.gif" alt="Demo" title="Click to expand" /> + <video + autoplay + loop + muted + playsinline + poster="/demo/demo-poster.jpg" + title="Click to expand" + > + <source src="/demo/demo.mp4" type="video/mp4" /> + </video> </div> </div> </div> @@ -203,7 +212,9 @@ onkeydown={(e) => e.key === 'Escape' && (demoFocused = false)} > <div class="demo-focused"> - <img src="https://i.imgur.com/j5vfKbx.gif" alt="Demo" /> + <video autoplay loop muted playsinline> + <source src="/demo/demo.mp4" type="video/mp4" /> + </video> <p class="demo-hint">Click anywhere to close</p> </div> @@ -344,11 +355,12 @@ transform: scale(1.02); } - .demo-card img { + .demo-card video { width: 100%; height: 100%; object-fit: fill; border-radius: 8px; + pointer-events: none; } .cta { @@ -392,7 +404,7 @@ animation: scaleIn 0.2s ease; } - .demo-focused img { + .demo-focused video { max-width: 90vw; max-height: 80vh; border-radius: 12px; |