firefrost-website/about.njk

---
layout: layouts/base.njk
title: About Us
description: Meet The Trinity founders and our five consultant animals. Building Firefrost Gaming for eternity.
---

<!-- ABOUT PAGE - HERO -->
<div style="padding: 100px 40px; background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%); text-align: center;">
  <h1 style="font-size: 4rem; font-weight: 900; margin-bottom: 30px; color: #ffffff; text-shadow: 2px 2px 8px rgba(0,0,0,0.7);">About Firefrost Gaming</h1>
  <p style="font-size: 1.5rem; color: #a8dadc; max-width: 900px; margin: 0 auto 40px; line-height: 1.8;">Built by The Trinity. Designed for eternity.</p>
  <p style="font-size: 2rem; color: #FFD700; font-weight: 700;">Fire + Arcane + Frost = Forever</p>
</div>

<!-- THE TRINITY: THREE FOUNDERS -->
<div style="padding: 100px 60px; background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);">
  <div style="max-width: 1400px; margin: 0 auto;">
    <h2 style="text-align: center; font-size: 3rem; margin-bottom: 40px; color: #e8f4f8; font-weight: 800;">The Trinity</h2>
    
    <!-- Trinity Hero Image -->
    <div style="text-align: center; margin-bottom: 60px;">
      <img src="/assets/images/2026/03/trinity-final.png" alt="The Trinity - Frost, Arcane, and Fire" style="max-width: 100%; height: auto; border-radius: 15px; box-shadow: 0 8px 30px rgba(78, 205, 196, 0.3);" />
      <p style="margin-top: 20px; font-size: 1.2rem; color: #a8dadc; font-style: italic;">The Trinity: Frostystyle (The Wizard), unicorn20089 (The Catalyst), and GingerFury (The Emissary)</p>
    </div>
    
    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; margin-bottom: 80px;">
      
      <!-- Frostystyle - The Wizard -->
      <div style="background: linear-gradient(135deg, rgba(78, 205, 196, 0.15) 0%, rgba(78, 205, 196, 0.05) 100%); border: 3px solid #4ecdc4; border-radius: 20px; padding: 40px; text-align: center;">
        <div style="font-size: 5rem; margin-bottom: 20px;">❄️</div>
        <h3 style="color: #4ecdc4; font-size: 2rem; margin-bottom: 15px; font-weight: 700;">Frostystyle</h3>
        <p style="color: #4ecdc4; font-size: 1.2rem; margin-bottom: 25px; font-weight: 600;">The Wizard</p>
        <p style="color: #e8f4f8; line-height: 1.7; margin-bottom: 20px;">Technical architect. Systems designer. The builder of foundations that last decades.</p>
        <p style="color: #a8dadc; line-height: 1.7;">Frost brings precision, infrastructure that doesn't break, and the cool calculated strategy that keeps everything running.</p>
      </div>
      
      <!-- GingerFury - The Emissary -->
      <div style="background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(255, 107, 53, 0.05) 100%); border: 3px solid #ff6b35; border-radius: 20px; padding: 40px; text-align: center;">
        <div style="font-size: 5rem; margin-bottom: 20px;">🔥</div>
        <h3 style="color: #ff6b35; font-size: 2rem; margin-bottom: 15px; font-weight: 700;">GingerFury</h3>
        <p style="color: #ff6b35; font-size: 1.2rem; margin-bottom: 25px; font-weight: 600;">The Emissary</p>
        <p style="color: #e8f4f8; line-height: 1.7; margin-bottom: 20px;">Community manager. Heart of the operation. The fierce protector who makes everyone feel at home.</p>
        <p style="color: #a8dadc; line-height: 1.7;">Fire brings passion, authentic connection, and the warmth that transforms strangers into family.</p>
      </div>
      
      <!-- unicorn20089 - The Catalyst -->
      <div style="background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0.05) 100%); border: 3px solid #A855F7; border-radius: 20px; padding: 40px; text-align: center;">
        <div style="font-size: 5rem; margin-bottom: 20px;">⚡</div>
        <h3 style="color: #A855F7; font-size: 2rem; margin-bottom: 15px; font-weight: 700;">unicorn20089</h3>
        <p style="color: #A855F7; font-size: 1.2rem; margin-bottom: 25px; font-weight: 600;">The Catalyst</p>
        <p style="color: #e8f4f8; line-height: 1.7; margin-bottom: 20px;">Lead builder. Creative visionary. The transformative energy that turns dreams into reality.</p>
        <p style="color: #a8dadc; line-height: 1.7;">Arcane brings creative innovation, building expertise, and the foundation upon which Fire and Frost stand together.</p>
      </div>
      
    </div>
    
    <p style="text-align: center; font-size: 1.5rem; color: #e8f4f8; line-height: 1.8; max-width: 1000px; margin: 0 auto;">Together, they founded Firefrost Gaming in February 2026 with a simple question: <span style="color: #4ecdc4; font-weight: 700; font-style: italic;">"What if we built something that outlives us?"</span></p>
  </div>
</div>

<!-- THE SIX CONSULTANTS -->
<div style="padding: 100px 60px; background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);">
  <div style="max-width: 1400px; margin: 0 auto;">
    <h2 style="text-align: center; font-size: 3rem; margin-bottom: 30px; color: #e8f4f8; font-weight: 800;">The Six Consultants</h2>
    <p style="text-align: center; font-size: 1.3rem; color: #a8dadc; margin-bottom: 60px; line-height: 1.7;">Every great company has advisors. Ours just happen to have four legs and unshakeable opinions.</p>
    
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px;">
      
      <!-- Butter No Nutters -->
      <div style="background: rgba(78, 205, 196, 0.1); border: 2px solid #4ecdc4; border-radius: 15px; padding: 30px; text-align: center;">
        <div style="font-size: 5rem; margin-bottom: 15px;">😺</div>
        <h4 style="color: #4ecdc4; font-size: 1.6rem; margin-bottom: 10px; font-weight: 700;">Butter No Nutters</h4>
        <p style="color: #4ecdc4; font-size: 1.1rem; margin-bottom: 15px; font-weight: 600;">The Ice King</p>
        <p style="color: #a8dadc; line-height: 1.6; margin-bottom: 10px;">Chief Executive Officer</p>
        <p style="color: #6b7280; font-size: 0.95rem; line-height: 1.5; font-style: italic;">"I was here first. I'll be here last. This is MY kingdom."</p>
      </div>
      
      <!-- Oscar -->
      <div style="background: rgba(78, 205, 196, 0.1); border: 2px solid #4ecdc4; border-radius: 15px; padding: 30px; text-align: center;">
        <div style="font-size: 5rem; margin-bottom: 15px;">🐕</div>
        <h4 style="color: #4ecdc4; font-size: 1.6rem; margin-bottom: 10px; font-weight: 700;">Oscar</h4>
        <p style="color: #4ecdc4; font-size: 1.1rem; margin-bottom: 15px; font-weight: 600;">The Sentinel</p>
        <p style="color: #a8dadc; line-height: 1.6; margin-bottom: 10px;">Chief Security Officer</p>
        <p style="color: #6b7280; font-size: 0.95rem; line-height: 1.5; font-style: italic;">"The Frostwall doesn't sleep. Neither do I."</p>
      </div>
      
      <!-- Jack -->
      <div style="background: rgba(78, 205, 196, 0.1); border: 2px solid #4ecdc4; border-radius: 15px; padding: 30px; text-align: center;">
        <div style="font-size: 5rem; margin-bottom: 15px;">🐺</div>
        <h4 style="color: #4ecdc4; font-size: 1.6rem; margin-bottom: 10px; font-weight: 700;">Jack</h4>
        <p style="color: #4ecdc4; font-size: 1.1rem; margin-bottom: 15px; font-weight: 600;">The Ambassador</p>
        <p style="color: #a8dadc; line-height: 1.6; margin-bottom: 10px;">Chief Companion Officer</p>
        <p style="color: #6b7280; font-size: 0.95rem; line-height: 1.5; font-style: italic;">Jack's medical alerts take absolute priority over all work. No exceptions.</p>
      </div>
      
      <!-- Jasmine -->
      <div style="background: rgba(168, 85, 247, 0.1); border: 2px solid #A855F7; border-radius: 15px; padding: 30px; text-align: center;">
        <div style="font-size: 5rem; margin-bottom: 15px;">🐶</div>
        <h4 style="color: #A855F7; font-size: 1.6rem; margin-bottom: 10px; font-weight: 700;">Jasmine</h4>
        <p style="color: #A855F7; font-size: 1.1rem; margin-bottom: 15px; font-weight: 600;">The Protector</p>
        <p style="color: #a8dadc; line-height: 1.6; margin-bottom: 10px;">Chief of Personal Security</p>
        <p style="color: #6b7280; font-size: 0.95rem; line-height: 1.5; font-style: italic;">"I am gentle until you need anything but."</p>
      </div>
      
      <!-- Skye -->
      <div style="background: rgba(168, 85, 247, 0.1); border: 2px solid #A855F7; border-radius: 15px; padding: 30px; text-align: center;">
        <div style="font-size: 5rem; margin-bottom: 15px;">🐕</div>
        <h4 style="color: #A855F7; font-size: 1.6rem; margin-bottom: 10px; font-weight: 700;">Skye</h4>
        <p style="color: #A855F7; font-size: 1.1rem; margin-bottom: 15px; font-weight: 600;">The Coordinator</p>
        <p style="color: #a8dadc; line-height: 1.6; margin-bottom: 10px;">Director of Logistics & Transportation</p>
        <p style="color: #6b7280; font-size: 0.95rem; line-height: 1.5; font-style: italic;">"Ball is love. Ball is life. The mission is EVERYTHING."</p>
      </div>
      
      <!-- Noir -->
      <div style="background: rgba(255, 107, 53, 0.1); border: 2px solid #ff6b35; border-radius: 15px; padding: 30px; text-align: center;">
        <div style="font-size: 5rem; margin-bottom: 15px;">🐈‍⬛</div>
        <h4 style="color: #ff6b35; font-size: 1.6rem; margin-bottom: 10px; font-weight: 700;">Midnight Noir</h4>
        <p style="color: #ff6b35; font-size: 1.1rem; margin-bottom: 15px; font-weight: 600;">The Converted</p>
        <p style="color: #a8dadc; line-height: 1.6; margin-bottom: 10px;">Chief of Rapid Response</p>
        <p style="color: #6b7280; font-size: 0.95rem; line-height: 1.5; font-style: italic;">"Everyone deserves a refuge. Even strays."</p>
      </div>
      
    </div>
  </div>
</div>

<!-- OUR PHILOSOPHY -->
<div style="padding: 100px 60px; background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);">
  <div style="max-width: 1000px; margin: 0 auto; text-align: center;">
    <h2 style="font-size: 3rem; margin-bottom: 40px; color: #e8f4f8; font-weight: 800;">Our Philosophy</h2>
    
    <p style="font-size: 2.5rem; color: #FFD700; font-weight: 700; margin-bottom: 50px; line-height: 1.3;">"We're building this for children not yet born."</p>
    
    <p style="font-size: 1.4rem; color: #e8f4f8; line-height: 1.9; margin-bottom: 30px;">Not for quarterly profits. Not for investor returns. Not to flip and sell.</p>
    
    <p style="font-size: 1.4rem; color: #e8f4f8; line-height: 1.9; margin-bottom: 30px;"><strong style="color: #4ecdc4; font-size: 1.6rem;">For legacy.</strong></p>
    
    <p style="font-size: 1.3rem; color: #a8dadc; line-height: 1.8; margin-bottom: 40px;">We document everything. Every decision preserved in Git. Every server configuration saved for future generations. Every line of code a love letter to people we'll never meet.</p>
    
    <p style="font-size: 1.5rem; color: #4ecdc4; font-weight: 600; line-height: 1.7;">Fire + Frost + Foundation = Where Love Builds Legacy</p>
  </div>
</div>

<!-- THE JOURNEY -->
<div style="padding: 100px 60px; background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);">
  <div style="max-width: 1200px; margin: 0 auto;">
    <h2 style="text-align: center; font-size: 3rem; margin-bottom: 60px; color: #e8f4f8; font-weight: 800;">The Journey</h2>
    
    <div style="background: rgba(26, 26, 46, 0.6); border-left: 5px solid #4ecdc4; padding: 40px; margin-bottom: 30px; border-radius: 10px;">
      <h3 style="color: #4ecdc4; font-size: 1.8rem; margin-bottom: 20px; font-weight: 700;">February 2026: The Beginning</h3>
      <p style="color: #e8f4f8; font-size: 1.2rem; line-height: 1.8;">Three people came together with different strengths and a shared vision. The Wizard brought the technical precision. The Emissary brought the heart. The Catalyst brought the creative foundation. Firefrost Gaming was born.</p>
    </div>
    
    <div style="background: rgba(26, 26, 46, 0.6); border-left: 5px solid #A855F7; padding: 40px; margin-bottom: 30px; border-radius: 10px;">
      <h3 style="color: #A855F7; font-size: 1.8rem; margin-bottom: 20px; font-weight: 700;">March 2026: Building the Foundation</h3>
      <p style="color: #e8f4f8; font-size: 1.2rem; line-height: 1.8;">Infrastructure deployment in progress. Servers configured. Systems tested. The Trinity working together to build something that will outlast us all.</p>
    </div>
    
    <div style="background: rgba(26, 26, 46, 0.6); border-left: 5px solid #ff6b35; padding: 40px; margin-bottom: 30px; border-radius: 10px;">
      <h3 style="color: #ff6b35; font-size: 1.8rem; margin-bottom: 20px; font-weight: 700;">April 2026: Soft Launch</h3>
      <p style="color: #e8f4f8; font-size: 1.2rem; line-height: 1.8;">Coming soon. Nine Minecraft servers. Fire and Frost paths. A community built to last forever. The doors open in April.</p>
    </div>
    
    <div style="background: rgba(26, 26, 46, 0.6); border-left: 5px solid #FFD700; padding: 40px; border-radius: 10px;">
      <h3 style="color: #FFD700; font-size: 1.8rem; margin-bottom: 20px; font-weight: 700;">The Future: Forever</h3>
      <p style="color: #e8f4f8; font-size: 1.2rem; line-height: 1.8;">This is just the beginning. Every server we launch, every community we build, every system we document - all of it designed to outlive us. For children not yet born.</p>
    </div>
  </div>
</div>

<!-- JOIN US CTA -->
<div style="padding: 100px 60px; background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(168, 85, 247, 0.1) 50%, rgba(255, 107, 53, 0.1) 100%); text-align: center;">
  <h2 style="font-size: 3rem; margin-bottom: 30px; color: #e8f4f8; font-weight: 800;">Join The Legacy</h2>
  <p style="font-size: 1.4rem; color: #a8dadc; margin-bottom: 50px; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.7;">Be part of something built to last. Choose your path. Build your legend.</p>
  <a href="/subscribe" style="display: inline-block; background: linear-gradient(135deg, #FF6B35 0%, #A855F7 50%, #4ECDC4 100%); color: white; padding: 25px 70px; text-decoration: none; border-radius: 12px; font-weight: 700; font-size: 1.3rem; box-shadow: 0 8px 25px rgba(78, 205, 196, 0.5); transition: transform 0.3s;">🔥⚡❄️ Start Your Journey</a>
</div>