ultimate-jekyll-manager 0.0.142 → 0.0.143

package/dist/assets/css/core/_lazy-loading.scss

@@ -12,6 +12,19 @@ img[data-lazy] {
   height: auto; // Maintain aspect ratio
 }
 
+// Hide video/audio elements until loaded to prevent ugly native controls showing during shimmer
+[data-lazy-load-container].lazy-loading video,
+[data-lazy-load-container].lazy-loading audio {
+  opacity: 0;
+}
+
+// Show video/audio elements once loaded with fade-in
+[data-lazy-load-container].lazy-loaded video,
+[data-lazy-load-container].lazy-loaded audio {
+  opacity: 1;
+  transition: opacity 0.25s ease-in;
+}
+
 // ============================================
 // Loading States
 // ============================================

package/dist/assets/js/libs/form-manager.js

@@ -13,7 +13,7 @@
 
 // Libraries
 import { ready as domReady } from 'web-manager/modules/dom.js';
-import { showNotification } from 'web-manager/modules/utilities.js';
+import { showNotification, getDeviceType } from 'web-manager/modules/utilities.js';
 
 export class FormManager {
   constructor(selector, options = {}) {
@@ -150,9 +150,9 @@ export class FormManager {
     this._setState('ready');
     this._setDisabled(false);
 
-    // Focus the field with autofocus attribute if it exists
+    // Focus the field with autofocus attribute if it exists (desktop only)
     const $autofocusField = this.$form.querySelector('[autofocus]');
-    if ($autofocusField && !$autofocusField.disabled) {
+    if ($autofocusField && !$autofocusField.disabled && getDeviceType() === 'desktop') {
       $autofocusField.focus();
 
       // Move cursor to end of input if it has existing text

package/dist/assets/js/pages/index.js

@@ -7,16 +7,12 @@ let webManager = null;
 // Module
 export default (Manager) => {
   return new Promise(async function (resolve) {
-    console.log('[Homepage] Module loading...');
-
     // Shortcuts
     webManager = Manager.webManager;
 
     // Initialize when DOM is ready
     await webManager.dom().ready();
 
-    console.log('[Homepage] DOM ready');
-
     // Bootstrap tabs handle all the tab switching automatically via data-bs-toggle="tab"
     // We just need to pause videos when switching tabs for better UX
     setupVideoControls();

package/dist/assets/themes/classy/_config.scss

@@ -184,5 +184,6 @@ $avatar-sizes: (
   $headings-font-weight: $headings-font-weight,
   $border-radius: $border-radius,
   $border-radius-sm: $border-radius-sm,
-  $border-radius-lg: $border-radius-lg
+  $border-radius-lg: $border-radius-lg,
+  $enable-negative-margins: true
 );

package/dist/assets/themes/classy/_theme.js

@@ -18,6 +18,8 @@ import setupNavbarScroll from './js/navbar-scroll.js';
 import { setupInfiniteScroll } from './js/infinite-scroll.js';
 // Import tooltip initialization
 import initializeTooltips from './js/initialize-tooltips.js';
+// Import hero demo form initialization
+import initHeroDemoForm from './js/hero-demo-form.js';
 
 // Initialize theme components when DOM is ready
 domReady().then(() => {
@@ -27,4 +29,7 @@ domReady().then(() => {
 
   // Generic Bootstrap initializations
   initializeTooltips();
+
+  // Initialize hero demo form if present
+  initHeroDemoForm();
 });

package/dist/assets/themes/classy/css/base/_spacing.scss

@@ -28,6 +28,10 @@
 // ============================================
 // Height utilities using viewport height (vh) units
 .vh-50 { height: 50vh !important; }
+.vh-75 { height: 75vh !important; }
+.vh-80 { height: 80vh !important; }
+.vh-90 { height: 90vh !important; }
+.vh-100 { height: 100vh !important; }
 
 // Min-Height utilities using viewport height (vh) units
 .min-vh-50 { min-height: 50vh !important; }

package/dist/assets/themes/classy/css/components/_buttons.scss

@@ -357,25 +357,20 @@
 // ============================================
 // Adaptive Inverse Buttons
 // ============================================
-// .btn-adaptive-inverse {
-//   @extend .btn-light;
-//   // color: $dark !important;
-
-//   // &:hover {
-//   //   background: $dark !important;
-//   //   color: white !important;
-//   // }
-// }
-
-// [data-bs-theme="dark"] .btn-adaptive-inverse {
-//   @extend .btn-dark;
-//   // color: white !important;
-
-//   // &:hover {
-//   //   background: white !important;
-//   //   color: $dark !important;
-//   // }
-// }
+.btn-adaptive-inverse {
+  @extend .btn-light;
+}
+
+[data-bs-theme="dark"] .btn-adaptive-inverse {
+  @extend .btn-dark;
+}
+.btn-outline-adaptive-inverse {
+  @extend .btn-outline-light;
+}
+
+[data-bs-theme="dark"] .btn-outline-adaptive-inverse {
+  @extend .btn-outline-dark;
+}
 
 // ============================================
 // Gradient Rainbow Button

package/dist/assets/themes/classy/js/hero-demo-form.js

@@ -0,0 +1,42 @@
+/**
+ * Hero Demo Form
+ * Initializes FormManager for hero demo forms (input or form type)
+ */
+
+/**
+ * Initialize the hero demo form if present
+ */
+export default async function initHeroDemoForm() {
+  const $form = document.querySelector('#hero-demo-form');
+
+  if (!$form) {
+    return;
+  }
+
+  // Dynamic import FormManager only when needed
+  const { FormManager } = await import('__main_assets__/js/libs/form-manager.js');
+
+  const formManager = new FormManager($form, {
+    submittingText: 'Processing...',
+  });
+
+  formManager.on('submit', async ({ data }) => {
+    // Get redirect URL from form data attribute or default to /dashboard
+    const redirectUrl = $form.dataset.redirect || '/dashboard';
+
+    // Build query string from form data
+    const params = new URLSearchParams();
+
+    Object.entries(data).forEach(([key, value]) => {
+      if (value !== null && value !== undefined && value !== '') {
+        params.set(key, value);
+      }
+    });
+
+    // Redirect with form data as query params
+    const queryString = params.toString();
+    const url = queryString ? `${redirectUrl}?${queryString}` : redirectUrl;
+
+    window.location.href = url;
+  });
+}

package/dist/defaults/dist/_includes/core/foot.html

@@ -49,13 +49,39 @@
             </a>
           </div>
 
+          <hr class="my-4">
+
+          <!-- Social proof -->
+          <div class="d-flex align-items-center justify-content-center">
+            <div class="d-flex me-2">
+              <span class="avatar avatar-sm rounded-circle border border-2 border-body overflow-hidden me-n2">
+                <img src="{{ site.uj.placeholder.src }}" data-lazy="@src https://i.pravatar.cc/40?img=1" alt="">
+              </span>
+              <span class="avatar avatar-sm rounded-circle border border-2 border-body overflow-hidden me-n2">
+                <img src="{{ site.uj.placeholder.src }}" data-lazy="@src https://i.pravatar.cc/40?img=2" alt="">
+              </span>
+              <span class="avatar avatar-sm rounded-circle border border-2 border-body overflow-hidden me-n2">
+                <img src="{{ site.uj.placeholder.src }}" data-lazy="@src https://i.pravatar.cc/40?img=3" alt="">
+              </span>
+              <span class="avatar avatar-sm rounded-circle border border-2 border-body overflow-hidden">
+                <img src="{{ site.uj.placeholder.src }}" data-lazy="@src https://i.pravatar.cc/40?img=4" alt="">
+              </span>
+            </div>
+            <span class="text-muted">
+              •
+            </span>
+            <small class="ms-2 text-muted"><strong class="text-body">10k+</strong> happy subscribers</small>
+          </div>
+
           <!-- Trust indicators -->
-          <div class="mt-4 pt-3 border-top">
+          {% comment %}
+          <div class="mt-3 pt-3 border-top">
             <small class="text-muted">
               <span class="text-success me-1">{% uj_icon "shield-alt" %}</span>
               No spam, ever. Unsubscribe anytime.
             </small>
           </div>
+          {% endcomment %}
         </div>
       </div>
     </div>

package/dist/defaults/dist/_layouts/blueprint/admin/firebase/index.html

@@ -80,8 +80,8 @@ meta:
       </div>
       <div class="card-body">
         <div class="mb-3">
-          <label class="form-label small">Where</label>
-          <select class="form-select form-select-sm">
+          <label for="query-field" class="form-label small">Where</label>
+          <select class="form-select form-select-sm" id="query-field">
             <option>Select field...</option>
             <option>email</option>
             <option>name</option>
@@ -90,7 +90,8 @@ meta:
           </select>
         </div>
         <div class="mb-3">
-          <select class="form-select form-select-sm">
+          <label for="query-operator" class="visually-hidden">Operator</label>
+          <select class="form-select form-select-sm" id="query-operator" aria-label="Comparison operator">
             <option>==</option>
             <option>!=</option>
             <option>&gt;</option>
@@ -100,7 +101,8 @@ meta:
           </select>
         </div>
         <div class="mb-3">
-          <input type="text" class="form-control form-control-sm" placeholder="Value">
+          <label for="query-value" class="visually-hidden">Value</label>
+          <input type="text" class="form-control form-control-sm" id="query-value" placeholder="Value" aria-label="Query value">
         </div>
         <button class="btn btn-sm btn-adaptive w-100">
           {% uj_icon "magnifying-glass", "fa-sm me-2" %}
@@ -126,7 +128,7 @@ meta:
               <span class="input-group-text">
                 {% uj_icon "magnifying-glass", "fa-sm" %}
               </span>
-              <input type="text" class="form-control" placeholder="Search documents...">
+              <input type="text" class="form-control" id="document-search" placeholder="Search documents..." aria-label="Search documents">
             </div>
             <div class="btn-group btn-group-sm">
               <button class="btn btn-outline-adaptive active">
@@ -148,7 +150,7 @@ meta:
             <thead class="table-light">
               <tr>
                 <th style="width: 30px;">
-                  <input class="form-check-input" type="checkbox">
+                  <input class="form-check-input" type="checkbox" id="select-all-documents" aria-label="Select all documents">
                 </th>
                 <th>Document ID</th>
                 <th>email</th>
@@ -162,7 +164,7 @@ meta:
               {% for i in (1..15) %}
               <tr>
                 <td>
-                  <input class="form-check-input" type="checkbox">
+                  <input class="form-check-input" type="checkbox" aria-label="Select document {{ i }}">
                 </td>
                 <td class="font-monospace small">
                   {% if i < 10 %}usr00{{ i }}{% else %}usr0{{ i }}{% endif %}abc123xyz

package/dist/defaults/dist/_layouts/blueprint/admin/notifications/new.html

@@ -229,18 +229,20 @@ prerender_icons:
           </h5>
 
           <div class="mb-3">
-            <label class="form-label">Auto-submit Date & Time</label>
+            <span class="form-label d-block">Auto-submit Date & Time</span>
             <small class="d-block text-muted mb-2">
               Leave empty to send immediately, or schedule for later
             </small>
             <div class="row">
               <div class="col-md-5">
+                <label for="schedule-date" class="visually-hidden">Schedule date</label>
                 <input type="date"
                        class="form-control"
                        name="schedule.date"
                        id="schedule-date">
               </div>
               <div class="col-md-4">
+                <label for="schedule-time" class="visually-hidden">Schedule time</label>
                 <input type="time"
                        class="form-control"
                        name="schedule.time"

package/dist/defaults/dist/_layouts/blueprint/admin/users/index.html

@@ -65,12 +65,12 @@ meta:
       <span class="input-group-text">
         {% uj_icon "magnifying-glass", "fa-sm" %}
       </span>
-      <input type="text" class="form-control" placeholder="Search users by name, email, or ID...">
+      <input type="text" class="form-control" id="user-search" placeholder="Search users by name, email, or ID..." aria-label="Search users">
     </div>
   </div>
   <div class="col-md-6">
     <div class="d-flex gap-2 justify-content-end">
-      <select class="form-select" style="width: auto;">
+      <select class="form-select" id="user-sort" style="width: auto;" aria-label="Sort users">
         <option>Sort by: Date Created</option>
         <option>Sort by: Name</option>
         <option>Sort by: Last Active</option>
@@ -92,7 +92,7 @@ meta:
         <thead>
           <tr>
             <th>
-              <input class="form-check-input" type="checkbox">
+              <input class="form-check-input" type="checkbox" id="select-all-users" aria-label="Select all users">
             </th>
             <th>User</th>
             <th>Role</th>
@@ -106,7 +106,7 @@ meta:
           {% for i in (1..10) %}
           <tr>
             <td>
-              <input class="form-check-input" type="checkbox">
+              <input class="form-check-input" type="checkbox" aria-label="Select user {{ i }}">
             </td>
             <td>
               <div class="d-flex align-items-center">

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/account/index.html

@@ -1016,7 +1016,7 @@ badges:
 
             <div class="mb-0">
               <div class="input-group">
-                <input type="text" class="form-control font-monospace" id="referral-code-input" readonly value="Loading...">
+                <input type="text" class="form-control font-monospace" id="referral-code-input" readonly value="Loading..." aria-label="Your referral code">
                 <button type="button" class="btn btn-outline-adaptive" id="copy-referral-code-btn">
                   {% uj_icon "copy", "me-2" %}
                   <span class="button-text d-none d-sm-inline">Copy</span>

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/blog/post.html

@@ -296,7 +296,8 @@ newsletter:
 
             <form class="row g-3 justify-content-center needs-validation" action="{{ site.url }}/email-subscription">
               <div class="col-md-7">
-                <input type="email" name="email" class="form-control form-control-lg" placeholder="{% iftruthy page.resolved.newsletter.form.placeholder %}{{ page.resolved.newsletter.form.placeholder }}{% endiftruthy %}" autocomplete="email" required>
+                <label for="newsletter-email" class="visually-hidden">Email address</label>
+                <input type="email" name="email" id="newsletter-email" class="form-control form-control-lg" placeholder="{% iftruthy page.resolved.newsletter.form.placeholder %}{{ page.resolved.newsletter.form.placeholder }}{% endiftruthy %}" autocomplete="email" required>
               </div>
               <div class="col-md-auto">
                 <button type="submit" class="btn btn-light btn-lg px-4">{% iftruthy page.resolved.newsletter.button.text %}{{ page.resolved.newsletter.button.text }}{% endiftruthy %}</button>

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

@@ -822,12 +822,12 @@ cta:
 
           <div class="position-relative mb-3">
             <div class="mb-1">
-              <h6 class="mb-0">2. Navigate to Downloads</h6>
+              <h6 class="mb-0" id="linux-step-2-label">2. Navigate to Downloads</h6>
               <small class="text-muted">Run the command below</small>
             </div>
             <div class="bg-body-tertiary rounded-4 p-4 overflow-hidden position-relative">
               <div class="input-group">
-                <input type="text" class="form-control font-monospace bg-dark text-light border-0" name="linux-command-1" value="cd ~/Downloads" readonly>
+                <input type="text" class="form-control font-monospace bg-dark text-light border-0" name="linux-command-1" value="cd ~/Downloads" readonly aria-labelledby="linux-step-2-label">
                 <button type="button" class="btn btn-outline-adaptive copy-command-btn">
                   {% uj_icon "copy", "me-2" %}
                   <span class="button-text d-none d-sm-inline">Copy</span>
@@ -838,14 +838,14 @@ cta:
 
           <div class="position-relative mb-3">
             <div class="mb-1">
-              <h6 class="mb-0">3. Install the package</h6>
+              <h6 class="mb-0" id="linux-step-3-label">3. Install the package</h6>
               <small class="text-muted">Run the appropriate command for your distribution</small>
             </div>
             <div class="bg-body-tertiary rounded-4 p-4 overflow-hidden position-relative">
               <div class="mb-3">
-                <small class="text-muted d-block mb-2 fw-bold">For Debian/Ubuntu:</small>
+                <small class="text-muted d-block mb-2 fw-bold" id="linux-debian-label">For Debian/Ubuntu:</small>
                 <div class="input-group">
-                  <input type="text" class="form-control font-monospace bg-dark text-light border-0" name="linux-command-2" value="sudo dpkg -i {{ site.brand.name | downcase }}_amd64.deb" readonly>
+                  <input type="text" class="form-control font-monospace bg-dark text-light border-0" name="linux-command-2" value="sudo dpkg -i {{ site.brand.name | downcase }}_amd64.deb" readonly aria-labelledby="linux-debian-label">
                   <button type="button" class="btn btn-outline-adaptive copy-command-btn">
                     {% uj_icon "copy", "me-2" %}
                     <span class="button-text d-none d-sm-inline">Copy</span>
@@ -853,9 +853,9 @@ cta:
                 </div>
               </div>
               <div>
-                <small class="text-muted d-block mb-2 fw-bold">For Fedora/RHEL:</small>
+                <small class="text-muted d-block mb-2 fw-bold" id="linux-fedora-label">For Fedora/RHEL:</small>
                 <div class="input-group">
-                  <input type="text" class="form-control font-monospace bg-dark text-light border-0" name="linux-command-3" value="sudo rpm -i {{ site.brand.name | downcase }}_amd64.rpm" readonly>
+                  <input type="text" class="form-control font-monospace bg-dark text-light border-0" name="linux-command-3" value="sudo rpm -i {{ site.brand.name | downcase }}_amd64.rpm" readonly aria-labelledby="linux-fedora-label">
                   <button type="button" class="btn btn-outline-adaptive copy-command-btn">
                     {% uj_icon "copy", "me-2" %}
                     <span class="button-text d-none d-sm-inline">Copy</span>

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

@@ -14,14 +14,32 @@ hero:
   headline: "The #1 platform <br> for business"
   headline_accent: "success"
   description: "AI automation for modern businesses made simple"
+  demo:
+    enabled: false
+    type: "input"
+    placement: "bottom"
+    options:
+      class: "mw-md"
+      placeholder: "Enter your email"
+      name: "email"
+      input_type: "email"
+      required: true
+      redirect: "/dashboard"
+      subtext: "No credit card required"
+      button:
+        text: "Start Free Trial"
+        icon: "rocket"
+        class: "btn-adaptive-inverse"
   primary_button:
     text: "Get Started Free"
     icon: "rocket"
     href: "/dashboard"
+    class: "btn-light"
   secondary_button:
     text: "Explore Solutions"
     icon: "book-open"
     href: "/pricing"
+    class: "btn-outline-light"
   cards:
     - number: "50K+"
       label: "Active Users"
@@ -310,10 +328,157 @@ cta:
 {% endcomment %}
 
 <!-- Hero Section -->
+{% assign demo = page.resolved.hero.demo %}
+{% assign demo_placement = demo.placement | default: "bottom" %}
+{% assign is_side_layout = false %}
+{% if demo.enabled and demo_placement == "side" %}
+  {% assign is_side_layout = true %}
+{% endif %}
+
+{% comment %} Capture demo content once to avoid duplication {% endcomment %}
+{% capture hero_demo_content %}
+  {% if demo.type == "input" %}
+    <!-- Input Demo: Single input with button -->
+    <div class="card bg-glassy border-0 {% unless is_side_layout %}mx-auto{% endunless %} {{ demo.options.class }}">
+      <div class="card-body">
+        <form id="hero-demo-form" class="d-flex flex-column {% unless is_side_layout %}flex-sm-row justify-content-center{% endunless %} gap-3" {% iftruthy demo.options.redirect %}data-redirect="{{ demo.options.redirect }}"{% endiftruthy %}>
+          <input
+            type="{{ demo.options.input_type | default: 'text' }}"
+            name="{{ demo.options.name | default: 'input' }}"
+            class="form-control form-control-lg border-0"
+            placeholder="{{ demo.options.placeholder }}"
+            {% iftruthy demo.options.required %}required{% endiftruthy %}
+            autofocus
+            disabled
+          >
+          {% assign demo_btn_class = demo.options.button.class | default: "btn-adaptive-inverse" %}
+          <button type="submit" class="btn {{ demo_btn_class }} btn-lg text-nowrap flex-shrink-0" disabled>
+            {% iftruthy demo.options.button.icon %}
+              {% uj_icon demo.options.button.icon, "me-2" %}
+            {% endiftruthy %}
+            {{ demo.options.button.text }}
+          </button>
+        </form>
+      </div>
+    </div>
+
+  {% elsif demo.type == "form" %}
+    <!-- Form Demo: Multiple fields with card styling -->
+    <div class="{% unless is_side_layout %}mx-auto{% endunless %} {{ demo.options.class }}">
+      <form id="hero-demo-form" {% iftruthy demo.options.redirect %}data-redirect="{{ demo.options.redirect }}"{% endiftruthy %}>
+        <div class="row g-3 {% unless is_side_layout %}justify-content-center{% endunless %}">
+          {% assign autofocus_set = false %}
+          {% for field in demo.options.fields %}
+            {% assign field_size = field.size | default: "half" %}
+            <div class="col-12 {% if field_size == 'half' %}col-sm-6{% endif %}">
+              <div class="card bg-glassy border-0">
+                <div class="card-body p-3">
+                  {% iftruthy field.label %}
+                    <label for="hero-demo-{{ field.name }}" class="form-label d-flex align-items-center mb-2">
+                      {% iftruthy field.icon %}
+                        {% uj_icon field.icon, "me-2" %}
+                      {% endiftruthy %}
+                      {{ field.label }}
+                      {% iftruthy field.required %}<span class="text-danger ms-1">*</span>{% endiftruthy %}
+                    </label>
+                  {% endiftruthy %}
+                  {% if field.type == "select" %}
+                    <select
+                      id="hero-demo-{{ field.name }}"
+                      name="{{ field.name }}"
+                      class="form-select form-select-lg border-0"
+                      {% iftruthy field.required %}required{% endiftruthy %}
+                      disabled
+                    >
+                      <option value="" disabled selected>{{ field.placeholder }}</option>
+                      {% for option in field.options %}
+                        <option value="{{ option.value }}">{{ option.label }}</option>
+                      {% endfor %}
+                    </select>
+                  {% elsif field.type == "textarea" %}
+                    <textarea
+                      id="hero-demo-{{ field.name }}"
+                      name="{{ field.name }}"
+                      class="form-control form-control-lg border-0"
+                      placeholder="{{ field.placeholder }}"
+                      rows="{{ field.rows | default: 3 }}"
+                      {% iftruthy field.required %}required{% endiftruthy %}
+                      {% unless autofocus_set %}autofocus{% assign autofocus_set = true %}{% endunless %}
+                      disabled
+                    ></textarea>
+                  {% else %}
+                    <input
+                      id="hero-demo-{{ field.name }}"
+                      type="{{ field.type | default: 'text' }}"
+                      name="{{ field.name }}"
+                      class="form-control form-control-lg border-0"
+                      placeholder="{{ field.placeholder }}"
+                      {% iftruthy field.required %}required{% endiftruthy %}
+                      {% unless autofocus_set %}autofocus{% assign autofocus_set = true %}{% endunless %}
+                      disabled
+                    >
+                  {% endif %}
+                </div>
+              </div>
+            </div>
+          {% endfor %}
+          {% assign form_btn_class = demo.options.button.class | default: "btn-adaptive-inverse" %}
+          <div class="col-12 {% if demo.options.button.full_width != true %}col-sm-auto{% endif %}">
+            <button type="submit" class="btn {{ form_btn_class }} btn-lg w-100 h-100" disabled>
+              {% iftruthy demo.options.button.icon %}
+                {% uj_icon demo.options.button.icon, "me-2" %}
+              {% endiftruthy %}
+              {{ demo.options.button.text }}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+
+  {% elsif demo.type == "video" %}
+    <!-- Video Demo: Embedded video player -->
+    <div class="{% unless is_side_layout %}mx-auto{% endunless %} {{ demo.options.class }}">
+      <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
+        <div class="ratio ratio-16x9">
+          {% uj_video demo.options.src, class="w-100 d-block object-fit-cover border-0", controls="{{ demo.options.controls }}", loop="{{ demo.options.loop }}", autoplay="{{ demo.options.autoplay }}", playsinline="true", muted="{{ demo.options.muted }}", preload="metadata" %}
+        </div>
+      </div>
+    </div>
+
+  {% elsif demo.type == "custom" %}
+    <!-- Custom Demo: Renders content block -->
+    <div id="hero-demo-custom" class="{% unless is_side_layout %}mx-auto{% endunless %} {{ demo.options.class }}">
+      {{ demo.options.content }}
+    </div>
+
+  {% endif %}
+
+  {% iftruthy demo.options.subtext %}
+    <p class="small mt-3 opacity-70 {% if is_side_layout %}text-center mb-0{% endif %}">{{ demo.options.subtext }}</p>
+  {% endiftruthy %}
+{% endcapture %}
+
+{% comment %} Capture CTA buttons {% endcomment %}
+{% capture hero_cta_buttons %}
+  {% assign primary_btn_class = page.resolved.hero.primary_button.class | default: "btn-adaptive" %}
+  {% assign secondary_btn_class = page.resolved.hero.secondary_button.class | default: "btn-outline-adaptive" %}
+  <div class="d-flex flex-row flex-wrap gap-3 justify-content-center {% if is_side_layout %}justify-content-lg-start{% endif %}">
+    <a href="{{ page.resolved.hero.primary_button.href }}" class="btn {{ primary_btn_class }} btn-lg py-3 {% if is_side_layout %}px-4{% else %}px-5{% endif %}">
+      {% uj_icon page.resolved.hero.primary_button.icon, "me-2" %}
+      {{ page.resolved.hero.primary_button.text }}
+    </a>
+    <a href="{{ page.resolved.hero.secondary_button.href }}" class="btn {{ secondary_btn_class }} btn-lg py-3 {% if is_side_layout %}px-4{% else %}px-5{% endif %}">
+      {% uj_icon page.resolved.hero.secondary_button.icon, "me-2" %}
+      {{ page.resolved.hero.secondary_button.text }}
+    </a>
+  </div>
+{% endcapture %}
+
 <section class="bg-gradient-rainbow gradient-animated gradient-grain text-light overflow-hidden position-relative min-vh-80 d-flex align-items-center rounded-bottom-4 shadow-lg">
   <div class="container py-5">
-    <div class="row justify-content-center">
-      <div class="col-lg-10 text-center py-5">
+    <div class="row justify-content-center {% if is_side_layout %}align-items-center{% endif %}">
+      <!-- Text Column -->
+      <div class="{% if is_side_layout %}col-lg-6 text-center text-lg-start{% else %}col-lg-10 text-center py-5{% endif %}">
         <div data-lazy="@class animation-slide-up">
           <p class="text-uppercase fw-semibold mb-3 opacity-80">{{ page.resolved.hero.tagline }}</p>
 
@@ -325,18 +490,29 @@ cta:
             {{ page.resolved.hero.description }}
           </p>
 
-          <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
-            <a href="{{ page.resolved.hero.primary_button.href }}" class="btn btn-light btn-lg px-5 py-3">
-              {% uj_icon page.resolved.hero.primary_button.icon, "me-2" %}
-              {{ page.resolved.hero.primary_button.text }}
-            </a>
-            <a href="{{ page.resolved.hero.secondary_button.href }}" class="btn btn-outline-light btn-lg px-5 py-3">
-              {% uj_icon page.resolved.hero.secondary_button.icon, "me-2" %}
-              {{ page.resolved.hero.secondary_button.text }}
-            </a>
-          </div>
+          {% if is_side_layout %}
+            <!-- Side layout: CTA buttons go here, demo goes in right column -->
+            {{ hero_cta_buttons }}
+          {% else %}
+            <!-- Bottom layout: CTA buttons, then demo below -->
+            {{ hero_cta_buttons }}
+            {% if demo.enabled %}
+              <div class="mt-5">
+                {{ hero_demo_content }}
+              </div>
+            {% endif %}
+          {% endif %}
         </div>
       </div>
+
+      {% if is_side_layout %}
+        <!-- Demo Column (Side Placement) -->
+        <div class="col-lg-6 mt-5 mt-lg-0">
+          <div data-lazy="@class animation-slide-up">
+            {{ hero_demo_content }}
+          </div>
+        </div>
+      {% endif %}
     </div>
   </div>
 </section>