neon_sakura 0.1.4

data/app/views/style_guide/sections/_gradients.html.erb

@@ -0,0 +1,253 @@
+<section id="gradients">
+  <h2 class="text-3xl font-bold mb-4">Gradients</h2>
+  <p class="text-text-secondary mb-6">
+    Theme-aware gradient utilities for backgrounds and text effects.
+  </p>
+
+  <!-- Primary Gradient -->
+  <div class="mb-8">
+    <h3 class="text-xl font-semibold mb-4">Primary Gradient</h3>
+    <div class="code-example-wrapper">
+      <div class="code-example-preview">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <!-- Button gradient example -->
+          <div>
+            <h4 class="text-sm font-semibold mb-3 text-text-secondary">Button Gradient</h4>
+            <button class="px-6 py-3 rounded-lg transition-all text-white font-semibold" style="background: linear-gradient(to right, var(--gradient-from), var(--gradient-to));">
+              Primary Gradient Button
+            </button>
+          </div>
+
+          <!-- Text gradient example -->
+          <div>
+            <h4 class="text-sm font-semibold mb-3 text-text-secondary">Text Gradient</h4>
+            <h3 class="text-3xl font-bold bg-gradient-to-r from-text-gradient-from to-text-gradient-to bg-clip-text text-transparent">
+              Gradient Text Heading
+            </h3>
+          </div>
+        </div>
+      </div>
+      <div class="code-example-code">
+        <pre><code>/* Button */
+&lt;button style="background: linear-gradient(to right, var(--gradient-from), var(--gradient-to));"&gt;
+  Primary Gradient Button
+&lt;/button&gt;
+
+/* Text */
+&lt;h3 class="bg-gradient-to-r from-text-gradient-from to-text-gradient-to bg-clip-text text-transparent"&gt;
+  Gradient Text Heading
+&lt;/h3&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+
+  <!-- Navbar Gradient (All Themes) -->
+  <div class="mb-8">
+    <h3 class="text-xl font-semibold mb-4">Navbar Gradient <span class="text-sm text-text-secondary">(Accent to Notification)</span></h3>
+    <div class="code-example-wrapper">
+      <div class="code-example-preview">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <!-- Button gradient example -->
+          <div>
+            <h4 class="text-sm font-semibold mb-3 text-text-secondary">Navbar Style Gradient</h4>
+            <button class="bg-gradient-navbar px-6 py-3 rounded-lg transition-all text-white font-semibold">
+              Navbar Gradient Button
+            </button>
+          </div>
+
+          <!-- Visual comparison -->
+          <div>
+            <h4 class="text-sm font-semibold mb-3 text-text-secondary">Color Transition</h4>
+            <div class="bg-gradient-navbar h-16 rounded-lg border border-border"></div>
+            <p class="text-xs text-text-muted mt-2">
+              <%= @current_theme[:name].capitalize %> theme:
+              <%= @current_theme[:name] == "purple" ? "Purple → Green" : @current_theme[:name] == "red" ? "Red → Green" : "Green → Green" %>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="code-example-code">
+        <pre><code>/* Using utility class */
+&lt;button class="bg-gradient-navbar text-white"&gt;
+  Navbar Gradient Button
+&lt;/button&gt;
+
+/* Using CSS variables directly */
+&lt;div style="background: linear-gradient(to right, var(--gradient-navbar-from), var(--gradient-navbar-to));"&gt;
+&lt;/div&gt;
+
+/* As text gradient (like navbar title) */
+&lt;h1 class="bg-gradient-to-r from-accent to-notification bg-clip-text text-transparent"&gt;
+  Gradient Text
+&lt;/h1&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+
+  <!-- Secondary Blue Gradient (All Themes) -->
+  <div class="mb-8">
+    <h3 class="text-xl font-semibold mb-4">Secondary Blue Gradient <span class="text-sm text-text-secondary">(Cyan to Blue)</span></h3>
+    <div class="code-example-wrapper">
+      <div class="code-example-preview">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <!-- Button gradient example -->
+          <div>
+            <h4 class="text-sm font-semibold mb-3 text-text-secondary">Secondary Blue Gradient Button</h4>
+            <button class="bg-gradient-secondary-blue px-6 py-3 rounded-lg transition-all text-white font-semibold hover:brightness-110">
+              Secondary Blue Gradient
+            </button>
+          </div>
+
+          <!-- Visual comparison -->
+          <div>
+            <h4 class="text-sm font-semibold mb-3 text-text-secondary">Color Transition</h4>
+            <div class="bg-gradient-secondary-blue h-16 rounded-lg border border-border"></div>
+            <p class="text-xs text-text-muted mt-2">
+              Cyan (#0891b2) → Blue (#2563eb)
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="code-example-code">
+        <pre><code>/* Using utility class */
+&lt;button class="bg-gradient-secondary-blue text-white"&gt;
+  Secondary Blue Gradient
+&lt;/button&gt;
+
+/* Using CSS variables directly */
+&lt;div style="background: linear-gradient(to right, var(--gradient-secondary-blue-from), var(--gradient-secondary-blue-to));"&gt;
+&lt;/div&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+
+  <!-- Secondary Purple Gradient (Purple Theme Only) -->
+  <% if @current_theme[:name] == "purple" %>
+    <div class="mb-8">
+      <h3 class="text-xl font-semibold mb-4">Secondary Gradient <span class="text-sm text-text-secondary">(Purple Theme Only)</span></h3>
+      <div class="code-example-wrapper">
+        <div class="code-example-preview">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <!-- Button gradient example -->
+            <div>
+              <h4 class="text-sm font-semibold mb-3 text-text-secondary">Alternative Purple Gradient</h4>
+              <button class="bg-gradient-secondary-purple px-6 py-3 rounded-lg transition-all text-white font-semibold">
+                Secondary Gradient Button
+              </button>
+            </div>
+
+            <!-- Visual comparison -->
+            <div>
+              <h4 class="text-sm font-semibold mb-3 text-text-secondary">Color Transition</h4>
+              <div class="bg-gradient-secondary-purple h-16 rounded-lg border border-border"></div>
+              <p class="text-xs text-text-muted mt-2">Purple → Blue → Indigo (left to right)</p>
+            </div>
+          </div>
+        </div>
+        <div class="code-example-code">
+          <pre><code>/* Using utility class */
+&lt;button class="bg-gradient-secondary-purple text-white"&gt;
+  Secondary Gradient Button
+&lt;/button&gt;
+
+/* Using CSS variables directly */
+&lt;div style="background: linear-gradient(to left, var(--gradient-secondary-start), var(--gradient-secondary-mid), var(--gradient-secondary-end));"&gt;
+&lt;/div&gt;</code></pre>
+        </div>
+      </div>
+    </div>
+
+    <!-- Gradient Comparison -->
+    <div class="p-6 bg-surface border border-border rounded-lg">
+      <h3 class="text-lg font-semibold mb-4">Purple Theme Gradient Comparison</h3>
+      <div class="space-y-4">
+        <div>
+          <p class="text-sm font-semibold mb-2">1. Primary Gradient (Blue → Purple)</p>
+          <div class="h-12 rounded-lg border border-border" style="background: linear-gradient(to right, var(--gradient-from), var(--gradient-to));"></div>
+        </div>
+        <div>
+          <p class="text-sm font-semibold mb-2">2. Navbar Gradient (Purple → Green)</p>
+          <div class="h-12 rounded-lg border border-border bg-gradient-navbar"></div>
+        </div>
+        <div>
+          <p class="text-sm font-semibold mb-2">3. Secondary Blue Gradient (Cyan → Blue)</p>
+          <div class="h-12 rounded-lg border border-border bg-gradient-secondary-blue"></div>
+        </div>
+        <div>
+          <p class="text-sm font-semibold mb-2">4. Secondary Purple Gradient (Purple → Blue → Indigo)</p>
+          <div class="h-12 rounded-lg border border-border bg-gradient-secondary-purple"></div>
+        </div>
+      </div>
+      <div class="mt-4 p-3 bg-background rounded-lg">
+        <p class="text-text-secondary text-sm">
+          <strong>Note:</strong> The secondary gradient is available only in purple themes.
+          Use <code class="text-accent font-mono text-xs">bg-gradient-secondary-purple</code> utility class
+          or CSS variables <code class="text-accent font-mono text-xs">--gradient-secondary-start</code>,
+          <code class="text-accent font-mono text-xs">--gradient-secondary-mid</code>,
+          <code class="text-accent font-mono text-xs">--gradient-secondary-end</code>.
+        </p>
+      </div>
+    </div>
+  <% else %>
+    <!-- Message for non-purple themes -->
+    <div class="p-8 text-center border border-border rounded-lg bg-surface">
+      <p class="text-text-muted mb-2">Secondary gradient is available only in purple themes.</p>
+      <p class="text-text-secondary text-sm">Switch to Purple Light or Purple Dark theme to view the secondary gradient options.</p>
+    </div>
+  <% end %>
+
+  <!-- CSS Variables Documentation -->
+  <div class="mt-8 p-6 bg-surface border border-border rounded-lg">
+    <h3 class="text-lg font-semibold mb-4">Available CSS Variables</h3>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="space-y-2">
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">--gradient-from</code>
+          <p class="text-text-secondary text-xs mt-1">Primary gradient start color</p>
+        </div>
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">--gradient-to</code>
+          <p class="text-text-secondary text-xs mt-1">Primary gradient end color</p>
+        </div>
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">--text-gradient-from</code>
+          <p class="text-text-secondary text-xs mt-1">Text gradient start color</p>
+        </div>
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">--text-gradient-to</code>
+          <p class="text-text-secondary text-xs mt-1">Text gradient end color</p>
+        </div>
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">--gradient-navbar-from</code>
+          <p class="text-text-secondary text-xs mt-1">Navbar gradient start (accent color)</p>
+        </div>
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">--gradient-navbar-to</code>
+          <p class="text-text-secondary text-xs mt-1">Navbar gradient end (notification color)</p>
+        </div>
+      </div>
+      <div class="space-y-2">
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">--gradient-secondary-blue-from</code>
+          <p class="text-text-secondary text-xs mt-1">Secondary blue gradient start (all themes)</p>
+        </div>
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">--gradient-secondary-blue-to</code>
+          <p class="text-text-secondary text-xs mt-1">Secondary blue gradient end (all themes)</p>
+        </div>
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">--gradient-secondary-start</code>
+          <p class="text-text-secondary text-xs mt-1">Secondary gradient start (purple only)</p>
+        </div>
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">--gradient-secondary-mid</code>
+          <p class="text-text-secondary text-xs mt-1">Secondary gradient middle (purple only)</p>
+        </div>
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">--gradient-secondary-end</code>
+          <p class="text-text-secondary text-xs mt-1">Secondary gradient end (purple only)</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

data/app/views/style_guide/sections/_header.html.erb

@@ -0,0 +1,12 @@
+<section id="header" class="mb-8">
+  <h1 class="text-5xl font-bold mb-4 bg-gradient-to-r from-text-gradient-from to-text-gradient-to bg-clip-text text-transparent">
+    <%= @page_title %>
+  </h1>
+  <p class="text-xl text-text-secondary mb-6">
+    A comprehensive showcase of all UI components, themes, icons, and styling patterns available in the Neon Sakura gem.
+  </p>
+  <p class="text-text-muted">
+    <strong>Environment:</strong> <%= Rails.env %> |
+    <strong>Version:</strong> <%= NeonSakura::VERSION %>
+  </p>
+</section>

data/app/views/style_guide/sections/_icons.html.erb

@@ -0,0 +1,55 @@
+<section id="icons">
+  <h2 class="text-3xl font-bold mb-4">Icons (<%= @icons.count %>)</h2>
+  <p class="text-text-secondary mb-6">
+    All <%= @icons.count %> available SVG icons in the Neon Sakura library. Icons are dynamically rendered from partials.
+  </p>
+
+  <!-- Icon Grid -->
+  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-8">
+    <% @icons.each do |icon_name| %>
+      <div class="p-4 border border-border rounded-lg text-center hover:bg-surface transition-colors cursor-pointer" data-icon-modal data-icon-name="<%= icon_name %>">
+        <div class="flex justify-center mb-2">
+          <%= render_theme_icon(icon_name, css_class: "w-8 h-8 text-accent") %>
+        </div>
+        <div class="text-xs text-text-secondary font-mono break-words">
+          <%= icon_name %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- Usage Example -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Icon Usage Example</h3>
+      <div class="flex items-center gap-4 flex-wrap">
+        <%= render_theme_icon("heart", css_class: "w-6 h-6 text-notification") %>
+        <%= render_theme_icon("star", css_class: "w-6 h-6 text-warning") %>
+        <%= render_theme_icon("check_circle", css_class: "w-6 h-6 text-accent") %>
+        <span class="text-text-secondary">Using render_theme_icon helper</span>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;%= render_theme_icon("heart", css_class: "w-6 h-6 text-notification") %&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Helper Method Documentation -->
+  <div class="mt-6 p-6 bg-surface border border-border rounded-lg">
+    <h3 class="text-lg font-semibold mb-4">Helper Methods</h3>
+    <div class="space-y-3">
+      <div class="p-3 bg-background rounded-lg">
+        <code class="text-accent font-mono text-sm font-semibold">render_theme_icon(name, options = {})</code>
+        <p class="text-text-secondary text-sm mt-2">Render an icon with optional CSS class</p>
+      </div>
+      <div class="p-3 bg-background rounded-lg">
+        <code class="text-accent font-mono text-sm font-semibold">available_icons()</code>
+        <p class="text-text-secondary text-sm mt-2">Get array of all icon names</p>
+      </div>
+      <div class="p-3 bg-background rounded-lg">
+        <code class="text-accent font-mono text-sm font-semibold">icon_exists?(name)</code>
+        <p class="text-text-secondary text-sm mt-2">Check if icon exists</p>
+      </div>
+    </div>
+  </div>
+</section>

data/app/views/style_guide/sections/_images.html.erb

@@ -0,0 +1,40 @@
+<section id="images">
+  <h2 class="text-3xl font-bold mb-4">Images (<%= @images.count %>)</h2>
+  <p class="text-text-secondary mb-6">
+    All <%= @images.count %> available image assets in the Neon Sakura library.
+  </p>
+
+  <% if @images.any? %>
+    <!-- Image Grid -->
+    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-8">
+      <% @images.each do |image_name| %>
+        <div class="border border-border rounded-lg overflow-hidden bg-surface hover:bg-background transition-colors cursor-pointer" data-image-modal data-image-src="<%= image_path(image_name) %>" data-image-name="<%= image_name %>" style="height: 200px; display: flex; flex-direction: column;">
+          <div class="bg-background" style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem; overflow: hidden;">
+            <%= image_tag image_name, alt: image_name, style: "max-width: 100%; max-height: 120px; width: auto; height: auto; object-fit: contain;" %>
+          </div>
+          <div class="p-2 border-t border-border" style="flex-shrink: 0;">
+            <div class="text-xs font-mono text-text-secondary" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="<%= image_name %>">
+              <%= image_name %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+
+    <!-- Usage Example -->
+    <div class="code-example-wrapper">
+      <div class="code-example-preview">
+        <h3 class="text-xl font-semibold mb-4">Image Usage Example</h3>
+        <% first_image = @images.first %>
+        <%= image_tag first_image, alt: first_image, class: "max-w-xs" %>
+      </div>
+      <div class="code-example-code">
+        <pre><code>&lt;%= image_tag "<%= first_image %>", alt: "<%= first_image %>", class: "max-w-xs" %&gt;</code></pre>
+      </div>
+    </div>
+  <% else %>
+    <div class="p-8 text-center border border-border rounded-lg bg-surface">
+      <p class="text-text-muted">No images found in the gem.</p>
+    </div>
+  <% end %>
+</section>

data/app/views/style_guide/sections/_loading.html.erb

@@ -0,0 +1,242 @@
+<section id="loading">
+  <h2 class="text-3xl font-bold mb-4">Loading Indicators</h2>
+  <p class="text-text-secondary mb-6">
+    Loading spinners, progress bars, and skeleton loaders for async operations.
+  </p>
+
+  <!-- Spinners -->
+  <div class="mb-8">
+    <h3 class="text-xl font-semibold mb-4">Spinners</h3>
+    <div class="code-example-wrapper">
+      <div class="code-example-preview">
+        <div class="flex flex-wrap items-start gap-12">
+          <!-- Basic spinner -->
+          <div class="flex flex-col items-center gap-3">
+            <p class="text-sm text-text-secondary">Basic Spinner</p>
+            <div class="spinner-basic"></div>
+          </div>
+
+          <!-- Accent spinner -->
+          <div class="flex flex-col items-center gap-3">
+            <p class="text-sm text-text-secondary">Accent Spinner</p>
+            <div class="spinner-accent"></div>
+          </div>
+
+          <!-- Small spinner -->
+          <div class="flex flex-col items-center gap-3">
+            <p class="text-sm text-text-secondary">Small Spinner</p>
+            <div class="spinner-small"></div>
+          </div>
+
+          <!-- Large spinner -->
+          <div class="flex flex-col items-center gap-3">
+            <p class="text-sm text-text-secondary">Large Spinner</p>
+            <div class="spinner-large"></div>
+          </div>
+        </div>
+      </div>
+      <div class="code-example-code">
+        <pre><code>&lt;!-- Basic spinner --&gt;
+&lt;div class="spinner-basic"&gt;&lt;/div&gt;
+
+&lt;!-- Accent spinner --&gt;
+&lt;div class="spinner-accent"&gt;&lt;/div&gt;
+
+&lt;!-- Small spinner --&gt;
+&lt;div class="spinner-small"&gt;&lt;/div&gt;
+
+&lt;!-- Large spinner --&gt;
+&lt;div class="spinner-large"&gt;&lt;/div&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+
+  <!-- Progress Bars -->
+  <div class="mb-8">
+    <h3 class="text-xl font-semibold mb-4">Progress Bars</h3>
+    <div class="code-example-wrapper">
+      <div class="code-example-preview">
+        <div class="space-y-6">
+          <!-- Indeterminate progress bar -->
+          <div>
+            <p class="text-sm text-text-secondary mb-3">Indeterminate Progress</p>
+            <div class="progress-bar-container">
+              <div class="progress-bar-indeterminate"></div>
+            </div>
+          </div>
+
+          <!-- Determinate progress bars -->
+          <div>
+            <p class="text-sm text-text-secondary mb-3">25% Complete</p>
+            <div class="progress-bar-container">
+              <div class="progress-bar-fill" style="width: 25%"></div>
+            </div>
+          </div>
+
+          <div>
+            <p class="text-sm text-text-secondary mb-3">50% Complete</p>
+            <div class="progress-bar-container">
+              <div class="progress-bar-fill" style="width: 50%"></div>
+            </div>
+          </div>
+
+          <div>
+            <p class="text-sm text-text-secondary mb-3">75% Complete</p>
+            <div class="progress-bar-container">
+              <div class="progress-bar-fill" style="width: 75%"></div>
+            </div>
+          </div>
+
+          <div>
+            <p class="text-sm text-text-secondary mb-3">100% Complete</p>
+            <div class="progress-bar-container">
+              <div class="progress-bar-fill" style="width: 100%"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="code-example-code">
+        <pre><code>&lt;!-- Indeterminate progress --&gt;
+&lt;div class="progress-bar-container"&gt;
+  &lt;div class="progress-bar-indeterminate"&gt;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;!-- Determinate progress --&gt;
+&lt;div class="progress-bar-container"&gt;
+  &lt;div class="progress-bar-fill" style="width: 50%"&gt;&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+
+  <!-- Skeleton Loaders -->
+  <div class="mb-8">
+    <h3 class="text-xl font-semibold mb-4">Skeleton Loaders</h3>
+    <div class="code-example-wrapper">
+      <div class="code-example-preview">
+        <div class="space-y-4">
+          <!-- Text skeleton -->
+          <div>
+            <p class="text-sm text-text-secondary mb-3">Text Skeleton</p>
+            <div class="skeleton-text"></div>
+            <div class="skeleton-text" style="width: 80%"></div>
+            <div class="skeleton-text" style="width: 60%"></div>
+          </div>
+
+          <!-- Card skeleton -->
+          <div>
+            <p class="text-sm text-text-secondary mb-3">Card Skeleton</p>
+            <div class="border border-border rounded-lg p-4">
+              <div class="skeleton-avatar mb-3"></div>
+              <div class="skeleton-text mb-2"></div>
+              <div class="skeleton-text" style="width: 90%"></div>
+              <div class="skeleton-text" style="width: 70%"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="code-example-code">
+        <pre><code>&lt;!-- Text skeleton --&gt;
+&lt;div class="skeleton-text"&gt;&lt;/div&gt;
+&lt;div class="skeleton-text" style="width: 80%"&gt;&lt;/div&gt;
+
+&lt;!-- Avatar skeleton --&gt;
+&lt;div class="skeleton-avatar"&gt;&lt;/div&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+
+  <!-- Loading States -->
+  <div class="mb-8">
+    <h3 class="text-xl font-semibold mb-4">Loading States</h3>
+    <div class="code-example-wrapper">
+      <div class="code-example-preview">
+        <div class="flex flex-wrap items-start gap-6">
+          <!-- Button loading state -->
+          <div class="flex flex-col gap-3">
+            <p class="text-sm text-text-secondary">Button Loading State</p>
+            <button type="button" class="px-6 py-2 rounded cursor-not-allowed flex items-center gap-2 opacity-75" disabled style="background-image: linear-gradient(to right, var(--gradient-from), var(--gradient-to)); color: var(--button-text-color); font-weight: 600;">
+              <div class="spinner-small"></div>
+              <span>Loading...</span>
+            </button>
+          </div>
+
+          <!-- Card loading state -->
+          <div class="flex flex-col gap-3">
+            <p class="text-sm text-text-secondary">Card Loading State</p>
+            <div class="border border-border rounded-lg p-6 bg-surface" style="width: 300px;">
+              <div class="flex items-center justify-center py-8">
+                <div class="spinner-accent"></div>
+              </div>
+              <p class="text-center text-text-secondary mt-4">Loading content...</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="code-example-code">
+        <pre><code>&lt;!-- Button loading state --&gt;
+&lt;button type="button" class="px-6 py-2 rounded flex items-center gap-2 opacity-75" disabled
+        style="background-image: linear-gradient(to right, var(--gradient-from), var(--gradient-to));
+               color: var(--button-text-color); font-weight: 600;"&gt;
+  &lt;div class="spinner-small"&gt;&lt;/div&gt;
+  &lt;span&gt;Loading...&lt;/span&gt;
+&lt;/button&gt;
+
+&lt;!-- Card loading state --&gt;
+&lt;div class="border border-border rounded-lg p-6 bg-surface"&gt;
+  &lt;div class="flex items-center justify-center py-8"&gt;
+    &lt;div class="spinner-accent"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;p class="text-center text-text-secondary mt-4"&gt;Loading content...&lt;/p&gt;
+&lt;/div&gt;</code></pre>
+      </div>
+    </div>
+  </div>
+
+  <!-- CSS Classes Documentation -->
+  <div class="p-6 bg-surface border border-border rounded-lg">
+    <h3 class="text-lg font-semibold mb-4">Available CSS Classes</h3>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div class="space-y-2">
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">.spinner-basic</code>
+          <p class="text-text-secondary text-xs mt-1">Basic spinning loader (border color)</p>
+        </div>
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">.spinner-accent</code>
+          <p class="text-text-secondary text-xs mt-1">Accent color spinner</p>
+        </div>
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">.spinner-small</code>
+          <p class="text-text-secondary text-xs mt-1">Small spinner (16px)</p>
+        </div>
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">.spinner-large</code>
+          <p class="text-text-secondary text-xs mt-1">Large spinner (48px)</p>
+        </div>
+      </div>
+      <div class="space-y-2">
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">.progress-bar-container</code>
+          <p class="text-text-secondary text-xs mt-1">Progress bar container</p>
+        </div>
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">.progress-bar-fill</code>
+          <p class="text-text-secondary text-xs mt-1">Progress bar fill (set width)</p>
+        </div>
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">.progress-bar-indeterminate</code>
+          <p class="text-text-secondary text-xs mt-1">Animated indeterminate progress</p>
+        </div>
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">.skeleton-text</code>
+          <p class="text-text-secondary text-xs mt-1">Text placeholder skeleton</p>
+        </div>
+        <div class="p-3 bg-background rounded-lg">
+          <code class="text-accent font-mono text-sm font-semibold">.skeleton-avatar</code>
+          <p class="text-text-secondary text-xs mt-1">Avatar/image placeholder</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>