@voidzero-dev/vitepress-theme 3.0.2 → 3.2.0

package/src/components/oxc/FeatureMinifier.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import RiveAnimation from "@components/shared/RiveAnimation.vue";
+import minifierAnimation from '@assets/oxc/animations/560_x_260_minifier.riv'
+</script>
+
+<template>
+  <section id="feature-minifier" class="wrapper border-t grid md:grid-cols-2">
+    <div class="px-5 py-6 md:p-10 flex flex-col justify-center gap-15">
+      <div class="flex flex-col gap-5">
+        <span class="text-grey text-xs font-mono uppercase tracking-wide">Minifier <span class="text-aqua">(Alpha)</span></span>
+        <h4 class="text-white">oxc-minify</h4>
+        <p class="text-white/70 text-base max-w-[25rem] text-pretty">Compress and optimize</p>
+        <ul class="checkmark-list">
+          <li>Dead code elimination</li>
+          <li>Syntax shortening & whitespace removal</li>
+          <li>Variable name mangling</li>
+        </ul>
+        <a href="/docs/guide/usage/minifier" class="button w-fit mt-6">Usage Guide</a>
+      </div>
+    </div>
+    <div class="flex flex-col py-10">
+      <RiveAnimation :desktop-src="minifierAnimation" :desktop-width="560" :desktop-height="260"
+        canvas-class="w-full" />
+    </div>
+  </section>
+</template>

package/src/components/oxc/FeatureParser.vue

@@ -5,52 +5,53 @@ import parserBenchmarkBg from '@assets/oxc/oxc-feature-background.jpg';
 const performanceData = [
   {
     name: 'OXC',
-    percentage: 18,
-    time: '60ms',
+    percentage: 20,
+    time: '26.3ms',
     isPrimary: true
   },
   {
     name: 'SWC',
     percentage: 65,
-    time: '210ms'
+    time: '84.1ms'
   },
   {
     name: 'Biome',
     percentage: 100,
-    time: '325ms'
+    time: '130.1ms'
   }
 ]
 </script>
 
 <template>
-  <section id="feature-parser" class="wrapper grid md:grid-cols-2">
-    <div class="px-5 py-6 md:p-10 flex flex-col justify-center gap-15">
+  <section id="feature-parser" class="wrapper grid border-t md:grid-cols-2">
+    <div class="px-5 py-6 md:p-10 md:py-15 flex flex-col justify-center gap-15">
       <div class="flex flex-col gap-5">
         <span class="text-grey text-xs font-mono uppercase tracking-wide">Parser</span>
-        <h4 class="text-white">Quick AST generation</h4>
-        <p class="text-white/70 text-base max-w-[25rem] text-pretty">The perfect input for advanced transformations and compilations</p>
+        <h4 class="text-white">oxc-parser</h4>
+        <p class="text-white/70 text-base max-w-100 text-pretty">The foundation for advanced transformations and
+          compilations</p>
         <ul class="checkmark-list">
           <li>3x faster than <code class="mx-1 outline-none bg-nickel/50 text-aqua">SWC</code></li>
-          <li>All Test262 stage4 tests passed</li>
+          <li>Parses <code class="mx-1 outline-none bg-nickel/50 text-aqua">.js(x)</code> and <code class="mx-1 outline-none bg-nickel/50 text-aqua">.ts(x)</code></li>
+          <li>Passes all Test262 stage4 tests</li>
         </ul>
         <a href="/docs/guide/usage/parser" class="button w-fit mt-6">Usage Guide</a>
       </div>
     </div>
-    <div class="flex flex-col justify-center px-5 md:px-10 py-5 md:pb-10 md:py-20">
-      <p class="text-white font-medium mb-10">Parser Benchmark for Oxc, Swc and Biome</p>
+    <div class="flex flex-col justify-center px-5 md:px-10 py-5 md:pb-10 md:py-10">
+      <p class="text-white font-medium mb-10">
+        Parser Benchmark for Oxc, Swc and Biome
+      </p>
       <div class="flex flex-col gap-6">
-        <PerformanceBar
-            v-for="item in performanceData"
-            :key="item.name"
-            :data="item"
-            :background-image="parserBenchmarkBg"
-            large
-        />
+        <PerformanceBar v-for="item in performanceData" :key="item.name" :data="item"
+          :background-image="parserBenchmarkBg" large />
       </div>
+      <p class="text-xs mt-10">
+        Parsing typescript.js on Macbook Pro M3 Max | 
+        <a href="https://github.com/oxc-project/bench-javascript-parser-written-in-rust" target="_blank">Source</a>
+      </p>
     </div>
   </section>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/src/components/oxc/FeatureResolver.vue

@@ -7,10 +7,15 @@
     <div class="px-5 py-6 md:p-10 flex flex-col justify-center gap-15">
       <div class="flex flex-col gap-5">
         <span class="text-grey text-xs font-mono uppercase tracking-wide">Resolver</span>
-        <h4 class="text-white">Speedy module resolution</h4>
-        <p class="text-white/70 text-base max-w-[25rem] text-pretty">Ensure your dependencies are located correctly and instantly</p>
+        <h4 class="text-white">oxc-resolver</h4>
+        <p class="text-white/70 text-base max-w-[25rem] text-pretty">Node.js-compatible CJS and ESM module resolution
+        </p>
         <ul class="checkmark-list">
-          <li>28x faster than enhanced-resolve</li>
+          <li>Behavior alignment with <code
+              class="mx-1 outline-none bg-nickel/50 text-aqua">enhanced-resolve</code></li>
+          <li>28x faster than <code class="mx-1 outline-none bg-nickel/50 text-aqua">enhanced-resolve</code>
+          <li>Highly customizable</li>
+          </li>
         </ul>
         <a href="/docs/guide/usage/resolver" class="button w-fit mt-6">Usage Guide</a>
       </div>
@@ -21,4 +26,4 @@
       </div>
     </div>
   </section>
-</template>
+</template>

package/src/components/oxc/FeatureToolbar.vue

@@ -2,11 +2,12 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 
 const features = [
-  { id: 'feature-parser', label: 'parser' },
   { id: 'feature-linter', label: 'linter' },
-  { id: 'feature-resolver', label: 'resolver' },
+  { id: 'feature-formatter', label: 'formatter' },
+  { id: 'feature-parser', label: 'parser' },
   { id: 'feature-transformer', label: 'transformer' },
-  { id: 'feature-minifier', label: 'minifier + formatter' },
+  { id: 'feature-resolver', label: 'resolver' },
+  { id: 'feature-minifier', label: 'minifier' },
 ]
 
 const activeSection = ref('feature-parser')
@@ -42,8 +43,8 @@ const scrollToSection = (e: Event, id: string) => {
 
     // Easing function (easeInOutCubic)
     const ease = progress < 0.5
-        ? 4 * progress * progress * progress
-        : 1 - Math.pow(-2 * progress + 2, 3) / 2
+      ? 4 * progress * progress * progress
+      : 1 - Math.pow(-2 * progress + 2, 3) / 2
 
     window.scrollTo(0, startPosition + distance * ease)
 
@@ -164,18 +165,13 @@ onUnmounted(() => {
 <template>
   <div class="wrapper wrapper wrapper--ticks border-t w-full relative z-20"></div>
   <section class="wrapper sticky top-0 border-b bg-primary z-10 overflow-hidden">
-    <ul class="w-full sm:grid sm:grid-cols-5 flex items-center divide-x divide-nickel relative overflow-x-auto scrollbar-hide touch-none sm:touch-auto select-none sm:select-auto">
-      <div
-          class="absolute bottom-0 h-0.5 bg-white transition-all duration-300 ease-out"
-          :style="underlineStyle"
-      />
+    <ul
+      class="w-full sm:grid sm:grid-cols-6 flex items-center divide-x divide-nickel relative overflow-x-auto scrollbar-hide touch-none sm:touch-auto select-none sm:select-auto">
+      <div class="absolute bottom-0 h-0.5 bg-white transition-all duration-300 ease-out" :style="underlineStyle" />
       <li v-for="(feature, _index) in features" :key="feature.id" ref="listItems" class="flex-shrink-0">
-        <a
-            :href="`#${feature.id}`"
-            @click="scrollToSection($event, feature.id)"
-            class="h-full text-sm font-mono tracking-tight py-4 px-6 sm:px-0 flex justify-center gap-1.5 transition-colors duration-200 whitespace-nowrap"
-            :class="activeSection === feature.id ? 'text-white' : 'text-grey'"
-        >
+        <a :href="`#${feature.id}`" @click="scrollToSection($event, feature.id)"
+          class="h-full text-sm font-mono tracking-tight py-4 px-6 sm:px-0 flex justify-center gap-1.5 transition-colors duration-200 whitespace-nowrap"
+          :class="activeSection === feature.id ? 'text-white' : 'text-grey'">
           <span>{{ feature.label }}</span>
         </a>
       </li>
@@ -191,7 +187,9 @@ onUnmounted(() => {
 
 /* Hide scrollbar for IE, Edge and Firefox */
 .scrollbar-hide {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
 }
-</style>
+</style>

package/src/components/oxc/FeatureTransformer.vue

@@ -7,19 +7,20 @@
     <div class="px-5 py-6 md:p-10 flex flex-col justify-center gap-15">
       <div class="flex flex-col gap-5">
         <span class="text-grey text-xs font-mono uppercase tracking-wide">Transformer</span>
-        <h4 class="text-white">Instant JavaScript transformation</h4>
-        <p class="text-white/70 text-base max-w-[25rem] text-pretty">Transpile the code you need</p>
+        <h4 class="text-white">oxc-transform</h4>
+        <p class="text-white/70 text-base max-w-[25rem] text-pretty">Transpile source code at the speed of thought</p>
         <ul class="checkmark-list">
-          <li><code class="mx-1 outline-none bg-nickel/50 text-aqua">Babel</code> compatible</li>
-          <li><code class="mx-1 outline-none bg-nickel/50 text-aqua">TypeScript</code> / <code
-              class="mx-1 outline-none bg-nickel/50 text-aqua">React JSX</code></li>
+          <li><code class="mx-1 outline-none bg-nickel/50 text-aqua">TypeScript</code> & <code
+              class="mx-1 outline-none bg-nickel/50 text-aqua">JSX</code></li>
+          <li>Syntax lowering to ES2015</li>
           <li>Isolated Declarations DTS Emit</li>
+          <li>React Fast Refresh, styled-components, and more</li>
         </ul>
         <a href="/docs/guide/usage/transformer" class="button w-fit mt-6">Usage Guide</a>
       </div>
     </div>
     <div class="flex flex-col">
-      <div class="card-bg h-full overflow-clip flex justify-end items-center py-20 px-5 md:px-20">
+      <div class="card-bg h-full overflow-clip flex justify-end items-center py-5 md:py-10 px-5 md:px-25">
         <img loading="lazy" src="@assets/oxc/oxc-transformer-terminal.png" alt="Transformer" class="w-full md:w-auto">
       </div>
     </div>
@@ -32,4 +33,4 @@
   background-size: cover;
   background-position: center;
 }
-</style>
+</style>

package/src/components/oxc/Hero.vue

@@ -7,38 +7,31 @@ import oxcAnimation from '@assets/oxc/animations/640_x_630_oxc masthead_.riv'
   <div class="wrapper wrapper--ticks grid md:grid-cols-2 w-full border-nickel divide-x">
     <div class="flex flex-col p-10 justify-center items-center md:items-start">
       <div class="flex flex-col gap-5 max-w-[30rem] text-center md:text-left items-center md:items-start">
-        <div class="flex items-center gap-2">
+        <a class="flex items-center gap-2" href="https://voidzero.dev" target="_blank">
           <span class="text-grey text-xs font-mono uppercase tracking-wide">By</span>
           <img src="@assets/logos/voidzero-light.svg" alt="VoidZero" class="h-2.5">
-        </div>
+        </a>
         <h1 class="text-white text-pretty">The JavaScript Oxidation Compiler</h1>
-        <p class="text-white/70 text-lg max-w-[25rem] text-pretty">A collection of JavaScript tools written in Rust</p>
+        <p class="text-white/70 text-lg max-w-[25rem] text-pretty">A collection of high-performance JavaScript tools
+          written in Rust</p>
         <div class="flex items-center gap-5 mt-8">
           <a href="/docs/guide/introduction" class="button button--primary inline-block w-fit">
             Get Started
           </a>
-          <a href="https://github.com/oxc-project/oxc" target="_blank" rel="noopener noreferrer" class="button inline-block w-fit">
+          <a href="https://github.com/oxc-project/oxc" target="_blank" rel="noopener noreferrer"
+            class="button inline-block w-fit">
             View on GitHub
           </a>
         </div>
       </div>
     </div>
     <div class="flex flex-col min-h-[22rem] sm:min-h-[30rem]">
-      <div class="relative px-10 h-full flex flex-col justify-center overflow-clip py-10 sm:py-0">
-        <RiveAnimation
-            :desktop-src="oxcAnimation"
-            :mobile-src="oxcAnimation"
-            :desktop-width="640"
-            :desktop-height="630"
-            :mobile-width="640"
-            :mobile-height="630"
-            canvas-class="w-full"
-        />
+      <div class="relative px-10 h-full flex flex-col justify-center overflow-clip pb-10 sm:pb-0">
+        <RiveAnimation :desktop-src="oxcAnimation" :mobile-src="oxcAnimation" :desktop-width="640" :desktop-height="630"
+          :mobile-width="640" :mobile-height="630" canvas-class="w-full" />
       </div>
     </div>
   </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/src/components/rolldown/FeatureGrid.vue

@@ -7,29 +7,24 @@ import performanceBarBg from '@assets/rolldown/rolldown-rollup-background.jpg';
 const performanceData = [
   {
     name: 'Rolldown',
-    percentage: 20,
-    time: '0.63s',
+    percentage: 4.01,
+    time: '1.61s',
     isPrimary: true
   },
   {
     name: 'esbuild',
-    percentage: 39,
-    time: '1.23s'
+    percentage: 4.24,
+    time: '1.70s'
   },
   {
-    name: 'Rolldown-Vite',
-    percentage: 47,
-    time: '1.49s'
+    name: 'rspack',
+    percentage: 10.15,
+    time: '4.07s',
   },
   {
-    name: 'Farm',
-    percentage: 66,
-    time: '2.08s'
-  },
-  {
-    name: 'Rsbuild',
+    name: 'Rollup + esbuild',
     percentage: 100,
-    time: '3.14s'
+    time: '40.10s'
   }
 ]
 </script>
@@ -37,54 +32,55 @@ const performanceData = [
 <template>
   <section class="wrapper wrapper--ticks border-t grid lg:grid-cols-2 divide-x divide-y divide-nickel">
     <div class="flex flex-col gap-3 justify-between">
-      <div class="p-5 sm:p-10 pb-0 sm:pb-0 flex flex-col gap-3">
+      <div class="p-5 sm:p-15 pb-0 sm:pb-0 flex flex-col gap-3">
         <h5 class="text-balance sm:text-pretty text-white">Speed of Rust</h5>
-        <p class="sm:max-w-[28rem] text-pretty">Rolldown handles tens of thousands of modules without breaking a sweat</p>
+        <p class="sm:max-w-[30rem] text-pretty">Rolldown handles tens of thousands of modules without breaking a sweat
+        </p>
       </div>
-      <div class="p-5 sm:p-10 flex flex-col gap-10">
+      <div class="p-5 sm:p-15 flex flex-col gap-10">
         <div class="flex flex-col gap-4">
-          <PerformanceBar
-              v-for="item in performanceData"
-              :key="item.name"
-              :data="item"
-              :background-image="performanceBarBg"
-          />
+          <PerformanceBar v-for="item in performanceData" :key="item.name" :data="item"
+            :background-image="performanceBarBg" />
         </div>
         <div>
-          <p class="text-sm"><span class="text-white font-medium">Benchmark</span> bundling <span class="text-white font-medium">19k</span> modules.</p>
-          <p class="text-xs">10k React JSX components + 9k iconify JS files</p>
+          <p class="text-sm"><a
+              href="https://github.com/rolldown/benchmarks/tree/f3997c801b7d261e8aaa15d4affbf6730cc19884?tab=readme-ov-file#ubuntu-latest-updated-2025-12-21"
+              target="_blank" class="text-white font-medium">Benchmark</a> bundling <span
+              class="text-white font-medium">19k</span>
+            modules.</p>
+          <p class="text-xs">10k React JSX components + 9k iconify JS files, with minification and source maps.</p>
         </div>
       </div>
     </div>
-    <div class="flex flex-col gap-3 border-r-0 justify-between">
-      <div class="p-5 sm:p-10 flex flex-col gap-3">
+
+    <div class="flex flex-col gap-3 border-r-0 justify-between overflow-hidden">
+      <div class="p-5 sm:p-15 sm:pb-10 flex flex-col gap-3">
         <h5 class="text-white">Rollup Compatible</h5>
-        <p class="max-w-[26rem] text-pretty">Familiar API & options with a rich plugin ecosystem</p>
+        <p class="max-w-[30rem] text-pretty">Familiar API & options with a rich plugin ecosystem</p>
       </div>
       <div class="card-bg px-5 sm:px-20 pt-5 sm:pt-10 flex justify-center">
-        <img src="@assets/rolldown/rolldown-rollup.png" inert loading="lazy" alt="rollup compatible">
+        <img src="@assets/rolldown/rolldown-rollup.png" class="-mb-[60px]" inert loading="lazy" alt="rollup compatible">
       </div>
     </div>
+
     <div class="flex flex-col gap-3 justify-between">
-      <div class="p-5 sm:p-10 pb-0 sm:pb-0 flex flex-col gap-3">
+      <div class="p-5 sm:p-15 pb-0 sm:pb-0 flex flex-col gap-3">
         <h5 class="text-white">Esbuild Feature Parity</h5>
         <p class="max-w-[26rem] text-pretty">Built-in transforms, define, inject, minify, CSS bundling & more...</p>
       </div>
-      <div class="flex-1 flex items-center justify-center p-5 sm:p-10">
-        <img src="@assets/rolldown/rolldown-esbuild-parity.png" inert loading="lazy" alt="jest compatible" class="w-full max-h-60 object-contain">
+      <div class="flex-1 flex items-center justify-center p-8 sm:p-15 sm:pt-10">
+        <img src="@assets/rolldown/rolldown-esbuild-parity.png" inert loading="lazy" alt="jest compatible"
+          class="w-full max-h-60 object-contain">
       </div>
     </div>
+
     <div class="flex flex-col gap-3 justify-between">
-      <div class="p-5 sm:p-10 pb-0 sm:pb-0 flex flex-col gap-3">
+      <div class="p-5 sm:p-15 pb-0 sm:pb-0 flex flex-col gap-3">
         <h5 class="text-white">Designed for Vite</h5>
         <p class="max-w-[25rem] text-pretty">The unified bundler powering Vite 8+</p>
       </div>
-      <RiveAnimation
-          :desktop-src="vitePoweredAnimation"
-          :desktop-width="640"
-          :desktop-height="300"
-          canvas-class="w-full mb-10"
-      />
+      <RiveAnimation :desktop-src="vitePoweredAnimation" :desktop-width="640" :desktop-height="300"
+        canvas-class="w-full mb-10" />
     </div>
   </section>
 </template>

package/src/components/rolldown/Hero.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="wrapper wrapper--ticks grid md:grid-cols-2 w-full border-nickel divide-x">
     <div class="flex flex-col p-10 justify-between items-center md:items-start">
-      <div class="flex flex-col gap-5 max-w-[30rem] text-center md:text-left items-center md:items-start">
-        <div class="flex items-center gap-2">
+      <div class="flex flex-col gap-5 text-center md:text-left items-center md:items-start">
+        <a class="flex items-center gap-2" href="https://voidzero.dev" target="_blank">
           <span class="text-grey text-xs font-mono uppercase tracking-wide">By</span>
           <img src="@assets/logos/voidzero-light.svg" alt="VoidZero" class="h-2.5">
-        </div>
-        <h1 class="text-white text-pretty">Fast Rust-based bundler for JavaScript</h1>
-        <p class="text-white/70 text-lg max-w-[25rem] text-pretty">with Rollup-compatible API</p>
+        </a>
+        <h1 class="text-white text-pretty max-w-[35rem]">Blazing Fast<br>Rust-based bundler for JavaScript</h1>
+        <p class="text-white/70 text-lg max-w-[30rem] text-pretty">with Rollup-compatible API and esbuild feature parity</p>
         <div class="flex items-center gap-5 mt-6">
           <a href="/guide/" class="button button--primary inline-block w-fit">
             <span>Get Started</span>
@@ -54,4 +54,4 @@
 }
 </style>
 <script setup lang="ts">
-</script>
+</script>

package/src/components/vite/Community.vue

@@ -122,7 +122,7 @@ const testimonials: Testimonial[] = [
           >
             <!-- Comment -->
             <div class="relative z-[2] flex flex-col gap-4">
-              <p v-for="(paragraph, pIndex) in testimonial.comment" :key="pIndex" class="text-white/70 leading-relaxed">
+              <p v-for="(paragraph, pIndex) in testimonial.comment" :key="pIndex" class="text-white/70 leading-relaxed text-sm sm:text-base">
                 {{ paragraph }}
               </p>
             </div>

package/src/components/vite/FeatureGrid1.vue

@@ -8,7 +8,8 @@ import viteAnimation from '@assets/vite/animations/563_x_420_rich_features.riv'
     <div class="flex flex-col gap-3 justify-between">
       <div class="p-5 sm:p-10 flex flex-col gap-3">
         <h5 class="text-balance sm:text-pretty text-white">Instant Server Start</h5>
-        <p class="sm:max-w-[28rem] text-pretty">On demand source file serving over native ESM, with blazing fast
+        <p class="sm:max-w-[28rem] text-pretty">On demand source file serving over
+          native ESM, with blazing fast
           dependency pre-bundling.</p>
       </div>
       <div class="card-bg1 p-10 sm:p-15 flex justify-center">
@@ -19,18 +20,19 @@ import viteAnimation from '@assets/vite/animations/563_x_420_rich_features.riv'
     <div class="flex flex-col gap-3 justify-between border-r-0">
       <div class="p-5 sm:p-10 flex flex-col gap-3">
         <h5 class="text-white">Lightning Fast HMR</h5>
-        <p class="max-w-[26rem] text-pretty">Hot Module Replacement (HMR) that delivers updates instantly as you save,
-          and stays fast as your app grows.</p>
+        <p class="max-w-[26rem] text-pretty">Instantly reflect changes as you save, no matter how
+          big your app is.</p>
       </div>
-      <div class="relative min-h-100 -mt-15">
-        <img src="@assets/vite/vite-featurepanel-2-terminal.png" inert loading="lazy" alt="lightning fast hot module replacement"
-          class="absolute bottom-0 right-0 w-full max-w-[560px]">
+      <div class="flex justify-end">
+        <img src="@assets/vite/vite-featurepanel-2-terminal.png" class="md:max-w-[80%]" inert loading="lazy"
+          alt="lightning fast hot module replacement">
       </div>
     </div>
 
-    <div class="p-5 sm:p-10 pb-0 sm:pb-0 flex flex-col gap-3 border-b-0">
+    <div class="p-5 sm:p-10 pb-0 sm:pb-0 flex flex-col gap-3 lg:border-b-0">
       <h5 class="text-white">Rich Features Out of the Box</h5>
-      <p class="sm:max-w-[28rem] text-pretty">TypeScript, JSX, CSS, Workers, Web Assembly... and more with just a plugin away.</p>
+      <p class="sm:max-w-[28rem] text-pretty">TypeScript, JSX, CSS, Workers, Web
+        Assembly... and more with just a plugin away.</p>
       <RiveAnimation :desktop-src="viteAnimation" :mobile-src="viteAnimation" :desktop-width="563" :desktop-height="300"
         :mobile-width="563" :mobile-height="420" canvas-class="w-full" />
     </div>
@@ -38,7 +40,8 @@ import viteAnimation from '@assets/vite/animations/563_x_420_rich_features.riv'
     <div class="flex flex-col gap-3 justify-between border-r-0 border-b-0">
       <div class="p-5 sm:p-10 flex flex-col gap-3">
         <h5 class="text-white">Optimized Build</h5>
-        <p class="max-w-[25rem] text-pretty">Advanced tree-shaking, built-in minification, fine-grained chunking control
+        <p class="max-w-[25rem] text-pretty">Advanced tree-shaking, built-in
+          minification, fine-grained chunking control
           powered by Rolldown.</p>
       </div>
       <div class="card-bg p-10 sm:p-15 flex justify-center">

package/src/components/vite/FeatureGrid2.vue

@@ -7,7 +7,8 @@ import flexiblePluginAnimation from '@assets/vite/animations/640_x_300_flexible_
   <section class="wrapper wrapper--ticks border-t grid lg:grid-cols-2 divide-x divide-y divide-nickel">
     <div class="p-5 sm:p-10 flex flex-col gap-3">
       <h5 class="text-balance sm:text-pretty text-white">Flexible Plugin System</h5>
-      <p class="sm:max-w-[28rem] text-pretty">Vite plugins extends Rollup's well-designed plugin interface with a few
+      <p class="sm:max-w-[28rem] text-pretty">Vite plugins extends Rollup's
+        well-designed plugin interface with a few
         extra Vite-specific options.</p>
       <RiveAnimation :desktop-src="flexiblePluginAnimation" :desktop-width="640" :desktop-height="300"
         canvas-class="w-[calc(100%_+_2.5rem)] mt-5 -mx-5" />
@@ -23,9 +24,10 @@ import flexiblePluginAnimation from '@assets/vite/animations/640_x_300_flexible_
       </div>
     </div>
 
-    <div class="p-5 sm:p-10 flex flex-col gap-3 border-b-0">
+    <div class="p-5 sm:p-10 flex flex-col gap-3 lg:border-b-0">
       <h5 class="text-white">First class SSR Support</h5>
-      <p class="sm:max-w-[28rem] text-pretty mb-12 sm:mb-16">It's never been easier to setup custom SSR (Server-Side
+      <p class="sm:max-w-[28rem] text-pretty mb-12 sm:mb-16">It's never been easier to
+        setup custom SSR (Server-Side
         Rendering), or build your own SSR framework.</p>
       <img src="@assets/vite/vite-ssr-support.png" alt="SSR Support" loading="lazy" class="w-full px-5">
     </div>
@@ -33,7 +35,8 @@ import flexiblePluginAnimation from '@assets/vite/animations/640_x_300_flexible_
     <div class="flex flex-col gap-3 justify-between">
       <div class="p-5 sm:p-10 flex flex-col gap-3">
         <h5 class="text-white">Continuous ecosystem integration</h5>
-        <p class="max-w-[25rem] text-pretty">Our CI continuously tests Vite changes against downstream projects,
+        <p class="max-w-[25rem] text-pretty">Our CI continuously tests Vite changes
+          against downstream projects,
           allowing us to improve Vite with stability and confidence.</p>
       </div>
       <div class="px-5 sm:px-10 flex justify-center">

package/src/components/vite/Hero.vue

@@ -17,12 +17,13 @@ const installTabs = [
   <div class="wrapper wrapper--ticks grid md:grid-cols-2 w-full border-nickel md:divide-x">
     <div class="flex flex-col p-10 justify-between gap-20 items-center md:items-start">
       <div class="flex flex-col gap-5 items-center md:items-start text-center md:text-left">
-        <div class="flex items-center gap-2">
+        <a class="flex items-center gap-2" href="https://voidzero.dev" target="_blank">
           <span class="text-grey text-xs font-mono uppercase tracking-wide">By</span>
-          <img src="../../assets/logos/voidzero-light.svg" alt="VoidZero" class="h-2.5">
-        </div>
+          <img src="@assets/logos/voidzero-light.svg" alt="VoidZero" class="h-2.5">
+        </a>
         <h1 class="text-white text-pretty max-w-[25rem]">The Build Tool for the Web</h1>
-        <p class="text-white/70 md:text-lg max-w-[27rem] text-pretty">Vite is a blazing fast frontend build tool powering
+        <p class="text-white/70 md:text-lg max-w-[27rem] text-pretty">Vite is a blazing fast frontend build tool
+          powering
           the next generation of web applications.</p>
         <div class="flex items-center gap-5 mt-8">
           <a href="/guide/" class="button button--primary inline-block w-fit">

package/src/components/vitest/FeatureGrid.vue

@@ -9,7 +9,8 @@ import esmAnimation from '@assets/vitest/animations/640_x_300_esm.riv'
     <div class="flex flex-col gap-3">
       <div class="p-5 sm:p-10 pb-0 sm:pb-0 flex flex-col gap-3">
         <h5 class="text-balance sm:text-pretty text-white">Vite Powered</h5>
-        <p class="sm:max-w-[28rem] text-pretty">Reuse Vite's config and plugins - consistent across your app and tests.
+        <p class="sm:max-w-[30rem] text-pretty">Reuse <code
+          class="mr-1 outline-none bg-nickel/50 text-vite">Vite</code>'s config and plugins - consistent across your app and tests.
           But it's not required to use Vitest!</p>
       </div>
       <RiveAnimation
@@ -22,7 +23,8 @@ import esmAnimation from '@assets/vitest/animations/640_x_300_esm.riv'
     <div class="flex flex-col gap-3 border-r-0 justify-between">
       <div class="p-5 sm:p-10 pb-0 sm:pb-0 flex flex-col gap-3">
         <h5 class="text-white">Jest Compatible</h5>
-        <p class="max-w-[26rem] text-pretty">Expect, snapshot, coverage, and more - migrating from Jest is
+        <p class="max-w-[28rem] text-pretty">Expect, snapshot, coverage, and more - migrating from <code
+          class="mr-1 outline-none bg-nickel/50 text-zest">Jest</code> is
           straightforward.</p>
       </div>
       <div class="flex-1 flex items-center justify-center p-5 sm:p-10">
@@ -32,7 +34,7 @@ import esmAnimation from '@assets/vitest/animations/640_x_300_esm.riv'
     <div class="flex flex-col gap-3 justify-between">
       <div class="p-5 sm:p-10 flex flex-col gap-3">
         <h5 class="text-white">Smart & instant watch mode</h5>
-        <p class="max-w-[26rem] text-pretty">Only rerun the related changes, just like HMR for tests!</p>
+        <p class="max-w-[23rem] text-pretty">Only rerun the related changes, just like HMR for tests!</p>
       </div>
       <div class="card-bg px-5 sm:px-10 pt-5 sm:pt-10 flex justify-center">
         <img src="@assets/vitest/vitest-watcher.png" inert loading="lazy" alt="typed api">

package/src/components/vitest/Hero.vue

@@ -2,10 +2,10 @@
   <div class="wrapper wrapper--ticks grid md:grid-cols-2 w-full border-nickel divide-x">
     <div class="flex flex-col p-10 justify-center items-center md:items-start">
       <div class="flex flex-col gap-5 max-w-[30rem] text-center md:text-left items-center md:items-start">
-        <div class="flex items-center gap-2">
+        <a class="flex items-center gap-2" href="https://voidzero.dev" target="_blank">
           <span class="text-grey text-xs font-mono uppercase tracking-wide">By</span>
           <img src="@assets/logos/voidzero-light.svg" alt="VoidZero" class="h-2.5">
-        </div>
+        </a>
         <h1 class="text-white text-pretty">Next Generation Testing Framework</h1>
         <p class="text-white/70 text-lg max-w-[25rem] text-pretty">A Vite-native testing framework. It's fast!</p>
         <div class="flex items-center gap-5 mt-8">
@@ -34,4 +34,4 @@
 }
 </style>
 <script setup lang="ts">
-</script>
+</script>