update Home

Author: GaspardKirira

vix-site/src/components/Hero.vue

@@ -28,6 +28,21 @@
           </template>
         </div>
 
+        <div v-if="props.support" class="hero-support">
+          <div class="hero-support-title">{{ props.support.title }}</div>
+
+          <div class="hero-support-text">{{ props.support.text }}</div>
+
+          <div v-if="props.support.meta?.length" class="hero-support-meta">
+            <span class="meta-dot"></span>
+
+            <template v-for="(m, i) in props.support.meta" :key="i">
+              <span>{{ m }}</span>
+              <span v-if="i < props.support.meta.length - 1" class="sep">•</span>
+            </template>
+          </div>
+        </div>
+
         <div v-if="badges?.length" class="hero-badges">
           <span v-for="b in badges" :key="b" class="pill">{{ b }}</span>
         </div>
@@ -114,7 +129,10 @@ const props = defineProps({
 
   ctas: { type: Array, default: () => [] },
   badges: { type: Array, default: () => [] },
-
+  support: {
+    type: Object,
+    default: null,
+  },
   // [{ key, label, lang: "cpp"|"shell", file?, code }]
   examples: { type: Array, default: () => [] },
 
@@ -479,6 +497,54 @@ async function copy(text) {
   gap: .45rem;
 }
 
+.hero-support{
+  margin-top: 0.95rem;
+  padding: 0.85rem 0.95rem;
+  border-radius: 14px;
+
+  border: 1px solid rgba(148,163,184,.18);
+  background: linear-gradient(180deg, rgba(2,6,23,.28), rgba(2,6,23,.14));
+  box-shadow: 0 12px 26px rgba(0,0,0,.22);
+  max-width: 54ch;
+}
+
+.hero-support-title{
+  font-size: .86rem;
+  font-weight: 800;
+  letter-spacing: .01em;
+  color: rgba(255,255,255,.92);
+  margin: 0 0 .35rem;
+}
+
+.hero-support-text{
+  font-size: .92rem;
+  line-height: 1.55;
+  color: rgba(226,232,240,.82);
+  margin: 0 0 .55rem;
+}
+
+.hero-support-meta{
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .45rem;
+  font-size: .82rem;
+  color: rgba(226,232,240,.72);
+}
+
+.meta-dot{
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: rgba(34,197,154,.85);
+  box-shadow: 0 0 0 3px rgba(34,197,154,.18);
+}
+
+.sep{
+  opacity: .5;
+}
+
+
 .dot-sep{
   opacity: .45;
   font-weight: 700;
@@ -731,6 +797,24 @@ async function copy(text) {
   flex-wrap: nowrap;
 }
 
+.code-head{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0; /* IMPORTANT */
+}
+
+.head-scroll{
+  min-width: 0; /* IMPORTANT */
+  flex: 1 1 auto;
+}
+
+.tabs{
+  flex: 0 0 auto;
+  max-width: 100%;
+}
+
 .head-left,
 .head-right{
   flex-shrink: 0;
@@ -817,6 +901,10 @@ async function copy(text) {
   display: inline-block;
   min-width: 100%;
 }
+.code-body{
+  height: 340px;
+  overflow: auto;
+}
 
 /* Scrollbars */
 .code-body::-webkit-scrollbar{ height: 8px; width: 10px; }

vix-site/src/data/home.js

@@ -13,6 +13,10 @@ export const HOME = {
       },
     ],
     badges: [],
+    support: {
+      title: "Production ready",
+      meta: ["Native C++ binaries", "MIT licensed"],
+    },
     examples: [
       {
         key: "http",
@@ -104,74 +108,15 @@ i Hint:  Ctrl+C to stop`,
     ],
   },
 
-  why: {
-    title: "Why Vix exists",
-    subtitle: "Most runtimes assume stable internet. That is not reality.",
-    items: [
-      {
-        title: "Built for real conditions",
-        text: "Designed for unstable networks, offline-first environments, edge deployments, and peer-to-peer systems.",
-      },
-      {
-        title: "Predictable performance",
-        text: "Native performance with control and consistency. No garbage collector pauses. No surprise overhead.",
-      },
-      {
-        title: "Developer experience",
-        text: "Clear errors, code frames, structured logs, and a CLI that behaves like a real tool.",
-      },
-    ],
-  },
-
-  proof: {
-    title: "Trust, not hype",
-    subtitle:
-      "Built to be verifiable in behavior, performance, and distribution.",
-    items: [
-      {
-        title: "Open-source",
-        text: "Developed in the open with a source-first workflow.",
-      },
-      {
-        title: "Reproducible",
-        text: "Benchmarks and behavior are tied to commits and can be reproduced.",
-      },
-      {
-        title: "Safe distribution",
-        text: "Packaging and verification make delivery deterministic and secure.",
-      },
-    ],
-  },
-
   batteries: {
-    title: "What you get",
-    subtitle:
-      "Everything needed to build, run, and ship backend services in one system.",
+    title: "What ships with Vix",
     items: [
+      { title: "Native runtime", text: "Compiled C++ binaries. No VM. No GC." },
       {
-        title: "Unified CLI",
-        text: "One workflow covering new, build, run, dev, check, tests, pack, verify, and registry.",
-      },
-      {
-        title: "Script mode",
-        text: "Run a single C++ file like a script using vix run file.cpp.",
-      },
-      {
-        title: "HTTP and WebSocket runtime",
-        text: "Build APIs and realtime systems with a shared execution model.",
-      },
-      {
-        title: "Middleware pipeline",
-        text: "Composable request handling with deterministic control flow.",
-      },
-      {
-        title: "Packaging and verification",
-        text: "Create distributable artifacts and verify them before installation.",
-      },
-      {
-        title: "Registry workflow",
-        text: "Discover, add, and publish reusable C++ libraries with an offline-friendly flow.",
+        title: "HTTP + WebSocket",
+        text: "One execution model for APIs and realtime.",
       },
+      { title: "CLI workflow", text: "build, run, dev, pack, verify." },
     ],
   },
 

vix-site/src/pages/Home.vue

@@ -41,6 +41,7 @@ const _debugHomeKeys = HOME && typeof HOME === "object" ? Object.keys(HOME) : []
       :ctas="HOME.hero.ctas"
       :badges="HOME.hero.badges"
       :examples="HOME.hero.examples"
+      :support="HOME.hero.support"
     />
 
     <!-- WORKFLOW -->