docs: add admonish and fix front crate creation docs (#6)

docs/src/frontend/03_01_setup.md

@@ -24,11 +24,11 @@ rustup target add wasm32-unknown-unknown
 
 ### Step 3: Create a Frontend Crate
 
-Create a new frontend crate by executing:
+Create a new frontend crate from root of our project by executing:
 
 ```bash
-cargo new --bin demo
-cd demo
+cargo new --bin front
+cd front
 ```
 
 ### Step 4: Add Dioxus and the Web Renderer as Dependencies

docs/src/frontend/03_02_app_startup.md

@@ -113,7 +113,7 @@ fn main() {
 
 With the logger initialized, you can now log messages to your browser's console. The following is an example of how you can log an informational message:
 
-```rust
+```admonish example
 log::info!("Message on my console");
 ```
 

docs/src/frontend/03_03_01_layout.md

@@ -39,8 +39,9 @@ Alright, let's start with the `Header` component. For now, we're keeping it simp
 
 Whenever you're building a new component or working in our `main.rs` file, remember to import `dioxus::prelude::*`. It gives you access to all the macros and functions you need.
 
-> **Note:** You can adjust the Tailwind classes to suit your style.
-
+```admonish title="Tailwind CSS"
+You can adjust the Tailwind classes to suit your style.
+```
 
 `components/header.rs`
 ```rust

docs/src/frontend/03_03_02_reusable_components.md

@@ -15,7 +15,10 @@ Before we start building, let's break down how we're going to define props in ou
 
 These kinds of props are defined separately from the component function, and the generic type needs to be hooked onto the `Scope` type. We use the `#[derive(Props)]` macro to define the props:
 
-> **Note:** You can mark a prop as optional using `#[props(!optional)]`
+```admonish tip title="Optional Props"
+You can mark a prop as optional using `#[props(!optional)]`
+```
+
 ```rust
 #[derive(Props)]
 pub struct FilmModalProps<'a> {
@@ -50,7 +53,9 @@ pub fn FilmCard<'a>(
 
 Alright, now that we've got props figured out, let's start building some components!
 
-> **Note:** When you want to use props inside your components, here's how to do it: "{cx.props.my_prop}", "{my_prop}", or "{prop.to_string()}". Make sure to keep the curly braces and the prop name as shown.
+```admonish info title="Props in RSX"
+When you want to use props inside your components, here's how to do it: `"{cx.props.my_prop}"`, `"{my_prop}"`, or `"{prop.to_string()}"`. Make sure to keep the curly braces and the prop name as shown.
+```
 
 ## Button
 

docs/src/frontend/03_04_01_global_state.md

@@ -66,8 +66,10 @@ pub fn FilmModal<'a>(cx: Scope<'a, FilmModalProps>) -> Element<'a> {
 }
 ```
 
-This demonstrates an additional concept of Dioxus: dynamic rendering. Essentially, the component is only rendered if the condition is met.
-> **Note:** Dynamic rendering is a technique that enables rendering different content based on a condition. Further information can be found in the [Dioxus Dynamic Rendering documentation](https://dioxuslabs.com/docs/0.3/guide/en/interactivity/dynamic_rendering.html)
+This demonstrates an additional concept of Dioxus: **dynamic rendering**. Essentially, the component is only rendered if the condition is met.
+```admonish info title="Dynamic Rendering"
+Dynamic rendering is a technique that enables rendering different content based on a condition. Further information can be found in the [Dioxus Dynamic Rendering documentation](https://dioxuslabs.com/docs/0.3/guide/en/interactivity/dynamic_rendering.html)
+```
 
 `main.rs`
 ```diff

docs/src/frontend/03_04_02_local_state.md

@@ -15,7 +15,9 @@ In the `main.rs` file, the `App` component needs to be updated to introduce some
 - `selected_film`: The film to be updated.
 - `force_get_films`: A flag that will be employed to force a refetch of the films list from the API.
 
-> **Note:** We are going to apply dynamic rendering again, this time to render a list of Film Cards only if the films list is not empty.
+```admonish
+We are going to apply dynamic rendering again, this time to render a list of Film Cards only if the films list is not empty.
+```
 
 `main.rs`
 ```diff
@@ -82,7 +84,9 @@ We will implement the delete film feature later.
 
 The `FilmModal` component also undergoes an update in the `on_cancel` callback to clear the selected film and close the modal, in case we decide not to create or update a film.
 
-> **Note:** We utilize the `clone` method to generate a copy of the selected film. This is because we're employing the same film object in the `FilmCard`. Remember, ownership rules apply![MEH a revisar]
+```admonish tip title="Passing state as props"
+We utilize the `clone` method to generate a copy of the selected film. This is because we're employing the same film object in the `FilmCard`. Check [Clone documentation](https://doc.rust-lang.org/rust-by-example/trait/clone.html) from Rust by Example to learn more about the `clone` method.
+```
 
 Finally, it's essential to modify the `FilmModal` component to:
 

docs/src/frontend/03_04_state_management.md

@@ -4,17 +4,13 @@ In this part of our journey, we're going to dive into the lifeblood of the appli
 
 While we're only scratching the surface to get the application up and running, it's highly recommended that you refer to the [Dioxus Interactivity](https://dioxuslabs.com/docs/0.3/guide/en/interactivity/index.html) documentation. This way, you'll not only comprehend how it operates more fully, but also grasp the extensive capabilities the framework possesses.
 
-For now, let's start with the basics. Dioxus as is very influenced by React and its ecosystem, so it's no surprise that it uses the same approach to state management, Hooks.
-Hooks are Rust functions that take a reference to ScopeState (in a component, you can pass cx), and provide you with functionality and state. Dioxus allows hooks to maintain state across renders through a reference to ScopeState, which is why you must pass &cx to them.
-
-But wait! We can't use Hooks everywhere, there are some rules we must follow:
-
-## Rules of Hooks
+For now, let's start with the basics. **Dioxus** as is very influenced by *React* and its ecosystem, so it's no surprise that it uses the same approach to state management, Hooks.
+Hooks are Rust functions that take a reference to `ScopeState` (in a component, you can pass `cx`), and provide you with functionality and state. **Dioxus** allows hooks to maintain state across renders through a reference to `ScopeState`, which is why you must pass `&cx` to them.
 
+```admonish tip  title="Rules of Hooks"
 1. Hooks may be only used in components or other hooks
 2. On every call to the component function
     1. The same hooks must be called
     2. In the same order
 3. Hooks name's should start with `use_` so you don't accidentally confuse them with regular functions
-
-
+```