Fix CSS & Home Page

docs/ff-concepts/animations/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Animations",
-  "position": 2
+  "position": 3
 }

docs/ff-concepts/design-system/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Design System",
-  "position": 4
+  "position": 0
 }

docs/ff-concepts/layout/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Layout",
-  "position": 0
+  "position": 1
 }

docs/ff-concepts/navigation-routing/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Navigation & Routing",
-  "position": 4
+  "position": 2
 }

docs/index.md

@@ -11,6 +11,7 @@ hide_table_of_contents: true
 import InfoCard from '@site/src/components/InfoCard';
 import InfoCards from '@site/src/components/InfoCards';
 import FlutterFlowDocsLogo from '@site/src/components/FlutterFlowDocsLogo';
+import FlutterFlowLogo from '@site/src/components/FlutterFlowLogo';
 import GearIcon from '@site/static/icons/_icon_Setting.png';
 import DocsIcon from '@site/static/icons/document.png';
 import DeviceIcon from '@site/static/icons/deviceMobile.png';
@@ -20,16 +21,22 @@ import BranchIcon from '@site/static/icons/branch_New.png';
 
 
 
+<FlutterFlowLogo></FlutterFlowLogo>
 
-
-## Quickly build beautiful apps, without limitation.
+# 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. 
 
 <InfoCards>
-    <InfoCard icon={GearIcon} 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 icon={DocsIcon}  title="Explore FlutterFlow" description="Dive into the building blocks of the platform: projects, widgets, functions and more." />
-    <InfoCard icon={DeviceIcon}  title="Start Building" description="Jump right into a quick start on how to build a simple app." />
-    <InfoCard icon={CheckIcon}  title="Troubleshooting Guides" description=" Solutions and tips to solve common FlutterFlow development hurdles." />
-    <InfoCard icon={UsersIcon}  title="Community Forum" description="Join discussions, ask questions, and share insights with the FlutterFlow community." />
-    <InfoCard icon={BranchIcon}  title="What's New in FlutterFlow" description="Updates, features, and the latest enhancements in FlutterFlow." />
+    <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="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="Troubleshooting Guides" description=" Solutions and tips to solve common FlutterFlow development hurdles." />
+    <InfoCard   title="Community Forum" description="Join discussions, ask questions, and share insights with the FlutterFlow community." pagePath="https://community.flutterflow.io"/>
+    <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"/>
 </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>

docs/intro/before-you-begin/setting-up-flutterflow.md

@@ -3,14 +3,8 @@ title: Setting Up FlutterFlow
 description: Ensure you meet system requirements and grasp technical concepts for smooth building in FlutterFlow.
 ---
 
-## What is FlutterFlow?
 
-FlutterFlow is a visual development envirionment for building native mobile and web applications. FlutterFlow helps you build apps faster, without sacfiricing on app quality or features.
-
-<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>
-
-
-## Create an account
+# Create an account
 
 Create your free account to get started with FlutterFlow. After you've set up your account, you'll be able to create as many projects as you like.
 

docs/intro/quickstart.md

@@ -1,5 +1,5 @@
 ---
-slug: quickstart
+slug: /quickstart
 title: Quick Start Guide
 tags: []
 description: Jumpstart your FlutterFlow journey with our Quick Start Guide. Learn to build a dynamic app and explore essential FlutterFlow features like UI building, state management, and app execution.

docs/resources/projects/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Projects",
-  "position": 1
+  "position": 0
 }

docusaurus.config.ts

@@ -68,25 +68,9 @@ const config: Config = {
         src: '/logos/logoMark_outlinePrimary_transparent.svg',
       },
       items: [
+
         {
-          type: 'doc',
-          docId: 'troubleshooting/overview', // Adjust to the first document in "Troubleshooting"
-          position: 'left',
-          label: 'Troubleshooting',
-        },
-        {
-          type: 'doc',
-          docId: 'changelog/changelog', // Adjust to the first document in "Changelog"
-          position: 'left',
-          label: 'Changelog',
-        },
-        {
-          to: '/blog/overview',
-          label: 'Blog',
-          position: 'left'
-        },
-        {
-          href: 'https://github.com/facebook/docusaurus',
+          href: 'https://github.com/FlutterFlow/flutterflow-documentation',
           label: 'GitHub',
           position: 'right',
         },
@@ -100,24 +84,20 @@ const config: Config = {
           items: [
             {
               label: 'Tutorial',
-              to: '/docs/intro',
+              to: '#',
             },
           ],
         },
         {
           title: 'Community',
           items: [
             {
-              label: 'Stack Overflow',
-              href: 'https://stackoverflow.com/questions/tagged/docusaurus',
-            },
-            {
-              label: 'Discord',
-              href: 'https://discordapp.com/invite/docusaurus',
+              label: 'Community Forum',
+              href: 'https://community.flutterflow.io',
             },
             {
               label: 'Twitter',
-              href: 'https://twitter.com/docusaurus',
+              href: 'https://twitter.com/flutterflow',
             },
           ],
         },
@@ -126,11 +106,11 @@ const config: Config = {
           items: [
             {
               label: 'Blog',
-              to: '/blog',
+              to: 'https://blog.flutterflow.io',
             },
             {
               label: 'GitHub',
-              href: 'https://github.com/facebook/docusaurus',
+              href: 'https://github.com/FlutterFlow/flutterflow-documentation',
             },
           ],
         },

sidebars.ts

@@ -38,6 +38,13 @@ const sidebars: SidebarsConfig = {
             type: 'category',
             label: 'Resources',
             collapsed: false,
+            link: {
+                type: 'generated-index',
+                title: 'FlutterFlow Resources',
+                description: 'Learn about the key building blocks in FlutterFlow',
+                slug: '/resources',
+                keywords: ['resources'],
+            },
             items: [
                 {
                     type: 'autogenerated',
@@ -49,6 +56,13 @@ const sidebars: SidebarsConfig = {
             type: 'category',
             label: 'Building Concepts',
             collapsed: false,
+            link: {
+                type: 'generated-index',
+                title: 'Key Concepts',
+                description: 'Learn about the key concepts important for building with FlutterFlow',
+                slug: '/concepts',
+                keywords: ['concepts'],
+            },
             items: [
                 {
                     type: 'autogenerated',
@@ -74,7 +88,7 @@ const sidebars: SidebarsConfig = {
             link: {
                 type: 'generated-index',
                 title: 'FF Guides',
-                description: 'Learn about the most important Docusaurus concepts!',
+                description: 'Learn about the various integrations available in FlutterFlow!',
                 slug: '/integrations',
                 keywords: ['guides'],
             },

src/components/FlutterFlowLogo/index.module.css

@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  align-items: center;
+}
+
+.logo {
+  height: 4em; /* 1em typically equals the font-size of the parent, which is the h2 in this case */
+  width: auto; /* Maintain the aspect ratio of the image */
+}
+
+.title {
+  font-size: 1.5rem; /* Adjust this as necessary for your design */
+  margin: 0; /* Remove default margins from h2 */
+}

src/components/FlutterFlowLogo/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { useThemeConfig, useColorMode } from '@docusaurus/theme-common';
+import styles from './index.module.css';
+
+
+const FlutterFlowLogo = () => {
+    const logoSrcDark = "/logos/[email protected]"; // Light mode logo
+    const logoSrcLight = "/logos/[email protected]"; // Dark mode logo
+    const { colorMode } = useColorMode();
+
+    return (
+        <div className={styles.container}>
+            <img
+                src={colorMode === 'dark' ? logoSrcDark : logoSrcLight}
+                alt={`$FlutterFlow Logo`}
+                className={styles.logo}
+            />
+        </div>
+    );
+};
+
+export default FlutterFlowLogo;

src/components/InfoCard/index.module.css

@@ -2,19 +2,26 @@
   border: var(--border);
   border-radius: 4px;
   padding: 30px;
-  transition: background-color 0.3s;
+  transition: background-color 0.3s, box-shadow 0.3s;
   box-sizing: border-box; /* Ensures padding is included in width/height */
+  box-shadow: none; /* Initial shadow */
 }
 
 @media (max-width: 768px) { /* For landscape phones and smaller tablets */
   .infoCard {
-      padding: 20px; /* Smaller padding on smaller screens */
+    padding: 20px; /* Smaller padding on smaller screens */
   }
 }
 
 .infoCard:hover {
-  border: var(--selected-border);
-  background-color: var(--ifm-menu-color-background-active);
+  border: var(--selected-border); /* Keep the initial border */
+  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.8); /* Elevation effect for light mode */
+}
+
+@media (prefers-color-scheme: dark) {
+  .infoCard:hover {
+    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2); /* Elevation effect for dark mode */
+  }
 }
 
 .infoCardIcon {
@@ -41,10 +48,10 @@
 
 .infoCardLink {
   display: flex;
-  color: var(--primary-texr); 
+  color: var(--primary-texr);
 }
 
 .infoCardLink:hover {
-  color: var(--primary-texr); 
+  color: var(--primary-texr);
   text-decoration: none;
-}
+}

src/components/InfoCard/index.tsx

@@ -7,7 +7,6 @@ const InfoCard = ({ icon, title, description, pagePath })=> {
     <a href={pagePath} className={styles.infoCardLink}> {/* Link the card */}
     <div className={styles.infoCard}> 
       <div className={styles.titleContainer}>
-        <img src={icon} alt={`${title} Logo`} className={styles.logo} />
         <div className={styles.infoCardTitle}>{title}</div>
       </div>
       <div className={styles.infoCardDescription}>{description}</div>

src/css/custom.css

@@ -33,16 +33,23 @@ html[data-theme='dark'] {
 
 [data-theme='dark'] {
   --primary-text: var(--white);
-  --ifm-color-primary: #39d2c0; /* Primary brand color, lighter purple for visibility on dark backgrounds */
-  --ifm-color-primary-dark: #2cb5a5; /* Dark shade for hover states, toned down for dark mode */
-  --ifm-color-primary-darker: #24a697; /* Even darker shade for active states, balanced for contrast */
-  --ifm-color-primary-darkest: #1b9c8d; /* Darkest shade used for accents, dark yet visible */
-  --ifm-color-primary-light: #67f6e5; /* Lighter primary shade, appears vibrant against dark surfaces (Adjusted) */
-  --ifm-color-primary-lighter: #7bfaeb; /* Even lighter shade for backgrounds, soft and subtle (Adjusted) */
-  --ifm-color-primary-lightest: #8afbee; /* Lightest primary shade, nearly pastel against dark modes (Adjusted) */
-  --ifm-code-font-size: 95%; /* Maintained font size for readability */
-  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1); /* Lighter line highlighting in code for dark mode */
-
+  --ifm-color-primary: #7e71f4; /* Primary brand color */
+  --ifm-color-primary-dark: #7262f3; /* Darker shade for hover states */
+  --ifm-color-primary-darker: #9386f6; /* Even darker shade for active states */
+  --ifm-color-primary-darkest: #b3a8fa; /* Darkest shade used for accents */
+  --ifm-color-primary-light: #827acf; /* Lighter primary shade */
+  --ifm-color-primary-lighter: #574ebd; /* Even lighter shade for backgrounds */
+  --ifm-color-primary-lightest: #4c41af; /* Lightest primary shade */
+
+  --ifm-background-color: #1a1a1a; /* Dark background color */
+  --ifm-background-secondary-color: #2a2a2a; /* Slightly lighter background for contrast */
+  --ifm-background-code-color: #2a2a2a; /* Background for code blocks */
+  --ifm-background-code-line-color: #333; /* Background for highlighted lines in code blocks */
+  --ifm-text-color: #e0e0e0; /* Primary text color */
+  --ifm-text-secondary-color: #c0c0c0; /* Secondary text color */
+  --ifm-border-color: #444; /* Border color */
+  --ifm-hover-color: #555; /* Hover color for interactive elements */
+  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1);
 }
 .small-image {
   width: 400px;