From 5509ca2e904f65e159c2a1c261aa409751a85023 Mon Sep 17 00:00:00 2001
From: rahim <rahim.alwer@gmail.com>
Date: Tue, 10 Mar 2026 02:45:45 -0700
Subject: [PATCH] fix(site): correct homepage download comparison (#823)

---
 site/src/components/home/Built/DataViz.astro | 14 +++++++++-----
 site/src/styles/globals.css                  |  5 +++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/site/src/components/home/Built/DataViz.astro b/site/src/components/home/Built/DataViz.astro
index 15af9c88..39886918 100644
--- a/site/src/components/home/Built/DataViz.astro
+++ b/site/src/components/home/Built/DataViz.astro
@@ -20,7 +20,11 @@ const seconds = [0, 5, 10, 15, 20];
   >
     VJS 8
   </p>
-  <div class="mt-4 mb-2 data-bar w-full md:mt-5 md:mb-2.5"></div>
+  <div
+    class="mt-4 mb-2 data-bar w-full md:mt-5 md:mb-2.5"
+    style="--data-bar-width: 100%; --data-bar-duration: 3.96s;"
+  >
+  </div>
   <div class="flex items-center gap-2.5">
     <p
       class="hidden min-w-30 items-center justify-center rounded-full border border-manila-light bg-faded-black py-0.5 text-center font-display text-h5 font-bold text-manila-light uppercase md:flex"
@@ -32,7 +36,7 @@ const seconds = [0, 5, 10, 15, 20];
     >
       <span class="font-bold">3.96s</span>
       <span>/</span>
-      <span class="whitespace-nowrap">722 KB</span>
+      <span class="whitespace-nowrap">200kB</span>
     </p>
   </div>
   <p
@@ -42,7 +46,7 @@ const seconds = [0, 5, 10, 15, 20];
   </p>
   <div
     class="mt-4 mb-2 data-bar data-bar-orange md:mt-5 md:mb-2.5"
-    style="max-width: 32.25%"
+    style="--data-bar-width: 18.75%; --data-bar-duration: 0.75s;"
   >
   </div>
 
@@ -55,9 +59,9 @@ const seconds = [0, 5, 10, 15, 20];
     <p
       class="2xl flex gap-1 text-center font-display text-h5 text-orange uppercase lg:gap-2.5"
     >
-      <span class="font-bold">1.29s</span>
+      <span class="font-bold">0.75s</span>
       <span>/</span>
-      <span class="whitespace-nowrap">198 KB</span>
+      <span class="whitespace-nowrap">38kB</span>
     </p>
   </div>
 
diff --git a/site/src/styles/globals.css b/site/src/styles/globals.css
index e93d0aa5..2f28f3ec 100644
--- a/site/src/styles/globals.css
+++ b/site/src/styles/globals.css
@@ -215,10 +215,11 @@
 
 @utility data-bar {
   height: 2.5rem;
+  width: var(--data-bar-width, 100%);
   background-image: url("/data-bar-white.svg");
   background-repeat: repeat-x;
   background-size: auto 100%;
-  animation: grow-bar 1.5s ease-out forwards;
+  animation: grow-bar var(--data-bar-duration, 1.5s) ease-out forwards;
   animation-play-state: paused;
 
   [data-animate] & {
@@ -322,7 +323,7 @@
     width: 0%;
   }
   to {
-    width: 100%;
+    width: var(--data-bar-width, 100%);
   }
 }