add more content to home page + UI fixes

Author: PoojaB26

docs/index.md

@@ -21,52 +21,74 @@ import BranchIcon from '@site/static/icons/branch_New.png';
 
 
 
-# Getting started with FlutterFlow
+# 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"/> 
-    
 
+<InfoCards>
+    <InfoCard 
+      icon="🚀" 
+      title="Build your first app" 
+      description="Get started with FlutterFlow by building your first FlutterFlow app step-by-step." 
+      pagePath="/quickstart" 
+    />
 </InfoCards>
 
+<p></p>
+
+### Explore Other Resources
 
+Discover additional tools, tutorials, and references to enhance your FlutterFlow development experience: 
 <InfoCards>
+    <InfoCard title="System Requirements" 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="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"/>
     <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" />
 
 </InfoCards>
 
+
+
+
 <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>
 
-## Key Features
+### 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="Build your first app" 
-    description="Learn how everything fits together and our top tips for creating stunning, powerful websites and apps." 
-    pagePath="/quickstart"
+    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="Troubleshooting" 
-    description="Resolve login issues and other known FlutterFlow issues." 
-    pagePath="/troubleshooting"
+    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="Integrations" 
-    description="Connect to tools like Github, Netlify, Figma, Supabase, Stripe, and more." 
-    pagePath="/ff-integrations"
+  <InfoCard
+  icon="📝"
+  title="How to name variables?"
+  description="Learn FlutterFlow naming conventions and best practices for variables, functions, and components to maintain clean, readable code."
+  pagePath="/resources/style-guide"
   />
-</InfoCards>
+</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
+- **[GitHub Issues](https://github.com/FlutterFlow/flutterflow-documentation/issues)** - Report documentation issues
+- **[FlutterFlow Support](mailto:[email protected])** - Get direct support from the FlutterFlow support team.

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.
 

src/components/Feedback/index.js

@@ -52,9 +52,9 @@ const Feedback = () => {
                                 alignItems: 'center',
                                 justifyContent: 'center',
                                 cursor: 'pointer',
-                                color: feedback === 'thumbs_up' ? 'var(--ifm-color-primary)' : 'gray',
-                                backgroundColor: '#f0f0f0',
-                                border: '1px #f0f0f0',
+                                color: feedback === 'thumbs_up' ? 'var(--ifm-color-primary)' : 'var(--ifm-text-color)',
+                                backgroundColor: 'var(--ifm-background-color)',
+                                border: '1px solid var(--ifm-border-color)',
                                 borderRadius: '8px',
                                 padding: '10px 20px',
                                 fontSize: '16px',
@@ -71,9 +71,9 @@ const Feedback = () => {
                                 alignItems: 'center',
                                 justifyContent: 'center',
                                 cursor: 'pointer',
-                                color: feedback === 'thumbs_down' ? 'var(--ifm-color-primary)' : 'gray',
-                                backgroundColor: '#f0f0f0',
-                                border: '1px #f0f0f0',
+                                color: feedback === 'thumbs_down' ? 'var(--ifm-color-primary)' : 'var(--ifm-text-color)',
+                                backgroundColor: 'var(--ifm-background-color)',
+                                border: '1px solid var(--ifm-border-color)',
                                 borderRadius: '8px',
                                 padding: '10px 20px',
                                 fontSize: '16px',
@@ -94,7 +94,9 @@ const Feedback = () => {
                                     width: '100%',
                                     height: '100px',
                                     padding: '10px',
-                                    borderColor: 'lightgray',
+                                    borderColor: 'var(--ifm-border-color)',
+                                    backgroundColor: 'var(--ifm-background-color)',
+                                    color: 'var(--ifm-text-color)',
                                     borderRadius: '8px',
                                     fontFamily: 'var(--ifm-font-family-base)',
                                 }}

src/components/InfoCard/index.tsx

@@ -5,10 +5,8 @@ const InfoCard = ({ icon, title, description, pagePath, isLarge = false }) => {
   return (
     <a href={pagePath} className={styles.infoCardLink}>
       <div className={`${styles.infoCard} ${isLarge ? styles.largeCard : ''}`}>
-        <div className={styles.titleContainer}>
-          {icon && <div className={styles.infoCardIcon}>{icon}</div>}
-          <div className={styles.infoCardTitle}>{title}</div>
-        </div>
+        {icon && <div className={styles.infoCardIcon}>{icon}</div>}
+        <div className={styles.infoCardTitle}>{title}</div>
         <div className={styles.infoCardDescription}>{description}</div>
       </div>
     </a>

src/components/InfoCards/index.module.css

@@ -2,11 +2,12 @@
 .cardContainer {
   padding-top: 20px;
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   grid-auto-rows: 1fr;
   gap: 24px;
-  max-width: 1200px;
-  margin: 0 auto;
+  width: 100%;
+  max-width: none;
+  margin: 0;
 }
 
 /* Responsive adjustments */