From 1e7e36c475db4b836d6587322edc62a57b226f1b Mon Sep 17 00:00:00 2001
From: francesco <francesco@camberi.com>
Date: Thu, 1 Feb 2024 13:04:49 +0100
Subject: [PATCH] Web updates

---
 website/docusaurus.config.js                  |  16 ++-
 .../pages/{enterprise.tsx => admin_panel.tsx} |   6 +-
 website/src/pages/index.tsx                   |  11 +-
 website/src/partials/Quotes.tsx               |   2 +-
 .../enterprise/EnterpriseArchitectures.tsx    |   7 +-
 .../enterprise/EnterpriseFeatures.tsx         | 134 +++++++++---------
 .../partials/enterprise/EnterpriseHero.tsx    |   9 +-
 website/src/partials/home/ManageYour.tsx      |   2 +-
 .../partials/pricing/FireCMSCloudVersions.tsx |  24 ++--
 website/src/partials/styles.tsx               |   2 +-
 website/src/theme/Footer/Layout/index.js      |   4 +-
 .../versioned_docs/version-2.0.0/index.mdx    |  33 +++--
 12 files changed, 126 insertions(+), 124 deletions(-)
 rename website/src/pages/{enterprise.tsx => admin_panel.tsx} (88%)

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 33a44696b..cd01da05d 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -137,6 +137,10 @@ module.exports = {
                             label: "OpenAI GPT integration",
                             to: "/openai",
                         },
+                        {
+                            label: "Your admin panel",
+                            to: "/admin_panel",
+                        },
                         {
                             label: "The most powerful backend",
                             to: "/f/backend_extension",
@@ -155,14 +159,14 @@ module.exports = {
                     position: "left"
                 },
                 {
-                    type: "docSidebar",
-                    sidebarId: "docsSidebar",
-                    label: "Docs",
+                    label: "Blog",
+                    to: "blog",
                     position: "left"
                 },
                 {
-                    label: "Blog",
-                    to: "blog",
+                    type: "docSidebar",
+                    sidebarId: "docsSidebar",
+                    label: "Docs",
                     position: "left"
                 },
                 {
@@ -199,7 +203,7 @@ module.exports = {
                     to: "https://demo.firecms.co",
                     label: "Demo",
                     // className: "btn shadow-none mr-2 px-6 py-2  uppercase",
-                    className: "border-1 border-slate-600 dark:border-slate-700  uppercase rounded border-solid dark:text-white text-slate-800 hover:text-slate-700 dark:hover:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-900 h dark:hover:border-slate-800 text-center btn mr-3 px-6 py-2",
+                    className: "border-1 border-slate-600 dark:border-slate-700  uppercase rounded border-solid dark:text-white text-white hover:text-slate-100 dark:hover:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-900 dark:hover:border-slate-800 text-center btn mr-3 px-6 py-2",
                     "aria-label": "Open the demo project",
                     position: "right"
                 },
diff --git a/website/src/pages/enterprise.tsx b/website/src/pages/admin_panel.tsx
similarity index 88%
rename from website/src/pages/enterprise.tsx
rename to website/src/pages/admin_panel.tsx
index 94365fe13..90bad0a58 100644
--- a/website/src/pages/enterprise.tsx
+++ b/website/src/pages/admin_panel.tsx
@@ -7,9 +7,9 @@ import { EnterpriseArchitectures } from "../partials/enterprise/EnterpriseArchit
 import { CTAOutlinedButtonWhiteMixin } from "../partials/styles";
 import { Panel } from "../partials/general/Panel";
 
-function Enterprise() {
+function AdminPanel() {
     return (
-        <Layout title="Enterprise" description="Enterprise">
+        <Layout title="Your admin panel" description="Customize FireCMS to exactly met the needs of your business">
             <div className="flex flex-col min-h-screen">
 
                 <main className="flex-grow">
@@ -35,4 +35,4 @@ function Enterprise() {
     );
 }
 
-export default Enterprise;
+export default AdminPanel;
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 0061940fb..b5789629a 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -24,9 +24,10 @@ function Home() {
             description="Awesome headless CMS based Firestore/Firebase and React, and completely open-source">
             <Head>
                 <title>FireCMS - Firestore/Firebase headless CMS</title>
-                <meta property="og:title" content="FireCMS - Firestore/Firebase headless CMS" />
-                <meta property="og:description" content="Awesome headless CMS based Firestore/Firebase and React, and completely open-source" />
-                <meta property="og:image" content="/img/firecms_logo.svg" />
+                <meta property="og:title" content="FireCMS - Firestore/Firebase headless CMS"/>
+                <meta property="og:description"
+                      content="Awesome headless CMS based Firestore/Firebase and React, and completely open-source"/>
+                <meta property="og:image" content="/img/firecms_logo.svg"/>
             </Head>
 
             <HeroHome/>
@@ -37,10 +38,10 @@ function Home() {
 
                 <FirebaseIntro/>
 
-                <QuotesSection/>
-
                 <ManageYour/>
 
+                <QuotesSection/>
+
                 <Companies/>
 
                 <FeaturesTeaser/>
diff --git a/website/src/partials/Quotes.tsx b/website/src/partials/Quotes.tsx
index f8e4064e9..6979255af 100644
--- a/website/src/partials/Quotes.tsx
+++ b/website/src/partials/Quotes.tsx
@@ -45,7 +45,7 @@ const quotes = [
 
 export const QuotesSection: React.FC = () => {
     return (
-        <Panel color={"light"} includePadding={false}>
+        <Panel color={"lighter"} includePadding={false}>
             <div
                 className="py-16 px-8 flex flex-row gap-4 overflow-auto no-scrollbar">
                 {
diff --git a/website/src/partials/enterprise/EnterpriseArchitectures.tsx b/website/src/partials/enterprise/EnterpriseArchitectures.tsx
index 5b081cbd5..c64c42e55 100644
--- a/website/src/partials/enterprise/EnterpriseArchitectures.tsx
+++ b/website/src/partials/enterprise/EnterpriseArchitectures.tsx
@@ -15,8 +15,7 @@ export function EnterpriseArchitectures() {
             </Panel>
 
             <TwoColumns
-                left={<div className={"text-2xl "}>
-
+                left={<div className={"text-2xl p-8"}>
 
                     <h2 className={"h2"}>Adaptable to Your Architecture</h2>
                     <p>
@@ -47,14 +46,14 @@ export function EnterpriseArchitectures() {
                     </p>
 
                 </div>}
-                right={<>
+                right={<div className={"p-8 flex flex-col"}>
                     <SimpleArchitecture className={"w-full mt-8"}/>
                     <label className={"text-sm text-center m-4"}>Simple
                         architecture</label>
                     <ComplexArchitecture className={"w-full mt-16"}/>
                     <label className={"text-sm text-center m-4"}>Architecture
                         using microservices</label>
-                </>
+                </div>
                 }/>
 
         </>
diff --git a/website/src/partials/enterprise/EnterpriseFeatures.tsx b/website/src/partials/enterprise/EnterpriseFeatures.tsx
index 963d7e591..19ec27634 100644
--- a/website/src/partials/enterprise/EnterpriseFeatures.tsx
+++ b/website/src/partials/enterprise/EnterpriseFeatures.tsx
@@ -11,73 +11,7 @@ import { BrowserFrame } from "../BrowserFrame";
 export function EnterpriseFeatures() {
     return (
         <>
-            <Panel color={"white"}>
-
-                <TwoColumns
-                    left={<>
-
-                        <div className={"flex items-center my-4 "}>
-
-                            <div
-                                className="flex items-center justify-center text-white w-10 h-10 bg-gray-800 rounded-full shadow flex-shrink-0 mr-3">
-                                <AutoModeIcon width={"20px"} height={"20px"}/>
-                            </div>
-                            <h2 className={"h2 m-0"}>Why Choose FireCMS?</h2>
-
-                        </div>
-
-
-                        <p className={"text-2xl "}>
-                            Every organization has unique content management
-                            requirements. We've designed FireCMS with flexibility
-                            and customization in mind to cater to these diverse
-                            needs.
-                        </p>
-
-                        <p className={"text-2xl "}>
-                            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.
-                        </p>
-                    </>}
-                    right={<>
-                        <div className={"m-4 text-3xl"}>
-                            <div className={"flex items-center gap-4"}>
-                                <CheckCircleIcon/>SSO integration
-                            </div>
-                            <div className={"flex items-center gap-4"}>
-                                <CheckCircleIcon/>Advanced data filtering
-                            </div>
-                            <div className={"flex items-center gap-4"}>
-                                <CheckCircleIcon/>Text search
-                            </div>
-                            <div className={"flex items-center gap-4"}>
-                                <CheckCircleIcon/>Support SLA
-                            </div>
-                            <div className={"flex items-center gap-4"}>
-                                <CheckCircleIcon/>Custom integrations
-                            </div>
-
-                        </div>
-                    </>}/>
 
-            </Panel>
-
-            <Panel color={"light_gray"} includeMargin={false}>
-                <div
-                    className={"max-w-7xl text-2xl md:text-5xl font-bold tracking-tight"}>
-                    <p>
-                        FireCMS was developed in conjunction with <strong>different
-                        companies</strong>, out of the need to have a CMS that
-                        could be
-                        used in <strong>different scenarios</strong> and that
-                        could be easily
-                        customized to fit different needs.
-                    </p>
-                </div>
-            </Panel>
 
             <Panel color={"light"}>
                 <div className={"flex items-center my-4 "}>
@@ -100,8 +34,7 @@ export function EnterpriseFeatures() {
                     your admin</strong> panel to fit your needs.
                 </p>
 
-
-                <div className="relative mx-auto mt-16">
+                <div className="relative mx-auto mt-8">
                     <div className={"p-4 " + ContainerMixin}>
                         <div className="md:grid md:grid-cols-12 md:gap-4">
                             <div
@@ -153,6 +86,71 @@ export function EnterpriseFeatures() {
 
             </Panel>
 
+            <Panel color={"light_gray"} includeMargin={false}>
+                <div
+                    className={"max-w-7xl text-2xl md:text-5xl font-bold tracking-tight"}>
+                    <p>
+                        FireCMS was crafted through collaboration with various <strong>companies</strong>, out of the
+                        need to have a CMS that could be used in <strong>different scenarios</strong> and that
+                        could be easily customized to fit different needs.
+                    </p>
+                </div>
+            </Panel>
+
+            <Panel color={"white"}>
+
+                <TwoColumns
+                    left={<>
+
+                        <div className={"flex items-center my-4 "}>
+
+                            <div
+                                className="flex items-center justify-center text-white w-10 h-10 bg-gray-800 rounded-full shadow flex-shrink-0 mr-3">
+                                <AutoModeIcon width={"20px"} height={"20px"}/>
+                            </div>
+                            <h2 className={"h2 m-0"}>Why Choose FireCMS?</h2>
+
+                        </div>
+
+
+                        <p className={"text-2xl "}>
+                            Every organization has unique content management
+                            requirements. We've designed FireCMS with flexibility
+                            and customization in mind to cater to these diverse
+                            needs.
+                        </p>
+
+                        <p className={"text-2xl "}>
+                            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.
+                        </p>
+                    </>}
+                    right={<>
+                        <div className={"m-4 text-3xl"}>
+                            <div className={"flex items-center gap-4"}>
+                                <CheckCircleIcon/>SSO integration
+                            </div>
+                            <div className={"flex items-center gap-4"}>
+                                <CheckCircleIcon/>Advanced data filtering
+                            </div>
+                            <div className={"flex items-center gap-4"}>
+                                <CheckCircleIcon/>Text search
+                            </div>
+                            <div className={"flex items-center gap-4"}>
+                                <CheckCircleIcon/>Support SLA
+                            </div>
+                            <div className={"flex items-center gap-4"}>
+                                <CheckCircleIcon/>Custom integrations
+                            </div>
+
+                        </div>
+                    </>}/>
+
+            </Panel>
+
             {/*<section className={ContainerMixin + " my-8"}>*/}
 
             {/*    <h2 className={"h2"}>Perfect for apps</h2>*/}
diff --git a/website/src/partials/enterprise/EnterpriseHero.tsx b/website/src/partials/enterprise/EnterpriseHero.tsx
index c2c197339..883a726e6 100644
--- a/website/src/partials/enterprise/EnterpriseHero.tsx
+++ b/website/src/partials/enterprise/EnterpriseHero.tsx
@@ -8,18 +8,11 @@ export function EnterpriseHero() {
         color={"primary"}
         title={
             <>
-                <span className="block lg:inline">Enterprise</span>
-                <span className="block text-primary lg:inline">Solutions</span>
+                <span className="block lg:inline">Your admin panel</span>
             </>}
         subtitle={
             <>
                 <p>We know what it takes to build a successful product and we are here to help you.</p>
             </>}
-        cta={<a href="mailto:hello@firecms.co?subject=FireCMS%20consulting"
-                rel="noopener noreferrer"
-                target="_blank"
-                className={CTAOutlinedButtonWhiteMixin}>
-            Get in touch
-        </a>}
     />;
 }
diff --git a/website/src/partials/home/ManageYour.tsx b/website/src/partials/home/ManageYour.tsx
index f07db835c..8ff197831 100644
--- a/website/src/partials/home/ManageYour.tsx
+++ b/website/src/partials/home/ManageYour.tsx
@@ -46,7 +46,7 @@ export function ManageYour() {
 
             <div className={"mt-4 text-xl md:text-2xl"}>
                 <p>
-                    FireCMS is <b>more than a CMS</b>, is a fully extendable app
+                    FireCMS is <b>more than a CMS</b>. It's a fully extendable app
                     that will become the heart of your project.
                 </p>
                 <p>
diff --git a/website/src/partials/pricing/FireCMSCloudVersions.tsx b/website/src/partials/pricing/FireCMSCloudVersions.tsx
index 9376e337c..c2f2a57b0 100644
--- a/website/src/partials/pricing/FireCMSCloudVersions.tsx
+++ b/website/src/partials/pricing/FireCMSCloudVersions.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import {
     ContainerMixin,
-    ContainerPaddingMixin,
+    ContainerPaddingMixin, CTAButtonMixin,
     CTACaret,
     CTAOutlinedButtonMixin,
     CTAOutlinedButtonWhiteMixin,
@@ -18,11 +18,11 @@ export function FireCMSCloudVersions() {
             <h3 className={"text-3xl md:text-4xl font-bold mb-4 text-center text-gray-700 dark:text-gray-300"}>
                 Free
             </h3>
+            <p className={"text-lg mb-4 font-bold text-center"}>
+                Try FireCMS and upgrade to a paid plan when you
+                need more features.
+            </p>
             <div className={"grow"}>
-                <p className={"text-lg mb-4"}>
-                    Try FireCMS and upgrade to a paid plan when you
-                    need more features.
-                </p>
                 <ul>
                     <li className={"list-disc"}>Unlimited projects</li>
                     <li className={"list-disc"}>Unlimited collections</li>
@@ -47,10 +47,10 @@ export function FireCMSCloudVersions() {
             <h3 className={"text-3xl md:text-4xl font-bold mb-4 text-center dark:text-primary text-primary"}>
                 Plus
             </h3>
+            <p className={"text-lg mb-4 font-bold text-center"}>
+                Perfect for startups and larger companies
+            </p>
             <div className={"grow"}>
-                <p className={"text-lg mb-4"}>
-                    Perfect for small teams and startups.
-                </p>
                 <ul>
                     <li className={"list-disc"}>Everything in the free tier</li>
                     <li className={"list-disc"}>Local text search</li>
@@ -77,10 +77,10 @@ export function FireCMSCloudVersions() {
             <h3 className={"text-3xl md:text-4xl font-bold mb-4 text-center text-gray-700 dark:text-gray-300"}>
                 Pro
             </h3>
+            <p className={"text-lg mb-4 font-bold text-center"}>
+                Perfect for agencies.
+            </p>
             <div className={"grow"}>
-                <p className={"text-lg mb-4"}>
-                    Perfect for large teams and enterprises.
-                </p>
                 <ul>
                     <li className={"list-disc"}>Everything in PLUS</li>
                     <li className={"list-disc"}>Custom authentication and access control</li>
@@ -138,7 +138,7 @@ export function FireCMSCloudVersions() {
             {/*/>*/}
 
             <a
-                className={CTAOutlinedButtonWhiteMixin}
+                className={CTAButtonMixin}
                 href="http://app.firecms.co"
                 rel="noopener noreferrer"
                 target="_blank"
diff --git a/website/src/partials/styles.tsx b/website/src/partials/styles.tsx
index 0be590769..9c75d9445 100644
--- a/website/src/partials/styles.tsx
+++ b/website/src/partials/styles.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 export const CTAOutlinedButtonMixin = "btn px-10 py-4 md:px-12 border-1 border-solid border-gray-900 border-opacity-70 dark:border-gray-950 dark:border-opacity-80 uppercase rounded border-solid text-inherit dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-900 h dark:hover:border-gray-800 text-center";
-export const CTAOutlinedButtonWhiteMixin = "btn px-10 py-4 md:px-12  border-1 border-white  uppercase rounded border-solid text-white hover:bg-gray-200 hover:border-gray-200 text-center";
+export const CTAOutlinedButtonWhiteMixin = "btn px-10 py-4 md:px-12  border-1 border-white  uppercase rounded border-solid dark:text-white hover:bg-gray-200 hover:border-gray-200 text-center";
 export const CTAButtonMixin = "btn px-10 py-4 md:px-12 text-white bg-primary hover:text-white hover:bg-blue-700  hover:text-white uppercase border-solid rounded text-center";
 export const CTAButtonDarkMixin = "btn px-10 py-4 md:px-12 border-1 border-gray-700 uppercase rounded border-solid text-white bg-gray-900 hover:text-gray-100 hover:border-gray-800 text-center";
 
diff --git a/website/src/theme/Footer/Layout/index.js b/website/src/theme/Footer/Layout/index.js
index 27e3ebed8..75110a817 100644
--- a/website/src/theme/Footer/Layout/index.js
+++ b/website/src/theme/Footer/Layout/index.js
@@ -7,11 +7,11 @@ import { useLocation } from "@docusaurus/router";
 export default function LayoutWrapper(props) {
 
     const { pathname } = useLocation();
-    const includeEnterpriseTeaser = !pathname.startsWith("/enterprise");
+    // const includeEnterpriseTeaser = !pathname.startsWith("/enterprise");
 
     return (
         <>
-            {includeEnterpriseTeaser && <EnterpriseTeaser/>}
+            {/*{includeEnterpriseTeaser && <EnterpriseTeaser/>}*/}
             <Newsletter/>
             <Layout {...props} />
         </>
diff --git a/website/versioned_docs/version-2.0.0/index.mdx b/website/versioned_docs/version-2.0.0/index.mdx
index d7d296a03..7723038e1 100644
--- a/website/versioned_docs/version-2.0.0/index.mdx
+++ b/website/versioned_docs/version-2.0.0/index.mdx
@@ -6,13 +6,20 @@ slug: /
 ---
 
 <video class="intro_video" loop autoPlay muted>
-  <source src="/img/dark_mode.mp4" type="video/mp4"/>
+    <source src="/img/dark_mode.mp4" type="video/mp4"/>
 </video>
 
 
 > FireCMS is an **open source headless CMS and admin panel** built by developers
 > for developers.
 
+:::warning
+FireCMS 2.0 has been replaced by FireCMS 3.0. We encourage you to migrate to the
+new version at this point.
+The collections generated in FireCMS Cloud are synced automatically to the new
+version, but not to versions 2.2 or below.
+:::
+
 FireCMS is a content management system (CMS) that is built on top of the
 Firebase platform. It is a cloud-based system that allows users to manage and
 publish content to their websites or applications. With FireCMS, users can
@@ -35,16 +42,16 @@ easy to create your custom form fields, or your complete views.
 There are two ways to build top level views in FireCMS:
 
 - By creating mapping configurations for **collections** (to datasource
-  collections, such as Firestore collections, with your schema).
-  The best way to get a grasp of how
-  this works is checking the [Quickstart](quickstart.mdx) and
-  [Collections](collections/collections.md)
-  documentation.
+collections, such as Firestore collections, with your schema).
+The best way to get a grasp of how
+this works is checking the [Quickstart](quickstart.mdx) and
+[Collections](collections/collections.md)
+documentation.
 - Create **custom views** that sit in the main level of your navigation tree. In
-  this case you can build your custom React component and make use of the
-  internal components of the CMS as well as the provided hooks.
-  Check [Custom top level views](navigation/custom_top_level_views.mdx) for more
-  details
+this case you can build your custom React component and make use of the
+internal components of the CMS as well as the provided hooks.
+Check [Custom top level views](navigation/custom_top_level_views.mdx) for more
+details
 
 :::note Custom backend
 FireCMS was built with Firebase/Firestore as the default backend, but nothing
@@ -113,10 +120,10 @@ If Firebase is your chosen backend:
 
 * You need to enable the **Firestore** database in your Firebase project.
 * If you want to have  **authentication** enabled in your CMS config, you need
-  to enable
-  the corresponding auth method in your project.
+to enable
+the corresponding auth method in your project.
 * Also, if you are using **storage** fields in your string properties, you need
-  to enable Firebase Storage.
+to enable Firebase Storage.
 
 More details in [Firebase setup section](firebase_setup.md).