updated content: placed examples before FAQs. Removed repeated articl…

…es. updated assest

docs/ff-integrations/authentication/custom-login-routing.md → docs/ff-concepts/advanced/custom-login-routing.md

@@ -31,8 +31,9 @@ This article explains how to configure custom routing logic for users after they
     The **Persist** setting retains the value locally on the device until the app is uninstalled. It will reset on every refresh when testing in a web browser.
     :::
 
-    ![](../assets/20250430121414406250.png)
-    ![](../assets/20250430121414639307.png)
+    ![](imgs/20250430121414406250.png)
+
+    ![](imgs/20250430121414639307.png)
 
 **Add a User Field for Admin Check**
 
@@ -41,8 +42,9 @@ This article explains how to configure custom routing logic for users after they
 
     This allows conditional routing based on the admin role.
 
-    ![](../assets/20250430121414890408.png)
-    ![](../assets/20250430121415192057.png)
+    ![](imgs/20250430121414890408.png)
+
+    ![](imgs/20250430121415192057.png)
 
 **Configure Initial Pages**
 
@@ -56,7 +58,7 @@ This article explains how to configure custom routing logic for users after they
   **Logged In Page** is used when a user is already authenticated.
   :::
 
-  ![](../assets/20250430121415472919.png)
+  ![](imgs/20250430121415472919.png)
 
 **Define Actions on the Checkup Page**
 
@@ -69,9 +71,11 @@ This article explains how to configure custom routing logic for users after they
   - If `FALSE`:  
     - Add action: **Navigate To** `LoginPage`, disable **Back Navigation**, then **Add Terminate**.
 
-    ![](../assets/20250430121434550471.png)
-    ![](../assets/20250430121434823464.png)
-    ![](../assets/20250430121435145067.png)
+    ![](imgs/20250430121434550471.png)
+
+    ![](imgs/20250430121434823464.png)
+
+    ![](imgs/20250430121435145067.png)
 
 2. **Check If User Is New (First Time Login)**
 
@@ -81,7 +85,7 @@ This article explains how to configure custom routing logic for users after they
     - If `TRUE`:  
       - Add action: **Navigate To** `OnboardingPage`, disable **Back Navigation**, then **Add Terminate**.
 
-      ![](../assets/20250430121435792377.png)
+      ![](imgs/20250430121435792377.png)
 
 3. **Check If User Is an Admin**
 
@@ -94,7 +98,7 @@ This article explains how to configure custom routing logic for users after they
   - If `FALSE`:  
     - Navigate to `UserHomePage`, disable back navigation, then **Terminate**.
 
-  ![](../assets/20250430121436144376.png)
+  ![](imgs/20250430121436144376.png)
 
 **Update `firstTime` After Onboarding**
 
@@ -105,14 +109,15 @@ This article explains how to configure custom routing logic for users after they
     3. Add action: **Update Local State** > `firstTime` → set value → `False`.
     4. Add navigation: **Navigate To** `CheckupPage`, disable back navigation.
 
-    ![](../assets/20250430121436460665.png)
-    ![](../assets/20250430121436751661.png)
+    ![](imgs/20250430121436460665.png)
+
+    ![](imgs/20250430121436751661.png)
 
 :::tip
 You can reuse the `CheckupPage` to add more advanced routing conditions, such as checking if the user has completed their profile or enabled certain settings.
 :::
 
 To skip onboarding for admins as well, extend your logic by nesting onboarding logic inside the admin check condition.
 
-![](../assets/20250430121437067417.png)
+![](imgs/20250430121437067417.png)
 

docs/ff-concepts/animations/custom-loading-bottom-sheet.md

@@ -8,7 +8,7 @@ title: Create a Custom Loading Animation Using a Bottom Sheet
 
 Use a custom `Bottom Sheet` to display a loading animation while performing long-running actions such as API calls, database writes, or chained workflows. This guide walks through how to build a non-blocking custom loading indicator.
 
-![](../assets/20250430121406506215.gif)
+![](animation_gifs/20250430121406506215.gif)
 
 :::info[Prerequisites]
 - A `Bottom Sheet` component with a loading animation (e.g., Lottie, GIF, or static image)
@@ -23,7 +23,7 @@ Use a custom `Bottom Sheet` to display a loading animation while performing long
       - Use a **Lottie** animation, **GIF**, or any custom UI for the loading indicator.
       - You can also include a `Text` widget to display a status message.
 
-      ![](../assets/20250430121406885071.png)
+      ![](animation_gifs/20250430121406885071.png)
 
    This component will serve as the visual loading indicator during your action chain.
 
@@ -35,9 +35,9 @@ Use a custom `Bottom Sheet` to display a loading animation while performing long
       2. Add a `Delay` action to simulate a task (optional).
       3. Add the `Open Bottom Sheet` action and configure it to be **non-blocking**.
 
-      ![](../assets/20250430121407233519.png)
+      ![](animation_gifs/20250430121407233519.png)
 
-      ![](../assets/20250430121407654843.png)
+      ![](animation_gifs/20250430121407654843.png)
 
       :::warning
       Enable the **Non Blocking** option in the `Open Bottom Sheet` action. This allows the workflow to continue running while the bottom sheet is visible.
@@ -55,15 +55,15 @@ Use a custom `Bottom Sheet` to display a loading animation while performing long
 
       1. Add a `Close Bottom Sheet` action to remove the loading indicator.
 
-      ![](../assets/20250430121407938780.png)
+      ![](animation_gifs/20250430121407938780.png)
 
 5. **Show a Confirmation Message**
 
    1. Add a `Show SnackBar` action to display a success message to the user.
 
    This confirms that the actions are complete and the bottom sheet has been dismissed.
 
-   ![](../assets/20250430121408203472.gif)
+   ![](animation_gifs/20250430121408203472.gif)
 
 You can test this implementation in the public project:
    - Navigate to the **CustomLoading** page

docs/ff-concepts/navigation-routing/special-page-navigation/custom-navbar-setup.md

@@ -8,7 +8,7 @@ title: Custom Navigation Bars
 
 Build a custom `Navigation Bar` (NavBar) to support dynamic views, role-based access, or complex widget layouts such as embedded cart counters or animated icons. Unlike the default NavBar widget, this approach gives full control over design and visibility.
 
-![](../assets/20250430121449657102.png)
+![](imgs/20250430121449657102.png)
 
 :::info[Prerequisites]
 - A component to be used as the custom NavBar.
@@ -43,7 +43,7 @@ Follow the steps below:
 
    1. Add `Bottom Padding` to your main page content equal to the NavBar’s height. This prevents the NavBar from overlapping other widgets.
 
-   ![](../assets/20250430121450015102.png)
+   ![](imgs/20250430121450015102.png)
 
    2. Use `Local State`, `App State`, or conditional logic from a database (e.g., `is_admin`) to control:
       - Which version of the NavBar appears.
@@ -75,8 +75,8 @@ Follow the steps below:
             - **Conditional NavBar** to explore role-based NavBar behavior.
             - Toggle the `is_admin` field to test both states.
 
-         ![](../assets/20250430121450326812.png)
+         ![](imgs/20250430121450326812.png)
 
-         ![](../assets/20250430121450591399.png)
+         ![](imgs/20250430121450591399.png)
 
-         ![](../assets/20250430121450801118.png)
+         ![](imgs/20250430121450801118.png)

docs/ff-concepts/navigation-routing/special-page-navigation/pageview-widget.md

@@ -49,57 +49,6 @@ To add the PageView widget to your app:
     </iframe>
 </div>
 
-## Use Case: Image Carousel with Auto-Scroll
-
-You can build an image carousel using the `PageView` widget combined with the `Control Page View` action. This allows users to scroll through images either manually or automatically.
-
-**Steps Overview:**
-
-    1. **Add a PageView Widget**
-        - From the **Widget Panel**, drag the `PageView` widget onto the canvas.
-        - Populate it with your image widgets or bind it to a dynamic image list.
-
-    2. **Set Up Page Load Action**
-        - Select the `Scaffold` or main container.
-        - Add a `Page Load` action to trigger carousel behavior.
-
-    3. **Add `Control Page View` Action**
-        - Use the `Control Page View` action to control transitions:
-            - `Next`, `Previous`, `First`, or `Last`.
-
-    4. **Auto-Scroll Behavior (Optional)**
-        - Add a sequence of:
-            - `Control Page View` → `Wait` → `Control Page View` (Next)
-        - Loop this logic to create a smooth, timed carousel experience.
-
-            ![Carousel Example](../assets/20250430121318472792.gif)
-
-## Use Case: Image Slider from List of Image URLs
-
-This example demonstrates how to build a dynamic image slider using a list of image URLs—ideal for product detail screens or galleries.
-
-Follow the steps below:
-
-1. **Add a PageView Widget**
-   - Place a `PageView` on your screen.
-
-2. **Bind to the Image List**
-   - Generate dynamic children from your list of image URLs.
-
-3. **Add a Repeating Child**
-   - Use a single `Image` widget inside the `PageView`.
-   - Bind the `Image URL` to the current list item.
-
-    :::tip
-    You only need one child inside the PageView. When bound to a list, it automatically repeats for each item.
-    :::
-
-    :::tip
-    - Use horizontal scroll for carousels and onboarding pages.
-    - Combine with indicators or swipe gestures for a richer UX.
-    - Use `Wait` and `Control Page View` actions to create auto-scroll behavior.
-    :::
-
 ## Adding infinite scroll
 
 The PageView widget is an incredibly versatile widget that can be utilized in a variety of situations to create interactive applications. For example, you might want to use it in an app that involves reading books, magazines, or similar content to mimic the experience of flipping through pages.
@@ -441,4 +390,55 @@ If you prefer watching a video tutorial, here's the one for you:
         allowFullScreen
         allow="clipboard-write">
     </iframe>
-</div>
+</div>
+
+## Use Case: Image Carousel with Auto-Scroll
+
+You can build an image carousel using the `PageView` widget combined with the `Control Page View` action. This allows users to scroll through images either manually or automatically.
+
+**Steps Overview:**
+
+    1. **Add a PageView Widget**
+        - From the **Widget Panel**, drag the `PageView` widget onto the canvas.
+        - Populate it with your image widgets or bind it to a dynamic image list.
+
+    2. **Set Up Page Load Action**
+        - Select the `Scaffold` or main container.
+        - Add a `Page Load` action to trigger carousel behavior.
+
+    3. **Add `Control Page View` Action**
+        - Use the `Control Page View` action to control transitions:
+            - `Next`, `Previous`, `First`, or `Last`.
+
+    4. **Auto-Scroll Behavior (Optional)**
+        - Add a sequence of:
+            - `Control Page View` → `Wait` → `Control Page View` (Next)
+        - Loop this logic to create a smooth, timed carousel experience.
+
+            ![Carousel Example](imgs/20250430121318472792.gif)
+
+## Use Case: Image Slider from List of Image URLs
+
+This example demonstrates how to build a dynamic image slider using a list of image URLs—ideal for product detail screens or galleries.
+
+Follow the steps below:
+
+1. **Add a PageView Widget**
+   - Place a `PageView` on your screen.
+
+2. **Bind to the Image List**
+   - Generate dynamic children from your list of image URLs.
+
+3. **Add a Repeating Child**
+   - Use a single `Image` widget inside the `PageView`.
+   - Bind the `Image URL` to the current list item.
+
+    :::tip
+    You only need one child inside the PageView. When bound to a list, it automatically repeats for each item.
+    :::
+
+    :::tip
+    - Use horizontal scroll for carousels and onboarding pages.
+    - Combine with indicators or swipe gestures for a richer UX.
+    - Use `Wait` and `Control Page View` actions to create auto-scroll behavior.
+    :::

docs/ff-integrations/database/supabase/supabase-search-implementation.md

@@ -21,16 +21,17 @@ Follow the steps below to implement Supabase Search:
       2. Select the relevant table.
       3. Enable **Realtime** updates from the table settings.
 
-      ![](../assets/20250430121159260138.png)
-      ![](../assets/20250430121159528641.png)
+      ![](imgs/20250430121159260138.png)
+
+      ![](imgs/20250430121159528641.png)
 
    - **Filter Query Data Using an Input Field**
 
       4. In FlutterFlow, add an **Input Text Field** to your UI.
       5. Configure your **Query Collection** to apply a filter using the input value.
          - Set the filter condition to `is equal to`.
 
-         ![](../assets/20250430121159842724.png)
+         ![](imgs/20250430121159842724.png)
 
    - **Choose a Trigger Method for Search**
 
@@ -39,13 +40,13 @@ Follow the steps below to implement Supabase Search:
       6. Enable **Update Page on Change**.
       7. Set the update frequency to your desired interval.
 
-      ![](../assets/20250430121200086333.png)
+      ![](imgs/20250430121200086333.png)
 
    - **Manual Search on Submit**
 
       8. Refresh the query manually when the input text is submitted.
 
-      ![](../assets/20250430121200394549.png)
+      ![](imgs/20250430121200394549.png)
 
 :::warning
 Using real-time updates for live search may incur higher costs compared to performing a search on submission.