#2340 Refactor tailwind blocks and current templates (#2341)

fluentcms · Dec 15, 2024 · ae3e8a4 · ae3e8a4
1 parent c6796c0
commit ae3e8a4
Show file tree

Hide file tree

Showing 118 changed files with 2,761 additions and 1,987 deletions.
diff --git a/src/FluentCMS/Templates/Blank/Blocks/CTA/Default.html b/src/FluentCMS/Templates/Blank/Blocks/CTA/Default.html
@@ -1,10 +1,10 @@
-<section class="bg-white dark:bg-gray-900">
+<section class="bg-surface">
     <div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
         <div class="max-w-screen-md">
-            <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white" data-inline-editable>
+            <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-content-accent" data-inline-editable>
                 Let's find more that brings us together.
             </h2>
-            <p class="mb-8 font-light text-gray-500 sm:text-xl dark:text-gray-400" data-inline-editable>
+            <p class="mb-8 font-light text-content-muted sm:text-xl" data-inline-editable>
                 FluentCMS helps
                 you connect with friends, family and communities of people who share your interests. Connecting with
                 your friends and family as well as discovering new ones is easy with features like Groups, Watch and
@@ -17,7 +17,7 @@ <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-w
                     Get started
                 </a>
                 <a href="#"
-                    class="inline-flex items-center justify-center px-4 py-2.5 text-base font-medium text-center text-gray-900 border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
+                    class="inline-flex items-center justify-center px-4 py-2.5 text-base font-medium text-center text-content-accent border border-border rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
                     <svg class="mr-2 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                         xmlns="http://www.w3.org/2000/svg">
                         <path

diff --git a/src/FluentCMS/Templates/Blank/Blocks/CTA/Image and Button.html b/src/FluentCMS/Templates/Blank/Blocks/CTA/Image and Button.html
@@ -1,13 +1,13 @@
-<section class="bg-white dark:bg-gray-900">
+<section class="bg-surface">
     <div class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
         <img class="w-full dark:hidden" src="/files/images/cta-dashboard-mockup.svg" alt="dashboard image">
         <img class="w-full hidden dark:block" src="/files/images/cta-dashboard-mockup-dark.svg" alt="dashboard image">
         <div class="mt-4 md:mt-0">
-            <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white" data-inline-editable>
+            <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-content-accent" data-inline-editable>
                 Let's create more
                 tools and ideas that brings us together.
             </h2>
-            <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400" data-inline-editable>
+            <p class="mb-6 font-light text-content-muted md:text-lg" data-inline-editable>
                 FluentCMS helps you connect with
                 friends and communities of people who share your interests. Connecting with your friends and family
                 as well as discovering new ones is easy with features like Groups.</p>

diff --git a/src/FluentCMS/Templates/Blank/Blocks/CTA/Mobile App.html b/src/FluentCMS/Templates/Blank/Blocks/CTA/Mobile App.html
@@ -1,10 +1,10 @@
-<section class="bg-white dark:bg-gray-900">
+<section class="bg-surface">
     <div class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
         <div>
-            <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white" data-inline-editable>
+            <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-content-accent" data-inline-editable>
                 Build your site, your way with FluentCMS.
             </h2>
-            <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400" data-inline-editable>
+            <p class="mb-6 font-light text-content-muted md:text-lg" data-inline-editable>
                 FluentCMS
                 empowers creators and businesses to easily build and manage websites with intuitive tools, customizable
                 features, and seamless user experiences.

diff --git a/src/FluentCMS/Templates/Blank/Blocks/CTA/With Heading.html b/src/FluentCMS/Templates/Blank/Blocks/CTA/With Heading.html
@@ -1,11 +1,11 @@
-<section class="bg-white dark:bg-gray-900">
+<section class="bg-surface">
     <div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
         <div class="mx-auto max-w-screen-sm text-center">
-            <h2 class="mb-4 text-4xl tracking-tight font-extrabold leading-tight text-gray-900 dark:text-white"
+            <h2 class="mb-4 text-4xl tracking-tight font-extrabold leading-tight text-content-accent"
                 data-inline-editable>
                 Start your free trial today
             </h2>
-            <p class="mb-6 font-light text-gray-500 dark:text-gray-400 md:text-lg" data-inline-editable>
+            <p class="mb-6 font-light text-content-muted md:text-lg" data-inline-editable>
                 Try FluentCMS Platform for 30 days. No credit card required.
             </p>
             <a href="#"

diff --git a/src/FluentCMS/Templates/Blank/Blocks/CTA/With Image.html b/src/FluentCMS/Templates/Blank/Blocks/CTA/With Image.html
@@ -1,14 +1,15 @@
-<section class="bg-white dark:bg-gray-900">
+<section class="bg-surface">
     <div class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
         <img class="w-full dark:hidden" src="/files/images/blocks/cta-dashboard-mockup.svg" alt="dashboard image">
-        <img class="w-full hidden dark:block" src="/files/images/blocks/cta-dashboard-mockup-dark.svg" alt="dashboard image">
+        <img class="w-full hidden dark:block" src="/files/images/blocks/cta-dashboard-mockup-dark.svg"
+            alt="dashboard image">
         <div class="mt-4 md:mt-0">
-            <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white" data-inline-editable>
-                Let's create more tools and ideas that brings us together.
+            <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-content-accent" data-inline-editable>
+                Let's create more tools and ideas that bring us together.
             </h2>
-            <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400" data-inline-editable>
+            <p class="mb-6 font-light text-content-muted md:text-lg" data-inline-editable>
                 FluentCMS helps you connect with friends and communities of people who share your interests. Connecting
-                with your friends and family as well as discovering new ones is easy with features like Groups.
+                with your friends and family, as well as discovering new ones, is easy with features like Groups.
             </p>
             <a href="#"
                 class="inline-flex items-center text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900">

diff --git a/src/FluentCMS/Templates/Blank/Blocks/Content/Simple.html b/src/FluentCMS/Templates/Blank/Blocks/Content/Simple.html
@@ -1,7 +1,7 @@
-<section class="bg-white dark:bg-gray-900">
+<section class="bg-surface">
     <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
-        <div class="max-w-screen-lg text-gray-500 sm:text-lg dark:text-gray-400">
-            <h2 class="mb-4 text-4xl tracking-tight font-bold text-gray-900 dark:text-white" data-inline-editable>
+        <div class="max-w-screen-lg text-content-muted sm:text-lg">
+            <h2 class="mb-4 text-4xl tracking-tight font-bold text-content-accent" data-inline-editable>
                 Powering innovation at
                 <span class="font-extrabold" data-inline-editable>200,000+</span>
                 companies worldwide
@@ -14,11 +14,10 @@ <h2 class="mb-4 text-4xl tracking-tight font-bold text-gray-900 dark:text-white"
             </p>
             <p class="mb-4 font-medium" data-inline-editable>
                 Deliver great service experiences fast - without the
-                complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and
+                complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and
                 deploy changes with ease.
             </p>
-            <a href="#"
-                class="inline-flex items-center font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700">
+            <a href="#" class="inline-flex items-center font-medium text-primary-600 hover:text-primary-800">
                 <span data-inline-editable>Learn more</span>
                 <svg class="ml-1 w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd"

diff --git a/src/FluentCMS/Templates/Blank/Blocks/Content/With Gallery.html b/src/FluentCMS/Templates/Blank/Blocks/Content/With Gallery.html
@@ -1,10 +1,9 @@
-<section class="bg-white dark:bg-gray-900">
+<section class="bg-surface">
     <div class="py-8 px-4 mx-auto max-w-screen-xl lg:px-12 sm:text-center lg:py-16">
-        <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white" data-inline-editable>
+        <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-content-accent" data-inline-editable>
             FluentCMS: Built for Simplicity and Power
         </h2>
-        <p class="font-light text-gray-500 sm:text-lg md:px-20 lg:px-38 xl:px-48 dark:text-gray-400"
-            data-inline-editable>
+        <p class="font-light text-content-muted sm:text-lg md:px-20 lg:px-38 xl:px-48" data-inline-editable>
             FluentCMS combines flexibility and ease of use, allowing creators, businesses, and developers to efficiently
             manage content. From simple sites to complex projects, it’s the CMS that grows with your needs.
         </p>

diff --git a/src/FluentCMS/Templates/Blank/Blocks/Content/With Image.html b/src/FluentCMS/Templates/Blank/Blocks/Content/With Image.html
@@ -1,7 +1,7 @@
-<section class="bg-white dark:bg-gray-900">
+<section class="bg-surface">
     <div class="gap-16 items-center py-8 px-4 mx-auto max-w-screen-xl lg:grid lg:grid-cols-2 lg:py-16 lg:px-6">
-        <div class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
-            <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white" data-inline-editable>
+        <div class="font-light text-content-muted sm:text-lg">
+            <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-content-accent" data-inline-editable>
                 We didn't reinvent the wheel
             </h2>
             <p class="mb-4" data-inline-editable>