Complete P0 Todo items

docs/accounts-billing/account-management.md

@@ -48,7 +48,7 @@ To check if you have verified your account:
 2. Navigate to the Profile Information section. 
 3. If you have a green checkmark next to your email, your account is verified.
 
-![img_1.png](imgs%2Fimg_1.png)
+![img_1.png](imgs/img_1.png)
 
 ### I Didn't Get The Email To Verify My Account / How Do I Resend The Verification Email?
 If you did not receive a verification email, please follow these steps:
@@ -60,7 +60,7 @@ If you did not receive a verification email, please follow these steps:
 
 You should receive a new confirmation email. If you do not receive the verification email, please contact us at [email protected].
 
-![img.png](imgs%2Fimg.png)
+![img.png](imgs/img.png)
 
 ## Delete Account
 ### How Do I Delete My Account
@@ -90,4 +90,4 @@ To change your login email in FlutterFlow:
 
 Now, you are ready to log in with your new email address and password.
 
-![img_2.png](imgs%2Fimg_2.png)
+![img_2.png](imgs/img_2.png)

docs/accounts-billing/manage-custom-domains.md

@@ -16,7 +16,7 @@ To purchase domains:
 Note that purchasing a domain is not possible during the trial period. If you're interested in obtaining a domain, please reach out to our support team for further assistance.
 :::
 
-![img_15.png](imgs%2Fimg_15.png)
+![img_15.png](imgs/img_15.png)
 
 ### How do I remove custom domains?
 
@@ -27,4 +27,4 @@ To remove the custom domain:
 3. Click **Remove Domains** to remove the existing custom domain.
 
 
-![img_16.png](imgs%2Fimg_16.png)
+![img_16.png](imgs/img_16.png)

docs/accounts-billing/payments-billing.md

@@ -30,7 +30,7 @@ You can use these steps to update your payment method on an open invoice (where
 3. Scroll to **Invoice History**
 4. Locate the invoice that failed (should be at the top) and click the icon
 
-![img_17.png](imgs%2Fimg_17.png)
+![img_17.png](imgs/img_17.png)
 
 5. Enter your updated payment information
 

docs/accounts-billing/referral-program.md

@@ -21,7 +21,7 @@ Your personal referral code is listed on your [My Account Page](https://app.flut
 1. Navigate to the [My Account Page](https://app.flutterflow.io/account) and scroll down to the **Referrals** section.
 2. To copy your referral code, press the copy icon.
 
-![img_19.png](imgs%2Fimg_19.png)
+![img_19.png](imgs/img_19.png)
 
 ### How To Track How Many People Have Signed Up Using Your Referral Code
 
@@ -30,7 +30,7 @@ You can track your referrals in the **Referrals** section on the [My Account Pag
 * **Signed Up:** How many people have signed up for FluterFlow using your referral link.
 * **Subscribed:** How many people have subscribed to FlutterFlow Pro or Standard using your referral link.
 
-![img_20.png](imgs%2Fimg_20.png)
+![img_20.png](imgs/img_20.png)
 
 ### I forgot to sign-up using the referral link, can I add this after creating account?
 

docs/accounts-billing/subscriptions/flutterflow-for-teams.md

@@ -22,13 +22,13 @@ To change your account to a Teams Plan, please follow these steps:
 
 <p></p>
 
-![img_4.png](..%2Fimgs%2Fimg_4.png)
+![img_4.png](../imgs/img_4.png)
 
 <p></p>
 
 3. Next, enter your organization name (e.g. FlutterFlow) and your website/email domain (e.g. flutterflow.io) and select **Create Team**.
 
-![img_5.png](..%2Fimgs%2Fimg_5.png)
+![img_5.png](../imgs/img_5.png)
 
 ## How do I add users to my *Teams* plan?
 
@@ -40,20 +40,20 @@ A seat grants one user the ability to use Flutterflow. You will need to purchase
 
 1. From the **My Organization** tab, select **Subscribe**.
 
-![img_6.png](..%2Fimgs%2Fimg_6.png)
+![img_6.png](../imgs/img_6.png)
 
 2. A popup will appear, select the number of seats (subscriptions) and Billing Cycle Additional users can be added to your team at any time. **You can select from a monthly or annual plan.**
 
 
-![img_7.png](..%2Fimgs%2Fimg_7.png)
+![img_7.png](../imgs/img_7.png)
 
 3. A checkout page will appear for you to complete the purchase. **Please note: this can take a few seconds to load.** If you want to add more seats at a later time, you can do so by selecting the Add Seats button.
 
-![img_8.png](..%2Fimgs%2Fimg_8.png)
+![img_8.png](../imgs/img_8.png)
 
 :::tip
 You can see how many seats you have used here
-![img_9.png](..%2Fimgs%2Fimg_9.png)
+![img_9.png](../imgs/img_9.png)
 
 :::
 
@@ -67,7 +67,7 @@ If you add an existing Flutterflow user to your Teams plan, they will need to ma
 1. After you've purchased your seats, this will be reflected in the **Seats** section under **My Organization** (example below).
 2. To invite a new user, select the **Invite User(s)** button.
 
-![img_10.png](..%2Fimgs%2Fimg_10.png)
+![img_10.png](../imgs/img_10.png)
 
 3. A popup will appear, type the email of the user you would like to add.
 4. If they are not an existing user of FlutterFlow, they will be sent an invitation to join.
@@ -77,7 +77,7 @@ If you add an existing Flutterflow user to your Teams plan, they will need to ma
 * You must verify your email before inviting users.
 :::
 
-![img_11.png](..%2Fimgs%2Fimg_11.png)
+![img_11.png](../imgs/img_11.png)
 
 
 ## Delete users from Teams plan
@@ -86,13 +86,13 @@ To remove a user from the teams, click on the **red cancel button** and select *
 
 
 <figure>
-   ![img_12.png](..%2Fimgs%2Fimg_12.png)
+   ![img_12.png](../imgs/img_12.png)
   <figcaption class="centered-caption">Delete users from Teams Plan</figcaption>
 </figure>
 
 
 <figure class="centered-caption">
-    ![img_13.png](..%2Fimgs%2Fimg_13.png)
+    ![img_13.png](../imgs/img_13.png)
   <figcaption class="centered-caption">Confirmation Popup</figcaption>
 </figure>
 

docs/accounts-billing/subscriptions/more-subscription-faqs.md

@@ -7,7 +7,7 @@
 You can view the next billing cycle date in the "My Plan" section of the [Flutterflow Account Page](https://app.flutterflow.io/account).
 
 <figure>
-    ![img_14.png](..%2Fimgs%2Fimg_14.png)
+    ![img_14.png](../imgs/img_14.png)
   <figcaption class="centered-caption">The next billing cycle date for this account is August 31, 2021</figcaption>
 </figure>
 

docs/accounts-billing/subscriptions/subscriptions.md

@@ -74,5 +74,5 @@ When you cancel a paid plan, your account will be converted to a Free account.
 
 You can confirm your account has been canceled from the My Plan section of the **[Account Page](https://app.flutterflow.io/account)**. Your account will now say **ends at** vs. **renews at.**
 
-![img_3.png](..%2Fimgs%2Fimg_3.png)
+![img_3.png](../imgs/img_3.png)
 

docs/ff-concepts/state-management/widget-state.md

@@ -16,7 +16,7 @@ Additionally, **Widget Focus State** refers to the state that indicates whether
 - **Automatic Management:** FlutterFlow handles the state, so developers do not need to write explicit state management code.
 - **Reactive Updates:** Changes in the state automatically update the widget's display. 
 
-![widget-state.png](imgs%2Fwidget-state.png)
+![widget-state.png](imgs/widget-state.png)
 
 ## Managing Widget States
 
@@ -31,7 +31,7 @@ Some examples of widget states exposed by FlutterFlow:
 
 In the following example, we find widget state and widget focus state of a TextField being exposed by FlutterFlow on the page it was created and available as an option in the variable menu.
 
-![using-widget-state.png](imgs%2Fusing-widget-state.png)
+![using-widget-state.png](imgs/using-widget-state.png)
 
 :::tip[Scope]
 **Widget states** are mostly available for access on the page or component where they were created. However, when you add a component to a page, the widget states exposed in the component will also be available in its parent page.
@@ -46,7 +46,7 @@ com/embed/4dca7e59da1643629dcbb7cd2065580d?sid=3f2cd864-7d72-41ee-adc2-bb96e3ddc
 
 FlutterFlow allows you to update the state of these widgets through actions exposed by the platform. For example, if you want to clear a TextField when the Send button is clicked on a form-like page, then in the Actions Flow, you can find relevant actions such as **Clear TextField**. This enables dynamic interaction and state management directly within the visual development environment.
 
-![managing-widget-state.png](imgs%2Fmanaging-widget-state.png)
+![managing-widget-state.png](imgs/managing-widget-state.png)
 
 
 ## Action Triggers for Form Widgets
@@ -68,7 +68,7 @@ For example, automatically moving to the next step in a process after a complete
 
 These triggers allow developers to create interactive and responsive applications by defining specific actions that occur in response to user interactions with form widgets.
 
-![action-triggers-widget-state.png](imgs%2Faction-triggers-widget-state.png)
+![action-triggers-widget-state.png](imgs/action-triggers-widget-state.png)
 
 
 

docs/ff-integrations/authentication/firebase-auth/google-login.md

@@ -83,7 +83,7 @@ To let users log out of your app, you can use the [**Logout**](../logout-action.
       your [Project Credentials](https://console.cloud.google.com/apis/credentials?project=_) page.
 
     - Ensure you are on the correct project. In our case, we are using the
-      EcommerceFlow project, it will be different for you.
+      [EcommerceFlow demo project](https://bit.ly/ff-docs-demo-v1), it will be different for you.
 
    ![credential-page.png](../imgs/credential-page.png)
 

docs/index.md

@@ -26,7 +26,7 @@ import BranchIcon from '@site/static/icons/branch_New.png';
 FlutterFlow is a visual development environment that lets you build mobile, web, and desktop apps incredibly fast, without sacrificing quality or features. 
 
 <InfoCards>
-    <InfoCard title="Before You Begin" description="Ensure you meet system requirements and grasp technical concepts for smooth building in FlutterFlow." pagePath="/intro/before-you-begin/setting-up-flutterflow" />
+    <InfoCard title="Before You Begin" description="Ensure you meet system requirements and grasp technical concepts for smooth building in FlutterFlow." pagePath="/before-you-begin/setup-flutterflow" />
     <InfoCard   title="Explore FlutterFlow" description="Dive into the building blocks of the platform: projects, widgets, functions and more." pagePath="/resources"/>
     <InfoCard   title="Start Building" description="Jump right into a quick start on how to build a simple app." pagePath="/quickstart"/>
     <InfoCard title="Marketplace Guides" description="Comprehensive guides on creating, buying, and submitting items on the Marketplace." pagePath="/marketplace" />

docs/marketplace/adding-purchasing-item.md

@@ -19,7 +19,7 @@ Add new functionality to your app in seconds! The FlutterFlow Marketplace featur
 
 To add a Marketplace Item to your project, head to your FlutterFlow dashboard and select **Marketplace** or head over to [marketplace.flutterflow.io](https://marketplace.flutterflow.io/). In Marketplace, click on any item to learn more about it. 
 
-![img.png](imgs%2Fimg.png)
+![img.png](imgs/img.png)
 
 :::tip
 You can directly search for an item or filter by item type at the top (e.g., Template Apps).

docs/misc/additional-resources.md

@@ -12,13 +12,13 @@ To join the FlutterFlow community,
 2. Next Navigate to Resources tab on the left side
 3. Click on "FlutterFlow Community". This will automatically log you in to the community.
 
-![img_5.png](imgs%2Fimg_5.png)
+![img_5.png](imgs/img_5.png)
 
 Alternatively,
 
 If you are already in your project view, you can also find the **Help Menu** and click on **Community Forum**.
 
-![img_6.png](imgs%2Fimg_6.png)
+![img_6.png](imgs/img_6.png)
 
 ### YouTube
 

docs/misc/flutterflow-experts.md

@@ -18,28 +18,28 @@ To connect with an expert:
 
 1. From the [Dashboard](https://experts.flutterflow.io/dashboard) or [My Proposal](https://experts.flutterflow.io/proposals) page, click on the **+ Create Proposal** button.
 
-![img.png](imgs%2Fimg.png)
+![img.png](imgs/img.png)
 
 2. Click **Continue,** and you will be asked to enter details about your project, including key features, preferred tools or platforms, project size, and budget.
 
 3. Once completed, you can review the proposal details and **Go to Expert Selection**.
 
 <p></p>
 
-![img_1.png](imgs%2Fimg_1.png)
+![img_1.png](imgs/img_1.png)
 
 <p></p>
 
 4. To invite experts to view your proposal, click on the **Send Invite** button, write a personalized message, and send the invite. You can send up to three invites at a time.
 <p></p>
 
-![img_2.png](imgs%2Fimg_2.png)
+![img_2.png](imgs/img_2.png)
 <p></p>
 
 5. Alternatively, you can browse through expert profiles on the [experts page](https://experts.flutterflow.io/experts), see their details, and click the **Hire** button to send them a personalized project proposal.
 
 <p></p>
-![img_3.png](imgs%2Fimg_3.png)
+![img_3.png](imgs/img_3.png)
 
 :::warning[]
 Please do not send the proposal to many experts at the same time.
@@ -49,7 +49,7 @@ Please do not send the proposal to many experts at the same time.
 
 As a FlutterFlow expert, you'll have the opportunity to assist users in implementing complex features, troubleshooting issues, and even designing and building entire apps. To apply, navigate to our [Dashboard](https://experts.flutterflow.io/dashboard) and click the **Apply Now** button.
 
-![img_4.png](imgs%2Fimg_4.png)
+![img_4.png](imgs/img_4.png)
 
 ### FAQs
 

docs/resources/control-flow/concepts.md

@@ -34,25 +34,13 @@ The primary conditional statements are `if`, `if-else`, and `else`.
 The if statement evaluates a condition and executes a block of code if the condition is true.
 
 
-<!---TODO show diagram here --->
-
-```
-if (userIsLoggedIn) {
-    showWelcomeMessage();
-}
-```
+![if-condition.png](functions/img/if-condition.png)
 
 - **`if-else` Statement:**
 
 The if-else statement provides an alternative block of code to execute if the condition is false.
 
-```
-if (userIsLoggedIn) {
-    showWelcomeMessage();
-} else {
-    promptLogin();
-}
-```
+![if-else-condition.png](functions/img/if-else-condition.png)
 
 Here, if `userIsLoggedIn` is true, the app will show a welcome message. Otherwise, it will prompt the user to log in.
 
@@ -61,19 +49,11 @@ Here, if `userIsLoggedIn` is true, the app will show a welcome message. Otherwis
 - **`else if` Statement:**
 
 The `else if` statement can be used to check multiple conditions sequentially.
-```
-if (userIsLoggedIn) {
-    showWelcomeMessage();
-} else if (userIsGuest) {
-    showGuestMessage();
-} else {
-    promptLogin();
-}
-```
+
+![if-elseif-condition.png](functions/img/if-elseif-condition.png)
 
 This example demonstrates multiple conditions. If `userIsLoggedIn` is true, it shows a welcome message. If not, it checks if `userIsGuest` is true and shows a guest message. If neither condition is met, it prompts the user to log in.
 
-<!--- TODO Diagram for Conditionals --->
 
 ### Implementing Conditionals
 In FlutterFlow, you can implement conditional logic in two primary ways: 

docs/resources/control-flow/functions/conditional-logic.md

@@ -42,7 +42,7 @@ This flow lets you combine multiple single conditions using logical AND or OR op
 ### Conditional Value (If/Then/Else)
 Conditional Value allows you to set a dynamic variable based on different conditions. For each condition, you can specify a value that will be assigned if the condition is true. A default value can be provided if none of the conditions are met.
 
-<!--- TODO Arcade --->
+See the example **[below](#setting-widget-properties-with-conditional-logic).**
 
 ## Setting Widget Properties with Conditional Logic
 

docs/resources/control-flow/functions/utility-functions.md

@@ -30,7 +30,7 @@ FlutterFlow has the following built-in functions:
 ## Combine Text
 
 Oftentimes, you will encounter scenarios where you need to show two variables in a single String or
-Text widget. For example, in our e-commerce demo app, we have a price object in the following
+Text widget. For example, in our [Ecommerce Demo](https://bit.ly/ff-docs-demo-v1) app, we have a price object in the following
 format:
 
 ```json
@@ -52,13 +52,39 @@ to a widget that only accepts `String` data types.
 
 Here is a quick demo:
 
-<!--- TODO Arcade --->
+<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/v6bfWg0Nfpd1K5RjrTNx?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>
 
 :::warning[Combine Text vs RichText widget]
 The **Combine Text** built-in function only allows you to combine multiple values (dynamic or
 static)
 together, with the same text style applied to all of them. If you need to combine multiple String
-values with different text styles for each, consider using the **RichText** widget.
+values with different text styles for each, consider using the **[RichText](../../../resources/ui/widgets/built-in-widgets/text.md#richtext-widget)** widget.
 :::
 
 ## Code Expressions

docs/resources/data-representation/_category_.json

@@ -1,4 +1,4 @@
 {
     "label": "Data Representation",
-    "position": 1
+    "position": 2
   }