docs: update landing page for video and wording tweaks

docs/.vitepress/config.ts

@@ -95,8 +95,9 @@ const integrationLinks = {
 };
 
 const socialLinks = [
-  { icon: 'x', link: 'https://x.com/voidzerodev' },
   { icon: 'discord', link: 'https://discord.gg/cC6TEVFKSx' },
+  { icon: 'x', link: 'https://x.com/voidzerodev' },
+  { icon: 'bluesky', link: 'https://bsky.app/profile/voidzero.dev' },
   { icon: 'github', link: 'https://github.com/voidzero-dev' },
 ];
 
@@ -299,6 +300,7 @@ export default extendConfig(
           {
             title: 'Open Source',
             items: [
+              { text: 'Vite+', link: 'https://viteplus.dev' },
               { text: 'Vite', link: 'https://vite.dev' },
               { text: 'Vitest', link: 'https://vitest.dev' },
               { text: 'Rolldown', link: 'https://rolldown.rs' },

docs/.vitepress/theme/Hero.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+import { useData } from 'vitepress';
+
+const props = defineProps<{
+  background?: string;
+}>();
+
+const { frontmatter } = useData();
+</script>
+
+<template>
+  <div
+    v-if="frontmatter.hero"
+    class="wrapper wrapper--ticks grid lg:grid-cols-2 w-full border-nickel md:divide-x"
+  >
+    <div class="flex flex-col p-15 sm:p-20 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">
+        <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 v-if="frontmatter.hero.text" class="text-white text-pretty max-w-[30rem]">
+          {{ frontmatter.hero.text }}
+        </h1>
+        <p
+          v-if="frontmatter.hero.tagline"
+          class="text-white/70 md:text-lg max-w-[27rem] text-pretty"
+        >
+          {{ frontmatter.hero.tagline }}
+        </p>
+        <div class="flex flex-col min-[410px]:flex-row items-center gap-5 mt-8">
+          <a
+            v-for="action in frontmatter.hero.actions"
+            :key="action.text"
+            :href="action.link"
+            :target="action.link?.startsWith('http') ? '_blank' : ''"
+            class="button inline-block w-fit"
+            :class="{ 'button--primary': action.theme === 'brand' }"
+          >
+            {{ action.text }}
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col min-h-[22rem] sm:min-h-[30rem]">
+      <div
+        class="flex flex-col bg-cover bg-center"
+        :style="props.background ? { backgroundImage: `url(${props.background})` } : undefined"
+      >
+        <div
+          class="relative px-10 pb-10 md:pt-10 h-full flex flex-col justify-center overflow-clip"
+        >
+          <slot name="hero-image">
+            <img
+              v-if="frontmatter.hero.image?.src"
+              :src="frontmatter.hero.image.src"
+              :alt="frontmatter.hero.image.alt"
+              class="max-h-[20rem]"
+            />
+          </slot>
+        </div>
+      </div>
+      <a
+        href="https://www.youtube.com/watch?v=Bp86buftbX8"
+        target="_blank"
+        class="p-5 flex gap-5 items-center relative group"
+      >
+        <div class="relative h-16 aspect-244/144 shrink-0 overflow-hidden">
+          <img
+            src="./void-thumb.jpg"
+            alt="Video thumbnail"
+            class="h-16 aspect-244/144 group-hover:opacity-75 group-hover:scale-105 transition-[scale,opacity]"
+          />
+          <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+            <div
+              class="flex h-10 w-10 items-center justify-center rounded-full bg-black/55 shadow-[0_6px_24px_rgba(0,0,0,0.35)] transition-transform duration-200 group-hover:scale-110"
+            >
+              <Icon icon="simple-icons:youtube" class="h-5 w-5 text-[#ff0033]" />
+            </div>
+          </div>
+        </div>
+        <div>
+          <h5 class="text-white">What is Void?</h5>
+          <p class="text-base">Evan You announces Void</p>
+        </div>
+        <span
+          class="absolute top-5 right-5 text-electric bg-slate rounded px-3 py-1 text-xs font-mono"
+          >15:33</span
+        >
+      </a>
+    </div>
+  </div>
+</template>

docs/.vitepress/theme/Home.vue

@@ -1,10 +1,10 @@
 <script setup>
 import FeatureGrid from '@components/oss/FeatureGrid.vue';
 import Footer from '@components/oss/Footer.vue';
-import Hero from '@components/oss/Hero.vue';
 import Spacer from '@components/shared/Spacer.vue';
 import { useData } from 'vitepress';
 import bg from './hero-bg.jpg';
+import Hero from './Hero.vue';
 
 const { frontmatter } = useData();
 </script>
@@ -47,8 +47,10 @@ const { frontmatter } = useData();
 
 @media (min-width: 1024px) {
   .hero-file-tree :deep(.file-tree) {
-    max-height: 468px;
+    max-height: 362px;
     overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.42) rgba(255, 255, 255, 0.08);
   }
 }
 
@@ -58,4 +60,23 @@ const { frontmatter } = useData();
   backdrop-filter: blur(10px);
   border-color: rgba(255, 255, 255, 0.1);
 }
+
+.hero-file-tree :deep(.file-tree::-webkit-scrollbar) {
+  width: 10px;
+}
+
+.hero-file-tree :deep(.file-tree::-webkit-scrollbar-track) {
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+}
+
+.hero-file-tree :deep(.file-tree::-webkit-scrollbar-thumb) {
+  background: rgba(255, 255, 255, 0.42);
+  border: 2px solid rgba(0, 0, 0, 0.35);
+  border-radius: 999px;
+}
+
+.hero-file-tree :deep(.file-tree::-webkit-scrollbar-thumb:hover) {
+  background: rgba(255, 255, 255, 0.58);
+}
 </style>

docs/index.md

@@ -4,40 +4,37 @@ theme: dark
 
 hero:
   name: Void.
-  text: Ship full-stack Vite apps at warp speed
-  tagline: Void is a deployment platform designed for Vite - with a powerful backend SDK that makes your Vite apps truly full-stack.
+  text: Ship Vite apps at warp speed
+  tagline: A deployment platform designed for Vite. A powerful backend SDK to make your Vite apps truly full-stack.
   actions:
     - theme: brand
       text: Get Started
       link: ./guide/
-    - theme: alt
-      text: Join Early Access
-      link: https://tally.so/r/D4VE85
   image:
     src: /hero.svg
     alt: Void deployment platform
 
 features:
+  - iconify: lucide:terminal
+    title: One Command to Production
+    details: '`void deploy` builds your app, runs migrations, provisions resources, and deploys it.'
   - iconify: lucide:layers
     title: Truly Full-Stack
-    details: Database, KV storage, object storage, AI inference, authentication, queues, and cron jobs are built in. Import what you need and ignore the rest.
+    details: Database, KV storage, object storage, AI inference, authentication, queues, and cron jobs. All built-in. Import what you need, skip what you don't.
   - iconify: lucide:wand-sparkles
     title: Your Code is Your Infra
-    details: Void scans your source code, detects what you use, and provisions resources automatically. No config files or dashboard clicks, either locally or in the cloud.
+    details: Void scans your source code, detects what you use, and automatically provisions every resource. No config files. No dashboard clicks. Locally and in the cloud.
   - iconify: lucide:shield-check
-    title: End-to-End Type Safety
-    details: Types flow from Drizzle schema through route handlers to page component props and the frontend fetch client. One schema validates at runtime and infers types at build time.
+    title: Performant and Reliable
+    details: Built on Cloudflare's battle tested, global network. Fast, secure, and always available from day one.
   - iconify: lucide:blocks
-    title: Any Framework, Any Rendering
-    details: React, Vue, Svelte, Solid, plus Vite-based meta-frameworks. Use SSR, SSG, ISR, islands, and markdown where they fit.
+    title: Your Framework, Your Rendering
+    details: React, Vue, Svelte, Solid, Vite-based meta-frameworks. SSR, SSG, ISR, islands with partial hydration, and markdown.
   - iconify: lucide:bot
     title: AI-Native
     details: Built-in skills, MCP support, and reference prompts let coding agents scaffold and ship full-stack apps in a single prompt.
-  - iconify: lucide:terminal
-    title: One Command to Production
-    details: '`void deploy` builds your app, runs migrations, provisions resources, and deploys to Cloudflare Workers, without requiring a Cloudflare account or knowledge about the infra.'
 
-footer_heading: Build and Deploy at Warp Speed
+footer_heading: Deploy at Warp Speed
 footer_subheading: Vite. Optimized. Isomorphic. Deploy.
 ---