reorder platform

Author: mdong1909

docs/.vitepress/theme/Home.vue

@@ -19,21 +19,6 @@ const { frontmatter } = useData();
 
   <Spacer class="bg-primary" />
 
-  <section
-    class="wrapper border-t border-nickel px-5 sm:px-10 h-70 sm:h-[22rem] flex flex-col justify-center gap-6 text-center items-center"
-    aria-labelledby="features-heading"
-  >
-    <a href="/guide/" class="section-label-link" aria-label="Void SDK guide">
-      <img src="/void-sdk.svg" alt="" class="section-label section-label--sdk" />
-    </a>
-    <h2 id="features-heading" class="text-white">Turn Vite Apps Full-Stack</h2>
-    <p class="max-w-md text-white/70 text-balance sm:text-pretty">
-      Use your favorite Vite framework, add the backend features you need, and infer your resources.
-    </p>
-  </section>
-
-  <HomeFeatures />
-
   <div class="platform-surface bg-white text-primary">
     <section
       class="wrapper border-t border-stroke px-5 sm:px-10 h-70 sm:h-80 flex flex-col justify-center items-center gap-5 text-center"
@@ -58,6 +43,21 @@ const { frontmatter } = useData();
     <Spacer />
   </div>
 
+  <section
+    class="wrapper border-t border-nickel px-5 sm:px-10 h-70 sm:h-[22rem] flex flex-col justify-center gap-6 text-center items-center"
+    aria-labelledby="features-heading"
+  >
+    <a href="/guide/" class="section-label-link" aria-label="Void SDK guide">
+      <img src="/void-sdk.svg" alt="" class="section-label section-label--sdk" />
+    </a>
+    <h2 id="features-heading" class="text-white">Turn Vite Apps Full-Stack</h2>
+    <p class="max-w-md text-white/70 text-balance sm:text-pretty">
+      Use your favorite Vite framework, add the backend features you need, and infer your resources.
+    </p>
+  </section>
+
+  <HomeFeatures />
+
   <Footer
     :heading="frontmatter.footer_heading"
     :subheading="frontmatter.footer_subheading"

docs/.vitepress/theme/HomePlatform.vue

@@ -2,10 +2,15 @@
 import RiveAnimation from '@components/shared/RiveAnimation.vue';
 import { Icon } from '@iconify/vue';
 import { useData } from 'vitepress';
-import controlPlaneAnimation from './assets/animations/640_x_320_void_platform_light.riv';
+import appsFieldAnimation from './assets/animations/640_x_320_apps_field_light.riv';
+import platformSecurityAnimation from './assets/animations/640_x_320_void_platform_light.riv';
 import HomePlatformResourceCode from './HomePlatformResourceCode.vue';
 
 const { frontmatter } = useData();
+const featureAnimations = {
+  'platform-ai-coding': appsFieldAnimation,
+  'platform-security': platformSecurityAnimation,
+};
 </script>
 
 <template>
@@ -47,7 +52,7 @@ const { frontmatter } = useData();
           :aria-label="feature.image_alt"
         >
           <RiveAnimation
-            :desktop-src="controlPlaneAnimation"
+            :desktop-src="featureAnimations[feature.id]"
             :desktop-width="640"
             :desktop-height="320"
             canvas-class="w-full h-auto"

docs/.vitepress/theme/assets/animations/640_x_320_apps_field_light.riv

@@ -428,16 +428,8 @@ onBeforeUnmount(() => {
 }
 .void-terminal--home .void-terminal-viewport {
   height: 100%;
-  scrollbar-width: thin;
-  scrollbar-color: #3b3440 transparent;
-}
-.void-terminal--home .void-terminal-viewport::-webkit-scrollbar {
-  display: block;
-  width: 4px;
-  height: 4px;
-}
-.void-terminal--home .void-terminal-viewport::-webkit-scrollbar-thumb {
-  background: #3b3440;
+  overflow: hidden;
+  overscroll-behavior: auto;
 }
 .void-terminal--home .void-terminal-output {
   padding: 24px 32px;

docs/.vitepress/theme/terminal/TerminalPlayer.vue

@@ -5,7 +5,7 @@ theme: dark
 hero:
   name: Void
   text: Build with Vite. Deploy with Void.
-  tagline: Void is a full-stack SDK, platform and CLI that unifies building & deploying apps
+  tagline: Void is a CLI, platform, and full-stack SDK that unifies building & deploying apps
   actions:
     - theme: brand
       text: Get Started
@@ -59,8 +59,8 @@ platform_features:
     guide:
       text: Explore team deployments
       link: /guide/self-hosted-platform
-    image: /platform-feature-placeholder.svg
-    image_alt: Placeholder image for AI coding and team deployments
+    visual: rive
+    image_alt: Animated illustration of apps being built for a team
   - id: platform-control-plane
     iconify: lucide:panels-top-left
     visual: resources