diff --git a/docs/ff-concepts/animations/_category_.json b/docs/ff-concepts/animations/_category_.json index fe89783b..e81549b9 100644 --- a/docs/ff-concepts/animations/_category_.json +++ b/docs/ff-concepts/animations/_category_.json @@ -1,4 +1,4 @@ { "label": "Animations", - "position": 2 + "position": 3 } \ No newline at end of file diff --git a/docs/ff-concepts/design-system/_category_.json b/docs/ff-concepts/design-system/_category_.json index cb221476..75cc3148 100644 --- a/docs/ff-concepts/design-system/_category_.json +++ b/docs/ff-concepts/design-system/_category_.json @@ -1,4 +1,4 @@ { "label": "Design System", - "position": 4 + "position": 0 } \ No newline at end of file diff --git a/docs/ff-concepts/layout/_category_.json b/docs/ff-concepts/layout/_category_.json index 97f11df2..927c4a7b 100644 --- a/docs/ff-concepts/layout/_category_.json +++ b/docs/ff-concepts/layout/_category_.json @@ -1,4 +1,4 @@ { "label": "Layout", - "position": 0 + "position": 1 } \ No newline at end of file diff --git a/docs/ff-concepts/navigation-routing/_category_.json b/docs/ff-concepts/navigation-routing/_category_.json index 6e5cd310..b82ffb17 100644 --- a/docs/ff-concepts/navigation-routing/_category_.json +++ b/docs/ff-concepts/navigation-routing/_category_.json @@ -1,4 +1,4 @@ { "label": "Navigation & Routing", - "position": 4 + "position": 2 } \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 77405932..beb81828 100644 --- a/docs/index.md +++ b/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'; + - -## 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. - - - - - - + + + + + + + +

+ +### FlutterFlow Tour + +
\ No newline at end of file diff --git a/docs/intro/before-you-begin/setting-up-flutterflow.md b/docs/intro/before-you-begin/setting-up-flutterflow.md index 42b064fc..12b53493 100644 --- a/docs/intro/before-you-begin/setting-up-flutterflow.md +++ b/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. - -
- - -## 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. diff --git a/docs/intro/quickstart.md b/docs/intro/quickstart.md index 8c21ecd7..c8bcfdfb 100644 --- a/docs/intro/quickstart.md +++ b/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. diff --git a/docs/resources/projects/_category_.json b/docs/resources/projects/_category_.json index 5e20ae70..e57e9c17 100644 --- a/docs/resources/projects/_category_.json +++ b/docs/resources/projects/_category_.json @@ -1,4 +1,4 @@ { "label": "Projects", - "position": 1 + "position": 0 } \ No newline at end of file diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 71074514..09ccddfe 100644 --- a/docusaurus.config.ts +++ b/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,7 +84,7 @@ const config: Config = { items: [ { label: 'Tutorial', - to: '/docs/intro', + to: '#', }, ], }, @@ -108,16 +92,12 @@ const config: Config = { 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', }, ], }, diff --git a/sidebars.ts b/sidebars.ts index 5da645bb..2944ba33 100644 --- a/sidebars.ts +++ b/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'], }, diff --git a/src/components/FlutterFlowLogo/index.module.css b/src/components/FlutterFlowLogo/index.module.css new file mode 100644 index 00000000..c3c0939f --- /dev/null +++ b/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 */ +} \ No newline at end of file diff --git a/src/components/FlutterFlowLogo/index.tsx b/src/components/FlutterFlowLogo/index.tsx new file mode 100644 index 00000000..7f6ae951 --- /dev/null +++ b/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/logo_primary_color@2x.png"; // Light mode logo + const logoSrcLight = "/logos/logo_primary_color_onLight@2x.png"; // Dark mode logo + const { colorMode } = useColorMode(); + + return ( +
+ {`$FlutterFlow +
+ ); +}; + +export default FlutterFlowLogo; diff --git a/src/components/InfoCard/index.module.css b/src/components/InfoCard/index.module.css index 13fd0b1d..8c870802 100644 --- a/src/components/InfoCard/index.module.css +++ b/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; -} +} \ No newline at end of file diff --git a/src/components/InfoCard/index.tsx b/src/components/InfoCard/index.tsx index 45958a85..6f286fa0 100644 --- a/src/components/InfoCard/index.tsx +++ b/src/components/InfoCard/index.tsx @@ -7,7 +7,6 @@ const InfoCard = ({ icon, title, description, pagePath })=> { {/* Link the card */}
- {`${title}
{title}
{description}
diff --git a/src/css/custom.css b/src/css/custom.css index 3e3be08e..63425ef2 100644 --- a/src/css/custom.css +++ b/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;