From f81182dcdd86465459b3199d29196a5f1ce52843 Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Mon, 20 May 2024 19:34:04 +0200
Subject: [PATCH 01/18] Add Pricing Cards module

A new module for Pricing Cards has been added. The module includes fields for pricing card group, tier name, currency, cost, period, price subtext, button URL, features title, and features list item. It will allow site pages, landing pages, blog listings, and blog posts to display pricing information in a clear and structured way.
---
 .../modules/pricing-cards.module/fields.json  | 149 ++++++++++++++++++
 theme/modules/pricing-cards.module/meta.json  |  17 ++
 theme/modules/pricing-cards.module/module.css |   0
 .../modules/pricing-cards.module/module.html  |  40 +++++
 theme/modules/pricing-cards.module/module.js  |   0
 5 files changed, 206 insertions(+)
 create mode 100644 theme/modules/pricing-cards.module/fields.json
 create mode 100644 theme/modules/pricing-cards.module/meta.json
 create mode 100644 theme/modules/pricing-cards.module/module.css
 create mode 100644 theme/modules/pricing-cards.module/module.html
 create mode 100644 theme/modules/pricing-cards.module/module.js

diff --git a/theme/modules/pricing-cards.module/fields.json b/theme/modules/pricing-cards.module/fields.json
new file mode 100644
index 0000000..ce94b73
--- /dev/null
+++ b/theme/modules/pricing-cards.module/fields.json
@@ -0,0 +1,149 @@
+[ {
+  "id" : "31d1e0c6-4e1e-4a1f-7c33-18729a4b2501",
+  "name" : "pricing_card_group",
+  "display_width" : null,
+  "label" : "Pricing Card Group",
+  "required" : false,
+  "locked" : false,
+  "occurrence" : {
+    "min" : 1,
+    "max" : 3,
+    "sorting_label_field" : null,
+    "default" : 3
+  },
+  "children" : [ {
+    "id" : "e3458556-aeb3-95a0-2a1d-1f1dc04ab7f5",
+    "name" : "tier_name",
+    "display_width" : null,
+    "label" : "Tier Name",
+    "required" : true,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "Basic"
+  }, {
+    "id" : "99516692-abe2-ba9c-0f27-cfb640082988",
+    "name" : "currency",
+    "display_width" : null,
+    "label" : "Currency",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "$"
+  }, {
+    "id" : "2629d9b9-46b4-a443-08d3-5313daafd29f",
+    "name" : "cost",
+    "display_width" : null,
+    "label" : "Cost",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "15"
+  }, {
+    "id" : "58caa5af-22e7-f152-be67-a6baa3cf119c",
+    "name" : "period",
+    "display_width" : null,
+    "label" : "Period",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "month"
+  }, {
+    "id" : "a0e41c7a-48ac-266c-0fd3-0d42ea1cc705",
+    "name" : "price_subtext",
+    "display_width" : null,
+    "label" : "Price Subtext",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "Single-member plan for personal projects, prototypes, and getting started."
+  }, {
+    "id" : "ec4cd19d-7c47-c5c6-595f-8f3091935195",
+    "name" : "button_url",
+    "display_width" : null,
+    "label" : "Button URL",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "https://en.wikipedia.org/wiki/Cat"
+  }, {
+    "id" : "70bf210b-69a8-846c-b44a-180ec6ba4ee0",
+    "name" : "features_title",
+    "display_width" : null,
+    "label" : "Features Title",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "Everything necessary to get started."
+  }, {
+    "id" : "6b615b91-b7a3-632c-4a2a-fea2f9134f5f",
+    "name" : "features_list_item",
+    "display_width" : null,
+    "label" : "Features List Item",
+    "required" : false,
+    "locked" : false,
+    "occurrence" : {
+      "min" : 0,
+      "max" : null,
+      "sorting_label_field" : null,
+      "default" : 3
+    },
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : [ "Awesome Feature", "Awesome Feature", "Awesome Feature" ]
+  } ],
+  "tab" : "CONTENT",
+  "expanded" : false,
+  "group_occurrence_meta" : null,
+  "type" : "group",
+  "default" : [ {
+    "tier_name" : "Basic",
+    "currency" : "$",
+    "cost" : "15",
+    "period" : "month",
+    "price_subtext" : "$12 per month if paid annually",
+    "button_url" : "https://en.wikipedia.org/wiki/Cat",
+    "features_title" : "Main features:",
+    "features_list_item" : [ "Single member seat", "Global edge network", "Live site previews with collaboration", "Instant rollbacks" ]
+  }, {
+    "tier_name" : "Pro",
+    "currency" : "$",
+    "cost" : "30",
+    "period" : "month",
+    "price_subtext" : "$24 per month if paid annually",
+    "button_url" : "https://en.wikipedia.org/wiki/Dog",
+    "features_title" : "Main features:",
+    "features_list_item" : [ "Background functions", "1TB bandwidth", "25,000 build minutes", "Audit logs with 7-day history", "Slack & email notifications" ]
+  }, {
+    "tier_name" : "Enterprise",
+    "currency" : "$",
+    "cost" : "60",
+    "period" : "month",
+    "price_subtext" : "$48 per month if paid annually",
+    "button_url" : "https://en.wikipedia.org/wiki/Frog",
+    "features_title" : "Main features:",
+    "features_list_item" : [ "Additional member seats", "Additional bandwidth", "Additional build minutes", "Additional teams" ]
+  } ]
+} ]
\ No newline at end of file
diff --git a/theme/modules/pricing-cards.module/meta.json b/theme/modules/pricing-cards.module/meta.json
new file mode 100644
index 0000000..6fbcace
--- /dev/null
+++ b/theme/modules/pricing-cards.module/meta.json
@@ -0,0 +1,17 @@
+{
+  "global": false,
+  "content_types": [
+    "LANDING_PAGE",
+    "SITE_PAGE",
+    "BLOG_LISTING",
+    "BLOG_POST"
+  ],
+  "icon": "fontawesome-5.14.0:Dollar%20Sign:SOLID",
+  "host_template_types": [
+    "PAGE",
+    "BLOG_LISTING",
+    "BLOG_POST"
+  ],
+  "label": "Pricing Cards",
+  "is_available_for_new_content": true
+}
diff --git a/theme/modules/pricing-cards.module/module.css b/theme/modules/pricing-cards.module/module.css
new file mode 100644
index 0000000..e69de29
diff --git a/theme/modules/pricing-cards.module/module.html b/theme/modules/pricing-cards.module/module.html
new file mode 100644
index 0000000..149653e
--- /dev/null
+++ b/theme/modules/pricing-cards.module/module.html
@@ -0,0 +1,40 @@
+{% if module.pricing_card_group | length == 3 %}
+  {% set grid_col_class = 'lg:fj-grid-cols-3' %}
+{% endif %}
+
+<div class="fj-not-prose fj-grid fj-grid-cols-1 fj-place-items-center lg:fj-place-items-baseline fj-mx-auto {{ grid_col_class or 'fj-max-w-2xl' }}">
+  {% for item in module.pricing_card_group %}
+    <div class="fj-max-w-96 lg:fj-w-full fj-border-gray-300 fj-grid fj-place-items-center fj-p-12 {{ 'fj-border-t lg:fj-border-t-0 lg:fj-border-l' if loop.index0 }}">
+      <div class="lg:fj-w-full fj-grid fj-gap-10">
+
+        <p class="fj-text-base fj-font-semibold">{{ item.tier_name }}</p>
+
+        <div class="fj-grid fj-gap-2">
+          <div class="fj-flex fj-items-baseline fj-gap-x-1">
+            <span class="fj-text-5xl fj-font-bold">{{ item.currency }}{{ item.cost }}</span>
+            <span class="fj-text-sm fj-font-semibold">/{{ item.period }}</span>
+          </div>
+
+          <p>{{ item.price_subtext }}</p>
+        </div>
+
+        <a class="fj-button fj-button--small fj-text-sm fj-text-white fj-font-semibold fj-text-center" href="{{ item.button_url }}">Buy Plan</a>
+
+        <p class="fj-text-sm fj-font-semibold">{{ item.features_title }}</p>
+
+        <ul class="space-y-3 text-sm">
+          {% for feature in item.features_list_item %}
+            <li class="fj-flex fj-gap-x-3 fj-text-nowrap">
+              <svg class="fj-size-6 fj-text-blue-600" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true">
+                <path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path>
+              </svg>
+
+              <p>{{ feature }}</p>
+            </li>
+          {% endfor %}
+        </ul>
+
+      </div>
+    </div>
+  {% endfor %}
+</div>
diff --git a/theme/modules/pricing-cards.module/module.js b/theme/modules/pricing-cards.module/module.js
new file mode 100644
index 0000000..e69de29

From 31b9070b636ff9e840bade92b710e32a69810e7d Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Mon, 20 May 2024 19:34:14 +0200
Subject: [PATCH 02/18] Update inline help text and add new CSS classes in
 tailwind.css

The text of the inline help for the 'rating' field was updated for clarity in the testimonials-with-star-rating module. New CSS classes were added to tailwind.css to provide more design options, including new padding, font-size, color, width, and alignment options.
---
 theme/css/tailwind.css                        | 48 +++++++++++++++++++
 .../fields.json                               |  4 +-
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/theme/css/tailwind.css b/theme/css/tailwind.css
index c00c51d..f6b74be 100644
--- a/theme/css/tailwind.css
+++ b/theme/css/tailwind.css
@@ -2070,6 +2070,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   max-width:20rem;
 }
 
+.fj-max-w-96{
+  max-width:24rem;
+}
+
 .fj-max-w-full{
   max-width:100%;
 }
@@ -2182,6 +2186,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   align-items:center;
 }
 
+.fj-items-baseline{
+  align-items:baseline;
+}
+
 .fj-items-stretch{
   align-items:stretch;
 }
@@ -2198,6 +2206,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   justify-content:space-between;
 }
 
+.fj-gap-10{
+  gap:2.5rem;
+}
+
 .fj-gap-16{
   gap:4rem;
 }
@@ -2214,6 +2226,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   gap:2rem;
 }
 
+.fj-gap-x-1{
+  -moz-column-gap:0.25rem;
+       column-gap:0.25rem;
+}
+
 .fj-gap-x-10{
   -moz-column-gap:2.5rem;
        column-gap:2.5rem;
@@ -2224,6 +2241,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
        column-gap:3rem;
 }
 
+.fj-gap-x-3{
+  -moz-column-gap:0.75rem;
+       column-gap:0.75rem;
+}
+
 .fj-gap-x-6{
   -moz-column-gap:1.5rem;
        column-gap:1.5rem;
@@ -2304,6 +2326,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   white-space:nowrap;
 }
 
+.fj-text-nowrap{
+  text-wrap:nowrap;
+}
+
 .fj-text-balance{
   text-wrap:balance;
 }
@@ -2506,6 +2532,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   padding:0.375rem;
 }
 
+.fj-p-12{
+  padding:3rem;
+}
+
 .fj-p-2{
   padding:0.5rem;
 }
@@ -2670,6 +2700,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   line-height:2rem;
 }
 
+.fj-text-5xl{
+  font-size:3rem;
+  line-height:1;
+}
+
 .fj-text-base{
   font-size:1rem;
   line-height:1.5rem;
@@ -2781,6 +2816,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   color:rgb(28 25 23 / var(--fj-text-opacity));
 }
 
+.fj-text-white{
+  --fj-text-opacity:1;
+  color:rgb(255 255 255 / var(--fj-text-opacity));
+}
+
 .\!fj-no-underline{
   text-decoration-line:none !important;
 }
@@ -3683,6 +3723,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
     height:18rem;
   }
 
+  .lg\:fj-w-full{
+    width:100%;
+  }
+
   .lg\:fj-max-w-3xl{
     max-width:48rem;
   }
@@ -3703,6 +3747,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
     grid-template-columns:repeat(3, minmax(0, 1fr));
   }
 
+  .lg\:fj-place-items-baseline{
+    place-items:baseline;
+  }
+
   .lg\:fj-gap-12{
     gap:3rem;
   }
diff --git a/theme/modules/testimonials-with-star-rating.module/fields.json b/theme/modules/testimonials-with-star-rating.module/fields.json
index fab0cec..569a033 100644
--- a/theme/modules/testimonials-with-star-rating.module/fields.json
+++ b/theme/modules/testimonials-with-star-rating.module/fields.json
@@ -1,9 +1,9 @@
-[{
+[ {
   "id" : "962e05af-a9cb-effe-498f-34ffce0df5e7",
   "name" : "rating",
   "display_width" : null,
   "label" : "Rating",
-  "inline_help_text": "This is the rating of the testimonial from 0 to 5. If rating is 0, the rating stars will disappear.",
+  "inline_help_text" : "This is the rating of the testimonial from 0 to 5. If rating is 0, the rating stars will disappear.",
   "required" : true,
   "locked" : false,
   "display" : "slider",

From 2d6657c3c41584788d233977429dfa1bba8e525d Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Tue, 21 May 2024 19:57:57 +0200
Subject: [PATCH 03/18] Updated UI and functionality of pricing cards

Changes include more customizable elements on the pricing cards, like gaps between elements, font weight, and link behavior. Also, certain fields in the pricing cards such as 'currency' and 'cost' have been combined into a 'price' field, and 'period' has been replaced with 'price_details'. Further, 'button_url' has been split into 'cta_label' and 'cta_link' for more control over the call to action. Default values in the 'fields.json' have also been updated to reflect these changes.
---
 .../modules/pricing-cards.module/fields.json  | 127 ++++++++++++------
 .../modules/pricing-cards.module/module.html  |  31 +++--
 2 files changed, 103 insertions(+), 55 deletions(-)

diff --git a/theme/modules/pricing-cards.module/fields.json b/theme/modules/pricing-cards.module/fields.json
index ce94b73..01dd6ab 100644
--- a/theme/modules/pricing-cards.module/fields.json
+++ b/theme/modules/pricing-cards.module/fields.json
@@ -2,7 +2,7 @@
   "id" : "31d1e0c6-4e1e-4a1f-7c33-18729a4b2501",
   "name" : "pricing_card_group",
   "display_width" : null,
-  "label" : "Pricing Card Group",
+  "label" : "Pricing Card",
   "required" : false,
   "locked" : false,
   "occurrence" : {
@@ -23,42 +23,30 @@
     "show_emoji_picker" : false,
     "type" : "text",
     "default" : "Basic"
-  }, {
-    "id" : "99516692-abe2-ba9c-0f27-cfb640082988",
-    "name" : "currency",
-    "display_width" : null,
-    "label" : "Currency",
-    "required" : false,
-    "locked" : false,
-    "validation_regex" : "",
-    "allow_new_line" : false,
-    "show_emoji_picker" : false,
-    "type" : "text",
-    "default" : "$"
   }, {
     "id" : "2629d9b9-46b4-a443-08d3-5313daafd29f",
-    "name" : "cost",
+    "name" : "price",
     "display_width" : null,
-    "label" : "Cost",
+    "label" : "Price",
     "required" : false,
     "locked" : false,
     "validation_regex" : "",
     "allow_new_line" : false,
     "show_emoji_picker" : false,
     "type" : "text",
-    "default" : "15"
+    "default" : "123"
   }, {
     "id" : "58caa5af-22e7-f152-be67-a6baa3cf119c",
-    "name" : "period",
+    "name" : "price_details",
     "display_width" : null,
-    "label" : "Period",
+    "label" : "Price Details",
     "required" : false,
     "locked" : false,
     "validation_regex" : "",
     "allow_new_line" : false,
     "show_emoji_picker" : false,
     "type" : "text",
-    "default" : "month"
+    "default" : "/ month"
   }, {
     "id" : "a0e41c7a-48ac-266c-0fd3-0d42ea1cc705",
     "name" : "price_subtext",
@@ -73,16 +61,43 @@
     "default" : "Single-member plan for personal projects, prototypes, and getting started."
   }, {
     "id" : "ec4cd19d-7c47-c5c6-595f-8f3091935195",
-    "name" : "button_url",
+    "name" : "cta_label",
     "display_width" : null,
-    "label" : "Button URL",
+    "label" : "Call to Action Label",
     "required" : false,
     "locked" : false,
     "validation_regex" : "",
     "allow_new_line" : false,
     "show_emoji_picker" : false,
     "type" : "text",
-    "default" : "https://en.wikipedia.org/wiki/Cat"
+    "default" : "Get Started"
+  }, {
+    "id" : "1bb378bf-31d3-a398-485b-8d91a98bab01",
+    "name" : "cta_link",
+    "display_width" : null,
+    "label" : "Call to Action Link",
+    "required" : false,
+    "locked" : false,
+    "visibility" : {
+      "controlling_field" : null,
+      "controlling_field_path" : "pricing_card_group.cta_label",
+      "controlling_value_regex" : null,
+      "property" : null,
+      "operator" : "NOT_EMPTY",
+      "access" : null
+    },
+    "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER" ],
+    "show_advanced_rel_options" : false,
+    "type" : "link",
+    "default" : {
+      "url" : {
+        "content_id" : null,
+        "href" : "#nada",
+        "type" : "EXTERNAL"
+      },
+      "open_in_new_tab" : false,
+      "no_follow" : false
+    }
   }, {
     "id" : "70bf210b-69a8-846c-b44a-180ec6ba4ee0",
     "name" : "features_title",
@@ -119,31 +134,55 @@
   "group_occurrence_meta" : null,
   "type" : "group",
   "default" : [ {
-    "tier_name" : "Basic",
-    "currency" : "$",
-    "cost" : "15",
-    "period" : "month",
-    "price_subtext" : "$12 per month if paid annually",
-    "button_url" : "https://en.wikipedia.org/wiki/Cat",
-    "features_title" : "Main features:",
-    "features_list_item" : [ "Single member seat", "Global edge network", "Live site previews with collaboration", "Instant rollbacks" ]
+    "tier_name" : "Starter",
+    "price" : "$15",
+    "price_details" : "/ month",
+    "price_subtext" : "Perfect for Fresh Juice lovers",
+    "cta_label" : "Get Started",
+    "cta_link" : {
+      "url" : {
+        "content_id" : null,
+        "href" : "https://source.unsplash.com/random/1024x1024/?fruit+smoothie",
+        "type" : "EXTERNAL"
+      },
+      "open_in_new_tab" : false,
+      "no_follow" : false
+    },
+    "features_title" : "Includes:",
+    "features_list_item" : [ "Complimentary Food Salad", "Monthly access to fruity dishes", "Apple Juice", "Mini Cherry Juice Shot" ]
   }, {
     "tier_name" : "Pro",
-    "currency" : "$",
-    "cost" : "30",
-    "period" : "month",
-    "price_subtext" : "$24 per month if paid annually",
-    "button_url" : "https://en.wikipedia.org/wiki/Dog",
-    "features_title" : "Main features:",
-    "features_list_item" : [ "Background functions", "1TB bandwidth", "25,000 build minutes", "Audit logs with 7-day history", "Slack & email notifications" ]
+    "price" : "$45",
+    "price_details" : "/ month",
+    "price_subtext" : "For experts in the juice world",
+    "cta_label" : "Get Juicing",
+    "cta_link" : {
+      "url" : {
+        "content_id" : null,
+        "href" : "https://source.unsplash.com/random/1024x1024/?fruit+smoothie",
+        "type" : "EXTERNAL"
+      },
+      "open_in_new_tab" : false,
+      "no_follow" : false
+    },
+    "features_title" : "Starter features included along with:",
+    "features_list_item" : [ "Banana Smoothie", "Private Juice Bar", "Customisable Fruit Salad", "Weekly Updates on Juicy Features", "Being Extra Juicy" ]
   }, {
     "tier_name" : "Enterprise",
-    "currency" : "$",
-    "cost" : "60",
-    "period" : "month",
-    "price_subtext" : "$48 per month if paid annually",
-    "button_url" : "https://en.wikipedia.org/wiki/Frog",
-    "features_title" : "Main features:",
-    "features_list_item" : [ "Additional member seats", "Additional bandwidth", "Additional build minutes", "Additional teams" ]
+    "price" : "Custom",
+    "price_details" : "",
+    "price_subtext" : "For the ultimate juice experience",
+    "cta_label" : "Get Partying",
+    "cta_link" : {
+      "url" : {
+        "content_id" : null,
+        "href" : "https://source.unsplash.com/random/1024x1024/?fruit+smoothie",
+        "type" : "EXTERNAL"
+      },
+      "open_in_new_tab" : false,
+      "no_follow" : false
+    },
+    "features_title" : "Customisable feature inclusion along with:",
+    "features_list_item" : [ "Private Juice Bar Room", "Unique Fruity Dishes", "Opportunities for Exciting Juicy Adventures", "Apple Festival" ]
   } ]
 } ]
\ No newline at end of file
diff --git a/theme/modules/pricing-cards.module/module.html b/theme/modules/pricing-cards.module/module.html
index 149653e..2caa5b5 100644
--- a/theme/modules/pricing-cards.module/module.html
+++ b/theme/modules/pricing-cards.module/module.html
@@ -5,27 +5,36 @@
 <div class="fj-not-prose fj-grid fj-grid-cols-1 fj-place-items-center lg:fj-place-items-baseline fj-mx-auto {{ grid_col_class or 'fj-max-w-2xl' }}">
   {% for item in module.pricing_card_group %}
     <div class="fj-max-w-96 lg:fj-w-full fj-border-gray-300 fj-grid fj-place-items-center fj-p-12 {{ 'fj-border-t lg:fj-border-t-0 lg:fj-border-l' if loop.index0 }}">
-      <div class="lg:fj-w-full fj-grid fj-gap-10">
+      <div class="lg:fj-w-full fj-grid fj-gap-4">
 
-        <p class="fj-text-base fj-font-semibold">{{ item.tier_name }}</p>
+        <p class="fj-text-base fj-font-semibold fj-leading-none">{{ item.tier_name }}</p>
 
         <div class="fj-grid fj-gap-2">
-          <div class="fj-flex fj-items-baseline fj-gap-x-1">
-            <span class="fj-text-5xl fj-font-bold">{{ item.currency }}{{ item.cost }}</span>
-            <span class="fj-text-sm fj-font-semibold">/{{ item.period }}</span>
+          <div class="fj-flex fj-items-baseline fj-gap-x-1 fj-leading-none">
+            {% if item.price %}<span class="fj-text-4xl fj-font-bold">{{ item.price }}</span>{% endif %}
+            {% if item.price_details %}<span class="fj-text-sm fj-font-semibold">{{ item.price_details }}</span>{% endif %}
           </div>
 
-          <p>{{ item.price_subtext }}</p>
+          <p class="fj-leading-tight fj-m-0 fj-text-base">{{ item.price_subtext }}</p>
         </div>
 
-        <a class="fj-button fj-button--small fj-text-sm fj-text-white fj-font-semibold fj-text-center" href="{{ item.button_url }}">Buy Plan</a>
+        {% set href = item.cta_link.url.href %}
+        {% if item.cta_link.url.type is equalto "EMAIL_ADDRESS" %}
+          {% set href = "mailto:" + href %}
+        {% endif %}
+        <a class="fj-button fj-button--small fj-normal-case	fj-text-sm fj-text-white fj-font-semibold fj-text-center"
+           href="{{ href|escape_url }}" {% if item.cta_link.open_in_new_tab %}
+           target="_blank"{% endif %} {% if item.cta_link.rel %}
+           rel="{{ item.cta_link.rel|escape_attr }}"{% endif %}>
+          {{ item.cta_label }}
+        </a>
 
-        <p class="fj-text-sm fj-font-semibold">{{ item.features_title }}</p>
+        <p class="fj-text-sm fj-font-semibold fj-leading-tight">{{ item.features_title }}</p>
 
-        <ul class="space-y-3 text-sm">
+        <ul class="fj-space-y-2 fj-text-sm">
           {% for feature in item.features_list_item %}
-            <li class="fj-flex fj-gap-x-3 fj-text-nowrap">
-              <svg class="fj-size-6 fj-text-blue-600" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true">
+            <li class="fj-flex fj-gap-x-3 fj-leading-tight">
+              <svg class="fj-shrink-0 fj-size-6 fj-text-blue-600" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true">
                 <path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path>
               </svg>
 

From f54e1eacb0103dc726ec900c23fed35002bdc326 Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Tue, 21 May 2024 19:58:10 +0200
Subject: [PATCH 04/18] Update styling in tailwind.css

Removed unnecessary CSS classes .fj-gap-10, .fj-text-nowrap from tailwind.css. Made amendments in the .fj-text-4xl class, specifically in font-size and line-height. Added a new class .fj-normal-case for normal text transformation.
---
 theme/css/tailwind.css | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/theme/css/tailwind.css b/theme/css/tailwind.css
index f6b74be..36f0873 100644
--- a/theme/css/tailwind.css
+++ b/theme/css/tailwind.css
@@ -2206,10 +2206,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
   justify-content:space-between;
 }
 
-.fj-gap-10{
-  gap:2.5rem;
-}
-
 .fj-gap-16{
   gap:4rem;
 }
@@ -2326,10 +2322,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
   white-space:nowrap;
 }
 
-.fj-text-nowrap{
-  text-wrap:nowrap;
-}
-
 .fj-text-balance{
   text-wrap:balance;
 }
@@ -2700,9 +2692,9 @@ lite-youtube.lyt-activated > .lty-playbtn{
   line-height:2rem;
 }
 
-.fj-text-5xl{
-  font-size:3rem;
-  line-height:1;
+.fj-text-4xl{
+  font-size:2.25rem;
+  line-height:2.5rem;
 }
 
 .fj-text-base{
@@ -2750,6 +2742,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   text-transform:uppercase;
 }
 
+.fj-normal-case{
+  text-transform:none;
+}
+
 .fj-italic{
   font-style:italic;
 }

From b2df22fff25400c30e6744901d58ca22b4a15b90 Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Thu, 23 May 2024 16:47:42 +0200
Subject: [PATCH 05/18] Add "Price Card with Details" module

This commit introduces a new module names "Price Card with Details". This module has two column layouts that facilitates two groups of information with various children properties. It can be used in landing pages, site pages, blog listings and blog posts for displaying pricing details along with additional information.
---
 .../fields.json                               | 180 ++++++++++++++++++
 .../price-card-with-details.module/meta.json  |  16 ++
 .../price-card-with-details.module/module.css |   0
 .../module.html                               |  55 ++++++
 .../price-card-with-details.module/module.js  |   0
 5 files changed, 251 insertions(+)
 create mode 100644 theme/modules/price-card-with-details.module/fields.json
 create mode 100644 theme/modules/price-card-with-details.module/meta.json
 create mode 100644 theme/modules/price-card-with-details.module/module.css
 create mode 100644 theme/modules/price-card-with-details.module/module.html
 create mode 100644 theme/modules/price-card-with-details.module/module.js

diff --git a/theme/modules/price-card-with-details.module/fields.json b/theme/modules/price-card-with-details.module/fields.json
new file mode 100644
index 0000000..3dc3280
--- /dev/null
+++ b/theme/modules/price-card-with-details.module/fields.json
@@ -0,0 +1,180 @@
+[ {
+  "id" : "d6f776b8-4c95-0265-0338-95b2b892258b",
+  "name" : "two_column_group",
+  "display_width" : null,
+  "label" : "Two Column Group",
+  "required" : false,
+  "locked" : false,
+  "children" : [ {
+    "id" : "29f3b9dc-17c7-28f2-83e3-2c3ecbb966f5",
+    "name" : "title",
+    "display_width" : null,
+    "label" : "Title",
+    "required" : true,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "Juicy Permanent"
+  }, {
+    "id" : "a4ca36af-76ae-770a-f896-743348937a9d",
+    "name" : "description",
+    "display_width" : null,
+    "label" : "Description",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "The best, the mightiest, the bravest juices and smoothies are there to help you smooth up for the day."
+  }, {
+    "id" : "4d13341b-ebf6-9c32-120b-e35e6f07ef30",
+    "name" : "divider_text",
+    "display_width" : null,
+    "label" : "Divider Text",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "What's included"
+  }, {
+    "id" : "a0b675a1-c232-5c7a-d638-4789a941e235",
+    "name" : "features_item",
+    "display_width" : null,
+    "label" : "Features Item",
+    "required" : false,
+    "locked" : false,
+    "occurrence" : {
+      "min" : 2,
+      "max" : null,
+      "sorting_label_field" : null,
+      "default" : 4
+    },
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : [ "Permanent Juiciness", "VIP access to secret Juicy Events", "Private Juice and Smoothie Butlers", "Hotels Secret Juice Service" ]
+  } ],
+  "tab" : "CONTENT",
+  "expanded" : false,
+  "group_occurrence_meta" : null,
+  "type" : "group",
+  "default" : {
+    "title" : "Juicy Permanent",
+    "description" : "The best, the mightiest, the bravest juices and smoothies are there to help you smooth up for the day.",
+    "divider_text" : "What's included",
+    "features_item" : [ "Permanent Juiciness", "VIP access to secret Juicy Events", "Private Juice and Smoothie Butlers", "Hotels Secret Juice Service" ]
+  }
+}, {
+  "id" : "108c4f09-fc25-b23c-13b5-48538075edb8",
+  "name" : "one_column_price_card",
+  "display_width" : null,
+  "label" : "One Column Price Card",
+  "required" : false,
+  "locked" : false,
+  "children" : [ {
+    "id" : "6dc1090e-378c-01fe-85dd-05dc515a86f3",
+    "name" : "slogan",
+    "display_width" : null,
+    "label" : "Slogan",
+    "required" : true,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "Pay once, be juicy forever"
+  }, {
+    "id" : "92df9402-f998-f648-c234-ac827a557f38",
+    "name" : "cost",
+    "display_width" : null,
+    "label" : "Cost",
+    "required" : true,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "$349"
+  }, {
+    "id" : "77177926-9187-1c83-97d3-1f8fbfe752c8",
+    "name" : "cost_details",
+    "display_width" : null,
+    "label" : "Cost Details",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "USD"
+  }, {
+    "id" : "c574064a-3430-990d-1d95-6988c4bd360a",
+    "name" : "cta_link",
+    "display_width" : null,
+    "label" : "CTA Link",
+    "required" : false,
+    "locked" : false,
+    "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER" ],
+    "show_advanced_rel_options" : false,
+    "type" : "link",
+    "default" : {
+      "url" : {
+        "content_id" : null,
+        "href" : "https://source.unsplash.com/random/1024x1024/?infinite+smoothie",
+        "type" : "EXTERNAL"
+      },
+      "open_in_new_tab" : false,
+      "no_follow" : false
+    }
+  }, {
+    "id" : "890ae293-bf26-c503-e479-22fae50a76f1",
+    "name" : "cta_text",
+    "display_width" : null,
+    "label" : "CTA Text",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "Get Juicy"
+  }, {
+    "id" : "35860b0d-061e-a20c-9a54-140dd6662713",
+    "name" : "sub_text",
+    "display_width" : null,
+    "label" : "Sub Text",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "Invoices and receipts available for easy juicy reevaluations"
+  } ],
+  "tab" : "CONTENT",
+  "expanded" : false,
+  "group_occurrence_meta" : null,
+  "type" : "group",
+  "default" : {
+    "slogan" : "Pay once, be juicy forever",
+    "cost" : "$349",
+    "cost_details" : "USD",
+    "cta_link" : {
+      "url" : {
+        "content_id" : null,
+        "href" : "https://source.unsplash.com/random/1024x1024/?infinite+smoothie",
+        "type" : "EXTERNAL"
+      },
+      "open_in_new_tab" : false,
+      "no_follow" : false
+    },
+    "cta_text" : "Get Juicy",
+    "sub_text" : "Invoices and receipts available for easy juicy reevaluations"
+  }
+} ]
\ No newline at end of file
diff --git a/theme/modules/price-card-with-details.module/meta.json b/theme/modules/price-card-with-details.module/meta.json
new file mode 100644
index 0000000..0a72595
--- /dev/null
+++ b/theme/modules/price-card-with-details.module/meta.json
@@ -0,0 +1,16 @@
+{
+  "global": false,
+  "content_types": [
+    "LANDING_PAGE",
+    "SITE_PAGE",
+    "BLOG_LISTING",
+    "BLOG_POST"
+  ],
+  "host_template_types": [
+    "PAGE",
+    "BLOG_LISTING",
+    "BLOG_POST"
+  ],
+  "label": "Price Card with Details",
+  "is_available_for_new_content": true
+}
diff --git a/theme/modules/price-card-with-details.module/module.css b/theme/modules/price-card-with-details.module/module.css
new file mode 100644
index 0000000..e69de29
diff --git a/theme/modules/price-card-with-details.module/module.html b/theme/modules/price-card-with-details.module/module.html
new file mode 100644
index 0000000..5cafd20
--- /dev/null
+++ b/theme/modules/price-card-with-details.module/module.html
@@ -0,0 +1,55 @@
+<div class="fj-max-w-2xl fj-rounded-3xl fj-ring-1 fj-ring-gray-200 fj-mx-auto fj-mt-16 sm:fj-mt-20 lg:fj-mx-0 lg:fj-flex lg:fj-max-w-none">
+  <div class="fj-flex fj-flex-col fj-justify-center fj-p-8 sm:fj-p-10 fj-space-y-4 lg:fj-flex-auto">
+    <p class="fj-text-2xl fj-font-bold fj-tracking-tight">{{ module.two_column_group.title }}</p>
+
+    <p class="fj-text-base fj-leading-none">{{ module.two_column_group.description }}</p>
+
+    <div class="fj-flex fj-items-center fj-gap-x-4">
+      <p class="fj-flex-none fj-text-sm fj-font-semibold fj-leading-6 fj-text-blue-600">{{ module.two_column_group.divider_text }}</p>
+
+      <div class="fj-h-px fj-flex-auto fj-bg-gray-300"></div>
+    </div>
+
+    <ul role="list" class="fj-grid fj-grid-cols-1 fj-gap-4 fj-text-sm fj-leading-6 fj-text-gray-600 md:fj-grid-cols-2 md:fj-gap-6">
+      {% for item in module.two_column_group.features_item %}
+        <li class="fj-flex fj-gap-x-3">
+          <svg class="fj-size-6 fj-flex-none fj-text-blue-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+          </svg>
+
+          {{ item }}
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+
+  <div class="-fj-mt-2 fj-p-2 lg:fj-mt-0 lg:fj-w-full lg:fj-max-w-md lg:fj-flex-shrink-0">
+    <div class="fj-rounded-2xl fj-bg-gray-50 fj-py-10 fj-text-center fj-ring-1 fj-ring-inset fj-ring-gray-900/5 lg:fj-flex lg:fj-flex-col lg:fj-justify-center lg:fj-py-16">
+      <div class="fj-grid fj-gap-4 fj-mx-auto fj-max-w-xs fj-px-8">
+        <p class="fj-text-base fj-font-semibold">{{ module.one_column_price_card.slogan }}</p>
+
+        <div class="fj-flex fj-items-baseline fj-justify-center fj-gap-x-2">
+          <span class="fj-text-5xl fj-font-bold">{{ module.one_column_price_card.cost }}</span>
+
+          <span class="fj-text-sm fj-font-semibold fj-leading-6">{{ module.one_column_price_card.cost_details }}</span>
+        </div>
+
+        {% set href = module.one_column_price_card.cta_link.url.href %}
+        {% if module.one_column_price_card.cta_link.url.type is equalto "EMAIL_ADDRESS" %}
+          {% set href = "mailto:" + href %}
+        {% endif %}
+
+        <a class="fj-button fj-button--small fj-normal-case	fj-text-sm fj-text-white fj-font-semibold fj-text-center"
+           href="{{ href|escape_url }}" {% if module.one_column_price_card.cta_link.open_in_new_tab %}
+           target="_blank"{% endif %} {% if module.one_column_price_card.cta_link.rel %}
+           rel="{{ module.one_column_price_card.cta_link.rel|escape_attr }}"{% endif %}>
+          {{ module.one_column_price_card.cta_text }}
+        </a>
+
+        <p class="fj-text-xs fj-leading-5">{{ module.one_column_price_card.sub_text }}</p>
+
+      </div>
+    </div>
+
+  </div>
+</div>
\ No newline at end of file
diff --git a/theme/modules/price-card-with-details.module/module.js b/theme/modules/price-card-with-details.module/module.js
new file mode 100644
index 0000000..e69de29

From 78da573d2309943b8cabc1932d2e8189ef432911 Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Thu, 23 May 2024 16:47:50 +0200
Subject: [PATCH 06/18] Add new CSS utility classes in Tailwind CSS file

New utility classes have been added to the Tailwind CSS file to cover more styles across various screen sizes. This addition will allow for more customization options and finer control over the look and feel of the application.
---
 theme/css/tailwind.css | 151 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 151 insertions(+)

diff --git a/theme/css/tailwind.css b/theme/css/tailwind.css
index 36f0873..3dfa902 100644
--- a/theme/css/tailwind.css
+++ b/theme/css/tailwind.css
@@ -1794,6 +1794,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   grid-column:span 2 / span 2;
 }
 
+.fj-col-span-1{
+  grid-column:span 1 / span 1;
+}
+
 .fj-col-end-1{
   grid-column-end:1;
 }
@@ -1858,6 +1862,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   margin-bottom:-1px;
 }
 
+.-fj-mt-2{
+  margin-top:-0.5rem;
+}
+
 .fj-mb-2{
   margin-bottom:0.5rem;
 }
@@ -2014,6 +2022,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   height:100%;
 }
 
+.fj-h-px{
+  height:1px;
+}
+
 .fj-max-h-0{
   max-height:0px;
 }
@@ -2082,10 +2094,22 @@ lite-youtube.lyt-activated > .lty-playbtn{
   max-width:20rem;
 }
 
+.fj-max-w-7xl{
+  max-width:80rem;
+}
+
+.fj-max-w-4xl{
+  max-width:56rem;
+}
+
 .fj-flex-1{
   flex:1 1 0%;
 }
 
+.fj-flex-auto{
+  flex:1 1 auto;
+}
+
 .fj-flex-none{
   flex:none;
 }
@@ -2237,11 +2261,21 @@ lite-youtube.lyt-activated > .lty-playbtn{
        column-gap:3rem;
 }
 
+.fj-gap-x-2{
+  -moz-column-gap:0.5rem;
+       column-gap:0.5rem;
+}
+
 .fj-gap-x-3{
   -moz-column-gap:0.75rem;
        column-gap:0.75rem;
 }
 
+.fj-gap-x-4{
+  -moz-column-gap:1rem;
+       column-gap:1rem;
+}
+
 .fj-gap-x-6{
   -moz-column-gap:1.5rem;
        column-gap:1.5rem;
@@ -2330,6 +2364,14 @@ lite-youtube.lyt-activated > .lty-playbtn{
   overflow-wrap:break-word;
 }
 
+.fj-rounded-2xl{
+  border-radius:1rem;
+}
+
+.fj-rounded-3xl{
+  border-radius:1.5rem;
+}
+
 .fj-rounded-full{
   border-radius:9999px;
 }
@@ -2432,6 +2474,16 @@ lite-youtube.lyt-activated > .lty-playbtn{
   background-color:rgb(243 244 246 / var(--fj-bg-opacity));
 }
 
+.fj-bg-gray-300{
+  --fj-bg-opacity:1;
+  background-color:rgb(209 213 219 / var(--fj-bg-opacity));
+}
+
+.fj-bg-gray-50{
+  --fj-bg-opacity:1;
+  background-color:rgb(249 250 251 / var(--fj-bg-opacity));
+}
+
 .fj-bg-rose-50{
   --fj-bg-opacity:1;
   background-color:rgb(255 241 242 / var(--fj-bg-opacity));
@@ -2584,6 +2636,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   padding-right:1.5rem;
 }
 
+.fj-px-8{
+  padding-left:2rem;
+  padding-right:2rem;
+}
+
 .fj-py-1{
   padding-top:0.25rem;
   padding-bottom:0.25rem;
@@ -2594,6 +2651,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   padding-bottom:0.375rem;
 }
 
+.fj-py-10{
+  padding-top:2.5rem;
+  padding-bottom:2.5rem;
+}
+
 .fj-py-2{
   padding-top:0.5rem;
   padding-bottom:0.5rem;
@@ -2722,6 +2784,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   line-height:1rem;
 }
 
+.fj-text-5xl{
+  font-size:3rem;
+  line-height:1;
+}
+
 .\!fj-font-bold{
   font-weight:700 !important;
 }
@@ -2774,6 +2841,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   letter-spacing:0.05em;
 }
 
+.fj-tracking-tight{
+  letter-spacing:-0.025em;
+}
+
 .\!fj-text-current{
   color:currentColor !important;
 }
@@ -2787,6 +2858,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   color:currentColor;
 }
 
+.fj-text-gray-600{
+  --fj-text-opacity:1;
+  color:rgb(75 85 99 / var(--fj-text-opacity));
+}
+
 .fj-text-rose-500{
   --fj-text-opacity:1;
   color:rgb(244 63 94 / var(--fj-text-opacity));
@@ -2859,10 +2935,19 @@ lite-youtube.lyt-activated > .lty-playbtn{
   box-shadow:var(--fj-ring-offset-shadow), var(--fj-ring-shadow), var(--fj-shadow, 0 0 #0000);
 }
 
+.fj-ring-inset{
+  --fj-ring-inset:inset;
+}
+
 .fj-ring-gray-900\/5{
   --fj-ring-color:rgb(17 24 39 / 0.05);
 }
 
+.fj-ring-gray-200{
+  --fj-ring-opacity:1;
+  --fj-ring-color:rgb(229 231 235 / var(--fj-ring-opacity));
+}
+
 .fj-backdrop-blur{
   --fj-backdrop-blur:blur(8px);
 }
@@ -3492,10 +3577,18 @@ lite-youtube.lyt-activated > .lty-playbtn{
     margin-bottom:1rem;
   }
 
+  .sm\:fj-mt-20{
+    margin-top:5rem;
+  }
+
   .sm\:fj-max-w-sm{
     max-width:24rem;
   }
 
+  .sm\:fj-grid-cols-2{
+    grid-template-columns:repeat(2, minmax(0, 1fr));
+  }
+
   .sm\:fj-flex-row{
     flex-direction:row;
   }
@@ -3504,10 +3597,18 @@ lite-youtube.lyt-activated > .lty-playbtn{
     align-items:center;
   }
 
+  .sm\:fj-gap-6{
+    gap:1.5rem;
+  }
+
   .sm\:fj-gap-8{
     gap:2rem;
   }
 
+  .sm\:fj-p-10{
+    padding:2.5rem;
+  }
+
   .sm\:fj-pt-24{
     padding-top:6rem;
   }
@@ -3618,6 +3719,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
     gap:2rem;
   }
 
+  .md\:fj-gap-6{
+    gap:1.5rem;
+  }
+
   .md\:fj-space-y-8 > :not([hidden]) ~ :not([hidden]){
     --fj-space-y-reverse:0;
     margin-top:calc(2rem * calc(1 - var(--fj-space-y-reverse)));
@@ -3698,10 +3803,19 @@ lite-youtube.lyt-activated > .lty-playbtn{
     grid-row-start:3;
   }
 
+  .lg\:fj-mx-0{
+    margin-left:0px;
+    margin-right:0px;
+  }
+
   .lg\:fj-mb-12{
     margin-bottom:3rem;
   }
 
+  .lg\:fj-mt-0{
+    margin-top:0px;
+  }
+
   .lg\:fj-mt-24{
     margin-top:6rem;
   }
@@ -3710,6 +3824,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
     display:flex;
   }
 
+  .lg\:fj-grid{
+    display:grid;
+  }
+
   .lg\:fj-hidden{
     display:none;
   }
@@ -3727,10 +3845,26 @@ lite-youtube.lyt-activated > .lty-playbtn{
     max-width:48rem;
   }
 
+  .lg\:fj-max-w-md{
+    max-width:28rem;
+  }
+
+  .lg\:fj-max-w-none{
+    max-width:none;
+  }
+
   .lg\:fj-flex-1{
     flex:1 1 0%;
   }
 
+  .lg\:fj-flex-auto{
+    flex:1 1 auto;
+  }
+
+  .lg\:fj-flex-shrink-0{
+    flex-shrink:0;
+  }
+
   .lg\:fj-grid-cols-1{
     grid-template-columns:repeat(1, minmax(0, 1fr));
   }
@@ -3743,14 +3877,26 @@ lite-youtube.lyt-activated > .lty-playbtn{
     grid-template-columns:repeat(3, minmax(0, 1fr));
   }
 
+  .lg\:fj-flex-col{
+    flex-direction:column;
+  }
+
   .lg\:fj-place-items-baseline{
     place-items:baseline;
   }
 
+  .lg\:fj-justify-center{
+    justify-content:center;
+  }
+
   .lg\:fj-gap-12{
     gap:3rem;
   }
 
+  .lg\:fj-gap-8{
+    gap:2rem;
+  }
+
   .lg\:fj-gap-x-10{
     -moz-column-gap:2.5rem;
          column-gap:2.5rem;
@@ -3784,6 +3930,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
     padding-bottom:0px;
   }
 
+  .lg\:fj-py-16{
+    padding-top:4rem;
+    padding-bottom:4rem;
+  }
+
   .lg\:fj-pt-32{
     padding-top:8rem;
   }

From b9cfadee26a57a1858054aad78b3728cb85a5289 Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Thu, 23 May 2024 18:14:55 +0200
Subject: [PATCH 07/18] Update price card module and optimize tailwind CSS

Made some changes in price card module by making the divider text conditional and changing several field requirements. Also, optimized tailwind CSS by removing unnecessary styles and rearranging some rules for better readability.
---
 theme/css/tailwind.css                        | 62 +++++--------------
 .../fields.json                               |  6 +-
 .../module.html                               | 12 ++--
 3 files changed, 27 insertions(+), 53 deletions(-)

diff --git a/theme/css/tailwind.css b/theme/css/tailwind.css
index 3dfa902..bba5279 100644
--- a/theme/css/tailwind.css
+++ b/theme/css/tailwind.css
@@ -1794,10 +1794,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
   grid-column:span 2 / span 2;
 }
 
-.fj-col-span-1{
-  grid-column:span 1 / span 1;
-}
-
 .fj-col-end-1{
   grid-column-end:1;
 }
@@ -2094,14 +2090,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
   max-width:20rem;
 }
 
-.fj-max-w-7xl{
-  max-width:80rem;
-}
-
-.fj-max-w-4xl{
-  max-width:56rem;
-}
-
 .fj-flex-1{
   flex:1 1 0%;
 }
@@ -2759,6 +2747,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   line-height:2.5rem;
 }
 
+.fj-text-5xl{
+  font-size:3rem;
+  line-height:1;
+}
+
 .fj-text-base{
   font-size:1rem;
   line-height:1.5rem;
@@ -2784,11 +2777,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
   line-height:1rem;
 }
 
-.fj-text-5xl{
-  font-size:3rem;
-  line-height:1;
-}
-
 .\!fj-font-bold{
   font-weight:700 !important;
 }
@@ -2837,14 +2825,14 @@ lite-youtube.lyt-activated > .lty-playbtn{
   line-height:1.25;
 }
 
-.fj-tracking-wider{
-  letter-spacing:0.05em;
-}
-
 .fj-tracking-tight{
   letter-spacing:-0.025em;
 }
 
+.fj-tracking-wider{
+  letter-spacing:0.05em;
+}
+
 .\!fj-text-current{
   color:currentColor !important;
 }
@@ -2939,15 +2927,15 @@ lite-youtube.lyt-activated > .lty-playbtn{
   --fj-ring-inset:inset;
 }
 
-.fj-ring-gray-900\/5{
-  --fj-ring-color:rgb(17 24 39 / 0.05);
-}
-
 .fj-ring-gray-200{
   --fj-ring-opacity:1;
   --fj-ring-color:rgb(229 231 235 / var(--fj-ring-opacity));
 }
 
+.fj-ring-gray-900\/5{
+  --fj-ring-color:rgb(17 24 39 / 0.05);
+}
+
 .fj-backdrop-blur{
   --fj-backdrop-blur:blur(8px);
 }
@@ -3585,10 +3573,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
     max-width:24rem;
   }
 
-  .sm\:fj-grid-cols-2{
-    grid-template-columns:repeat(2, minmax(0, 1fr));
-  }
-
   .sm\:fj-flex-row{
     flex-direction:row;
   }
@@ -3597,10 +3581,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
     align-items:center;
   }
 
-  .sm\:fj-gap-6{
-    gap:1.5rem;
-  }
-
   .sm\:fj-gap-8{
     gap:2rem;
   }
@@ -3715,14 +3695,14 @@ lite-youtube.lyt-activated > .lty-playbtn{
     gap:3rem;
   }
 
-  .md\:fj-gap-8{
-    gap:2rem;
-  }
-
   .md\:fj-gap-6{
     gap:1.5rem;
   }
 
+  .md\:fj-gap-8{
+    gap:2rem;
+  }
+
   .md\:fj-space-y-8 > :not([hidden]) ~ :not([hidden]){
     --fj-space-y-reverse:0;
     margin-top:calc(2rem * calc(1 - var(--fj-space-y-reverse)));
@@ -3824,10 +3804,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
     display:flex;
   }
 
-  .lg\:fj-grid{
-    display:grid;
-  }
-
   .lg\:fj-hidden{
     display:none;
   }
@@ -3893,10 +3869,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
     gap:3rem;
   }
 
-  .lg\:fj-gap-8{
-    gap:2rem;
-  }
-
   .lg\:fj-gap-x-10{
     -moz-column-gap:2.5rem;
          column-gap:2.5rem;
diff --git a/theme/modules/price-card-with-details.module/fields.json b/theme/modules/price-card-with-details.module/fields.json
index 3dc3280..120b943 100644
--- a/theme/modules/price-card-with-details.module/fields.json
+++ b/theme/modules/price-card-with-details.module/fields.json
@@ -10,7 +10,7 @@
     "name" : "title",
     "display_width" : null,
     "label" : "Title",
-    "required" : true,
+    "required" : false,
     "locked" : false,
     "validation_regex" : "",
     "allow_new_line" : false,
@@ -49,7 +49,7 @@
     "required" : false,
     "locked" : false,
     "occurrence" : {
-      "min" : 2,
+      "min" : 0,
       "max" : null,
       "sorting_label_field" : null,
       "default" : 4
@@ -94,7 +94,7 @@
     "name" : "cost",
     "display_width" : null,
     "label" : "Cost",
-    "required" : true,
+    "required" : false,
     "locked" : false,
     "validation_regex" : "",
     "allow_new_line" : false,
diff --git a/theme/modules/price-card-with-details.module/module.html b/theme/modules/price-card-with-details.module/module.html
index 5cafd20..00f2092 100644
--- a/theme/modules/price-card-with-details.module/module.html
+++ b/theme/modules/price-card-with-details.module/module.html
@@ -1,14 +1,16 @@
-<div class="fj-max-w-2xl fj-rounded-3xl fj-ring-1 fj-ring-gray-200 fj-mx-auto fj-mt-16 sm:fj-mt-20 lg:fj-mx-0 lg:fj-flex lg:fj-max-w-none">
+<div class="fj-max-w-2xl fj-rounded-3xl fj-ring-1 fj-ring-gray-200 fj-mx-auto lg:fj-mx-0 lg:fj-flex lg:fj-max-w-none">
   <div class="fj-flex fj-flex-col fj-justify-center fj-p-8 sm:fj-p-10 fj-space-y-4 lg:fj-flex-auto">
     <p class="fj-text-2xl fj-font-bold fj-tracking-tight">{{ module.two_column_group.title }}</p>
 
     <p class="fj-text-base fj-leading-none">{{ module.two_column_group.description }}</p>
 
-    <div class="fj-flex fj-items-center fj-gap-x-4">
-      <p class="fj-flex-none fj-text-sm fj-font-semibold fj-leading-6 fj-text-blue-600">{{ module.two_column_group.divider_text }}</p>
+    {% if module.two_column_group.features_item | length > 0 %}
+      <div class="fj-flex fj-items-center fj-gap-x-4">
+        <p class="fj-flex-none fj-text-sm fj-font-semibold fj-leading-6 fj-text-blue-600">{{ module.two_column_group.divider_text }}</p>
 
-      <div class="fj-h-px fj-flex-auto fj-bg-gray-300"></div>
-    </div>
+        <div class="fj-h-px fj-flex-auto fj-bg-gray-300"></div>
+      </div>
+    {% endif %}
 
     <ul role="list" class="fj-grid fj-grid-cols-1 fj-gap-4 fj-text-sm fj-leading-6 fj-text-gray-600 md:fj-grid-cols-2 md:fj-gap-6">
       {% for item in module.two_column_group.features_item %}

From 5f61d9c796c95f3026565d93667e27c854c99fdc Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Thu, 23 May 2024 19:07:30 +0200
Subject: [PATCH 08/18] Add Simple Stats module and related CSS changes

A new Simple Stats module has been created with associated fields and metadata defined in the JSON files. This module is designed to display statistical information with specified layout based on the number of stats items. Corresponding CSS changes have been introduced to support the layout and design aspects of the stats.
---
 theme/css/tailwind.css                        | 31 +++++++++--
 theme/modules/simple-stats.module/fields.json | 53 +++++++++++++++++++
 theme/modules/simple-stats.module/meta.json   | 16 ++++++
 theme/modules/simple-stats.module/module.css  |  0
 theme/modules/simple-stats.module/module.html | 21 ++++++++
 theme/modules/simple-stats.module/module.js   |  0
 6 files changed, 117 insertions(+), 4 deletions(-)
 create mode 100644 theme/modules/simple-stats.module/fields.json
 create mode 100644 theme/modules/simple-stats.module/meta.json
 create mode 100644 theme/modules/simple-stats.module/module.css
 create mode 100644 theme/modules/simple-stats.module/module.html
 create mode 100644 theme/modules/simple-stats.module/module.js

diff --git a/theme/css/tailwind.css b/theme/css/tailwind.css
index bba5279..49488e9 100644
--- a/theme/css/tailwind.css
+++ b/theme/css/tailwind.css
@@ -2277,6 +2277,15 @@ lite-youtube.lyt-activated > .lty-playbtn{
   row-gap:2rem;
 }
 
+.fj-gap-x-8{
+  -moz-column-gap:2rem;
+       column-gap:2rem;
+}
+
+.fj-gap-y-16{
+  row-gap:4rem;
+}
+
 .fj-space-x-6 > :not([hidden]) ~ :not([hidden]){
   --fj-space-x-reverse:0;
   margin-right:calc(1.5rem * var(--fj-space-x-reverse));
@@ -2777,6 +2786,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   line-height:1rem;
 }
 
+.fj-text-3xl{
+  font-size:1.875rem;
+  line-height:2.25rem;
+}
+
 .\!fj-font-bold{
   font-weight:700 !important;
 }
@@ -2825,6 +2839,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   line-height:1.25;
 }
 
+.fj-leading-7{
+  line-height:1.75rem;
+}
+
 .fj-tracking-tight{
   letter-spacing:-0.025em;
 }
@@ -3565,10 +3583,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
     margin-bottom:1rem;
   }
 
-  .sm\:fj-mt-20{
-    margin-top:5rem;
-  }
-
   .sm\:fj-max-w-sm{
     max-width:24rem;
   }
@@ -3598,6 +3612,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
     line-height:2rem;
   }
 
+  .sm\:fj-text-5xl{
+    font-size:3rem;
+    line-height:1;
+  }
+
   .sm\:fj-ring-1{
     --fj-ring-offset-shadow:var(--fj-ring-inset) 0 0 0 var(--fj-ring-offset-width) var(--fj-ring-offset-color);
     --fj-ring-shadow:var(--fj-ring-inset) 0 0 0 calc(1px + var(--fj-ring-offset-width)) var(--fj-ring-color);
@@ -3853,6 +3872,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
     grid-template-columns:repeat(3, minmax(0, 1fr));
   }
 
+  .lg\:fj-grid-cols-4{
+    grid-template-columns:repeat(4, minmax(0, 1fr));
+  }
+
   .lg\:fj-flex-col{
     flex-direction:column;
   }
diff --git a/theme/modules/simple-stats.module/fields.json b/theme/modules/simple-stats.module/fields.json
new file mode 100644
index 0000000..6991646
--- /dev/null
+++ b/theme/modules/simple-stats.module/fields.json
@@ -0,0 +1,53 @@
+[ {
+  "id" : "db2218b7-685f-fdee-c275-0482e2cb3f47",
+  "name" : "stats_item",
+  "display_width" : null,
+  "label" : "Stats Item",
+  "required" : false,
+  "locked" : false,
+  "occurrence" : {
+    "min" : 1,
+    "max" : 4,
+    "sorting_label_field" : null,
+    "default" : 3
+  },
+  "children" : [ {
+    "id" : "e9417d48-719f-893d-f5e2-dd6e4cfd6880",
+    "name" : "stats_title",
+    "display_width" : null,
+    "label" : "Stats Title",
+    "required" : true,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "44 million"
+  }, {
+    "id" : "6722ec8b-d602-14c9-bd83-981dabf02ef6",
+    "name" : "stats_subtext",
+    "display_width" : null,
+    "label" : "Stats Subtext",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "Transactions every 24 hours"
+  } ],
+  "tab" : "CONTENT",
+  "expanded" : false,
+  "group_occurrence_meta" : null,
+  "type" : "group",
+  "default" : [ {
+    "stats_title" : "44 million",
+    "stats_subtext" : "Transactions every 24 hours"
+  }, {
+    "stats_title" : "44 million",
+    "stats_subtext" : "Transactions every 24 hours"
+  }, {
+    "stats_title" : "44 million",
+    "stats_subtext" : "Transactions every 24 hours"
+  } ]
+} ]
\ No newline at end of file
diff --git a/theme/modules/simple-stats.module/meta.json b/theme/modules/simple-stats.module/meta.json
new file mode 100644
index 0000000..86c54c7
--- /dev/null
+++ b/theme/modules/simple-stats.module/meta.json
@@ -0,0 +1,16 @@
+{
+  "global": false,
+  "content_types": [
+    "LANDING_PAGE",
+    "SITE_PAGE",
+    "BLOG_LISTING",
+    "BLOG_POST"
+  ],
+  "host_template_types": [
+    "PAGE",
+    "BLOG_LISTING",
+    "BLOG_POST"
+  ],
+  "label": "Simple Stats",
+  "is_available_for_new_content": true
+}
diff --git a/theme/modules/simple-stats.module/module.css b/theme/modules/simple-stats.module/module.css
new file mode 100644
index 0000000..e69de29
diff --git a/theme/modules/simple-stats.module/module.html b/theme/modules/simple-stats.module/module.html
new file mode 100644
index 0000000..f75b0d1
--- /dev/null
+++ b/theme/modules/simple-stats.module/module.html
@@ -0,0 +1,21 @@
+{% if module.stats_item | length == 2 %}
+  {% set grid_col_class = 'lg:fj-grid-cols-2' %}
+{% endif %}
+
+{% if module.stats_item | length == 3 %}
+  {% set grid_col_class = 'lg:fj-grid-cols-3' %}
+{% endif %}
+
+{% if module.stats_item | length == 4 %}
+  {% set grid_col_class = 'lg:fj-grid-cols-4' %}
+{% endif %}
+
+<div class="fj-not-prose fj-grid fj-grid-cols-1 fj-gap-x-8 fj-gap-y-16 {{ grid_col_class or '' }}">
+  {% for item in module.stats_item %}
+    <div class="fj-grid fj-place-items-center fj-gap-2 fj-text-center">
+      <p class="fj-text-3xl fj-font-semibold fj-tracking-tight sm:fj-text-5xl">{{ item.stats_title }}</p>
+
+      <p class="fj-text-base fj-leading-7">{{ item.stats_subtext }}</p>
+    </div>
+  {% endfor %}
+</div>
diff --git a/theme/modules/simple-stats.module/module.js b/theme/modules/simple-stats.module/module.js
new file mode 100644
index 0000000..e69de29

From cf21ada9540b60e2f5a42d412415e2009ec03582 Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Fri, 24 May 2024 15:20:36 +0200
Subject: [PATCH 09/18] Update statistics in simple-stats module and rearrange
 CSS classes

The commit changes the static data content in the simple-stats module, updating the statistics presented to users. Additionally, the Tailwind CSS classes have been rearranged for better readability and order. This reordering does not affect the functionality but improves maintainability of the CSS code.
---
 theme/css/tailwind.css                        | 34 +++++++++----------
 theme/modules/simple-stats.module/fields.json | 10 +++---
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/theme/css/tailwind.css b/theme/css/tailwind.css
index 49488e9..eca6258 100644
--- a/theme/css/tailwind.css
+++ b/theme/css/tailwind.css
@@ -2269,14 +2269,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
        column-gap:1.5rem;
 }
 
-.fj-gap-y-6{
-  row-gap:1.5rem;
-}
-
-.fj-gap-y-8{
-  row-gap:2rem;
-}
-
 .fj-gap-x-8{
   -moz-column-gap:2rem;
        column-gap:2rem;
@@ -2286,6 +2278,14 @@ lite-youtube.lyt-activated > .lty-playbtn{
   row-gap:4rem;
 }
 
+.fj-gap-y-6{
+  row-gap:1.5rem;
+}
+
+.fj-gap-y-8{
+  row-gap:2rem;
+}
+
 .fj-space-x-6 > :not([hidden]) ~ :not([hidden]){
   --fj-space-x-reverse:0;
   margin-right:calc(1.5rem * var(--fj-space-x-reverse));
@@ -2751,6 +2751,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   line-height:2rem;
 }
 
+.fj-text-3xl{
+  font-size:1.875rem;
+  line-height:2.25rem;
+}
+
 .fj-text-4xl{
   font-size:2.25rem;
   line-height:2.5rem;
@@ -2786,11 +2791,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
   line-height:1rem;
 }
 
-.fj-text-3xl{
-  font-size:1.875rem;
-  line-height:2.25rem;
-}
-
 .\!fj-font-bold{
   font-weight:700 !important;
 }
@@ -2831,6 +2831,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   line-height:1.5rem;
 }
 
+.fj-leading-7{
+  line-height:1.75rem;
+}
+
 .fj-leading-none{
   line-height:1;
 }
@@ -2839,10 +2843,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
   line-height:1.25;
 }
 
-.fj-leading-7{
-  line-height:1.75rem;
-}
-
 .fj-tracking-tight{
   letter-spacing:-0.025em;
 }
diff --git a/theme/modules/simple-stats.module/fields.json b/theme/modules/simple-stats.module/fields.json
index 6991646..e043188 100644
--- a/theme/modules/simple-stats.module/fields.json
+++ b/theme/modules/simple-stats.module/fields.json
@@ -42,12 +42,12 @@
   "type" : "group",
   "default" : [ {
     "stats_title" : "44 million",
-    "stats_subtext" : "Transactions every 24 hours"
+    "stats_subtext" : "Transactions of Fresh Juice every day"
   }, {
-    "stats_title" : "44 million",
-    "stats_subtext" : "Transactions every 24 hours"
+    "stats_title" : "134 trillion",
+    "stats_subtext" : "Customers all over the world"
   }, {
-    "stats_title" : "44 million",
-    "stats_subtext" : "Transactions every 24 hours"
+    "stats_title" : "Hundreds of options",
+    "stats_subtext" : "We at Fresh Juice value freshness of your juice and smoothies"
   } ]
 } ]
\ No newline at end of file

From cdc005f30c2c28e6d900c264bd3994b6944143ce Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Fri, 24 May 2024 16:30:44 +0200
Subject: [PATCH 10/18] Refactor 'stats_subtext' field and change module label.

Renamed 'stats_subtext' to 'subtext' and changed its type to 'rich text'. Also updated the label of the simple stats module from 'Simple Stats' to 'Stats - Simple'. The template to display stats has been updated to reflect these changes.
---
 theme/modules/simple-stats.module/fields.json | 19 ++++++++-----------
 theme/modules/simple-stats.module/meta.json   |  2 +-
 theme/modules/simple-stats.module/module.html |  2 +-
 .../stats-simple-grid.module/meta.json        | 16 ++++++++++++++++
 4 files changed, 26 insertions(+), 13 deletions(-)
 create mode 100644 theme/modules/stats-simple-grid.module/meta.json

diff --git a/theme/modules/simple-stats.module/fields.json b/theme/modules/simple-stats.module/fields.json
index e043188..f394829 100644
--- a/theme/modules/simple-stats.module/fields.json
+++ b/theme/modules/simple-stats.module/fields.json
@@ -24,16 +24,13 @@
     "type" : "text",
     "default" : "44 million"
   }, {
-    "id" : "6722ec8b-d602-14c9-bd83-981dabf02ef6",
-    "name" : "stats_subtext",
+    "id" : "fe8a34f2-08eb-e26e-3092-029ade0e4149",
+    "name" : "subtext",
     "display_width" : null,
-    "label" : "Stats Subtext",
+    "label" : "Subtext",
     "required" : false,
     "locked" : false,
-    "validation_regex" : "",
-    "allow_new_line" : false,
-    "show_emoji_picker" : false,
-    "type" : "text",
+    "type" : "richtext",
     "default" : "Transactions every 24 hours"
   } ],
   "tab" : "CONTENT",
@@ -42,12 +39,12 @@
   "type" : "group",
   "default" : [ {
     "stats_title" : "44 million",
-    "stats_subtext" : "Transactions of Fresh Juice every day"
+    "subtext" : "Transactions of Fresh Juice every day"
   }, {
     "stats_title" : "134 trillion",
-    "stats_subtext" : "Customers all over the world"
+    "subtext" : "Customers all over the world"
   }, {
-    "stats_title" : "Hundreds of options",
-    "stats_subtext" : "We at Fresh Juice value freshness of your juice and smoothies"
+    "stats_title" : "1000+ transactions",
+    "subtext" : "We at Fresh Juice value freshness of your juice and smoothies"
   } ]
 } ]
\ No newline at end of file
diff --git a/theme/modules/simple-stats.module/meta.json b/theme/modules/simple-stats.module/meta.json
index 86c54c7..e648f77 100644
--- a/theme/modules/simple-stats.module/meta.json
+++ b/theme/modules/simple-stats.module/meta.json
@@ -11,6 +11,6 @@
     "BLOG_LISTING",
     "BLOG_POST"
   ],
-  "label": "Simple Stats",
+  "label": "Stats - Simple",
   "is_available_for_new_content": true
 }
diff --git a/theme/modules/simple-stats.module/module.html b/theme/modules/simple-stats.module/module.html
index f75b0d1..c28a065 100644
--- a/theme/modules/simple-stats.module/module.html
+++ b/theme/modules/simple-stats.module/module.html
@@ -15,7 +15,7 @@
     <div class="fj-grid fj-place-items-center fj-gap-2 fj-text-center">
       <p class="fj-text-3xl fj-font-semibold fj-tracking-tight sm:fj-text-5xl">{{ item.stats_title }}</p>
 
-      <p class="fj-text-base fj-leading-7">{{ item.stats_subtext }}</p>
+      <p class="fj-text-base fj-leading-7">{{ item.subtext }}</p>
     </div>
   {% endfor %}
 </div>
diff --git a/theme/modules/stats-simple-grid.module/meta.json b/theme/modules/stats-simple-grid.module/meta.json
new file mode 100644
index 0000000..11cbb79
--- /dev/null
+++ b/theme/modules/stats-simple-grid.module/meta.json
@@ -0,0 +1,16 @@
+{
+  "global": false,
+  "content_types": [
+    "LANDING_PAGE",
+    "SITE_PAGE",
+    "BLOG_LISTING",
+    "BLOG_POST"
+  ],
+  "host_template_types": [
+    "PAGE",
+    "BLOG_LISTING",
+    "BLOG_POST"
+  ],
+  "label": "Stats - Simple Grid",
+  "is_available_for_new_content": true
+}

From 1c752689c2a32b5e458f5f728ba5a12b5c6436dc Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Fri, 24 May 2024 16:31:04 +0200
Subject: [PATCH 11/18] Add 'Stats - Simple Grid' module

The commit adds a new module, 'Stats - Simple Grid'. It consists of three files: fields.json, meta.json, and module.html. The module displays different types of stats in a simple grid layout, and it can be used in various content types including LANDING_PAGE, SITE_PAGE, BLOG_LISTING and BLOG_POST. The contents of the grid (title and subtext) and the number of grid columns can be customized.
---
 .../stats-simple-grid.module/fields.json      | 53 +++++++++++++++++++
 .../stats-simple-grid.module/module.css       |  0
 .../stats-simple-grid.module/module.html      | 21 ++++++++
 .../stats-simple-grid.module/module.js        |  0
 4 files changed, 74 insertions(+)
 create mode 100644 theme/modules/stats-simple-grid.module/fields.json
 create mode 100644 theme/modules/stats-simple-grid.module/module.css
 create mode 100644 theme/modules/stats-simple-grid.module/module.html
 create mode 100644 theme/modules/stats-simple-grid.module/module.js

diff --git a/theme/modules/stats-simple-grid.module/fields.json b/theme/modules/stats-simple-grid.module/fields.json
new file mode 100644
index 0000000..55b2d9c
--- /dev/null
+++ b/theme/modules/stats-simple-grid.module/fields.json
@@ -0,0 +1,53 @@
+[ {
+  "id" : "5b33fbce-616d-9bd2-eafc-b9d6e680a642",
+  "name" : "stats_item",
+  "display_width" : null,
+  "label" : "Stats Item",
+  "required" : false,
+  "locked" : false,
+  "occurrence" : {
+    "min" : 0,
+    "max" : null,
+    "sorting_label_field" : null,
+    "default" : 4
+  },
+  "children" : [ {
+    "id" : "6ce0d153-b1ee-ca44-0ee2-682c3a1f3d3c",
+    "name" : "title",
+    "display_width" : null,
+    "label" : "Title",
+    "required" : true,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "44 million"
+  }, {
+    "id" : "38b54076-c739-67d5-fb1c-e31b31927557",
+    "name" : "subtext",
+    "display_width" : null,
+    "label" : "Subtext",
+    "required" : false,
+    "locked" : false,
+    "type" : "richtext",
+    "default" : "Transactions every 24 hours"
+  } ],
+  "tab" : "CONTENT",
+  "expanded" : false,
+  "group_occurrence_meta" : null,
+  "type" : "group",
+  "default" : [ {
+    "title" : "44 million",
+    "subtext" : "Transactions of Fresh Juice every day"
+  }, {
+    "title" : "134 trillion",
+    "subtext" : "Customers all over the world"
+  }, {
+    "title" : "+1000 transactions",
+    "subtext" : "We at Fresh Juice value freshness of your juice and smoothies"
+  }, {
+    "title" : "100+ countries",
+    "subtext" : "Available worldwide"
+  } ]
+} ]
\ No newline at end of file
diff --git a/theme/modules/stats-simple-grid.module/module.css b/theme/modules/stats-simple-grid.module/module.css
new file mode 100644
index 0000000..e69de29
diff --git a/theme/modules/stats-simple-grid.module/module.html b/theme/modules/stats-simple-grid.module/module.html
new file mode 100644
index 0000000..3fc1b2c
--- /dev/null
+++ b/theme/modules/stats-simple-grid.module/module.html
@@ -0,0 +1,21 @@
+{% if module.stats_item | length == 2 %}
+  {% set grid_col_class = 'lg:fj-grid-cols-2' %}
+{% endif %}
+
+{% if module.stats_item | length == 3 %}
+  {% set grid_col_class = 'lg:fj-grid-cols-3' %}
+{% endif %}
+
+{% if module.stats_item | length == 4 %}
+  {% set grid_col_class = 'lg:fj-grid-cols-4' %}
+{% endif %}
+
+<div class="fj-not-prose fj-grid fj-divide-x-4 fj-divide-y-4 fj-divide-white fj-grid-cols-1 sm:fj-grid-cols-2 {{ grid_col_class or '' }}">
+  {% for item in module.stats_item %}
+    <div class="fj-grid fj-bg-gray-50 fj-place-items-center fj-text-center">
+      <p class="fj-text-3xl fj-font-semibold fj-tracking-tight">{{ item.title }}</p>
+
+      <p class="fj-text-sm fj-leading-7">{{ item.subtext }}</p>
+    </div>
+  {% endfor %}
+</div>
diff --git a/theme/modules/stats-simple-grid.module/module.js b/theme/modules/stats-simple-grid.module/module.js
new file mode 100644
index 0000000..e69de29

From 82b6f07c0e600ee1304679714015dfd61a0bfe65 Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Fri, 24 May 2024 16:31:28 +0200
Subject: [PATCH 12/18] Add additional CSS classes in tailwind.css

This commit introduces several new CSS classes to the tailwind.css file. It includes increased dividing sizes, new color definitions (white, gray-200), and enhanced small device responsive handling (grid layout for 2 columns). This extends the design options and flexibility of the web interface.
---
 theme/css/tailwind.css | 43 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/theme/css/tailwind.css b/theme/css/tailwind.css
index eca6258..7555d64 100644
--- a/theme/css/tailwind.css
+++ b/theme/css/tailwind.css
@@ -2328,6 +2328,30 @@ lite-youtube.lyt-activated > .lty-playbtn{
   border-bottom-width:calc(1px * var(--fj-divide-y-reverse));
 }
 
+.fj-divide-x-2 > :not([hidden]) ~ :not([hidden]){
+  --fj-divide-x-reverse:0;
+  border-right-width:calc(2px * var(--fj-divide-x-reverse));
+  border-left-width:calc(2px * calc(1 - var(--fj-divide-x-reverse)));
+}
+
+.fj-divide-y-2 > :not([hidden]) ~ :not([hidden]){
+  --fj-divide-y-reverse:0;
+  border-top-width:calc(2px * calc(1 - var(--fj-divide-y-reverse)));
+  border-bottom-width:calc(2px * var(--fj-divide-y-reverse));
+}
+
+.fj-divide-x-4 > :not([hidden]) ~ :not([hidden]){
+  --fj-divide-x-reverse:0;
+  border-right-width:calc(4px * var(--fj-divide-x-reverse));
+  border-left-width:calc(4px * calc(1 - var(--fj-divide-x-reverse)));
+}
+
+.fj-divide-y-4 > :not([hidden]) ~ :not([hidden]){
+  --fj-divide-y-reverse:0;
+  border-top-width:calc(4px * calc(1 - var(--fj-divide-y-reverse)));
+  border-bottom-width:calc(4px * var(--fj-divide-y-reverse));
+}
+
 .fj-divide-gray-100 > :not([hidden]) ~ :not([hidden]){
   --fj-divide-opacity:1;
   border-color:rgb(243 244 246 / var(--fj-divide-opacity));
@@ -2337,6 +2361,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   border-color:rgb(17 24 39 / 0.05);
 }
 
+.fj-divide-white > :not([hidden]) ~ :not([hidden]){
+  --fj-divide-opacity:1;
+  border-color:rgb(255 255 255 / var(--fj-divide-opacity));
+}
+
 .fj-overflow-hidden{
   overflow:hidden;
 }
@@ -2499,6 +2528,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   background-color:rgb(255 255 255 / 0.4);
 }
 
+.fj-bg-gray-200{
+  --fj-bg-opacity:1;
+  background-color:rgb(229 231 235 / var(--fj-bg-opacity));
+}
+
 .fj-bg-gradient-to-r{
   background-image:linear-gradient(to right, var(--fj-gradient-stops));
 }
@@ -2899,6 +2933,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   color:rgb(255 255 255 / var(--fj-text-opacity));
 }
 
+.fj-text-gray-200{
+  --fj-text-opacity:1;
+  color:rgb(229 231 235 / var(--fj-text-opacity));
+}
+
 .\!fj-no-underline{
   text-decoration-line:none !important;
 }
@@ -3587,6 +3626,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
     max-width:24rem;
   }
 
+  .sm\:fj-grid-cols-2{
+    grid-template-columns:repeat(2, minmax(0, 1fr));
+  }
+
   .sm\:fj-flex-row{
     flex-direction:row;
   }

From 1974abfef2d34de4b22a52c36a4f49024b1c8887 Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Mon, 27 May 2024 08:27:32 +0200
Subject: [PATCH 13/18] Add 'stats-simple' module

This commit introduces a new 'stats-simple' module which can be used in different types of pages like LANDING_PAGE, SITE_PAGE, BLOG_LISTING, and BLOG_POST. The module contains fields for statistic items, including the title and subtext. The appearance of these items adapts to their number through the use of different grid classes.
---
 theme/modules/stats-simple.module/fields.json | 50 +++++++++++++++++++
 theme/modules/stats-simple.module/meta.json   | 16 ++++++
 theme/modules/stats-simple.module/module.css  |  0
 theme/modules/stats-simple.module/module.html | 21 ++++++++
 theme/modules/stats-simple.module/module.js   |  0
 theme/modules/stats-timeline.module/meta.json | 16 ++++++
 6 files changed, 103 insertions(+)
 create mode 100644 theme/modules/stats-simple.module/fields.json
 create mode 100644 theme/modules/stats-simple.module/meta.json
 create mode 100644 theme/modules/stats-simple.module/module.css
 create mode 100644 theme/modules/stats-simple.module/module.html
 create mode 100644 theme/modules/stats-simple.module/module.js
 create mode 100644 theme/modules/stats-timeline.module/meta.json

diff --git a/theme/modules/stats-simple.module/fields.json b/theme/modules/stats-simple.module/fields.json
new file mode 100644
index 0000000..f394829
--- /dev/null
+++ b/theme/modules/stats-simple.module/fields.json
@@ -0,0 +1,50 @@
+[ {
+  "id" : "db2218b7-685f-fdee-c275-0482e2cb3f47",
+  "name" : "stats_item",
+  "display_width" : null,
+  "label" : "Stats Item",
+  "required" : false,
+  "locked" : false,
+  "occurrence" : {
+    "min" : 1,
+    "max" : 4,
+    "sorting_label_field" : null,
+    "default" : 3
+  },
+  "children" : [ {
+    "id" : "e9417d48-719f-893d-f5e2-dd6e4cfd6880",
+    "name" : "stats_title",
+    "display_width" : null,
+    "label" : "Stats Title",
+    "required" : true,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "44 million"
+  }, {
+    "id" : "fe8a34f2-08eb-e26e-3092-029ade0e4149",
+    "name" : "subtext",
+    "display_width" : null,
+    "label" : "Subtext",
+    "required" : false,
+    "locked" : false,
+    "type" : "richtext",
+    "default" : "Transactions every 24 hours"
+  } ],
+  "tab" : "CONTENT",
+  "expanded" : false,
+  "group_occurrence_meta" : null,
+  "type" : "group",
+  "default" : [ {
+    "stats_title" : "44 million",
+    "subtext" : "Transactions of Fresh Juice every day"
+  }, {
+    "stats_title" : "134 trillion",
+    "subtext" : "Customers all over the world"
+  }, {
+    "stats_title" : "1000+ transactions",
+    "subtext" : "We at Fresh Juice value freshness of your juice and smoothies"
+  } ]
+} ]
\ No newline at end of file
diff --git a/theme/modules/stats-simple.module/meta.json b/theme/modules/stats-simple.module/meta.json
new file mode 100644
index 0000000..e648f77
--- /dev/null
+++ b/theme/modules/stats-simple.module/meta.json
@@ -0,0 +1,16 @@
+{
+  "global": false,
+  "content_types": [
+    "LANDING_PAGE",
+    "SITE_PAGE",
+    "BLOG_LISTING",
+    "BLOG_POST"
+  ],
+  "host_template_types": [
+    "PAGE",
+    "BLOG_LISTING",
+    "BLOG_POST"
+  ],
+  "label": "Stats - Simple",
+  "is_available_for_new_content": true
+}
diff --git a/theme/modules/stats-simple.module/module.css b/theme/modules/stats-simple.module/module.css
new file mode 100644
index 0000000..e69de29
diff --git a/theme/modules/stats-simple.module/module.html b/theme/modules/stats-simple.module/module.html
new file mode 100644
index 0000000..c28a065
--- /dev/null
+++ b/theme/modules/stats-simple.module/module.html
@@ -0,0 +1,21 @@
+{% if module.stats_item | length == 2 %}
+  {% set grid_col_class = 'lg:fj-grid-cols-2' %}
+{% endif %}
+
+{% if module.stats_item | length == 3 %}
+  {% set grid_col_class = 'lg:fj-grid-cols-3' %}
+{% endif %}
+
+{% if module.stats_item | length == 4 %}
+  {% set grid_col_class = 'lg:fj-grid-cols-4' %}
+{% endif %}
+
+<div class="fj-not-prose fj-grid fj-grid-cols-1 fj-gap-x-8 fj-gap-y-16 {{ grid_col_class or '' }}">
+  {% for item in module.stats_item %}
+    <div class="fj-grid fj-place-items-center fj-gap-2 fj-text-center">
+      <p class="fj-text-3xl fj-font-semibold fj-tracking-tight sm:fj-text-5xl">{{ item.stats_title }}</p>
+
+      <p class="fj-text-base fj-leading-7">{{ item.subtext }}</p>
+    </div>
+  {% endfor %}
+</div>
diff --git a/theme/modules/stats-simple.module/module.js b/theme/modules/stats-simple.module/module.js
new file mode 100644
index 0000000..e69de29
diff --git a/theme/modules/stats-timeline.module/meta.json b/theme/modules/stats-timeline.module/meta.json
new file mode 100644
index 0000000..14db287
--- /dev/null
+++ b/theme/modules/stats-timeline.module/meta.json
@@ -0,0 +1,16 @@
+{
+  "global": false,
+  "content_types": [
+    "LANDING_PAGE",
+    "SITE_PAGE",
+    "BLOG_LISTING",
+    "BLOG_POST"
+  ],
+  "host_template_types": [
+    "PAGE",
+    "BLOG_LISTING",
+    "BLOG_POST"
+  ],
+  "label": "Stats - Timeline",
+  "is_available_for_new_content": true
+}

From aebf86f357ff2f3b14efd3e7522aba49e95f78ef Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Mon, 27 May 2024 17:16:44 +0200
Subject: [PATCH 14/18] Add new stats-timeline module

The commit introduces a new module for statistics timeline. The module comes with relevant fields specified in the 'fields.json' file and visual presentation logic in the 'module.html' file. It dynamically generates the interface according to the volume of data.
---
 .../modules/stats-timeline.module/fields.json | 72 +++++++++++++++++++
 .../modules/stats-timeline.module/module.css  |  0
 .../modules/stats-timeline.module/module.html | 29 ++++++++
 theme/modules/stats-timeline.module/module.js |  0
 4 files changed, 101 insertions(+)
 create mode 100644 theme/modules/stats-timeline.module/fields.json
 create mode 100644 theme/modules/stats-timeline.module/module.css
 create mode 100644 theme/modules/stats-timeline.module/module.html
 create mode 100644 theme/modules/stats-timeline.module/module.js

diff --git a/theme/modules/stats-timeline.module/fields.json b/theme/modules/stats-timeline.module/fields.json
new file mode 100644
index 0000000..3d8d6fe
--- /dev/null
+++ b/theme/modules/stats-timeline.module/fields.json
@@ -0,0 +1,72 @@
+[ {
+  "id" : "840e3946-1233-014f-e9a5-67521daf07bc",
+  "name" : "timeframe",
+  "display_width" : null,
+  "label" : "Timeframe",
+  "required" : false,
+  "locked" : false,
+  "occurrence" : {
+    "min" : 0,
+    "max" : null,
+    "sorting_label_field" : null,
+    "default" : 4
+  },
+  "children" : [ {
+    "id" : "db9558a5-8adf-8210-fbcb-7310b9ef2d65",
+    "name" : "date",
+    "display_width" : null,
+    "label" : "Date",
+    "required" : true,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "Sep 2019"
+  }, {
+    "id" : "9222b38b-b8bb-afee-2185-79553eab0067",
+    "name" : "title",
+    "display_width" : null,
+    "label" : "Title",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "Creation of Juicy Drink"
+  }, {
+    "id" : "236bfdd1-465d-7168-6a55-b5d53bf79bf9",
+    "name" : "description",
+    "display_width" : null,
+    "label" : "Description",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "The brightest out of us, King Banana, gave us the mystical recipe to create the best banana smoothie in the kingdom"
+  } ],
+  "tab" : "CONTENT",
+  "expanded" : false,
+  "group_occurrence_meta" : null,
+  "type" : "group",
+  "default" : [ {
+    "date" : "Sep 2019",
+    "title" : "Creation of Juicy Drink",
+    "description" : "The brightest out of us, King Banana, gave us the mystical recipe to create the best banana smoothie in the kingdom"
+  }, {
+    "date" : "Dec 2019",
+    "title" : "Creation of Juicy Cafe",
+    "description" : "Our first cafe for our juicy drinks had massive success and costumers kept buying the royal smoothies as well as our own personal creations"
+  }, {
+    "date" : "Oct 2020",
+    "title" : "Our first Million Dollars",
+    "description" : "After expanding our business into various towns and cities by opening new cafes, we finally reached our first million dollars in revenue!"
+  }, {
+    "date" : "Aug 2023",
+    "title" : "Manufacture of Drinks",
+    "description" : "After having massive success over the years with our cafes, we decided to manufacture them so more people can drink our creations"
+  } ]
+} ]
\ No newline at end of file
diff --git a/theme/modules/stats-timeline.module/module.css b/theme/modules/stats-timeline.module/module.css
new file mode 100644
index 0000000..e69de29
diff --git a/theme/modules/stats-timeline.module/module.html b/theme/modules/stats-timeline.module/module.html
new file mode 100644
index 0000000..b88e62f
--- /dev/null
+++ b/theme/modules/stats-timeline.module/module.html
@@ -0,0 +1,29 @@
+{% if module.timeframe | length == 2 %}
+  {% set grid_col_class = 'lg:fj-grid-cols-2' %}
+{% endif %}
+
+{% if module.timeframe | length == 3 %}
+  {% set grid_col_class = 'lg:fj-grid-cols-3' %}
+{% endif %}
+
+{% if module.timeframe | length >= 4 %}
+  {% set grid_col_class = 'lg:fj-grid-cols-4' %}
+{% endif %}
+
+<div class="fj-not-prose fj-py-32 fj-gap-4 lg:fj-gap-8 fj-grid fj-grid-cols-1 {{ grid_col_class or '' }}">
+  {% for item in module.timeframe %}
+    <div class="fj-grid fj-gap-2">
+      <div class="fj-flex fj-items-center fj-gap-4 fj-text-sm fj-font-semibold fj-leading-6 fj-text-blue-600">
+        <svg viewBox="0 0 4 4" class="fj-size-1 fj-flex-none" aria-hidden="true">
+          <circle cx="2" cy="2" r="2" fill="currentColor" />
+        </svg>
+        {{ item.date }}
+        <div class="fj-absolute fj-h-px fj-bg-blue-600 lg:fj-static fj-w-auto fj-flex-auto lg:fj-translate-x-0"></div>
+      </div>
+
+      <p class="fj-text-2xl fj-font-semibold">{{ item.title }}</p>
+
+      <p class="fj-text-base">{{ item.description }}</p>
+    </div>
+  {% endfor %}
+</div>
diff --git a/theme/modules/stats-timeline.module/module.js b/theme/modules/stats-timeline.module/module.js
new file mode 100644
index 0000000..e69de29

From 5ef8e13083a55820c6037726b1939f082bd6e24f Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Mon, 27 May 2024 17:17:08 +0200
Subject: [PATCH 15/18] Update several CSS properties in tailwind.css

Added new CSS properties such as fj-size-1, fj-gap-1, fj-bg-blue-600, fj-py-32, and more for responsive layouts and divided y-directions. Removed redundant CSS properties such as fj-divide-y-2, fj-divide-x-2, fj-text-gray-200, and fj-bg-gray-200.
---
 theme/css/tailwind.css | 74 ++++++++++++++++++++++++++----------------
 1 file changed, 46 insertions(+), 28 deletions(-)

diff --git a/theme/css/tailwind.css b/theme/css/tailwind.css
index 7555d64..31d572c 100644
--- a/theme/css/tailwind.css
+++ b/theme/css/tailwind.css
@@ -1973,6 +1973,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   aspect-ratio:16/9;
 }
 
+.fj-size-1{
+  width:0.25rem;
+  height:0.25rem;
+}
+
 .fj-size-12{
   width:3rem;
   height:3rem;
@@ -2234,6 +2239,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   gap:2rem;
 }
 
+.fj-gap-1{
+  gap:0.25rem;
+}
+
 .fj-gap-x-1{
   -moz-column-gap:0.25rem;
        column-gap:0.25rem;
@@ -2322,30 +2331,18 @@ lite-youtube.lyt-activated > .lty-playbtn{
   border-left-width:calc(1px * calc(1 - var(--fj-divide-x-reverse)));
 }
 
-.fj-divide-y > :not([hidden]) ~ :not([hidden]){
-  --fj-divide-y-reverse:0;
-  border-top-width:calc(1px * calc(1 - var(--fj-divide-y-reverse)));
-  border-bottom-width:calc(1px * var(--fj-divide-y-reverse));
-}
-
-.fj-divide-x-2 > :not([hidden]) ~ :not([hidden]){
-  --fj-divide-x-reverse:0;
-  border-right-width:calc(2px * var(--fj-divide-x-reverse));
-  border-left-width:calc(2px * calc(1 - var(--fj-divide-x-reverse)));
-}
-
-.fj-divide-y-2 > :not([hidden]) ~ :not([hidden]){
-  --fj-divide-y-reverse:0;
-  border-top-width:calc(2px * calc(1 - var(--fj-divide-y-reverse)));
-  border-bottom-width:calc(2px * var(--fj-divide-y-reverse));
-}
-
 .fj-divide-x-4 > :not([hidden]) ~ :not([hidden]){
   --fj-divide-x-reverse:0;
   border-right-width:calc(4px * var(--fj-divide-x-reverse));
   border-left-width:calc(4px * calc(1 - var(--fj-divide-x-reverse)));
 }
 
+.fj-divide-y > :not([hidden]) ~ :not([hidden]){
+  --fj-divide-y-reverse:0;
+  border-top-width:calc(1px * calc(1 - var(--fj-divide-y-reverse)));
+  border-bottom-width:calc(1px * var(--fj-divide-y-reverse));
+}
+
 .fj-divide-y-4 > :not([hidden]) ~ :not([hidden]){
   --fj-divide-y-reverse:0;
   border-top-width:calc(4px * calc(1 - var(--fj-divide-y-reverse)));
@@ -2486,6 +2483,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   background-color:rgb(255 251 235 / var(--fj-bg-opacity));
 }
 
+.fj-bg-blue-600{
+  --fj-bg-opacity:1;
+  background-color:rgb(37 99 235 / var(--fj-bg-opacity));
+}
+
 .fj-bg-cursor{
   --fj-bg-opacity:1;
   background-color:rgb(255 255 255 / var(--fj-bg-opacity));
@@ -2528,11 +2530,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
   background-color:rgb(255 255 255 / 0.4);
 }
 
-.fj-bg-gray-200{
-  --fj-bg-opacity:1;
-  background-color:rgb(229 231 235 / var(--fj-bg-opacity));
-}
-
 .fj-bg-gradient-to-r{
   background-image:linear-gradient(to right, var(--fj-gradient-stops));
 }
@@ -2702,6 +2699,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
   padding-bottom:0.75rem;
 }
 
+.fj-py-32{
+  padding-top:8rem;
+  padding-bottom:8rem;
+}
+
 .fj-py-4{
   padding-top:1rem;
   padding-bottom:1rem;
@@ -2933,11 +2935,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
   color:rgb(255 255 255 / var(--fj-text-opacity));
 }
 
-.fj-text-gray-200{
-  --fj-text-opacity:1;
-  color:rgb(229 231 235 / var(--fj-text-opacity));
-}
-
 .\!fj-no-underline{
   text-decoration-line:none !important;
 }
@@ -3809,6 +3806,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
 }
 
 @media (min-width: 1024px){
+  .lg\:fj-static{
+    position:static;
+  }
+
   .lg\:fj-bottom-8{
     bottom:2rem;
   }
@@ -3903,6 +3904,11 @@ lite-youtube.lyt-activated > .lty-playbtn{
     flex-shrink:0;
   }
 
+  .lg\:fj-translate-x-0{
+    --fj-translate-x:0px;
+    transform:translate(var(--fj-translate-x), var(--fj-translate-y)) rotate(var(--fj-rotate)) skewX(var(--fj-skew-x)) skewY(var(--fj-skew-y)) scaleX(var(--fj-scale-x)) scaleY(var(--fj-scale-y));
+  }
+
   .lg\:fj-grid-cols-1{
     grid-template-columns:repeat(1, minmax(0, 1fr));
   }
@@ -3919,6 +3925,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
     grid-template-columns:repeat(4, minmax(0, 1fr));
   }
 
+  .lg\:fj-flex-row{
+    flex-direction:row;
+  }
+
   .lg\:fj-flex-col{
     flex-direction:column;
   }
@@ -3935,6 +3945,14 @@ lite-youtube.lyt-activated > .lty-playbtn{
     gap:3rem;
   }
 
+  .lg\:fj-gap-8{
+    gap:2rem;
+  }
+
+  .lg\:fj-gap-2{
+    gap:0.5rem;
+  }
+
   .lg\:fj-gap-x-10{
     -moz-column-gap:2.5rem;
          column-gap:2.5rem;

From f8cabf5da992662a9ec9eaeaeae84b2a6c527584 Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Mon, 27 May 2024 17:18:53 +0200
Subject: [PATCH 16/18] bugfix incorrect column arrangement

when amount of items > than 4, no lg column amount is provided
---
 theme/modules/simple-stats.module/module.html      | 2 +-
 theme/modules/stats-simple-grid.module/module.html | 2 +-
 theme/modules/stats-simple.module/module.html      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/theme/modules/simple-stats.module/module.html b/theme/modules/simple-stats.module/module.html
index c28a065..d2e469f 100644
--- a/theme/modules/simple-stats.module/module.html
+++ b/theme/modules/simple-stats.module/module.html
@@ -6,7 +6,7 @@
   {% set grid_col_class = 'lg:fj-grid-cols-3' %}
 {% endif %}
 
-{% if module.stats_item | length == 4 %}
+{% if module.stats_item | length >= 4 %}
   {% set grid_col_class = 'lg:fj-grid-cols-4' %}
 {% endif %}
 
diff --git a/theme/modules/stats-simple-grid.module/module.html b/theme/modules/stats-simple-grid.module/module.html
index 3fc1b2c..d81b657 100644
--- a/theme/modules/stats-simple-grid.module/module.html
+++ b/theme/modules/stats-simple-grid.module/module.html
@@ -6,7 +6,7 @@
   {% set grid_col_class = 'lg:fj-grid-cols-3' %}
 {% endif %}
 
-{% if module.stats_item | length == 4 %}
+{% if module.stats_item | length >= 4 %}
   {% set grid_col_class = 'lg:fj-grid-cols-4' %}
 {% endif %}
 
diff --git a/theme/modules/stats-simple.module/module.html b/theme/modules/stats-simple.module/module.html
index c28a065..d2e469f 100644
--- a/theme/modules/stats-simple.module/module.html
+++ b/theme/modules/stats-simple.module/module.html
@@ -6,7 +6,7 @@
   {% set grid_col_class = 'lg:fj-grid-cols-3' %}
 {% endif %}
 
-{% if module.stats_item | length == 4 %}
+{% if module.stats_item | length >= 4 %}
   {% set grid_col_class = 'lg:fj-grid-cols-4' %}
 {% endif %}
 

From 8ccd58833675e8cc8cfc442fa29e19429c29112b Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Wed, 29 May 2024 14:43:37 +0200
Subject: [PATCH 17/18] Deleted Previous Module

---
 theme/modules/simple-stats.module/fields.json | 50 -------------------
 theme/modules/simple-stats.module/meta.json   | 16 ------
 theme/modules/simple-stats.module/module.css  |  0
 theme/modules/simple-stats.module/module.html | 21 --------
 theme/modules/simple-stats.module/module.js   |  0
 5 files changed, 87 deletions(-)
 delete mode 100644 theme/modules/simple-stats.module/fields.json
 delete mode 100644 theme/modules/simple-stats.module/meta.json
 delete mode 100644 theme/modules/simple-stats.module/module.css
 delete mode 100644 theme/modules/simple-stats.module/module.html
 delete mode 100644 theme/modules/simple-stats.module/module.js

diff --git a/theme/modules/simple-stats.module/fields.json b/theme/modules/simple-stats.module/fields.json
deleted file mode 100644
index f394829..0000000
--- a/theme/modules/simple-stats.module/fields.json
+++ /dev/null
@@ -1,50 +0,0 @@
-[ {
-  "id" : "db2218b7-685f-fdee-c275-0482e2cb3f47",
-  "name" : "stats_item",
-  "display_width" : null,
-  "label" : "Stats Item",
-  "required" : false,
-  "locked" : false,
-  "occurrence" : {
-    "min" : 1,
-    "max" : 4,
-    "sorting_label_field" : null,
-    "default" : 3
-  },
-  "children" : [ {
-    "id" : "e9417d48-719f-893d-f5e2-dd6e4cfd6880",
-    "name" : "stats_title",
-    "display_width" : null,
-    "label" : "Stats Title",
-    "required" : true,
-    "locked" : false,
-    "validation_regex" : "",
-    "allow_new_line" : false,
-    "show_emoji_picker" : false,
-    "type" : "text",
-    "default" : "44 million"
-  }, {
-    "id" : "fe8a34f2-08eb-e26e-3092-029ade0e4149",
-    "name" : "subtext",
-    "display_width" : null,
-    "label" : "Subtext",
-    "required" : false,
-    "locked" : false,
-    "type" : "richtext",
-    "default" : "Transactions every 24 hours"
-  } ],
-  "tab" : "CONTENT",
-  "expanded" : false,
-  "group_occurrence_meta" : null,
-  "type" : "group",
-  "default" : [ {
-    "stats_title" : "44 million",
-    "subtext" : "Transactions of Fresh Juice every day"
-  }, {
-    "stats_title" : "134 trillion",
-    "subtext" : "Customers all over the world"
-  }, {
-    "stats_title" : "1000+ transactions",
-    "subtext" : "We at Fresh Juice value freshness of your juice and smoothies"
-  } ]
-} ]
\ No newline at end of file
diff --git a/theme/modules/simple-stats.module/meta.json b/theme/modules/simple-stats.module/meta.json
deleted file mode 100644
index e648f77..0000000
--- a/theme/modules/simple-stats.module/meta.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "global": false,
-  "content_types": [
-    "LANDING_PAGE",
-    "SITE_PAGE",
-    "BLOG_LISTING",
-    "BLOG_POST"
-  ],
-  "host_template_types": [
-    "PAGE",
-    "BLOG_LISTING",
-    "BLOG_POST"
-  ],
-  "label": "Stats - Simple",
-  "is_available_for_new_content": true
-}
diff --git a/theme/modules/simple-stats.module/module.css b/theme/modules/simple-stats.module/module.css
deleted file mode 100644
index e69de29..0000000
diff --git a/theme/modules/simple-stats.module/module.html b/theme/modules/simple-stats.module/module.html
deleted file mode 100644
index d2e469f..0000000
--- a/theme/modules/simple-stats.module/module.html
+++ /dev/null
@@ -1,21 +0,0 @@
-{% if module.stats_item | length == 2 %}
-  {% set grid_col_class = 'lg:fj-grid-cols-2' %}
-{% endif %}
-
-{% if module.stats_item | length == 3 %}
-  {% set grid_col_class = 'lg:fj-grid-cols-3' %}
-{% endif %}
-
-{% if module.stats_item | length >= 4 %}
-  {% set grid_col_class = 'lg:fj-grid-cols-4' %}
-{% endif %}
-
-<div class="fj-not-prose fj-grid fj-grid-cols-1 fj-gap-x-8 fj-gap-y-16 {{ grid_col_class or '' }}">
-  {% for item in module.stats_item %}
-    <div class="fj-grid fj-place-items-center fj-gap-2 fj-text-center">
-      <p class="fj-text-3xl fj-font-semibold fj-tracking-tight sm:fj-text-5xl">{{ item.stats_title }}</p>
-
-      <p class="fj-text-base fj-leading-7">{{ item.subtext }}</p>
-    </div>
-  {% endfor %}
-</div>
diff --git a/theme/modules/simple-stats.module/module.js b/theme/modules/simple-stats.module/module.js
deleted file mode 100644
index e69de29..0000000

From 162688d8c307546c6f08d37f55e00b986fee895a Mon Sep 17 00:00:00 2001
From: Aleksandr Zapparov <alexander@zapparov.dev>
Date: Wed, 29 May 2024 15:00:11 +0200
Subject: [PATCH 18/18] Update UI styles in theme modules and CSS

Changes include adjusting grid gaps, text sizes, and column spacing in the stats-simple, stats-simple-grid, and stats-timeline modules. Moreover, unnecessary CSS classes were removed such as fj-gap-x8 and lg:fj-flex-row, contributing to a cleaner codebase.
---
 theme/css/tailwind.css                        | 19 +++----------------
 .../stats-simple-grid.module/module.html      |  4 ++--
 theme/modules/stats-simple.module/module.html |  4 ++--
 .../modules/stats-timeline.module/module.html |  2 +-
 4 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/theme/css/tailwind.css b/theme/css/tailwind.css
index 31d572c..250e08c 100644
--- a/theme/css/tailwind.css
+++ b/theme/css/tailwind.css
@@ -2278,11 +2278,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
        column-gap:1.5rem;
 }
 
-.fj-gap-x-8{
-  -moz-column-gap:2rem;
-       column-gap:2rem;
-}
-
 .fj-gap-y-16{
   row-gap:4rem;
 }
@@ -3652,9 +3647,9 @@ lite-youtube.lyt-activated > .lty-playbtn{
     line-height:2rem;
   }
 
-  .sm\:fj-text-5xl{
-    font-size:3rem;
-    line-height:1;
+  .sm\:fj-text-4xl{
+    font-size:2.25rem;
+    line-height:2.5rem;
   }
 
   .sm\:fj-ring-1{
@@ -3925,10 +3920,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
     grid-template-columns:repeat(4, minmax(0, 1fr));
   }
 
-  .lg\:fj-flex-row{
-    flex-direction:row;
-  }
-
   .lg\:fj-flex-col{
     flex-direction:column;
   }
@@ -3949,10 +3940,6 @@ lite-youtube.lyt-activated > .lty-playbtn{
     gap:2rem;
   }
 
-  .lg\:fj-gap-2{
-    gap:0.5rem;
-  }
-
   .lg\:fj-gap-x-10{
     -moz-column-gap:2.5rem;
          column-gap:2.5rem;
diff --git a/theme/modules/stats-simple-grid.module/module.html b/theme/modules/stats-simple-grid.module/module.html
index d81b657..88f92e0 100644
--- a/theme/modules/stats-simple-grid.module/module.html
+++ b/theme/modules/stats-simple-grid.module/module.html
@@ -10,9 +10,9 @@
   {% set grid_col_class = 'lg:fj-grid-cols-4' %}
 {% endif %}
 
-<div class="fj-not-prose fj-grid fj-divide-x-4 fj-divide-y-4 fj-divide-white fj-grid-cols-1 sm:fj-grid-cols-2 {{ grid_col_class or '' }}">
+<div class="fj-not-prose fj-grid fj-gap-1 fj-grid-cols-1 sm:fj-grid-cols-2 fj-text-balance {{ grid_col_class or '' }}">
   {% for item in module.stats_item %}
-    <div class="fj-grid fj-bg-gray-50 fj-place-items-center fj-text-center">
+    <div class="fj-grid fj-bg-gray-100 fj-place-items-center fj-text-center fj-p-2">
       <p class="fj-text-3xl fj-font-semibold fj-tracking-tight">{{ item.title }}</p>
 
       <p class="fj-text-sm fj-leading-7">{{ item.subtext }}</p>
diff --git a/theme/modules/stats-simple.module/module.html b/theme/modules/stats-simple.module/module.html
index d2e469f..2985c46 100644
--- a/theme/modules/stats-simple.module/module.html
+++ b/theme/modules/stats-simple.module/module.html
@@ -10,10 +10,10 @@
   {% set grid_col_class = 'lg:fj-grid-cols-4' %}
 {% endif %}
 
-<div class="fj-not-prose fj-grid fj-grid-cols-1 fj-gap-x-8 fj-gap-y-16 {{ grid_col_class or '' }}">
+<div class="fj-not-prose fj-grid fj-grid-cols-1 fj-gap-x-4 fj-gap-y-16 fj-text-balance {{ grid_col_class or '' }}">
   {% for item in module.stats_item %}
     <div class="fj-grid fj-place-items-center fj-gap-2 fj-text-center">
-      <p class="fj-text-3xl fj-font-semibold fj-tracking-tight sm:fj-text-5xl">{{ item.stats_title }}</p>
+      <p class="fj-text-3xl fj-font-semibold fj-tracking-tight sm:fj-text-4xl">{{ item.stats_title }}</p>
 
       <p class="fj-text-base fj-leading-7">{{ item.subtext }}</p>
     </div>
diff --git a/theme/modules/stats-timeline.module/module.html b/theme/modules/stats-timeline.module/module.html
index b88e62f..d0a1955 100644
--- a/theme/modules/stats-timeline.module/module.html
+++ b/theme/modules/stats-timeline.module/module.html
@@ -10,7 +10,7 @@
   {% set grid_col_class = 'lg:fj-grid-cols-4' %}
 {% endif %}
 
-<div class="fj-not-prose fj-py-32 fj-gap-4 lg:fj-gap-8 fj-grid fj-grid-cols-1 {{ grid_col_class or '' }}">
+<div class="fj-not-prose fj-text-balance fj-gap-4 lg:fj-gap-8 fj-grid fj-grid-cols-1 {{ grid_col_class or '' }}">
   {% for item in module.timeframe %}
     <div class="fj-grid fj-gap-2">
       <div class="fj-flex fj-items-center fj-gap-4 fj-text-sm fj-font-semibold fj-leading-6 fj-text-blue-600">