@voidzero-dev/vitepress-theme 0.0.17 → 0.0.18

package/dist/vitepress/components/terminal-animations/TerminalAnimation4.js

@@ -0,0 +1,37 @@
+import { createElementBlock, createElementVNode, defineComponent, onMounted, onUnmounted, openBlock } from "vue";
+import Typewriter from "typewriter-effect/dist/core";
+
+//#region src/vitepress/components/terminal-animations/TerminalAnimation4.vue
+const _hoisted_1 = { class: "font-mono text-sm text-white leading-[1.5rem]" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "TerminalAnimation4",
+	props: { onAnimationComplete: { type: Function } },
+	setup(__props) {
+		const props = __props;
+		let typewriter;
+		onMounted(() => {
+			const target = document.getElementById("terminal-code");
+			typewriter = new Typewriter(target, {
+				loop: false,
+				delay: 1
+			});
+			typewriter.typeString(`<span>$ vite fmt</span>`).pauseFor(200).pasteString(`<span class="block w-full h-[1rem]"></span>`).pasteString(`<div class="block text-grey"><span class="text-vite">VITE+ v1.0.0</span> <span class="text-aqua">fmt</span></div>`).pauseFor(500).pasteString(`<div class="block">src/App.css <span class="text-aqua">0ms</span> <span class="text-grey">(unchanged)</span></div>`).pasteString(`<div class="block">src/App.tsx <span class="text-aqua">1ms</span></div>`).pasteString(`<div class="block">src/index.css <span class="text-aqua">0ms</span> <span class="text-grey">(unchanged)</span></div>`).pasteString(`<div class="block">src/main.tsx <span class="text-aqua">1ms</span></div>`).pasteString(`<div class="block">src/vite-env.d.ts <span class="text-aqua">0ms</span> <span class="text-grey">(unchanged)</span></div>`).pasteString(`<div class="block"><span class="text-zest">✓</span> Formatted <span class="text-aqua">2 files</span> in <span class="text-aqua">2ms</span>.</div>`).pasteString(`<span class="block w-full h-[1rem]"></span>`).callFunction(() => {
+				if (props.onAnimationComplete) {
+					props.onAnimationComplete();
+				}
+			}).start();
+		});
+		onUnmounted(() => {
+			if (typewriter) {
+				typewriter.stop();
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("p", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("span", { id: "terminal-code" }, null, -1)])]);
+		};
+	}
+});
+var TerminalAnimation4_default = _sfc_main;
+
+//#endregion
+export { TerminalAnimation4_default as default };

package/dist/vitepress/components/terminal-animations/TerminalAnimation5.js

@@ -0,0 +1,37 @@
+import { createElementBlock, createElementVNode, defineComponent, onMounted, onUnmounted, openBlock } from "vue";
+import Typewriter from "typewriter-effect/dist/core";
+
+//#region src/vitepress/components/terminal-animations/TerminalAnimation5.vue
+const _hoisted_1 = { class: "font-mono text-sm text-white leading-[1.5rem]" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "TerminalAnimation5",
+	props: { onAnimationComplete: { type: Function } },
+	setup(__props) {
+		const props = __props;
+		let typewriter;
+		onMounted(() => {
+			const target = document.getElementById("terminal-code");
+			typewriter = new Typewriter(target, {
+				loop: false,
+				delay: 1
+			});
+			typewriter.typeString(`<span>$ vite test</span>`).pauseFor(200).pasteString(`<span class="block w-full h-[1rem]"></span>`).pasteString(`<div class="block"><span class="text-vite">VITE+ v1.0.0</span> <span class="text-aqua">test</span> RUN ~/vite-plus-demo</div>`).pasteString(`<span class="block w-full h-[1rem]"></span>`).pauseFor(300).pasteString(`<div class="block"><span class="text-zest">✓</span> test/hello.spec.ts <span class="text-grey">(1 test)</span> <span class="text-zest">1ms</span></div>`).pasteString(`<span class="block w-full h-[1rem]"></span>`).pasteString(`<div class="block text-grey">Test Files <span class="text-zest">1 passed</span> <span class="text-grey">(1)</span></div>`).pasteString(`<div class="block text-grey">Tests <span class="text-zest">1 passed</span> <span class="text-grey">(1)</span></div>`).pasteString(`<div class="block text-grey">Start at <span class="text-white">00:13:44</span></div>`).pasteString(`<div class="block text-grey">Duration <span class="text-white">199ms</span> <span class="text-grey">(transform 13ms, setup 0ms, collect 8ms, tests 1ms, environment 0ms, prepare 33ms)</span></div>`).pasteString(`<span class="block w-full h-[1rem]"></span>`).callFunction(() => {
+				if (props.onAnimationComplete) {
+					props.onAnimationComplete();
+				}
+			}).start();
+		});
+		onUnmounted(() => {
+			if (typewriter) {
+				typewriter.stop();
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("p", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("span", { id: "terminal-code" }, null, -1)])]);
+		};
+	}
+});
+var TerminalAnimation5_default = _sfc_main;
+
+//#endregion
+export { TerminalAnimation5_default as default };

package/dist/vitepress/components/terminal-animations/TerminalAnimation6.js

@@ -0,0 +1,37 @@
+import { createElementBlock, createElementVNode, defineComponent, onMounted, onUnmounted, openBlock } from "vue";
+import Typewriter from "typewriter-effect/dist/core";
+
+//#region src/vitepress/components/terminal-animations/TerminalAnimation6.vue
+const _hoisted_1 = { class: "font-mono text-sm text-white leading-[1.5rem]" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "TerminalAnimation6",
+	props: { onAnimationComplete: { type: Function } },
+	setup(__props) {
+		const props = __props;
+		let typewriter;
+		onMounted(() => {
+			const target = document.getElementById("terminal-code");
+			typewriter = new Typewriter(target, {
+				loop: false,
+				delay: 1
+			});
+			typewriter.typeString(`<span>$ vite build</span>`).pauseFor(200).pasteString(`<span class="block w-full h-[1rem]"></span>`).pasteString(`<div class="block"><span class="text-vite">VITE+ v1.0.0</span> <span class="text-aqua">building for production</span></div>`).pauseFor(100).pasteString(`<div class="block">transforming...</div>`).pauseFor(400).pasteString(`<div class="block"><span class="text-zest">✓</span> <span class="text-grey">32 modules transformed...</span></div>`).pauseFor(300).pasteString(`<div class="block">rendering chunks...</div>`).pasteString(`<div class="block">computing gzip size...</div>`).pasteString(`<div class="block text-grey"><span class="w-72 inline-block">dist/<span class="text-white">index.html</span></span>&nbsp;&nbsp;0.46 kB | gzip:  0.30 kB</div>`).pasteString(`<div class="block text-grey"><span class="w-72 inline-block">dist/assets/<span class="text-vite">react-CHdo91hT.svg</span></span>&nbsp;&nbsp;4.13 kB | gzip:  2.05 kB</div>`).pasteString(`<div class="block text-grey"><span class="w-72 inline-block">dist/assets/<span class="text-electric">index-D8b4DHJx.css</span></span>&nbsp;&nbsp;1.39 kB | gzip:  0.71 kB</div>`).pasteString(`<div class="block text-grey"><span class="w-72 inline-block">dist/assets/<span class="text-aqua">index-CAl1KfkQ.js</span></span>188.06 kB | gzip: 59.21 kB</div>`).pasteString(`<div class="block"><span class="text-zest">✓ built in 308ms</span></div>`).pasteString(`<span class="block w-full h-[1rem]"></span>`).callFunction(() => {
+				if (props.onAnimationComplete) {
+					props.onAnimationComplete();
+				}
+			}).start();
+		});
+		onUnmounted(() => {
+			if (typewriter) {
+				typewriter.stop();
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("p", _hoisted_1, [..._cache[0] || (_cache[0] = [createElementVNode("span", { id: "terminal-code" }, null, -1)])]);
+		};
+	}
+});
+var TerminalAnimation6_default = _sfc_main;
+
+//#endregion
+export { TerminalAnimation6_default as default };

package/dist/vitepress/index.d.ts

@@ -0,0 +1,34 @@
+import * as vitepress0 from "vitepress";
+
+//#region src/vitepress/index.d.ts
+
+/**
+ * @voidzerodev/vitepress-theme
+ *
+ * Shared VitePress theme providing base styles, fonts, and design tokens
+ * for VoidZero projects.
+ *
+ * Usage:
+ * Extend this theme in your project's VitePress theme.
+ *
+ * @example
+ * ```ts
+ * // In your-project/.vitepress/theme/index.ts
+ * import Theme from '@voidzero-dev/vitepress-theme'
+ * import './overrides.css' // Your project-specific styles
+ *
+ * export default {
+ *   extends: Theme,
+ *   Layout: YourLayout
+ * }
+ * ```
+ *
+ */
+declare const VPTheme: {
+  Layout: () => null;
+  enhanceApp({
+    app
+  }: vitepress0.EnhanceAppContext): void;
+};
+//#endregion
+export { VPTheme };

package/dist/vitepress/index.js

@@ -0,0 +1,21 @@
+import Footer_default from "./components/Footer.js";
+import Header_default from "./components/Header.js";
+import Terminal_default from "./components/Terminal.js";
+import Eyebrow_default from "./components/Eyebrow.js";
+import RiveAnimation_default from "./components/RiveAnimation.js";
+
+//#region src/vitepress/index.ts
+const VPTheme = {
+	Layout: () => null,
+	enhanceApp({ app }) {
+		app.component("Footer", Footer_default);
+		app.component("Header", Header_default);
+		app.component("Terminal", Terminal_default);
+		app.component("Eyebrow", Eyebrow_default);
+		app.component("RiveAnimation", RiveAnimation_default);
+	}
+};
+var vitepress_default = VPTheme;
+
+//#endregion
+export { VPTheme, vitepress_default as default };

package/package.json

@@ -1,50 +1,42 @@
 {
   "name": "@voidzero-dev/vitepress-theme",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "Shared VitePress theme for VoidZero projects",
   "type": "module",
+  "license": "MIT",
   "main": "./dist/index.js",
-  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "style": "./dist/index.css",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./style.css": "./dist/style.css"
+    "./index.css": "./dist/index.css"
   },
   "files": [
-    "dist",
-    "components",
-    "composables",
-    "assets",
-    "fonts",
-    "style.css"
+    "dist"
   ],
   "scripts": {
-    "build": "vite build"
+    "dev": "tsdown --watch",
+    "build": "tsdown"
   },
   "peerDependencies": {
-    "@tailwindcss/typography": "^0.5.19",
-    "tailwindcss": "^4.0.0",
     "vitepress": "^2.0.0-alpha.12",
     "vue": "^3.5.0"
   },
   "dependencies": {
     "@rive-app/canvas": "^2.31.6",
-    "reka-ui": "^2.5.1"
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.13",
+    "reka-ui": "^2.5.1",
+    "tailwindcss": "^4.1.13",
+    "typewriter-effect": "^2.22.0"
   },
-  "keywords": [
-    "vitepress",
-    "theme",
-    "voidzero",
-    "tailwind"
-  ],
-  "license": "MIT",
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.1",
+    "tsdown": "^0.15.11",
     "typescript": "^5.9.3",
-    "vite": "^7.1.12",
+    "unplugin-vue": "^7.0.4",
     "vue-tsc": "^3.1.2"
   }
 }

package/assets/checkmark.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" fill="none" viewBox="0 0 20 19"><circle cx="10" cy="9.5" r="9" stroke="#3b3440" stroke-width=".5"/><path stroke="#fff" stroke-width="1.2" d="M17.794 14a9 9 0 0 0 0-9M2.206 14a9 9 0 0 1 0-9"/><path stroke="#fff" stroke-linejoin="bevel" stroke-width="1.2" d="m6.249 9.788 2.308 2.309 5.195-5.195"/></svg>

package/components/Eyebrow.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  title: string
-}>()
-</script>
-
-<template>
-  <section class="wrapper wrapper--ticks border-t p-5 pl-10">
-    <span class="text-nickel dark:text-white text-xs font-medium font-mono uppercase tracking-wide">{{ title }}</span>
-  </section>
-</template>

package/components/Footer.vue

@@ -1,44 +0,0 @@
-<template>
-  <footer class="bg-primary" data-theme="dark">
-    <section class="wrapper">
-      <div class="bg-wine py-16 md:py-30 px-5 md:px-0 overflow-clip flex flex-col items-center justify-center gap-8 md:gap-12">
-        <h2 class="text-white w-full md:w-2xl text-center text-balance">Take your team's productivity to the next level with Vite+</h2>
-      <div class="flex items-center gap-5">
-        <a href="https://tally.so/r/nGWebL" target="_blank" rel="noopener noreferrer" class="button">Register your interest</a>
-        <a href="https://voidzero.dev/posts/announcing-vite-plus?utm_source=viteplusdev&utm_content=bottom_learn_more" target="_blank" rel="noopener noreferrer" class="button">
-          Learn more
-        </a>
-      </div>
-      </div>
-      <div class="px-5 md:px-24 pt-10 md:pt-16 pb-16 md:pb-30 flex flex-col md:flex-row gap-10 md:gap-0 md:justify-between">
-        <div>
-          <p class="text-grey text-xs font-mono uppercase tracking-wide mb-8">Company</p>
-          <ul class="flex flex-col gap-3">
-            <li><a href="https://voidzero.dev/" target="_blank" rel="noopener noreferrer" class="text-white text-base">VoidZero</a></li>
-            <li><a href="https://vite.dev/" target="_blank" rel="noopener noreferrer" class="text-white text-base">Vite</a></li>
-            <li><a href="https://rolldown.rs/" target="_blank" rel="noopener noreferrer" class="text-white text-base">Rolldown</a></li>
-            <li><a href="https://vitest.dev/" target="_blank" rel="noopener noreferrer" class="text-white text-base">Vitest</a></li>
-            <li><a href="https://oxc.rs/" target="_blank" rel="noopener noreferrer" class="text-white text-base">Oxc</a></li>
-          </ul>
-        </div>
-        <div>
-          <p class="text-grey text-xs font-mono uppercase tracking-wide mb-8">Social</p>
-          <ul class="flex flex-col gap-3">
-            <li><a href="https://github.com/voidzero-dev" target="_blank" rel="noopener noreferrer" class="text-white text-base">GitHub</a></li>
-            <li><a href="https://web-cdn.bsky.app/profile/voidzero.dev" target="_blank" rel="noopener noreferrer" class="text-white text-base">Bluesky</a></li>
-            <li><a href="https://x.com/voidzerodev" target="_blank" rel="noopener noreferrer" class="text-white text-base">X.com</a></li>
-          </ul>
-        </div>
-      </div>
-    </section>
-    <section class="wrapper wrapper--ticks border-t py-5 px-5 md:px-24">
-      <p class="text-sm">© {{ new Date().getFullYear() }} VoidZero Inc. <span class="hidden sm:inline ">All Rights Reserved.</span></p>
-    </section>
-  </footer>
-</template>
-
-<style scoped>
-
-</style>
-<script setup lang="ts">
-</script>

package/components/Header.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import {useData, useRoute} from 'vitepress'
-
-const {site, theme} = useData()
-const nav = theme.value.nav
-
-const route = useRoute()
-</script>
-
-<template>
-  <header class="wrapper px-6 py-7 flex items-center justify-between">
-    <div class="flex items-center gap-10">
-      <a href="/" class="text-primary dark:text-white font-heading text-lg font-medium">
-        {{ site.title }}
-      </a>
-      <ul class="nav">
-        <li v-for="navItem in nav" :key="navItem.link">
-          <a
-              :class="{ active: route.path === navItem.link }"
-              :href="navItem.link"
-          >
-            {{ navItem.text }}
-          </a>
-        </li>
-      </ul>
-    </div>
-
-    <div class="flex items-center gap-6">
-      <slot name="right-side">
-        <!-- Right-aligned links / calls-to-action -->
-      </slot>
-    </div>
-  </header>
-</template>
-
-<style scoped>
-
-</style>

package/components/RiveAnimation.vue

@@ -1,144 +0,0 @@
-<script setup lang="ts">
-import * as rive from "@rive-app/canvas"
-import { ref, onMounted, onUnmounted, computed } from "vue"
-
-interface Props {
-  desktopSrc: string
-  mobileSrc?: string
-  breakpoint?: number
-  stateMachines?: string
-  canvasClass?: string
-  desktopWidth?: number
-  desktopHeight?: number
-  mobileWidth?: number
-  mobileHeight?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  breakpoint: 768, // md breakpoint
-  stateMachines: "State Machine 1",
-  canvasClass: "w-full"
-})
-
-const canvasRef = ref<HTMLCanvasElement | null>(null)
-const containerRef = ref<HTMLElement | null>(null)
-let riveInstance: rive.Rive | null = null
-let hasStarted = ref(false)
-let observer: IntersectionObserver | null = null
-
-const isMobile = ref(false)
-
-const checkMobile = () => {
-  isMobile.value = window.innerWidth < props.breakpoint
-}
-
-const getCurrentSrc = () => {
-  return isMobile.value && props.mobileSrc ? props.mobileSrc : props.desktopSrc
-}
-
-const currentWidth = computed(() => {
-  return isMobile.value && props.mobileWidth ? props.mobileWidth : props.desktopWidth
-})
-
-const currentHeight = computed(() => {
-  return isMobile.value && props.mobileHeight ? props.mobileHeight : props.desktopHeight
-})
-
-const loadAnimation = () => {
-  if (!canvasRef.value || riveInstance) return
-
-  const src = getCurrentSrc()
-
-  riveInstance = new rive.Rive({
-    src,
-    canvas: canvasRef.value,
-    autoplay: false,
-    stateMachines: props.stateMachines,
-    onLoad: () => {
-      riveInstance?.resizeDrawingSurfaceToCanvas()
-    }
-  })
-}
-
-const playAnimation = () => {
-  if (riveInstance) {
-    riveInstance.play()
-  }
-}
-
-const cleanupAnimation = () => {
-  if (riveInstance) {
-    riveInstance.cleanup()
-    riveInstance = null
-  }
-}
-
-const handleResize = () => {
-  const wasMobile = isMobile.value
-  checkMobile()
-
-  // If mobile state changed, reload with correct source
-  if (wasMobile !== isMobile.value) {
-    const wasPlaying = hasStarted.value
-    cleanupAnimation()
-    loadAnimation()
-    if (wasPlaying) {
-      playAnimation()
-    }
-  }
-}
-
-onMounted(() => {
-  checkMobile()
-
-  // Load animation immediately
-  loadAnimation()
-
-  // Set up intersection observer to play animation when in viewport
-  observer = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting && !hasStarted.value) {
-          hasStarted.value = true
-          playAnimation()
-        }
-      })
-    },
-    {
-      threshold: 0.1 // Start when 10% visible
-    }
-  )
-
-  if (containerRef.value) {
-    observer.observe(containerRef.value)
-  }
-
-  // Listen for window resize to handle breakpoint changes
-  window.addEventListener('resize', handleResize)
-})
-
-onUnmounted(() => {
-  cleanupAnimation()
-
-  if (observer && containerRef.value) {
-    observer.unobserve(containerRef.value)
-    observer.disconnect()
-  }
-
-  window.removeEventListener('resize', handleResize)
-})
-</script>
-
-<template>
-  <div ref="containerRef" class="pointer-events-none touch-none select-none">
-    <canvas
-      ref="canvasRef"
-      :width="currentWidth"
-      :height="currentHeight"
-      :class="canvasClass"
-    />
-  </div>
-</template>
-
-<style scoped>
-</style>

package/components/Terminal.vue

@@ -1,165 +0,0 @@
-<script setup lang="ts">
-import {ref, onMounted, onUnmounted} from 'vue'
-import {TabsContent, TabsList, TabsRoot, TabsTrigger} from 'reka-ui'
-import TerminalAnimation1 from "./terminal-animations/TerminalAnimation1.vue";
-import TerminalAnimation2 from "./terminal-animations/TerminalAnimation2.vue";
-import TerminalAnimation3 from "./terminal-animations/TerminalAnimation3.vue";
-import TerminalAnimation4 from "./terminal-animations/TerminalAnimation4.vue";
-import TerminalAnimation5 from "./terminal-animations/TerminalAnimation5.vue";
-import TerminalAnimation6 from "./terminal-animations/TerminalAnimation6.vue";
-import terminalBg from '../assets/terminal-background.jpg';
-
-// Auto-progression configuration
-const AUTO_ADVANCE_DELAY = 1500
-
-// State management
-const activeTab = ref('tab1')
-const autoPlayEnabled = ref(true)
-let autoAdvanceTimeout: ReturnType<typeof setTimeout> | null = null
-
-// Intersection Observer state
-const sectionRef = ref<HTMLElement | null>(null)
-const isVisible = ref(false)
-let observer: IntersectionObserver | null = null
-
-// Tab progression logic
-const tabSequence = ['tab1', 'tab2', 'tab3', 'tab4', 'tab5', 'tab6']
-
-const goToNextTab = () => {
-  const currentIndex = tabSequence.indexOf(activeTab.value)
-  const nextIndex = (currentIndex + 1) % tabSequence.length
-  activeTab.value = tabSequence[nextIndex]
-}
-
-// Handle animation completion
-const onAnimationComplete = () => {
-  if (!autoPlayEnabled.value) return
-
-  // Clear any existing timeout
-  if (autoAdvanceTimeout) {
-    clearTimeout(autoAdvanceTimeout)
-  }
-
-  // Schedule next tab
-  autoAdvanceTimeout = setTimeout(() => {
-    goToNextTab()
-  }, AUTO_ADVANCE_DELAY)
-}
-
-// Handle user interaction with tabs
-const onTabChange = () => {
-  // User clicked a tab, disable auto-play
-  autoPlayEnabled.value = false
-
-  // Clear any pending auto-advance
-  if (autoAdvanceTimeout) {
-    clearTimeout(autoAdvanceTimeout)
-    autoAdvanceTimeout = null
-  }
-}
-
-// Setup Intersection Observer
-onMounted(() => {
-  if (!sectionRef.value) return
-
-  observer = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting && !isVisible.value) {
-          isVisible.value = true
-          // Disconnect observer after first intersection
-          observer?.disconnect()
-        }
-      })
-    },
-    {
-      threshold: 0.2, // Trigger when 20% of the element is visible
-      rootMargin: '0px'
-    }
-  )
-
-  observer.observe(sectionRef.value)
-})
-
-// Cleanup
-onUnmounted(() => {
-  if (autoAdvanceTimeout) {
-    clearTimeout(autoAdvanceTimeout)
-  }
-  if (observer) {
-    observer.disconnect()
-  }
-})
-</script>
-
-<template>
-  <section
-      ref="sectionRef"
-      :style="{ backgroundImage: `url(${terminalBg})` }"
-      class="wrapper border-t h-[40rem] bg-wine bg-cover bg-top flex justify-center pt-28 overflow-clip">
-    <div
-        :class="[
-          'self-stretch px-4 sm:px-8 py-5 sm:py-7 relative bg-primary rounded-tl-lg rounded-tr-lg inline-flex flex-col justify-start items-start gap-2 overflow-hidden w-[62rem] outline-1 outline-offset-[3px] outline-white/30',
-          'transition-transform duration-1000',
-          isVisible ? 'translate-y-0' : 'translate-y-24'
-        ]"
-        style="transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);">
-      <TabsRoot
-          v-if="isVisible"
-          v-model="activeTab"
-          @update:modelValue="onTabChange"
-      >
-        <TabsList
-          aria-label="features"
-          :class="[
-            'absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center p-1 rounded-md border border-white/10',
-            'transition-transform duration-700 delay-300',
-            isVisible ? 'translate-y-0' : 'translate-y-12'
-          ]"
-          style="transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);">
-          <TabsTrigger value="tab1">
-            new
-          </TabsTrigger>
-          <TabsTrigger value="tab2">
-            dev
-          </TabsTrigger>
-          <TabsTrigger value="tab3">
-            lint
-          </TabsTrigger>
-          <TabsTrigger value="tab4">
-            fmt
-          </TabsTrigger>
-          <TabsTrigger value="tab5">
-            test
-          </TabsTrigger>
-          <TabsTrigger value="tab6">
-            build
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="tab1">
-          <TerminalAnimation1 :on-animation-complete="onAnimationComplete"/>
-        </TabsContent>
-        <TabsContent value="tab2">
-          <TerminalAnimation2 :on-animation-complete="onAnimationComplete"/>
-        </TabsContent>
-        <TabsContent value="tab3">
-          <TerminalAnimation3 :on-animation-complete="onAnimationComplete"/>
-        </TabsContent>
-        <TabsContent value="tab4">
-          <TerminalAnimation4 :on-animation-complete="onAnimationComplete"/>
-        </TabsContent>
-        <TabsContent value="tab5">
-          <TerminalAnimation5 :on-animation-complete="onAnimationComplete"/>
-        </TabsContent>
-        <TabsContent value="tab6">
-          <TerminalAnimation6 :on-animation-complete="onAnimationComplete"/>
-        </TabsContent>
-      </TabsRoot>
-
-    </div>
-  </section>
-</template>
-
-<style scoped>
-
-</style>