ultimate-jekyll-manager 0.0.118 → 0.0.119

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

@@ -6,14 +6,16 @@ layout: themes/[ site.theme.id ]/frontend/core/base
 # Hero Section
 hero:
   headline: "Download {{ site.brand.name }}"
-  headline_accent: "Today"
+  headline_accent: "today"
   description: "Get {{ site.brand.name }} for your platform and start building amazing things"
 
 # Downloads Section
 downloads:
-  superheadline: "{% uj_icon 'download' %} Download"
-  headline: "Available on Every"
-  headline_accent: "Platform"
+  superheadline:
+    icon: "download"
+    text: "Download"
+  headline: "Available on every"
+  headline_accent: "platform"
   subheadline: "Choose your platform below to get started"
   supported_platforms:
     - "Windows"
@@ -78,18 +80,20 @@ downloads:
 
 # Features Section
 features:
-  superheadline: "{% uj_icon 'star' %} Benefits"
-  headline: "Why You Should"
-  headline_accent: "Download"
+  superheadline:
+    icon: "star"
+    text: "Benefits"
+  headline: "Why you should"
+  headline_accent: "download"
   subheadline: "Everything you need to succeed, built right in"
   items:
-    - title: "Lightning Fast"
+    - title: "Lightning fast"
       description: "Install in seconds and start using immediately"
       icon: "bolt"
-    - title: "Cross-Platform"
+    - title: "Cross-platform"
       description: "Seamlessly sync across all your devices"
       icon: "sync"
-    - title: "Auto-Update"
+    - title: "Auto-update"
       description: "Always get the latest features automatically"
       icon: "cloud-arrow-down"
     - title: "Secure"
@@ -98,9 +102,11 @@ features:
 
 # System Requirements Section
 system_requirements:
-  superheadline: "{% uj_icon 'server' %} Requirements"
+  superheadline:
+    icon: "server"
+    text: "Requirements"
   headline: "System"
-  headline_accent: "Requirements"
+  headline_accent: "requirements"
   subheadline: "Make sure your device meets these minimum requirements"
   desktop:
     label: "Desktop"
@@ -121,10 +127,12 @@ system_requirements:
 
 # FAQ Section
 faqs:
-  superheadline: "{% uj_icon 'circle-question' %} FAQs"
-  headline: "Frequently Asked"
-  headline_accent: "Questions"
-  subheadline: "Everything you need to know about downloading and installing. 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 downloading and installing {{ site.brand.name }}."
   items:
     - question: "Is {{ site.brand.name }} free to download?"
       answer: "Yes! {{ site.brand.name }} is completely free to download and use. We offer premium features for power users, but the core functionality is always free."
@@ -137,7 +145,9 @@ faqs:
 
 # CTA Section
 cta:
-  superheadline: "{% uj_icon 'headset' %} Support"
+  superheadline:
+    icon: "comments"
+    text: "Support"
   headline: "Need help getting"
   headline_accent: "started?"
   subheadline: "Our support team is here 24/7 to help you with installation and setup"
@@ -172,8 +182,13 @@ cta:
 <section class="pt-0">
   <div class="container">
     <div class="text-center mb-5" data-lazy="@class animation-slide-up">
-      {% iftruthy page.resolved.downloads.superheadline %}
-        <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">{{ page.resolved.downloads.superheadline }}</span>
+      {% iftruthy page.resolved.downloads.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.downloads.superheadline.icon %}
+            {% uj_icon page.resolved.downloads.superheadline.icon, "me-1" %}
+          {% endiftruthy %}
+          {{ page.resolved.downloads.superheadline.text }}
+        </span>
       {% endiftruthy %}
       <h2 class="h2 mb-2">
         {{ page.resolved.downloads.headline }}
@@ -182,7 +197,7 @@ cta:
         {% endiftruthy %}
       </h2>
       {% iftruthy page.resolved.downloads.subheadline %}
-        <p class="fs-5 text-muted mb-4">{{ page.resolved.downloads.subheadline }}</p>
+        <p class="fs-5 text-muted">{{ page.resolved.downloads.subheadline }}</p>
       {% endiftruthy %}
     </div>
 
@@ -190,7 +205,7 @@ cta:
     <div class="row justify-content-center mb-5">
       <div class="col-12">
         <div class="d-flex flex-wrap justify-content-center gap-3" data-lazy="@class animation-slide-up">
-          <ul class="nav nav-pills gap-3 border-0" id="platform-selector" role="tablist">
+          <ul class="nav nav-pills gap-3 border-0 justify-content-center w-100" id="platform-selector" role="tablist">
           <!-- Loading tab (shown by default until platform is detected) -->
           <li class="nav-item d-none" role="presentation" data-platform="loading">
             <button
@@ -220,9 +235,9 @@ cta:
               {% endiftruthy %}
             {% endfor %}
 
-            <li class="nav-item" role="presentation">
+            <li class="nav-item flex-fill flex-sm-grow-0" role="presentation">
               <button
-                class="btn btn-outline-adaptive btn-lg platform-btn d-flex align-items-center justify-content-center"
+                class="btn btn-outline-adaptive btn-lg platform-btn d-flex align-items-center justify-content-center w-100"
                 id="{{ platform.id }}-tab"
                 data-bs-toggle="tab"
                 data-bs-target="#{{ platform.id }}-pane"
@@ -320,7 +335,7 @@ cta:
                     {% uj_icon "triangle-exclamation", "fs-4 me-3" %}
                     <div class="text-start">
                       <h6 class="mb-0">{{ page.resolved.downloads.not_available.headline }}</h6>
-                      <small>{{ page.resolved.downloads.not_available.description }}</small>
+                      <small>{{ site.brand.name }} is not currently available for {{ platform.name }}. Please choose another platform.</small>
                     </div>
                   </div>
                 {% endif %}
@@ -351,20 +366,8 @@ cta:
                   {% endfor %}
                 </div>
               {% else %}
-                <div class="d-flex flex-column gap-3">
-                  {% for type in platform.types %}
-                    <button
-                      type="button"
-                      class="btn btn-primary btn-lg d-flex align-items-center justify-content-center"
-                    >
-                      {% uj_icon type.icon, "fa-3xl me-2" %}
-                      {{ type.name }}
-                    </button>
-                  {% endfor %}
-                </div>
-
                 {% if platform.id == "android" or platform.id == "ios" %}
-                  <div class="mt-4 text-start">
+                  <div class="mb-4 text-start">
                     <form id="mobile-email-form-{{ platform.id }}" class="mobile-email-form" data-platform="{{ platform.id }}">
                       <label for="email-{{ platform.id }}" class="form-label">Email Address</label>
                       <div class="row g-3">
@@ -389,6 +392,19 @@ cta:
                     </form>
                   </div>
                 {% endif %}
+
+                <div class="d-flex flex-column gap-3">
+                  {% for type in platform.types %}
+                    <button
+                      type="button"
+                      class="btn btn-primary btn-lg d-flex align-items-center justify-content-center"
+                      disabled
+                    >
+                      {% uj_icon type.icon, "fa-3xl me-2" %}
+                      {{ type.name }}
+                    </button>
+                  {% endfor %}
+                </div>
               {% endif %}
             </div>
           </div>
@@ -404,8 +420,13 @@ cta:
 <section>
   <div class="container">
     <div class="text-center mb-5" data-lazy="@class animation-slide-up">
-      {% iftruthy page.resolved.features.superheadline %}
-        <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">{{ page.resolved.features.superheadline }}</span>
+      {% iftruthy page.resolved.features.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.features.superheadline.icon %}
+            {% uj_icon page.resolved.features.superheadline.icon, "me-1" %}
+          {% endiftruthy %}
+          {{ page.resolved.features.superheadline.text }}
+        </span>
       {% endiftruthy %}
       <h2 class="h2 mb-2">
         {{ page.resolved.features.headline }}
@@ -444,8 +465,13 @@ cta:
         <div class="card border-0 shadow-sm">
           <div class="card-body p-5">
             <div class="text-center mb-4">
-              {% iftruthy page.resolved.system_requirements.superheadline %}
-                <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">{{ page.resolved.system_requirements.superheadline }}</span>
+              {% iftruthy page.resolved.system_requirements.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.system_requirements.superheadline.icon %}
+                    {% uj_icon page.resolved.system_requirements.superheadline.icon, "me-1" %}
+                  {% endiftruthy %}
+                  {{ page.resolved.system_requirements.superheadline.text }}
+                </span>
               {% endiftruthy %}
               <h2 class="h2 mb-2">
                 {{ page.resolved.system_requirements.headline }}
@@ -505,9 +531,14 @@ cta:
   <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 }}
@@ -516,7 +547,7 @@ cta:
             {% 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>
 
@@ -544,36 +575,43 @@ cta:
 <!-- CTA Section -->
 <section>
   <div class="container">
-    <div class="rounded-4 p-5 position-relative overflow-hidden bg-primary bg-gradient" data-lazy="@class animation-slide-up">
-      <div class="row align-items-center py-4">
-        <div class="col-lg-8 text-light text-center text-lg-start">
-          {% 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 lh-sm mb-2">
-            {{ page.resolved.cta.headline }}
-            {% iftruthy page.resolved.cta.headline_accent %}
-              <span class="text-accent">{{ page.resolved.cta.headline_accent }}</span>
+    <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 %}
-          <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center justify-content-lg-start">
-            <a href="{{ page.resolved.cta.primary_button.href }}" class="btn btn-adaptive btn-lg px-5 py-3">
-              {% uj_icon page.resolved.cta.primary_button.icon, "me-2" %}
-              {{ page.resolved.cta.primary_button.text }}
-            </a>
-            <a href="{{ page.resolved.cta.secondary_button.href }}" class="btn btn-outline-adaptive btn-lg px-5 py-3">
-              {% uj_icon page.resolved.cta.secondary_button.icon, "me-2" %}
-              {{ page.resolved.cta.secondary_button.text }}
-            </a>
-          </div>
-        </div>
-        <div class="col-lg-4 d-none d-lg-block text-end">
-          {% uj_icon "download", "text-light display-1" %}
+        </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.primary_button.href }}" class="btn btn-light btn-lg px-4">
+            {% uj_icon page.resolved.cta.primary_button.icon, "me-2" %}
+            {{ page.resolved.cta.primary_button.text }}
+          </a>
         </div>
       </div>
     </div>

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

@@ -11,8 +11,8 @@ theme:
 # Hero Section
 hero:
   tagline: "Introducing {{ site.brand.name }}"
-  headline: "The #1 Platform for"
-  headline_accent: "Business Success"
+  headline: "The #1 platform for business"
+  headline_accent: "success"
   description: "AI automation for modern businesses made simple."
   primary_button:
     text: "Get Started Free"
@@ -66,9 +66,11 @@ trusted_by:
 
 # Product Demo Section
 product_demo:
-  superheadline: "{% uj_icon 'desktop' %} Demo"
+  superheadline:
+    icon: "rocket"
+    text: "Demo"
   headline: "See {{ site.brand.name }} in"
-  headline_accent: "Action"
+  headline_accent: "action"
   subheadline: "Explore powerful features that help you succeed"
   tabs:
     - id: "dashboard"
@@ -102,28 +104,32 @@ product_demo:
         - "Compliance Tools"
         - "Data Protection"
 
-# Alternating Features Section
-alternating_features:
-  superheadline: "{% uj_icon 'sparkles' %} Features"
-  headline: "What Makes {{ site.brand.name }}"
-  headline_accent: "Different"
+# Showcase Section
+showcase:
+  superheadline:
+    icon: "cubes"
+    text: "Showcase"
+  headline: "What makes {{ site.brand.name }}"
+  headline_accent: "different"
   subheadline: "Powerful features designed to accelerate your success"
   image_ratio: "4x3" # Options: 1x1, 4x3, 16x9, 21x9
   image_object_position: "center" # Options: center, top, bottom, left, right
   items:
-    - title: "Seamless Integration"
+    - title: "Seamless integration"
       description: "Connect with your existing tools and platforms effortlessly. Our system automatically syncs data and streamlines your workflow for maximum efficiency."
       image: "https://cdn.itwcreativeworks.com/assets/sample/images/demos/1x1/sample-demo-1.svg"
-    - title: "Data-Driven Insights"
+    - title: "Data-driven insights"
       description: "Make informed decisions with real-time analytics and actionable insights that help you understand what matters most to your business."
       image: "https://cdn.itwcreativeworks.com/assets/sample/images/demos/1x1/sample-demo-2.svg"
-    - title: "Smart Automation"
+    - title: "Smart automation"
       description: "Focus on what matters while our intelligent platform handles routine tasks automatically, working 24/7 to keep your business running smoothly."
       image: "https://cdn.itwcreativeworks.com/assets/sample/images/demos/1x1/sample-demo-3.svg"
 
 # Features Section
 features:
-  superheadline: "{% uj_icon 'check-circle' %} Features"
+  superheadline:
+    icon: "sparkles"
+    text: "Features"
   headline: "Design made"
   headline_accent: "simple"
   subheadline: "Get unlimited design requests delivered fast with our streamlined process."
@@ -144,8 +150,11 @@ features:
 
 # 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!"
@@ -189,9 +198,11 @@ stats:
 
 # CTA Section
 cta:
-  superheadline: "{% uj_icon 'rocket' %} Launch"
-  headline: "Ready to Transform your"
-  headline_accent: "Business?"
+  superheadline:
+    icon: "rocket"
+    text: "Launch"
+  headline: "Ready to transform your"
+  headline_accent: "business?"
   description: "Join thousands of successful companies who have already accelerated their growth with {{ site.brand.name }}"
   primary_button:
     text: "Start Today"
@@ -307,8 +318,7 @@ cta:
           <p class="text-uppercase fw-semibold mb-3 opacity-80">{{ page.resolved.hero.tagline }}</p>
 
           <h1 class="h1 fw-900 mb-4">
-            {{ page.resolved.hero.headline }}<br>
-            <span class="text-accent">{{ page.resolved.hero.headline_accent }}</span>
+            {{ page.resolved.hero.headline }} <span class="text-accent">{{ page.resolved.hero.headline_accent }}</span>
           </h1>
 
           <p class="fs-4 mb-4 opacity-80">
@@ -334,7 +344,7 @@ cta:
 <!-- Trusted By Section -->
 <section class="overflow-hidden pt-7">
   <div class="container-fluid px-0">
-    <div class="text-center mb-4" data-lazy="@class animation-slide-up">
+    <div class="text-center mb-3" data-lazy="@class animation-slide-up">
       <h3 class="fs-4">{{ page.resolved.trusted_by.headline }}</h3>
     </div>
 
@@ -354,8 +364,13 @@ cta:
 <section>
   <div class="container">
     <div class="text-center mb-5" data-lazy="@class animation-slide-up">
-      {% iftruthy page.resolved.product_demo.superheadline %}
-        <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">{{ page.resolved.product_demo.superheadline }}</span>
+      {% iftruthy page.resolved.product_demo.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.product_demo.superheadline.icon %}
+            {% uj_icon page.resolved.product_demo.superheadline.icon, "me-1" %}
+          {% endiftruthy %}
+          {{ page.resolved.product_demo.superheadline.text }}
+        </span>
       {% endiftruthy %}
 
       <h2 class="h2 mb-2">
@@ -422,21 +437,26 @@ cta:
   </div>
 </section>
 
-<!-- Alternating Features Section -->
+<!-- Showcase Section -->
 <section class="bg-body-secondary rounded-4">
   <div class="container">
     <div class="text-center mb-5" data-lazy="@class animation-slide-up">
-      {% iftruthy page.resolved.alternating_features.superheadline %}
-        <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">{{ page.resolved.alternating_features.superheadline }}</span>
+      {% iftruthy page.resolved.showcase.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.showcase.superheadline.icon %}
+            {% uj_icon page.resolved.showcase.superheadline.icon, "me-1" %}
+          {% endiftruthy %}
+          {{ page.resolved.showcase.superheadline.text }}
+        </span>
       {% endiftruthy %}
       <h2 class="h2 mb-2">
-        {{ page.resolved.alternating_features.headline }}
-        <span class="text-accent">{{ page.resolved.alternating_features.headline_accent }}</span>
+        {{ page.resolved.showcase.headline }}
+        <span class="text-accent">{{ page.resolved.showcase.headline_accent }}</span>
       </h2>
-      <p class="fs-5 text-muted">{{ page.resolved.alternating_features.subheadline }}</p>
+      <p class="fs-5 text-muted">{{ page.resolved.showcase.subheadline }}</p>
     </div>
 
-    {% for item in page.resolved.alternating_features.items %}
+    {% for item in page.resolved.showcase.items %}
       {% assign is_even = forloop.index | modulo: 2 %}
 
       <!-- Set classes based on position -->
@@ -450,8 +470,8 @@ cta:
 
       <!-- Common content -->
       {% capture image_content %}
-        {% assign ratio = page.resolved.alternating_features.image_ratio | default: "4x3" %}
-        {% assign object_position = page.resolved.alternating_features.image_object_position | default: "center" %}
+        {% assign ratio = page.resolved.showcase.image_ratio | default: "4x3" %}
+        {% assign object_position = page.resolved.showcase.image_object_position | default: "center" %}
         <div class="card border-0 shadow-sm ratio ratio-{{ ratio }}">
           {% uj_image item.image, class="w-100 h-100 object-fit-cover rounded", style="object-position: {{ object_position }};", alt=item.title %}
         </div>
@@ -478,8 +498,13 @@ cta:
 <section>
   <div class="container">
     <div class="text-center mb-5" data-lazy="@class animation-slide-up">
-      {% iftruthy page.resolved.features.superheadline %}
-        <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">{{ page.resolved.features.superheadline }}</span>
+      {% iftruthy page.resolved.features.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.features.superheadline.icon %}
+            {% uj_icon page.resolved.features.superheadline.icon, "me-1" %}
+          {% endiftruthy %}
+          {{ page.resolved.features.superheadline.text }}
+        </span>
       {% endiftruthy %}
       <h2 class="h2 mb-2">
         {{ page.resolved.features.headline }}
@@ -523,10 +548,20 @@ cta:
 <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 %}
@@ -607,29 +642,49 @@ cta:
 <!-- CTA Section -->
 <section>
   <div class="container">
-    <div class="rounded-4 p-5 bg-primary bg-gradient text-light text-center" data-lazy="@class animation-slide-up">
-      <div class="row justify-content-center">
-        <div class="col-lg-8">
-          {% 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-4">
-            {{ page.resolved.cta.headline }}
+    <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 "rocket", "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 "sparkles", "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 %}
+            {{ 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>
-          </h2>
-          <p class="fs-5 mb-4 opacity-90">
-            {{ page.resolved.cta.description }}
-          </p>
-          <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
-            <a href="{{ page.resolved.cta.primary_button.href }}" class="btn btn-light btn-lg px-5 py-3">
-              {% uj_icon page.resolved.cta.primary_button.icon, "me-2" %}
-              {{ page.resolved.cta.primary_button.text }}
-            </a>
-            <a href="{{ page.resolved.cta.secondary_button.href }}" class="btn btn-outline-light btn-lg px-5 py-3">
+          {% endiftruthy %}
+        </h2>
+
+        {% iftruthy page.resolved.cta.description %}
+          <p class="lead mb-4">{{ page.resolved.cta.description }}</p>
+        {% endiftruthy %}
+
+        <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
+          <a href="{{ page.resolved.cta.primary_button.href }}" class="btn btn-light btn-lg px-4">
+            {% uj_icon page.resolved.cta.primary_button.icon, "me-2" %}
+            {{ page.resolved.cta.primary_button.text }}
+          </a>
+          {% iftruthy page.resolved.cta.secondary_button %}
+            <a href="{{ page.resolved.cta.secondary_button.href }}" class="btn btn-outline-light btn-lg px-4">
               {% uj_icon page.resolved.cta.secondary_button.icon, "me-2" %}
               {{ page.resolved.cta.secondary_button.text }}
             </a>
-          </div>
+          {% endiftruthy %}
         </div>
       </div>
     </div>