---
### ALL PAGES ###
layout: themes/[ site.theme.id ]/frontend/core/cover

### PAGE CONFIG ###
# Hero Section
hero:
  headline: "Extension installed,"
  headline_accent: "now let's pin it!"
  description: ""

# Steps
steps:
  - title: "Click the puzzle piece"
    description: "Find the Extensions icon in your browser toolbar"
  - title: "Pin the extension"
    description: "Click the pin icon to keep it visible in your toolbar"
  - title: "You're all set!"
    description: "{{ site.brand.name }} is now pinned and ready to use"
---

<!-- Main content -->
<section class="col-12 col-md-10 col-lg-8 col-xl-7">
  <div class="card border-0 shadow-lg">
    <div class="card-body p-4 p-md-5">
      <!-- Success Icon -->
      <div class="text-center mb-4" data-lazy="@class animation-slide-up">
        <div class="extension-success-icon bg-success avatar avatar-xl rounded-circle d-inline-flex align-items-center justify-content-center">
          {% uj_icon "check", "fs-2 text-light" %}
        </div>
      </div>

      <!-- Headline -->
      <div class="text-center mb-5" data-lazy="@class animation-slide-up">
        <h1 class="h2 fw-bold mb-3">
          {{ page.resolved.hero.headline }}
          <span class="text-gradient-rainbow">{{ page.resolved.hero.headline_accent }}</span>
        </h1>
      </div>

      <!-- Steps Slideshow -->
      <div class="steps-slideshow">
        <div class="steps-slideshow-slides">
        <!-- Step 1: Click puzzle piece -->
        <div class="step-slide" data-step="1">
          <div class="step-number-badge">1</div>
            <h5 class="step-title">{{ page.resolved.steps[0].title }}</h5>
          <p class="text-muted mb-3">{{ page.resolved.steps[0].description }}</p>
          <div class="instruction-step-container bg-body-tertiary rounded-4 p-4 d-flex align-items-center justify-content-center position-relative">
            <div class="extension-visual">
              <div class="extension-toolbar d-flex align-items-center justify-content-end gap-2 bg-body rounded-3 p-2 border">
                <!-- Mock URL bar -->
                <div class="extension-url-bar flex-grow-1 bg-body-secondary rounded px-3 py-1 small text-muted me-2 text-truncate">
                  {{ site.url }}
                </div>
                <!-- Extension icons -->
                <button type="button" class="btn btn-sm btn-secondary opacity-50" disabled>
                  {% uj_icon "shield", "fa-sm" %}
                </button>
                <button type="button" class="btn btn-sm btn-secondary opacity-50" disabled>
                  {% uj_icon "bookmark", "fa-sm" %}
                </button>
                <!-- Puzzle piece - highlighted -->
                <div class="extension-puzzle-target position-relative">
                  <button type="button" class="btn btn-sm btn-primary">
                    {% uj_icon "puzzle-piece", "fa-sm" %}
                  </button>
                  <div class="click-indicator position-absolute top-50 start-50">
                    <div class="click-pulse position-absolute border border-3 border-primary rounded-circle"></div>
                    <div class="pointer-icon">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
                        <path fill="#E0E0E0" d="M27.8,39.7c-0.1,0-0.2,0-0.4-0.1c-0.2-0.1-0.4-0.3-0.6-0.5l-3.7-8.6l-4.5,4.2C18.5,34.9,18.3,35,18,35c-0.1,0-0.3,0-0.4-0.1C17.3,34.8,17,34.4,17,34l0-22c0-0.4,0.2-0.8,0.6-0.9C17.7,11,17.9,11,18,11c0.2,0,0.5,0.1,0.7,0.3l16,15c0.3,0.3,0.4,0.7,0.3,1.1c-0.1,0.4-0.5,0.6-0.9,0.7l-6.3,0.6l3.9,8.5c0.1,0.2,0.1,0.5,0,0.8c-0.1,0.2-0.3,0.5-0.5,0.6l-2.9,1.3C28.1,39.7,27.9,39.7,27.8,39.7z"/>
                        <path fill="#212121" d="M18,12l16,15l-7.7,0.7l4.5,9.8l-2.9,1.3l-4.3-9.9L18,34L18,12 M18,10c-0.3,0-0.5,0.1-0.8,0.2c-0.7,0.3-1.2,1-1.2,1.8l0,22c0,0.8,0.5,1.5,1.2,1.8C17.5,36,17.8,36,18,36c0.5,0,1-0.2,1.4-0.5l3.4-3.2l3.1,7.3c0.2,0.5,0.6,0.9,1.1,1.1c0.2,0.1,0.5,0.1,0.7,0.1c0.3,0,0.5-0.1,0.8-0.2l2.9-1.3c0.5-0.2,0.9-0.6,1.1-1.1c0.2-0.5,0.2-1.1,0-1.5l-3.3-7.2l4.9-0.4c0.8-0.1,1.5-0.6,1.7-1.3c0.3-0.7,0.1-1.6-0.5-2.1l-16-15C19,10.2,18.5,10,18,10L18,10z"/>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Step 2: Pin the extension -->
        <div class="step-slide" data-step="2">
          <div class="step-number-badge">2</div>
            <h5 class="step-title">{{ page.resolved.steps[1].title }}</h5>
          <p class="text-muted mb-3">{{ page.resolved.steps[1].description }}</p>
          <div class="instruction-step-container bg-body-tertiary rounded-4 p-4 d-flex align-items-center justify-content-center position-relative">
            <div class="extension-visual">
              <div class="extension-dropdown bg-body rounded-3 border shadow-sm mx-auto">
                <!-- Dropdown header -->
                <div class="extension-dropdown-header d-flex align-items-center justify-content-between p-2 border-bottom bg-body-secondary">
                  <span class="small fw-bold">Extensions</span>
                  <button type="button" class="btn btn-sm p-0 opacity-50" disabled>
                    {% uj_icon "gear", "fa-sm" %}
                  </button>
                </div>
                <!-- Extension list -->
                <div class="extension-dropdown-list p-2">
                  <!-- Other extension (dimmed) -->
                  <div class="extension-dropdown-item d-flex align-items-center gap-3 p-2 rounded opacity-50">
                    <div class="extension-item-icon bg-body-secondary rounded p-1 d-flex align-items-center justify-content-center">
                      {% uj_icon "shield", "fa-xs" %}
                    </div>
                    <span class="small flex-grow-1">AdBlocker</span>
                    <button type="button" class="btn btn-sm p-1" disabled>
                      {% uj_icon "thumbtack", "fa-xs text-muted" %}
                    </button>
                  </div>
                  <!-- Our extension (highlighted with pin click) -->
                  <div class="extension-dropdown-item d-flex align-items-center gap-3 p-2 rounded bg-primary bg-opacity-10 border border-primary">
                    <div class="extension-item-icon rounded p-1 d-flex align-items-center justify-content-center">
                      <img src="{{ site.uj.placeholder.src }}" data-lazy="@src {{ site.brand.images.brandmark }}" class="extension-brandmark" alt="{{ site.brand.name }}"/>
                    </div>
                    <span class="small flex-grow-1 fw-bold">{{ site.brand.name }}</span>
                    <!-- Pin button - highlighted with click animation -->
                    <div class="extension-pin-target position-relative">
                      <button type="button" class="btn btn-sm btn-primary p-1">
                        {% uj_icon "thumbtack", "fa-xs" %}
                      </button>
                      <div class="click-indicator position-absolute top-50 start-50">
                        <div class="click-pulse position-absolute border border-3 border-primary rounded-circle"></div>
                        <div class="pointer-icon">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
                            <path fill="#E0E0E0" d="M27.8,39.7c-0.1,0-0.2,0-0.4-0.1c-0.2-0.1-0.4-0.3-0.6-0.5l-3.7-8.6l-4.5,4.2C18.5,34.9,18.3,35,18,35c-0.1,0-0.3,0-0.4-0.1C17.3,34.8,17,34.4,17,34l0-22c0-0.4,0.2-0.8,0.6-0.9C17.7,11,17.9,11,18,11c0.2,0,0.5,0.1,0.7,0.3l16,15c0.3,0.3,0.4,0.7,0.3,1.1c-0.1,0.4-0.5,0.6-0.9,0.7l-6.3,0.6l3.9,8.5c0.1,0.2,0.1,0.5,0,0.8c-0.1,0.2-0.3,0.5-0.5,0.6l-2.9,1.3C28.1,39.7,27.9,39.7,27.8,39.7z"/>
                            <path fill="#212121" d="M18,12l16,15l-7.7,0.7l4.5,9.8l-2.9,1.3l-4.3-9.9L18,34L18,12 M18,10c-0.3,0-0.5,0.1-0.8,0.2c-0.7,0.3-1.2,1-1.2,1.8l0,22c0,0.8,0.5,1.5,1.2,1.8C17.5,36,17.8,36,18,36c0.5,0,1-0.2,1.4-0.5l3.4-3.2l3.1,7.3c0.2,0.5,0.6,0.9,1.1,1.1c0.2,0.1,0.5,0.1,0.7,0.1c0.3,0,0.5-0.1,0.8-0.2l2.9-1.3c0.5-0.2,0.9-0.6,1.1-1.1c0.2-0.5,0.2-1.1,0-1.5l-3.3-7.2l4.9-0.4c0.8-0.1,1.5-0.6,1.7-1.3c0.3-0.7,0.1-1.6-0.5-2.1l-16-15C19,10.2,18.5,10,18,10L18,10z"/>
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Step 3: All set -->
        <div class="step-slide" data-step="3">
          <div class="step-number-badge">3</div>
            <h5 class="step-title">{{ page.resolved.steps[2].title }}</h5>
          <p class="text-muted mb-3">{{ page.resolved.steps[2].description }}</p>
          <div class="instruction-step-container bg-body-tertiary rounded-4 p-4 d-flex align-items-center justify-content-center position-relative">
            <div class="extension-visual">
              <div class="extension-toolbar d-flex align-items-center justify-content-end gap-2 bg-body rounded-3 p-2 border">
                <!-- Mock URL bar -->
                <div class="extension-url-bar flex-grow-1 bg-body-secondary rounded px-3 py-1 small text-muted me-2 text-truncate">
                  {{ site.url }}
                </div>
                <!-- Extension icons -->
                <button type="button" class="btn btn-sm btn-secondary opacity-50" disabled>
                  {% uj_icon "shield", "fa-sm" %}
                </button>
                <button type="button" class="btn btn-sm btn-secondary opacity-50" disabled>
                  {% uj_icon "bookmark", "fa-sm" %}
                </button>
                <!-- Our extension - now pinned! -->
                <div class="extension-pinned-target position-relative">
                  <button type="button" class="btn btn-sm btn-primary animation-flex">
                    <img src="{{ site.uj.placeholder.src }}" data-lazy="@src {{ site.brand.images.brandmark }}" class="extension-toolbar-brandmark" alt="{{ site.brand.name }}"/>
                  </button>
                </div>
                <button type="button" class="btn btn-sm btn-secondary opacity-50" disabled>
                  {% uj_icon "puzzle-piece", "fa-sm" %}
                </button>
              </div>
            </div>
          </div>
        </div>

        </div>

        <!-- Slideshow Navigation -->
        <div class="steps-slideshow-nav">
          <button type="button" class="btn btn-outline-adaptive btn-sm step-prev" disabled>
            {% uj_icon "chevron-left", "me-1" %} Back
          </button>
          <div class="steps-dots"></div>
          <button type="button" class="btn btn-primary btn-sm step-next">
            <span class="button-text">Next</span> {% uj_icon "chevron-right", "ms-1" %}
          </button>
        </div>
      </div>

      <!-- CTA Button -->
      <div class="text-center mt-4" data-lazy="@class animation-slide-up">
        <a href="/" class="btn btn-primary btn-lg px-5">
          {% uj_icon "arrow-right", "me-2" %}
          Start using {{ site.brand.name }}
        </a>
      </div>
    </div>
  </div>
</section>

{{ content | uj_content_format }}