diff --git a/website/docs/collections/multiple_filters.md b/website/docs/collections/multiple_filters.md index 5f10daf04..72c729260 100644 --- a/website/docs/collections/multiple_filters.md +++ b/website/docs/collections/multiple_filters.md @@ -4,7 +4,7 @@ title: Multiple filters in collection views sidebar_label: Multiple filters --- -Unfortunately Firestore is limited to a single `where` clause per query by default. +Firestore is a bit limited when filtering and sorting. limited to a single `where` clause per query by default. This means that filtering by multiple fields is not possible out of the box. Anyhow, you can define indexes in Firestore to allow queries per multiple fields. diff --git a/website/docs/migrating_from_v2.mdx b/website/docs/migrating_from_v2.mdx index accb70cfb..a670efbb4 100644 --- a/website/docs/migrating_from_v2.mdx +++ b/website/docs/migrating_from_v2.mdx @@ -26,6 +26,20 @@ By doing this you will **not need to specify your Firebase project credentials** since the service will be able to access your project directly. You will only need to specify the **project id**. +## Initialize a FireCMS 3 project in a new folder + +It is advisable to create a new project from scratch and then migrate your collections and views to +the new folder. + +In order to do so, run +``` +yarn create firecms-app +``` +and create a new project in a new folder. + +The CLI will initialize an empty project with the new format, and all the configuration files +ready so you don't need to worry about it. + ## Migrating collections to the new format @@ -36,17 +50,19 @@ code like until now. Also, you can have collections defined in both places, and decide if the code defined collections can be modified by the user or not. +Please note that properties defined in code will not be editable by the user, unless you +explicitly mark them as `editable: true`. + ## Changing the import The package has been renamed to `@firecms/firebase` instead of `firecms`. You need to update your imports to use the new package name. - ## New format Since it is now possible to deploy FireCMS in our hosted service, the output -of your project needs to be a in a specific format. +of your project needs to be in a specific format. The `index.ts` file should export a `FireCMSAppConfig` object, which is defined as follows: diff --git a/website/docs/navigation/app_config.mdx b/website/docs/navigation/app_config.mdx index f3f698189..40fe610e0 100644 --- a/website/docs/navigation/app_config.mdx +++ b/website/docs/navigation/app_config.mdx @@ -3,11 +3,17 @@ id: app_config title: App Config --- -When creating a FireCMS app, you will **either** be using the components: -- `FirebaseCMSApp` Default implementation of FireCMS that uses Firebase Auth, Firestore -and Firebase Storage. -- `FireCMSApp` Lower level component that allows you to provide your own implementations -of the different services and more customization. +The app config is the main configuration object of FireCMS. It is defined +by the interface `FireCMSAppConfig`. In order to customize the CMS, you need +to create a project in [app.firecms.co](https://app.firecms.co) and +initialise a new project in code with `yarn create firecms-app`. + +After those steps are ready you can use the `FireCMSAppConfig` export to add +your own customizations, like custom reusable properties or fields, collections, +entity views, cms views, etc. + + + ### Navigation @@ -30,8 +36,7 @@ collections that get mapped to CMS views, or create your own top level React vie ### Customization -Let's see all the customization options available for `FirebaseCMSApp` (most -of them are also available for `FireCMSApp`). +Let's see all the customization options available: * `name`: Name of the app, displayed as the main title and in the tab title diff --git a/website/docs/openai.md b/website/docs/openai.md deleted file mode 100644 index bae44c537..000000000 --- a/website/docs/openai.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: openai -title: ChatGPT plugin -sidebar_label: ✨ ChatGPT plugin ---- - - -The OpenAI plugin allows you to use the **OpenAI API** to generate content using -the latest **GPT models**. This plugin is able to understand the structure of -your -data and generate content that fits your schema. - -

- Data enhancement UI -

- -In order to be able to use this plugin you need to have a valid subscription. - -You can add the plugin in a couple of simple steps. - -## Install the plugin - -:::note -Make sure you have a working FireCMS installation. If you don't, you can -follow the [quickstart](/docs/quickstart). -::: - -```bash -npm install @firecms/data_enhancement -``` - -or - -```bash -yarn add @firecms/data_enhancement -``` - -The plugin is then initialised as a React hook, which is added to the `plugins` -array of the `FirebaseCMSApp` (or `FireCMS` if you are using a custom app) -component. - -```tsx -import React from "react"; -import { FirebaseCMSApp } from "@firecms/core"; -import "typeface-rubik"; -import "@fontsource/ibm-plex-mono"; - -import { useDataEnhancementPlugin } from "@firecms/data_enhancement"; - -// TODO: Replace with your Firebase config -const firebaseConfig = { - apiKey: "", - authDomain: "", - projectId: "", - storageBucket: "", - messagingSenderId: "", - appId: "" -}; - -export default function App() { - - const dataEnhancementPlugin = useDataEnhancementPlugin(); - - return ; -} -``` - -### Configuring the plugin - -The only optional prop is the `getConfigForPath` callback, which allows you to -enable or disable the plugin for specific collections. - -```typescript -const dataEnhancementPlugin = useDataEnhancementPlugin({ - // Optional callback for defining which collections should be enhanced - getConfigForPath: ({ path }) => { - return true; - } -}); -``` - -## How does it work? - -This plugin is able to understand the structure of your data and generate -content that fits your schema. - -Some tips in order to get the best results: - -- Make sure you select the **right data** type for your fields. -- The **field names** are used to generate the content and are usually enough to - generate good results. If you want to get even better results, you can - **add a description** to your fields. This will help the plugin understand the - context of your data and generate better results. -- The **collection name** is important as well. -- You can establish **relations between fields** and the plugin will pick it up. - e.g. if you have a field called `author` and another field called `book`, the - plugin will understand that the author is related to the book and will - generate content accordingly. You can use this for making **summaries, reviews, - translations, SEO content**, etc. - -## Pricing and subscriptions - -You have a 20 **free weekly usages** of the plugin, **no subscription needed**! - -After that, you will need to create a subscription in -the [FireCMS dashboard](https://app.firecms.co/subscriptions). - -You need to specify the Firebase project id you would like to use the plugin -with, in the website. And that's it! - -You will not need to specify a subscription key when configuring the plugin. - - -Create a subscription - diff --git a/website/docs/what_is_new_v3.mdx b/website/docs/what_is_new_v3.mdx index 02b2b0d65..fcaee7435 100644 --- a/website/docs/what_is_new_v3.mdx +++ b/website/docs/what_is_new_v3.mdx @@ -1,7 +1,7 @@ --- id: what_is_new_v3 -title: What's new in FireCMS 3.0 -sidebar_label: What's new in FireCMS 3.0 +title: ✨ What's new in FireCMS 3.0 +sidebar_label: ✨ What's new in FireCMS 3.0 --- The new version of FireCMS is a major release that brings a lot of new features diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 79cfba2f8..1c1479605 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -86,8 +86,9 @@ module.exports = { } ], colorMode: { - // defaultMode: "system", - respectPrefersColorScheme: true, + defaultMode: "dark", + disableSwitch: true, + // respectPrefersColorScheme: false, }, navbar: { title: "FireCMS", @@ -104,6 +105,10 @@ module.exports = { label: "Features", to: "/features", }, + { + label: "OpenAI GPT integration", + to: "/openai", + }, { label: "Advanced content editing", to: "/f/advanced_forms", diff --git a/website/sidebars.js b/website/sidebars.js index b0a77dba5..2ad99ac3a 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -5,19 +5,10 @@ module.exports = { "label": "Introduction", "id": "intro" }, - { - "type": "doc", - "label": "Introduction", - "id": "what_is_new_v3" - }, - { - "type": "doc", - "label": "Migrating from v2", - "id": "migrating_from_v2" - }, + "what_is_new_v3", + "migrating_from_v2", "quickstart", "firebase_setup", - "openai", { "type":"category", "label":"Collections", diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 614a44097..e6e2b8b9a 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -1,3 +1,53 @@ +/* cyrillic-ext */ +@font-face { + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/ibmplexmono/v19/-F63fjptAgt5VM-kVkqdyU8n1iIq131nj-otFQ.woff2) format('woff2'); + unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; +} + +/* cyrillic */ +@font-face { + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/ibmplexmono/v19/-F63fjptAgt5VM-kVkqdyU8n1isq131nj-otFQ.woff2) format('woff2'); + unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} + +/* vietnamese */ +@font-face { + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/ibmplexmono/v19/-F63fjptAgt5VM-kVkqdyU8n1iAq131nj-otFQ.woff2) format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/ibmplexmono/v19/-F63fjptAgt5VM-kVkqdyU8n1iEq131nj-otFQ.woff2) format('woff2'); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'IBM Plex Mono'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url(https://fonts.gstatic.com/s/ibmplexmono/v19/-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-o.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + /* stylelint-disable docusaurus/copyright-header */ /* cyrillic-ext */ @font-face { @@ -132,20 +182,66 @@ html[data-theme='dark'] { --ifm-custom-navbar-background-color: rgba(48, 49, 55, 0.33); - --ifm-background-color: rgb(5, 6, 11); + --ifm-background-color: #242628; --ifm-background-surface-color: #232328; --ifm-color-emphasis-100: #232328; /*--ifm-background-surface-color: #242526;*/ } +article header { + margin-top: 40px; + margin-bottom: 16px; +} + +article h2 { + margin-top: 40px; + margin-bottom: 16px; +} + +article blockquote { + margin-top: 16px; + margin-bottom: 16px; +} + +.sidebarViewport_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module { + background-color: var(--ifm-background-color); + border: none; +} + +@media (min-width: calc(84rem + 600px)) { + .docSidebarContainer_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module { + width: calc((100vw - 84rem) / 2) !important; + } + + .sidebarViewport_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module { + width: calc((100vw - 84rem) / 2); + display: flex; + flex-direction: column; + align-items: end; + } + main .container { + margin-left: 0 !important; + } +} + .navbar.navbar--fixed-top { + padding: 0; background-color: var(--ifm-custom-navbar-background-color); } +.navbar__logo{ + width: 32px; +} + + .navbar.navbar--fixed-top:not(.navbar-sidebar--show) { backdrop-filter: blur(8px); } +.navbar__link { + font-weight: var(--ifm-font-weight-bold); +} + [role='banner'] { z-index: 5; } diff --git a/website/src/css/tailwind.css b/website/src/css/tailwind.css index 516630558..61f3a96c6 100644 --- a/website/src/css/tailwind.css +++ b/website/src/css/tailwind.css @@ -4,3 +4,8 @@ @tailwind base; @tailwind components; @tailwind utilities; + + +.navbar__items--left .navbar__item { + @apply font-mono font-bold uppercase; +} diff --git a/website/src/pages/enterprise.tsx b/website/src/pages/enterprise.tsx index 85472d546..45b336ff4 100644 --- a/website/src/pages/enterprise.tsx +++ b/website/src/pages/enterprise.tsx @@ -6,7 +6,7 @@ import { EnterpriseFeatures } from "../partials/enterprise/EnterpriseFeatures"; import { EnterpriseArchitectures } from "../partials/enterprise/EnterpriseArchitectures"; -import { CTAButtonMixin, CTAOutlinedButtonWhiteMixin } from "../partials/utils"; +import { CTAButtonMixin, CTAOutlinedButtonWhiteMixin } from "../partials/styles"; import { Panel } from "../partials/general/Panel"; function Enterprise() { diff --git a/website/src/pages/pricing.tsx b/website/src/pages/pricing.tsx index 4a57fd664..7cda3dc41 100644 --- a/website/src/pages/pricing.tsx +++ b/website/src/pages/pricing.tsx @@ -16,12 +16,6 @@ function FeaturesPage() { title={"Pricing - FireCMS"} description="Free self-hosted version and free Cloud tier, adaptive pricing for everyone"> - - Get a Demo - - diff --git a/website/src/partials/BrowserFrame.tsx b/website/src/partials/BrowserFrame.tsx index adc01f729..a75e2586d 100644 --- a/website/src/partials/BrowserFrame.tsx +++ b/website/src/partials/BrowserFrame.tsx @@ -3,9 +3,9 @@ import React from 'react'; export function BrowserFrame({ children }: { children: React.ReactNode }) { return
+ className="rounded-lg mx-auto w-fit flex flex-col content-center justify-center border border-solid dark:border-gray-800 border-gray-200">
+ className="h-11 rounded-t-lg bg-gray-900 flex justify-start items-center gap-1.5 px-3"> diff --git a/website/src/partials/Separator.tsx b/website/src/partials/Separator.tsx index b5f1cac16..8d0a624ba 100644 --- a/website/src/partials/Separator.tsx +++ b/website/src/partials/Separator.tsx @@ -2,5 +2,5 @@ import React from "react"; export const Separator = () => (
+ className="mt-24 mb-24 left-0 right-0 bottom-0 m-auto w-px p-px h-20 bg-gray-200 transform translate-y-1/2"/> ); diff --git a/website/src/partials/data_enhancement/AutofillFeature.tsx b/website/src/partials/data_enhancement/AutofillFeature.tsx index a8db881a1..d2e97d434 100644 --- a/website/src/partials/data_enhancement/AutofillFeature.tsx +++ b/website/src/partials/data_enhancement/AutofillFeature.tsx @@ -25,7 +25,7 @@ export function AutofillFeature() { className={" flex content-center justify-center"}>
} @@ -69,7 +58,7 @@ export function DataEnhancementHero() { className={" flex content-center justify-center"}>
}/> @@ -128,7 +123,7 @@ export function DeveloperFeatures() {
+ className="flex items-center justify-center text-white w-10 h-10 bg-gray-800 rounded-full shadow flex-shrink-0 mr-3">
@@ -137,30 +132,25 @@ export function DeveloperFeatures() {
-

+

FireCMS is a headless CMS built to work with every existing Firebase/Firestore project. It does not enforce any data structure.

-

+

Use the integrated hooks and callbacks to integrate your business logic in multiple ways.

-

- * Some features can only be enabled by - using the self-hosted version, but will be - available in the FireCMS Cloud version soon. -

} right={ <>
+ className="flex items-center justify-center text-white w-10 h-10 bg-gray-800 rounded-full shadow flex-shrink-0 mr-3">
@@ -69,7 +69,7 @@ function Features() {
-

+

FireCMS provides all the flexibility you need with the best UX. Edit your collections and entities using @@ -77,7 +77,7 @@ function Features() { 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, @@ -104,7 +104,7 @@ function Features() {

+ className="flex items-center justify-center text-white w-10 h-10 bg-gray-800 rounded-full shadow flex-shrink-0 mr-3">
@@ -114,7 +114,7 @@ function Features() {
-

+

FireCMS offers more than 20 built-in property fields, from basic text fields to complex ones, like multiple file uploads, sortable @@ -122,13 +122,13 @@ function Features() { 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 @@ -146,7 +146,7 @@ function Features() { maxWidth: 540, aspectRatio: 508 / 589 }} - className={"rounded-xl border border-solid dark:border-slate-800 border-slate-200 border-slate-200"} + className={"rounded-xl border border-solid dark:border-gray-800 border-gray-200 border-gray-200"} width="100%" loop autoPlay muted>

-

+

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 @@ -205,7 +205,7 @@ function Features() { experience.

-

+

You could add:

  • A dashboard for your client
  • A preview of the blog article you are diff --git a/website/src/partials/features/RealTime.tsx b/website/src/partials/features/RealTime.tsx index a8c39a97a..2893bd0c9 100644 --- a/website/src/partials/features/RealTime.tsx +++ b/website/src/partials/features/RealTime.tsx @@ -26,7 +26,7 @@ import customFieldDarkVideo from "@site/static/img/custom_fields_dark.mp4"; import { useColorMode } from "@docusaurus/theme-common"; import { TwoColumns } from "../general/TwoColumns"; -import { ContainerMixin, ContainerSmallMixin } from "../utils"; +import { ContainerMixin, ContainerSmallMixin } from "../styles"; import { BrowserFrame } from "../BrowserFrame"; import { Panel } from "../general/Panel"; @@ -41,7 +41,7 @@ function RealTime() {
    + className="flex items-center justify-center text-white w-10 h-10 bg-gray-800 rounded-full shadow flex-shrink-0 mr-3">
    diff --git a/website/src/partials/general/EnterpriseTeaser.tsx b/website/src/partials/general/EnterpriseTeaser.tsx index 88c517978..9e8165595 100644 --- a/website/src/partials/general/EnterpriseTeaser.tsx +++ b/website/src/partials/general/EnterpriseTeaser.tsx @@ -28,7 +28,7 @@ export function EnterpriseTeaser() {
    + className="w-full py-2 border-b-2 border-gray-400 flex justify-between gap-2">
    diff --git a/website/src/partials/general/Hero.tsx b/website/src/partials/general/Hero.tsx index d3c3f53d7..64c0d1e4e 100644 --- a/website/src/partials/general/Hero.tsx +++ b/website/src/partials/general/Hero.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { ContainerMixin } from "../utils"; +import { ContainerMixin } from "../styles"; export function Hero({ title, diff --git a/website/src/partials/general/Newsletter.tsx b/website/src/partials/general/Newsletter.tsx index 80739f7c1..74fc5866b 100644 --- a/website/src/partials/general/Newsletter.tsx +++ b/website/src/partials/general/Newsletter.tsx @@ -45,14 +45,14 @@ export const Newsletter = () => {
    - {/*

    */} + {/*

    */} {/* Stay in the loop*/} {/*

    */}
    @@ -81,7 +81,7 @@ export const Newsletter = () => { className="w-full py-2 flex justify-between gap-2"> { value={email}/>
    diff --git a/website/src/partials/general/Panel.tsx b/website/src/partials/general/Panel.tsx index d9d0924f9..edf9ae89e 100644 --- a/website/src/partials/general/Panel.tsx +++ b/website/src/partials/general/Panel.tsx @@ -1,5 +1,6 @@ import React from "react"; -import { ContainerMixin } from "../utils"; +import { ContainerMixin, defaultBorderMixin } from "../styles"; +import clsx from "clsx"; export function Panel({ children, @@ -9,23 +10,29 @@ export function Panel({ contained = false }: { children: React.ReactNode, - color?: "gray" | "primary" | "secondary", + color?: "gray" | "primary" | "secondary" | "light", centered?: boolean, includeMargin?: boolean, contained?: boolean }) { - const colorClass = color === "gray" ? "bg-slate-100 dark:bg-slate-900" : - color === "primary" ? "bg-primary text-white" : - color === "secondary" ? "bg-secondary text-white" : ""; + const colorClass = color === "light" ? "bg-light" : + color === "gray" ? "bg-gray-100 dark:bg-gray-900" : + color === "primary" ? "bg-primary text-white" : + color === "secondary" ? "bg-secondary text-white" : ""; return (
    -
    -
    - {children} +
    +
    + {children}
    diff --git a/website/src/partials/general/ThreeColumns.tsx b/website/src/partials/general/ThreeColumns.tsx index 28f7887af..c6ae35e35 100644 --- a/website/src/partials/general/ThreeColumns.tsx +++ b/website/src/partials/general/ThreeColumns.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { ContainerMixin } from "../utils"; +import { ContainerMixin } from "../styles"; export function ThreeColumns({ left, diff --git a/website/src/partials/general/TwoColumns.tsx b/website/src/partials/general/TwoColumns.tsx index 7c3b540ae..32dbf2161 100644 --- a/website/src/partials/general/TwoColumns.tsx +++ b/website/src/partials/general/TwoColumns.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { ContainerMixin } from "../utils"; +import { ContainerMixin } from "../styles"; export function TwoColumns({ left, diff --git a/website/src/partials/home/Companies.tsx b/website/src/partials/home/Companies.tsx index 31d7c798d..2bfaadeab 100644 --- a/website/src/partials/home/Companies.tsx +++ b/website/src/partials/home/Companies.tsx @@ -20,7 +20,7 @@ export function Companies() { return -

    +

    Trusted by

    + className={" text-gray-500 dark:text-gray-400 text-center text-sm"}> To get your project featured here, please contact us at
    + className="flex items-center justify-center text-white w-10 h-10 bg-gray-800 rounded-full shadow flex-shrink-0 mr-4"> {lightningIcon}
    @@ -38,7 +38,7 @@ function FeaturesPanels() {
    -

    +

    FireCMS provides all the flexibility you need with the best UX. Edit your collections and entities using @@ -60,7 +60,7 @@ function FeaturesPanels() { {/* maxHeight: 589,*/} {/* aspectRatio: 508 / 589*/} {/* }}*/} - {/* className={"rounded-xl border border-solid dark:border-slate-800 border-slate-200 border-slate-200"}*/} + {/* className={"rounded-xl border border-solid dark:border-gray-800 border-gray-200 border-gray-200"}*/} {/* width="100%" loop autoPlay muted>*/} {/*

    + className="relative flex flex-col items-center p-6 bg-white dark:bg-gray-900 rounded border border-solid dark:border-gray-800 border-gray-200"> {iconStars}

    Consistent Data Management

    -

    +

    Establish schemas for your data types and set validation options

    @@ -92,12 +92,12 @@ function FeaturesPanels() { data-aos="fade-up" data-aos-delay="150">
    + className="relative flex flex-col items-center p-6 bg-white dark:bg-gray-900 rounded border border-solid dark:border-gray-800 border-gray-200"> {gridIcon}

    Sophisticated Editing Tools

    -

    +

    Spreadsheet-style editing, robust forms, file storage, entity references...

    @@ -108,12 +108,12 @@ function FeaturesPanels() { data-aos="fade-up" data-aos-delay="200">
    + className="relative flex flex-col items-center p-6 bg-white dark:bg-gray-900 rounded border border-solid dark:border-gray-800 border-gray-200"> {iconDoor}

    Role-Based System

    -

    +

    Configure app settings according to the logged-in user

    @@ -125,12 +125,12 @@ function FeaturesPanels() { data-aos="fade-up" data-aos-delay="100">
    + className="relative flex flex-col items-center p-6 bg-white dark:bg-gray-900 rounded border border-solid dark:border-gray-800 border-gray-200"> {iconCards}

    Flexible Customization

    -

    +

    Incorporate custom form fields, hooks, and full views based on React

    @@ -140,12 +140,12 @@ function FeaturesPanels() { data-aos="fade-up" data-aos-delay="150">
    + className="relative flex flex-col items-center p-6 bg-white dark:bg-gray-900 rounded border border-solid dark:border-gray-800 border-gray-200"> {iconArrows}

    Subcollection Compatibility

    -

    +

    Seamless navigation for collections within other entities

    @@ -154,14 +154,14 @@ function FeaturesPanels() { data-aos="fade-up" data-aos-delay="200">
    + className="relative flex flex-col items-center p-6 bg-white dark:bg-gray-900 rounded border border-solid dark:border-gray-800 border-gray-200"> {iconRadar}

    Real-Time Support

    -

    +

    Live updates in every view of your CMS, ideal for background updates

    diff --git a/website/src/partials/home/FeaturesTeaser.tsx b/website/src/partials/home/FeaturesTeaser.tsx index 4c9bc0494..60e588df6 100644 --- a/website/src/partials/home/FeaturesTeaser.tsx +++ b/website/src/partials/home/FeaturesTeaser.tsx @@ -27,7 +27,7 @@ import { CTACaret, CTAOutlinedButtonMixin, CTAOutlinedButtonWhiteMixin -} from "../utils"; +} from "../styles"; function FeaturesTeaser() { @@ -45,7 +45,7 @@ function FeaturesTeaser() {
    + className="flex items-center justify-center text-white w-10 h-10 bg-gray-800 rounded-full shadow flex-shrink-0 mr-3"> {lightningIcon}
    @@ -55,7 +55,7 @@ function FeaturesTeaser() {
    -

    +

    FireCMS offers both flexibility and an excellent user experience. Edit your collections and entities @@ -64,11 +64,11 @@ function FeaturesTeaser() { forms.

    -

    +

    Generate Attractive Views from Your Schemas Automatically

    -

    +

    FireCMS creates CRUD views based on your configurations with ease. It's simple to set up for @@ -97,7 +97,7 @@ function FeaturesTeaser() { maxWidth: 540, aspectRatio: 508 / 589 }} - className={"rounded-xl border border-solid dark:border-slate-800 border-slate-200 border-slate-200"} + className={"rounded-xl border border-solid dark:border-gray-800 border-gray-200 border-gray-200"} width="100%" loop autoPlay muted>

    -

    +

    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 diff --git a/website/src/partials/home/FireCMSCloudIntro.tsx b/website/src/partials/home/FireCMSCloudIntro.tsx index 376aa10c2..514689d4d 100644 --- a/website/src/partials/home/FireCMSCloudIntro.tsx +++ b/website/src/partials/home/FireCMSCloudIntro.tsx @@ -1,15 +1,7 @@ import React from "react" -import collectionEditorVideo -// @ts-ignore - from "@site/static/img/collection_editor_preview.mp4"; -import { - ContainerMixin, - CTAButtonMixin, - CTACaret, - CTAOutlinedButtonMixin, CTAOutlinedButtonWhiteMixin -} from "../utils"; -import useBaseUrl from "@docusaurus/useBaseUrl"; +import collectionEditorVideo from "@site/static/img/collection_editor_preview.mp4"; +import { ContainerMixin, CTACaret, CTAOutlinedButtonMixin, CTAOutlinedButtonWhiteMixin } from "../styles"; export const FireCMSCloudIntro = () => { @@ -17,11 +9,11 @@ export const FireCMSCloudIntro = () => {

    +
    {discordIcon} diff --git a/website/src/partials/home/HeroHome.tsx b/website/src/partials/home/HeroHome.tsx index 0559cb6bd..d229bb60a 100644 --- a/website/src/partials/home/HeroHome.tsx +++ b/website/src/partials/home/HeroHome.tsx @@ -6,7 +6,7 @@ import darkModeVideo from "@site/static/img/full_screen_dark.mp4"; // @ts-ignore import lightModeVideo from "@site/static/img/full_screen_light.mp4"; import { useColorMode } from "@docusaurus/theme-common"; -import { ContainerMixin } from "../utils"; +import { ContainerMixin } from "../styles"; function HeroHome({}) { @@ -20,7 +20,7 @@ function HeroHome({}) { style={{ aspectRatio: 1440 / 587 }} - className={"my-4 rounded-xl border border-solid dark:border-slate-800 border-slate-200"} + className={"my-4 rounded-xl border border-solid dark:border-gray-800 border-gray-200"} width="100%" loop autoPlay muted>
    + className="flex items-center justify-center text-white w-10 h-10 bg-gray-800 rounded-full shadow flex-shrink-0 mr-4">
    @@ -89,7 +89,7 @@ function OpenAITeaser() { className={" flex content-center justify-center"}>