New pricing page WIP

website/docusaurus.config.js

@@ -75,14 +75,19 @@ module.exports = {
                     position: "left"
                 },
                 {
-                    type: "docSidebar",
-                    sidebarId: "docsSidebar",
-                    label: "Docs",
+                    to: "enterprise",
+                    label: "Enterprise",
                     position: "left"
                 },
                 {
-                    to: "enterprise",
-                    label: "Enterprise",
+                    to: "pricing",
+                    label: "Pricing",
+                    position: "left"
+                },
+                {
+                    type: "docSidebar",
+                    sidebarId: "docsSidebar",
+                    label: "Docs",
                     position: "left"
                 },
                 {
@@ -105,15 +110,15 @@ module.exports = {
                 {
                     to: "https://demo.firecms.co",
                     label: "Demo",
-                    // className: "btn shadow-none mr-2 px-6 py-2 font-bold uppercase",
-                    className: "btn mr-3 px-6 py-2 text-white font-bold uppercase bg-primary hover:text-white hover:bg-blue-700",
+                    // className: "btn shadow-none mr-2 px-6 py-2  uppercase",
+                    className: "btn mr-3 px-6 py-2 text-white  uppercase bg-primary hover:text-white hover:bg-blue-700",
                     "aria-label": "Open the demo project",
                     position: "right"
                 },
                 // {
                 //     to: "https://app.firecms.co",
                 //     label: "Sign in",
-                //     className: "btn mr-3 px-6 py-2 text-white font-bold uppercase bg-primary hover:text-white hover:bg-blue-700",
+                //     className: "btn mr-3 px-6 py-2 text-white  uppercase bg-primary hover:text-white hover:bg-blue-700",
                 //     "aria-label": "Go to FireCMS Cloud",
                 //     position: "right"
                 // },

website/package.json

@@ -6,6 +6,7 @@
         "docusaurus": "docusaurus",
         "start": "yarn run copyChangelog && TYPEDOC_WATCH=true docusaurus start",
         "build": "yarn run copyChangelog && TYPEDOC_WATCH=false docusaurus build",
+        "preview": "yarn build && docusaurus serve",
         "copyChangelog": "echo '---' > ./docs/CHANGELOG.md && echo 'id: changelog' >> ./docs/CHANGELOG.md && echo 'title: Changelog' >> ./docs/CHANGELOG.md && echo '---' >> ./docs/CHANGELOG.md && cat ../CHANGELOG.md >> ./docs/CHANGELOG.md ",
         "swizzle": "docusaurus swizzle --danger",
         "deploy": "yarn build && firebase deploy --only hosting",
@@ -34,9 +35,9 @@
         "react-syntax-highlighter": "^15.5.0",
         "react-transition-group": "^4.4.5",
         "react-type-animation": "^2.1.2",
-        "sass": "^1.57.1",
+        "sass": "^1.58.0",
         "tailwindcss": "^3.2.4",
-        "three": "^0.148.0"
+        "three": "^0.149.0"
     },
     "browserslist": {
         "production": [
@@ -60,9 +61,9 @@
         "postcss": "^8.4.21",
         "postcss-import": "^15.1.0",
         "postcss-loader": "^7.0.2",
-        "postcss-preset-env": "^7.8.3",
+        "postcss-preset-env": "^8.0.1",
         "typedoc": "^0.23.24",
         "typedoc-plugin-markdown": "^3.14.0",
-        "typescript": "^4.9.4"
+        "typescript": "^4.9.5"
     }
 }

website/src/css/additional-styles/utility-patterns.css

@@ -26,7 +26,7 @@
 
 .btn,
 .btn-sm {
-    @apply font-medium inline-flex items-center justify-center border border-transparent rounded leading-snug transition duration-150 ease-in-out;
+    @apply font-bold inline-flex items-center justify-center border border-transparent rounded leading-snug transition duration-150 ease-in-out;
 }
 
 .btn {

website/src/css/tailwind.css

@@ -1,5 +1,6 @@
 @import 'additional-styles/utility-patterns.css';
 
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

website/src/pages/features.tsx

@@ -12,28 +12,35 @@ function FeaturesPage() {
             title={"Features - FireCMS"}
             description="FireCMS includes all the features you need to kickstart your project and all the customization options you may need">
 
-            <Hero
-                title={
-                    <>
-                        <span className="block lg:inline">Features</span>
-                    </>}
-                subtitle={
-                    <>
-                        <p>Easily Create, Edit and Publish with FireCMS</p>
-                    </>}
-                // cta={<a
-                //     href="mailto:[email protected]?subject=FireCMS%20consulting"
-                //     rel="noopener noreferrer"
-                //     target="_blank"
-                //     className={CTAButtonMixin}>
-                //     Get in touch
-                // </a>}
-            />
-
-            <Features/>
-
-            <DeveloperFeatures/>
-
+            <div className="flex flex-col min-h-screen">
+
+                <main className="flex-grow">
+                    <Hero
+                        title={
+                            <>
+                                <span
+                                    className="block lg:inline">Features</span>
+                            </>}
+                        subtitle={
+                            <>
+                                <p>Easily Create, Edit and Publish with
+                                    FireCMS</p>
+                            </>}
+                        // cta={<a
+                        //     href="mailto:[email protected]?subject=FireCMS%20consulting"
+                        //     rel="noopener noreferrer"
+                        //     target="_blank"
+                        //     className={CTAButtonMixin}>
+                        //     Get in touch
+                        // </a>}
+                    />
+
+                    <Features/>
+
+                    <DeveloperFeatures/>
+
+                </main>
+            </div>
 
         </Layout>
     );

website/src/pages/policy/cookies_policy.tsx

@@ -7,7 +7,6 @@ import Head from "@docusaurus/Head";
 function TermsAndConditions() {
     const divRef = useRef<HTMLSpanElement>(null);
     useEffect(() => {
-        console.log(divRef.current);
         if (divRef.current) {
             divRef.current.innerHTML = html;
         }

website/src/pages/policy/privacy_policy.tsx

@@ -7,7 +7,6 @@ import Head from "@docusaurus/Head";
 function PrivacyPolicy() {
     const divRef = useRef<HTMLSpanElement>(null);
     useEffect(() => {
-        console.log(divRef.current);
         if (divRef.current) {
             divRef.current.innerHTML = policyHtml;
         }

website/src/pages/policy/terms_conditions.tsx

@@ -7,7 +7,6 @@ import Head from "@docusaurus/Head";
 function TermsAndConditions() {
     const divRef = useRef<HTMLSpanElement>(null);
     useEffect(() => {
-        console.log(divRef.current);
         if (divRef.current) {
             divRef.current.innerHTML = html;
         }

website/src/pages/pricing.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import Layout from "@theme/Layout";
+
+import Features from "../partials/features/Features";
+import { Hero } from "../partials/general/Hero";
+import { DeveloperFeatures } from "../partials/features/DeveloperFeatures";
+import { VersionsComparison } from "../partials/pricing/VersionsComparison";
+import { PricingIntro } from "../partials/pricing/PricingIntro";
+import { FireCMSCloudVersions } from "../partials/pricing/FireCMSCloudVersions";
+
+function FeaturesPage() {
+
+    return (
+        <Layout
+            title={"Pricing - FireCMS"}
+            description="Free self-hosted version and free Cloud tier, adaptive pricing for everyone">
+
+            <Hero
+                title={
+                    <>
+                        <span className="block lg:inline">Pricing</span>
+                    </>}
+                subtitle={
+                    <>
+                        <p>Experience the power of our CMS platform with a free, <b>self-hosted</b> option or upgrade to <b>FireCMS Cloud</b> for a premium, full-service solution.</p>
+                    </>}
+                // cta={<a
+                //     href="mailto:[email protected]?subject=FireCMS%20consulting"
+                //     rel="noopener noreferrer"
+                //     target="_blank"
+                //     className={CTAButtonMixin}>
+                //     Get in touch
+                // </a>}
+            />
+
+            <FireCMSCloudVersions/>
+            <PricingIntro/>
+            <VersionsComparison/>
+
+
+        </Layout>
+    );
+}
+
+export default FeaturesPage;
+

website/src/partials/Pricing.tsx

@@ -40,7 +40,7 @@ function Pricing() {
 
         <div className="flex flex-col m-8 justify-self-end">
             <a
-                className={"btn mx-auto sm:mb-0 font-bold py-4 bg-black text-white font-bold hover:text-white uppercase border border-solid w-full sm:w-auto rounded"}
+                className={"btn mx-auto sm:mb-0  py-4 bg-black text-white  hover:text-white uppercase border border-solid w-full sm:w-auto rounded"}
                 href={useBaseUrl("docs/")}
             >
                 Get started
@@ -75,7 +75,7 @@ function Pricing() {
 
         <div className="flex flex-col m-8 justify-self-end">
             <a
-                className={"btn mx-auto sm:mb-0 font-bold py-4 bg-black text-white font-bold hover:text-white uppercase border border-solid w-full sm:w-auto rounded"}
+                className={"btn mx-auto sm:mb-0  py-4 bg-black text-white  hover:text-white uppercase border border-solid w-full sm:w-auto rounded"}
                 href="mailto:[email protected]?subject=FireCMS%20consulting"
                 rel="noopener noreferrer"
                 target="_blank"

website/src/partials/enterprise/EnterpriseArchitectures.tsx

@@ -44,18 +44,21 @@ export function EnterpriseArchitectures() {
                     <p>
                         FireCMS is a headless CMS, which means that it can be
                         used
-                        with any frontend framework. Unlike traditional CMSs, it
+                        with <b>any frontend framework</b>. Unlike traditional
+                        CMSs, it
                         is not coupled to the rendering layer.
                     </p>
 
                 </>}
                 right={<>
                     <SimpleArchitecture className={"w-full mt-8"}/>
-                    <label className={"text-sm text-center m-4"}>Simple architecture</label>
+                    <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>
+                    <label className={"text-sm text-center m-4"}>Architecture
+                        using microservices</label>
                 </>
-                    }/>
+                }/>
 
         </>
     );

website/src/partials/features/DeveloperFeatures.tsx

@@ -24,7 +24,9 @@ import {
     atomOneLight,
     dracula
 } from "react-syntax-highlighter/dist/esm/styles/hljs";
-import { arrowIcon, tickIcon } from "../icons";
+import { arrowIcon } from "../icons";
+
+import TickIcon from "@site/static/img/icons/check.svg";
 import { TwoColumns } from "../general/TwoColumns";
 import { Panel } from "../general/Panel";
 
@@ -118,7 +120,7 @@ export function DeveloperFeatures() {
                     <p className="italic text-base text-gray-600 dark:text-gray-200">
                         * Some features can only be enabled by
                         using the self-hosted version, but will be
-                        available in the cloud version soon.
+                        available in FireCMS Cloud version soon.
                     </p>
 
                 </div>
@@ -127,38 +129,38 @@ export function DeveloperFeatures() {
             <TwoColumns
                 animation={false}
                 left={
-                <>
-                    <div className={"flex items-center mb-3"}>
+                    <>
+                        <div className={"flex items-center mb-3"}>
 
-                        <div
-                            className="flex items-center justify-center text-white w-10 h-10 bg-gray-800 rounded-full shadow flex-shrink-0 mr-3">
-                            {tickIcon}
-                        </div>
+                            <div
+                                className="flex items-center justify-center text-white w-10 h-10 bg-gray-800 rounded-full shadow flex-shrink-0 mr-3">
+                                <TickIcon/>
+                            </div>
 
-                        <h3 className="h3 m-0">
-                            Built for every project
-                        </h3>
+                            <h3 className="h3 m-0">
+                                Built for every project
+                            </h3>
 
-                    </div>
-                    <p className="text-xl text-gray-600 dark:text-gray-200">
-                        FireCMS is a headless CMS built to work
-                        with every existing Firebase/Firestore
-                        project. It does not
-                        enforce any data structure.
-                    </p>
-                    <p className="text-xl text-gray-600 dark:text-gray-200">
-                        Use the integrated hooks and callbacks to
-                        integrate your business logic in multiple
-                        ways.
-                    </p>
-
-                    <p className="italic text-base text-gray-600 dark:text-gray-200">
-                        * Some features can only be enabled by
-                        using the self-hosted version, but will be
-                        available in the cloud version soon.
-                    </p>
-                </>
-            } right={
+                        </div>
+                        <p className="text-xl text-gray-600 dark:text-gray-200">
+                            FireCMS is a headless CMS built to work
+                            with every existing Firebase/Firestore
+                            project. It does not
+                            enforce any data structure.
+                        </p>
+                        <p className="text-xl text-gray-600 dark:text-gray-200">
+                            Use the integrated hooks and callbacks to
+                            integrate your business logic in multiple
+                            ways.
+                        </p>
+
+                        <p className="italic text-base text-gray-600 dark:text-gray-200">
+                            * Some features can only be enabled by
+                            using the self-hosted version, but will be
+                            available in the FireCMS Cloud version soon.
+                        </p>
+                    </>
+                } right={
                 <>
                     <div
                         className="relative flex-col font-mono">

website/src/partials/general/Newsletter.tsx

@@ -78,7 +78,7 @@ export const Newsletter = () => {
                                         className="underline ">our personal data policy</a>.</span>
                                 </label>
                                 <div
-                                    className="w-full py-2 border-b-2 border-gray-400 flex justify-between gap-2">
+                                    className="w-full py-2 flex justify-between gap-2">
                                     <input
                                         disabled={loading || completed}
                                         className={"appearance-none outline-none text-xl flex-1 px-4 py-4 bg-gray-100 dark:bg-gray-900 rounded w-full leading-tight focus:border-primary "
@@ -89,7 +89,7 @@ export const Newsletter = () => {
                                         value={email}/>
                                     <button type="submit"
                                             disabled={loading || completed || !policyAccepted}
-                                            className={"btn px-8 py-4 sm:px-12 sm:py-4 font-bold uppercase w-full w-auto sm:mb-0 sm:ml-2 " + (loading || !policyAccepted ? "bg-gray-200 dark:bg-gray-800" : (completed ? "bg-green-600" : "bg-primary hover:bg-blue-700"))}>
+                                            className={"btn px-8 py-4 sm:px-12 sm:py-4  uppercase w-full w-auto sm:mb-0 sm:ml-2 " + (loading || !policyAccepted ? "bg-gray-200 dark:bg-gray-800" : (completed ? "bg-green-600" : "bg-primary hover:bg-blue-700"))}>
                                         {loading ? "Loading" : (completed ? "Signed up!" : "Sign up")}
                                     </button>
                                 </div>

website/src/partials/general/PagesBackground.tsx

@@ -14,12 +14,12 @@ function shouldShowAnimation(pathname) {
 const animationPaths = [
     "/features",
     "/enterprise",
+    "/pricing",
     "/f/"
 ];
 
 export function PagesBackground({ darkMode }: { darkMode: boolean }) {
     const { siteConfig } = useDocusaurusContext();
-    console.log("PagesBackground", siteConfig);
 
     const { pathname } = useLocation();
     const [showAnimation, setShowAnimation] = React.useState(shouldShowAnimation(pathname));