neon_sakura 0.1.4

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

@@ -0,0 +1,212 @@
+<section id="pagination">
+  <h2 class="text-3xl font-bold mb-4">Pagination (Pagy)</h2>
+  <p class="text-text-secondary mb-6">
+    The gem includes Pagy pagination styling. Install the Pagy gem to use pagination in your application.
+  </p>
+
+  <!-- Note about Pagy dependency -->
+  <div class="p-4 mb-6 bg-surface border border-border rounded-lg">
+    <p class="text-sm text-text-secondary">
+      <strong>Note:</strong> Pagy is not included as a dependency of this gem.
+      To use pagination, add <code class="px-2 py-1 bg-background rounded text-accent">gem 'pagy'</code> to your Gemfile.
+    </p>
+  </div>
+
+  <% if !@pagy_enabled %>
+    <!-- Pagy Examples Disabled -->
+    <div class="p-8 text-center border-2 border-dashed border-border rounded-lg bg-surface">
+      <div class="mb-4">
+        <%= render_theme_icon("alert_circle", css_class: "w-12 h-12 mx-auto text-text-muted") %>
+      </div>
+      <h3 class="text-lg font-semibold mb-2">Pagy Examples Disabled</h3>
+      <p class="text-text-secondary mb-4">
+        Pagy pagination examples are disabled in the style guide configuration.
+      </p>
+      <div class="bg-background p-3 rounded font-mono text-sm mb-4 inline-block">
+        config.style_guide_pagy_examples = true
+      </div>
+      <p class="text-sm text-text-muted">
+        Add this to your NeonSakura configuration to enable Pagy examples.
+      </p>
+    </div>
+  <% elsif @pagy_error %>
+    <!-- Pagy Error -->
+    <div class="p-8 border-2 border-alert rounded-lg bg-surface">
+      <div class="mb-4">
+        <%= render_theme_icon("alert_triangle", css_class: "w-12 h-12 text-alert") %>
+      </div>
+      <h3 class="text-lg font-semibold mb-2 text-alert">Pagy Configuration Error</h3>
+      <p class="text-text-secondary mb-4">
+        <%= @pagy_error %>
+      </p>
+      <div class="bg-background p-3 rounded font-mono text-sm">
+        # In config/initializers/neon_sakura.rb<br>
+        NeonSakura.configure do |config|<br>
+        &nbsp;&nbsp;config.style_guide_pagy_examples = false<br>
+        end
+      </div>
+    </div>
+  <% elsif @pagy_available %>
+    <!-- Items Display -->
+    <div class="mb-6">
+      <h3 class="text-xl font-semibold mb-4">Sample Items</h3>
+      <div class="space-y-2">
+        <% @page_items.each do |item| %>
+          <div class="p-3 border border-border rounded bg-surface">
+            <strong class="text-accent"><%= item[:title] %></strong>
+            <span class="text-text-secondary"> - <%= item[:description] %></span>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <!-- Pagy Info -->
+    <div class="code-example-wrapper">
+      <div class="code-example-preview">
+        <h3 class="text-xl font-semibold mb-4">1. Pagy Info Helper</h3>
+        <p class="text-text-secondary mb-4">Shows pagination summary text</p>
+        <div class="p-4 bg-background rounded border border-border">
+          <%== @pagy.info_tag %>
+        </div>
+      </div>
+      <div class="code-example-code">
+        <pre><code>&lt;%== @pagy.info_tag %&gt;</code></pre>
+      </div>
+    </div>
+
+    <!-- Pagy Series Nav -->
+    <div class="code-example-wrapper">
+      <div class="code-example-preview">
+        <h3 class="text-xl font-semibold mb-4">2. Series Navigation (JavaScript)</h3>
+        <p class="text-text-secondary mb-4">Interactive page number navigation with prev/next</p>
+        <div class="flex justify-center p-4 bg-background rounded border border-border">
+          <%== @pagy.series_nav_js %>
+        </div>
+      </div>
+      <div class="code-example-code">
+        <pre><code>&lt;%== @pagy.series_nav_js %&gt;</code></pre>
+      </div>
+    </div>
+
+    <!-- Pagy Series Nav (Non-JS) -->
+    <div class="code-example-wrapper">
+      <div class="code-example-preview">
+        <h3 class="text-xl font-semibold mb-4">3. Series Navigation (No JavaScript)</h3>
+        <p class="text-text-secondary mb-4">Standard page number navigation (no JavaScript required)</p>
+        <div class="flex justify-center p-4 bg-background rounded border border-border">
+          <%== @pagy.series_nav %>
+        </div>
+      </div>
+      <div class="code-example-code">
+        <pre><code>&lt;%== @pagy.series_nav %&gt;</code></pre>
+      </div>
+    </div>
+
+    <!-- Pagy Input Nav -->
+    <div class="code-example-wrapper">
+      <div class="code-example-preview">
+        <h3 class="text-xl font-semibold mb-4">4. Input Navigation</h3>
+        <p class="text-text-secondary mb-4">Text input for direct page number entry</p>
+        <div class="flex justify-center p-4 bg-background rounded border border-border">
+          <%== @pagy.input_nav_js %>
+        </div>
+      </div>
+      <div class="code-example-code">
+        <pre><code>&lt;%== @pagy.input_nav_js %&gt;</code></pre>
+      </div>
+    </div>
+
+    <!-- Controller Code Example -->
+    <div class="mt-6 p-6 bg-surface border border-border rounded-lg">
+      <h3 class="text-lg font-semibold mb-4">Controller Setup</h3>
+      <div class="bg-background p-4 rounded font-mono text-sm">
+        <pre><code class="text-text-secondary"># Include Pagy module in controller
+include Pagy::Method  # Pagy 43+
+
+# Paginate a collection
+@pagy, @items = pagy(:offset, Item.all, limit: 10)
+
+# Or with ActiveRecord (most common)
+@pagy, @users = pagy(:offset, User.all, limit: 20)</code></pre>
+      </div>
+    </div>
+
+    <!-- Available Helpers Reference -->
+    <div class="mt-6 p-6 bg-surface border border-border rounded-lg">
+      <h3 class="text-lg font-semibold mb-4">Available Pagy Methods (Pagy 43.x)</h3>
+      <div class="space-y-3 font-mono text-sm">
+        <div class="p-3 bg-background rounded">
+          <code class="text-accent">@pagy.info_tag</code>
+          <p class="text-text-muted text-xs mt-1">Pagination summary text (e.g., "Displaying items 1-10 of 100")</p>
+        </div>
+        <div class="p-3 bg-background rounded">
+          <code class="text-accent">@pagy.series_nav_js</code>
+          <p class="text-text-muted text-xs mt-1">Interactive page number navigation (requires JavaScript)</p>
+        </div>
+        <div class="p-3 bg-background rounded">
+          <code class="text-accent">@pagy.series_nav</code>
+          <p class="text-text-muted text-xs mt-1">Standard page number navigation (no JavaScript)</p>
+        </div>
+        <div class="p-3 bg-background rounded">
+          <code class="text-accent">@pagy.input_nav_js</code>
+          <p class="text-text-muted text-xs mt-1">Direct page number input field (requires JavaScript)</p>
+        </div>
+        <div class="p-3 bg-background rounded">
+          <code class="text-accent">@pagy.limit_tag_js</code>
+          <p class="text-text-muted text-xs mt-1">Items per page selector (requires limit extra)</p>
+        </div>
+      </div>
+      <p class="text-xs text-text-muted mt-4">
+        Note: Pagy 43.x uses instance methods on the Pagy object, not view helpers.
+        Load required helpers in <code>config/initializers/pagy.rb</code>
+      </p>
+    </div>
+  <% else %>
+    <!-- Pagy Not Installed -->
+    <div class="p-8 text-center border-2 border-dashed border-border rounded-lg bg-surface">
+      <div class="mb-4">
+        <%= render_theme_icon("package", css_class: "w-12 h-12 mx-auto text-text-muted") %>
+      </div>
+      <h3 class="text-lg font-semibold mb-2">Pagy Not Installed</h3>
+      <p class="text-text-secondary mb-4">
+        To see pagination examples, install Pagy:
+      </p>
+      <div class="bg-background p-3 rounded font-mono text-sm mb-4 inline-block">
+        gem 'pagy'
+      </div>
+      <p class="text-sm text-text-muted">
+        Then run <code class="px-2 py-1 bg-background rounded">bundle install</code> and restart the server.
+      </p>
+    </div>
+
+    <!-- Code Example (Static) -->
+    <div class="code-example-wrapper mt-6">
+      <div class="code-example-preview">
+        <h3 class="text-xl font-semibold mb-4">Example Implementation</h3>
+        <p class="text-text-secondary">Here's how Pagy pagination would look once installed:</p>
+      </div>
+      <div class="code-example-code">
+        <pre><code># Gemfile
+gem 'pagy'
+
+# Controller
+include Pagy::Backend
+@pagy, @items = pagy(Item.all, items: 10)
+
+# View
+&lt;%== pagy_nav(@pagy) %&gt;</code></pre>
+      </div>
+    </div>
+  <% end %>
+
+  <!-- Documentation Link -->
+  <div class="mt-6 p-4 bg-background border border-border rounded-lg">
+    <p class="text-sm">
+      <strong>Documentation:</strong>
+      <a href="https://ddnexus.github.io/pagy/" target="_blank" rel="noopener noreferrer" class="text-accent hover:underline">
+        Pagy Official Documentation
+        <%= render_theme_icon("external_link", css_class: "w-3 h-3 inline ml-1") %>
+      </a>
+    </p>
+  </div>
+</section>

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

@@ -0,0 +1,203 @@
+<section id="profile-components" class="mb-12">
+  <h2 class="text-3xl font-bold mb-6 bg-gradient-to-r from-gradient-from to-gradient-to bg-clip-text text-transparent">
+    Profile Components
+  </h2>
+
+  <p class="text-text-secondary mb-6">
+    Components for user profile management including Gravatar support and profile image selection.
+  </p>
+
+  <!-- Gravatar Helper -->
+  <div class="mb-8">
+    <h3 class="text-xl font-semibold mb-4 text-text-primary">Gravatar Helper</h3>
+    <p class="text-text-secondary mb-4">
+      The <code class="bg-surface px-2 py-1 rounded">gravatar_url</code> helper generates Gravatar URLs from email addresses.
+    </p>
+    <div class="card p-6">
+      <div class="flex items-center gap-4">
+        <img src="<%= gravatar_url("user@example.com", size: 80) %>"
+             alt="Gravatar Example"
+             class="rounded-full w-20 h-20">
+        <div>
+          <p class="text-text-primary font-medium">user@example.com</p>
+          <p class="text-text-muted text-sm">Default identicon for unregistered emails</p>
+        </div>
+      </div>
+    </div>
+    <div class="mt-4">
+      <h4 class="text-sm font-semibold text-text-muted mb-2">Code Example:</h4>
+      <pre class="bg-surface p-4 rounded-lg overflow-x-auto"><code>&lt;img src="&lt;%= gravatar_url("user@example.com", size: 80) %&gt;"
+     alt="Gravatar"
+     class="rounded-full w-20 h-20"&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Profile Image Selector (Demo) -->
+  <div class="mb-8">
+    <h3 class="text-xl font-semibold mb-4 text-text-primary">Profile Image Selector Component</h3>
+    <p class="text-text-secondary mb-4">
+      Radio card selection UI for choosing profile image source. Requires a form context and user object.
+    </p>
+    <div class="card p-6">
+      <p class="text-text-muted mb-4">
+        <strong>Note:</strong> This component requires a form builder and user object.
+        It's designed to be used within a form like <code class="bg-surface px-2 py-1 rounded">form_with model: @user</code>.
+      </p>
+
+      <!-- Visual mockup -->
+      <div class="profile-image-options">
+        <div class="profile-image-option">
+          <div class="profile-image-card selected">
+            <div class="profile-image-card-body">
+              <%= render "shared/icons/user", css_class: "w-15 h-15 text-text-muted" %>
+              <h6 class="profile-image-card-title">Default</h6>
+              <p class="profile-image-card-text">Generated avatar</p>
+              <div class="profile-image-selection-indicator">
+                <%= render "shared/icons/check_circle", css_class: "w-5 h-5 text-accent" %>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="profile-image-option">
+          <div class="profile-image-card">
+            <div class="profile-image-card-body">
+              <img src="<%= gravatar_url("demo@example.com", size: 60) %>"
+                   alt="Gravatar"
+                   class="profile-image-preview">
+              <h6 class="profile-image-card-title">
+                <%= render "shared/icons/user_circle", css_class: "w-4 h-4 inline-block mr-1" %>
+                Gravatar
+              </h6>
+              <p class="profile-image-card-text">Use your Gravatar image</p>
+              <div class="profile-image-selection-indicator">
+                <%= render "shared/icons/check_circle", css_class: "w-5 h-5 text-accent" %>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="profile-image-option">
+          <div class="profile-image-card disabled">
+            <div class="profile-image-card-body">
+              <%= render "shared/icons/upload", css_class: "w-15 h-15 text-text-muted" %>
+              <h6 class="profile-image-card-title">
+                <%= render "shared/icons/upload", css_class: "w-4 h-4 inline-block mr-1" %>
+                Upload
+              </h6>
+              <p class="profile-image-card-text">Upload your own image</p>
+              <div class="profile-image-selection-indicator">
+                <%= render "shared/icons/check_circle", css_class: "w-5 h-5 text-muted" %>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mt-4">
+      <h4 class="text-sm font-semibold text-text-muted mb-2">Code Example:</h4>
+      <pre class="bg-surface p-4 rounded-lg overflow-x-auto"><code>&lt;%= form_with model: @user do |f| %&gt;
+  &lt;%= render "shared/profile_image_selector",
+      user: @user,
+      form: f,
+      sources: [:default, :gravatar, :upload],
+      show_upload: true %&gt;
+&lt;% end %&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Parameters -->
+  <div class="mt-8">
+    <h3 class="text-xl font-semibold mb-4 text-text-primary">Profile Image Selector Parameters</h3>
+    <div class="overflow-x-auto">
+      <table class="w-full">
+        <thead>
+          <tr>
+            <th class="text-left py-2 px-4 border-b border-border">Parameter</th>
+            <th class="text-left py-2 px-4 border-b border-border">Type</th>
+            <th class="text-left py-2 px-4 border-b border-border">Default</th>
+            <th class="text-left py-2 px-4 border-b border-border">Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="py-2 px-4 border-b border-border"><code>user</code></td>
+            <td class="py-2 px-4 border-b border-border">Object</td>
+            <td class="py-2 px-4 border-b border-border">Required</td>
+            <td class="py-2 px-4 border-b border-border">User object with profile_image_source attribute</td>
+          </tr>
+          <tr>
+            <td class="py-2 px-4 border-b border-border"><code>form</code></td>
+            <td class="py-2 px-4 border-b border-border">FormBuilder</td>
+            <td class="py-2 px-4 border-b border-border">Required</td>
+            <td class="py-2 px-4 border-b border-border">Rails form builder object</td>
+          </tr>
+          <tr>
+            <td class="py-2 px-4 border-b border-border"><code>field_name</code></td>
+            <td class="py-2 px-4 border-b border-border">Symbol</td>
+            <td class="py-2 px-4 border-b border-border">:profile_image_source</td>
+            <td class="py-2 px-4 border-b border-border">Form field name</td>
+          </tr>
+          <tr>
+            <td class="py-2 px-4 border-b border-border"><code>sources</code></td>
+            <td class="py-2 px-4 border-b border-border">Array</td>
+            <td class="py-2 px-4 border-b border-border">[:default, :gravatar]</td>
+            <td class="py-2 px-4 border-b border-border">Available image sources</td>
+          </tr>
+          <tr>
+            <td class="py-2 px-4 border-b border-border"><code>show_upload</code></td>
+            <td class="py-2 px-4 border-b border-border">Boolean</td>
+            <td class="py-2 px-4 border-b border-border">false</td>
+            <td class="py-2 px-4 border-b border-border">Show upload option (requires ActiveStorage)</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- Gravatar Helper Parameters -->
+  <div class="mt-8">
+    <h3 class="text-xl font-semibold mb-4 text-text-primary">Gravatar Helper Parameters</h3>
+    <div class="overflow-x-auto">
+      <table class="w-full">
+        <thead>
+          <tr>
+            <th class="text-left py-2 px-4 border-b border-border">Parameter</th>
+            <th class="text-left py-2 px-4 border-b border-border">Type</th>
+            <th class="text-left py-2 px-4 border-b border-border">Default</th>
+            <th class="text-left py-2 px-4 border-b border-border">Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="py-2 px-4 border-b border-border"><code>email</code></td>
+            <td class="py-2 px-4 border-b border-border">String</td>
+            <td class="py-2 px-4 border-b border-border">Required</td>
+            <td class="py-2 px-4 border-b border-border">Email address for Gravatar lookup</td>
+          </tr>
+          <tr>
+            <td class="py-2 px-4 border-b border-border"><code>size</code></td>
+            <td class="py-2 px-4 border-b border-border">Integer</td>
+            <td class="py-2 px-4 border-b border-border">80</td>
+            <td class="py-2 px-4 border-b border-border">Image size in pixels</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <!-- Features -->
+  <div class="mt-8">
+    <h3 class="text-xl font-semibold mb-4 text-text-primary">Features</h3>
+    <ul class="list-disc list-inside text-text-secondary space-y-2">
+      <li>Gravatar integration with automatic fallback to identicon</li>
+      <li>Profile image selector with radio card UI</li>
+      <li>Multiple image source options (default, Gravatar, upload)</li>
+      <li>Theme-aware styling with selection indicators</li>
+      <li>Optional ActiveStorage integration for uploads</li>
+      <li>Fully accessible with hidden radio buttons</li>
+      <li>Responsive grid layout</li>
+      <li>Email normalization (lowercase, strip whitespace)</li>
+    </ul>
+  </div>
+</section>

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

@@ -0,0 +1,72 @@
+<section id="theme-switcher">
+  <h2 class="text-3xl font-bold mb-4">Theme Preview</h2>
+  <p class="text-text-secondary mb-4">
+    Switch themes to preview how all components look in different color schemes. Changes are saved to localStorage.
+  </p>
+
+  <div class="flex flex-wrap gap-3">
+    <% @available_themes.each do |theme| %>
+      <%
+        is_current = @current_theme[:name] == theme[:name] && @current_theme[:mode] == theme[:mode]
+      %>
+      <button
+        type="button"
+        data-theme-item
+        data-theme-name="<%= theme[:name] %>"
+        data-theme-mode="<%= theme[:mode] %>"
+        class="px-4 py-2 rounded-lg border-2 transition-all <%= is_current ? 'border-accent bg-accent font-semibold' : 'border-border bg-surface text-text-primary hover:border-accent' %>"
+        style="<%= is_current ? 'color: white;' : '' %>"
+        aria-label="Switch to <%= theme[:label] %>"
+        aria-pressed="<%= is_current %>"
+      >
+        <span class="flex items-center gap-2">
+          <% if theme[:mode] == 'light' %>
+            <%= render_theme_icon("sun", css_class: "w-4 h-4") %>
+          <% else %>
+            <%= render_theme_icon("moon", css_class: "w-4 h-4") %>
+          <% end %>
+          <%= theme[:label] %>
+        </span>
+      </button>
+    <% end %>
+  </div>
+</section>
+
+<script>
+// Theme switcher initialization
+document.addEventListener('DOMContentLoaded', function() {
+  const buttons = document.querySelectorAll('[data-theme-item]');
+
+  buttons.forEach(button => {
+    button.addEventListener('click', function() {
+      const themeName = this.dataset.themeName;
+      const themeMode = this.dataset.themeMode;
+
+      // Update HTML attributes
+      document.documentElement.setAttribute('data-theme-name', themeName);
+      document.documentElement.setAttribute('data-theme-mode', themeMode);
+
+      // Persist to localStorage
+      localStorage.setItem('neon_sakura_theme_name', themeName);
+      localStorage.setItem('neon_sakura_theme_mode', themeMode);
+
+      // Update button states
+      buttons.forEach(btn => {
+        const isActive = btn.dataset.themeName === themeName && btn.dataset.themeMode === themeMode;
+
+        if (isActive) {
+          btn.classList.add('border-accent', 'bg-accent', 'font-semibold');
+          btn.classList.remove('border-border', 'bg-surface', 'text-text-primary', 'hover:border-accent');
+          btn.style.color = 'white';
+          btn.setAttribute('aria-pressed', 'true');
+        } else {
+          btn.classList.remove('border-accent', 'bg-accent', 'font-semibold');
+          btn.classList.add('border-border', 'bg-surface', 'text-text-primary', 'hover:border-accent');
+          btn.style.color = '';
+          btn.setAttribute('aria-pressed', 'false');
+        }
+      });
+    });
+  });
+});
+</script>

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

@@ -0,0 +1,65 @@
+<section id="typography">
+  <h2 class="text-3xl font-bold mb-4">Typography</h2>
+  <p class="text-text-secondary mb-6">
+    Text styling, heading levels, and typography utilities.
+  </p>
+
+  <!-- Headings -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Headings</h3>
+      <div class="space-y-4">
+        <h1 class="text-4xl font-bold">Heading 1 (text-4xl font-bold)</h1>
+        <h2 class="text-3xl font-bold">Heading 2 (text-3xl font-bold)</h2>
+        <h3 class="text-2xl font-semibold">Heading 3 (text-2xl font-semibold)</h3>
+        <h4 class="text-xl font-semibold">Heading 4 (text-xl font-semibold)</h4>
+        <h5 class="text-lg font-medium">Heading 5 (text-lg font-medium)</h5>
+        <h6 class="text-base font-medium">Heading 6 (text-base font-medium)</h6>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;h1 class="text-4xl font-bold"&gt;Heading 1&lt;/h1&gt;
+&lt;h2 class="text-3xl font-bold"&gt;Heading 2&lt;/h2&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Text Colors -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Text Colors</h3>
+      <div class="space-y-2">
+        <p class="text-text-primary">Primary text (text-text-primary)</p>
+        <p class="text-text-secondary">Secondary text (text-text-secondary)</p>
+        <p class="text-text-muted">Muted text (text-text-muted)</p>
+        <p class="text-accent">Accent text (text-accent)</p>
+        <p class="text-notification">Notification text (text-notification)</p>
+        <p class="text-alert">Alert text (text-alert)</p>
+        <p class="text-warning">Warning text (text-warning)</p>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;p class="text-text-primary"&gt;Primary text&lt;/p&gt;
+&lt;p class="text-accent"&gt;Accent text&lt;/p&gt;</code></pre>
+    </div>
+  </div>
+
+  <!-- Text Gradients -->
+  <div class="code-example-wrapper">
+    <div class="code-example-preview">
+      <h3 class="text-xl font-semibold mb-4">Text Gradients</h3>
+      <div class="space-y-4">
+        <h2 class="text-4xl font-bold bg-gradient-to-r from-text-gradient-from to-text-gradient-to bg-clip-text text-transparent">
+          Gradient Heading
+        </h2>
+        <p class="text-lg bg-gradient-to-r from-accent to-notification bg-clip-text text-transparent">
+          Gradient text with custom colors
+        </p>
+      </div>
+    </div>
+    <div class="code-example-code">
+      <pre><code>&lt;h2 class="bg-gradient-to-r from-text-gradient-from to-text-gradient-to bg-clip-text text-transparent"&gt;
+  Gradient Heading
+&lt;/h2&gt;</code></pre>
+    </div>
+  </div>
+</section>