ultimate-jekyll-manager 0.0.118 → 0.0.120

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/about.html

@@ -6,48 +6,52 @@ layout: themes/[ site.theme.id ]/frontend/core/base
 # Hero Section
 hero:
   headline: "About"
-  headline_accent: "Us"
+  headline_accent: "us"
   description: "Learn about the people, mission, and values driving {{ site.brand.name }} forward"
 
 # Mission & Vision
 mission:
-  title: "Our Mission"
+  title: "Our mission"
   description: "To empower individuals and businesses with innovative technology solutions that simplify complex challenges and unlock new possibilities for growth and success."
   icon: "bullseye"
 
 vision:
-  title: "Our Vision"
+  title: "Our vision"
   description: "To become the world's most trusted platform for business transformation, where innovation meets simplicity and everyone can achieve their full potential."
   icon: "lightbulb"
 
 # Story Timeline Section
 story:
-  superheadline: "{% uj_icon 'clock-rotate-left' %} History"
+  superheadline:
+    icon: "clock-rotate-left"
+    text: "History"
   headline: "Follow our"
-  headline_accent: "Journey"
+  headline_accent: "journey"
   subheadline: "From humble beginnings to industry leaders"
   items:
   - year: "2017"
-    title: "The Beginning"
+    title: "The beginning"
     description: "{{ site.brand.name }} was founded with a vision to revolutionize the industry"
   - year: "2018"
-    title: "Rapid Growth"
+    title: "Rapid growth"
     description: "Expanded our team and launched our flagship platform to thousands of users"
   - year: "2020"
-    title: "Global Expansion"
+    title: "Global expansion"
     description: "Reached customers in over 100 countries and opened international offices"
   - year: "2023"
-    title: "Innovation Award"
+    title: "Innovation award"
     description: "Recognized as Industry Leader and received multiple awards for innovation"
   - year: "{{ site.uj.date.year }}"
-    title: "The Future"
+    title: "The future"
     description: "Continuing to push boundaries and build the future of business technology"
 
 # Company Stats
 stats:
-  superheadline: "{% uj_icon 'chart-line' %} Numbers"
+  superheadline:
+    icon: "chart-line"
+    text: "Numbers"
   headline: "Measuring our"
-  headline_accent: "Impact"
+  headline_accent: "impact"
   subheadline: "The milestones that define our growth"
   items:
   - number: "2017"
@@ -65,29 +69,33 @@ stats:
 
 # Company Values Section
 values:
-  superheadline: "{% uj_icon 'compass' %} Principles"
-  headline: "Our Core"
-  headline_accent: "Values"
+  superheadline:
+    icon: "compass"
+    text: "Principles"
+  headline: "Our core"
+  headline_accent: "values"
   subheadline: "The principles that guide everything we do"
   items:
-  - title: "Innovation First"
+  - title: "Innovation first"
     description: "We push boundaries and challenge the status quo to create breakthrough solutions that transform how businesses operate"
     icon: "rocket"
-  - title: "Customer Obsessed"
+  - title: "Customer obsessed"
     description: "Everything we do is focused on delivering exceptional value to our customers. Their success is our success"
     icon: "heart"
-  - title: "Team Excellence"
+  - title: "Team excellence"
     description: "We hire the best talent and create an environment where everyone can thrive, learn, and make an impact"
     icon: "users"
-  - title: "Transparent Culture"
+  - title: "Transparent culture"
     description: "We believe in open communication, honest feedback, and shared decision-making at every level"
     icon: "magnifying-glass"
 
 # Team CTA Section
 team_cta:
-  superheadline: "{% uj_icon 'handshake' %} People"
-  headline: "Meet Our Amazing"
-  headline_accent: "Team"
+  superheadline:
+    icon: "handshake"
+    text: "People"
+  headline: "Meet our amazing"
+  headline_accent: "team"
   subheadline: "Get to know the passionate individuals behind {{ site.brand.name }} who work every day to make your experience exceptional"
   button:
     text: "Meet the Team"
@@ -116,8 +124,13 @@ team_cta:
 <section class="pt-0">
   <div class="container">
     <div class="text-center mb-5" data-lazy="@class animation-slide-up">
-      {% iftruthy page.resolved.story.superheadline %}
-        <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">{{ page.resolved.story.superheadline }}</span>
+      {% iftruthy page.resolved.story.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.story.superheadline.icon %}
+            {% uj_icon page.resolved.story.superheadline.icon, "me-1" %}
+          {% endiftruthy %}
+          {{ page.resolved.story.superheadline.text }}
+        </span>
       {% endiftruthy %}
       <h2 class="h2 mb-2">
         {{ page.resolved.story.headline }} <span class="text-accent">{{ page.resolved.story.headline_accent }}</span>
@@ -205,8 +218,13 @@ team_cta:
 <section>
   <div class="container">
     <div class="text-center mb-5" data-lazy="@class animation-slide-up">
-      {% iftruthy page.resolved.stats.superheadline %}
-        <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">{{ page.resolved.stats.superheadline }}</span>
+      {% iftruthy page.resolved.stats.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.stats.superheadline.icon %}
+            {% uj_icon page.resolved.stats.superheadline.icon, "me-1" %}
+          {% endiftruthy %}
+          {{ page.resolved.stats.superheadline.text }}
+        </span>
       {% endiftruthy %}
       <h2 class="h2 mb-2">
         {{ page.resolved.stats.headline }}
@@ -237,8 +255,13 @@ team_cta:
 <section>
   <div class="container">
     <div class="text-center mb-5" data-lazy="@class animation-slide-up">
-      {% iftruthy page.resolved.values.superheadline %}
-        <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">{{ page.resolved.values.superheadline }}</span>
+      {% iftruthy page.resolved.values.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.values.superheadline.icon %}
+            {% uj_icon page.resolved.values.superheadline.icon, "me-1" %}
+          {% endiftruthy %}
+          {{ page.resolved.values.superheadline.text }}
+        </span>
       {% endiftruthy %}
       <h2 class="h2 mb-2">
         {{ page.resolved.values.headline }} <span class="text-accent">{{ page.resolved.values.headline_accent }}</span>
@@ -269,21 +292,40 @@ team_cta:
 <!-- Team CTA Section -->
 <section>
   <div class="container">
-    <div class="rounded-4 p-5 bg-primary bg-gradient text-light text-center" data-lazy="@class animation-slide-up">
-      <div class="row justify-content-center">
-        <div class="col-lg-8">
-          {% iftruthy page.resolved.team_cta.superheadline %}
-            <span class="badge bg-white bg-opacity-25 text-light p-2 mb-1 fw-semibold small">{{ page.resolved.team_cta.superheadline }}</span>
-          {% endiftruthy %}
-          <h2 class="h2 mb-2">
-            {{ page.resolved.team_cta.headline }} <span class="text-accent">{{ page.resolved.team_cta.headline_accent }}</span>
-          </h2>
-          {% iftruthy page.resolved.team_cta.subheadline %}
-            <p class="fs-5 mb-4 opacity-90">
-              {{ page.resolved.team_cta.subheadline }}
-            </p>
+    <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 "users", "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 "heart", "text-white" %}
+      </div>
+
+      <div class="position-relative">
+        {% iftruthy page.resolved.team_cta.superheadline.text %}
+          <span class="badge bg-white bg-opacity-25 text-light p-2 mb-3 fw-semibold small">
+            {% iftruthy page.resolved.team_cta.superheadline.icon %}
+              {% uj_icon page.resolved.team_cta.superheadline.icon, "me-1" %}
+            {% endiftruthy %}
+            {{ page.resolved.team_cta.superheadline.text }}
+          </span>
+        {% endiftruthy %}
+
+        <h2 class="h3 fw-bold mb-3">
+          {{ page.resolved.team_cta.headline }}
+          {% iftruthy page.resolved.team_cta.headline_accent %}
+            {{ page.resolved.team_cta.headline_accent }}
           {% endiftruthy %}
-          <a href="{{ page.resolved.team_cta.button.href }}" class="btn btn-light btn-lg px-5 py-3">
+        </h2>
+
+        {% iftruthy page.resolved.team_cta.subheadline %}
+          <p class="lead mb-4">{{ page.resolved.team_cta.subheadline }}</p>
+        {% endiftruthy %}
+
+        <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
+          <a href="{{ page.resolved.team_cta.button.href }}" class="btn btn-light btn-lg px-4">
             {% uj_icon page.resolved.team_cta.button.icon, "me-2" %}
             {{ page.resolved.team_cta.button.text }}
           </a>

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

@@ -800,7 +800,7 @@ badges:
                       {% endiftruthy %}
                     </div>
                     <div>
-                      <strong>{{ method.name }}</strong>
+                      <h6 class="mb-0">{{ method.name }}</h6>
                       <div class="text-muted small" id="{{ method.id }}-email"></div>
                     </div>
                   </div>
@@ -845,7 +845,18 @@ badges:
 
         <div class="card">
           <div class="card-body">
-            <h5 class="card-title">Active Sessions</h5>
+            <div class="d-flex justify-content-between align-items-center mb-3">
+              <h5 class="card-title mb-0">Active Sessions</h5>
+              <form id="signout-all-sessions-form" class="d-inline" novalidate>
+                <input type="hidden" name="action" value="signout-all">
+                <button type="submit" class="btn btn-outline-danger btn-sm">
+                  {% uj_icon "right-from-bracket", "me-1" %}
+                  <span class="button-text">
+                    Sign out<span class="d-none d-md-inline"> of all sessions</span>
+                  </span>
+                </button>
+              </form>
+            </div>
             <p class="card-text text-muted">Manage your active sessions across devices. Review and revoke access from unrecognized devices.</p>
 
             <div id="active-sessions-list" class="list-group list-group-flush mb-3">
@@ -856,15 +867,6 @@ badges:
                 </div>
               </div>
             </div>
-
-            <!-- Sign out of all sessions -->
-            <form id="signout-all-sessions-form" class="d-grid d-sm-block" novalidate>
-              <input type="hidden" name="action" value="signout-all">
-              <button type="submit" class="btn btn-outline-danger">
-                {% uj_icon "right-from-bracket", "me-1" %}
-                <span class="button-text">Sign out of all sessions</span>
-              </button>
-            </form>
           </div>
         </div>
       </section>
@@ -1074,7 +1076,17 @@ badges:
 
         <div class="card">
           <div class="card-body">
-            <h5 class="card-title">Your API Key</h5>
+            <div class="d-flex justify-content-between align-items-center mb-3">
+              <h5 class="card-title mb-0">Your API Key</h5>
+              <form id="reset-api-key-form" class="d-inline" novalidate>
+                <button type="submit" class="btn btn-outline-danger btn-sm" id="reset-api-key-btn">
+                  {% uj_icon "rotate", "me-1" %}
+                  <span class="button-text">
+                    Reset<span class="d-none d-md-inline"> API Key</span>
+                  </span>
+                </button>
+              </form>
+            </div>
             <p class="card-text text-muted">Use this private key to authenticate API requests. Keep it secure and never share it publicly.</p>
 
             <!-- API Key Display -->
@@ -1090,21 +1102,14 @@ badges:
             </div>
 
             <!-- Reset API Key -->
-            <div class="alert alert-warning d-flex align-items-start" role="alert">
+            <div class="alert alert-warning d-flex align-items-center" role="alert">
               <div class="me-3">
-                {% uj_icon "triangle-exclamation", "fa-lg" %}
+                {% uj_icon "triangle-exclamation", "fa-2xl" %}
               </div>
               <div class="flex-grow-1">
                 <strong>Warning:</strong> Resetting your API key will invalidate the current key. Any applications using the old key will stop working.
               </div>
             </div>
-
-            <form id="reset-api-key-form" class="d-grid d-sm-block" novalidate>
-              <button type="submit" class="btn btn-danger" id="reset-api-key-btn">
-                {% uj_icon "rotate", "me-2" %}
-                <span class="button-text">Reset API Key</span>
-              </button>
-            </form>
           </div>
         </div>
       </section>

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/auth/signin.html

@@ -63,7 +63,7 @@ social_signin:
           <label for="email" class="form-label fw-semibold">
             Email <span class="text-danger">*</span>
           </label>
-          <input type="email" class="form-control form-control-md" id="email" name="email" placeholder="Enter your email" autocomplete="email" autofocus required>
+          <input type="email" class="form-control form-control-md" id="email" name="email" placeholder="Enter your email" autocomplete="email" autofocus>
         </div>
 
         <div class="mb-3 text-start">
@@ -71,7 +71,7 @@ social_signin:
             Password <span class="text-danger">*</span>
           </label>
           <div class="input-group">
-            <input type="password" class="form-control form-control-md" id="password" name="password" placeholder="Enter your password" autocomplete="current-password" required>
+            <input type="password" class="form-control form-control-md" id="password" name="password" placeholder="Enter your password" autocomplete="current-password">
             <button class="btn border uj-password-toggle px-3" type="button" aria-label="Toggle password visibility">
               <span class="uj-password-show">{% uj_icon "eye", "fa-fw" %}</span>
               <span class="uj-password-hide d-none">{% uj_icon "eye-slash", "fa-fw" %}</span>

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/auth/signup.html

@@ -73,7 +73,7 @@ social_signup:
           <label for="email" class="form-label fw-semibold">
             Email <span class="text-danger">*</span>
           </label>
-          <input type="email" class="form-control form-control-md" id="email" name="email" placeholder="Enter your email" autocomplete="email" autofocus required>
+          <input type="email" class="form-control form-control-md" id="email" name="email" placeholder="Enter your email" autocomplete="email" autofocus>
         </div>
 
         <div class="mb-3 text-start">
@@ -81,7 +81,7 @@ social_signup:
             Password <span class="text-danger">*</span>
           </label>
           <div class="input-group">
-            <input type="password" class="form-control form-control-md" id="password" name="password" placeholder="Create a strong password" autocomplete="new-password" required>
+            <input type="password" class="form-control form-control-md" id="password" name="password" placeholder="Create a strong password" autocomplete="new-password">
             <button class="btn border uj-password-toggle px-3" type="button" aria-label="Toggle password visibility">
               <span class="uj-password-show">{% uj_icon "eye", "fa-fw" %}</span>
               <span class="uj-password-hide d-none">{% uj_icon "eye-slash", "fa-fw" %}</span>

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

@@ -6,14 +6,16 @@ layout: themes/[ site.theme.id ]/frontend/core/base
 # Hero Section
 hero:
   headline: "The {{ site.brand.name }}"
-  headline_accent: "Blog"
+  headline_accent: "blog"
   subheadline: "Discover insights, tutorials, and news from our team"
 
 # Newsletter CTA Section
 newsletter_cta:
-  superheadline: "{% uj_icon 'envelope' %} Newsletter"
-  headline: "Never Miss a"
-  headline_accent: "Post"
+  superheadline:
+    icon: "envelope"
+    text: "Newsletter"
+  headline: "Never miss a"
+  headline_accent: "post"
   subheadline: "Get the latest insights delivered straight to your inbox. No spam, unsubscribe anytime."
   button:
     text: "Subscribe"
@@ -32,7 +34,7 @@ newsletter_cta:
           {{ page.resolved.hero.headline }} <span class="text-gradient-rainbow">{{ page.resolved.hero.headline_accent }}</span>
         </h1>
         {% iftruthy page.resolved.hero.subheadline %}
-          <p class="fs-5 text-muted mb-0">
+          <p class="fs-5 text-muted">
             {{ page.resolved.hero.subheadline }}
           </p>
         {% endiftruthy %}
@@ -229,64 +231,76 @@ newsletter_cta:
 
 <!-- Newsletter CTA -->
 <section>
-  <div class="container" data-lazy="@class animation-slide-up">
-    <div class="rounded-4 p-5 position-relative overflow-hidden bg-primary bg-gradient">
-      <div class="row align-items-center py-4">
-        <div class="col-lg-6 text-light">
-          {% iftruthy page.resolved.newsletter_cta.superheadline %}
-            <span class="badge bg-white bg-opacity-25 text-light p-2 mb-1 fw-semibold small">{{ page.resolved.newsletter_cta.superheadline }}</span>
-          {% endiftruthy %}
-          <h2 class="h2 mb-2">
-            {{ page.resolved.newsletter_cta.headline }}
-            {% iftruthy page.resolved.newsletter_cta.headline_accent %}
-              <span class="text-accent">{{ page.resolved.newsletter_cta.headline_accent }}</span>
+  <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 "pen-nib", "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 "book-open", "text-white" %}
+      </div>
+
+      <div class="position-relative">
+        {% iftruthy page.resolved.newsletter_cta.superheadline.text %}
+          <span class="badge bg-white bg-opacity-25 text-light p-2 mb-3 fw-semibold small">
+            {% iftruthy page.resolved.newsletter_cta.superheadline.icon %}
+              {% uj_icon page.resolved.newsletter_cta.superheadline.icon, "me-1" %}
             {% endiftruthy %}
-          </h2>
-          {% iftruthy page.resolved.newsletter_cta.subheadline %}
-            <p class="fs-5 mb-4 opacity-90">
-              {{ page.resolved.newsletter_cta.subheadline }}
-            </p>
+            {{ page.resolved.newsletter_cta.superheadline.text }}
+          </span>
+        {% endiftruthy %}
+
+        <h2 class="h3 fw-bold mb-3">
+          {{ page.resolved.newsletter_cta.headline }}
+          {% iftruthy page.resolved.newsletter_cta.headline_accent %}
+            {{ page.resolved.newsletter_cta.headline_accent }}
           {% endiftruthy %}
-        </div>
-        <div class="col-lg-6">
-          <!-- Newsletter Form -->
-          <form id="newsletter-form" class="newsletter-form">
-            <div class="row g-2">
-              <div class="col-md-8">
-                <input
-                  type="email"
-                  class="form-control form-control-lg"
-                  placeholder="{{ page.resolved.newsletter_cta.form.placeholder }}"
-                  name="email"
-                  required
-                  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
-                  autocomplete="email"
-                >
-                <div class="invalid-feedback text-start">
-                  Please enter a valid email address.
-                </div>
-              </div>
-              <div class="col-md-4">
-                <button type="submit" class="btn btn-adaptive btn-lg px-4 w-100">
-                  {{ page.resolved.newsletter_cta.button.text }}
-                  <span class="spinner-border spinner-border-sm ms-2 d-none" role="status">
-                    <span class="visually-hidden">Loading...</span>
-                  </span>
-                </button>
-              </div>
-            </div>
+        </h2>
+
+        {% iftruthy page.resolved.newsletter_cta.subheadline %}
+          <p class="lead mb-4">{{ page.resolved.newsletter_cta.subheadline }}</p>
+        {% endiftruthy %}
 
-            <!-- Success/Error Messages -->
-            <div class="newsletter-success-alert alert alert-success mt-3 d-none" role="alert">
-              {% uj_icon "check-circle", "me-2" %}
-              {{ page.resolved.newsletter_cta.form.success_message }}
+        <!-- Newsletter Form -->
+        <form id="newsletter-form" class="newsletter-form">
+          <div class="row g-3 justify-content-center">
+            <div class="col-md-7">
+              <input
+                type="email"
+                class="form-control form-control-lg"
+                placeholder="{{ page.resolved.newsletter_cta.form.placeholder }}"
+                name="email"
+                required
+                pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
+                autocomplete="email"
+              >
+              <div class="invalid-feedback text-start">
+                Please enter a valid email address.
+              </div>
             </div>
-            <div class="newsletter-error-alert alert alert-danger mt-3 d-none" role="alert">
-              {% uj_icon "exclamation-circle", "me-2" %}
-              <span class="error-message">{{ page.resolved.newsletter_cta.form.error_message }}</span>
+            <div class="col-md-auto">
+              <button type="submit" class="btn btn-light btn-lg px-4">
+                {{ page.resolved.newsletter_cta.button.text }}
+                <span class="spinner-border spinner-border-sm ms-2 d-none" role="status">
+                  <span class="visually-hidden">Loading...</span>
+                </span>
+              </button>
             </div>
-          </form>
-        </div>
+          </div>
+
+          <!-- Success/Error Messages -->
+          <div class="newsletter-success-alert alert alert-success mt-3 d-none" role="alert">
+            {% uj_icon "check-circle", "me-2" %}
+            {{ page.resolved.newsletter_cta.form.success_message }}
+          </div>
+          <div class="newsletter-error-alert alert alert-danger mt-3 d-none" role="alert">
+            {% uj_icon "exclamation-circle", "me-2" %}
+            <span class="error-message">{{ page.resolved.newsletter_cta.form.error_message }}</span>
+          </div>
+        </form>
       </div>
     </div>
   </div>

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/blog/post.html

@@ -20,13 +20,15 @@ author_section:
 
 related_posts:
   headline: "Related"
-  headline_accent: "Posts"
+  headline_accent: "posts"
   limit: 3
 
 newsletter:
-  superheadline: "{% uj_icon 'envelope' %} Newsletter"
+  superheadline:
+    icon: "envelope"
+    text: "Newsletter"
   headline: "Stay in the"
-  headline_accent: "Loop"
+  headline_accent: "loop"
   subheadline: "Join our newsletter and get resources, curated content, and inspiration delivered straight to your inbox."
   button:
     text: "Submit"
@@ -39,7 +41,7 @@ newsletter:
   <div class="container">
     <div class="row justify-content-center mb-3">
       <div class="col-xl-8 col-lg-8 col-md-12 col-12">
-        <header class="text-center mb-4" data-lazy="@class animation-slide-up">
+        <header class="text-center mb-5" data-lazy="@class animation-slide-up">
           <h1 class="h1 fw-bold mb-0">{{ page.post.title }}</h1>
         </header>
 
@@ -257,32 +259,47 @@ newsletter:
 <section>
   <div class="container">
     <div class="row justify-content-center">
-      <div class="col-xl-8 col-lg-8 col-md-12 col-12" data-lazy="@class animation-slide-up">
-        <div class="card">
-          <div class="card-body p-5">
-            <div class="text-center mb-4">
-              {% iftruthy page.resolved.newsletter.superheadline %}
-                <span class="badge bg-body-tertiary border-gradient-rainbow border-1 text-body p-2 mb-1 fw-semibold small">
-                  {{ page.resolved.newsletter.superheadline }}
-                </span>
-              {% endiftruthy %}
-              {% iftruthy page.resolved.newsletter.headline %}
-                <h2 class="h2 fw-bold mb-2">
-                  {{ page.resolved.newsletter.headline }}{% iftruthy page.resolved.newsletter.headline_accent %} <span class="text-accent">{{ page.resolved.newsletter.headline_accent }}</span>{% endiftruthy %}
-                </h2>
-              {% endiftruthy %}
-              {% iftruthy page.resolved.newsletter.subheadline %}
-                <p class="mb-0 lead">
-                  {{ page.resolved.newsletter.subheadline }}
-                </p>
-              {% endiftruthy %}
-            </div>
-            <form class="row px-md-8 mx-md-8 gx-2 needs-validation" action="{{ site.url }}/email-subscription">
-              <div class="col">
-                <input type="email" name="email" class="form-control" placeholder="{% iftruthy page.resolved.newsletter.form.placeholder %}{{ page.resolved.newsletter.form.placeholder }}{% endiftruthy %}" autocomplete="email" required>
+      <div class="col-xl-8 col-lg-8 col-md-12 col-12">
+        <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 "comments", "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 "rss", "text-white" %}
+          </div>
+
+          <div class="position-relative">
+            {% iftruthy page.resolved.newsletter.superheadline.text %}
+              <span class="badge bg-white bg-opacity-25 text-light p-2 mb-3 fw-semibold small">
+                {% iftruthy page.resolved.newsletter.superheadline.icon %}
+                  {% uj_icon page.resolved.newsletter.superheadline.icon, "me-1" %}
+                {% endiftruthy %}
+                {{ page.resolved.newsletter.superheadline.text }}
+              </span>
+            {% endiftruthy %}
+
+            {% iftruthy page.resolved.newsletter.headline %}
+              <h2 class="h3 fw-bold mb-3">
+                {{ page.resolved.newsletter.headline }}
+                {% iftruthy page.resolved.newsletter.headline_accent %}
+                  {{ page.resolved.newsletter.headline_accent }}
+                {% endiftruthy %}
+              </h2>
+            {% endiftruthy %}
+
+            {% iftruthy page.resolved.newsletter.subheadline %}
+              <p class="lead mb-4">{{ page.resolved.newsletter.subheadline }}</p>
+            {% endiftruthy %}
+
+            <form class="row g-3 justify-content-center needs-validation" action="{{ site.url }}/email-subscription">
+              <div class="col-md-7">
+                <input type="email" name="email" class="form-control form-control-lg" placeholder="{% iftruthy page.resolved.newsletter.form.placeholder %}{{ page.resolved.newsletter.form.placeholder }}{% endiftruthy %}" autocomplete="email" required>
               </div>
-              <div class="col-auto">
-                <button type="submit" class="btn btn-primary">{% iftruthy page.resolved.newsletter.button.text %}{{ page.resolved.newsletter.button.text }}{% endiftruthy %}</button>
+              <div class="col-md-auto">
+                <button type="submit" class="btn btn-light btn-lg px-4">{% iftruthy page.resolved.newsletter.button.text %}{{ page.resolved.newsletter.button.text }}{% endiftruthy %}</button>
               </div>
             </form>
           </div>