docs updates

Author: ivictbor

adminforth/documentation/docs/tutorial/03-Customization/01-branding.md

@@ -1,3 +1,9 @@
+---
+description: "Learn how to customize the branding and theming of your AdminForth application."
+image: "/ogs/branding.png"  # Path to the OG image
+---
+
+
 # Branding and Theming
 
 The first things you would probably like to change are the logo, favicon and the name of the application. 
@@ -106,7 +112,7 @@ const admin = new AdminForth({
 });
 ```
 Here is how it looks:
-![alt text](image-10.png)
+![AdminForth Themes](image-10.png)
 
 
 
@@ -147,7 +153,7 @@ const admin = new AdminForth({
 });
 ```
 Here is how it looks:
-![alt text](demo.adminforth.dev_login.png)
+![AdminForth Login Background](demo_adminforth_login.png)
 
 You can also set background position and size:
 

adminforth/documentation/docs/tutorial/03-Customization/04-hooks.md

@@ -1,3 +1,9 @@
+---
+description: "Hooks are powerful tools to modify the data before it is saved to the database, execute something after data were saved or deleted, change the query before fetching items from the database, modify the fetched data before it is displayed in the list and show, and prevent the request to db depending on some condition."
+image: "/ogs/hooks.png"  # Path to the OG image
+---
+
+
 
 # Hooks
 
@@ -25,7 +31,7 @@ Here we will consider possible flows one by one
 
 When user opens edit page, AdminForth makes a request to the backend to get the initial data for the form.
 
-![Initial data for edit page flow](image-28.png)
+![Initial data for edit page flow](initial_edit_data_flow.png)
 
 Practically you can use `show.afterDatasourceResponse` to modify or add some data before it is displayed on the edit page. 
 

adminforth/documentation/docs/tutorial/03-Customization/06-customPages.md

@@ -1,3 +1,8 @@
+---
+description: "Learn how to create custom pages in AdminForth."
+image: "/ogs/customPages.png" 
+---
+
 # Custom pages
 
 Most Admin Panels should have some Dashboards or custom pages. 

adminforth/documentation/docs/tutorial/03-Customization/14-afcl.md

@@ -1,13 +1,16 @@
-```
-image: "afcl-preview.png"  # Path to the OG image
-```
+---
+description: "AFCL is a set of components which you can use as build blocks in your AdminForth application. AFCL allows to keep the design consistent with minimal efforts and build new pages faster. AFCL components follow styling standard and respect theme colors."
+image: "/ogs/afcl.png"  # Path to the OG image
+---
 
 # AdminForth Components Library
 
 AFCL is a set of components which you can use as build blocks in your AdminForth application. 
 AFCL allows to keep the design consistent with minimal efforts and build new pages faster.
 AFCL components follow styling standard and respect theme colors.
 
+Components set is always growing, so you can expect new components to be added in the future.
+
 ## Button