Revamp docs design! (#452)

PoojaB26 · pinkeshmars · web-flow · commit 10845190bbcb · 2025-08-13T18:55:21.000+05:30
* update card ui for info cards / feature cards

* draft changes on sidebar + home page

* add more content to home page + UI fixes

* remove unnecessary

* reduce img size

* add advanced doc links

* move automated tests to testing app folder

* update content for home page

* update tos links

* move refunds to subscriptions

* Apply suggestions from code review

Co-authored-by: pinkeshmars &lt;71133091+pinkeshmars@users.noreply.github.com&gt;

* update color for selected sidebar item

* update card border color

---------

Co-authored-by: pinkeshmars &lt;71133091+pinkeshmars@users.noreply.github.com&gt;
diff --git a/docs/accounts-billing/privacy-terms-of-service.md b/docs/accounts-billing/privacy-terms-of-service.md
@@ -12,7 +12,7 @@ To request deletion of your personal data, please reach out to our support team
 To unsubscribe from FlutterFlow emails, please click the “Unsubscribe” link in the footer of our emails.
 
 ### Where can I view your Privacy Policy?
-You can review the most recent version of our Privacy Policy here.
+You can review the most recent version of our Privacy Policy [on the website](https://www.flutterflow.io/privacy).
 
 ### Where can I view your Terms of Service (ToS)?
-You can review the most recent version of our Terms of Service here.
+You can review the most recent version of our Terms of Service [linked on the website](https://www.flutterflow.io/tos).
diff --git a/docs/accounts-billing/subscriptions/more-subscription-faqs.md b/docs/accounts-billing/subscriptions/more-subscription-faqs.md
@@ -1,4 +1,7 @@
-
+---
+toc_max_heading_level: 5
+sidebar_position: 2
+---
 
 # Other Subscription Questions
 
diff --git a/docs/accounts-billing/subscriptions/refund.md b/docs/accounts-billing/subscriptions/refund.md
@@ -8,6 +8,6 @@ sidebar_position: 4
 
 
 # Refunds
-If you're not happy with your FlutterFlow subscription, you can [cancel at any time](subscriptions/subscriptions.md#cancel-my-plan).
+If you're not happy with your FlutterFlow subscription, you can [cancel at any time](./subscriptions.md#cancel-my-plan).
 
 However, there are no refunds for cancellation. In the event that the Company suspends or terminates your Account or these Terms, you understand and agree that you shall receive no refund, whether for any unused time on a subscription, any license or subscription fees for any portion of the Service, any content or data associated with your User Account, or for anything else.
diff --git a/docs/accounts-billing/subscriptions/subscriptions.md b/docs/accounts-billing/subscriptions/subscriptions.md
@@ -3,7 +3,7 @@ slug: subscriptions
 title: Subscriptions
 tags: []
 toc_max_heading_level: 5
-sidebar_position: 3
+sidebar_position: 0
 ---
 
 
diff --git a/docs/index.md b/docs/index.md
@@ -4,7 +4,7 @@ custom_edit_url: null
 showLastUpdateTime: false
 hide_title: true
 slug: /
-hide_table_of_contents: true
+hide_table_of_contents: false
 ---
 
 import InfoCard from '@site/src/components/InfoCard';
@@ -20,25 +20,140 @@ import BranchIcon from '@site/static/icons/branch_New.png';
 
 
 
-<FlutterFlowLogo></FlutterFlowLogo>
 
-# Visual Development Environment
-FlutterFlow is a visual development environment that lets you build mobile, web, and desktop apps incredibly fast, without sacrificing quality or features. 
+# Getting Started with FlutterFlow
+FlutterFlow is a visual development environment that lets you build mobile, web, and desktop apps incredibly fast, without sacrificing on app quality or features. 
+
 
-<div class="video-container small"><iframe src="https://www.youtube.com/embed/gYOrgBrX4jM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
 
 <InfoCards>
-    <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="What's New in FlutterFlow" description="Updates, features, and the latest enhancements in FlutterFlow." pagePath="https://community.flutterflow.io/c/whats-new-in-flutterflow"/>
-    <InfoCard   title="Community Forum" description="Join discussions, ask questions, and share insights with the FlutterFlow community." pagePath="https://community.flutterflow.io"/>
-    <InfoCard title="Submit Bug Report" description="Encountered a bug in FlutterFlow? Help us improve by submitting a bug report." pagePath="/misc/submit-bug-report" />
+    <InfoCard 
+      icon="🚀" 
+      title="Build Your First App" 
+      description="Get started with FlutterFlow by building your first FlutterFlow app step-by-step." 
+      pagePath="/quickstart"
+      isLarge={true}
+    />
+     <InfoCard 
+       icon="🗺️" 
+       title="App Development Roadmap" 
+       description="Learn the three essential layers of app development: UI Layer, Logic Layer, and Data Layer for building FlutterFlow applications." 
+       pagePath="/roadmap"
+       isLarge={true}
+     />
 
 </InfoCards>
 
+<p></p>
+
+
 <p></p>
 
 ### FlutterFlow Tour
 
-<div class="video-container"><iframe src="https://www.youtube.com/embed/GpXjU-ieAKU?si=moIEUUGry24CdSJN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
+<InfoCards>
+
+ <InfoCard 
+      icon="🏗️" 
+      title="FlutterFlow Builder" 
+      description="Explore the FlutterFlow Builder interface, learn about the dashboard, widgets panel, and how to navigate the visual development environment." 
+      pagePath="/flutterflow-ui/dashboard"
+      isLarge={true}
+    />
+
+ <InfoCard 
+      icon="🔍" 
+      title="Building Blocks" 
+      description="Dive into the building blocks of the platform: projects, widgets, functions and more." 
+      pagePath="/resources"
+      isLarge = {true}
+    />
+
+
+</InfoCards>
+
+<p></p>
+
+<div class="video-container"><iframe src="https://www.youtube.com/embed/GpXjU-ieAKU?si=moIEUUGry24CdSJN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
+
+
+
+
+
+
+### Best Practices
+
+Essential guidelines and recommendations for building robust FlutterFlow applications. Discover security best practices and performance optimization techniques to ensure your apps are production-ready, scalable, and maintainable.
+
+<InfoCards>
+  <InfoCard 
+    icon="🔐" 
+    title="Secure your API Key" 
+    description="Learn best practices for keeping your API keys created in Google Cloud Console safe and secure in production applications." 
+    pagePath="/best-practices/secure-api-keys"
+    isLarge={true}
+  />
+  <InfoCard 
+    icon="🧪" 
+    title="Test Your Apps Locally" 
+    description="Set up Local Run to debug and validate your app in physical devices." 
+    pagePath="/testing/local-run"
+  />
+  <InfoCard
+  icon="📝"
+  title="Naming Variables"
+  description="Learn FlutterFlow naming conventions and best practices for variables, functions, and components to maintain clean, readable code."
+  pagePath="/resources/style-guide"
+  />
+</InfoCards>
+
+### Scaling FlutterFlow Apps
+
+Learn advanced techniques and strategies to scale your FlutterFlow applications from simple prototypes to enterprise-grade solutions with native integrations and modular architecture.
+
+<InfoCards>
+  <InfoCard 
+    icon="🔌" 
+    title="Integrating Native Plugins in FlutterFlow" 
+    description="Extend FlutterFlow's capabilities by integrating native platform plugins and custom functionality using method channels for advanced app development." 
+    pagePath="/concepts/advanced/method-channels"
+    isLarge={true}
+  />
+  <InfoCard 
+    icon="🏗️" 
+    title="Building Super Apps using Libraries" 
+    description="Discover how to create scalable, modular applications using FlutterFlow libraries to build complex, maintainable super apps with independent feature libraries." 
+    pagePath="https://blog.flutterflow.io/scaling-super-apps-modular-architecture-with-flutterflow-libraries/"
+  />
+  
+</InfoCards>
+
+### Additional Tools
+
+Discover additional tools and references to enhance your FlutterFlow development experience: 
+<InfoCards>
+    <InfoCard 
+      icon="⚙️" 
+      title="System Requirements" 
+      description="Ensure you meet system requirements required to smoothly run FlutterFlow application on the web & desktop." 
+      pagePath="/before-you-begin/setup-flutterflow" 
+    />
+    <InfoCard 
+      icon="🆕" 
+      title="What's New in FlutterFlow" 
+      description="Follow latest updates, features, and the latest enhancements in FlutterFlow." 
+      pagePath="https://community.flutterflow.io/c/whats-new-in-flutterflow"
+    />
+
+</InfoCards>
+
+## Still Have Problems?
+
+If you're still experiencing issues or need additional help, here are some resources to get you back on track:
+
+- **[Submit Bug Report](/misc/submit-bug-report)** - Report bugs or issues you've encountered
+- **[Community Forum](https://community.flutterflow.io)** - Ask questions and get help from the community
+- **[Reddit Community](https://www.reddit.com/r/FlutterFlow/)** - Join discussions on Reddit
+- **[Documentation Bug](https://github.com/FlutterFlow/flutterflow-documentation/issues)** - Report documentation issues
+- **[Contribute to Documentation](https://github.com/FlutterFlow/flutterflow-documentation?tab=readme-ov-file#how-to-contribute)** - Contribution guidelines for contributing to the FlutterFlow documentation site. 
+- **[FlutterFlow Support](mailto:support@flutterflow.io)** - Get direct support from the FlutterFlow support team.
diff --git a/docs/marketplace/creators-hub/creators-hub.md b/docs/marketplace/creators-hub/creators-hub.md
@@ -10,11 +10,11 @@ keywords: [FlutterFlow, MarketPlace, Creators Hub]
 # Creators Hub
 Welcome to the FlutterFlow Marketplace Creators' Hub! This section is designed to provide you with all the necessary information to contribute effectively and responsibly to Marketplace. Whether you are submitting your first item or looking to understand the legal nuances, you'll find detailed guidelines and helpful tips here.
 
-### **Submitting an Item for Review**
+### Submitting an Item for Review
 - Understand the [criteria](submission-criteria.md) we apply to items submitted to Marketplace.
 - Learn how to prepare and [submit](submit-item-for-review.md) your items to the Marketplace with our step-by-step guide.
 
-### **Legal Guidelines for Creators**
+### Legal Guidelines for Creators
 
 A user-friendly [guide](legal-guidelines-for-creators.md) outlining what content can and cannot be published on our Marketplace.
 
diff --git a/docs/marketplace/creators-hub/submission-criteria.md b/docs/marketplace/creators-hub/submission-criteria.md
@@ -396,7 +396,7 @@ Stay tuned for an upcoming "style guide" we're publishing that goes into deeper
 - **Criteria:** Projects should include automated tests that verify core functionality and key user workflows. While not required for approval, this is strongly recommended for libraries and will positively impact visibility.
 - **Why It Matters:** Automated tests help ensure reliability, catch regressions, and demonstrate your commitment to quality. They also improve your item's visibility.
 - **What To Do:**
-    - **Add Integration Tests:** Use FlutterFlow's [automated testing](../../testing-deployment-publishing/testing/automated-tests.md) features to verify your item's core functionality.
+    - **Add Integration Tests:** Use FlutterFlow's [automated testing](../../testing-deployment-publishing/running-your-app/automated-tests.md) features to verify your item's core functionality.
     - **Test Key Workflows:** Focus on testing critical user paths and features that users will rely on.
     - **For Libraries:** Since libraries are often used as building blocks in larger applications, thorough testing is particularly important to:
         - Verify that Library Values are properly implemented
diff --git a/docs/resources/ui/widgets/widget-commonalities.md b/docs/resources/ui/widgets/widget-commonalities.md
@@ -172,7 +172,7 @@ Values beyond this range will push the widget outside the visible screen area.
 
 ## Add Testing Value Key
 
-A **Value Key** is used to uniquely identify widgets during [**Automated Testing**](../../../testing-deployment-publishing/testing/automated-tests.md) in FlutterFlow. For example, on a Create Account page, you might use descriptive keys like `signupFirstNameField`, `signupEmailField`, `signupPasswordField`, and `signupSubmitButton`. This helps testing tools reliably locate and interact with the correct widgets. For more details, refer to the [complete guide here](../../../testing-deployment-publishing/testing/automated-tests.md).
+A **Value Key** is used to uniquely identify widgets during [**Automated Testing**](../../../testing-deployment-publishing/running-your-app/automated-tests.md) in FlutterFlow. For example, on a Create Account page, you might use descriptive keys like `signupFirstNameField`, `signupEmailField`, `signupPasswordField`, and `signupSubmitButton`. This helps testing tools reliably locate and interact with the correct widgets. For more details, refer to the [complete guide here](../../../testing-deployment-publishing/running-your-app/automated-tests.md).
 
 ![test-value-keys.avif](imgs/test-value-keys.avif)
 
diff --git a/docs/testing-deployment-publishing/publishing/pre-checks-publishing.md b/docs/testing-deployment-publishing/publishing/pre-checks-publishing.md
@@ -13,7 +13,7 @@ This page outlines the important steps and checks to be made before publishing y
 
 Here’s a comprehensive list of these prechecks:
 
-1. **Functionality Testing**: Test the app manually across devices. You can also implement integration tests using FlutterFlow’s [**Automated Tests**](../testing/automated-tests.md) framework to cover various scenarios.
+1. **Functionality Testing**: Test the app manually across devices. You can also implement integration tests using FlutterFlow’s [**Automated Tests**](../running-your-app/automated-tests.md) framework to cover various scenarios.
 
 2. **Get Feedback**: Run your app in Run Mode to generate a shareable link to the session. You can share these links to gather feedback from users and testers, providing valuable insights and potential areas of improvement before the public release.
 3. **Optimizations & Enhancements**: Improve performance by implementing [optimization and enhancement](../../intro/ff-ui/toolbar.md#project-suggestions) suggestions. Ensure that images are properly sized, consider using higher compression for assets, and remove unused assets and custom widgets. These will help improve your app's speed and size.
diff --git a/docs/testing-deployment-publishing/running-your-app/_category_.json b/docs/testing-deployment-publishing/running-your-app/_category_.json
@@ -1,4 +1,4 @@
 {
-    "label": "Running your App",
+    "label": "Testing your app",
     "position": 3
   }
diff --git a/docs/testing-deployment-publishing/running-your-app/automated-tests.md b/docs/testing-deployment-publishing/running-your-app/automated-tests.md
@@ -3,7 +3,7 @@ slug: /testing/automated-tests
 title: Automated Tests
 description: Discover how to effectively utilize automated testing in FlutterFlow to ensure your app performs as intended.
 tags: [Automated Tests, Testing]
-sidebar_position: 0
+sidebar_position: 2
 keywords: [Automated Tests, Testing, FlutterFlow]
 ---
 
diff --git a/docs/testing-deployment-publishing/testing/_category_.json b/docs/testing-deployment-publishing/testing/_category_.json
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -25,13 +25,15 @@ const config: Config = {
       'classic',
       {
         docs: {
-          breadcrumbs: false,
+          breadcrumbs: true,
           routeBasePath: '/',
           sidebarPath: './sidebars.ts',
           editUrl: 'https://github.com/FlutterFlow/flutterflow-documentation/edit/main/',
           showLastUpdateAuthor: true,
           showLastUpdateTime: true,
           exclude: ['docs/index.md'],
+          sidebarCollapsible: true, /* Keep sidebar expanded by default */
+          sidebarCollapsed: true, /* Start with sidebar expanded */
           // lastVersion: 'current',
           // versions: {
           //   current: {
diff --git a/firebase.json b/firebase.json
@@ -2401,7 +2401,7 @@
       {
         "source": "/concepts/custom-code/custom-files",
         "destination": "/concepts/custom-code/configuration-files",
-         "type": 301
+        "type": 301
       },
       {
         "source": "/marketplace/creators-hub/submit-item-for-reivew",
@@ -2417,6 +2417,11 @@
         "source": "/configuring-cors-for-firebase-storage",
         "destination": "/troubleshooting/firebase/configuring-cors-for-firebase-storage",
         "type": 301
+      },
+      {
+        "source": "/accounts-billing/refunds",
+        "destination": "/accounts-billing/subscriptions/refunds",
+        "type": 301
       }
     ]
   }
diff --git a/sidebars.ts b/sidebars.ts
@@ -16,7 +16,7 @@ const sidebars: SidebarsConfig = {
         {
             type: 'category',
             label: 'Before You Begin',
-            collapsed: true,
+            collapsed: false,
             items: [
                 {
                     type: 'autogenerated',
@@ -27,7 +27,7 @@ const sidebars: SidebarsConfig = {
         {
             type: 'category',
             label: 'FlutterFlow Platform',
-            collapsed: true,
+            collapsed: false,
             items: [
                 {
                     type: 'autogenerated',
@@ -38,7 +38,7 @@ const sidebars: SidebarsConfig = {
         {
             type: 'category',
             label: 'Resources',
-            collapsed: true,
+            collapsed: false,
             link: {
                 type: 'generated-index',
                 title: 'FlutterFlow Resources',
@@ -56,7 +56,7 @@ const sidebars: SidebarsConfig = {
         {
             type: 'category',
             label: 'Building Concepts',
-            collapsed: true,
+            collapsed: false,
             link: {
                 type: 'generated-index',
                 title: 'Key Concepts',
@@ -74,7 +74,7 @@ const sidebars: SidebarsConfig = {
         {
             type: 'category',
             label: 'Testing & Publishing',
-            collapsed: true,
+            collapsed: false,
             items: [
                 {
                     type: 'autogenerated',
@@ -85,7 +85,7 @@ const sidebars: SidebarsConfig = {
         {
             type: 'category',
             label: 'Integrations',
-            collapsed: true,
+            collapsed: false,
             link: {
                 type: 'generated-index',
                 title: 'Third Party Integrations',
@@ -103,7 +103,7 @@ const sidebars: SidebarsConfig = {
         {
             type: 'category',
             label: 'Generated Code',
-            collapsed: true,
+            collapsed: false,
             items: [
                 {
                     type: 'autogenerated',
@@ -114,7 +114,7 @@ const sidebars: SidebarsConfig = {
         {
             type: 'category',
             label: 'Accounts & Billing',
-            collapsed: true,
+            collapsed: false,
             items: [
                 {
                     type: 'autogenerated',
@@ -125,7 +125,7 @@ const sidebars: SidebarsConfig = {
         {
             type: 'category',
             label: 'Miscellaneous',
-            collapsed: true,
+            collapsed: false,
             items: [
                 {
                     type: 'autogenerated',
diff --git a/src/components/Feedback/index.js b/src/components/Feedback/index.js
diff --git a/src/components/InfoCard/index.module.css b/src/components/InfoCard/index.module.css
diff --git a/src/components/InfoCard/index.tsx b/src/components/InfoCard/index.tsx
diff --git a/src/css/custom.css b/src/css/custom.css
diff --git a/static/img/grid-pattern-dark.png b/static/img/grid-pattern-dark.png
diff --git a/static/img/grid-pattern.png b/static/img/grid-pattern.png

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`	`1`	`{`
`2`		`- "label": "Running your App",`
	`2`	`+ "label": "Testing your app",`
`3`	`3`	`"position": 3`
`4`	`4`	`}`