@voidzero-dev/vitepress-theme 2.0.1 → 3.0.0

package/src/vitepress/components/voidzero/Megamenu.vue

@@ -1,190 +0,0 @@
-<script setup lang="ts">
-import {Carousel, Slide} from 'vue3-carousel'
-
-interface FeaturedArticle {
-  title: string
-  url?: string
-  link?: string
-  cover?: string
-  image?: string
-}
-
-interface Props {
-  featuredArticles?: FeaturedArticle[]
-  onLinkClick?: () => void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  featuredArticles: () => [],
-  onLinkClick: () => {}
-})
-
-// Carousel configuration
-const carouselConfig = {
-  itemsToShow: 1,
-  wrapAround: true,
-  snapAlign: 'center',
-  autoplay: 3000,
-  transition: 500,
-  mouseDrag: true,
-  touchDrag: true
-}
-</script>
-
-<template>
-  <div class="flex flex-col md:grid md:grid-cols-10 md:auto-rows-fr gap-0">
-    <!-- Products Grid -->
-    <div class="flex flex-col gap-0 border-stroke dark:border-nickel md:col-span-6 md:border-r">
-      <div class="px-5 h-12 flex items-center border-b border-stroke dark:border-nickel dark:border-t">
-        <p class="text-mono text-xs font-medium uppercase tracking-widest text-grey">
-          Products //
-        </p>
-      </div>
-      <div class="grid grid-cols-1 md:grid-cols-2 md:auto-rows-fr gap-0 flex-1">
-        <a
-            href="https://vite.dev"
-            target="_blank"
-            @click="onLinkClick"
-            class="p-5 group cursor-pointer hover:bg-primary dark:hover:bg-white md:border-r border-stroke dark:border-nickel dark:border-b transition-colors duration-100 relative"
-        >
-          <svg class="absolute top-5 right-5 opacity-0 group-hover:opacity-100 transition-opacity duration-100" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M2.81802 2.81803L9.18198 2.81803L9.18198 9.18199" class="stroke-white dark:group-hover:stroke-primary" stroke-width="1.25" stroke-linejoin="round"/>
-            <path d="M9.18213 2.81802L2.81817 9.18198" class="stroke-white dark:group-hover:stroke-primary" stroke-width="1.25" stroke-linejoin="round"/>
-          </svg>
-          <img
-              src="@assets/icons/vite-light.svg"
-              alt="Vite logo"
-              class="p-1 size-8 rounded mb-6 bg-primary"
-          >
-          <h3
-              class="text-lg font-medium font-sans mb-1 dark:text-white group-hover:text-white dark:group-hover:text-primary transition-colors duration-100 "
-          >
-            Vite
-          </h3>
-          <p class="text-sm text-balance">
-            A blazing fast frontend build tool powering next-gen web applications.
-          </p>
-        </a>
-
-        <a
-            href="https://vitest.dev"
-            target="_blank"
-            @click="onLinkClick"
-            class="p-5 group cursor-pointer hover:bg-primary dark:hover:bg-white dark:border-nickel dark:border-b transition-colors duration-100 relative"
-        >
-          <svg class="absolute top-5 right-5 opacity-0 group-hover:opacity-100 transition-opacity duration-100" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M2.81802 2.81803L9.18198 2.81803L9.18198 9.18199" class="stroke-white dark:group-hover:stroke-primary" stroke-width="1.25" stroke-linejoin="round"/>
-            <path d="M9.18213 2.81802L2.81817 9.18198" class="stroke-white dark:group-hover:stroke-primary" stroke-width="1.25" stroke-linejoin="round"/>
-          </svg>
-          <img
-              src="@assets/icons/vitest-light.svg"
-              alt="Vitest logo"
-              class="p-1 size-8 rounded mb-6 bg-primary"
-          >
-          <h3
-              class="text-lg font-medium font-sans mb-1 dark:text-white group-hover:text-white dark:group-hover:text-primary transition-colors duration-100 "
-          >
-            Vitest
-          </h3>
-          <p class="text-sm text-balance">
-            A Vite-native testing framework. It's fast!
-          </p>
-        </a>
-
-        <a
-            href="https://rolldown.rs/"
-            target="_blank"
-            @click="onLinkClick"
-            class="p-5 group cursor-pointer hover:bg-primary dark:hover:bg-white md:border-r md:border-t border-stroke dark:border-nickel dark:border-b transition-colors duration-100 relative"
-        >
-          <svg class="absolute top-5 right-5 opacity-0 group-hover:opacity-100 transition-opacity duration-100" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M2.81802 2.81803L9.18198 2.81803L9.18198 9.18199" class="stroke-white dark:group-hover:stroke-primary" stroke-width="1.25" stroke-linejoin="round"/>
-            <path d="M9.18213 2.81802L2.81817 9.18198" class="stroke-white dark:group-hover:stroke-primary" stroke-width="1.25" stroke-linejoin="round"/>
-          </svg>
-          <img
-              src="@assets/icons/rolldown-light.svg"
-              alt="Rolldown logo"
-              class="p-1 size-8 rounded mb-6 bg-primary"
-          >
-          <h3
-              class="text-lg font-medium font-sans mb-1 dark:text-white group-hover:text-white dark:group-hover:text-primary transition-colors duration-100 "
-          >
-            Rolldown
-          </h3>
-          <p class="text-sm text-balance">
-            A Rust-based bundler for Javascript with Rollup-compatible API
-          </p>
-        </a>
-
-        <a
-            href="https://oxc.rs/"
-            target="_blank"
-            @click="onLinkClick"
-            class="p-5 group cursor-pointer hover:bg-primary dark:hover:bg-white md:border-t border-stroke dark:border-nickel dark:border-b transition-colors duration-100 relative"
-        >
-          <svg class="absolute top-5 right-5 opacity-0 group-hover:opacity-100 transition-opacity duration-100" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M2.81802 2.81803L9.18198 2.81803L9.18198 9.18199" class="stroke-white dark:group-hover:stroke-primary" stroke-width="1.25" stroke-linejoin="round"/>
-            <path d="M9.18213 2.81802L2.81817 9.18198" class="stroke-white dark:group-hover:stroke-primary" stroke-width="1.25" stroke-linejoin="round"/>
-          </svg>
-          <img
-              src="@assets/icons/oxc-light.svg"
-              alt="Oxc logo"
-              class="p-1 size-8 rounded mb-6 bg-primary"
-          >
-          <h3
-              class="text-lg font-medium font-sans mb-1 dark:text-white group-hover:text-white dark:group-hover:text-primary transition-colors duration-100 "
-          >
-            Oxc
-          </h3>
-          <p class="text-sm text-balance">
-            A collection of JavaScript tools written in Rust
-          </p>
-        </a>
-      </div>
-    </div>
-
-    <!-- Customer Highlights -->
-    <div
-        v-if="featuredArticles && featuredArticles.length > 0"
-        class="flex flex-col gap-0 md:col-span-4"
-    >
-      <div class="px-5 h-12 flex items-center border-b border-stroke dark:border-nickel">
-        <p class="text-mono text-xs font-medium uppercase tracking-widest text-grey">
-          Customer Highlights //
-        </p>
-      </div>
-      <div class="flex flex-col">
-        <Carousel v-bind="carouselConfig" class="h-full">
-          <Slide v-for="(article, index) in featuredArticles" :key="index">
-            <a
-              :href="article.url || article.link"
-              @click="onLinkClick"
-              class="flex flex-col h-full group"
-            >
-              <div class="overflow-hidden aspect-[16/9]">
-                <img
-                    :src="article.cover || article.image"
-                    :alt="article.title"
-                    class="w-full h-full object-cover"
-                >
-              </div>
-              <div class="px-5 py-5">
-                <h3
-                    class="text-lg font-sans leading-tight transition-colors dark:text-white group-hover:text-primary min-h-12 line-clamp-2"
-                >
-                  {{ article.title }}
-                </h3>
-              </div>
-            </a>
-          </Slide>
-        </Carousel>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style>
-.is-dragging {
-  pointer-events: none;
-}
-</style>

package/src/vitepress/components/voidzero/about/CareerCTA.vue

@@ -1,56 +0,0 @@
-<template>
-  <div class="wrapper wrapper--ticks border-t grid grid-cols-1 md:grid-cols-2 divide-x divide-stroke justify-start items-center">
-    <div class="flex flex-col justify-between items-center md:items-start px-5 md:px-10 p-16 md:p-10 h-full gap-10">
-      <div class="flex flex-col gap-3 md:gap-5">
-        <h3 class="text-center md:text-start text-primary text-balance">
-        Think you'd be a good addition to our team?
-      </h3>
-        <p class="text-center md:text-start text-balance">
-          We do not have any open position right now, but we’re always open to
-          exploring opportunities with exceptional talent.
-        </p>
-      </div>
-      <p>Drop us a line at <strong>career[at]voidzero[dot]dev</strong></p>
-    </div>
-    <div>
-      <img src="@assets/voidzero/career-illustration.jpg" alt="Join VoidZero" class="w-full">
-      <div class="px-5 md:px-10 py-10">
-        <h6 class="text-xl text-primary font-medium">What makes you a good fit:</h6>
-        <ul class="mt-5 career-list">
-          <li class="text-primary text-base">Passionate about building fast, developer-friendly tools.</li>
-          <li class="text-primary text-base">Excited to contribute to open source and our vision.</li>
-          <li class="text-primary text-base">Proficiency with Rust and TypeScript.</li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-</script>
-<style scoped>
-.career-list {
-  list-style: none;
-  padding-left: 0;
-}
-
-.career-list li {
-  position: relative;
-  padding-left: 1.25rem;
-  margin-bottom: 0.75rem;
-}
-
-.career-list li:last-child {
-  margin-bottom: 0;
-}
-
-.career-list li::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0.5em;
-  width: 6px;
-  height: 6px;
-  background-color: #863BFF;
-  border-radius: 20%;
-}
-</style>

package/src/vitepress/components/voidzero/about/Hero.vue

@@ -1,206 +0,0 @@
-<template>
-  <div
-    class="wrapper flex flex-col justify-start items-center gap-6 pt-6 md:pt-20 pb-10"
-  >
-    <div
-      class="w-full sm:w-2xl flex flex-col justify-start items-center gap-10 px-5 sm:px-0"
-    >
-      <div class="flex flex-col justify-start items-center gap-4">
-        <span
-          class="text-grey text-xs font-medium font-mono uppercase tracking-wide"
-          >About</span
-        >
-        <h1 class="text-center text-white text-balance shine-text pb-5 sm:pb-0">
-          <span class="inline-block">We are a team of</span>
-          <span class="inline-block">Javascript tooling experts</span>
-        </h1>
-        <p class="self-stretch text-center text-balance text-grey text-xl">
-          Including creators and core contributors to some of the most widely
-          adopted open-source projects.
-        </p>
-      </div>
-      <div class="flex items-center gap-5">
-        <a href="#team" class="button button--white" @click="scrollToTeam">
-          Meet the team
-        </a>
-        <!--        <a href="#" target="_blank" rel="noopener noreferrer" class="button">
-          Join us
-        </a>-->
-      </div>
-      <RiveAnimation
-        :desktop-src="aboutAnimation"
-        :mobile-src="aboutAnimationMobile"
-        :desktop-width="1280"
-        :desktop-height="580"
-        :mobile-width="300"
-        :mobile-height="148"
-        canvas-class="w-[50vw] md:w-[30rem] pt-6 md:pt-0"
-        :enable-hover="true"
-      />
-    </div>
-  </div>
-  <div
-    class="wrapper wrapper--ticks border-t py-10 md:py-40 md:pb-70 grid md:grid-cols-2 px-10 md:px-10 lg:px-30 gap-10 lg:gap-20 relative"
-  >
-    <Shader
-      class="w-full absolute bottom-0 left-0 right-0 aspect-[21/9] -z-0 hidden md:block"
-    >
-      <SolidColor color="#16171d" />
-      <Ascii
-        :spacing="0.6"
-        :cell-size="18"
-        characters="../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../../"
-        font-family="KH Teka Mono"
-      >
-        <SineWave
-          id="sineWave"
-          :angle="0"
-          color="#3b3440"
-          :speed="0.4"
-          :position="{ x: 0.5, y: 1 }"
-          :softness="0.4"
-          :amplitude="0.05"
-          :frequency="0.3"
-          :thickness="0.7"
-          :visible="true"
-        />
-        <ChromaFlow
-          base-color="#9642ff"
-          up-color="#8800ff"
-          down-color="#5500ff"
-          left-color="#0077ff"
-          right-color="#6200ff"
-          :intensity="1"
-          :radius="2"
-          :momentum="30"
-          mask-type="alpha"
-          mask-source="sineWave"
-        />
-      </Ascii>
-    </Shader>
-    <div class="h-full flex items-center relative">
-      <h2 class="text-white">
-        We’re on the mission to make JavaScript developers more productive than
-        ever before.
-      </h2>
-    </div>
-    <div class="relative">
-      <svg
-        class="h-5 absolute -left-5 top-1"
-        viewBox="0 0 6 19"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M2.80966 0C-0.92561 5.34659 -0.947479 13.6342 2.80966 19H5.33337C1.57711 13.6342 1.59898 5.34659 5.33337 0H2.80966Z"
-          fill="white"
-        />
-      </svg>
-      <p class="text-white/70 text-xl">
-        JavaScript started as a scripting language designed in 10 days. Today,
-        it is powering some of the most sophisticated applications in the world
-        used by billions of users. The ever-increasing scale and complexity
-        poses real challenges. JavaScript developers are struggling with
-        fragmented solutions, overloaded dependencies, and performance
-        bottlenecks.
-        <br /><br />
-        We believe it is time to change that with a toolchain that is designed
-        from the ground up to offer the best possible performance and unified
-        developer experience.
-      </p>
-      <svg
-        class="h-5 absolute -right-5 bottom-1"
-        viewBox="0 0 6 19"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M2.52433 0C6.25959 5.34659 6.28146 13.6342 2.52433 19H0.000613689C3.75687 13.6342 3.73501 5.34659 0.000613689 0H2.52433Z"
-          fill="white"
-        />
-      </svg>
-    </div>
-    <p class="block md:hidden text-nickel text-lg font-mono break-all">
-      . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-      . . . . . . . . . . / / / /
-    </p>
-    <div class="flex md:hidden gap-3 justify-between items-center w-full">
-      <img
-        src="@assets/voidzero/signature.svg"
-        alt="Signature"
-        class="w-full max-w-[60%]"
-      />
-      <div class="shrink-0">
-        <h5 class="text-white md:text-lg font-medium truncate">Evan You</h5>
-        <p class="text-white/70 text-base">Founder &amp; CEO</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Shader, Ascii, SineWave, SolidColor, ChromaFlow } from "shaders/vue";
-import aboutAnimation from "@assets/voidzero/animations/about.riv";
-import aboutAnimationMobile from "@assets/voidzero/animations/about-mobile.riv";
-import RiveAnimation from "@components/shared/RiveAnimation.vue";
-
-const scrollToTeam = (event: Event) => {
-  event.preventDefault();
-  const teamSection = document.getElementById("team");
-  if (teamSection) {
-    const targetPosition =
-      teamSection.getBoundingClientRect().top + window.scrollY;
-    const startPosition = window.scrollY;
-    const distance = targetPosition - 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 (ease-in-out)
-      const ease =
-        progress < 0.5
-          ? 2 * progress * progress
-          : 1 - Math.pow(-2 * progress + 2, 2) / 2;
-
-      window.scrollTo(0, startPosition + distance * ease);
-
-      if (timeElapsed < duration) {
-        requestAnimationFrame(animation);
-      }
-    };
-
-    requestAnimationFrame(animation);
-  }
-};
-</script>
-
-<style scoped>
-.shine-text {
-  background: linear-gradient(
-    110deg,
-    var(--color-white) 0%,
-    var(--color-white) 40%,
-    #6c3bff 48%,
-    #6c3bff 50%,
-    #6c3bff 52%,
-    var(--color-white) 60%,
-    var(--color-white) 100%
-  );
-  background-size: 400% 100%;
-  background-position: 100% 0;
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: shine 5s ease-in-out 0s 1 forwards;
-}
-
-@keyframes shine {
-  to {
-    background-position: 35% 0;
-  }
-}
-</style>

package/src/vitepress/components/voidzero/about/Investors.vue

@@ -1,112 +0,0 @@
-<script setup lang="ts">
-import accelLogo from '@assets/voidzero/investors/accel.svg'
-import amplifyLogo from '@assets/voidzero/investors/amplify.svg'
-import sunflowerLogo from '@assets/voidzero/investors/sunflower.png'
-import peakxvLogo from '@assets/voidzero/investors/peakxv.png'
-
-interface Investor {
-  name: string
-  title: string
-}
-
-const mainInvestors = [
-  {src: accelLogo, alt: 'Accel'},
-  {src: peakxvLogo, alt: 'Peak XV'},
-  {src: sunflowerLogo, alt: 'Sunflower'},
-  {src: amplifyLogo, alt: 'Amplify'}
-]
-
-const investors: Investor[] = [
-  { name: 'Tom Preston-Werner', title: 'Preston-Werner Ventures' },
-  { name: 'BGZ', title: 'BGZ Investment Pte.Ltd' },
-  { name: 'Eric Simons', title: 'Founder, StackBlitz' },
-  { name: 'Paul Copplestone', title: 'Co-Founder, Supabase' },
-  { name: 'David Cramer', title: 'Co-Founder, Sentry' },
-  { name: 'Matt Biilmann', title: 'Co-Founder, Netlify' },
-  { name: 'Christian Bach', title: 'Co-Founder, Netlify' },
-  { name: 'Dafeng Guo', title: 'Co-Founder, Strikingly' },
-  { name: 'Sébastien Chopin', title: 'Founder, NuxtLabs' },
-  { name: 'Johannes Schickling', title: 'Founder, Prisma' },
-  { name: 'Zeno Rocha', title: 'Founder, Resend' },
-  { name: 'Koen Bok', title: 'Co-Founder, Framer' },
-]
-
-const getBorderClasses = (index: number) => {
-  const classes: string[] = []
-  const position = index + 1
-  const total = investors.length
-
-  // RIGHT BORDERS: remove from last item in each row per breakpoint
-  classes.push('border-r-0') // Mobile (1 col): no right borders
-
-  if (position % 2 !== 0) classes.push('sm:border-r') // SM (2 cols): border on odd positions
-
-  if (position % 4 !== 0) classes.push('lg:border-r') // LG (4 cols): border on all except every 4th
-  else classes.push('lg:border-r-0')
-
-  // TOP BORDERS: remove from first row per breakpoint
-  if (position > 1) classes.push('border-t') // Mobile (1 col): all except first
-
-  if (position > 2) classes.push('sm:border-t') // SM (2 cols): all except first 2
-  else classes.push('sm:border-t-0')
-
-  if (position > 4) classes.push('lg:border-t') // LG (4 cols): all except first 4
-  else classes.push('lg:border-t-0')
-
-  // BOTTOM BORDERS: remove from last row per breakpoint
-  if (position < total) classes.push('border-b') // Mobile: all except last
-
-  const lastRowStartSm = Math.ceil(total / 2) * 2 - 1
-  if (position <= total - 2 || position < lastRowStartSm) classes.push('sm:border-b')
-  else classes.push('sm:border-b-0')
-
-  const lastRowStartLg = Math.ceil(total / 4) * 4 - 3
-  if (position <= total - 4 || position < lastRowStartLg) classes.push('lg:border-b')
-  else classes.push('lg:border-b-0')
-
-  return classes.join(' ')
-}
-</script>
-
-<template>
-  <section class="wrapper wrapper--ticks border-t px-10 h-48 sm:h-90 flex flex-col justify-center gap-5">
-    <h3 class="text-start">Backed by incredible investors.</h3>
-    <p class="max-w-md text-balance">We are backed by some of the most accomplished and experienced investors in the developer tools space.</p>
-  </section>
-  <section class="wrapper wrapper--ticks border-t">
-    <!-- Main Investors -->
-    <div class="grid grid-cols-1 sm:grid-cols-2 border-b border-stroke">
-      <div
-        v-for="(investor, index) in mainInvestors"
-        :key="index"
-        class="flex items-center justify-center py-16 px-8 border-stroke"
-        :class="[
-          // Mobile (1 col): border-b on all except last
-          index < mainInvestors.length - 1 ? 'border-b' : '',
-          // SM+ (2 cols): border-b on top row (0,1), border-r on left column (0,2)
-          index < 2 ? 'sm:border-b' : 'sm:border-b-0',
-          index % 2 === 0 ? 'sm:border-r' : ''
-        ]"
-      >
-        <img :src="investor.src" :alt="investor.alt" class="h-12 max-w-full object-contain" />
-      </div>
-    </div>
-
-    <!-- Individual Investors Grid -->
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
-      <div
-        v-for="(investor, index) in investors"
-        :key="index"
-        class="border-stroke flex flex-col px-8 py-6"
-        :class="getBorderClasses(index)"
-      >
-        <h5 class="text-primary text-base font-medium">{{ investor.name }}</h5>
-        <p class="text-grey text-xs font-medium font-mono uppercase tracking-wide">{{ investor.title }}</p>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-
-</style>