ultimate-jekyll-manager 0.0.118 → 0.0.120

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/pricing.html

@@ -5,8 +5,8 @@ layout: themes/[ site.theme.id ]/frontend/core/base
 ### PAGE CONFIG ###
 # Hero Section
 hero:
-  headline: "The right plans, for the right"
-  headline_accent: "price"
+  headline: "The right plans, "
+  headline_accent: "for the right price"
   subheadline: "Simple and affordable pricing. No hidden fees, no surprises."
 
 # Pricing Section
@@ -17,7 +17,7 @@ pricing:
     label: "credit"  # What to call the unit (e.g., "credit", "user", "GB")
   plans:
     - id: "basic"
-      name: Basic
+      name: "Basic"
       tagline: "best for getting started"
       url: "/download"  # URL for free plan signup
       pricing:
@@ -26,7 +26,7 @@ pricing:
       features:
         - id: "credits"
           name: "Credits"
-          value: 1
+          value: 10
           icon: "sparkles"
         - id: "exports"
           name: "Exports"
@@ -34,7 +34,7 @@ pricing:
           icon: "download"
 
     - id: "starter"
-      name: Starter
+      name: "Starter"
       tagline: "best for individuals"
       pricing:
         monthly: 28
@@ -42,7 +42,7 @@ pricing:
       features:
         - id: "credits"
           name: "Credits"
-          value: 10
+          value: 100
           icon: "sparkles"
         - id: "exports"
           name: "Exports"
@@ -58,7 +58,7 @@ pricing:
           icon: "headset"
 
     - id: "pro"
-      name: Pro
+      name: "Pro"
       tagline: "best for small businesses"
       popular: true
       pricing:
@@ -67,7 +67,7 @@ pricing:
       features:
         - id: "credits"
           name: "Credits"
-          value: 40
+          value: 200
           icon: "sparkles"
         - id: "exports"
           name: "Exports"
@@ -75,7 +75,7 @@ pricing:
           icon: "download"
 
     - id: "max"
-      name: Max
+      name: "Max"
       tagline: "best for growing businesses"
       pricing:
         monthly: 100
@@ -83,7 +83,7 @@ pricing:
       features:
         - id: "credits"
           name: "Credits"
-          value: 100
+          value: 500
           icon: "sparkles"
         - id: "exports"
           name: "Exports"
@@ -100,9 +100,11 @@ pricing:
 
 # Feature Comparison Section
 feature_comparison:
-  superheadline: "{% uj_icon 'list-check' %} Features"
+  superheadline:
+    icon: "sparkles"
+    text: "Features"
   headline: "Compare all"
-  headline_accent: "Plans"
+  headline_accent: "plans"
   subheadline: "See exactly what's included in each plan"
 
 # Social Proof Section
@@ -125,19 +127,24 @@ social_proof:
 
 # CTA Section
 cta:
-  superheadline: "{% uj_icon 'comments' %} Support"
+  superheadline:
+    icon: "comments"
+    text: "Support"
   headline: "Need help finding the right plan for your"
   headline_accent: "needs?"
   subheadline: "Talk to our support team 24/7"
   button:
     text: "Talk to Us"
-    icon: "comments"
+    icon: "headset"
     href: "/contact"
 
 # Testimonials Section
 testimonials:
-  superheadline: "{% uj_icon 'comments' %} Testimonials"
-  headline: "People {% uj_icon \"heart\", \"text-danger\" %} {{ site.brand.name }}"
+  superheadline:
+    icon: "megaphone"
+    text: "Testimonials"
+  headline: "People {% uj_icon \"heart\", \"text-danger\" %} "
+  headline_accent: "{{ site.brand.name }}"
   subheadline: "Hear from real people who have transformed their business with us"
   items:
     - quote: "This platform transformed my business. The support is incredible!"
@@ -158,10 +165,12 @@ testimonials:
 
 # FAQs Section
 faqs:
-  superheadline: "{% uj_icon 'circle-question' %} FAQs"
-  headline: "Frequently Asked"
-  headline_accent: "Questions"
-  subheadline: "Everything you need to know about the product and billing. Can't find the answer you're looking for? Please chat to our friendly team."
+  superheadline:
+    icon: "messages-question"
+    text: "FAQs"
+  headline: "Frequently asked"
+  headline_accent: "questions"
+  subheadline: "Everything you need to know about {{ site.brand.name }} billing & subscriptions."
   items:
     # - question: "Is {{ site.brand.name }} AI included with my existing {{ site.brand.name }} Studio plan?"
     #   answer: "No, {{ site.brand.name }} AI and {{ site.brand.name }} Studio function as separate products with individual pricing plans. If you were an active lifetime deal holder of {{ site.brand.name }} Studio and had purchased it before August 15, 2023, you'll qualify for free {{ site.brand.name }} AI credits. These will be phased in gradually, and you'll be notified via email when they become available. As for other {{ site.brand.name }} Studio subscribers, we're actively exploring ways to offer some benefits to help you get started on {{ site.brand.name }} AI. Stay tuned for more announcements.<br><br>PS: This is available exclusively to users who have purchased their {{ site.brand.name }} accounts from {{ site.brand.name }}."
@@ -210,7 +219,7 @@ faqs:
           {{ page.resolved.hero.headline }} <span class="text-gradient-rainbow">{{ page.resolved.hero.headline_accent }}</span>
         </h1>
         {% iftruthy page.resolved.hero.subheadline %}
-          <p class="fs-5 text-muted mb-0">
+          <p class="fs-5 text-muted">
             {{ page.resolved.hero.subheadline }}
           </p>
         {% endiftruthy %}
@@ -247,6 +256,31 @@ faqs:
 
         {% assign plan_count = page.resolved.pricing.plans | size %}
 
+        <!-- Automatically detect common features across ALL plans -->
+        {% assign common_feature_ids = "" | split: "," %}
+        {% if plan_count > 0 %}
+          {% assign first_plan = page.resolved.pricing.plans[0] %}
+          {% for first_feature in first_plan.features %}
+            {% assign is_common = true %}
+            {% for check_plan in page.resolved.pricing.plans %}
+              {% assign found_in_plan = false %}
+              {% for check_feature in check_plan.features %}
+                {% if check_feature.id == first_feature.id %}
+                  {% assign found_in_plan = true %}
+                  {% break %}
+                {% endif %}
+              {% endfor %}
+              {% unless found_in_plan %}
+                {% assign is_common = false %}
+                {% break %}
+              {% endunless %}
+            {% endfor %}
+            {% if is_common %}
+              {% assign common_feature_ids = common_feature_ids | push: first_feature.id %}
+            {% endif %}
+          {% endfor %}
+        {% endif %}
+
         <!-- Determine column classes based on number of plans -->
         {% if plan_count == 1 %}
           {% assign col_classes = "col-12 col-md-8 col-lg-6 col-xl-5" %}
@@ -287,10 +321,10 @@ faqs:
 
                     <!-- Price -->
                     {% if plan.pricing.monthly == 0 %}
-                      <p class="display-5 fw-bold mb-0">Free</p>
+                      <p class="display-6 fw-bold mb-0">Free</p>
                     {% else %}
                       <p class="mb-0">
-                        <span class="display-5 fw-bold">
+                        <span class="display-6 fw-bold">
                           <span class="fs-3">$</span><span class="amount" data-monthly="{{ plan.pricing.monthly }}" data-annually="{{ plan.pricing.annually | divided_by: 12 | round }}">{{ plan.pricing.annually | divided_by: 12 | round }}</span>
                         </span>
                         <small class="text-muted">/month</small>
@@ -343,28 +377,27 @@ faqs:
                       {% if plan.pricing.monthly == 0 %}
                         <span>No credit card required</span>
                       {% else %}
-                        <span class="billing-info" data-monthly="Billed ${{ plan.pricing.monthly }} monthly" data-annually="Billed ${{ plan.pricing.annually }} annually">
-                          Billed ${{ plan.pricing.annually }} annually
+                        <span class="billing-info" data-monthly="Billed ${{ plan.pricing.monthly | uj_commaify }} monthly" data-annually="Billed ${{ plan.pricing.annually | uj_commaify }} annually">
+                          Billed ${{ plan.pricing.annually | uj_commaify }} annually
                         </span>
                       {% endif %}
                     </p>
 
-                    <hr>
+                    <hr class="border-1">
 
                     <!-- Features -->
                     <div>
                       <!-- Common features that vary by plan -->
                       <ul class="list-unstyled mb-3">
-                        {% assign common_features = "credits,exports,video_mins" | split: "," %}
                         {% for feature in plan.features %}
-                          {% if common_features contains feature.id %}
+                          {% if common_feature_ids contains feature.id %}
                             <li class="d-flex align-items-start mb-2">
                               <span class="me-3">{% uj_icon feature.icon, "fa-md" %}</span>
                               <span>
                                 {% if feature.value == "Unlimited" %}
                                   Unlimited {{ feature.name }}
                                 {% else %}
-                                  {{ feature.value }} {{ feature.name }}
+                                  {{ feature.value | uj_commaify }} {{ feature.name }}
                                 {% endif %}
                               </span>
                             </li>
@@ -377,7 +410,7 @@ faqs:
                         <!-- Check if there are additional features -->
                         {% assign has_additional = false %}
                         {% for feature in plan.features %}
-                          {% unless common_features contains feature.id %}
+                          {% unless common_feature_ids contains feature.id %}
                             {% assign has_additional = true %}
                             {% break %}
                           {% endunless %}
@@ -401,7 +434,7 @@ faqs:
                         {% if has_additional %}
                           <ul class="list-unstyled mb-0">
                             {% for feature in plan.features %}
-                              {% unless common_features contains feature.id %}
+                              {% unless common_feature_ids contains feature.id %}
                                 <li class="d-flex align-items-start mb-2 {% if forloop.last %}mb-0{% endif %}">
                                   <span class="me-3">{% uj_icon feature.icon, "fa-md" %}</span>
                                   <span>
@@ -410,7 +443,7 @@ faqs:
                                     {% elsif feature.value == "Included" or feature.value == "Available" or feature.value == "Full" %}
                                       {{ feature.name }}
                                     {% else %}
-                                      {{ feature.value }} {{ feature.name }}
+                                      {{ feature.value | uj_commaify }} {{ feature.name }}
                                     {% endif %}
                                   </span>
                                 </li>
@@ -454,8 +487,13 @@ faqs:
 <section>
   <div class="container">
     <div class="text-center mb-5" data-lazy="@class animation-slide-up">
-      {% iftruthy page.resolved.feature_comparison.superheadline %}
-        <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">{{ page.resolved.feature_comparison.superheadline }}</span>
+      {% iftruthy page.resolved.feature_comparison.superheadline.text %}
+        <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">
+          {% iftruthy page.resolved.feature_comparison.superheadline.icon %}
+            {% uj_icon page.resolved.feature_comparison.superheadline.icon, "me-1" %}
+          {% endiftruthy %}
+          {{ page.resolved.feature_comparison.superheadline.text }}
+        </span>
       {% endiftruthy %}
       <h2 class="h2 mb-2">
         {{ page.resolved.feature_comparison.headline }}
@@ -597,53 +635,46 @@ faqs:
 
 <!-- CTA Section -->
 <section>
-  <div class="container" data-lazy="@class animation-slide-up">
-    <!-- style="background: linear-gradient(135deg, #2d2d2d 0%, #673ab7 50%, #2196f3 100%);" -->
-    <div class="rounded-4 p-5 position-relative overflow-hidden bg-primary bg-gradient">
-      <div class="row align-items-center py-4">
-        <div class="col-lg-7 text-light">
-          {% iftruthy page.resolved.cta.superheadline %}
-            <span class="badge bg-white bg-opacity-25 text-light p-2 mb-1 fw-semibold small">{{ page.resolved.cta.superheadline }}</span>
-          {% endiftruthy %}
-          <h2 class="h2 mb-2">
-            {{ page.resolved.cta.headline }}
-            {% iftruthy page.resolved.cta.headline_accent %}
-              <span class="text-accent">{{ page.resolved.cta.headline_accent }}</span>
+  <div class="container">
+    <div class="card border-0 bg-gradient bg-primary text-white rounded-4 p-4 p-md-5 text-center position-relative overflow-hidden" data-lazy="@class animation-slide-up">
+      <!-- Decorative icon - top right -->
+      <div class="position-absolute top-0 end-0 opacity-25" style="font-size:10rem;transform:rotate(15deg)translate(30%,-30%)">
+        {% uj_icon "messages-question", "text-white" %}
+      </div>
+
+      <!-- Decorative icon - bottom left -->
+      <div class="position-absolute bottom-0 start-0 opacity-25" style="font-size:8rem;transform:rotate(-20deg)translate(-30%,30%)">
+        {% uj_icon "shield-check", "text-white" %}
+      </div>
+
+      <div class="position-relative">
+        {% iftruthy page.resolved.cta.superheadline.text %}
+          <span class="badge bg-white bg-opacity-25 text-light p-2 mb-3 fw-semibold small">
+            {% iftruthy page.resolved.cta.superheadline.icon %}
+              {% uj_icon page.resolved.cta.superheadline.icon, "me-1" %}
             {% endiftruthy %}
-          </h2>
-          {% iftruthy page.resolved.cta.subheadline %}
-            <p class="fs-5 mb-4 opacity-90">{{ page.resolved.cta.subheadline }}</p>
+            {{ page.resolved.cta.superheadline.text }}
+          </span>
+        {% endiftruthy %}
+
+        <h2 class="h3 fw-bold mb-3">
+          {{ page.resolved.cta.headline }}
+          {% iftruthy page.resolved.cta.headline_accent %}
+            <span class="text-accent">{{ page.resolved.cta.headline_accent }}</span>
           {% endiftruthy %}
-          <a href="{{ page.resolved.cta.button.href }}" class="btn btn-adaptive btn-lg px-5 py-3">
+        </h2>
+
+        {% iftruthy page.resolved.cta.subheadline %}
+          <p class="lead mb-4">{{ page.resolved.cta.subheadline }}</p>
+        {% endiftruthy %}
+
+        <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
+          <a href="{{ page.resolved.cta.button.href }}" class="btn btn-light btn-lg px-4">
             {% uj_icon page.resolved.cta.button.icon, "me-2" %}
             {{ page.resolved.cta.button.text }}
           </a>
         </div>
-        <div class="col-lg-5 d-none d-lg-block position-relative">
-          <div class="text-end">
-            <div class="d-inline-block position-relative">
-              <!-- <div class="rounded-circle bg-white bg-opacity-25 p-5" style="backdrop-filter: blur(10px);">
-                <img src="https://via.placeholder.com/300x300/ffffff00/ffffff?text=👩‍💻"
-                     alt="Support"
-                     class="img-fluid"
-                     style="filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));">
-              </div> -->
-              <!-- <div class="position-absolute bottom-0 end-0 bg-white rounded-circle p-3 shadow-lg">
-              </div> -->
-              <div class="position-absolute bottom-0 end-0 p-3">
-                {% uj_icon "comment-dots", "text-light display-1" %}
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
-      <!-- Decorative elements -->
-      <!-- <div class="position-absolute top-0 end-0 opacity-25">
-        <div class="rounded-circle" style="width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); transform: translate(50%, -50%);"></div>
-      </div>
-      <div class="position-absolute bottom-0 start-0 opacity-25">
-        <div class="rounded-circle" style="width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); transform: translate(-50%, 50%);"></div>
-      </div> -->
     </div>
   </div>
 </section>
@@ -652,10 +683,20 @@ faqs:
 <section>
   <div class="container">
     <div class="text-center mb-5" data-lazy="@class animation-slide-up">
-      {% iftruthy page.resolved.testimonials.superheadline %}
-        <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">{{ page.resolved.testimonials.superheadline }}</span>
+      {% iftruthy page.resolved.testimonials.superheadline.text %}
+        <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">
+          {% iftruthy page.resolved.testimonials.superheadline.icon %}
+            {% uj_icon page.resolved.testimonials.superheadline.icon, "me-1" %}
+          {% endiftruthy %}
+          {{ page.resolved.testimonials.superheadline.text }}
+        </span>
       {% endiftruthy %}
-      <h2 class="h2 mb-2">{{ page.resolved.testimonials.headline }}</h2>
+      <h2 class="h2 mb-2">
+        {{ page.resolved.testimonials.headline }}
+        {% iftruthy page.resolved.testimonials.headline_accent %}
+          <span class="text-accent">{{ page.resolved.testimonials.headline_accent }}</span>
+        {% endiftruthy %}
+      </h2>
       {% iftruthy page.resolved.testimonials.subheadline %}
         <p class="fs-5 text-muted">{{ page.resolved.testimonials.subheadline }}</p>
       {% endiftruthy %}
@@ -711,9 +752,14 @@ faqs:
   <div class="container">
     <div class="row justify-content-center">
       <div class="col-lg-8">
-        <div class="text-center mb-4" data-lazy="@class animation-slide-up">
-          {% iftruthy page.resolved.faqs.superheadline %}
-            <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">{{ page.resolved.faqs.superheadline }}</span>
+        <div class="text-center mb-5" data-lazy="@class animation-slide-up">
+          {% iftruthy page.resolved.faqs.superheadline.text %}
+            <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">
+              {% iftruthy page.resolved.faqs.superheadline.icon %}
+                {% uj_icon page.resolved.faqs.superheadline.icon, "me-1" %}
+              {% endiftruthy %}
+              {{ page.resolved.faqs.superheadline.text }}
+            </span>
           {% endiftruthy %}
           <h2 class="h2 mb-2">
             {{ page.resolved.faqs.headline }}
@@ -722,7 +768,7 @@ faqs:
             {% endiftruthy %}
           </h2>
           {% iftruthy page.resolved.faqs.subheadline %}
-            <p class="fs-5 text-muted mb-0">{{ page.resolved.faqs.subheadline }}</p>
+            <p class="fs-5 text-muted">{{ page.resolved.faqs.subheadline }}</p>
           {% endiftruthy %}
         </div>
 

package/dist/defaults/dist/pages/test/libraries/form-manager.html

@@ -0,0 +1,181 @@
+---
+layout: themes/[ site.theme.id ]/frontend/core/base
+title: FormManager Test
+permalink: /test/libraries/form-manager
+sitemap: false
+---
+
+<div class="container py-5">
+  <h1 class="mb-4">FormManager Test Page</h1>
+  <p class="text-muted mb-5">Testing different configurations of the FormManager library.</p>
+
+  <div class="row g-4">
+
+    <!-- Test 1: Full Test (success/fail, nested, change events) -->
+    <div class="col-lg-8">
+      <div class="card">
+        <div class="card-header">
+          <h5 class="mb-0">Test 1: Full Test</h5>
+          <small class="text-muted">Success/failure toggle, nested dot notation, change events (check console)</small>
+        </div>
+        <div class="card-body">
+          <form id="test-form-main">
+            <div class="row">
+              <div class="col-md-6">
+                <div class="mb-3">
+                  <label for="main-name" class="form-label">user.name</label>
+                  <input type="text" class="form-control" id="main-name" name="user.name" value="Ian">
+                </div>
+                <div class="mb-3">
+                  <label for="main-email" class="form-label">user.email</label>
+                  <input type="email" class="form-control" id="main-email" name="user.email" value="ian@example.com">
+                </div>
+                <div class="mb-3">
+                  <label for="main-city" class="form-label">user.address.city</label>
+                  <input type="text" class="form-control" id="main-city" name="user.address.city" value="NYC">
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="mb-3">
+                  <label for="main-outcome" class="form-label">Simulate Outcome</label>
+                  <select class="form-select" id="main-outcome" name="settings.outcome">
+                    <option value="success">Success</option>
+                    <option value="error">Error (throw Error)</option>
+                  </select>
+                </div>
+                <div class="mb-3">
+                  <label class="form-label d-block">preferences.notifications (radio group)</label>
+                  <div class="form-check form-check-inline">
+                    <input type="radio" class="form-check-input" id="notif-all" name="preferences.notifications" value="all" checked>
+                    <label class="form-check-label" for="notif-all">All</label>
+                  </div>
+                  <div class="form-check form-check-inline">
+                    <input type="radio" class="form-check-input" id="notif-important" name="preferences.notifications" value="important">
+                    <label class="form-check-label" for="notif-important">Important</label>
+                  </div>
+                  <div class="form-check form-check-inline">
+                    <input type="radio" class="form-check-input" id="notif-none" name="preferences.notifications" value="none">
+                    <label class="form-check-label" for="notif-none">None</label>
+                  </div>
+                </div>
+                <div class="mb-3">
+                  <label class="form-label d-block">preferences.features (checkbox group)</label>
+                  <div class="form-check">
+                    <input type="checkbox" class="form-check-input" id="feat-darkmode" name="preferences.features" value="darkmode">
+                    <label class="form-check-label" for="feat-darkmode">Dark Mode</label>
+                  </div>
+                  <div class="form-check">
+                    <input type="checkbox" class="form-check-input" id="feat-analytics" name="preferences.features" value="analytics">
+                    <label class="form-check-label" for="feat-analytics">Analytics</label>
+                  </div>
+                  <div class="form-check">
+                    <input type="checkbox" class="form-check-input" id="feat-beta" name="preferences.features" value="beta">
+                    <label class="form-check-label" for="feat-beta">Beta Features</label>
+                  </div>
+                </div>
+                <div class="mb-3 form-check">
+                  <input type="checkbox" class="form-check-input" id="main-subscribe" name="settings.subscribe">
+                  <label class="form-check-label" for="main-subscribe">settings.subscribe (single checkbox)</label>
+                </div>
+              </div>
+            </div>
+            <div class="d-flex gap-2">
+              <button type="submit" data-action="save" class="btn btn-primary">Save</button>
+              <button type="submit" data-action="draft" class="btn btn-outline-secondary">Save as Draft</button>
+              <button type="button" id="main-set-data" class="btn btn-outline-info">Set Data</button>
+            </div>
+          </form>
+          <div class="mt-3 d-flex gap-3">
+            <small class="text-muted" id="main-status">Status: ready</small>
+            <small class="text-muted" id="main-action">Action: -</small>
+          </div>
+          <div class="mt-3">
+            <pre id="main-output" class="bg-body-secondary p-2 rounded small" style="max-height: 200px; overflow: auto;">Submit to see collected data...</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Test 2: Validation -->
+    <div class="col-lg-4">
+      <div class="card">
+        <div class="card-header d-flex justify-content-between align-items-start">
+          <div>
+            <h5 class="mb-0">Test 2: Validation</h5>
+            <small class="text-muted">HTML5 + custom validation event</small>
+          </div>
+          <button type="button" id="validation-set-correct" class="btn btn-sm btn-outline-success">Set Correct</button>
+        </div>
+        <div class="card-body">
+          <form id="test-form-validation">
+            <div class="mb-3">
+              <label for="validation-name" class="form-label">Name (required)</label>
+              <input type="text" class="form-control" id="validation-name" name="name" required>
+            </div>
+            <div class="mb-3">
+              <label for="validation-email" class="form-label">Email (required, valid format)</label>
+              <input type="email" class="form-control" id="validation-email" name="email" required>
+            </div>
+            <div class="mb-3">
+              <label for="validation-age" class="form-label">Age (required, must be 18+)</label>
+              <input type="number" class="form-control" id="validation-age" name="age" required min="1">
+            </div>
+            <div class="mb-3 form-check">
+              <input type="checkbox" class="form-check-input" id="validation-terms" name="terms" required>
+              <label class="form-check-label" for="validation-terms">I agree to the terms (required)</label>
+            </div>
+            <button type="submit" class="btn btn-primary">Submit</button>
+          </form>
+          <div class="mt-2">
+            <small class="text-muted" id="validation-status">Status: ready</small>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Test 3: Contact Form (one-time submit, reset on success) -->
+    <div class="col-lg-4">
+      <div class="card">
+        <div class="card-header">
+          <h5 class="mb-0">Test 3: Contact Form</h5>
+          <small class="text-muted">allowResubmit: false, resetOnSuccess: true</small>
+        </div>
+        <div class="card-body">
+          <form id="test-form-contact">
+            <div class="mb-3">
+              <label for="contact-message" class="form-label">Message</label>
+              <textarea class="form-control" id="contact-message" name="message" rows="2">Hello!</textarea>
+            </div>
+            <button type="submit" class="btn btn-primary">Send Message</button>
+          </form>
+          <div class="mt-2">
+            <small class="text-muted" id="contact-status">Status: ready</small>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Test 4: Manual Ready -->
+    <div class="col-lg-4">
+      <div class="card">
+        <div class="card-header">
+          <h5 class="mb-0">Test 4: Manual Ready</h5>
+          <small class="text-muted">autoReady: false, ready after 2 seconds</small>
+        </div>
+        <div class="card-body">
+          <form id="test-form-manual">
+            <div class="mb-3">
+              <label for="manual-data" class="form-label">Data</label>
+              <input type="text" class="form-control" id="manual-data" name="data">
+            </div>
+            <button type="submit" class="btn btn-primary">Submit</button>
+          </form>
+          <div class="mt-2">
+            <small class="text-muted" id="manual-status">Status: initializing</small>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>

package/dist/defaults/dist/pages/test/libraries/lazy-loading.html

@@ -42,7 +42,7 @@ meta:
       <!-- Spacer to push content below fold -->
       <div class="d-flex align-items-center justify-content-center text-muted vh-100">
         <div class="text-center">
-          <i class="fas fa-arrow-down fa-3x mb-3"></i>
+          {% uj_icon "arrow-down", "fa-3x mb-3" %}
           <p class="h4">Scroll down to trigger lazy loading...</p>
         </div>
       </div>