Adding stuff

Author: leighajarett

docs/index.md

@@ -10,16 +10,25 @@ 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 GearIcon from '@site/static/icons/_icon_Setting.png';
+import DocsIcon from '@site/static/icons/document.png';
+import DeviceIcon from '@site/static/icons/deviceMobile.png';
+import CheckIcon from '@site/static/icons/check_errors.png';
+import UsersIcon from '@site/static/icons/users.png';
+import BranchIcon from '@site/static/icons/branch_New.png';
 
 
 <FlutterFlowDocsLogo />
 
 
 # Quickly build beautiful apps, without limitation.
-### Learn how to build mobile, web and desktop apps incredibly fast - without sacrificing on app quality or features.
+### 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="🌐" title="Web Apps" description="Build and deploy web apps." />
-    <InfoCard icon="📱" title="Mobile AAA Apps" description="Build native iOS and Android apps for your mobile workforce." />
-    <InfoCard icon="🔗" title="External Web Apps" description="Embed web apps into your existing apps or build dedicated portals for customers." />
+    <InfoCard icon={GearIcon} title="Before You Begin" description="Ensure you meet system requirements and grasp technical concepts for smooth building in 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." />
 </InfoCards>

src/components/FlutterFlowDocsLogo/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './index.module.css';
 
 const FlutterFlowDocsLogo = () => {
-  const title = "FlutterFlow Documentation";
+  const title = "FlutterFlow Docs";
   const logoSrc = "/logos/logoMark_outlinePrimary_transparent.svg"; // Path relative to the static directory
 
   return (

src/components/InfoCard/index.module.css

@@ -1,10 +1,11 @@
 .infoCard {
   border: var(--border);
   border-radius: 4px;
-  padding: 20px;
+  padding: 30px;
   transition: background-color 0.3s;
 }
 
+
 .infoCard:hover {
   border: var(--selected-border);
   background-color: var(--ifm-menu-color-background-active);
@@ -17,7 +18,18 @@
 
 .infoCardTitle {
   font-weight: bold;
-  font-size: 18px;
-  margin-bottom: 5px;
+  font-size: 20px;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  padding-bottom: 20px;
+}
+
+.logo {
+  height: 1.5em; /* 1em typically equals the font-size of the parent, which is the h2 in this case */
+  padding-right: 10px;
+  width: auto; /* Maintain the aspect ratio of the image */
 }
 

src/components/InfoCard/index.tsx

@@ -5,12 +5,15 @@ import styles from './index.module.css';
 
 const InfoCard = ({ icon, title, description }) => {
   return (
-    <div className={styles.infoCard}> {/* Use styles from the imported CSS Module */}
-      <div className={styles.infoCardIcon}>{icon}</div>
-      <div className={styles.infoCardTitle}>{title}</div>
+    <div className={styles.infoCard}> 
+      <div className={styles.container}>
+        <img src={icon} alt={`${title} Logo`} className={styles.logo} />
+        <div className={styles.infoCardTitle}>{title}</div>
+      </div>
       <div className={styles.infoCardDescription}>{description}</div>
     </div>
   );
 };
 
 export default InfoCard;
+

src/components/InfoCards/index.module.css

@@ -1,7 +1,6 @@
-/* App.css */
 .cardContainer {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: -10px;
-}
+    padding-top: 20px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr); /* Creates three columns of equal width */
+    gap: 40px; 
+}

src/components/InfoCards/index.tsx

@@ -4,7 +4,7 @@ import InfoCard from '../InfoCard';
 import styles from './index.module.css';
 
 const InfoCards = ({ children }) => {
-  return <div className="card-container">{children}</div>;
+  return <div className={styles.cardContainer}>{children}</div>;
 };
 
 export default InfoCards;

src/css/custom.css

@@ -44,7 +44,7 @@ html[data-theme='light'] {
 }
 
 html[data-theme='dark'] {
-  --primary-text: var(--white);
+  --primary-text: var(--graytext);
   --ifm-color-primary: #786aff; /* Primary brand color, lighter purple for visibility on dark backgrounds */
   --ifm-color-primary-dark: #6255c8; /* Dark shade for hover states, toned down for dark mode */
   --ifm-color-primary-darker: #5042a3; /* Even darker shade for active states, balanced for contrast */
@@ -66,7 +66,7 @@ html[data-theme='dark'] {
 body {
   color: #333;
   font-size: 18px;
-  font-weight: 600;
+  font-weight: 200;
   line-height: 20px;
 }
 
@@ -88,8 +88,8 @@ h2 {
 }
 
 h3 {
-  color: var(--graytext);
-  font-weight: 500;
+  color:var(--graytext);
+  font-weight: 200;
 }