Added how-it-works page

Author: IzumiSy

astro.config.mjs

@@ -35,6 +35,10 @@ const starlightOptions = starlight({
     {
       label: "Getting Started",
       items: [
+        {
+          label: "How it works",
+          slug: "guides/how-it-works",
+        },
         {
           label: "Setup",
           slug: "guides/setup",

src/assets/image-collection.png

@@ -25,8 +25,6 @@ const Characters = () => {
 }
 ```
 
-Fabrix can also automatically generate forms from GraphQL mutations. The fields in the form are derived from the input types specified in the mutation variables. This allows you to quickly create and render forms based on your GraphQL schema without manually defining each form field.
-
 ### Query
 
 ```tsx
@@ -51,11 +49,7 @@ const Characters = () => {
 }
 ```
 
-### Mutation
-
-When you provide a mutation to Fabrix, it inspects the input types of the mutation to determine the fields that should be included in the form.
-
-Here’s an example of how you can use Fabrix to render a form from a mutation:
+## Mutation
 
 ```tsx
 import { FabrixComponent } from "@fabrix-framework/fabrix";

src/assets/image-form.png

@@ -0,0 +1,32 @@
+---
+title: How it works
+description: How it works
+---
+import { Image } from 'astro:assets';
+import SingleQueryImage from "../../../assets/image-single.png"
+import CollectionQueryImage from "../../../assets/image-collection.png"
+import FormImage from "../../../assets/image-form.png"
+
+This page describes the mechanism of Fabrix.
+
+### Query (single)
+
+The most basic component that Fabrix can render is a component that is rendered from a single value query. This component is rendered from a query that returns a single value. 
+
+The query is executed when the component is mounted and the result is rendered as simple rows.
+
+<Image src={SingleQueryImage} alt="a component that is rendered from a single value query" />
+
+### Query (collection)
+
+When the query has the collection type, Fabrix looks into the part of the query that returns the collection and renders a component for each item in the collection. 
+
+<Image src={CollectionQueryImage} alt="a component that is rendered from a collection query" />
+
+### Mutation
+
+Fabrix can also automatically generate forms from GraphQL mutations. 
+
+The fields in the form are derived from the input types specified in the mutation variables. This allows you to quickly create and render forms based on your GraphQL schema without manually defining each form field.
+
+<Image src={FormImage} alt="a component that is rendered from a mutation" />