comps, hooks and animation, wip

book/src/learn/animation.md

@@ -1 +1,22 @@
 # Animation
+
+Freya comes with a `use_animation` hook to create and manage animations in declarative way.
+
+TODO
+
+Example:
+```rs
+fn app() -> Element {
+    let animation = use_animation(|ctx| {
+        ctx.auto_start(true);
+        ctx.with(AnimNum::new(0., 100.).time(50))
+    });
+
+    let width = animation.get().read().as_f32();
+
+    rsx!(rect {
+        width: "{width}",
+        height: "100%",
+        background: "blue"
+    })
+}

book/src/learn/built_in_components.md

@@ -1 +1,28 @@
 # Built-in Components
+
+Freya comes with a set of styled and functional components you may use to develop faster. Some examples as `Button`, `Switch`, `Scrollview`, etc.
+
+You can find more about them in [their docs](https://docs.rs/freya-components). 
+
+Example:
+```rs
+fn app() -> Element {
+    let mut enabled = use_signal(|| true);
+
+    rsx!(
+        ScrollView {
+            Button {
+                onclick: |_| {
+                    println!("Button was clicked!");
+                }
+            }
+            Switch {
+                enabled: enabled(),
+                ontoggled: move |_| {
+                    enabled.toggle();
+                }
+            }
+        } 
+    )
+}
+```

book/src/learn/built_in_hooks.md

@@ -1 +1,24 @@
 # Built-in Hooks
+
+Freya comes with a set hooks to simplify various tasks, such as animations, accessibility, text editing and more.
+
+You can find more about them in [their docs](https://docs.rs/freya-hooks). 
+
+Example:
+```rs
+fn app() -> Element {
+    let mut my_focus = use_focus();
+
+    rsx!(
+        rect {
+            width: "100%",
+            height: "100%",
+            focus_id: my_focus.attribute(),
+            onclick: move |_| my_focus.focus(),
+            label {
+                "{my_focus.is_focused()}"
+            }
+        }
+    )
+}
+```