@voidzero-dev/vitepress-theme 2.0.1 → 2.1.0

package/src/vitepress/components/voidzero/home/TrustedBy.vue

@@ -1,248 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-
-// Import client logos
-import shopifyLogo from '@assets/clients/shopify.svg'
-import openaiLogo from '@assets/clients/openai.svg'
-import framerLogo from '@assets/clients/framer.svg'
-import linearLogo from '@assets/clients/linear.svg'
-import huggingfaceLogo from '@assets/clients/hugging-face.svg'
-import cloudflareLogo from '@assets/clients/cloudflare.svg'
-import mercedesLogo from '@assets/clients/mercedes.svg'
-import boltLogo from '@assets/clients/bolt.svg'
-
-// Logos - will round entries down to odd number to maintain centering
-const initialLogos = [
-  { id: 1, name: 'Shopify', src: shopifyLogo },
-  { id: 2, name: 'OpenAI', src: openaiLogo },
-  { id: 3, name: 'Framer', src: framerLogo },
-  { id: 4, name: 'Linear', src: linearLogo },
-  { id: 5, name: 'Hugging Face', src: huggingfaceLogo },
-  { id: 6, name: 'Cloudflare', src: cloudflareLogo },
-  { id: 7, name: 'Mercedes', src: mercedesLogo },
-  { id: 8, name: 'Bolt', src: boltLogo },
-]
-
-// Ensure odd number of logos for center alignment
-const normalizedLogos = computed(() => {
-  const count = initialLogos.length
-  return count % 2 === 0 ? initialLogos.slice(0, -1) : initialLogos
-})
-
-// Clone all logos to end for seamless infinite loop
-const logosWithClones = computed(() => {
-  const logos = normalizedLogos.value
-  // Clone entire array to ensure smooth scrolling with 5 visible logos
-  const clones = logos.map((logo) => ({
-    ...logo,
-    id: `${logo.id}-clone`,
-    isClone: true
-  }))
-  return [...logos, ...clones]
-})
-
-// Carousel state
-const currentIndex = ref(0)
-const isPaused = ref(false)
-const isTransitioning = ref(true)
-
-// Calculate which logo is centered
-const centerIndex = computed(() => {
-  return Math.floor(normalizedLogos.value.length / 2)
-})
-
-// Auto-advance interval
-let intervalId: number | null = null
-
-const advance = () => {
-  if (isPaused.value) return
-
-  isTransitioning.value = true
-  currentIndex.value++
-
-  // Reset to beginning when reaching clones (seamless loop)
-  // We reset to centerIndex to maintain the centered starting position
-  if (currentIndex.value >= normalizedLogos.value.length + centerIndex.value) {
-    setTimeout(() => {
-      isTransitioning.value = false
-      currentIndex.value = centerIndex.value
-      // Re-enable transition after instant reset
-      setTimeout(() => {
-        isTransitioning.value = true
-      }, 50)
-    }, 600) // Match CSS transition duration
-  }
-}
-
-onMounted(() => {
-  // Start with the center logo in the middle of the viewport
-  currentIndex.value = centerIndex.value
-  intervalId = window.setInterval(advance, 3500)
-})
-
-onUnmounted(() => {
-  if (intervalId) clearInterval(intervalId)
-})
-
-// Calculate transform position
-const transformStyle = computed(() => {
-  // Each logo is 120px + 32px gap on desktop, 80px + 16px gap on mobile
-  // We'll use CSS variables and calc for this
-  const offset = currentIndex.value
-  return {
-    transform: `translateX(calc(-${offset} * (var(--logo-width) + var(--logo-gap))))`,
-    transition: isTransitioning.value ? 'transform 0.6s ease-in-out' : 'none'
-  }
-})
-
-// Calculate opacity for each logo based on distance from viewport center
-const getLogoOpacity = (index: number) => {
-  // currentIndex directly represents which logo is centered in viewport
-  const distance = Math.abs(index - currentIndex.value)
-
-  // Center logo: 100%, one away: 60%, two+ away: 30%
-  if (distance === 0) return 1
-  if (distance === 1) return 0.5
-  return 0.2
-}
-</script>
-
-<template>
-  <section class="wrapper wrapper--ticks border-t pt-10 md:pt-14 md:pb-5 flex flex-col items-center justify-center md:gap-2">
-    <p class="self-stretch text-center text-balance text-nickel max-w-[75vw] mx-auto md:max-w-full">Trusted by the world's best software teams</p>
-    <div class="carousel-container">
-      <!-- Left bracket -->
-      <div class="bracket bracket-left">
-        <svg width="8" height="30" viewBox="0 0 8 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="bracket-svg">
-          <path d="M4.65198 30C1.48018 25.4273 0 20.4388 0 15.0346C0 9.59584 1.48018 4.53811 4.65198 0H8C5.42731 4.98845 4.29956 10.0462 4.29956 15.0346C4.29956 20.0231 5.39207 25.0462 8 30H4.65198Z" fill="currentColor"/>
-        </svg>
-      </div>
-
-      <!-- Logo carousel -->
-      <div class="carousel-viewport">
-        <div class="carousel-track" :style="transformStyle">
-          <div
-              v-for="(logo, index) in logosWithClones"
-              :key="logo.id"
-              class="logo-item"
-              :style="{ '--logo-opacity': getLogoOpacity(index) }"
-          >
-            <img
-                :src="logo.src"
-                :alt="logo.name"
-                class="logo-image"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- Right bracket -->
-      <div class="bracket bracket-right">
-        <svg width="8" height="30" viewBox="0 0 8 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="bracket-svg">
-          <path d="M3.34802 30C6.51982 25.4273 8 20.4388 8 15.0346C8 9.59584 6.51982 4.53811 3.34802 0H0C2.57269 4.98845 3.70044 10.0462 3.70044 15.0346C3.70044 20.0231 2.60793 25.0462 0 30H3.34802Z" fill="currentColor"/>
-        </svg>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-.carousel-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  max-width: 100%;
-
-  /* CSS variables for responsive logo sizing */
-  --logo-width: 120px;
-  --logo-height: 120px;
-  --logo-gap: 30px;
-  --bracket-offset: 8px; /* Distance from center logo */
-}
-
-@media (min-width: 640px) {
-  .carousel-container {
-    --logo-width: 126px;
-    --logo-height: 126px;
-    --logo-gap: 48px;
-    --bracket-offset: 12px;
-  }
-}
-
-.bracket {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-nickel);
-  z-index: 10;
-  pointer-events: none;
-}
-
-.bracket-left {
-  left: calc(50% - var(--logo-width) / 2 - var(--bracket-offset) - 8px);
-}
-
-.bracket-right {
-  right: calc(50% - var(--logo-width) / 2 - var(--bracket-offset) - 8px);
-}
-
-.bracket-svg {
-  width: 7.2px;
-  height: 27px;
-}
-
-@media (min-width: 640px) {
-  .bracket-svg {
-    width: 10.8px;
-    height: 40.5px;
-  }
-}
-
-.carousel-viewport {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  max-width: calc(3 * (var(--logo-width) + var(--logo-gap)));
-  display: flex;
-  align-items: center;
-}
-
-@media (min-width: 640px) {
-  .carousel-viewport {
-    max-width: calc(5 * (var(--logo-width) + var(--logo-gap)));
-  }
-}
-
-.carousel-track {
-  display: flex;
-  gap: var(--logo-gap);
-  will-change: transform;
-  /* Padding to center the logo at currentIndex */
-  padding-left: calc(50% - var(--logo-width) / 2);
-}
-
-.logo-item {
-  flex-shrink: 0;
-  width: var(--logo-width);
-  height: var(--logo-height);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-}
-
-.logo-image {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  filter: grayscale(1);
-  opacity: var(--logo-opacity, 1);
-  user-select: none;
-  pointer-events: none;
-}
-</style>

package/src/vitepress/components/voidzero/home/VitePlusSectionFeatures.vue

@@ -1,55 +0,0 @@
-<template>
-  <section
-      class="wrapper border-t grid grid-rows-3 lg:grid-rows-1 lg:grid-cols-4 lg:h-80 divide-y lg:divide-y-0 lg:divide-x">
-    <div class="p-5 lg:p-10 lg:pb-16 lg:col-span-2 flex flex-col justify-between items-start">
-      <div class="flex flex-col gap-3">
-        <img src="@assets/voidzero/vite-plus-chip.png" alt="Vite+" class="h-10 mb-3 w-fit object-contain">
-        <h5>Vite, but more powerful</h5>
-        <p class="text-pretty max-w-lg">Scaffold, dev, build, lint, test, format & more, all in a single dependency.</p>
-      </div>
-      <a href="https://viteplus.dev" target="_blank" class="text-primary font-medium border-b mt-4 md:mt-0">Learn more →</a>
-    </div>
-    <div class="p-5 lg:p-10 lg:pb-16 flex flex-col justify-between">
-      <svg class="size-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M16.2501 1.66675H11.2501C10.0995 1.66675 9.16675 2.59949 9.16675 3.75008V8.75008C9.16675 9.90067 10.0995 10.8334 11.2501 10.8334H16.2501C17.4007 10.8334 18.3334 9.90067 18.3334 8.75008V3.75008C18.3334 2.59949 17.4007 1.66675 16.2501 1.66675Z"
-            stroke="black" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"/>
-        <path
-            d="M9.16675 5.41699C7.47714 5.42003 6.59237 5.46152 6.02694 6.02694C5.41675 6.63714 5.41675 7.61923 5.41675 9.58342V10.4168C5.41675 12.3809 5.41675 13.363 6.02694 13.9732C6.63714 14.5834 7.61923 14.5834 9.58341 14.5834H10.4167C12.3809 14.5834 13.363 14.5834 13.9732 13.9732C14.5387 13.4078 14.5802 12.523 14.5832 10.8334"
-            stroke="black" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"/>
-        <path
-            d="M5.41675 9.16699C3.72714 9.16999 2.84237 9.21149 2.27694 9.77691C1.66675 10.3872 1.66675 11.3692 1.66675 13.3334V14.1667C1.66675 16.1309 1.66675 17.113 2.27694 17.7232C2.88714 18.3334 3.86923 18.3334 5.83341 18.3334H6.66675C8.63091 18.3334 9.613 18.3334 10.2232 17.7232C10.7887 17.1578 10.8302 16.273 10.8332 14.5834"
-            stroke="black" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-      <div class="flex flex-col gap-2 justify-start md:min-h-24">
-        <h6>Drop-in superset of Vite</h6>
-        <p class="text-balance">Smooth, incremental adoption if you are already using Vite.</p>
-      </div>
-    </div>
-    <div class="p-5 lg:p-10 lg:pb-16 flex flex-col justify-between">
-      <svg class="size-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M17.0833 8.75V16.25C17.0833 16.6382 17.0833 16.8324 17.0198 16.9856C16.9353 17.1897 16.773 17.352 16.5688 17.4366C16.4157 17.5 16.2215 17.5 15.8333 17.5C15.445 17.5 15.2508 17.5 15.0977 17.4366C14.8935 17.352 14.7313 17.1897 14.6467 16.9856C14.5833 16.8324 14.5833 16.6382 14.5833 16.25V8.75C14.5833 8.36175 14.5833 8.16758 14.6467 8.01443C14.7313 7.81024 14.8935 7.64801 15.0977 7.56343C15.2508 7.5 15.445 7.5 15.8333 7.5C16.2215 7.5 16.4157 7.5 16.5688 7.56343C16.773 7.64801 16.9353 7.81024 17.0198 8.01443C17.0833 8.16758 17.0833 8.36175 17.0833 8.75Z"
-            stroke="#08060D" stroke-width="1.35" stroke-linejoin="round"/>
-        <path d="M13.75 2.5H16.25V5" stroke="#08060D" stroke-width="1.35" stroke-linecap="round"
-              stroke-linejoin="round"/>
-        <path d="M15.8333 2.91675C15.8333 2.91675 12.5 7.08341 3.75 10.0001" stroke="#08060D" stroke-width="1.35"
-              stroke-linecap="round" stroke-linejoin="round"/>
-        <path
-            d="M11.25 11.6667V16.2501C11.25 16.6383 11.25 16.8325 11.1866 16.9857C11.102 17.1898 10.9397 17.3521 10.7356 17.4367C10.5824 17.5001 10.3882 17.5001 10 17.5001C9.61175 17.5001 9.41758 17.5001 9.26442 17.4367C9.06025 17.3521 8.898 17.1898 8.81342 16.9857C8.75 16.8325 8.75 16.6383 8.75 16.2501V11.6667C8.75 11.2785 8.75 11.0843 8.81342 10.9312C8.898 10.727 9.06025 10.5647 9.26442 10.4802C9.41758 10.4167 9.61175 10.4167 10 10.4167C10.3882 10.4167 10.5824 10.4167 10.7356 10.4802C10.9397 10.5647 11.102 10.727 11.1866 10.9312C11.25 11.0843 11.25 11.2785 11.25 11.6667Z"
-            stroke="#08060D" stroke-width="1.35" stroke-linejoin="round"/>
-        <path
-            d="M5.41675 13.75V16.25C5.41675 16.6382 5.41675 16.8324 5.35331 16.9856C5.26874 17.1897 5.10651 17.352 4.90231 17.4366C4.74917 17.5 4.55503 17.5 4.16675 17.5C3.77846 17.5 3.58432 17.5 3.43118 17.4366C3.22699 17.352 3.06476 17.1897 2.98018 16.9856C2.91675 16.8324 2.91675 16.6382 2.91675 16.25V13.75C2.91675 13.3617 2.91675 13.1676 2.98018 13.0144C3.06476 12.8103 3.22699 12.648 3.43118 12.5634C3.58432 12.5 3.77846 12.5 4.16675 12.5C4.55503 12.5 4.74917 12.5 4.90231 12.5634C5.10651 12.648 5.26874 12.8103 5.35331 13.0144C5.41675 13.1676 5.41675 13.3617 5.41675 13.75Z"
-            stroke="#08060D" stroke-width="1.35" stroke-linejoin="round"/>
-      </svg>
-      <div class="flex flex-col gap-2 justify-start md:min-h-24">
-        <h6>Enterprise Scale Productivity</h6>
-        <p class="text-balance">Performance, reliability & security. Let your team focus on shipping.</p>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-
-</style>

package/src/vitepress/components/voidzero/home/VitePlusSectionHeading.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="wrapper wrapper--ticks border-t flex flex-col justify-start items-center gap-6 py-10 md:py-20">
-    <div class="w-full sm:w-2xl flex flex-col justify-start items-center gap-10 px-5 sm:px-0">
-      <img src="@assets/logos/viteplus-dark.svg" alt="Vite+ Logo" class="h-3">
-      <h2 class="text-center text-primary text-balance">
-        <span class="inline-block">The Unified Toolchain</span>
-        <span class="inline-block">for the Web</span>
-      </h2>
-      <a href="https://viteplus.dev" target="_blank" rel="noopener noreferrer"
-         class="button button--primary button--white">
-        <span>Explore Vite+</span>
-      </a>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-</script>