---
### 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 <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: "See pricing"
    icon: "book-open"
    href: "/pricing"
    class: "btn-outline-light"
  badge:
    title: "Industry leader"
    subtitle: "2024 award"
    icon: "trophy"

# Trusted By Section
trusted_by:
  headline: "Trusted by the best"
  logos:
    # - name: "airbnb"
    - name: "amazon"
    - name: "google"
    - name: "hubspot"
    - name: "paypal"
    # - name: "netflix"
    # - name: "spotify"
    - name: "slack"
    - name: "shopify"
    - name: "stripe"
    # - name: "uber"

# Product Demo Section
product_demo:
  superheadline:
    icon: "rocket"
    text: "Demo"
  headline: "See {{ site.brand.name }} in"
  headline_accent: "action"
  subheadline: "Explore powerful features that help you succeed"
  tabs:
    - id: "dashboard"
      label: "Dashboard"
      icon: "gauge-high"
      video: "https://cdn.itwcreativeworks.com/assets/sample/videos/demos/16x9/sample-demo-1.webm"
      features:
        - "Easy setup"
        - "Powerful tools"
        - "Fast performance"
        - "Real-time updates"
        - "Simple interface"
    - id: "analytics"
      label: "Analytics"
      icon: "chart-line"
      video: "https://cdn.itwcreativeworks.com/assets/sample/videos/demos/16x9/sample-demo-2.webm"
      features:
        - "Advanced analytics"
        - "Custom reports"
        - "Data insights"
        - "Export options"
        - "Team collaboration"
    - id: "security"
      label: "Security"
      icon: "shield-halved"
      video: "https://cdn.itwcreativeworks.com/assets/sample/videos/demos/16x9/sample-demo-3.webm"
      features:
        - "Enterprise security"
        - "Access control"
        - "Audit trails"
        - "Compliance tools"
        - "Data protection"

# 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"
      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"
      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"
      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:
    icon: "sparkles"
    text: "Features"
  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"
    icon: "users"
    color: "primary"
  - number: "200+"
    label: "Solutions"
    sublabel: "Industry-leading"
    icon: "book"
    color: "success"
  - number: "4.9"
    label: "Average rating"
    icon: "star"
    color: "warning"
    show_stars: true
  - number: "98%"
    label: "Success rate"
    sublabel: "Business growth"
    icon: "certificate"
    color: "info"

# 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"

---

<!-- 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 %} onsubmit="return false">
          <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 %} onsubmit="return false">
        <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" %}
  {% assign show_primary = page.resolved.hero.primary_button.enabled %}
  {% assign show_secondary = page.resolved.hero.secondary_button.enabled %}
  {% if show_primary == nil %}{% assign show_primary = true %}{% endif %}
  {% if show_secondary == nil %}{% assign show_secondary = true %}{% endif %}
  {% if show_primary or show_secondary %}
    <div class="d-flex flex-row flex-wrap gap-3 justify-content-center {% if is_side_layout %}justify-content-lg-start{% endif %}">
      {% if show_primary %}
        <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>
      {% endif %}
      {% if show_secondary %}
        <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>
      {% endif %}
    </div>
  {% endif %}
{% 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 {% 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>

          <h1 class="h1 fw-900 mb-4">
            {{ page.resolved.hero.headline }} <span class="text-accent">{{ page.resolved.hero.headline_accent }}</span>
          </h1>

          <p class="fs-4 mb-4 opacity-80">
            {{ page.resolved.hero.description }}
          </p>

          {% 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>

<!-- Trusted By Section -->
<section class="overflow-hidden pt-7">
  <div class="container-fluid px-0">
    <div class="text-center mb-3" data-lazy="@class animation-slide-up">
      <h3 class="fs-4">{{ page.resolved.trusted_by.headline }}</h3>
    </div>

    <div class="infinite-scroll-wrapper" data-lazy="@class animation-slide-up">
      <div class="infinite-scroll-track">
        {% for logo in page.resolved.trusted_by.logos %}
          <div class="infinite-scroll-item infinite-scroll-item--logo filter-adaptive hover-opacity">
            {% uj_logo logo.name, "combomarks", "original" %}
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>

<!-- Product Demo Section -->
<section>
  <div class="container">
    <div class="text-center mb-5" data-lazy="@class animation-slide-up">
      {% 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">
        {{ page.resolved.product_demo.headline }}
        <span class="text-accent">{{ page.resolved.product_demo.headline_accent }}</span>
      </h2>
      <p class="fs-5 text-muted">{{ page.resolved.product_demo.subheadline }}</p>
    </div>

    <!-- Tab Buttons -->
    <div class="d-flex flex-wrap justify-content-center gap-2 gap-sm-3 mb-4" data-lazy="@class animation-slide-up">
      <ul class="nav nav-pills gap-2 gap-sm-3 border-0 w-100 justify-content-center" role="tablist">
        {% for tab in page.resolved.product_demo.tabs %}
          <li class="nav-item" role="presentation">
            <button
              class="btn btn-lg btn-outline-adaptive w-100 {% if forloop.first %}active{% endif %}"
              id="{{ tab.id }}-tab"
              data-bs-toggle="tab"
              data-bs-target="#{{ tab.id }}-pane"
              type="button"
              role="tab"
              aria-controls="{{ tab.id }}-pane"
              aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
            >
              {% iftruthy tab.icon %}
                {% uj_icon tab.icon, "me-2" %}
              {% endiftruthy %}
              {{ tab.label }}
            </button>
          </li>
        {% endfor %}
      </ul>
    </div>

    <!-- Tab Content -->
    <div class="tab-content" data-lazy="@class animation-slide-up">
      {% for tab in page.resolved.product_demo.tabs %}
        <div
          class="tab-pane fade {% if forloop.first %}show active{% endif %}"
          id="{{ tab.id }}-pane"
          role="tabpanel"
          aria-labelledby="{{ tab.id }}-tab"
          tabindex="0"
        >
          <!-- Feature Checkmarks -->
          <div class="d-flex flex-wrap justify-content-center gap-3 gap-md-4 mb-4">
            {% for feature in tab.features %}
              <div class="d-flex align-items-center">
                {% uj_icon "check", "text-success me-2" %}
                <span class="text-body">{{ feature }}</span>
              </div>
            {% endfor %}
          </div>

          <!-- Video Player -->
          <div class="card border-gradient-rainbow shadow-lg rounded">
            <div class="ratio ratio-16x9">
              {% uj_video tab.video, class="w-100 d-block object-fit-cover rounded border-0", style="", controls="false", loop="true", autoplay="true", playsinline="true", muted="true", preload="metadata" %}
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</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.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.showcase.headline }}
        <span class="text-accent">{{ page.resolved.showcase.headline_accent }}</span>
      </h2>
      <p class="fs-5 text-muted">{{ page.resolved.showcase.subheadline }}</p>
    </div>

    {% for item in page.resolved.showcase.items %}
      {% assign is_even = forloop.index | modulo: 2 %}

      <!-- Set classes based on position -->
      {% if is_even == 0 %}
        {% assign image_col_class = "col-lg-6 order-lg-2" %}
        {% assign text_col_class = "col-lg-6 order-lg-1 pe-lg-5" %}
      {% else %}
        {% assign image_col_class = "col-lg-6" %}
        {% assign text_col_class = "col-lg-6 ps-lg-5" %}
      {% endif %}

      <!-- Common content -->
      {% capture image_content %}
        {% 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>
      {% endcapture %}

      {% capture text_content %}
        <h3 class="h2 mb-4">{{ item.title }}</h3>
        <p class="fs-5 text-muted mb-0">{{ item.description }}</p>
      {% endcapture %}

      <div class="row align-items-center g-3 g-lg-5 {% unless forloop.last %} mb-5 pb-5 {% endunless %}">
        <div class="{{ image_col_class }}" data-lazy="@class animation-slide-up">
          {{ image_content }}
        </div>
        <div class="{{ text_col_class }}" data-lazy="@class animation-slide-up">
          {{ text_content }}
        </div>
      </div>
    {% endfor %}
  </div>
</section>

<!-- Features Section -->
<section>
  <div class="container">
    <div class="text-center mb-5" data-lazy="@class animation-slide-up">
      {% 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 }}
        {% iftruthy page.resolved.features.headline_accent %}
          <span class="text-accent">{{ page.resolved.features.headline_accent }}</span>
        {% endiftruthy %}
      </h2>
      {% iftruthy page.resolved.features.subheadline %}
        <p class="fs-5 text-muted">{{ page.resolved.features.subheadline }}</p>
      {% endiftruthy %}
    </div>

    <div class="row g-4">
      {% for feature in page.resolved.features.items %}
        <div class="col-lg-4 col-md-6" data-lazy="@class animation-slide-up">
          <div class="text-center">
            <div class="mb-4">
              {% uj_icon feature.icon, "display-4" %}
            </div>
            <h3 class="h3 mb-3 fw-bold">{{ feature.title }}</h3>
            <p class="text-muted mb-0">{{ feature.description }}</p>
          </div>
        </div>
      {% endfor %}
    </div>

    {% iftruthy page.resolved.features.cta_button %}
      <div class="text-center mt-5" data-lazy="@class animation-slide-up">
        <a href="{{ page.resolved.features.cta_button.href }}" class="btn btn-primary btn-lg px-5 py-3">
          {% iftruthy page.resolved.features.cta_button.icon %}
            {% uj_icon page.resolved.features.cta_button.icon, "me-2" %}
          {% endiftruthy %}
          {{ page.resolved.features.cta_button.text }}
        </a>
      </div>
    {% endiftruthy %}
  </div>
</section>

{% include themes/classy/frontend/components/testimonial-scroll.html testimonials=page.resolved.testimonials %}

<!-- Stats Section -->
<section>
  <div class="container">
    <div class="row text-center g-4">
      {% for stat in page.resolved.stats %}
        <div class="col-lg-3 col-md-6" data-lazy="@class animation-slide-up">
          <div class="mb-3">
            {% uj_icon stat.icon, "text-{{ stat.color }} display-4" %}
          </div>
          <h3 class="display-5 fw-bold mb-2">{{ stat.number }}</h3>
          {% iftruthy stat.show_stars %}
            <div class="mb-0">
              {% for i in (1..5) %}
                {% uj_icon "star", "text-{{ stat.color }}" %}
              {% endfor %}
            </div>
          {% endiftruthy %}
          <p class="text-muted mb-0">{{ stat.label }}</p>
          {% iftruthy stat.sublabel %}
            <p class="small text-muted">{{ stat.sublabel }}</p>
          {% endiftruthy %}
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- CTA Section -->
<section>
  <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 "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>
          {% 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>
          {% endiftruthy %}
        </div>
      </div>
    </div>
  </div>
</section>

{{ content | uj_content_format }}