Update Banner

docs/.vitepress/theme/vars.css

@@ -1,19 +1,39 @@
+
+.VPSkipLink {
+  order: -3
+}
+
+.VPNav {
+  order: -2
+}
+
+.VPLocalNav {
+  order: 0;
+}
+
 .banner {
   background-color: var(--vp-button-brand-bg);
   color: var(--vp-button-brand-text);
   width: 100%;
-  height: 1.5rem;
   text-align: center;
   position: fixed;
-  z-index: 30;
+  bottom: 0px;
+  z-index: 50;
+  order: -1
 }
 
-.VPNav {
+.advertising {
-  margin-top: 1.5rem;
+  margin: auto;
 }
 
-.VPSidebar {
+@media only screen and (min-width: 768px) {
-  margin-top: 1.5rem;
+  .advertising {width: calc(100% - 8rem);}
+} 
+
+@media only screen and (min-width: 960px) {
+  .banner {position: fixed; margin-top: var(--vp-nav-height); bottom: auto}
+  #VPSidebarNav {margin-top: 1.5rem;}
+  .VPLocalNav {top: calc(var(--vp-nav-height) + 1.5rem) !important;}
 }
 
 .plugin-tabs--tab-list {
@@ -29,13 +49,6 @@
   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-2: #75aeff;
@@ -48,11 +61,6 @@
   --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-image-background-image: linear-gradient(
-		135deg,
-		#1D314F 50%,
-		#2A57A2 50%
-	);
 	--vp-home-hero-image-filter: blur(96px);
 
   --vp-c-bg: #f2f5f8;
@@ -76,10 +84,4 @@
     --vp-c-border: #111720;
     --vp-c-divider: #1d273c;
     --vp-c-gutter: #181d27;
-
-    --vp-home-hero-image-background-image: linear-gradient(
-		-45deg,
-		#3D506C 50%,
-		#2F415C 50%
-	);
 }

docs/index.md

@@ -6,73 +6,75 @@ next:
   link: '/tut/crash-course/1-introduction'
 
 hero:
-  name: Vide
+  name: "Vide"
-  text: ""
   tagline: A reactive UI and state library for Luau.
   image:
     src: /logo.svg
-    alt: Vide
   actions:
     - theme: brand
-      text: Quick Start
+      text: Crash Course
       link: /tut/crash-course/1-introduction
     - theme: alt
       text: API Reference
       link: /api/reactivity-core
 
 features:
-  - title: Reactively driven
+  - title: Reactive State Management
-    details: Powerful and modern primitives inspired by SolidJS to build fluid UI with little friction
+    details: Built upon Solid and makes building reactive applications simple.
-  - title: Declarative and concise
+  - title: Declarative and simple syntax
-    details: Syntax built to be minimal and clean while also obvious and easy to understand to anyone
+    details: Syntax designed to be minimal while also being easy to understand.
-  - title: Fully Luau Typecheckable
+  - title: Fully Luau typecheckable
-    details: Ensure you write correct and robust code through the Luau typechecking engine.
+    details: Luau's typechecker catches type errors before you even begin testing.
 ---
 
+<div class="advertising">
+
 ## Installation
 
-Vide can be installed through 3 different ways.
+Vide can be installed via Wally and Github. There is currently no official Vide rbxm.
 
 :::tabs
 == Wally
 
+Make sure you have wally installed on your computer.<br>
 Add the following line to your `wally.toml` and then re-install your packages
 ```toml
 [dependencies]
 vide = centau/vide@0.3.1
 ```
 
-== Roblox
+== Git
 
-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:
+Make sure you have Git installed on your computer.<br>
-cen is too busy working on system verilog
+Run the following command in the directory you want to have Vide installed at
+```sh
+git submodule add https://github.com/centau/vide.git
+```
+
+== Build
+
+Download vide onto your computer
+
+```sh
+git clone https://github.com/centau/vide.git & cd vide
+```
+
+then use a syncing tool to build Vide into a rbxm
+
+```sh
+rojo build -o build.rbxm
+```
+
+which you can then insert into Roblox Studio
 
 :::
 
-## Quick Examples
+<script setup>
+import { VPButton } from "vitepress/theme"
+</script>
 
-A simple counter element that counts up when you click on it.
+<div style="display: flex; justify-content: end;">
+<VPButton href="/tut/crash-course/1-introduction" text="Read the crash Course"/>
+</div>
 
-```luau
+</div>
-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
-```