Add a quick look to Home

docs/index.md

@@ -29,7 +29,88 @@ features:
 
 <div class="advertising">
 
-## Installation
+## 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.
 
@@ -69,12 +150,4 @@ which you can then insert into Roblox Studio
 
 :::
 
-<script setup>
-import { VPButton } from "vitepress/theme"
-</script>
-
-<div style="display: flex; justify-content: end;">
-<VPButton href="/tut/crash-course/1-introduction" text="Read the crash Course"/>
-</div>
-
 </div>