Pinkesh/fix broken links (#88)

* fixing links

* Fixing links

* Fixed # links

* Fixed broken links

* Remove dividers

---------

Co-authored-by: PoojaB26 <[email protected]>

Author: pinkeshmars

docs/ff-concepts/adding-customization/cloud-functions.md

@@ -59,9 +59,9 @@ loading indicator during the logo creation process. Its value is set to *True* b
 
 ### 2. Build a page
 
-Let's add a page that allows users to enter the prompt. To speed up, you can add a page from the [template](/getting-started/adding-new-page#add-page) or use [AI Page Gen](/getting-started/adding-new-page#ai-gen-page). Here is the page added using AI Page Gen, and after some modification, it looks the below:
+Let's add a page that allows users to enter the prompt. To speed up, you can add a page from the template or use [AI Page Gen](../../resources/ui/pages/pages.md#create-an-ai-generated-page). Here is the page added using AI Page Gen, and after some modification, it looks the below:
 
-Also, see how to [build a page layout](/widgets-and-components/ui-and-layout-101) if you want to build a page from scratch.
+Also, see how to [build a page layout](../../ff-concepts/layout/building-layout.md) if you want to build a page from scratch.
 
 ![img_7.png](imgs/img_7.png)
 

docs/ff-concepts/animations/animations.md

@@ -13,7 +13,7 @@ Enhancing your app with animations significantly improves the user experience, m
 - [**Implicit Animations**](implicit_animations.md): Animate changes in specific widget properties, such as the height of a Container.
 - [**Hero Animations**](hero_animations.md): Animate a widget that transitions smoothly between screens, also known as shared element transitions.
 - [**Page Transition Animations**](page_transitions.md): Specify transitions between pages within your app.
-- **Import Animations**: Import animations you've created using other tools such [lottiefiles](import-animations/lottie-animation) and [Rive](import-animations/rive-animation).
+- **Import Animations**: Import animations you've created using other tools such [lottiefiles](import-animations/lottie-animation.md) and [Rive](import-animations/rive-animation.md).
 
 
 To learn more about animations in FlutterFlow, check out this video:

docs/ff-concepts/animations/page_transitions.md

@@ -27,7 +27,7 @@ Here, the transitions are recorded with the duration set to 1000ms to make the a
 
 ## Animate single navigate transition
 
-To set a transition animation for a single navigate action, first, ensure that you have added a [**Navigate To**](../../resources/ui/pages/navigation#navigate-to-action) action and then select an animation from the **Transition Type** dropdown. By default, the animations use 300 milliseconds as the duration for which it plays but you can change it by specifying a value inside the **Duration** (ms) field.
+To set a transition animation for a single navigate action, first, ensure that you have added a [**Navigate To**](../../ff-concepts/navigation-routing/page-navigation.md#navigate-to-action) action and then select an animation from the **Transition Type** dropdown. By default, the animations use 300 milliseconds as the duration for which it plays but you can change it by specifying a value inside the **Duration** (ms) field.
 
 ![single-navigate-transition-animation.avif](animation_gifs/single-navigate-transition-animation.avif)
 

docs/ff-concepts/animations/widget_animations.md

@@ -208,7 +208,7 @@ If you notice carefully, the items appear in a staggered fashion. This can be ac
 
 Select the item in the list and add the Slide animation.
 
-In the Delay property, open the variable menu and add a [code expression](#) to calculate the delay value based on the item's index. For this example, we use the formula `[index] * 100`, where `index` represents the position of the item, and `100` is the delay in milliseconds. This means the first item will slide in after 100 ms, the second after 200 ms, and so on, creating a staggered animation effect.
+In the Delay property, open the variable menu and add a [code expression](../../resources/control-flow/functions/utility-functions.md#code-expressions) to calculate the delay value based on the item's index. For this example, we use the formula `[index] * 100`, where `index` represents the position of the item, and `100` is the delay in milliseconds. This means the first item will slide in after 100 ms, the second after 200 ms, and so on, creating a staggered animation effect.
 
 <div style={{
     position: 'relative',

docs/ff-concepts/design-system/design-system.md

@@ -49,7 +49,7 @@ To create your own design system:
 1. Open the **Theme Settings > Design System**.
 2. Click **Create Design Library**.
 3. Enter the **Design Library Project Name**.
-4. Now you can configure the [Colors](#), [Typography & Icons](#), [App Assets](#), [NavBar & AppBar](#), and [Theme Settings](#).
+4. Now you can configure the Colors, Typography & Icons, App Assets, NavBar & AppBar, and Theme Settings.
 5. To see how the app will look for the new design system, you can open it in preview mode (click the eye icon at the top right side).
 
 <div style={{
@@ -337,5 +337,5 @@ You can modify its color, background color, and stroke width. In the 'Preview' s
 
 <details>
 <summary>How do I create a new design system if I don't see a button for it?</summary>
-<p>Currently, creating a design system requires you to have a team set up, even if you're working solo. You can quickly create a team by following the instructions outlined [here](#). We are working on a solution that will allow for the creation of design systems without needing a team setup. Stay tuned for updates!</p>
+<p>Currently, creating a design system requires you to have a team set up, even if you're working solo. You can quickly create a team by following the instructions outlined [here](../../accounts-billing/subscriptions/flutterflow-for-teams.md). We are working on a solution that will allow for the creation of design systems without needing a team setup. Stay tuned for updates!</p>
 </details>

docs/ff-concepts/layout/building-layout.md

@@ -9,7 +9,7 @@ keywords: [FlutterFlow, Building Layout, Concepts]
 
 # Building Layout
 
-In FlutterFlow, you build a page layout using Widgets. **Widgets**, such as [Text](../../resources/ui/widgets/built-in-widgets/text.md), [Buttons](../../resources/ui/widgets/built-in-widgets/button.md), [Images](#), and [Icons](../../resources/ui/widgets/built-in-widgets/icons.md), are visible on the screen. Others, like [Containers](../../resources/ui/widgets/built-in-widgets/container.md), [Rows](#), [Columns](#), and [Stacks](#), are not directly visible but help arrange and position the visible elements on the page.
+In FlutterFlow, you build a page layout using Widgets. **Widgets**, such as [Text](../../resources/ui/widgets/built-in-widgets/text.md), [Buttons](../../resources/ui/widgets/built-in-widgets/button.md), [Images](../../resources/ui/widgets/built-in-widgets/image.md), and [Icons](../../resources/ui/widgets/built-in-widgets/icons.md), are visible on the screen. Others, like [Containers](../../resources/ui/widgets/built-in-widgets/container.md), Rows, Columns, and Stacks, are not directly visible but help arrange and position the visible elements on the page.
 
 These widgets are categorized into four main types: [Layout Elements](/tags/layout-elements), [Base Elements](/tags/base-elements), 
 [Page Elements](/tags/page-elements), and [Form Elements](/tags/form-elements). To build a page, you combine different widgets from these categories to get the desired look and feel of your app.

docs/ff-concepts/layout/responsive-widgets/wrap-widget.md

@@ -9,13 +9,13 @@ keywords: [FlutterFlow, Wrap, Concepts]
 
 # Wrap
 
-The Wrap widget is similar to [Row](#) and [Column](#) as it shows its children one after another. If there is not enough space to show your item, the Wrap widget will automatically place it in a new row or column.
+The Wrap widget is similar to Row and Column as it shows its children one after another. If there is not enough space to show your item, the Wrap widget will automatically place it in a new row or column.
 
 ## Adding Wrap widget
 
 Here's an example of how you can use a Wrap widget in your project:
 
-1. First, drag the [**Container**](#) widget from the **Layout Elements** tab (in the Widget Panel) or add it directly from the widget tree and set its **width** to **infinity** and **height** to **200**.
+1. First, drag the [**Container**](../../../resources/ui/widgets/built-in-widgets/container.md) widget from the **Layout Elements** tab (in the Widget Panel) or add it directly from the widget tree and set its **width** to **infinity** and **height** to **200**.
 
 2. Add the **Wrap** widget from the **Layout Elements** tab inside the Container.
 3. Add the **Button** widget inside the Wrap widget.

docs/ff-concepts/navigation-routing/deep-dynamic-linking.md

@@ -180,7 +180,7 @@ respective store to install the app. After the app is installed, users can be ta
 intended app page.
 
 For the dynamic link to work, you need to enable
-the [deep link](/advanced-functionality/deep-and-dynamic-linking#deep-link). You can think of a
+the [deep link](#adding-deep-link). You can think of a
 dynamic link as the additional benefit of the deep link.
 
 :::note

docs/ff-concepts/navigation-routing/special-page-navigation/overview.md

@@ -11,5 +11,5 @@ keywords: [Special Page Navigations, FlutterFlow, Navigation]
 FlutterFlow provides special navigation widgets like Tab Bar, NavBar, and PageView for advanced navigation scenarios:
 
 - **Tab Bar**: Used for navigating between different sections of your app with tabs, ideal for organizing content into categories. Learn more [here](tabbar).
-- **NavBar**: A bottom navigation bar that helps users switch between major sections of your app seamlessly. Learn more [here](#).
-- **PageView**: Allows for swipeable pages, perfect for creating onboarding screens or multi-step forms. Learn more [here](#).
+- **NavBar**: A bottom navigation bar that helps users switch between major sections of your app seamlessly. Learn more [here](../../../resources/ui/pages/page-elements.md#nav-bar).
+- **PageView**: Allows for swipeable pages, perfect for creating onboarding screens or multi-step forms. Learn more [here](../../navigation-routing/special-page-navigation/pageview-widget.md).

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

@@ -22,7 +22,7 @@ To add the PageView widget to your app:
 2. By default, it adds three pages and shows the first one in the canvas. In the widget tree, it is represented as **PageView Page**. To see another page in the canvas, move to the **Properties Panel >** set the **Active Page** to the page you want to see.
 3. To add a new page, move to the **Properties Panel > Active Page >** click **+ Add Page**.
 4. To delete any page, select the **PageView Page** (which you want to delete) from the widget tree or the canvas area and press the **Delete** key on the keyboard.
-5. By default, PageView Page contains an [Image](#) widget; however, you can customize it as per your requirement. For example, if you want to use the PageView widget to create an onboarding experience, you could wrap (`⌘` + B) the default image widget inside the [Stack](#) widget and then add some more widgets.
+5. By default, PageView Page contains an [Image](../../../resources/ui/widgets/built-in-widgets/image.md) widget; however, you can customize it as per your requirement. For example, if you want to use the PageView widget to create an onboarding experience, you could wrap (`⌘` + B) the default image widget inside the Stack widget and then add some more widgets.
 
 <div style={{
     position: 'relative',
@@ -55,7 +55,7 @@ The PageView widget is an incredibly versatile widget that can be utilized in a
 
 In such situations, you might consider adding an infinite scroll on this widget, which automatically loads the new pages as you swipe.
 
-We have already covered how to [add infinite scroll on ListView](#) widget, which will give you an overall idea of how to add infinite scroll on the PageView widget as well.
+We have already covered how to [add infinite scroll on ListView](../../../resources/ui/widgets/built-in-widgets/list-grid.md#adding-infinite-scroll) widget, which will give you an overall idea of how to add infinite scroll on the PageView widget as well.
 
 ## Customizing
 
@@ -165,7 +165,7 @@ To trigger action on swipe:
 3. You will notice that the **Type of Action** (aka callback) is already set to **On Page Swipe**. That means actions added under this will be called whenever the page is swiped.
 4. Now, you can add any action here.
 
-Here is an example showing the [snackbar](#) message whenever the page is swiped to the second page.
+Here is an example showing the [snackbar](../../../resources/ui/pages/page-elements.md#snackbar) message whenever the page is swiped to the second page.
 
 <div style={{
     position: 'relative',
@@ -280,13 +280,89 @@ The width of the active dot is calculated by multiplying the value of the **Dot
 
 If you use the PageView widget to create the onboarding experience, you may probably want to allow users to scroll the pages on button press (e.g., next, previous, and skip buttons) in addition to the swipe to scroll. You can do so by adding the PageView and then defining the Control Page View action on the Tap of a Button widget.
 
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/WOqGJeiT2HU8lMq47soV?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
 Here's an example of scrolling PageView on button press:
 
 1. First, [add the PageView](#adding-pageview-widget) widget.
 2. [Customize the PageView](#customizing) widget and add buttons to go to the previous and next pages.
-3. Now select any button and define the [Control Page View action](#).
+3. Now select any button and define the [Control Page View action](#control-page-view-action).
 
----
+
+## Control Page View [Action]
+
+By using this action, you can gain more control over the scrolling behavior of the PageView widget. For instance, you can enable your users to move to the next or previous page with a single tap of a button or to quickly jump to a specific page index based on their preferences.
+
+
+### Types of page view action
+
+These are the types of actions you can add to the pageview.
+
+- **Previous**: Scroll to the previous page in the pageview.
+- **Next**: Scroll to the next page in the pageview.
+- **First**: Scroll to the first page in the pageview.
+- **Last**: Scroll to the last page in the pageview.
+- **Jump to**: Scroll to a specific page in the pageview. Please note that the page index starts from 0. So, if you want to jump to page 1, you should enter 0. If you want to jump to page 2, you should enter 1, and so on.
+
+### Adding Control Page View action
+
+Follow the steps below to add this action to any widget.
+
+1. Select the **Widget** (e.g., Container, Button, etc.) on which you want to add the action.
+2. Select **Actions** from the properties panel (the right menu), If it's the first action, click **+ Add Action** button. Otherwise, click the "**+**" button below the previous action tile (inside *Action Flow Editor*) and select **Add Action**.
+3. Search and select the **Control Page View** (under *Widget/UI Interactions*) action.
+4. Set the **Page View to Control** to the **name** of the page view added to your page.
+5. Select the [**Page View Action Type**](#types-of-page-view-action).
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/io0ECo1Q53Z2l50rgDJV?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
 
 ## Video guide