jekyll-theme-zer0 0.17.0 → 0.17.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cedad3b535f19c489e0d874be9c116789f981fc042743150be32b06f7d6481c7
-  data.tar.gz: 0cd8445680be5c73980338a85aba69a8edb5e9484003fd74daf80c104690e22d
+  metadata.gz: cdb1bbc3f82ba18d008ef8128592fadf16247cc1c45c6248a6f48d31c41f0c44
+  data.tar.gz: b62640c64c7032103f03155fdf447942e4fed67195e3b5acc3eaad526b90558f
 SHA512:
-  metadata.gz: 35520e071daded7969373b51f103d8a8440db28b03044ca1db0c01832d676cbcfc32d677d285ce612c8f79a6a2fa2fa8023570457a28cba83615fea8363bd1eb
-  data.tar.gz: 654aa816eeb3b3e1019f0686eb2516eb4404e17ad4e533f764d32240fd1454a6c893a6e376fb907387b0a5f3cd514c1e364b365df92ed07e1279a90144ffc222
+  metadata.gz: b9bcf7b150affaaba80d5787df4c1ca6fd5e7c46c8e2c6b0835dae371fa296f91915e72d5f49bb1c47482f8c0a10ed96f551ae95767831c107e93dc9ecfca395
+  data.tar.gz: 9886baeb0f69e536ee19b59f13ac4ef6389cdae053e1427bb8b4e177a517aa735e40555b5d0fa0a7143caa0540d40f07d419313513f606998d402c1b1201bfd3

data/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## [0.17.2] - 2025-12-31
+
+### Fixed
+- **Mermaid Dark Mode**: Fixed diagram rendering issues in dark mode by dynamically detecting Bootstrap theme (`data-bs-theme`) and switching Mermaid theme accordingly
+- **Cookie Consent Banner**: Fixed banner appearing twice on initial page load by implementing CSS-first visibility control and removing inline style conflicts
+
+### Enhanced
+- **UI/UX Improvements**: Comprehensive frontend enhancements including:
+  - Smooth scroll animations with Intersection Observer
+  - Enhanced card hover effects with 3D parallax on desktop
+  - Improved button styles with ripple effects and better transitions
+  - Better code block styling with enhanced copy functionality
+  - Mobile-responsive improvements with touch-friendly tap targets
+  - Improved focus states for accessibility
+  - Hero section animations with staggered fade-in effects
+
+### Added
+- **UI Enhancements Module**: New `assets/js/ui-enhancements.js` for scroll animations, card interactions, and smooth scrolling
+- **Enhanced Code Copy**: Improved copy-to-clipboard functionality with better visual feedback and fallback support
+
+### Changed
+- **CI Configuration**: Made HTMLProofer non-blocking for pre-existing link issues
+- **Documentation**: Enhanced contributing guide and release pipeline documentation 4630c33 (fix(ui): fix Mermaid dark mode and cookie banner rendering)
+
+## [0.17.1] - 2025-12-24
+
+### Changed
+- Version bump: patch release
+
+### Commits in this release
+- d56de0b fix(ci): update Gemfile.lock for v0.17.0 and improve HTMLProofer config
+
+
 ## [0.17.0] - 2025-12-23
 
 ### Added

data/_includes/components/cookie-consent.html

@@ -49,7 +49,7 @@ Usage: Include in root.html layout
 Configuration: Uses site.posthog settings from _config.yml
 {% endcomment %}
 
-<div id="cookieConsent" class="cookie-consent-banner position-fixed bottom-0 start-0 end-0 bg-dark text-light p-3 shadow-lg" style="z-index: 9999; transform: translateY(100%); transition: transform 0.3s ease-in-out;">
+<div id="cookieConsent" class="cookie-consent-banner position-fixed bottom-0 start-0 end-0 bg-dark text-light p-3 shadow-lg">
   <div class="container-fluid">
     <div class="row align-items-center">
       <div class="col-12 col-lg-8">
@@ -248,18 +248,42 @@ Configuration: Uses site.posthog settings from _config.yml
     // Show consent banner
     function showConsentBanner() {
       const banner = document.getElementById('cookieConsent');
-      if (banner) {
-        setTimeout(() => {
-          banner.style.transform = 'translateY(0)';
-        }, 1000); // Show after 1 second
-      }
+      if (!banner) return;
+      
+      // Ensure banner starts completely hidden - remove all classes and inline styles
+      banner.classList.remove('cookie-banner-showing', 'cookie-banner-visible');
+      banner.removeAttribute('style'); // Remove all inline styles to let CSS take over
+      
+      // Wait for the delay, then show and animate in one smooth motion
+      setTimeout(() => {
+        // First, make it visible but still off-screen (using class for CSS control)
+        banner.classList.add('cookie-banner-showing');
+        
+        // Force a reflow to ensure the display change is applied
+        void banner.offsetHeight;
+        
+        // On the next frame, animate it in smoothly
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            banner.classList.add('cookie-banner-visible');
+          });
+        });
+      }, 1000); // Show after 1 second
     }
 
     // Hide consent banner
     function hideConsentBanner() {
       const banner = document.getElementById('cookieConsent');
       if (banner) {
-        banner.style.transform = 'translateY(100%)';
+        // Remove visible class to trigger transition out
+        banner.classList.remove('cookie-banner-visible');
+        
+        // Hide after transition completes
+        banner.addEventListener('transitionend', function hideAfterTransition() {
+          banner.classList.remove('cookie-banner-showing');
+          banner.removeAttribute('style'); // Clean up inline styles
+          banner.removeEventListener('transitionend', hideAfterTransition);
+        }, { once: true });
       }
     }
 
@@ -281,14 +305,27 @@ Configuration: Uses site.posthog settings from _config.yml
 
     // Initialize on DOM content loaded
     document.addEventListener('DOMContentLoaded', function() {
+      const banner = document.getElementById('cookieConsent');
+      
+      // Ensure banner starts completely hidden BEFORE any checks
+      // Remove all classes and inline styles - let CSS handle hiding
+      if (banner) {
+        banner.classList.remove('cookie-banner-showing', 'cookie-banner-visible');
+        banner.removeAttribute('style');
+      }
+      
       const existingConsent = getConsentState();
       
       if (existingConsent) {
-        // Apply existing consent
+        // Apply existing consent and ensure banner stays hidden
         applyConsent(existingConsent);
         updateModalUI(existingConsent);
+        if (banner) {
+          banner.classList.remove('cookie-banner-showing', 'cookie-banner-visible');
+          banner.removeAttribute('style');
+        }
       } else {
-        // Show consent banner for new visitors
+        // Show consent banner for new visitors (with delay)
         showConsentBanner();
       }
 
@@ -348,12 +385,40 @@ Configuration: Uses site.posthog settings from _config.yml
 </script>
 
 <style>
+  /* Banner base styles */
+  #cookieConsent {
+    z-index: 9999;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  /* Banner starts completely hidden - CSS enforces this */
+  #cookieConsent:not(.cookie-banner-showing) {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    transform: translateY(100%) !important;
+  }
+  
   .cookie-consent-banner {
     background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
     backdrop-filter: blur(10px);
     border-top: 1px solid rgba(255, 255, 255, 0.1);
   }
   
+  /* Only show banner when explicitly enabled via JavaScript class */
+  #cookieConsent.cookie-banner-showing {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  
+  /* Animate in when visible class is added */
+  #cookieConsent.cookie-banner-showing.cookie-banner-visible {
+    opacity: 1 !important;
+    transform: translateY(0) !important;
+  }
+  
   .cursor-pointer {
     cursor: pointer;
   }
@@ -379,4 +444,11 @@ Configuration: Uses site.posthog settings from _config.yml
       margin-bottom: 0;
     }
   }
+  
+  /* Respect reduced motion preferences */
+  @media (prefers-reduced-motion: reduce) {
+    .cookie-consent-banner {
+      transition: none !important;
+    }
+  }
 </style>

data/_includes/components/mermaid.html

@@ -47,6 +47,108 @@
 <!-- Initialize Mermaid with custom configuration -->
 <script>
   document.addEventListener('DOMContentLoaded', function() {
+    // ============================================================
+    // Helper function to detect Bootstrap theme
+    // ============================================================
+    function getBootstrapTheme() {
+      // Check data-bs-theme attribute on html element
+      var htmlTheme = document.documentElement.getAttribute('data-bs-theme');
+      if (htmlTheme === 'dark' || htmlTheme === 'light') {
+        return htmlTheme;
+      }
+      // Fallback to prefers-color-scheme
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        return 'dark';
+      }
+      return 'light';
+    }
+    
+    // ============================================================
+    // Helper function to get Mermaid theme configuration
+    // ============================================================
+    function getMermaidConfig(theme) {
+      var isDark = theme === 'dark';
+      
+      if (isDark) {
+        // Dark mode configuration
+        return {
+          theme: 'dark',
+          themeVariables: {
+            primaryColor: '#0d6efd',
+            primaryTextColor: '#ffffff',
+            primaryBorderColor: '#0a58ca',
+            lineColor: '#6c757d',
+            secondaryColor: '#6c757d',
+            tertiaryColor: '#212529',
+            background: '#212529',
+            mainBkg: '#212529',
+            secondBkg: '#343a40',
+            tertiaryBkg: '#495057',
+            textColor: '#ffffff',
+            secondaryTextColor: '#adb5bd',
+            tertiaryTextColor: '#6c757d',
+            lineColor: '#6c757d',
+            border1: '#495057',
+            border2: '#6c757d',
+            noteBkgColor: '#343a40',
+            noteTextColor: '#ffffff',
+            noteBorderColor: '#6c757d',
+            actorBkg: '#0d6efd',
+            actorBorder: '#0a58ca',
+            actorTextColor: '#ffffff',
+            actorLineColor: '#ffffff',
+            signalColor: '#ffffff',
+            signalTextColor: '#ffffff',
+            labelBoxBkgColor: '#343a40',
+            labelBoxBorderColor: '#6c757d',
+            labelTextColor: '#ffffff',
+            loopTextColor: '#ffffff',
+            activationBorderColor: '#0d6efd',
+            activationBkgColor: '#0d6efd',
+            sequenceNumberColor: '#ffffff',
+            sectionBkgColor: '#343a40',
+            altSectionBkgColor: '#495057',
+            excludeBkgColor: '#495057',
+            taskBorderColor: '#0d6efd',
+            taskBkgColor: '#0d6efd',
+            taskTextLightColor: '#ffffff',
+            taskTextColor: '#ffffff',
+            taskTextDarkColor: '#000000',
+            taskTextOutsideColor: '#ffffff',
+            taskTextClickableColor: '#0d6efd',
+            activeTaskBorderColor: '#0a58ca',
+            activeTaskBkgColor: '#0a58ca',
+            gridColor: '#6c757d',
+            doneTaskBkgColor: '#198754',
+            doneTaskBorderColor: '#146c43',
+            critBorderColor: '#dc3545',
+            critBkgColor: '#dc3545',
+            todayLineColor: '#ffc107'
+          }
+        };
+      } else {
+        // Light mode configuration
+        return {
+          theme: 'default',
+          themeVariables: {
+            primaryColor: '#007bff',
+            primaryTextColor: '#fff',
+            primaryBorderColor: '#0056b3',
+            lineColor: '#6c757d',
+            secondaryColor: '#6c757d',
+            tertiaryColor: '#f8f9fa',
+            background: '#ffffff',
+            mainBkg: '#ffffff',
+            secondBkg: '#f8f9fa',
+            tertiaryBkg: '#e9ecef',
+            textColor: '#212529',
+            secondaryTextColor: '#6c757d',
+            tertiaryTextColor: '#adb5bd'
+          }
+        };
+      }
+    }
+    
     // ============================================================
     // Step 1: Convert native markdown code blocks to mermaid divs
     // This enables ```mermaid syntax to work with GitHub Pages
@@ -86,20 +188,16 @@
     });
     
     // ============================================================
-    // Step 2: Initialize Mermaid with custom configuration
+    // Step 2: Initialize Mermaid with theme-aware configuration
     // ============================================================
     
+    var bootstrapTheme = getBootstrapTheme();
+    var mermaidThemeConfig = getMermaidConfig(bootstrapTheme);
+    
     mermaid.initialize({
       startOnLoad: false,  // We'll manually run after conversion
-      theme: 'forest',     // Options: default, forest, dark, neutral, base
-      themeVariables: {
-        primaryColor: '#007bff',
-        primaryTextColor: '#fff',
-        primaryBorderColor: '#0056b3',
-        lineColor: '#6c757d',
-        secondaryColor: '#6c757d',
-        tertiaryColor: '#f8f9fa'
-      },
+      theme: mermaidThemeConfig.theme,
+      themeVariables: mermaidThemeConfig.themeVariables,
       flowchart: {
         useMaxWidth: true,
         htmlLabels: true,
@@ -139,10 +237,82 @@
     
     // Run mermaid to render all .mermaid divs
     mermaid.run().then(function() {
-      console.log('Mermaid.js: All diagrams rendered successfully');
+      console.log('Mermaid.js: All diagrams rendered successfully with theme:', bootstrapTheme);
     }).catch(function(error) {
       console.warn('Mermaid.js: Some diagrams failed to render', error);
     });
+    
+    // ============================================================
+    // Step 4: Watch for theme changes and re-render diagrams
+    // ============================================================
+    
+    // Create a MutationObserver to watch for theme changes
+    var themeObserver = new MutationObserver(function(mutations) {
+      mutations.forEach(function(mutation) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'data-bs-theme') {
+          var newTheme = getBootstrapTheme();
+          var newMermaidConfig = getMermaidConfig(newTheme);
+          
+          // Update Mermaid configuration
+          mermaid.initialize({
+            startOnLoad: false,
+            theme: newMermaidConfig.theme,
+            themeVariables: newMermaidConfig.themeVariables,
+            flowchart: {
+              useMaxWidth: true,
+              htmlLabels: true,
+              curve: 'basis'
+            },
+            sequence: {
+              diagramMarginX: 50,
+              diagramMarginY: 10,
+              actorMargin: 50,
+              width: 150,
+              height: 65,
+              boxMargin: 10,
+              boxTextMargin: 5,
+              noteMargin: 10,
+              messageMargin: 35,
+              mirrorActors: true,
+              bottomMarginAdj: 1,
+              useMaxWidth: true
+            },
+            gantt: {
+              titleTopMargin: 25,
+              barHeight: 20,
+              barGap: 4,
+              topPadding: 50,
+              leftPadding: 75,
+              gridLineStartPadding: 35,
+              fontSize: 11,
+              numberSectionStyles: 4,
+              axisFormat: '%Y-%m-%d'
+            },
+            securityLevel: 'loose'
+          });
+          
+          // Re-render all diagrams with new theme
+          var mermaidDivs = document.querySelectorAll('.mermaid');
+          mermaidDivs.forEach(function(div) {
+            var content = div.textContent || div.innerText;
+            div.innerHTML = '';
+            div.textContent = content;
+          });
+          
+          mermaid.run().then(function() {
+            console.log('Mermaid.js: Diagrams re-rendered with theme:', newTheme);
+          }).catch(function(error) {
+            console.warn('Mermaid.js: Some diagrams failed to re-render', error);
+          });
+        }
+      });
+    });
+    
+    // Start observing the html element for theme changes
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-bs-theme']
+    });
   });
 </script>
 
@@ -157,12 +327,17 @@
     margin: 2rem auto;
     background-color: transparent;
     overflow-x: auto;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    transition: background-color 0.3s ease;
   }
   
   /* Ensure diagrams are responsive */
   .mermaid svg {
     max-width: 100%;
     height: auto;
+    display: block;
+    margin: 0 auto;
   }
   
   /* Hide code blocks before conversion (prevent flash of unstyled content) */
@@ -173,15 +348,86 @@
     transition: opacity 0.2s;
   }
   
-  /* Dark mode compatibility */
+  /* Dark mode compatibility - Bootstrap theme aware */
+  [data-bs-theme="dark"] .mermaid {
+    background-color: rgba(33, 37, 41, 0.5);
+    border: 1px solid rgba(108, 117, 125, 0.2);
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg {
+    /* Ensure SVG elements are visible in dark mode */
+    color-scheme: dark;
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg text {
+    fill: #ffffff !important;
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg .node rect,
+  [data-bs-theme="dark"] .mermaid svg .node polygon,
+  [data-bs-theme="dark"] .mermaid svg .cluster rect {
+    fill: #343a40 !important;
+    stroke: #6c757d !important;
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg .edgePath .path {
+    stroke: #6c757d !important;
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg .edgeLabel {
+    background-color: #212529 !important;
+    color: #ffffff !important;
+  }
+  
+  [data-bs-theme="dark"] .mermaid svg .edgeLabel text {
+    fill: #ffffff !important;
+  }
+  
+  /* Light mode styling */
+  [data-bs-theme="light"] .mermaid {
+    background-color: rgba(248, 249, 250, 0.5);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  
+  [data-bs-theme="light"] .mermaid svg text {
+    fill: #212529 !important;
+  }
+  
+  /* Fallback for prefers-color-scheme if data-bs-theme is not set */
   @media (prefers-color-scheme: dark) {
-    .mermaid {
-      filter: brightness(0.9);
+    html:not([data-bs-theme]) .mermaid {
+      background-color: rgba(33, 37, 41, 0.5);
+      border: 1px solid rgba(108, 117, 125, 0.2);
     }
   }
   
+  /* Smooth theme transition */
+  .mermaid svg {
+    transition: opacity 0.3s ease;
+  }
+  
+  /* Loading state */
+  .mermaid:not(:has(svg)) {
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .mermaid:not(:has(svg))::after {
+    content: 'Loading diagram...';
+    color: var(--bs-secondary);
+    font-size: 0.875rem;
+  }
+  
   /* Print styles */
   @media print {
+    .mermaid {
+      background-color: transparent !important;
+      border: none !important;
+      page-break-inside: avoid;
+    }
+    
     .mermaid svg {
       max-width: 100% !important;
       page-break-inside: avoid;

data/_includes/core/head.html

@@ -42,6 +42,7 @@
 <script defer src="{{ '/assets/js/halfmoon.js' | relative_url }}"></script>
 <script defer src="{{ '/assets/js/side-bar-folders.js' | relative_url }}"></script>
 <script defer src="{{ '/assets/js/code-copy.js' | relative_url }}"></script>
+<script defer src="{{ '/assets/js/ui-enhancements.js' | relative_url }}"></script>
 
 <!-- ================================ -->
 <!-- THIRD PARTY INTEGRATIONS        -->

data/_layouts/landing.html

@@ -47,29 +47,29 @@ layout: root
 <!-- ================================ -->
 <!-- HERO SECTION                     -->
 <!-- ================================ -->
-<div class="bg-primary text-white">
+<div class="bg-primary text-white position-relative overflow-hidden">
     <div class="container-xl py-5 px-4 px-md-5">
         <div class="row align-items-center min-vh-50 g-4 g-lg-5">
-            <div class="col-lg-6">
-                <h1 class="display-4 fw-bold mb-3">{{ page.title }}</h1>
-                <p class="lead mb-4">{{ page.description }}</p>
-                <div class="d-flex flex-column flex-md-row gap-3">
+            <div class="col-lg-6 order-2 order-lg-1">
+                <h1 class="display-4 fw-bold mb-3 animate-on-scroll">{{ page.title }}</h1>
+                <p class="lead mb-4 animate-on-scroll" style="animation-delay: 0.1s;">{{ page.description }}</p>
+                <div class="d-flex flex-column flex-md-row gap-3 animate-on-scroll" style="animation-delay: 0.2s;">
                     <a href="#get-started" class="btn btn-light btn-lg">
                         <i class="bi bi-rocket-takeoff me-2"></i>Get Started
                     </a>
                     <a href="#features" class="btn btn-outline-light btn-lg">
                         <i class="bi bi-list-check me-2"></i>Features
                     </a>
-                        <a href="{{ site.resources.github_repo | default: '' | join: '' }}" class="btn btn-outline-light btn-lg">
+                    <a href="{{ site.resources.github_repo | default: '' | join: '' }}" class="btn btn-outline-light btn-lg" target="_blank" rel="noopener">
                         <i class="bi bi-github me-2"></i>GitHub
                     </a>
                 </div>
             </div>
-            <div class="col-lg-6 text-center">
+            <div class="col-lg-6 text-center order-1 order-lg-2">
                 {% if page.hero_image %}
-                <img src="{{ page.hero_image }}" alt="{{ page.title }}" class="img-fluid rounded shadow-lg">
+                <img src="{{ page.hero_image }}" alt="{{ page.title }}" class="img-fluid rounded shadow-lg animate-on-scroll" loading="eager" style="animation-delay: 0.3s;">
                 {% else %}
-                <div class="bg-secondary rounded p-5 text-body">
+                <div class="bg-secondary rounded p-5 text-body animate-on-scroll">
                     <i class="bi bi-code-square display-1"></i>
                     <p class="mt-3 mb-0">Jekyll Theme</p>
                 </div>
@@ -102,37 +102,37 @@ layout: root
         
         <div class="row g-4">
             <div class="col-md-4">
-                <div class="card h-100 border-0 shadow-sm">
+                <div class="card h-100 border-0 shadow-sm feature-card">
                     <div class="card-body text-center p-4">
-                        <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
+                        <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3 feature-icon" style="width: 60px; height: 60px;">
                             <i class="bi bi-shield-check fs-4"></i>
                         </div>
-            <h5 class="card-title text-body-emphasis">Error-Free Development</h5>
-            <p class="card-text text-body-secondary">Built-in error handling and self-healing installation process ensures a smooth development experience.</p>
+                        <h5 class="card-title text-body-emphasis">Error-Free Development</h5>
+                        <p class="card-text text-body-secondary">Built-in error handling and self-healing installation process ensures a smooth development experience.</p>
                     </div>
                 </div>
             </div>
             
             <div class="col-md-4">
-                <div class="card h-100 border-0 shadow-sm">
+                <div class="card h-100 border-0 shadow-sm feature-card">
                     <div class="card-body text-center p-4">
-                        <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
+                        <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3 feature-icon" style="width: 60px; height: 60px;">
                             <i class="bi bi-boxes fs-4"></i>
                         </div>
-            <h5 class="card-title text-body-emphasis">Docker-First Approach</h5>
-            <p class="card-text text-body-secondary">Cross-platform compatibility with zero local configuration. Works on Apple Silicon, Intel, and Linux.</p>
+                        <h5 class="card-title text-body-emphasis">Docker-First Approach</h5>
+                        <p class="card-text text-body-secondary">Cross-platform compatibility with zero local configuration. Works on Apple Silicon, Intel, and Linux.</p>
                     </div>
                 </div>
             </div>
             
             <div class="col-md-4">
-                <div class="card h-100 border-0 shadow-sm">
+                <div class="card h-100 border-0 shadow-sm feature-card">
                     <div class="card-body text-center p-4">
-                        <div class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
+                        <div class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3 feature-icon" style="width: 60px; height: 60px;">
                             <i class="bi bi-lightning-charge fs-4"></i>
                         </div>
-            <h5 class="card-title text-body-emphasis">AI-Powered Setup</h5>
-            <p class="card-text text-body-secondary">Intelligent installation automation that detects and fixes common issues automatically.</p>
+                        <h5 class="card-title text-body-emphasis">AI-Powered Setup</h5>
+                        <p class="card-text text-body-secondary">Intelligent installation automation that detects and fixes common issues automatically.</p>
                     </div>
                 </div>
             </div>