Revamp docs design!

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,17 +20,21 @@ 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="Explore FlutterFlow" description="Dive into the building blocks of the platform: projects, widgets, functions and more." pagePath="/resources"/> 
+
+
+</InfoCards>
+
+
+<InfoCards>
     <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" />
@@ -41,4 +45,28 @@ FlutterFlow is a visual development environment that lets you build mobile, web,
 
 ### 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>
+<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
+
+<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"
+    isLarge={true}
+  />
+  <InfoCard 
+    icon="🔧" 
+    title="Troubleshooting" 
+    description="Resolve login issues and other known FlutterFlow issues." 
+    pagePath="/troubleshooting"
+  />
+  <InfoCard 
+    icon="🔗" 
+    title="Integrations" 
+    description="Connect to tools like Github, Netlify, Figma, Supabase, Stripe, and more." 
+    pagePath="/ff-integrations"
+  />
+</InfoCards>

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: {

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',

src/components/InfoCard/index.module.css

@@ -1,57 +1,94 @@
 .infoCard {
-  border: var(--border);
-  border-radius: 4px;
-  padding: 30px;
-  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 */
+  border: 1px solid var(--ifm-color-emphasis-100);
+  border-radius: 8px;
+  padding: 24px;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+  background: var(--custom-background-light);
+  cursor: pointer;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.largeCard {
+  grid-column: span 2; /* Makes the card span 2 columns */
 }
 
-@media (max-width: 768px) { /* For landscape phones and smaller tablets */
+@media (max-width: 768px) {
   .infoCard {
-    padding: 20px; /* Smaller padding on smaller screens */
+    padding: 20px;
+  }
+
+  .largeCard {
+    grid-column: span 1; /* Reset on mobile */
   }
 }
 
 .infoCard:hover {
-  border: var(--selected-border); /* Keep the initial border */
-  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.8); /* Elevation effect for light mode */
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
 }
 
 @media (prefers-color-scheme: dark) {
+  .infoCard {
+    border-color: var(--card-border-light 100%);
+  }
+
   .infoCard:hover {
-    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2); /* Elevation effect for dark mode */
+    border-color: var(--ifm-color-primary);
+    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
   }
 }
 
+/* Dark mode background */
+[data-theme='dark'] .infoCard {
+  background: var(--custom-background-dark);
+}
+
 .infoCardIcon {
   font-size: 24px;
-  margin-bottom: 10px;
+  margin-right: 12px;
+  color: var(--ifm-color-primary);
+  display: flex;
+  align-items: center;
 }
 
 .infoCardTitle {
-  font-weight: bold;
-  font-size: 20px;
+  font-weight: 600;
+  font-size: 18px;
+  color: var(--ifm-color-primary);
+  margin: 0;
 }
 
 .titleContainer {
   display: flex;
   align-items: center;
-  padding-bottom: 20px;
+  margin-bottom: 16px;
 }
 
 .logo {
-  height: 1.5em; /* 1em typically equals the font-size of the parent, which is the h2 in this case */
+  height: 1.5em;
   padding-right: 10px;
-  width: auto; /* Maintain the aspect ratio of the image */
+  width: auto;
+}
+
+.infoCardDescription {
+  color: var(--ifm-color-content);
+  font-size: 14px;
+  line-height: 1.5;
+  margin: 0;
+  flex-grow: 1;
 }
 
 .infoCardLink {
-  display: flex;
-  color: var(--primary-texr);
+  display: block;
+  color: inherit;
+  text-decoration: none;
 }
 
 .infoCardLink:hover {
-  color: var(--primary-texr);
+  color: inherit;
   text-decoration: none;
 }

src/components/InfoCard/index.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import styles from './index.module.css';
 
-
-const InfoCard = ({ icon, title, description, pagePath })=> {
+const InfoCard = ({ icon, title, description, pagePath, isLarge = false }) => {
   return (
-    <a href={pagePath} className={styles.infoCardLink}> {/* Link the card */}
-    <div className={styles.infoCard}> 
-      <div className={styles.titleContainer}>
-        <div className={styles.infoCardTitle}>{title}</div>
+    <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>
+        <div className={styles.infoCardDescription}>{description}</div>
       </div>
-      <div className={styles.infoCardDescription}>{description}</div>
-    </div>
     </a>
   );
 };

src/components/InfoCards/index.module.css

@@ -1,22 +1,23 @@
 
 .cardContainer {
-    padding-top: 20px;
-    display: grid;
-    grid-template-columns: repeat(3, 1fr); /* Default to three columns */
-    grid-auto-rows: 1fr; /* Each row has equal height, adjusting to content */
-    gap: 20px;
+  padding-top: 20px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 1fr;
+  gap: 24px;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
-
 /* Responsive adjustments */
-@media (max-width: 1024px) { /* For tablets and smaller desktops */
-    .cardContainer {
-      grid-template-columns: repeat(2, 1fr); /* Two columns */
-    }
+@media (max-width: 1024px) {
+  .cardContainer {
+    grid-template-columns: repeat(2, 1fr);
   }
-
-@media (max-width: 768px) { /* For landscape phones and smaller tablets */
-.cardContainer {
-    grid-template-columns: 1fr; /* Single column for small devices */
 }
+
+@media (max-width: 768px) {
+  .cardContainer {
+    grid-template-columns: 1fr;
+  }
 }