improve home page

docs/.vitepress/config.ts

@@ -1,6 +1,6 @@
 //import { defineConfig } from "vitepress"
 import { withMermaid } from "vitepress-plugin-mermaid";
-import banner from "vite-plugin-banner"
+import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 
 // https://vitepress.dev/reference/site-config
 export default withMermaid({
@@ -9,6 +9,12 @@ export default withMermaid({
     description: "A reactive UI library for Luau.",
     base: "/vide/",
     head: [["link", { rel: "icon", href: "/vide/logo.svg" }]],
+    
+    markdown: {
+        config(md) {
+            md.use(tabsMarkdownPlugin)
+        }
+    },
 
     themeConfig: {
         logo: "/logo.svg",

docs/.vitepress/theme/index.js

@@ -1,9 +1,13 @@
 // .vitepress/theme/index.js
 import DefaultTheme from 'vitepress/theme'
 import layout from './layout.vue'
+import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
 import './vars.css'
 
 export default {
 	extends: DefaultTheme,
+	enhanceApp({ app }) {
+		enhanceAppWithTabs(app)
+	},
 	Layout: layout
 }

docs/.vitepress/theme/vars.css

@@ -1,6 +1,6 @@
 .banner {
-  background-color: var(--vp-button-brand-bg) !important;
+  background-color: var(--vp-button-brand-bg);
-  color: rgba(255, 255, 255, 100%);
+  color: var(--vp-button-brand-text);
   width: 100%;
   height: 1.5rem;
   text-align: center;
@@ -16,42 +16,65 @@
   margin-top: 1.5rem;
 }
 
+.plugin-tabs--tab-list {
+  background-color: var(--vp-c-bg-alt);
+}
+
+.VPNavBar.home:not(.top) {
+  backdrop-filter: blur(0.5rem);
+  background-color: rgba(255, 255, 255, 0%) !important;
+}
+
+.VPNavBar.home > .divider {
+  opacity: 0;
+}
+
+#VPContent.is-home {
+  background-color: rgba(255, 255, 255, 0%);
+  background-image: radial-gradient(
+    var(--vp-c-brand-2), var(--vp-c-bg)
+  );
+}
+
 :root {
-    --vp-c-brand-1: #3086ff;
+  --vp-c-brand-1: #3086ff;
+  --vp-c-brand-2: #75aeff;
 
-    --vp-button-brand-bg: #3661A2;
+  --vp-button-brand-bg: #3661A2;
-    --vp-button-brand-hover-bg: #24447F;
+  --vp-button-brand-hover-bg: #24447F;
-    --vp-button-brand-press-bg: #4896F3;
+  --vp-button-brand-press-bg: #4896F3;
 
-    --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-color: transparent;
-    --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #3661A2, #4896F3);
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #3661A2, #4896F3);
-    --vp-home-hero-logo-background: -webkit-linear-gradient(120deg, #3661A2, #4896F3);
+  --vp-home-hero-logo-background: -webkit-linear-gradient(120deg, #3661A2, #4896F3);
 
-    --vp-home-hero-image-background-image: linear-gradient(
+  --vp-home-hero-image-background-image: linear-gradient(
 		135deg,
 		#1D314F 50%,
 		#2A57A2 50%
 	);
 	--vp-home-hero-image-filter: blur(96px);
 
-    --vp-c-bg: #f2f5f8;
+  --vp-c-bg: #f2f5f8;
-    --vp-c-bg-alt: #dfe8f5;
+  --vp-c-bg-alt: #dfe8f5;
-    --vp-c-bg-elv: #dde7f4;
+  --vp-c-bg-elv: #dde7f4;
-    --vp-c-bg-soft: #e8f1fe;
+  --vp-c-bg-soft: #e8f1fe;
 
-    --vp-c-border: #c0c3c6;
+  --vp-c-border: #c0c3c6;
-    --vp-c-divider: #dfe2e6;
+  --vp-c-divider: #dfe2e6;
-    --vp-c-gutter: #dfe2e6;
+  --vp-c-gutter: #dfe2e6;
+  --vp-plugin-tabs-tab-bg: var(--vp-c-bg);
 }
 
 .dark {
+    --vp-c-brand-2: #234782;
     --vp-c-bg: #0d131b;
     --vp-c-bg-alt: #111720;
     --vp-c-bg-elv: #182231;
     --vp-c-bg-soft: #182231;
 
     --vp-c-border: #111720;
-    --vp-c-divider: #181d27;
+    --vp-c-divider: #1d273c;
     --vp-c-gutter: #181d27;
 
     --vp-home-hero-image-background-image: linear-gradient(

docs/index.md

@@ -1,17 +1,20 @@
 ---
 # https://vitepress.dev/reference/default-theme-home-page
 layout: home
+next:
+  text: 'Introduction'
+  link: '/tut/crash-course/1-introduction'
 
 hero:
   name: Vide
   text: ""
-  tagline: A reactive UI library for Luau.
+  tagline: A reactive UI and state library for Luau.
   image:
     src: /logo.svg
     alt: Vide
   actions:
     - theme: brand
-      text: Crash Course
+      text: Quick Start
       link: /tut/crash-course/1-introduction
     - theme: alt
       text: API Reference
@@ -21,7 +24,55 @@ features:
   - title: Reactively driven
     details: Powerful and modern primitives inspired by SolidJS to build fluid UI with little friction
   - title: Declarative and concise
-    details: Syntax built to be minimal while also obvious and easy to understand to anyone
+    details: Syntax built to be minimal and clean while also obvious and easy to understand to anyone
   - title: Fully Luau Typecheckable
-    details: Ensure you write correct code through the Luau typechecking engine.
+    details: Ensure you write correct and robust code through the Luau typechecking engine.
 ---
+
+## Installation
+
+Vide can be installed through 3 different ways.
+
+:::tabs
+== Wally
+
+Add the following line to your `wally.toml` and then re-install your packages
+```toml
+[dependencies]
+vide = centau/vide@0.3.1
+```
+
+== Roblox
+
+im so sorry you have to use rojo and build it yourself or ask someone in ross to build a vide rbxm for you :sob:
+cen is too busy working on system verilog
+
+:::
+
+## Quick Examples
+
+A simple counter element that counts up when you click on it.
+
+```luau
+local vide = require("vide")
+
+local source = vide.source
+local create = vide.create
+
+local function Counter()
+	local count = source(0)
+
+	return create "TextButton" {
+    Size = UDim2.fromOffset(200, 50),
+		Text = function()
+			return `count: {count()}`
+		end,
+
+		Activated = function()
+			count(count() + 1)
+		end
+	}
+end
+
+return Counter
+```

docs/package.json

@@ -7,6 +7,7 @@
     },
     "devDependencies": {
         "vitepress": "1.4.1",
-        "vitepress-plugin-mermaid": "2.0.17"
+        "vitepress-plugin-mermaid": "2.0.17",
+        "vitepress-plugin-tabs": "^0.5.0"
     }
 }

docs/public/full_logo.svg

@@ -1,4 +1,4 @@
-<svg width="150" height="88" viewBox="15 7 115 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="375" height="220" viewBox="15 7 115 68" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_d_1_41)">
 <g clip-path="url(#clip0_1_41)">
 <rect x="18" y="12" width="110" height="48" rx="8" fill="url(#paint0_radial_1_41)"/>