---
### ALL PAGES ###
layout: blueprint/index
permalink: /test/components/hero-demo-custom

### PAGE CONFIG ###
asset_path: index
sitemap:
  include: false
meta:
  title: "Hero Demo: Custom Type"
  description: "Test page demonstrating the custom hero demo type"
  index: false

# Hero Section
hero:
  tagline: "Custom demo"
  headline: "Design your"
  headline_accent: "brand"
  description: "Try our interactive brand builder right here"
  demo:
    enabled: true
    type: "custom"
    placement: "bottom"
    options:
      class: "bg-glassy rounded-4 p-4 mw-md"
      subtext: "Customize and preview in real-time"
      content: |
        <div class="row g-3 text-start">
          <div class="col-12">
            <label for="color-picker" class="form-label fw-bold">{% uj_icon "palette", "me-1" %}Choose your brand color:</label>
            <input type="color" class="form-control form-control-color form-control-lg border-0 w-100" id="color-picker" value="#6366f1" aria-label="Choose your brand color">
          </div>
          <div class="col-12">
            <label for="style-select" class="form-label fw-bold">{% uj_icon "swatchbook", "me-1" %}Select style:</label>
            <select class="form-select form-select-lg border-0" id="style-select" aria-label="Select style">
              <option value="modern">Modern</option>
              <option value="classic">Classic</option>
              <option value="minimal">Minimal</option>
              <option value="bold">Bold</option>
            </select>
          </div>
          <div class="col-12">
            <a href="/dashboard" class="btn btn-adaptive-inverse btn-lg px-4 w-100">
              {% uj_icon "palette", "me-2" %}
              Apply Theme
            </a>
          </div>
        </div>
  primary_button:
    text: "Get started free"
    icon: "rocket"
    href: "/dashboard"
    class: "btn-light"
  secondary_button:
    text: "Explore solutions"
    icon: "book-open"
    href: "/pricing"
    class: "btn-outline-light"
---