feat: donation hero cta

site/index.html

@@ -140,12 +140,18 @@
       .cta-button i {
         margin-right: 0.5rem;
       }
+
+      .hero-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+      }
       
       .hero-cta {
         text-align: center;
         margin: 2rem 0;
         padding: 2rem;
-        background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
+        background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%) !important;
         border-radius: 16px;
         color: white;
         box-sizing: border-box;
@@ -280,6 +286,13 @@
           text-align: center;
         }
       }
+
+      @media (max-width: 720px) {
+        .hero-grid {
+          grid-template-columns: 1fr;
+          gap: 0;
+        }
+      }
       
       /* Animation for fade-in */
       @keyframes fadeIn {
@@ -570,6 +583,19 @@
         color: var(--foreground);
       }
       
+      /* Donation CTA card dark mode support */
+      html.is-dark .card[style*="background: linear-gradient(135deg, #10b981"],
+      html.is-dark .card[style*="background:linear-gradient(135deg, #10b981"] {
+        background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
+        border-color: #059669 !important;
+      }
+      
+      html.is-dark .card[style*="background: linear-gradient(135deg, #10b981"] .stat-card,
+      html.is-dark .card[style*="background:linear-gradient(135deg, #10b981"] .stat-card {
+        background: rgba(30, 30, 30, 0.95) !important;
+        border-color: #404040;
+      }
+      
       @media (max-width: 768px) {
         .testimonials-preview {
           grid-template-columns: 1fr;
@@ -600,8 +626,9 @@
         </p>
       </section>
 
+      <div class="hero-grid">
       <!-- Hero CTA - Early conversion opportunity -->
-      <section class="hero-cta fade-in" role="region" aria-label="Join our community">
+      <section class="hero-cta fade-in card" role="region" aria-label="Join our community">
         <h2>Ready to Join an Amazing Community?</h2>
         <p style="font-size: 1.1rem; margin-bottom: 1.5rem;">
           Connect with developers, get mentorship, and be part of an inclusive tech community. No application needed - just click and join!
@@ -609,11 +636,20 @@
         <a href="https://chat.nhcarrigan.com" target="_blank" class="cta-button" aria-label="Join our Discord community">
           <i class="fab fa-discord" aria-hidden="true"></i> Join Discord Community
         </a>
-        <a href="https://donate.nhcarrigan.com" target="_blank" class="cta-button cta-button-donate" aria-label="Support NHCarrigan with a donation" rel="noopener noreferrer">
-          <i class="fas fa-heart" aria-hidden="true"></i> Support Us
-        </a>
       </section>
 
+      <!-- Donation CTA - Compact version -->
+      <section class="card fade-in" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-color: #10b981; border-width: 3px; text-align: center;" role="region" aria-label="Support our mission">
+        <h2 style="margin-top: 0; color: white;">Support Our Mission</h2>
+        <p style="color: white; font-size: 1rem; margin-bottom: 1.5rem;">
+          Help us continue building inclusive tech communities. Your support keeps our 50+ products running and enables countless pro-bono services.
+        </p>
+        <a href="https://donate.nhcarrigan.com" target="_blank" class="cta-button" style="background: white; color: #10b981;" aria-label="Support NHCarrigan with a donation" rel="noopener noreferrer">
+            <i class="fas fa-heart" aria-hidden="true"></i> Donate Now
+          </a>
+        </section>
+      </div>
+
       <section class="fade-in" role="region" aria-labelledby="keep-reading">
         <p>Need to know more about us before joining? That's okay! Let us properly introduce ourselves...</p>
       </section>
@@ -941,6 +977,41 @@
         </p>
       </section>
 
+      <!-- Donation CTA Card -->
+      <section class="card fade-in" role="region" aria-labelledby="donation-cta">
+        <h2 id="donation-cta" style="margin-top: 0; text-align: center;">Support Our Mission</h2>
+        <p style="text-align: center; margin-bottom: 2rem; font-size: 1.1rem;">
+          Help us continue building inclusive tech communities and providing free, open-source tools for everyone.
+        </p>
+        
+        <div class="stats-grid">
+          <div class="stat-card">
+            <div class="stat-number" style="color: #10b981;">$250-$500</div>
+            <div class="stat-label">Monthly Operating Costs</div>
+          </div>
+          
+          <div class="stat-card">
+            <div class="stat-number" style="color: #10b981;">50+</div>
+            <div class="stat-label">Products Offered</div>
+          </div>
+          
+          <div class="stat-card">
+            <div class="stat-number" style="color: #10b981;">Countless</div>
+            <div class="stat-label">Pro-Bono Services</div>
+          </div>
+        </div>
+        
+        <p style="text-align: center; margin-top: 2rem;">
+          Your support helps us maintain our infrastructure, develop new features, and continue offering free services to communities worldwide.
+        </p>
+        
+        <p style="text-align: center; margin-top: 1.5rem;">
+          <a href="https://donate.nhcarrigan.com" target="_blank" class="cta-button cta-button-donate" style="font-size: 1.2rem; padding: 1.2rem 2.5rem;" aria-label="Support NHCarrigan with a donation" rel="noopener noreferrer">
+            <i class="fas fa-heart" aria-hidden="true"></i> Donate Now
+          </a>
+        </p>
+      </section>
+
       <!-- Frequently Asked Questions -->
       <section class="fade-in" role="region" aria-labelledby="faq">
         <h2 id="faq">Frequently Asked Questions</h2>