Adjusted website styles

firecmsco · Dec 13, 2024 · c01839d · c01839d
1 parent e7ef16f
commit c01839d
Show file tree

Hide file tree

Showing 39 changed files with 97 additions and 177 deletions.
diff --git a/website/docs/index.mdx b/website/docs/index.mdx
@@ -15,10 +15,15 @@ description: Welcome to FireCMS, the open source headless CMS and admin panel ex
 :::
 
 
-FireCMS uses [Firebase](https://firebase.google.com/) as a **backend**. You are
+FireCMS uses [Firebase](https://firebase.google.com/) or MongoDB Atlas as a **backend**. You are
 the **owner** of your Firebase project, and FireCMS is a tool that helps you build your
 admin panel on top of it. FireCMS provides all the editing options you lack in a simple Firebase project.
 
+FireCMS creates CRUD views based on your configurations with ease. It's simple to set up for common cases and just
+as easy to extend and customize to fit your specific needs.
+
+FireCMS imposes no data structure restrictions, allowing seamless integration with any project right from the start.
+
 FireCMS 3.0 is the latest version of FireCMS.
 It can be used in different ways:
 - As a managed service in the Cloud: [FireCMS Cloud](https://app.firecms.co). In this version you can create and manage

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -21,13 +21,16 @@ h5 {
 }
 
 h6 {
-    @apply text-xl font-headers font-medium
+    @apply text-xl font-headers font-normal
 }
 
-h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
+h1, .h1, h2, .h2, h3, .h3 {
     font-weight: 600 !important;
 }
-
+.footer__title {
+    font-size: 1.25rem;
+    font-weight: 600;
+}
 tr {
     border-top: none;
 }
@@ -82,7 +85,6 @@ tr {
 }
 
 .gradient-text {
-    font-weight: 500;
     width: fit-content;
     color: transparent;
     background-clip: text;
@@ -161,12 +163,18 @@ tr {
     --ifm-color-primary-lightest: #3e97ff;
     --ifm-code-font-size: 95%;
     --ifm-font-weight-bold: 600;
-    --ifm-h1-font-size: 4rem;
     /*--ifm-list-left-padding: 0rem;*/
     --ifm-custom-navbar-background-color: rgba(48, 49, 55, 0.33);
     --ifm-border-color: rgba(100, 116, 139, 0.4);
     --ifm-background-color: white;
 
+    --ifm-h1-font-size: 3.75rem;
+    --ifm-h2-font-size: 3rem;
+    --ifm-h3-font-size: 2.25rem;
+    --ifm-h4-font-size: 1.875rem;
+    --ifm-h5-font-size: 1.5rem;
+    --ifm-h6-font-size: 1.25rem;
+
     --ifm-z-index-fixed: 20;
 
     --ifm-toc-border-color: var(--ifm-border-color);
@@ -272,6 +280,14 @@ article blockquote {
     margin-bottom: 16px;
 }
 
+.theme-admonition {
+    --ifm-h5-font-size: 0.875rem;
+}
+.pagination-nav__link {
+    --ifm-h5-font-size: 0.875rem;
+    --ifm-h4-font-size: 1rem;
+}
+
 .sidebarViewport_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-Sidebar-styles-module {
     background-color: var(--ifm-background-color);
     border: none;
@@ -356,10 +372,6 @@ a.btn {
     text-decoration: none;
 }
 
-h1, h2, h3 {
-    font-weight: 500;
-}
-
 h2 {
     margin-top: 2rem;
 }
@@ -501,6 +513,10 @@ html[data-theme="dark"] {
     top: calc(var(--ifm-navbar-height) + 36px) !important;
 }
 
+.markdown h1:first-child {
+    --ifm-h1-font-size: 3rem;
+}
+
 .markdown > h1 {
     margin-top: 6rem;
 }

diff --git a/website/src/neat_colors.json b/website/src/neat_colors.json
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -61,10 +61,10 @@ function Home() {
 
                 <TechSplash/>
 
-                <FeaturesPanels/>
-
                 <ImportDataIntro/>
 
+                <FeaturesPanels/>
+
                 <UsageExamples/>
 
                 <FirebaseTeaser/>

diff --git a/website/src/pages/openai.tsx b/website/src/pages/openai.tsx
@@ -22,7 +22,6 @@ function DataEnhancement() {
             <DataEnhancementUseCases/>
             <DataStructure/>
             <AutofillFeature/>
-            <BatchProcessing/>
             <Translations/>
             {/*<CustomizationOptions />*/}
             {/*<Testimonials />*/}

diff --git a/website/src/pages/pro.tsx b/website/src/pages/pro.tsx
@@ -61,7 +61,7 @@ function ProPage() {
                     <ProDeveloperFeatures/>
 
                     <Panel color={"gray"} includePadding={true} innerClassName={"flex flex-col items-center"}>
-                        <h2 className={"h2 mb-3 uppercase font-mono text-center mx-auto"}>
+                        <h2 className={"mb-3 uppercase font-mono text-center mx-auto"}>
                             LEARN MORE ABOUT FIRECMS PRO
                         </h2>
                         <HeroProButtons/>

diff --git a/website/src/partials/data_enhancement/AutofillFeature.tsx b/website/src/partials/data_enhancement/AutofillFeature.tsx
@@ -39,7 +39,7 @@ export function AutofillFeature() {
 
                 </>}
                 right={<>
-                    <h2 className={"h2 gradient-text uppercase"}>
+                    <h2 className={"gradient-text uppercase"}>
                         Fill in Details for Nike Air Max
                     </h2>
                     <p className="text-xl">

diff --git a/website/src/partials/data_enhancement/BatchProcessing.tsx b/website/src/partials/data_enhancement/BatchProcessing.tsx
diff --git a/website/src/partials/data_enhancement/DataEnhancementHero.tsx b/website/src/partials/data_enhancement/DataEnhancementHero.tsx
@@ -22,11 +22,11 @@ export function DataEnhancementHero() {
             left={
                 <div>
 
-                    <h1 className="text-4xl tracking-tight font-extrabold md:text-6xl">
+                    <h2 className="text-4xl tracking-tight font-extrabold md:text-6xl">
                         <span className="block">ChatGPT</span>
                         <span
                             className="block text-primary">Integration</span>
-                    </h1>
+                    </h2>
                     <div className="mt-3 text-xl sm:mt-4 md:text-2xl">
                         <p>
                             Discover the power of FireCMS with ChatGPT integration,

diff --git a/website/src/partials/data_enhancement/DataEnhancementUseCases.tsx b/website/src/partials/data_enhancement/DataEnhancementUseCases.tsx
@@ -3,22 +3,22 @@ import { Panel } from "../general/Panel";
 
 export function DataEnhancementUseCases() {
     return <Panel color={"primary"}>
-        <h2 className="h1 my-1 text-white uppercase font-mono">
+        <h2 className="my-1 text-white uppercase font-mono">
             The world has changed.
         </h2>
-        <h2 className="h1 my-1 text-white uppercase font-mono">
+        <h2 className="my-1 text-white uppercase font-mono">
             Your CMS should too.
         </h2>
-        {/*<h2 className="h1 my-1 text-white uppercase">*/}
+        {/*<h2 className="my-1 text-white uppercase">*/}
         {/*    Generate content ideas...*/}
         {/*</h2>*/}
-        {/*<h2 className="h1 my-1 text-white uppercase">*/}
+        {/*<h2 className="my-1 text-white uppercase">*/}
         {/*    OR Translate your documents...*/}
         {/*</h2>*/}
-        {/*<h2 className="h1 my-1 text-white uppercase">*/}
+        {/*<h2 className="my-1 text-white uppercase">*/}
         {/*    OR Create SEO-friendly titles...*/}
         {/*</h2>*/}
-        {/*<h2 className="h1 my-1 text-white uppercase">*/}
+        {/*<h2 className="my-1 text-white uppercase">*/}
         {/*    ...OR every other use case you can think of*/}
         {/*</h2>*/}
     </Panel>;

diff --git a/website/src/partials/data_enhancement/DataStructure.tsx b/website/src/partials/data_enhancement/DataStructure.tsx
@@ -16,7 +16,7 @@ export function DataStructure() {
     return (
 
         <Panel color={"secondary"}>
-            <h2 className="h2 mb-4">
+            <h2 className="mb-4">
                 Harness AI for Your Structured Data
             </h2>
             <p className="text-2xl">

diff --git a/website/src/partials/enterprise/EnterpriseArchitectures.tsx b/website/src/partials/enterprise/EnterpriseArchitectures.tsx
@@ -9,9 +9,9 @@ export function EnterpriseArchitectures() {
         <>
 
             <Panel color={"secondary"} centered={true}>
-                <h4 className="h1 mb-4 uppercase">
+                <h2 className="mb-4 uppercase">
                     Open source is the path to success
-                </h4>
+                </h2>
             </Panel>
 
             <Panel color={"light"} includePadding={false}>

diff --git a/website/src/partials/enterprise/EnterpriseFeatures.tsx b/website/src/partials/enterprise/EnterpriseFeatures.tsx
@@ -15,7 +15,7 @@ export function EnterpriseFeatures() {
             <Panel color={"white"}>
                 <div className={"flex items-center my-4 "}>
 
-                    <h2 className={"h2 m-0"}>Not just a CMS</h2>
+                    <h2 className={"m-0"}>Not just a CMS</h2>
 
                 </div>
 
@@ -88,7 +88,7 @@ export function EnterpriseFeatures() {
 
                         <div className={"flex items-center my-4 mb-3 "}>
 
-                            <h2 className={"h2 m-0"}>Why Choose FireCMS?</h2>
+                            <h2 className={"m-0"}>Why Choose FireCMS?</h2>
 
                         </div>
 

diff --git a/website/src/partials/features/DeveloperFeatures.tsx b/website/src/partials/features/DeveloperFeatures.tsx
@@ -74,7 +74,7 @@ export function DeveloperFeatures() {
 
                         <div
                             className={"flex items-center mb-3"}>
-                            <h3 className="h2 m-0">
+                            <h3 className="m-0">
                                 Easy schema definition
                             </h3>
 
@@ -87,9 +87,9 @@ export function DeveloperFeatures() {
                         </p>
 
                         <p className="text-xl md:text-2xl ">
-                            Use advanced features like conditional logic
+                            Integrate your own conditional logic
                             for your fields, references to other
-                            collections, markdown or file uploads
+                            collections, markdown, file uploads, and dozens of other features.
                         </p>
 
                     </>}/>
@@ -104,7 +104,7 @@ export function DeveloperFeatures() {
                         <div>
                             <div className={"flex items-center mb-3"}>
 
-                                <h3 className="h2 m-0">
+                                <h3 className="m-0">
                                     Built for every project
                                 </h3>
 

diff --git a/website/src/partials/features/Features.tsx b/website/src/partials/features/Features.tsx
@@ -53,7 +53,7 @@ function Features() {
                     className={"mx-auto md:col-span-9 md:pr-8 flex justify-center flex-col h-full mb-16"}>
                     <div className={"flex items-center mb-3"}>
 
-                        <h3 className="h2 m-0 gradient-text uppercase">
+                        <h3 className="m-0 gradient-text uppercase">
                             Inline editing
                         </h3>
 
@@ -95,7 +95,7 @@ function Features() {
 
                             <div className={"flex items-center mb-3 "}>
 
-                                <h3 className="h2 m-0 gradient-text uppercase">
+                                <h3 className="m-0 gradient-text uppercase">
                                     Dedicated form view
                                 </h3>
 
@@ -168,7 +168,7 @@ function Features() {
                             <div
                                 className={"flex items-center mb-3"}>
 
-                                <h3 className="h2 m-0 gradient-text uppercase">
+                                <h3 className="m-0 gradient-text uppercase">
                                     Easy to customise
                                 </h3>
 

diff --git a/website/src/partials/features/FormInfo.tsx b/website/src/partials/features/FormInfo.tsx
@@ -3,7 +3,7 @@ import { Panel } from "../general/Panel";
 
 export function FormInfo() {
     return <Panel color={"light"}>
-        <h2 className={"h2 mb-3 uppercase font-mono"}>Create your custom fields</h2>
+        <h3 className={"mb-3 uppercase font-mono"}>Create your custom fields</h3>
         <p className="text-xl md:text-2xl">
             FireCMS provides around <b>20 default fields</b> which should suffice for most business logic. These fields
             range from simple text fields or selects to more complex ones like file uploaders, date pickers, or

diff --git a/website/src/partials/features/OpenAITeaser.tsx b/website/src/partials/features/OpenAITeaser.tsx
@@ -32,11 +32,11 @@ function OpenAITeaser() {
                                 <MagicIcon/>
                             </div>
 
-                            <h1 className="h1 m-0">
+                            <h2 className="m-0">
                                 <span>ChatGPT </span>
                                 <span
                                     className="text-primary">Integration</span>
-                            </h1>
+                            </h2>
                         </div>
 
                         <div className="mt-3 text-xl sm:mt-4 md:text-2xl">

diff --git a/website/src/partials/features/RealTime.tsx b/website/src/partials/features/RealTime.tsx
@@ -24,7 +24,7 @@ function RealTime() {
                     <LightingIcon height={12} width={12}/>
                 </div>
 
-                <h3 className="h2 m-0">
+                <h3 className="m-0">
                     Real-time updates
                 </h3>
 

diff --git a/website/src/partials/features/SchemaEditorIntro.tsx b/website/src/partials/features/SchemaEditorIntro.tsx
@@ -23,9 +23,9 @@ export const SchemaEditorIntro = () => {
                         " flex flex-col py-20")}>
 
                     <div className={"relative max-w-6xl mx-auto"}>
-                        <h2 className="h2 mb-4 uppercase font-mono">
+                        <h3 className="mb-4 uppercase font-mono">
                             The best data schema editor
-                        </h2>
+                        </h3>
 
                         <div className={"mt-4 mx-auto text-xl pb-20"}>
                             <p>