ultimate-jekyll-manager 0.0.144 → 0.0.146

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/extension/index.html

@@ -0,0 +1,434 @@
+---
+### ALL PAGES ###
+layout: themes/[ site.theme.id ]/frontend/core/base
+
+### PAGE CONFIG ###
+# Hero Section
+hero:
+  headline: "{{ site.brand.name }}"
+  headline_accent: "browser extension"
+  description: "Unlock the full potential of {{ site.brand.name }} right in your browser"
+
+# Downloads Section
+downloads:
+  superheadline:
+    icon: "puzzle-piece"
+    text: "Install"
+  headline: "Available on every"
+  headline_accent: "browser"
+  subheadline: "Choose your browser below to get started"
+  loading:
+    headline: "Detecting Browser"
+    description: "Determining your browser..."
+    button_text: "Please Wait"
+  not_available:
+    headline: "Not Available Yet"
+    description: "The {{ site.brand.name }} extension is not currently available for this browser."
+  browsers:
+    - id: "chrome"
+      name: "Chrome"
+      icon: "chrome"
+      description: "Chrome 88+"
+    - id: "firefox"
+      name: "Firefox"
+      icon: "firefox-browser"
+      description: "Firefox 78+"
+    - id: "edge"
+      name: "Edge"
+      icon: "edge"
+      description: "Edge 88+"
+    - id: "opera"
+      name: "Opera"
+      icon: "opera"
+      description: "Opera 74+"
+    - id: "safari"
+      name: "Safari"
+      icon: "safari"
+      description: "Safari 14+"
+
+# Features Section
+features:
+  superheadline:
+    icon: "star"
+    text: "Benefits"
+  headline: "Why you should"
+  headline_accent: "install"
+  subheadline: "Everything you need, right in your browser"
+  items:
+    - title: "Quick Access"
+      description: "Access {{ site.brand.name }} features with just one click"
+      icon: "bolt"
+    - title: "Seamless Integration"
+      description: "Works naturally with your browsing workflow"
+      icon: "link"
+    - title: "Real-Time Updates"
+      description: "Get instant notifications and alerts"
+      icon: "bell"
+    - title: "Secure & Private"
+      description: "Your data stays safe with enterprise-grade encryption"
+      icon: "shield-check"
+
+# FAQ Section
+faqs:
+  superheadline:
+    icon: "messages-question"
+    text: "FAQs"
+  headline: "Frequently asked"
+  headline_accent: "questions"
+  subheadline: "Everything you need to know about the {{ site.brand.name }} browser extension."
+  items:
+    - question: "Is the extension free?"
+      answer: "Yes! The {{ site.brand.name }} browser extension is completely free to download and use."
+    - question: "Which browsers are supported?"
+      answer: "The extension is available for Chrome, Firefox, Edge, Opera, and Safari."
+    - question: "How do I pin the extension?"
+      answer: "After installing, click the puzzle piece icon in your browser toolbar, then click the pin icon next to {{ site.brand.name }}."
+    - question: "Is my data secure?"
+      answer: "Absolutely. We use enterprise-grade encryption to protect your data. The extension only accesses what it needs to function."
+
+# CTA Section
+cta:
+  superheadline:
+    icon: "comments"
+    text: "Support"
+  headline: "Need help with"
+  headline_accent: "installation?"
+  subheadline: "Our support team is here 24/7 to help you get set up"
+  primary_button:
+    text: "Contact Support"
+    icon: "headset"
+    href: "/contact"
+---
+
+<!-- Hero Section -->
+<section>
+  <div class="container">
+    <div class="row justify-content-center text-center">
+      <div class="col-lg-10" data-lazy="@class animation-slide-up">
+        <h1 class="h1 mb-3">
+          {{ page.resolved.hero.headline }}
+          <span class="text-gradient-rainbow">{{ page.resolved.hero.headline_accent }}</span>
+        </h1>
+        <p class="fs-5 text-muted mb-0">
+          {{ page.resolved.hero.description }}
+        </p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Downloads Section -->
+<section class="pt-0">
+  <div class="container">
+    <div class="text-center mb-5" data-lazy="@class animation-slide-up">
+      {% iftruthy page.resolved.downloads.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.downloads.superheadline.icon %}
+            {% uj_icon page.resolved.downloads.superheadline.icon, "me-1" %}
+          {% endiftruthy %}
+          {{ page.resolved.downloads.superheadline.text }}
+        </span>
+      {% endiftruthy %}
+      <h2 class="h2 mb-2">
+        {{ page.resolved.downloads.headline }}
+        {% iftruthy page.resolved.downloads.headline_accent %}
+          <span class="text-accent">{{ page.resolved.downloads.headline_accent }}</span>
+        {% endiftruthy %}
+      </h2>
+      {% iftruthy page.resolved.downloads.subheadline %}
+        <p class="fs-5 text-muted">{{ page.resolved.downloads.subheadline }}</p>
+      {% endiftruthy %}
+    </div>
+
+    <!-- Browser Selector -->
+    <div class="row justify-content-center mb-5">
+      <div class="col-12">
+        <div class="d-flex flex-wrap justify-content-center gap-3" data-lazy="@class animation-slide-up">
+          <ul class="nav nav-pills gap-3 border-0 justify-content-center w-100" id="browser-selector" role="tablist">
+            <!-- Loading tab (shown by default until browser is detected) -->
+            <li class="nav-item d-none" role="presentation" data-browser="loading">
+              <button
+                class="btn btn-outline-adaptive btn-lg active d-flex align-items-center justify-content-center"
+                id="loading-tab"
+                data-bs-toggle="tab"
+                data-bs-target="#loading-pane"
+                type="button"
+                role="tab"
+                aria-controls="loading-pane"
+                aria-selected="true"
+              >
+                <div class="spinner-border spinner-border-sm me-2" role="status">
+                  <span class="visually-hidden">Loading...</span>
+                </div>
+                Detecting...
+              </button>
+            </li>
+
+            {% for browser in page.resolved.downloads.browsers %}
+              {% assign has_download = false %}
+              {% assign config_url = site.extension[browser.id] %}
+              {% iftruthy config_url %}
+                {% assign has_download = true %}
+              {% endiftruthy %}
+
+              <li class="nav-item flex-fill flex-sm-grow-0" role="presentation">
+                <button
+                  class="btn btn-outline-adaptive btn-lg browser-btn d-flex align-items-center justify-content-center w-100"
+                  id="{{ browser.id }}-tab"
+                  data-bs-toggle="tab"
+                  data-bs-target="#{{ browser.id }}-pane"
+                  data-browser="{{ browser.id }}"
+                  data-has-download="{% if has_download %}true{% else %}false{% endif %}"
+                  type="button"
+                  role="tab"
+                  aria-controls="{{ browser.id }}-pane"
+                  aria-selected="false"
+                >
+                  {% uj_icon browser.icon, "fa-3xl me-2" %}
+                  {{ browser.name }}
+                </button>
+              </li>
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <!-- Download Cards -->
+    <div class="row justify-content-center">
+      <div class="col-lg-10">
+        <div class="tab-content">
+          <!-- Loading Browser Card -->
+          <div
+            class="tab-pane fade show active"
+            id="loading-pane"
+            role="tabpanel"
+            aria-labelledby="loading-tab"
+            tabindex="0"
+          >
+            <div class="card border-0 shadow-lg">
+              <div class="card-body p-5 text-center">
+                <div class="mb-4">
+                  <div class="avatar avatar-2xl rounded-circle bg-primary d-inline-flex align-items-center justify-content-center">
+                    <div class="spinner-border text-light" role="status">
+                      <span class="visually-hidden">Loading...</span>
+                    </div>
+                  </div>
+                </div>
+                <h2 class="h2 mb-1">{{ page.resolved.downloads.loading.headline }}</h2>
+                <p class="text-muted fs-5 mb-4">{{ page.resolved.downloads.loading.description }}</p>
+
+                <div class="d-flex flex-column gap-3">
+                  <button type="button" class="btn btn-primary btn-lg d-flex align-items-center justify-content-center" disabled>
+                    {% uj_icon "puzzle-piece", "fa-3xl me-2" %}
+                    {{ page.resolved.downloads.loading.button_text }}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {% for browser in page.resolved.downloads.browsers %}
+            {% assign has_download = false %}
+            {% assign config_url = site.extension[browser.id] %}
+            {% iftruthy config_url %}
+              {% assign has_download = true %}
+            {% endiftruthy %}
+
+            <div
+              class="tab-pane fade"
+              id="{{ browser.id }}-pane"
+              role="tabpanel"
+              aria-labelledby="{{ browser.id }}-tab"
+              tabindex="0"
+              data-browser="{{ browser.id }}"
+              data-has-download="{% if has_download %}true{% else %}false{% endif %}"
+            >
+              <div class="card border-0 shadow-lg">
+                <div class="card-body p-5 text-center">
+                  <div class="mb-4">
+                    <div class="avatar avatar-2xl rounded-circle bg-primary d-inline-flex align-items-center justify-content-center">
+                      {% uj_icon browser.icon, "display-4 text-light" %}
+                    </div>
+                  </div>
+                  <h2 class="h2 mb-1">{{ browser.name }}</h2>
+                  <p class="text-muted fs-5 mb-4">{{ browser.description }}</p>
+
+                  {% unless has_download %}
+                    <div class="alert alert-warning d-flex align-items-center mb-4" role="alert">
+                      {% uj_icon "triangle-exclamation", "fs-4 me-3" %}
+                      <div class="text-start">
+                        <h6 class="mb-0">{{ page.resolved.downloads.not_available.headline }}</h6>
+                        <small>{{ page.resolved.downloads.not_available.description }}</small>
+                      </div>
+                    </div>
+                  {% endunless %}
+
+                  {% if has_download %}
+                    <div class="d-flex flex-column gap-3">
+                      <a
+                        href="{{ config_url }}"
+                        class="btn btn-primary btn-lg d-flex align-items-center justify-content-center"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {% uj_icon "puzzle-piece", "fa-3xl me-2" %}
+                        Add to {{ browser.name }}
+                      </a>
+                    </div>
+                  {% else %}
+                    <div class="d-flex flex-column gap-3">
+                      <button
+                        type="button"
+                        class="btn btn-primary btn-lg d-flex align-items-center justify-content-center"
+                        disabled
+                      >
+                        {% uj_icon "puzzle-piece", "fa-3xl me-2" %}
+                        Coming Soon
+                      </button>
+                    </div>
+                  {% endif %}
+                </div>
+              </div>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </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 justify-content-center">
+      {% for feature in page.resolved.features.items %}
+        <div class="col-lg-3 col-md-6" data-lazy="@class animation-slide-up">
+          <div class="card h-100 border-0 shadow-sm text-center">
+            <div class="card-body p-4">
+              <div class="bg-primary avatar avatar-xl rounded-circle d-inline-flex align-items-center justify-content-center mb-3">
+                {% uj_icon feature.icon, "text-light fs-2" %}
+              </div>
+              <h4 class="mb-3">{{ feature.title }}</h4>
+              <p class="text-muted mb-0">{{ feature.description }}</p>
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+
+<!-- FAQ Section -->
+<section>
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-lg-8">
+        <div class="text-center mb-5" data-lazy="@class animation-slide-up">
+          {% iftruthy page.resolved.faqs.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.faqs.superheadline.icon %}
+                {% uj_icon page.resolved.faqs.superheadline.icon, "me-1" %}
+              {% endiftruthy %}
+              {{ page.resolved.faqs.superheadline.text }}
+            </span>
+          {% endiftruthy %}
+          <h2 class="h2 mb-2">
+            {{ page.resolved.faqs.headline }}
+            {% iftruthy page.resolved.faqs.headline_accent %}
+              <span class="text-accent">{{ page.resolved.faqs.headline_accent }}</span>
+            {% endiftruthy %}
+          </h2>
+          {% iftruthy page.resolved.faqs.subheadline %}
+            <p class="fs-5 text-muted">{{ page.resolved.faqs.subheadline }}</p>
+          {% endiftruthy %}
+        </div>
+
+        <div class="accordion" id="extensionFaqAccordion" data-lazy="@class animation-slide-up">
+          {% for faq in page.resolved.faqs.items %}
+            <div class="accordion-item border-0 mb-3">
+              <h2 class="accordion-header">
+                <button class="accordion-button collapsed py-4 shadow-sm" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ forloop.index }}" aria-expanded="false" aria-controls="faq{{ forloop.index }}">
+                  <span class="fw-semibold">{{ faq.question }}</span>
+                </button>
+              </h2>
+              <div id="faq{{ forloop.index }}" class="accordion-collapse collapse" data-bs-parent="#extensionFaqAccordion">
+                <div class="accordion-body text-muted shadow-sm">
+                  {{ faq.answer }}
+                </div>
+              </div>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    </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 "puzzle-piece", "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 "shield-check", "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.subheadline %}
+          <p class="lead mb-4">{{ page.resolved.cta.subheadline }}</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>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+{{ content | uj_content_format }}

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/extension/installed.html

@@ -0,0 +1,188 @@
+---
+### 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: "One more step to get the most out of {{ site.brand.name }}"
+
+# Steps
+steps:
+  - number: 1
+    title: "Click the puzzle piece"
+    description: "Find the Extensions icon in your browser toolbar"
+  - number: 2
+    title: "Pin {{ site.brand.name }}"
+    description: "Click the pin icon to keep it visible"
+---
+
+<!-- Arrow pointing to top-right -->
+<div class="extension-arrow-container position-fixed d-flex flex-column align-items-end z-3">
+  <span class="extension-arrow-label badge bg-primary fs-6 px-3 py-2 shadow text-nowrap">
+    {% uj_icon "hand-pointer", "me-2" %}
+    Click here first!
+  </span>
+  <div class="extension-arrow text-primary mt-2 me-2">
+    <svg width="60" height="80" viewBox="0 0 60 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <!-- Curved arrow pointing up-right -->
+      <path d="M30 75 Q35 40 50 15" stroke="currentColor" stroke-width="3" stroke-linecap="round" fill="none"/>
+      <!-- Arrowhead -->
+      <path d="M42 5 L50 15 L38 18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+    </svg>
+  </div>
+</div>
+
+<!-- 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>
+        <p class="fs-5 text-muted mb-0">{{ page.resolved.hero.description }}</p>
+      </div>
+
+      <!-- Step 1: Click puzzle piece -->
+      <div class="extension-step mb-3" data-step="1">
+        <div class="d-flex align-items-start gap-4">
+          <div class="flex-shrink-0">
+            <span class="avatar avatar-sm bg-primary text-white rounded-circle d-flex align-items-center justify-content-center fs-5">1</span>
+          </div>
+          <div class="flex-grow-1 text-start">
+            <h4 class="mb-2">{{ page.resolved.steps[0].title }}</h4>
+            <p class="text-muted mb-3">{{ page.resolved.steps[0].description }}</p>
+
+            <!-- Visual: Browser toolbar with puzzle piece -->
+            <div class="extension-visual bg-body-tertiary rounded-4 p-4">
+              <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>
+      </div>
+
+      <!-- Divider -->
+      <div class="extension-step-divider d-flex justify-content-center mb-3">
+        {% uj_icon "arrow-down", "fs-3 text-muted" %}
+      </div>
+
+      <!-- Step 2: Pin the extension -->
+      <div class="extension-step" data-step="2">
+        <div class="d-flex align-items-start gap-4">
+          <div class="flex-shrink-0">
+            <span class="avatar avatar-sm bg-primary text-white rounded-circle d-flex align-items-center justify-content-center fs-5">2</span>
+          </div>
+          <div class="flex-grow-1 text-start">
+            <h4 class="mb-2">{{ page.resolved.steps[1].title }}</h4>
+            <p class="text-muted mb-3">{{ page.resolved.steps[1].description }}</p>
+
+            <!-- Visual: Extension dropdown with pin -->
+            <div class="extension-visual bg-body-tertiary rounded-4 p-4">
+              <div class="extension-dropdown bg-body rounded-3 border shadow-sm overflow-hidden 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) -->
+                  <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>
+      </div>
+
+      <!-- Success message -->
+      <div class="extension-success-message mt-5 pt-4 border-top">
+        <div class="d-flex align-items-center justify-content-center gap-3 text-success">
+          {% uj_icon "circle-check", "fs-4" %}
+          <span class="fs-5 fw-semibold">That's it! You're all set.</span>
+        </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 }}

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/payment/confirmation.html

@@ -14,7 +14,7 @@ layout: themes/[ site.theme.id ]/frontend/core/cover
         <div class="bg-success avatar avatar-xl rounded-circle d-inline-flex align-items-center justify-content-center mb-3">
           {% uj_icon "check", "fs-2 text-light" %}
         </div>
-        <h1 class="h2 mb-3">Thank You for Your Purchase!</h1>
+        <h1 class="h2 mb-3">Thank you for your purchase!</h1>
         <p class="text-muted">Your order has been successfully processed.</p>
       </div>