feat: make timeline avatars grow

site/index.html

@@ -4,7 +4,13 @@
     <title>NHCarrigan - Software Engineering & Community Management</title>
     <meta name="description" content="Building inclusive tech communities and ethical software solutions. Software engineering, community management, and mentorship services.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!--
+        MARK: Styles
+    -->
     <style>
+      /* ============================================
+         RESET & BASE STYLES
+         ============================================ */
       * {
         box-sizing: border-box;
       }
@@ -16,7 +22,83 @@
         padding: 0;
       }
 
-      /* Skip to main content for accessibility */
+      img {
+        max-width: 100%;
+        height: auto;
+      }
+
+      section {
+        width: 100%;
+        max-width: 100%;
+        box-sizing: border-box;
+      }
+
+      /* ============================================
+         TYPOGRAPHY
+         ============================================ */
+      h1, h2, h3 {
+        color: #1a1a1a;
+      }
+
+      ul {
+        list-style-type: none;
+        padding-left: 1.5rem;
+      }
+
+      li {
+        margin: 0.5rem 0;
+      }
+
+      a {
+        color: #5865F2;
+        text-decoration: underline;
+        transition: color 0.2s ease;
+      }
+
+      a:hover,
+      a:focus {
+        color: #4752C4;
+        outline: 2px solid #5865F2;
+        outline-offset: 2px;
+      }
+
+      /* ============================================
+         LAYOUT
+         ============================================ */
+      main {
+        max-width: 1200px;
+        width: 100%;
+        margin: 0 auto;
+        padding: 2rem 1rem;
+      }
+
+      .hero-image {
+        max-width: 750px;
+      }
+
+      .hero-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+      }
+
+      .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 1.5rem;
+        margin: 2rem 0;
+      }
+
+      .testimonials-preview {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 1.5rem;
+        margin: 2rem 0;
+      }
+
+      /* ============================================
+         ACCESSIBILITY
+         ============================================ */
       .skip-link {
         position: absolute;
         top: -40px;
@@ -27,36 +109,66 @@
         text-decoration: none;
         z-index: 100;
       }
+
       .skip-link:focus {
         top: 0;
       }
 
-      main {
-        max-width: 1200px;
-        width: 100%;
-        margin: 0 auto;
-        padding: 2rem 1rem;
-        box-sizing: border-box;
+      *:focus:not(:focus-visible) {
+        outline: none;
+      }
+
+      *:focus-visible {
+        outline: 2px solid #5865F2;
+        outline-offset: 2px;
+      }
+
+      button:focus-visible,
+      a:focus-visible {
+        outline: 3px solid rgba(88, 101, 242, 0.5);
+        outline-offset: 2px;
+      }
+
+      /* ============================================
+         CARDS
+         ============================================ */
+      .card,
+      .stat-card,
+      .testimonial-card,
+      .timeline-content {
+        background: white;
+        border: 2px solid #e0e0e0;
+        border-radius: 12px;
+        padding: 1.5rem;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
       }
 
       .card {
-        background: #ffffff;
-        border: 2px solid #e0e0e0;
         border-radius: 16px;
         padding: 2rem;
         margin: 2rem 0;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
-        box-sizing: border-box;
         width: 100%;
         max-width: 100%;
       }
 
-      .card:hover {
+      .card:hover,
+      .stat-card:hover,
+      .testimonial-card:hover,
+      .timeline-content:hover {
         transform: translateY(-4px);
         box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
       }
 
+      .timeline-content:hover {
+        border-color: #5865F2;
+      }
+
+      .testimonial-card {
+        display: flex;
+        flex-direction: column;
+      }
+
       .card-header {
         display: flex;
         align-items: center;
@@ -82,6 +194,9 @@
         height: auto;
       }
 
+      /* ============================================
+         BUTTONS
+         ============================================ */
       .cta-button {
         background: #5865F2;
         color: white;
@@ -94,7 +209,6 @@
         margin: 0.5rem 0.5rem 0.5rem 0;
         transition: background 0.3s ease, transform 0.2s ease;
         border: 2px solid transparent;
-        box-sizing: border-box;
         max-width: 100%;
       }
 
@@ -111,6 +225,10 @@
         transform: scale(0.98);
       }
 
+      .cta-button i {
+        margin-right: 0.5rem;
+      }
+
       .cta-button-secondary {
         background: #333;
         color: white;
@@ -133,18 +251,16 @@
         outline-color: rgba(16, 185, 129, 0.3);
       }
 
-      .cta-button i {
-        margin-right: 0.5rem;
-      }
-      
+      /* ============================================
+         HERO CTA
+         ============================================ */
       .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;
         width: 100%;
         max-width: 100%;
       }
@@ -167,21 +283,9 @@
         outline-color: rgba(255, 255, 255, 0.5);
       }
 
-      .stats-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 1.5rem;
-        margin: 2rem 0;
-      }
-      
-      .stat-card {
-        text-align: center;
-        padding: 1.5rem;
-        background: white;
-        border-radius: 12px;
-        border: 2px solid #e0e0e0;
-      }
-      
+      /* ============================================
+         STATS
+         ============================================ */
       .stat-number {
         font-size: 2.5rem;
         font-weight: bold;
@@ -194,125 +298,9 @@
         font-size: 0.9rem;
       }
 
-      h1, h2, h3 {
-        color: #1a1a1a;
-      }
-      
-      a {
-        color: #5865F2;
-        text-decoration: underline;
-        transition: color 0.2s ease;
-      }
-      
-      a:hover,
-      a:focus {
-        color: #4752C4;
-        outline: 2px solid #5865F2;
-        outline-offset: 2px;
-      }
-      
-      ul {
-        padding-left: 1.5rem;
-      }
-      
-      li {
-        margin: 0.5rem 0;
-      }
-      
-      img {
-        max-width: 100%;
-        height: auto;
-      }
-      
-      section {
-        width: 100%;
-        max-width: 100%;
-        box-sizing: border-box;
-      }
-      
-      /* Focus styles for keyboard navigation */
-      *:focus {
-        outline: 2px solid #5865F2;
-        outline-offset: 2px;
-      }
-      
-      *:focus:not(:focus-visible) {
-        outline: none;
-      }
-      
-      *:focus-visible {
-        outline: 2px solid #5865F2;
-        outline-offset: 2px;
-      }
-      
-      button:focus-visible,
-      a:focus-visible {
-        outline: 3px solid rgba(88, 101, 242, 0.5);
-        outline-offset: 2px;
-      }
-      
-      /* Responsive design */
-      @media (max-width: 768px) {
-        main {
-          padding: 1rem 0.5rem;
-        }
-        
-        .card {
-          padding: 1.5rem;
-        }
-        
-        .card-header {
-          flex-direction: column;
-          text-align: center;
-        }
-        
-        .stats-grid {
-          grid-template-columns: 1fr;
-        }
-        
-        .cta-button {
-          display: block;
-          margin: 0.5rem 0;
-          text-align: center;
-        }
-      }
-      
-      /* Animation for fade-in */
-      @keyframes fadeIn {
-        from {
-          opacity: 0;
-          transform: translateY(20px);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-      
-      .fade-in {
-        animation: fadeIn 0.6s ease-out;
-      }
-      
-      /* High contrast mode support */
-      @media (prefers-contrast: high) {
-        .card {
-          border-width: 3px;
-        }
-        
-        .cta-button {
-          border-width: 3px;
-        }
-      }
-      
-      /* Reduced motion support */
-      @media (prefers-reduced-motion: reduce) {
-        * {
-          animation: none !important;
-          transition: none !important;
-        }
-      }
-      
-      /* Timeline styles */
+      /* ============================================
+         TIMELINE
+         ============================================ */
       .timeline {
         position: relative;
         padding: 2rem 0;
@@ -347,22 +335,10 @@
       }
 
       .timeline-content {
-        background: white;
-        border: 2px solid #e0e0e0;
-        border-radius: 12px;
-        padding: 1.5rem;
         width: calc(50% - 3rem);
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
         position: relative;
       }
 
-      .timeline-content:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
-        border-color: #5865F2;
-      }
-      
       .timeline-item:nth-child(odd) .timeline-content {
         margin-right: auto;
         margin-left: 0;
@@ -388,6 +364,13 @@
         align-items: center;
         justify-content: center;
         overflow: hidden;
+        transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
+      }
+
+      .timeline-avatar:hover {
+        width: 120px;
+        height: 120px;
+        transform: translateX(-50%) scale(1);
       }
 
       .timeline-avatar img {
@@ -416,7 +399,154 @@
         font-style: italic;
       }
 
+      /* ============================================
+         TESTIMONIALS
+         ============================================ */
+      .testimonial-text {
+        flex-grow: 1;
+        font-style: italic;
+        color: #333;
+        margin-bottom: 1rem;
+        line-height: 1.6;
+      }
+
+      .testimonial-author {
+        font-weight: bold;
+        color: #1a1a1a;
+        margin-top: auto;
+        padding-top: 1rem;
+        border-top: 1px solid #f0f0f0;
+      }
+
+      .testimonial-role {
+        font-size: 0.9rem;
+        color: #666;
+        font-weight: normal;
+        font-style: normal;
+      }
+
+      /* ============================================
+         ANIMATIONS
+         ============================================ */
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+          transform: translateY(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .fade-in {
+        animation: fadeIn 0.6s ease-out;
+      }
+
+      /* ============================================
+         DARK MODE
+         ============================================ */
+      html.is-dark .card,
+      html.is-dark .stat-card,
+      html.is-dark .timeline-content,
+      html.is-dark .testimonial-card {
+        background: #1e1e1e;
+        border-color: #404040;
+        color: var(--foreground);
+      }
+
+      html.is-dark .timeline-avatar {
+        background: #1e1e1e;
+        border-color: #404040;
+      }
+
+      html.is-dark .card-header {
+        border-bottom-color: #404040;
+      }
+
+      html.is-dark .avatar-card .card-header img {
+        border-color: #404040;
+      }
+
+      html.is-dark h1,
+      html.is-dark h2,
+      html.is-dark h3,
+      html.is-dark .stat-label,
+      html.is-dark .timeline-role,
+      html.is-dark .timeline-dates,
+      html.is-dark .testimonial-text,
+      html.is-dark .testimonial-author {
+        color: var(--foreground);
+      }
+
+      html.is-dark .testimonial-author {
+        border-top-color: #404040;
+      }
+
+      html.is-dark .card[style*="background: #f8f9fa"],
+      html.is-dark .card[style*="background:#f8f9fa"],
+      html.is-dark .card[style*="background: #f0f0f0"],
+      html.is-dark .card[style*="background:#f0f0f0"] {
+        background: #1e1e1e !important;
+      }
+
+      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;
+      }
+
+      /* ============================================
+         ACCESSIBILITY MEDIA QUERIES
+         ============================================ */
+      @media (prefers-reduced-motion: reduce) {
+        * {
+          animation: none !important;
+          transition: none !important;
+        }
+      }
+
+      @media (prefers-contrast: high) {
+        .card,
+        .cta-button {
+          border-width: 3px;
+        }
+      }
+
+      /* ============================================
+         RESPONSIVE DESIGN
+         ============================================ */
       @media (max-width: 768px) {
+        main {
+          padding: 1rem 0.5rem;
+        }
+
+        .card {
+          padding: 1.5rem;
+        }
+
+        .card-header {
+          flex-direction: column;
+          text-align: center;
+        }
+
+        .stats-grid,
+        .testimonials-preview {
+          grid-template-columns: 1fr;
+        }
+
+        .cta-button {
+          display: block;
+          margin: 0.5rem 0;
+          text-align: center;
+        }
+
         .timeline::before {
           left: 2rem;
         }
@@ -437,6 +567,18 @@
           width: 60px;
           height: 60px;
         }
+
+        .timeline-avatar:hover {
+          width: 150px;
+          height: 150px;
+        }
+      }
+
+      @media (max-width: 720px) {
+        .hero-grid {
+          grid-template-columns: 1fr;
+          gap: 0;
+        }
       }
     </style>
   </head>
@@ -444,10 +586,11 @@
     <a href="#main-content" class="skip-link">Skip to main content</a>
     
     <main id="main-content">
-      <!-- Title -->
-      <h1 style="text-align: center; margin-bottom: 1rem;">NHCarrigan</h1>
+      <!--
+          MARK: Hero Section
+      -->
+      <h1 style="text-align: center; margin-bottom: 1rem;">Naomi Carrigan</h1>
       
-      <!-- Splash Image -->
       <section style="text-align: center; margin-bottom: 2rem;" aria-label="Hero image">
         <img
           src="https://cdn.nhcarrigan.com/splash.png"
@@ -456,15 +599,14 @@
         />
       </section>
       
-      <!-- Brief Intro -->
       <section style="text-align: center; margin-bottom: 2rem; max-width: 800px; margin-left: auto; margin-right: auto;" class="fade-in">
         <p style="font-size: 1.2rem; line-height: 1.6;">
           Building inclusive tech communities, one line of code at a time. We're passionate about creating ethical software solutions and fostering welcoming online spaces where everyone can thrive.
         </p>
       </section>
 
-      <!-- Hero CTA - Early conversion opportunity -->
-      <section class="hero-cta fade-in" role="region" aria-label="Join our community">
+      <div class="hero-grid">
+      <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!
@@ -472,12 +614,26 @@
         <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>
 
-      <!-- Personal Card with Avatar -->
+      <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>
+
+      <!--
+          MARK: Personal Information
+      -->
       <section class="card avatar-card fade-in" role="region" aria-labelledby="about-naomi">
         <div class="card-header">
           <img 
@@ -505,7 +661,6 @@
         </p>
       </section>
 
-      <!-- More Personal Stuff -->
       <section class="fade-in" role="region" aria-labelledby="get-to-know">
         <h2 id="get-to-know">Get to Know Me</h2>
         <p>
@@ -517,14 +672,11 @@
           <li><strong><a href="https://linkedin.com/in/naomi-lgbt" target="_blank" rel="noopener noreferrer">LinkedIn</a></strong> - Professional networking and career history</li>
           <li><strong><a href="https://steamcommunity.com/id/naomi-lgbt" target="_blank" rel="noopener noreferrer">My Steam</a></strong> - My gaming life and achievements</li>
         </ul>
-        <p style="text-align: center; margin-top: 1.5rem;">
-          <a href="https://chat.nhcarrigan.com" target="_blank" class="cta-button" aria-label="Chat with Naomi on Discord">
-            <i class="fab fa-discord" aria-hidden="true"></i> Come Chat on Discord
-          </a>
-        </p>
       </section>
 
-      <!-- Company Card with Logo -->
+      <!--
+          MARK: Company Information
+      -->
       <section class="card logo-card fade-in" role="region" aria-labelledby="about-company">
         <div class="card-header">
       <img
@@ -555,7 +707,6 @@
         </ul>
       </section>
 
-      <!-- Company Stuff -->
       <section class="fade-in" role="region" aria-labelledby="mission">
         <h2 id="mission">Our Mission</h2>
         <p>
@@ -572,12 +723,15 @@
         </p>
       </section>
 
-      <!-- Client Timeline -->
+      <!--
+          MARK: Client Timeline
+      -->
       <section class="card fade-in" role="region" aria-labelledby="client-timeline">
         <h2 id="client-timeline" style="margin-top: 0; text-align: center;">Client History Timeline</h2>
         <p style="text-align: center; margin-bottom: 2rem;">
           A journey through the amazing organizations and projects I've had the privilege to work with!
         </p>
+        <img class="hero-image" src="https://cdn.nhcarrigan.com/hero/history.png" alt="Naomi Carrigan, founder of NHCarrigan" />
         
         <div class="timeline">
           <div class="timeline-item">
@@ -679,9 +833,14 @@
             </div>
           </div>
         </div>
+        <a href="https://resume.nhcarrigan.com" target="_blank" class="cta-button cta-button-secondary" aria-label="View full resume" rel="noopener noreferrer">
+          <i class="fas fa-file-alt" aria-hidden="true"></i> See full resume
+        </a>
       </section>
 
-      <!-- Past Work & Credentials -->
+      <!--
+          MARK: Past Work & Credentials
+      -->
       <section class="fade-in" role="region" aria-labelledby="past-work">
         <h2 id="past-work">Past Work & Credentials</h2>
         <p>
@@ -698,9 +857,205 @@
         </p>
       </section>
 
-      <!-- Join Our Community - Prominent CTA -->
+      <!--
+          MARK: Testimonials
+      -->
+      <section class="card fade-in" role="region" aria-labelledby="client-feedback">
+        <h2 id="client-feedback" style="margin-top: 0; text-align: center;">What Clients Say</h2>
+        <p style="text-align: center; margin-bottom: 2rem;">
+          Here's what people have shared about working with us:
+        </p>
+        <img class="hero-image" src="https://cdn.nhcarrigan.com/hero/testimonials.png" alt="Naomi Carrigan, founder of NHCarrigan" />
+        
+        <div class="testimonials-preview">
+          <div class="testimonial-card">
+            <div class="testimonial-text">
+              "You could ask her for help solving anything and she'd whip up a whole plan in her head in 30 seconds."
+            </div>
+          </div>
+          
+          <div class="testimonial-card">
+            <div class="testimonial-text">
+              "Everything she delivered was secure, scalable, and polished to perfection."
+            </div>
+          </div>
+          
+          <div class="testimonial-card">
+            <div class="testimonial-text">
+              "The system 'just works', you don't have to think about how or why which is always a great quality in an internal tool."
+            </div>
+          </div>
+          
+          <div class="testimonial-card">
+            <div class="testimonial-text">
+              "Her ability to learn absolutely anything... allows her to find a problem, tackle it quickly, and resolve it - even if she didn't have prior knowledge of the issue."
+            </div>
+          </div>
+          
+          <div class="testimonial-card">
+            <div class="testimonial-text">
+              "There is no one else that could even remotely match her level of talent."
+            </div>
+          </div>
+          
+          <div class="testimonial-card">
+            <div class="testimonial-text">
+              "She was the glue that held so many parts of our operation together."
+            </div>
+          </div>
+        </div>
+        
+        <p style="text-align: center; margin-top: 2rem;">
+          <a href="https://testimonials.nhcarrigan.com" target="_blank" class="cta-button cta-button-secondary" aria-label="View all client testimonials" rel="noopener noreferrer">
+            <i class="fas fa-quote-left" aria-hidden="true"></i> Read All Testimonials
+          </a>
+        </p>
+      </section>
+
+      <!--
+          MARK: Resources
+      -->
+      <section class="fade-in" role="region" aria-labelledby="resources">
+        <h2 id="resources">Resources & Documentation</h2>
+        <p>
+          We believe in transparency and sharing knowledge. Our comprehensive documentation includes:
+        </p>
+        <ul>
+          <li><a href="https://docs.nhcarrigan.com/community/coc" target="_blank" rel="noopener noreferrer">Code of Conduct</a> and <a href="https://docs.nhcarrigan.com/community/guide/" target="_blank" rel="noopener noreferrer">Community Guidelines</a> - Templates to help shape your own community</li>
+          <li><a href="https://docs.nhcarrigan.com/legal/license/" target="_blank" rel="noopener noreferrer">Software License</a>, <a href="https://docs.nhcarrigan.com/legal/terms/" target="_blank" rel="noopener noreferrer">Terms of Service</a>, and <a href="https://docs.nhcarrigan.com/legal/privacy/" target="_blank" rel="noopener noreferrer">Privacy Policy</a> - Documentation templates for your products</li>
+          <li><a href="https://blog.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Blog</a> - Content and resources to help you level up your game!</li>
+          <li><a href="https://hikari.nhcarrigan.com/announcements" target="_blank" rel="noopener noreferrer">Announcements</a> - Project updates and community news</li>
+        </ul>
+      </section>
+
+      <!--
+          MARK: Community Stats
+      -->
+      <section class="card fade-in" role="region" aria-labelledby="community-stats">
+        <h2 id="community-stats" style="margin-top: 0; text-align: center;">Our Community by the Numbers</h2>
+        <p style="text-align: center; margin-bottom: 2rem;">
+          We're proud of the vibrant, inclusive community we've built together!
+        </p>
+        <img class="hero-image" src="https://cdn.nhcarrigan.com/hero/community-stats.png" alt="Naomi Carrigan, founder of NHCarrigan" />
+        
+        <div class="stats-grid">
+          <div class="stat-card">
+            <div class="stat-number">400+</div>
+            <div class="stat-label">Discord Members</div>
+          </div>
+          
+          <div class="stat-card">
+            <div class="stat-number">500+</div>
+            <div class="stat-label">Daily Discord Messages</div>
+          </div>
+          
+          <div class="stat-card">
+            <div class="stat-number">1,100+</div>
+            <div class="stat-label">Bluesky Followers</div>
+          </div>
+          
+          <div class="stat-card">
+            <div class="stat-number">800+</div>
+            <div class="stat-label">LinkedIn Connections</div>
+          </div>
+        </div>
+        
+        <p style="text-align: center; margin-top: 2rem;">
+          <a href="https://chat.nhcarrigan.com" target="_blank" class="cta-button" aria-label="Join our Discord community" rel="noopener noreferrer">
+            <i class="fab fa-discord" aria-hidden="true"></i> Connect with Us on Discord
+          </a>
+          <a href="https://socials.nhcarrigan.com" target="_blank" class="cta-button cta-button-secondary" aria-label="View all our social media accounts" rel="noopener noreferrer">
+            <i class="fas fa-share-alt" aria-hidden="true"></i> View All Social Accounts
+          </a>
+        </p>
+      </section>
+
+      <!--
+          MARK: Sustainability & Support
+      -->
+      <section class="fade-in" role="region" aria-labelledby="sustainability-impact">
+        <h2 id="sustainability-impact">Growing Responsibly, Together</h2>
+        <p style="font-size: 1.1rem;">
+          As our community continues to grow, so does our responsibility to maintain the infrastructure, tools, and services that make it all possible. Every new member, every question answered, and every project launched requires resources - servers, development time, and ongoing maintenance.
+        </p>
+        <p>
+          We're committed to keeping our core services free and accessible while being transparent about what it takes to sustain them. Your support directly enables us to continue offering mentorship, maintaining our open-source projects, and building new tools that serve communities worldwide.
+        </p>
+      </section>
+
+      <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>
+        <img class="hero-image" src="https://cdn.nhcarrigan.com/hero/donate.png" alt="Naomi Carrigan, founder of NHCarrigan" />
+        
+        <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>
+
+      <!--
+          MARK: FAQ
+      -->
+      <section class="fade-in" role="region" aria-labelledby="faq">
+        <h2 id="faq">Frequently Asked Questions</h2>
+        
+        <h3>What is NHCarrigan?</h3>
+        <p>
+          NHCarrigan is a technology company dedicated to building inclusive, ethical, and sustainable software solutions. We create Discord bots, web applications, APIs, and development tools that serve communities while prioritizing user privacy, environmental sustainability, and accessibility.
+        </p>
+        
+        <h3>What products and services do you offer?</h3>
+        <p>
+          We offer a diverse ecosystem of products including AI-powered Discord bots (like Hikari for product management and Becca Lyria for interactive RPG experiences), web dashboards, APIs, documentation platforms, and various community tools. Our products are organized into three main categories: Community Tools & Integrations, Websites & APIs, and Apps & Games.
+        </p>
+        
+        <h3>How do I get started with your products?</h3>
+        <p>
+          Most of our Discord bots can be installed directly from the Discord app directory or by visiting our web dashboard at <a href="https://hikari.nhcarrigan.com" target="_blank" rel="noopener noreferrer">hikari.nhcarrigan.com</a>. For detailed documentation and setup instructions for any specific product, visit our <a href="https://docs.nhcarrigan.com" target="_blank" rel="noopener noreferrer">documentation site</a>.
+        </p>
+        
+        <h3>What makes NHCarrigan different?</h3>
+        <p>
+          We're committed to ethical technology development with a focus on inclusivity, sustainability, and community-driven innovation. We actively work to break down barriers in tech, support marginalized voices, and ensure our technologies respect user privacy while contributing positively to society. Our projects are open-source and community-centric.
+        </p>
+        
+        <h3>How can I get support or contribute?</h3>
+        <p>
+          You can join our <a href="https://chat.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Discord community</a> for support and to connect with other users. We welcome contributions from developers of all backgrounds - check out our <a href="https://docs.nhcarrigan.com/#/contributing" target="_blank" rel="noopener noreferrer">contributing guidelines</a> and <a href="https://docs.nhcarrigan.com/#/community/code-of-conduct" target="_blank" rel="noopener noreferrer">community code of conduct</a> to get started.           We also offer mentorship programs for new developers.
+        </p>
+      </section>
+
+      <!--
+          MARK: Community CTA
+      -->
       <section class="card fade-in" style="background: #f8f9fa; border-color: #5865F2; border-width: 3px;" role="region" aria-labelledby="join-community">
         <h2 id="join-community" style="margin-top: 0;">Join Our Community</h2>
+        <img class="hero-image" src="https://cdn.nhcarrigan.com/hero/join-community.png" alt="Naomi Carrigan, founder of NHCarrigan" />
         <p style="font-size: 1.1rem;">
           As part of our mission to help new developers break into the industry and tear down barriers that keep marginalized identities from succeeding, we offer public mentorship, encouragement, and guidance.
         </p>
@@ -717,19 +1072,6 @@
         </p>
       </section>
 
-      <section class="fade-in" role="region" aria-labelledby="resources">
-        <h2 id="resources">Resources & Documentation</h2>
-        <p>
-          We believe in transparency and sharing knowledge. Our comprehensive documentation includes:
-        </p>
-        <ul>
-          <li><a href="https://docs.nhcarrigan.com/community/coc" target="_blank" rel="noopener noreferrer">Code of Conduct</a> and <a href="https://docs.nhcarrigan.com/community/guide/" target="_blank" rel="noopener noreferrer">Community Guidelines</a> - Templates to help shape your own community</li>
-          <li><a href="https://docs.nhcarrigan.com/legal/license/" target="_blank" rel="noopener noreferrer">Software License</a>, <a href="https://docs.nhcarrigan.com/legal/terms/" target="_blank" rel="noopener noreferrer">Terms of Service</a>, and <a href="https://docs.nhcarrigan.com/legal/privacy/" target="_blank" rel="noopener noreferrer">Privacy Policy</a> - Documentation templates for your products</li>
-          <li><a href="https://blog.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Blog</a> - Content and resources to help you level up your game!</li>
-          <li><a href="https://hikari.nhcarrigan.com/announcements" target="_blank" rel="noopener noreferrer">Announcements</a> - Project updates and community news</li>
-        </ul>
-      </section>
-
       <section class="fade-in" role="region" aria-labelledby="get-involved">
         <h2 id="get-involved">Get Involved</h2>
         <p>
@@ -738,19 +1080,17 @@
         <p>
           Or, if you just want to be part of the community and see what we're all about, <a href="https://chat.nhcarrigan.com" target="_blank" rel="noopener noreferrer">join us on Discord</a> - no application needed! <i class="fas fa-star" aria-hidden="true"></i>
         </p>
-        <p style="text-align: center; margin-top: 1.5rem;">
-          <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 Our Mission
-          </a>
-        </p>
       </section>
 
-      <!-- Final CTA -->
+      <!--
+          MARK: Final CTA
+      -->
       <section class="card fade-in" style="text-align: center; background: #f0f0f0;" role="region" aria-labelledby="thanks">
         <h2 id="thanks" style="margin-top: 0;">Thanks for Visiting! <i class="fas fa-heart" aria-hidden="true"></i></h2>
         <p style="font-size: 1.1rem;">
           We look forward to seeing you in our communities, and we're eager to begin working with you! Whether you're looking for mentorship, need help with a project, or just want to connect with like-minded people, come say hi!
         </p>
+        <img class="hero-image" src="https://cdn.nhcarrigan.com/hero/goodbye.png" alt="Naomi Carrigan, founder of NHCarrigan" />
         <p style="margin-top: 1.5rem;">
           <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