@voidzero-dev/vitepress-theme 3.2.1 → 3.3.1

package/src/components/oxc/FeatureFormatter.vue

@@ -1,30 +0,0 @@
-<template>
-  <section id="feature-formatter" class="wrapper grid border-t 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">Formatter<span class="text-aqua"> (Alpha)</span></span>
-        <h4 class="text-white">Oxfmt: Prettier-compatible formatter</h4>
-        <p class="text-white/70 text-base max-w-[25rem] text-pretty">Enforce consistent code styles</p>
-        <ul class="checkmark-list">
-          <li>3x faster than <code class="mx-1 outline-none bg-nickel/50 text-aqua">Biome</code></li>
-          <li>35x faster than <code class="mx-1 outline-none bg-nickel/50 text-aqua">Prettier</code></li>
-          <li>Tailwind class sorting support</li>
-        </ul>
-        <a href="/docs/guide/usage/formatter" class="button w-fit mt-6">Usage Guide</a>
-      </div>
-    </div>
-    <div class="flex flex-col">
-      <div class="h-full overflow-clip flex justify-end items-center py-5 px-5 md:py-20 md:pl-10 md:pr-0">
-        <img loading="lazy" src="@assets/oxc/oxc-formatter-terminal.png" alt="Linter" class="[mask-image:linear-gradient(to_bottom,black_50%,transparent),linear-gradient(to_right,black_50%,transparent)] [mask-composite:intersect] [-webkit-mask-composite:source-in]">
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-.card-bg {
-  background-image: url('@assets/oxc/oxc-feature-background.jpg');
-  background-size: cover;
-  background-position: center;
-}
-</style>

package/src/components/oxc/FeatureLinter.vue

@@ -1,31 +0,0 @@
-<template>
-  <section id="feature-linter" class="wrapper 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">Linter</span>
-        <h4 class="text-white">Oxlint: ESLint-compatible linter</h4>
-        <p class="text-white/70 text-base max-w-[25rem] text-pretty">Catch bugs before they make it to production</p>
-        <ul class="checkmark-list">
-          <li>50~100x faster than <code class="mx-1 outline-none bg-nickel/50 text-aqua">ESLint</code></li>
-          <li>570+ rules and growing</li>
-          <li>True type-aware Linting powered by <code class="mx-1 outline-none bg-nickel/50 text-aqua">tsgo</code></li>
-          <li>Support for <code class="mx-1 outline-none bg-nickel/50 text-aqua">ESLint</code> JS Plugins</li>
-        </ul>
-        <a href="/docs/guide/usage/linter" 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:pl-10 md:pr-0">
-        <img loading="lazy" src="@assets/oxc/oxc-linter-terminal.png" alt="Linter" class="w-full md:w-auto">
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-.card-bg {
-  background-image: url('@assets/oxc/oxc-feature-background.jpg');
-  background-size: cover;
-  background-position: center;
-}
-</style>

package/src/components/oxc/FeatureMinifier.vue

@@ -1,26 +0,0 @@
-<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

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import PerformanceBar from "@components/shared/PerformanceBar.vue";
-import parserBenchmarkBg from '@assets/oxc/oxc-feature-background.jpg';
-
-const performanceData = [
-  {
-    name: 'OXC',
-    percentage: 20,
-    time: '26.3ms',
-    isPrimary: true
-  },
-  {
-    name: 'SWC',
-    percentage: 65,
-    time: '84.1ms'
-  },
-  {
-    name: 'Biome',
-    percentage: 100,
-    time: '130.1ms'
-  }
-]
-</script>
-
-<template>
-  <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">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>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-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 />
-      </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>

package/src/components/oxc/FeatureResolver.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <section id="feature-resolver" 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">Resolver</span>
-        <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>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>
-          <li>Highly customizable</li>
-        </ul>
-        <a href="/docs/guide/usage/resolver" class="button w-fit mt-6">Usage Guide</a>
-      </div>
-    </div>
-    <div class="flex flex-col">
-      <div class="h-full overflow-clip flex justify-end items-center py-16 px-5 md:px-10">
-        <img loading="lazy" src="@assets/oxc/oxc-resolver-terminal.png" alt="Resolver" class="w-full md:w-auto">
-      </div>
-    </div>
-  </section>
-</template>

package/src/components/oxc/FeatureToolbar.vue

@@ -1,195 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-
-const features = [
-  { id: 'feature-linter', label: 'linter' },
-  { id: 'feature-formatter', label: 'formatter' },
-  { id: 'feature-parser', label: 'parser' },
-  { id: 'feature-transformer', label: 'transformer' },
-  { id: 'feature-resolver', label: 'resolver' },
-  { id: 'feature-minifier', label: 'minifier' },
-]
-
-const activeSection = ref('feature-parser')
-const underlineStyle = ref({ left: '0px', width: '0px' })
-const listItems = ref<HTMLElement[]>([])
-let scrollTimeout: number | null = null
-
-const scrollToSection = (e: Event, id: string) => {
-  e.preventDefault()
-  e.stopPropagation()
-
-  const element = document.getElementById(id)
-  if (!element) return
-
-  // Get the toolbar height to offset the scroll
-  const toolbar = (e.currentTarget as HTMLElement).closest('section')
-  const toolbarHeight = toolbar?.offsetHeight || 0
-
-  // Calculate position to scroll to
-  const elementPosition = element.getBoundingClientRect().top + window.scrollY
-  const offsetPosition = elementPosition - toolbarHeight
-
-  // Use custom smooth scroll with requestAnimationFrame for guaranteed smooth behavior
-  const startPosition = window.scrollY
-  const distance = offsetPosition - startPosition
-  const duration = 800 // ms
-  let startTime: number | null = null
-
-  const animation = (currentTime: number) => {
-    if (startTime === null) startTime = currentTime
-    const timeElapsed = currentTime - startTime
-    const progress = Math.min(timeElapsed / duration, 1)
-
-    // Easing function (easeInOutCubic)
-    const ease = progress < 0.5
-      ? 4 * progress * progress * progress
-      : 1 - Math.pow(-2 * progress + 2, 3) / 2
-
-    window.scrollTo(0, startPosition + distance * ease)
-
-    if (progress < 1) {
-      requestAnimationFrame(animation)
-    }
-  }
-
-  requestAnimationFrame(animation)
-}
-
-const updateUnderlinePosition = () => {
-  const activeIndex = features.findIndex(f => f.id === activeSection.value)
-  if (activeIndex >= 0 && listItems.value[activeIndex]) {
-    const activeItem = listItems.value[activeIndex]
-    underlineStyle.value = {
-      left: `${activeItem.offsetLeft}px`,
-      width: `${activeItem.offsetWidth}px`
-    }
-
-    // Auto-scroll the toolbar on mobile to keep active item in view
-    const toolbar = activeItem.closest('ul')
-    if (toolbar && window.innerWidth < 640) { // sm breakpoint
-      const itemLeft = activeItem.offsetLeft
-      const itemWidth = activeItem.offsetWidth
-      const toolbarWidth = toolbar.clientWidth
-
-      // Calculate the center position
-      const targetScrollLeft = itemLeft - (toolbarWidth / 2) + (itemWidth / 2)
-
-      toolbar.scrollTo({
-        left: targetScrollLeft,
-        behavior: 'smooth'
-      })
-    }
-  }
-}
-
-const determineActiveSection = () => {
-  // Get all sections and their positions
-  const sections = features.map(feature => {
-    const element = document.getElementById(feature.id)
-    if (!element) return null
-
-    const rect = element.getBoundingClientRect()
-    return {
-      id: feature.id,
-      top: rect.top,
-      bottom: rect.bottom,
-      height: rect.height
-    }
-  }).filter(Boolean)
-
-  // Find the section that's most visible near the top of the viewport
-  // We consider a section "active" if it's within 200px of the top
-  const threshold = 200
-  let activeId = activeSection.value
-
-  for (const section of sections) {
-    if (!section) continue
-
-    // If section top is near or above threshold and bottom is below threshold
-    if (section.top <= threshold && section.bottom > threshold) {
-      activeId = section.id
-      break
-    }
-  }
-
-  // If no section found above, check if we're at the very bottom
-  if (activeId === activeSection.value) {
-    const lastSection = sections[sections.length - 1]
-    if (lastSection && window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 100) {
-      activeId = lastSection.id
-    }
-  }
-
-  if (activeId !== activeSection.value) {
-    activeSection.value = activeId
-    updateUnderlinePosition()
-  }
-}
-
-const handleScroll = () => {
-  if (scrollTimeout) {
-    window.cancelAnimationFrame(scrollTimeout)
-  }
-
-  scrollTimeout = window.requestAnimationFrame(() => {
-    determineActiveSection()
-  })
-}
-
-let observer: IntersectionObserver | null = null
-
-onMounted(() => {
-  // Set up scroll listener for active state tracking
-  window.addEventListener('scroll', handleScroll, { passive: true })
-
-  // Initial underline position
-  setTimeout(() => {
-    updateUnderlinePosition()
-    determineActiveSection()
-  }, 100)
-
-  // Update on resize
-  window.addEventListener('resize', updateUnderlinePosition)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('scroll', handleScroll)
-  window.removeEventListener('resize', updateUnderlinePosition)
-  if (scrollTimeout) {
-    window.cancelAnimationFrame(scrollTimeout)
-  }
-})
-</script>
-
-<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-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'">
-          <span>{{ feature.label }}</span>
-        </a>
-      </li>
-    </ul>
-  </section>
-</template>
-
-<style scoped>
-/* Hide scrollbar for Chrome, Safari and Opera */
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.scrollbar-hide {
-  -ms-overflow-style: none;
-  /* IE and Edge */
-  scrollbar-width: none;
-  /* Firefox */
-}
-</style>

package/src/components/oxc/FeatureTransformer.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <section id="feature-transformer" 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">Transformer</span>
-        <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">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-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>
-  </section>
-</template>
-
-<style scoped>
-.card-bg {
-  background-image: url('@assets/oxc/oxc-feature-background.jpg');
-  background-size: cover;
-  background-position: center;
-}
-</style>

package/src/components/oxc/Hero.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import RiveAnimation from "@components/shared/RiveAnimation.vue";
-import oxcAnimation from '@assets/oxc/animations/640_x_630_oxc masthead_.riv'
-</script>
-
-<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-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">
-        <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">
-        </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 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">
-            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 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>

package/src/components/rolldown/FeatureGrid.vue

@@ -1,94 +0,0 @@
-<script setup lang="ts">
-import RiveAnimation from "@components/shared/RiveAnimation.vue";
-import vitePoweredAnimation from '@assets/rolldown/animations/640_x_300_design_for_vite.riv'
-import PerformanceBar from "@components/shared/PerformanceBar.vue";
-import performanceBarBg from '@assets/rolldown/rolldown-rollup-background.jpg';
-
-const performanceData = [
-  {
-    name: 'Rolldown',
-    percentage: 4.01,
-    time: '1.61s',
-    isPrimary: true
-  },
-  {
-    name: 'esbuild',
-    percentage: 4.24,
-    time: '1.70s'
-  },
-  {
-    name: 'rspack',
-    percentage: 10.15,
-    time: '4.07s',
-  },
-  {
-    name: 'Rollup + esbuild',
-    percentage: 100,
-    time: '40.10s'
-  }
-]
-</script>
-
-<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-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-[30rem] text-pretty">Rolldown handles tens of thousands of modules without breaking a sweat
-        </p>
-      </div>
-      <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" />
-        </div>
-        <div>
-          <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 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-[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" 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-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-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-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" />
-    </div>
-  </section>
-</template>
-
-<style scoped>
-.card-bg {
-  background-image: url('@assets/rolldown/rolldown-rollup-background.jpg');
-  background-size: cover;
-  background-position: center;
-}
-</style>

package/src/components/rolldown/Hero.vue

@@ -1,57 +0,0 @@
-<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 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">
-        </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>
-          </a>
-          <a href="https://github.com/rolldown/rolldown" target="_blank" rel="noopener noreferrer" class="button inline-block w-fit">
-            View on GitHub
-          </a>
-        </div>
-      </div>
-      <div class="px-3 py-1.5 bg-slate rounded w-fit flex gap-2 items-center mt-8 md:mt-0">
-        <a href="https://repl.rolldown.rs/" target="_blank">
-          <figure class="project-icon gap-3">
-            <img class="size-5" loading="lazy" src="@assets/icons/rolldown-light.svg" alt="Rolldown">
-            <figcaption class="text-sm">Try Rolldown in the REPL</figcaption>
-            <svg class="size-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M3.18228 2.81797L9.54624 2.81797L9.54624 9.18193" stroke="#FF5500" stroke-width="1.35" stroke-linejoin="round"/>
-              <path d="M9.5459 2.81799L3.18194 9.18195" stroke="#FF5500" stroke-width="1.35" stroke-linejoin="round"/>
-            </svg>
-          </figure>
-        </a>
-      </div>
-    </div>
-    <div class="flex flex-col min-h-[22rem] sm:min-h-[30rem]">
-      <div class="relative pl-6 sm:pl-16 h-full flex flex-col justify-center overflow-clip py-8 sm:py-16 hero-background">
-        <img src="@assets/rolldown/hero-terminal.svg" alt="Rolldown terminal" class="w-full h-full object-contain">
-      </div>
-      <a href="https://www.youtube.com/watch?v=RRjfm8cMveQ" target="_blank" class="p-5 flex gap-5 items-center relative group">
-        <img src="@assets/rolldown/rolldown-thumbnail.png" alt="Video thumbnail" class="h-16 group-hover:opacity-75 group-hover:scale-105 transition-[scale,opacity]">
-        <div>
-          <h5 class="text-white">What is Rolldown</h5>
-          <p class="text-base">Rolldown explained in 37 seconds</p>
-        </div>
-        <span class="absolute top-5 right-5 text-fire bg-slate rounded px-3 py-1 text-xs font-mono">0:37</span>
-      </a>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.hero-background {
-  background-image: url('@assets/rolldown/hero-background.jpg');
-  background-size: cover;
-  background-position: center;
-}
-</style>
-<script setup lang="ts">
-</script>