From ea0006e75a5bc5699c1a57ff78e7246a89a79c26 Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Mon, 27 Oct 2025 13:58:36 -0500
Subject: [PATCH] chore(website): update roadmap

---
 website/src/pages/index.astro | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index ac33a06b..5b9de5f0 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -50,8 +50,8 @@ const poster = `https://image.mux.com/${PLAYBACK_ID}/thumbnail.webp?time=0`;
     <HomePageDemo client:idle className="mb-6 lg:mb-30" />
     <section class="rounded-3xl">
       <header class="max-w-3xl mb-3">
-        <h2 class="text-h5 font-semibold lg:text-h4">Under construction</h2>
-        <p class="mb-3">Join us on our journey to build the next generation of web video!</p>
+        <h2 class="text-h5 font-semibold lg:text-h4">Roadmap</h2>
+        <p class="mb-3">Video.js 10 is under construction</p>
       </header>
       <div class="relative h-3 w-full bg-yellow rounded-full overflow-hidden mb-6">
         <div
@@ -62,43 +62,41 @@ const poster = `https://image.mux.com/${PLAYBACK_ID}/thumbnail.webp?time=0`;
       </div>
       <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
         <section class="flex gap-3 rounded-xl border border-light-40 dark:border-dark-80 p-6">
-          <CircleCheck size={24} className="flex-shrink-0" />
+          <CircleCheck size={20} className="flex-shrink-0 relative top-1" />
           <div>
             <h3 class="font-semibold text-md">Preview</h3>
             <p class="font-medium mb-3">October 28, 2025</p>
-            <p class="max-w-3xl">First public look, with limited features. Not production ready.</p>
+            <p class="max-w-3xl">Vibe check. First public look, with limited features. Not production ready.</p>
           </div>
         </section>
         <section class="flex gap-3 rounded-xl border border-light-40 dark:border-dark-80 p-6">
           <div>
-            <Clock size={24} className="flex-shrink-0" />
+            <Clock size={20} className="flex-shrink-0 relative top-1" />
           </div>
           <div>
             <h3 class="font-semibold text-md">Beta</h3>
-            <p class="font-medium mb-3">February 2025</p>
-            <p class="max-w-3xl">Core features, like basic controls and adaptive streaming. Bugs likely.</p>
+            <p class="font-medium mb-3">February 2026</p>
+            <p class="max-w-3xl">Core controls. Adaptive streaming with existing engines. Try it out!</p>
           </div>
         </section>
         <section class="flex gap-3 rounded-xl border border-light-40 dark:border-dark-80 p-6">
           <div>
-            <Clock size={24} className="flex-shrink-0" />
+            <Clock size={20} className="flex-shrink-0 relative top-1" />
           </div>
           <div>
             <h3 class="font-semibold text-md">Release</h3>
-            <p class="font-medium mb-3">January 2026</p>
-            <p class="max-w-3xl">Stable release. Fundamental v8 feature parity.</p>
+            <p class="font-medium mb-3">Mid-2026</p>
+            <p class="max-w-3xl">Stable, with all the basics: Media Chrome, Vidstack, Plyr feature parity.</p>
           </div>
         </section>
         <section class="flex gap-3 rounded-xl border border-light-40 dark:border-dark-80 p-6">
           <div>
-            <Clock size={24} className="flex-shrink-0" />
+            <Clock size={20} className="flex-shrink-0 relative top-1" />
           </div>
           <div>
             <h3 class="font-semibold text-md">Beyond</h3>
-            <p class="font-medium mb-3">2026</p>
-            <p class="max-w-3xl">
-              Collaborate with the community, migrate critical plugins, develop new streaming engines
-            </p>
+            <p class="font-medium mb-3">Late-2026</p>
+            <p class="max-w-3xl">Collab with the community, migrate major v8 plugins, develop streaming engines</p>
           </div>
         </section>
       </div>