Simplify Home Page

docs/index.md

@@ -1,6 +1,7 @@
 ---
 # https://vitepress.dev/reference/default-theme-home-page
 layout: home
+pageClass: home
 next:
   text: 'Introduction'
   link: '/tut/crash-course/1-introduction'
@@ -12,8 +13,11 @@ hero:
     src: /logo.svg
   actions:
     - theme: brand
-      text: Crash Course
+      text: What is Vide?
       link: /tut/crash-course/1-introduction
+    - theme: alt
+      text: Crash Course
+      link: /tut/crash-course/2-creation
     - theme: alt
       text: API Reference
       link: /api/reactivity-core
@@ -21,133 +25,8 @@ hero:
 features:
   - title: Reactive State Management
     details: Built upon Solid and makes building reactive applications simple.
-  - title: Declarative and simple syntax
+  - title: Declarative and simple
     details: Syntax designed to be minimal while also being easy to understand.
   - title: Fully Luau typecheckable
     details: Luau's typechecker catches type errors before you even begin testing.
 ---
-
-<div class="advertising">
-
-## Quick Look
-
-Store your state to be used by UI in Sources which can be changed by any code:
-
-```luau
--- We can create some new state.
-local health = source(100)
-
--- and read and write to it like a function
-print(health()) --> 100
-health(50)
-print(health()) --> 50
-```
-
-You can use sources to compute new derived values with functions:
-
-```luau
-local health = source(100)
-local maxHealth = source(100)
-
--- We can use a function to derive new data from some state
-local function percentageHealth()
-    return `{ health() / maxHealth() * 100 }%`
-end
-
-print(percentageHealth()) --> 100%
-health(50)
-print(percentageHealth()) --> 50%
-```
-
-Use effects to react to changes to the sources used:
-
-```luau
-local health = source(100)
-local maxHealth = source(100)
-
--- We'll create a new scope for handling effects.
-local destroy = root(function()
-    -- We can create an effect that will re-run whenever it's values change.
-    effect(function()
-        print(`{ health() / maxHealth() * 100 }%`)
-    end)
-end)
-
--- Effects will respond to any changes in the state it reads from.
-health(50) --> effect prints 50%
--- Destroys the scope and the effect preventing it from running again.
-destroy()
-```
-
-You can use sources to build instances that will react to these sources:
-
-```luau
--- We create a scope that will mount the UI to Players.LocalPlayer.PlayerGui
-mount(function()
-    local health = source(100)
-    local maxHealth = source(100)
-
-    local function percentageHealth()
-        return health() / maxHealth()
-    end
-
-    -- This will create a Frame with the given properties.
-    return create "Frame" {
-        Name = "Health",
-        Size = UDim2.new(1, 0, 0, 24),
-        BackgroundColor3 = Color3.fromHex("#000000"),
-
-        -- We can add children directly to another object.
-        create "Frame" {
-            Name = "Fill",
-            -- ... and we can set properties to effects which automatically update the property.
-            Size = function()
-                return UDim2.fromScale(percentageHealth(), 1)
-            end,
-            BackgroundColor3 = Color3.fromHex("#ff0000"),
-        }
-    }
-end, Players.LocalPlayer.PlayerGui)
-```
-
-## Install
-
-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
-```
-
-== Git
-
-Make sure you have Git installed on your computer.<br>
-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
-
-:::
-
-</div>