diff --git a/website/.yarn/install-state.gz b/website/.yarn/install-state.gz index 33e94b8f9..c618ff0c7 100644 Binary files a/website/.yarn/install-state.gz and b/website/.yarn/install-state.gz differ diff --git a/website/docs/app_config.mdx b/website/docs/app_config.mdx index 40fe610e0..33f69a923 100644 --- a/website/docs/app_config.mdx +++ b/website/docs/app_config.mdx @@ -25,12 +25,12 @@ The collections can be defined asynchronously, so you can fetch data from your b to build them. It might be useful if you want to build the collections based on the logged-in user, or if you want to fetch some data to build the schema of your collections. -Check the [dynamic collections](../collections/dynamic_collections.md) section for more information. +Check the [dynamic collections](./collections/dynamic_collections.md) section for more information. ::: You have two main ways of creating the top level views in FireCMS, either creating entity collections that get mapped to CMS views, or create your own top level React views: -- Check all the possible configurations for defining [collections](../collections/collections.md) +- Check all the possible configurations for defining [collections](./collections/collections.md) - Otherwise, you can define your own [custom top level views](./custom_top_level_views.mdx). diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 1c1479605..19894f881 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -16,30 +16,22 @@ module.exports = { docSearchApiKey: process.env.REACT_APP_DOC_SEARCH_KEY, docSearchAppId: process.env.REACT_APP_DOC_SEARCH_APP_ID, }, - // webpack: { - // jsLoader: (isServer) => ({ - // loader: require.resolve('esbuild-loader'), - // options: { - // loader: 'tsx', - // format: isServer ? 'cjs' : undefined, - // target: isServer ? 'node16' : 'es2017', - // }, - // }), - // }, + webpack: { + }, plugins: [ "docusaurus-tailwindcss-loader", "docusaurus-plugin-sass", - [ - "docusaurus-plugin-typedoc", - { - entryPoints: [ - "../packages/firebase_firecms/src/index.ts", - ], - tsconfig: "../packages/firebase_firecms/tsconfig.json", - watch: process.env.TYPEDOC_WATCH, - } - ], + // [ + // "docusaurus-plugin-typedoc", + // { + // entryPoints: [ + // "../packages/firebase_firecms/src/index.ts", + // ], + // tsconfig: "../packages/firebase_firecms/tsconfig.json", + // watch: process.env.TYPEDOC_WATCH, + // } + // ], function fontainePlugin(_context, _options) { return { name: "fontaine-plugin", @@ -83,8 +75,29 @@ module.exports = { { name: "twitter:card", content: "summary" - } + }, + { + name: "keywords", + content: "firebase, cms, react, react cms, firestore, firebase cms, headless cms, firebase admin, firebase admin sdk, strapi, contentful, rowy, forest admin, ghost cms, keystone, wordpress" + }, ], + headTags: [ + // Declare some json-ld structured data + { + tagName: 'script', + attributes: { + type: 'application/ld+json', + }, + innerHTML: JSON.stringify({ + '@context': 'https://schema.org/', + '@type': 'Organization', + name: 'Meta Open Source', + url: 'https://opensource.fb.com/', + logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg', + }), + }, + ], + colorMode: { defaultMode: "dark", disableSwitch: true, diff --git a/website/package.json b/website/package.json index e3fb17adb..b24ccb956 100644 --- a/website/package.json +++ b/website/package.json @@ -22,7 +22,7 @@ "@docusaurus/plugin-google-gtag": "^2.4.3", "@docusaurus/plugin-sitemap": "^2.4.3", "@docusaurus/preset-classic": "^2.4.3", - "@firecms/neat": "0.1.4", + "@firecms/neat": "0.1.5", "aos": "^2.3.4", "autoprefixer": "^10.4.14", "clsx": "^1.2.1", diff --git a/website/sidebars.js b/website/sidebars.js index 5319241b7..6b536add4 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -95,17 +95,17 @@ module.exports = { ] }, "changelog", - { - "type":"category", - "label":"API reference", - "collapsed":true, - "items":[ - { - "type":"autogenerated", - "dirName":"api" - } - ] - }, + // { + // "type":"category", + // "label":"API reference", + // "collapsed":true, + // "items":[ + // { + // "type":"autogenerated", + // "dirName":"api" + // } + // ] + // }, ] } diff --git a/website/src/pages/features.tsx b/website/src/pages/features.tsx index 6fa2379de..28d3bfc9f 100644 --- a/website/src/pages/features.tsx +++ b/website/src/pages/features.tsx @@ -3,9 +3,9 @@ import Layout from "@theme/Layout"; import Features from "../partials/features/Features"; import { Hero } from "../partials/general/Hero"; -import { DeveloperFeatures } from "../partials/features/DeveloperFeatures"; import HeroButtons from "../partials/home/HeroButtons"; import { IntroText } from "../partials/home/IntroText"; +import { Panel } from "../partials/general/Panel"; function FeaturesPage() { @@ -18,6 +18,7 @@ function FeaturesPage() {
- - + + +
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 4b4b826ff..19986bac8 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -2,9 +2,9 @@ import React from "react"; import Layout from "@theme/Layout"; import Head from "@docusaurus/Head"; +import HeroHome from "../partials/home/HeroHome"; import { TechSplash } from "../partials/home/TechSplash"; import { ManageYour } from "../partials/home/ManageYour"; -import HeroHome from "../partials/home/HeroHome"; import FeaturesPanels from "../partials/home/FeaturesPanels"; import FirebaseTeaser from "../partials/home/OpenSourceDetails"; import FirebaseIntro from "../partials/home/FirebaseIntro"; @@ -35,7 +35,6 @@ function Home() { - diff --git a/website/src/pages/pricing.tsx b/website/src/pages/pricing.tsx index 7cda3dc41..5061d85f6 100644 --- a/website/src/pages/pricing.tsx +++ b/website/src/pages/pricing.tsx @@ -17,6 +17,7 @@ function FeaturesPage() { description="Free self-hosted version and free Cloud tier, adaptive pricing for everyone"> Pricing @@ -24,8 +25,8 @@ function FeaturesPage() { subtitle={ <>

Experience the power of our CMS platform with a - free, self-hosted option or upgrade to FireCMS - Cloud for a premium, full-service solution. + free, self-hosted option or try FireCMS + Cloud for a fully-managed, full-service solution.

} // cta={} {version === "self-hosted" && } + diff --git a/website/src/partials/BrowserFrame.tsx b/website/src/partials/BrowserFrame.tsx index bf97e83cc..4c1dca2ae 100644 --- a/website/src/partials/BrowserFrame.tsx +++ b/website/src/partials/BrowserFrame.tsx @@ -1,15 +1,20 @@ -import clsx from 'clsx'; -import React from 'react'; +import clsx from "clsx"; +import React from "react"; -export function BrowserFrame({ children, className }: { children: React.ReactNode, -className?: string +export function BrowserFrame({ children, className, style, mode = "dark" }: { + children: React.ReactNode, + className?: string, + style?: React.CSSProperties, + mode?: "light" | "dark" }) { return
+ className={clsx("h-11 rounded-t-lg flex justify-start items-center gap-1.5 px-3", + mode === "dark" ? "bg-gray-900" : "bg-gray-100")}> diff --git a/website/src/partials/UsageExamples.tsx b/website/src/partials/UsageExamples.tsx index ce30365a6..87c42e035 100644 --- a/website/src/partials/UsageExamples.tsx +++ b/website/src/partials/UsageExamples.tsx @@ -1,21 +1,68 @@ -import React from "react"; +import React, { useEffect, useRef, useState } from "react"; import clsx from "clsx"; -import { ContainerPaddingMixin } from "./styles"; +import { ContainerPaddingMixin, easeInOut } from "./styles"; // @ts-ignore -import customFieldVideo from "@site/static/img/custom_fields.mp4"; +import inlineEditing from "@site/static/img/inline_table_editing.mp4"; // @ts-ignore import customFieldDarkVideo from "@site/static/img/custom_fields_dark.mp4"; + +// @ts-ignore +import MMApp from "@site/static/img/mm_app.png"; +// @ts-ignore +import editorWhite from "@site/static/img/editor_white.png"; +// @ts-ignore +import overlay from "@site/static/img/overlay.png"; + import { BrowserFrame } from "./BrowserFrame"; import { PhoneFrame } from "./PhoneFrame"; +import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment"; +import { LinedSpace } from "./layout/LinedSpace"; export function UsageExamples() { - return
-
- + + const ref = useRef(null); + const [scroll, setScroll] = useState(0); + + useEffect(() => { + const listener = () => { + if (typeof window !== "undefined") { + setScroll(window?.scrollY ?? 0) + } + }; + listener(); + if (typeof window !== "undefined") + window.addEventListener("scroll", listener); + return () => { + if (typeof window !== "undefined") + window.removeEventListener("scroll", listener); + }; + }, [ExecutionEnvironment.canUseDOM]); + + const offsetHeight = ref.current?.offsetHeight ?? 0; + const currentTop = ref.current?.getBoundingClientRect().top ?? 0; + const parallaxOffset = easeInOut(Math.max(0, Math.min(1, (300 + currentTop) / offsetHeight))) * 2 - 1; + + console.log({ parallaxOffset, ref, currentTop, offsetHeight, scroll }); + + return
+ + + + +
+ + {/* MM CMS */} + - - - - {/*img2*/} - {/*img3*/} - {/*img4*/} - {/*img5*/} + {/* EDITOR */} + + + Overlay + + + {/* MM APP */} +
+ + MedicalMotion App + +
+ + {/* COURSES INLINE EDITING */} + + + Editor + {/**/} + {/* */} + {/**/} + + + {/* TPA APP */} +
+ + + +
-
-
+
+
; } + diff --git a/website/src/partials/data_enhancement/AutofillFeature.tsx b/website/src/partials/data_enhancement/AutofillFeature.tsx index 43abf7c0d..44d010f20 100644 --- a/website/src/partials/data_enhancement/AutofillFeature.tsx +++ b/website/src/partials/data_enhancement/AutofillFeature.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { BrowserFrame } from "../BrowserFrame"; import { TwoColumns } from "../general/TwoColumns"; import { useColorMode } from "@docusaurus/theme-common"; @@ -9,59 +8,62 @@ import demoDark from "@site/static/img/data/product_demo_dark.mp4"; import demoLight from "@site/static/img/data/product_demo_light.mp4"; import clsx from "clsx"; import { defaultBorderMixin } from "../styles"; +import { Panel } from "../general/Panel"; export function AutofillFeature() { const { colorMode } = useColorMode(); const isDarkTheme = colorMode === "dark"; return ( - -
- -
+ + +
+ +
- } - right={<> -

- Populate Details for Nike Air Max 90 -

-

- Define a prompt to guide the autofill feature according to - your needs. Consider scenarios such as adding a new - product to your ecommerce store catalog. -

-

- ...or drafting a compelling article -

-

- ...or designing the curriculum of a course -

-

- ...or any creative endeavor you can imagine -

+ } + right={<> +

+ Populate Details for Nike Air Max 90 +

+

+ Define a prompt to guide the autofill feature according to + your needs. Consider scenarios such as adding a new + product to your ecommerce store catalog. +

+

+ ...or drafting a compelling article +

+

+ ...or designing the curriculum of a course +

+

+ ...or any creative endeavor you can imagine +

-

- The ChatGPT plugin for FireCMS leverages OpenAI's - state-of-the-art GPT model to generate content that meets - your requirements. Feel free to edit the generated content - and save it to your database as needed. -

- }/> +

+ The ChatGPT plugin for FireCMS leverages OpenAI's + state-of-the-art GPT model to generate content that meets + your requirements. Feel free to edit the generated content + and save it to your database as needed. +

+ }/> + ); } diff --git a/website/src/partials/data_enhancement/BatchProcessing.tsx b/website/src/partials/data_enhancement/BatchProcessing.tsx index 93df5a5d3..f61a5ec99 100644 --- a/website/src/partials/data_enhancement/BatchProcessing.tsx +++ b/website/src/partials/data_enhancement/BatchProcessing.tsx @@ -11,7 +11,7 @@ export function BatchProcessing() { const { colorMode } = useColorMode(); const isDarkTheme = colorMode === "dark"; return ( - +

Work smarter, not harder

diff --git a/website/src/partials/data_enhancement/DataEnhancementHero.tsx b/website/src/partials/data_enhancement/DataEnhancementHero.tsx index 16753812e..17fd8f063 100644 --- a/website/src/partials/data_enhancement/DataEnhancementHero.tsx +++ b/website/src/partials/data_enhancement/DataEnhancementHero.tsx @@ -1,79 +1,82 @@ import React from "react"; import { useColorMode } from "@docusaurus/theme-common"; -import { CTAButtonMixin, CTACaret, CTAOutlinedButtonMixin, defaultBorderMixin } from "../styles"; +import { CTAButtonMixin, CTACaret, defaultBorderMixin } from "../styles"; import { TwoColumns } from "../general/TwoColumns"; import clsx from "clsx"; +import { Panel } from "../general/Panel"; export function DataEnhancementHero() { const { colorMode } = useColorMode(); const isDarkTheme = colorMode === "dark"; - return + return + -

- ChatGPT - Integration -

-
-

- Discover the power of FireCMS with ChatGPT integration, - now available for you to try out for FREE! Experience a - game-changing autofill feature that not only saves you - time but also increases the accuracy of your data entry. -

-

- Sign up now and experience the power of the latest GPT - models to enhance your data entry and streamline your - business processes. -

+

+ ChatGPT + Integration +

+
+

+ Discover the power of FireCMS with ChatGPT integration, + now available for you to try out for FREE! Experience a + game-changing autofill feature that not only saves you + time but also increases the accuracy of your data entry. +

+

+ Sign up now and experience the power of the latest GPT + models to enhance your data entry and streamline your + business processes. +

+
+ +
+ } + right={<> -
- } - right={<> - - - }/>; + }/> + ; } diff --git a/website/src/partials/data_enhancement/DataStructure.tsx b/website/src/partials/data_enhancement/DataStructure.tsx index a80bcd836..918cd4b6b 100644 --- a/website/src/partials/data_enhancement/DataStructure.tsx +++ b/website/src/partials/data_enhancement/DataStructure.tsx @@ -43,17 +43,6 @@ export function DataStructure() { Get started -

- - Go to subscriptions management - -

); } diff --git a/website/src/partials/data_enhancement/Translations.tsx b/website/src/partials/data_enhancement/Translations.tsx index 38b49b589..30e7ca350 100644 --- a/website/src/partials/data_enhancement/Translations.tsx +++ b/website/src/partials/data_enhancement/Translations.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { BrowserFrame } from "../BrowserFrame"; import { TwoColumns } from "../general/TwoColumns"; import { useColorMode } from "@docusaurus/theme-common"; @@ -9,40 +8,43 @@ import translationLight from "@site/static/img/data/translations_light.png"; import translationDark from "@site/static/img/data/translations_dark.png"; import clsx from "clsx"; import { defaultBorderMixin } from "../styles"; +import { Panel } from "../general/Panel"; export function Translations() { const { colorMode } = useColorMode(); const isDarkTheme = colorMode === "dark"; return ( - -

- Are you managing translations? -

-

- Translate your content to any language with the click of a - button. -

-

- Let FireCMS handle the translation for you. You can then - edit the generated content and save it to your database. -

- } - right={<> -
- Element -
- }/> + + +

+ Are you managing translations? +

+

+ Translate your content to any language with the click of a + button. +

+

+ Let FireCMS handle the translation for you. You can then + edit the generated content and save it to your database. +

+ } + right={<> +
+ Element +
+ }/> + ); } diff --git a/website/src/partials/enterprise/EnterpriseFeatures.tsx b/website/src/partials/enterprise/EnterpriseFeatures.tsx index 72e974c8d..963d7e591 100644 --- a/website/src/partials/enterprise/EnterpriseFeatures.tsx +++ b/website/src/partials/enterprise/EnterpriseFeatures.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { ContainerMixin, ContainerSmallMixin } from "../styles"; +import { ContainerMixin } from "../styles"; import { TwoColumns } from "../general/TwoColumns"; import { Panel } from "../general/Panel"; import AutoModeIcon from "@site/static/img/icons/auto_mode.svg"; @@ -11,58 +11,61 @@ import { BrowserFrame } from "../BrowserFrame"; export function EnterpriseFeatures() { return ( <> + - + -
+
-
- -
-

Why Choose FireCMS?

+
+ +
+

Why Choose FireCMS?

-
+
-

- Every organization has unique content management - requirements. We've designed FireCMS with flexibility - and customization in mind to cater to these diverse - needs. -

+

+ Every organization has unique content management + requirements. We've designed FireCMS with flexibility + and customization in mind to cater to these diverse + needs. +

+ +

+ Firebase offers exceptional scalability, making it an + ideal choice for companies aiming to build products that + can accommodate millions of users. With Firebase/Firestore, you + can focus on your product without concerns about + infrastructure limitations. +

+ } + right={<> +
+
+ SSO integration +
+
+ Advanced data filtering +
+
+ Text search +
+
+ Support SLA +
+
+ Custom integrations +
-

- Firebase offers exceptional scalability, making it an - ideal choice for companies aiming to build products that - can accommodate millions of users. With Firebase/Firestore, you - can focus on your product without concerns about - infrastructure limitations. -

- } - right={<> -
-
- SSO integration -
-
- Advanced data filtering -
-
- Text search -
-
- Support SLA -
-
- Custom integrations
+ }/> -
- }/> + - +

@@ -76,7 +79,7 @@ export function EnterpriseFeatures() {

-
+
*/} -
+ {/*
*/} diff --git a/website/src/partials/enterprise/EnterpriseHero.tsx b/website/src/partials/enterprise/EnterpriseHero.tsx index 47dd57b87..600e477c3 100644 --- a/website/src/partials/enterprise/EnterpriseHero.tsx +++ b/website/src/partials/enterprise/EnterpriseHero.tsx @@ -1,10 +1,11 @@ import React from "react"; -import { CTAButtonMixin } from "../styles"; +import { CTAButtonMixin, CTAOutlinedButtonWhiteMixin } from "../styles"; import { Hero } from "../general/Hero"; export function EnterpriseHero() { return Enterprise @@ -17,7 +18,7 @@ export function EnterpriseHero() { cta={ + className={CTAOutlinedButtonWhiteMixin}> Get in touch } />; diff --git a/website/src/partials/features/DeveloperFeatures.tsx b/website/src/partials/features/DeveloperFeatures.tsx index 3ab0f11b1..f7dec5a29 100644 --- a/website/src/partials/features/DeveloperFeatures.tsx +++ b/website/src/partials/features/DeveloperFeatures.tsx @@ -3,23 +3,18 @@ import React from "react"; // @ts-ignore import pricePreview from "@site/static/img/price.png"; - import { useColorMode } from "@docusaurus/theme-common"; // @ts-ignore import SyntaxHighlighter from "react-syntax-highlighter"; -import { - atomOneLight, - dracula -// @ts-ignore -} from "react-syntax-highlighter/dist/esm/styles/hljs"; +import { atomOneLight, dracula } from "react-syntax-highlighter/dist/esm/styles/hljs"; import { arrowIcon } from "../icons"; import TickIcon from "@site/static/img/icons/check.svg"; import { TwoColumns } from "../general/TwoColumns"; import { Panel } from "../general/Panel"; import clsx from "clsx"; -import { defaultBorderMixin } from "../styles"; +import { ContainerInnerPaddingMixin, ContainerPaddingMixin, defaultBorderMixin } from "../styles"; export function DeveloperFeatures() { @@ -27,9 +22,9 @@ export function DeveloperFeatures() { const isDarkTheme = colorMode === "dark"; return ( - + -

+

For developers

@@ -37,7 +32,7 @@ export function DeveloperFeatures() { reverseSmall={true} animation={false} left={
+ className="p-8 relative flex-col font-mono">
} - right={
+ right={
+ className="flex items-center justify-center text-white w-10 h-10 bg-gray-900 rounded-full shadow flex-shrink-0 "> {arrowIcon}

@@ -115,11 +110,11 @@ export function DeveloperFeatures() { +
+ className="flex items-center justify-center text-white w-10 h-10 bg-gray-900 rounded-full shadow flex-shrink-0 mr-3">
@@ -140,11 +135,11 @@ export function DeveloperFeatures() { ways.

- +
} right={ <>
+ className="relative flex-col font-mono p-8"> - -
+
-
+
+
-
- -
+
+ +
-

- Inline editing -

+

+ Inline editing +

+
+

+ FireCMS provides all the flexibility you + need with the best UX. + Edit your collections and entities using + both a spreadsheet + view and powerful forms. +

+ +

+ Inline editing is very useful when you want to + quickly edit a few fields of a + document. For example, if you have a list of users, + you can quickly edit the + name of the user by clicking on the name and editing + it. +

+ + + Try the demo + +
+ -

- FireCMS provides all the flexibility you - need with the best UX. - Edit your collections and entities using - both a spreadsheet - view and powerful forms. -

- -

- Inline editing is very useful when you want to - quickly edit a few fields of a - document. For example, if you have a list of users, - you can quickly edit the - name of the user by clicking on the name and editing - it. -

- - - Try the demo - - -
- + + -
+
-
- -
+
+ +
-

- Dedicated form view -

+

+ Dedicated form view +

-
+
-

- FireCMS offers more than 20 built-in property - fields, from basic text fields to - complex ones, like multiple file uploads, sortable - arrays, references to - other collections, etc. -

- -

- The form view opens by default in a convenient side - dialog that allows you - to maintain the context you are working on, when you - are done. -

-

- FireCMS is a React CMS, and it offers multiple - extension points where you can - define your custom views. Adding additional custom - view to your form view - can be really useful. - -

- - } - left={<> -
- +

+ FireCMS offers more than 20 built-in property + fields, from basic text fields to + complex ones, like multiple file uploads, sortable + arrays, references to + other collections, etc. +

+ +

+ The form view opens by default in a convenient side + dialog that allows you + to maintain the context you are working on, when you + are done. +

+

+ FireCMS is a React CMS, and it offers multiple + extension points where you can + define your custom views. Adding additional custom + view to your form view + can be really useful. + +

+
+ } + left={
+
+ -
- } - /> +
+
} + /> + + + +
+ +
+
} + left={ +
- -
- -
- } - left={ - <> +
-
+
+ +
+

+ Easy to customise +

-
-
-

- Easy to customise -

-
+

+ FireCMS offers developers an easy way to adapt the + platform to their specific needs while keeping the + initial setup simple. Our practical defaults + can be + conveniently overridden or expanded. +

+

+ Effortlessly integrate your custom form fields as + React components and preview widgets. Moreover, you + can create detailed views related to your entities + or within the main navigation for a truly customized + experience. +

+ +

+ You could add: +

  • A dashboard for your client
    • +
  • A preview of the blog article you are + writing +
    • +
  • A representation of how the content is + going to look like in your app or website. +
    • +
  • And everything you can imagine.
    • +

    -

    - FireCMS offers developers an easy way to adapt the - platform to their specific needs while keeping the - initial setup simple. Our practical defaults - can be - conveniently overridden or expanded. -

    -

    - Effortlessly integrate your custom form fields as - React components and preview widgets. Moreover, you - can create detailed views related to your entities - or within the main navigation for a truly customized - experience. -

    - -

    - You could add: -

  • A dashboard for your client
    • -
  • A preview of the blog article you are - writing -
    • -
  • A representation of how the content is - going to look like in your app or website. -
    • -
  • And everything you can imagine.
    • -

    - - - } - /> +
    + } + /> + ); } diff --git a/website/src/partials/features/FormsFeatures.tsx b/website/src/partials/features/FormsFeatures.tsx new file mode 100644 index 000000000..3121ee64c --- /dev/null +++ b/website/src/partials/features/FormsFeatures.tsx @@ -0,0 +1,3 @@ +export function FormsFeatures() { + +} diff --git a/website/src/partials/features/RealTime.tsx b/website/src/partials/features/RealTime.tsx index 2893bd0c9..4bf474df7 100644 --- a/website/src/partials/features/RealTime.tsx +++ b/website/src/partials/features/RealTime.tsx @@ -51,7 +51,7 @@ function RealTime() {
    -

    FireCMS uses Firestore as a backend, which is a real time +

    FireCMS uses Firestore as a backend, which is a real-time database. This means that any change in the database is reflected in the CMS in real time. diff --git a/website/src/partials/general/Hero.tsx b/website/src/partials/general/Hero.tsx index 1bf2bd457..bd26fcec8 100644 --- a/website/src/partials/general/Hero.tsx +++ b/website/src/partials/general/Hero.tsx @@ -5,23 +5,25 @@ import { PagesBackground } from "./PagesBackground"; export function Hero({ title, subtitle, - cta + cta, + color }: { title: React.ReactNode, subtitle?: React.ReactNode, cta?: React.ReactNode, + color: "primary" | "secondary" }) { return ( <> -

    - -
    +
    + -
    +
    +
    @@ -33,7 +35,7 @@ export function Hero({
    - + {subtitle &&
    {subtitle} diff --git a/website/src/partials/general/PagesBackground.tsx b/website/src/partials/general/PagesBackground.tsx index 803bea430..31bc22676 100644 --- a/website/src/partials/general/PagesBackground.tsx +++ b/website/src/partials/general/PagesBackground.tsx @@ -4,31 +4,9 @@ import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment"; import { useLocation } from "@docusaurus/router"; const LazyHomeHeroNeatGradient = React.lazy(() => import("../../shape/HomeHeroNeatGradient")); -const LazyBlueNeatGradient = React.lazy(() => import("../../shape/BlueNeatGradient")); +const LazyHeroNeatGradient = React.lazy(() => import("../../shape/HeroNeatGradient")); -// function shouldShowAnimation(pathname:string) { -// return ExecutionEnvironment.canUseDOM -// && animationPaths.some((p) => pathname === "/" || pathname.startsWith(p)); -// } -// -// const animationPaths = [ -// "/features", -// "/enterprise", -// "/pricing", -// "/openai", -// "/f/" -// ]; - -export function PagesBackground({ color = "grey" }: { color?: "grey" | "blue" }) { - - // const { pathname } = useLocation(); - // const [showAnimation, setShowAnimation] = React.useState(shouldShowAnimation(pathname)); - // - // useEffect(() => { - // if (shouldShowAnimation(pathname)) { - // setShowAnimation(true); - // } - // }, [ExecutionEnvironment.canUseDOM]); +export function PagesBackground({ color = "grey" }: { color?: "grey" | "primary" | "secondary" }) { return <> ( }> {color === "grey" && } - {color === "blue" && } + {color !== "grey" && } )} diff --git a/website/src/partials/general/Panel.tsx b/website/src/partials/general/Panel.tsx index caab4b089..36ed73768 100644 --- a/website/src/partials/general/Panel.tsx +++ b/website/src/partials/general/Panel.tsx @@ -4,7 +4,7 @@ import clsx from "clsx"; export function Panel({ children, - color = "gray", + color = "white", centered = false, includeMargin = false, includePadding = true, @@ -12,7 +12,7 @@ export function Panel({ innerClassName }: { children: React.ReactNode, - color?: "gray" | "light_gray" | "primary" | "secondary" | "light" | "lighter" | "transparent", + color?: "gray" | "light_gray" | "white" | "primary" | "secondary" | "light" | "lighter" | "transparent", centered?: boolean, includeMargin?: boolean, includePadding?: boolean, @@ -20,13 +20,14 @@ export function Panel({ innerClassName?: string, }) { - const colorClass = color === "transparent" ? "bg-inherit text-text-primary" : - color === "light" ? "bg-light text-text-primary" : - color === "lighter" ? "bg-lighter text-text-primary" : - color === "light_gray" ? "bg-gray-600 text-white" : - color === "gray" ? "bg-gray-800 text-white" : - color === "primary" ? "bg-primary text-white" : - color === "secondary" ? "bg-secondary text-white" : ""; + const colorClass = color === "transparent" ? "text-text-primary" : + color === "white" ? "bg-white text-text-primary" : + color === "light" ? "bg-gray-100 text-text-primary" : + color === "lighter" ? "bg-gray-50 text-text-primary" : + color === "light_gray" ? "bg-gray-600 text-white" : + color === "gray" ? "bg-gray-800 text-white" : + color === "primary" ? "bg-primary text-white" : + color === "secondary" ? "bg-secondary text-white" : ""; return (
    diff --git a/website/src/partials/general/TwoColumns.tsx b/website/src/partials/general/TwoColumns.tsx index 32dbf2161..4ed6d289f 100644 --- a/website/src/partials/general/TwoColumns.tsx +++ b/website/src/partials/general/TwoColumns.tsx @@ -1,13 +1,17 @@ import React from "react"; -import { ContainerMixin } from "../styles"; +import { ContainerMixin, defaultBorderMixin } from "../styles"; +import { LinedSpace } from "../layout/LinedSpace"; +import clsx from "clsx"; export function TwoColumns({ left, right, distribution, reverseSmall, - animation = true + animation = true, + includeBorder }: { + includeBorder?: boolean, left: React.ReactNode, right: React.ReactNode, distribution?: "bigLeft" | "bigRight", @@ -21,7 +25,10 @@ export function TwoColumns({ return (
    + className={clsx(ContainerMixin, + "relative mx-auto", + includeBorder ? defaultBorderMixin : "", + includeBorder ? "border-x border-y-0 border-solid" : "")}>
    + - + href={"https://medicalmotion.com"}> + MedicalMotion Logo - + MedicalMotion Logo @@ -67,6 +72,12 @@ export function Companies() { href={"https://socialincome.org"}> + + + } + + + +
    ; diff --git a/website/src/partials/home/EnterpriseTeaser.tsx b/website/src/partials/home/EnterpriseTeaser.tsx index 8bf4c6923..98a571cc9 100644 --- a/website/src/partials/home/EnterpriseTeaser.tsx +++ b/website/src/partials/home/EnterpriseTeaser.tsx @@ -24,7 +24,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl"; function EnterpriseTeaser() { return ( - +

    FireCMS is used by companies of all sizes

    diff --git a/website/src/partials/home/FeaturesPanels.tsx b/website/src/partials/home/FeaturesPanels.tsx index 74b68443c..50c10f95e 100644 --- a/website/src/partials/home/FeaturesPanels.tsx +++ b/website/src/partials/home/FeaturesPanels.tsx @@ -21,7 +21,7 @@ function FeaturesPanels() { return ( @@ -29,9 +29,9 @@ function FeaturesPanels() {
    -
    +
    -

    +

    FireCMS provides all the flexibility you need with the best UX. Edit your collections and entities using @@ -61,25 +61,22 @@ function FeaturesPanels() {

    -
    -
    - {iconStars} -

    - Consistent Data Management -

    -

    - Establish schemas for your data types and set - validation options -

    -
    + className="mx-auto grid md:grid-cols-2 lg:grid-cols-3 items-start text-xl gap-4 px-8"> +
    + {iconStars} +

    + Consistent Data Management +

    +

    + Establish schemas for your data types and set + validation options +

    + className="relative flex flex-col items-center p-6 rounded-2xl border border-solid "> {gridIcon} -

    +

    Sophisticated Editing Tools

    @@ -91,7 +88,7 @@ function FeaturesPanels() {

    {iconDoor} -

    +

    Role-Based System

    @@ -104,7 +101,7 @@ function FeaturesPanels() {

    {iconCards} -

    +

    Flexible Customization

    @@ -114,7 +111,7 @@ function FeaturesPanels() {

    {iconArrows} -

    +

    Subcollection Compatibility

    @@ -127,7 +124,7 @@ function FeaturesPanels() { {iconRadar} -

    +

    Real-Time Support

    diff --git a/website/src/partials/home/FeaturesTeaser.tsx b/website/src/partials/home/FeaturesTeaser.tsx index e70845a43..e7edd4858 100644 --- a/website/src/partials/home/FeaturesTeaser.tsx +++ b/website/src/partials/home/FeaturesTeaser.tsx @@ -23,12 +23,7 @@ import customFieldDarkVideo from "@site/static/img/custom_fields_dark.mp4"; import { useColorMode } from "@docusaurus/theme-common"; import { lightningIcon } from "../icons"; import { TwoColumns } from "../general/TwoColumns"; -import { - ContainerPaddingMixin, - CTACaret, - CTAOutlinedButtonMixin, - CTAOutlinedButtonWhiteMixin, defaultBorderMixin -} from "../styles"; +import { ContainerPaddingMixin, CTACaret, CTAOutlinedButtonMixin, defaultBorderMixin } from "../styles"; import clsx from "clsx"; function FeaturesTeaser() { @@ -37,9 +32,10 @@ function FeaturesTeaser() { const isDarkTheme = colorMode === "dark"; return ( -

    +
    @@ -88,7 +84,7 @@ function FeaturesTeaser() {
    } right={<> -
    +