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