ultimate-jekyll-manager 1.4.3 → 1.6.0

package/dist/assets/themes/neobrutalism/pages/test/libraries/layers/index.scss

@@ -0,0 +1,7 @@
+// /test — Theme (neobrutalism) page CSS — the #theme layer.
+// Loads AFTER the universal layer and turns the "css-theme" dot green.
+// Compiles standalone, so no theme tokens are needed here — just the proof.
+
+.layer-dot[data-layer="css-theme"] {
+  background: #30a46c; // green
+}

package/dist/build.js

@@ -110,11 +110,8 @@ Manager.actLikeProduction = function () {
 }
 Manager.prototype.actLikeProduction = Manager.actLikeProduction;
 
-// getEnvironment (calls isServer ? 'production' : 'development')
-Manager.getEnvironment = function () {
-  return Manager.isServer() ? 'production' : 'development';
-}
-Manager.prototype.getEnvironment = Manager.getEnvironment;
+// getEnvironment() is the SSOT and lives in src/utils/mode-helpers.js (alongside the is*()
+// family). It's mixed onto the Manager via the attachTo() call below, same as in EM/BXM.
 
 // getConfig: requires and parses config.yml
 Manager.getConfig = function (type) {

package/dist/commands/install.js

@@ -17,7 +17,7 @@ module.exports = async function (options) {
 
   try {
     // Install production
-    if (['prod', 'p', 'production'].includes(type)) {
+    if (['live', 'prod', 'p', 'production'].includes(type)) {
       // Log
       logger.log('Installing production...');
 

package/dist/commands/setup.js

@@ -39,6 +39,7 @@ module.exports = async function (options) {
   options.checkLocality = options.checkLocality !== 'false';
   options.publishGitHubToken = options.publishGitHubToken !== 'false';
   options.deduplicatePosts = options.deduplicatePosts !== 'false';
+  options.removeLegacyTeamMembers = options.removeLegacyTeamMembers !== 'false';
   options.migrate = options.migrate !== 'false';
 
   // Quick mode: skip slow/network operations
@@ -137,6 +138,11 @@ module.exports = async function (options) {
   if (options.deduplicatePosts) {
     await deduplicatePosts();
   }
+
+  // Remove legacy default team members (first-name-only format, e.g. team/alex)
+  if (options.removeLegacyTeamMembers) {
+    await removeLegacyTeamMembers();
+  }
 };
 
 // --- Version check functions ---
@@ -527,6 +533,41 @@ async function deduplicatePosts() {
   }
 }
 
+async function removeLegacyTeamMembers() {
+  // Legacy default team members that used the first-name-only format.
+  // These shipped before team members were renamed to first-last (e.g. team/alex -> team/alex-raeburn).
+  const legacyTeamMembers = ['alex'];
+
+  logger.log('Checking for legacy default team members to remove...');
+
+  let removedCount = 0;
+
+  legacyTeamMembers.forEach((slug) => {
+    // The _team collection file (any markdown/html extension)
+    const memberFiles = glob(`src/_team/${slug}.{md,markdown,html}`, { nodir: true });
+
+    memberFiles.forEach((filePath) => {
+      jetpack.remove(filePath);
+      logger.log(`  ✓ Removed legacy team member: ${filePath}`);
+      removedCount++;
+    });
+
+    // The associated image directory (src/assets/images/team/<slug>)
+    const imageDir = path.join(process.cwd(), 'src', 'assets', 'images', 'team', slug);
+
+    if (jetpack.exists(imageDir)) {
+      jetpack.remove(imageDir);
+      logger.log(`  ✓ Removed legacy team member image directory: team/${slug}`);
+    }
+  });
+
+  if (removedCount > 0) {
+    logger.log(logger.format.green(`✓ Removed ${removedCount} legacy team member(s)`));
+  } else {
+    logger.log('No legacy team members found');
+  }
+}
+
 // --- Migration functions ---
 
 async function migrate() {

package/dist/defaults/CLAUDE.md

@@ -29,8 +29,12 @@ npm run build       # production build (UJ_BUILD_MODE=true): clean → setup →
 npm run deploy      # build → `npu sync --message='Deploy'` (publishes _site/)
 npx mgr test        # run framework + project test suites (build / page / boot layers)
 npx mgr audit       # HTML validation + spellcheck + optional Lighthouse
+npx mgr install dev  # use LOCAL ultimate-jekyll-manager source (to test framework edits)
+npx mgr install live # restore the published ultimate-jekyll-manager from npm
 ```
 
+> Editing the UJM framework source while working here? Run `npx mgr install dev` so this project picks up your uncommitted framework changes (it otherwise uses its installed `node_modules/ultimate-jekyll-manager`). Run `npx mgr install live` to switch back.
+
 ## Where things live
 
 - `src/_config.yml` — Jekyll config: brand, theme, meta, web_manager (Firebase). `Manager.getConfig('project')` reads this. **`brand.id` + `theme.id` are required.**
@@ -72,7 +76,7 @@ At build time, `require('ultimate-jekyll-manager/build')` exposes:
 - `Manager.getConfig(type)` — read `_config.yml` (`'project'` or `'main'`)
 - `Manager.getPackage(type)` — read `package.json` (`'project'` or `'main'`)
 - `Manager.getUJMConfig()` — read `config/ultimate-jekyll-manager.json`
-- `Manager.getEnvironment()` — `'development'` or `'production'`
+- `Manager.getEnvironment()` — `'development' | 'testing' | 'production'` (mutually exclusive; testing wins). Gate side effects on the intentional check (`isProduction()` for prod-only; `isDevelopment() || isTesting()` for local-or-test) — never `!isDevelopment()`.
 - `Manager.isBuildMode()` / `isQuickMode()` / `isServer()` / `actLikeProduction()` — env-gated flags
 - `Manager.logger(name)` — timestamped logger instance
 - `Manager.require(path)` — escape hatch for UJM transitive deps (use sparingly)

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

@@ -26,12 +26,15 @@
 
 {% iftruthy page.resolved.asset_path %}
   {% capture page-css-path %}/assets/css/pages/{{ page.resolved.asset_path }}.bundle.css{% endcapture %}
+  {% capture page-css-theme-path %}/assets/css/pages/{{ page.resolved.asset_path }}.{{ page.resolved.theme.id }}.bundle.css{% endcapture %}
 {% endiftruthy %}
 {% iffalsy page.resolved.asset_path %}
   {% if page.canonical.path == "/" %}
     {% capture page-css-path %}/assets/css/pages/index.bundle.css{% endcapture %}
+    {% capture page-css-theme-path %}/assets/css/pages/index.{{ page.resolved.theme.id }}.bundle.css{% endcapture %}
   {% else %}
     {% capture page-css-path %}/assets/css/pages{{ page.canonical.path }}/index.bundle.css{% endcapture %}
+    {% capture page-css-theme-path %}/assets/css/pages{{ page.canonical.path }}/index.{{ page.resolved.theme.id }}.bundle.css{% endcapture %}
   {% endif %}
 {% endiffalsy %}
 
@@ -210,6 +213,20 @@
   {% endif %}
 {% endiffile %}
 
+<!-- Then, the active theme's page-specific bundle (loaded AFTER base so it can override).
+     Only present when the theme ships page CSS for this path — otherwise nothing loads
+     and the theme's component/general styles handle the page. No fallback needed. -->
+{% iffile page-css-theme-path %}
+  <link rel="stylesheet" type="text/css" href="{{ site.url }}{{ page-css-theme-path }}?cb={{ site.uj.cache_breaker }}"/>
+
+  <!-- Dev log -->
+  {% if jekyll.environment == "development" %}
+    <script>
+      console.info("Theme page-specific css loading: #main{{ page-css-theme-path }}");
+    </script>
+  {% endif %}
+{% endiffile %}
+
 <!-- Style - Scripts are Disabled -->
 <noscript>
   {{ page-ie-script }}

package/dist/defaults/dist/_includes/themes/classy/frontend/sections/footer.html

@@ -70,10 +70,10 @@
     </div>
 
     <!-- Bottom Section -->
-    <div class="row mt-4 pt-3 border-top">
+    <div class="row mt-4 pt-3 border-top align-items-center">
       <div class="col-md-6 d-flex align-items-center">
         <!-- Language Dropdown -->
-        <div class="d-inline-block me-3">
+        <div class="d-flex align-items-center me-3">
             <div class="dropup uj-language-dropdown">
               <button class="btn btn-sm btn-outline-adaptive dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                 <i class="fa fa-sm me-1">
@@ -85,7 +85,7 @@
               </button>
               <ul class="dropdown-menu">
                 {% assign default_language = site.translation.default | default: "en" %}
-                {% if site.translation.languages.size > 0 %}
+                {% if site.translation.enabled and site.translation.languages.size > 0 %}
                   {% assign all_languages = site.translation.languages | push: default_language %}
                 {% else %}
                   {% assign all_languages = "" | split: "" | push: default_language %}
@@ -105,7 +105,7 @@
 
         <!-- Social Links -->
         {% if data.socials.enabled %}
-          <div class="d-inline-block">
+          <div class="d-flex align-items-center">
             {% if data.socials.list and data.socials.list.size > 0 %}
               {% assign social_list = data.socials.list %}
             {% else %}

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

@@ -330,6 +330,7 @@ cta:
                       <a
                         href="{{ config_url }}"
                         class="btn btn-primary btn-lg d-flex align-items-center justify-content-center"
+                        data-download="true"
                       >
                         {% uj_icon type.icon, "fa-3xl me-2" %}
                         {{ type.name }}
@@ -339,6 +340,7 @@ cta:
                       <button
                         type="button"
                         class="btn btn-primary btn-lg d-flex align-items-center justify-content-center"
+                        data-download="true"
                       >
                         {% uj_icon type.icon, "fa-3xl me-2" %}
                         {{ type.name }}

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

@@ -167,9 +167,13 @@ prerender_icons:
           <img src="https://cdn.itwcreativeworks.com/assets/general/images/feedback/love.png?cb={{ site.uj.cache_breaker }}" alt="Thank you" width="80" height="80">
         </div>
         <h3 class="mb-3" id="review-modal-label">You're awesome!</h3>
-        <p class="text-muted mb-4">
-          We're so glad you love {{ site.brand.name }}! Would you mind sharing your experience on a review site? It really helps us grow.
+        <p class="text-muted mb-3">
+          We're so glad you love {{ site.brand.name }}! Share your experience on a review site to be entered to win a $100 gift card.
         </p>
+        <div class="alert alert-warning text-start small mb-4" role="alert">
+          {% uj_icon "circle-exclamation", "me-1" %}
+          You must actually post your review to be eligible for the $100 gift card &mdash; closing this without publishing a review won't qualify.
+        </div>
 
         <!-- Copy-paste feedback -->
         <div class="text-start mb-4">
@@ -188,7 +192,7 @@ prerender_icons:
 
         <a id="review-modal-link" href="#" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-lg mb-3">
           {% uj_icon "arrow-up-right-from-square", "me-2" %}
-          Write a review
+          Post your review
         </a>
         <div>
           <button type="button" class="btn btn-link text-muted" data-bs-dismiss="modal">Maybe later</button>

package/dist/defaults/dist/_layouts/themes/neobrutalism/frontend/core/base.html

@@ -0,0 +1,31 @@
+---
+### ALL PAGES ###
+layout: core/root
+
+### THEME CONFIG ###
+theme:
+  # html:
+  #   class: ""
+  head:
+    content: |
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800;900&family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" media="print" onload="this.media='all'">
+  body:
+    class: "d-flex flex-column min-vh-100"
+  # main:
+  #   class: "flex-fill"
+---
+
+<!-- Nav (controlled by page/layout front matter) -->
+{% unless page.resolved.theme.nav.enabled == false %}
+  {%- include /frontend/sections/nav.html -%}
+{% endunless %}
+
+<!-- Main Content -->
+<main id="main-content" class="flex-fill {{ page.resolved.theme.main.class | uj_liquify }}" aria-label="Main content">
+  {{ content | uj_content_format }}
+</main>
+
+<!-- Footer (controlled by page/layout front matter) -->
+{% unless page.resolved.theme.footer.enabled == false %}
+  {%- include /frontend/sections/footer.html -%}
+{% endunless %}

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

@@ -0,0 +1,345 @@
+---
+### ALL PAGES ###
+layout: themes/[ site.theme.id ]/frontend/core/base
+
+#### THEME CONFIG ####
+theme:
+  main:
+    class: "pt-0"
+
+### PAGE CONFIG ###
+# Hero Section
+hero:
+  tagline: "Introducing {{ site.brand.name }}"
+  headline: "The #1 platform for business"
+  headline_accent: "success"
+  description: "AI automation for modern businesses made simple"
+  primary_button:
+    text: "Get started free"
+    icon: "rocket"
+    href: "/dashboard"
+  secondary_button:
+    text: "See pricing"
+    icon: "book-open"
+    href: "/pricing"
+
+# Trusted By Section
+trusted_by:
+  headline: "Trusted by the best"
+  logos:
+    - name: "amazon"
+    - name: "google"
+    - name: "hubspot"
+    - name: "paypal"
+    - name: "slack"
+    - name: "shopify"
+    - name: "stripe"
+
+# 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"
+  items:
+    - title: "Seamless integration"
+      description: "Connect with your existing tools and platforms effortlessly. Our system automatically syncs data and streamlines your workflow for maximum efficiency."
+    - 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."
+    - 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."
+
+# Features Section
+features:
+  superheadline:
+    icon: "sparkles"
+    text: "How it works"
+  headline: "Design made"
+  headline_accent: "simple"
+  subheadline: "Get unlimited design requests delivered fast with our streamlined process."
+  cta_button:
+    text: "Get started"
+    icon: "rocket"
+    href: "/dashboard"
+  items:
+    - title: "Subscribe"
+      description: "Choose your plan and submit unlimited design requests."
+      icon: "rotate"
+    - title: "Receive"
+      description: "Get your designs delivered in as fast as two business days."
+      icon: "bolt"
+    - title: "Revise"
+      description: "Request unlimited revisions until it's perfect."
+      icon: "thumbs-up"
+
+# Testimonials Section
+testimonials:
+  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!"
+      author: "Sarah Johnson"
+      role: "CEO"
+      company: "TechStart Inc"
+      initial: "S"
+    - quote: "Best investment I've made. Achieved more here than with any consultant."
+      author: "Michael Chen"
+      role: "Founder"
+      company: "DataFlow"
+      initial: "M"
+    - quote: "The community support made all the difference in our growth journey."
+      author: "Emily Davis"
+      role: "Director"
+      company: "Creative Studio"
+      initial: "E"
+
+# Stats Section
+stats:
+  - number: "50,000+"
+    label: "Active users"
+    sublabel: "From 120+ countries"
+    color: "blue"
+  - number: "200+"
+    label: "Solutions"
+    sublabel: "Industry-leading"
+    color: "pink"
+  - number: "4.9"
+    label: "Average rating"
+    color: "yellow"
+  - number: "98%"
+    label: "Success rate"
+    sublabel: "Business growth"
+    color: "green"
+
+# CTA Section
+cta:
+  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"
+    icon: "rocket"
+    href: "/dashboard"
+  secondary_button:
+    text: "Talk to an expert"
+    icon: "comments"
+    href: "/contact"
+---
+
+{% comment %}
+  NEOBRUTALISM HOMEPAGE
+  Reuses the same page.resolved.* data contract as the classy homepage, but with
+  a deliberately different STRUCTURE: an asymmetric split hero, an ink-framed logo
+  marquee, alternating offset showcase blocks, big numbered step blocks, oversized
+  color-block stats, and a full-bleed CTA. Color blocks rotate through the nb accent
+  palette. See docs/themes.md "Per-page HTML layout overrides".
+{% endcomment %}
+
+<!-- ============================================ -->
+<!-- HERO — asymmetric split: oversized headline | offset action stack -->
+<!-- ============================================ -->
+<section class="section-hero text-bg-warning">
+  <div class="container">
+    <div class="row align-items-center g-5">
+      <!-- Left: kicker + giant headline + description -->
+      <div class="col-lg-7">
+        <p class="text-uppercase fw-semibold mb-4">{{ page.resolved.hero.tagline }}</p>
+        <h1 class="hero-title mb-4">
+          {{ page.resolved.hero.headline }}
+          <span class="text-accent">{{ page.resolved.hero.headline_accent }}</span>
+        </h1>
+        <p class="fs-3 fw-medium mb-0" style="max-width: 36ch;">
+          {{ page.resolved.hero.description }}
+        </p>
+      </div>
+
+      <!-- Right: stacked, full-width CTA buttons (d-grid = full-width children) -->
+      <div class="col-lg-5">
+        <div class="d-grid gap-3 hero-actions">
+          <a href="{{ page.resolved.hero.primary_button.href }}" class="btn btn-dark btn-lg">
+            {% 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-light btn-lg">
+            {% uj_icon page.resolved.hero.secondary_button.icon, "me-2" %}{{ page.resolved.hero.secondary_button.text }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============================================ -->
+<!-- TRUSTED BY — ink-framed marquee strip -->
+<!-- ============================================ -->
+<section class="logo-strip">
+  <div class="container">
+    <div class="logo-strip-box">
+      <span class="logo-strip-label">{{ page.resolved.trusted_by.headline }}</span>
+      <div class="infinite-scroll-wrapper">
+        <div class="infinite-scroll-track">
+          {% for logo in page.resolved.trusted_by.logos %}
+            <div class="infinite-scroll-item infinite-scroll-item--logo filter-adaptive">
+              {% uj_logo logo.name, "combomarks", "original" %}
+            </div>
+          {% endfor %}
+          {% comment %} duplicate for seamless loop {% endcomment %}
+          {% for logo in page.resolved.trusted_by.logos %}
+            <div class="infinite-scroll-item infinite-scroll-item--logo filter-adaptive" aria-hidden="true">
+              {% uj_logo logo.name, "combomarks", "original" %}
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============================================ -->
+<!-- SHOWCASE — alternating offset blocks that break the grid -->
+<!-- ============================================ -->
+<section class="showcase">
+  <div class="container">
+    <header class="section-head mb-5">
+      {% iftruthy page.resolved.showcase.superheadline.text %}
+        <span class="kicker mb-3">
+          {% uj_icon page.resolved.showcase.superheadline.icon, "me-1" %}{{ page.resolved.showcase.superheadline.text }}
+        </span>
+      {% endiftruthy %}
+      <h2 class="section-title">
+        {{ page.resolved.showcase.headline }}
+        <span class="text-accent">{{ page.resolved.showcase.headline_accent }}</span>
+      </h2>
+    </header>
+
+    {% assign showcase_bgs = "text-bg-primary,text-bg-secondary,text-bg-success,text-bg-info,text-bg-warning" | split: "," %}
+    <div class="showcase-list">
+      {% for item in page.resolved.showcase.items %}
+        {% assign bg = showcase_bgs[forloop.index0] | default: "text-bg-primary" %}
+        {% comment %} Liquid can't use a filter inside `if`, so compute the parity first {% endcomment %}
+        {% assign row_parity = forloop.index0 | modulo: 2 %}
+        <article class="showcase-row {% if row_parity == 1 %}showcase-row--flip{% endif %}">
+          <div class="showcase-num {{ bg }}">
+            {{ forloop.index | prepend: '0' | slice: -2, 2 }}
+          </div>
+          <div class="showcase-body">
+            <h3 class="showcase-title">{{ item.title }}</h3>
+            <p class="showcase-desc">{{ item.description }}</p>
+          </div>
+        </article>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+
+<!-- ============================================ -->
+<!-- FEATURES — big numbered step cards -->
+<!-- ============================================ -->
+<section class="steps bg-body-tertiary">
+  <div class="container">
+    <header class="section-head mb-5">
+      {% iftruthy page.resolved.features.superheadline.text %}
+        <span class="kicker mb-3">
+          {% uj_icon page.resolved.features.superheadline.icon, "me-1" %}{{ page.resolved.features.superheadline.text }}
+        </span>
+      {% endiftruthy %}
+      <h2 class="section-title">
+        {{ page.resolved.features.headline }}
+        <span class="text-accent">{{ page.resolved.features.headline_accent }}</span>
+      </h2>
+    </header>
+
+    <div class="row g-4">
+      {% for feature in page.resolved.features.items %}
+        <div class="col-md-4">
+          <div class="card step-card h-100">
+            <div class="card-body">
+              <div class="step-card-top">
+                <span class="step-card-num">{{ forloop.index }}</span>
+                <span class="step-card-icon">{% uj_icon feature.icon %}</span>
+              </div>
+              <h3 class="step-card-title">{{ feature.title }}</h3>
+              <p class="step-card-desc">{{ feature.description }}</p>
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+
+    {% iftruthy page.resolved.features.cta_button %}
+      <div class="text-center mt-5">
+        <a href="{{ page.resolved.features.cta_button.href }}" class="btn btn-warning btn-lg">
+          {% uj_icon page.resolved.features.cta_button.icon, "me-2" %}{{ page.resolved.features.cta_button.text }}
+        </a>
+      </div>
+    {% endiftruthy %}
+  </div>
+</section>
+
+<!-- ============================================ -->
+<!-- STATS — oversized color-block cells -->
+<!-- ============================================ -->
+<section class="stats">
+  <div class="container">
+    {% assign stat_bgs = "blue:text-bg-primary,pink:text-bg-secondary,green:text-bg-success,yellow:text-bg-warning,info:text-bg-info" | split: "," %}
+    <div class="stats-grid">
+      {% for stat in page.resolved.stats %}
+        {% assign stat_bg = "text-bg-primary" %}
+        {% case stat.color %}
+          {% when "pink" %}{% assign stat_bg = "text-bg-secondary" %}
+          {% when "green" %}{% assign stat_bg = "text-bg-success" %}
+          {% when "yellow" %}{% assign stat_bg = "text-bg-warning" %}
+          {% when "info" %}{% assign stat_bg = "text-bg-info" %}
+          {% else %}{% assign stat_bg = "text-bg-primary" %}
+        {% endcase %}
+        <div class="stat-block {{ stat_bg }}">
+          <span class="stat-block-num">{{ stat.number }}</span>
+          <span class="stat-block-label">{{ stat.label }}</span>
+          {% iftruthy stat.sublabel %}<span class="stat-block-sub">{{ stat.sublabel }}</span>{% endiftruthy %}
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+
+{% include themes/neobrutalism/frontend/components/testimonial-scroll.html testimonials=page.resolved.testimonials %}
+
+<!-- ============================================ -->
+<!-- CTA — full-bleed ink block -->
+<!-- ============================================ -->
+<section class="cta">
+  <div class="container">
+    <div class="cta-panel">
+      {% iftruthy page.resolved.cta.superheadline.text %}
+        <span class="kicker kicker--invert mb-4">
+          {% uj_icon page.resolved.cta.superheadline.icon, "me-1" %}{{ page.resolved.cta.superheadline.text }}
+        </span>
+      {% endiftruthy %}
+      <h2 class="cta-title">
+        {{ page.resolved.cta.headline }}
+        <span class="text-accent">{{ page.resolved.cta.headline_accent }}</span>
+      </h2>
+      <p class="cta-desc">{{ page.resolved.cta.description }}</p>
+      <div class="d-flex flex-wrap gap-3 justify-content-center">
+        <a href="{{ page.resolved.cta.primary_button.href }}" class="btn btn-warning btn-lg">
+          {% 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">
+            {% uj_icon page.resolved.cta.secondary_button.icon, "me-2" %}{{ page.resolved.cta.secondary_button.text }}
+          </a>
+        {% endiftruthy %}
+      </div>
+    </div>
+  </div>
+</section>
+
+{{ content | uj_content_format }}