Files
firefrost-operations-manual/docs/archive/retired-tasks/ghost-pages/homepage.html
Claude 256f3a35ac Cleanup: Archive retired tasks, remove duplicate templates
Archived to docs/archive/retired-tasks/:
- Ghost CMS tasks (6 folders) - retired April 2, 2026
- Paymenter tasks (2 folders) - retired April 3, 2026
- Ghost website pages

Removed duplicate templates:
- MEMORIAL-TEMPLATE.md (keeping lowercase version)
- PORTRAIT-PROMPT-TEMPLATE.md (keeping lowercase version)
- SESSION-REPORT-TEMPLATE.md (keeping lowercase version)
- OPENER-TEMPLATE.md

Chronicler #66
2026-04-07 17:47:29 +00:00

294 lines
22 KiB
HTML

<!--
FIREFROST GAMING HOMEPAGE
Ghost CMS Page Snapshot
Last Updated: April 2, 2026
Status: Production (Pre-Soft Launch)
This file contains all HTML blocks used on the homepage in sequential order.
Each block is clearly marked with section headers.
-->
<!-- ===================================================================== -->
<!-- BLOCK 1: HERO SECTION -->
<!-- Background image, logo, tagline, dual CTAs -->
<!-- ===================================================================== -->
<div class="ffg-hero" style="position: relative; min-height: 1000px; display: flex; align-items: center; justify-content: center; margin: 0 0 40px 0; background-image: url('https://firefrostgaming.com/content/images/2026/03/Firefrost-background-1.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
<div style="position: relative; z-index: 2; text-align: center; padding: 100px 40px;">
<!-- Logo above title -->
<img src="https://firefrostgaming.com/content/images/2026/03/Dark-Logo---Copy.png" alt="Firefrost Gaming" style="max-width: 600px; width: 100%; height: auto; margin: 60px auto 40px; opacity: 0.95; filter: drop-shadow(0 10px 25px rgba(0,0,0,0.9)); display: block;" />
<h1 style="font-weight: 900; margin: 0 0 35px 0; color: #ffffff; text-shadow: 4px 4px 12px rgba(0,0,0,0.9), 0 0 30px rgba(0,0,0,0.7); line-height: 1.2;">Fire + Arcane + Frost = Forever</h1>
<p class="subtitle" style="color: #ffffff; margin: 0 0 25px 0; font-weight: 400; text-shadow: 3px 3px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.7);">Where Passion Meets Precision Through Creative Transformation</p>
<p class="description" style="color: #e8f4f8; margin: 0 0 60px 0; line-height: 1.8; text-shadow: 2px 2px 6px rgba(0,0,0,0.9), 0 0 15px rgba(0,0,0,0.7); max-width: 900px; margin-left: auto; margin-right: auto;">Premium Minecraft server network built by The Trinity<br>🔥 Fire • ⚡ Arcane • ❄️ Frost | Build your legacy with us</p>
<div style="display: flex; gap: 25px; justify-content: center; flex-wrap: wrap;">
<a href="#choose-path" class="cta-button" style="background: linear-gradient(135deg, #FF6B35 0%, #A855F7 50%, #4ECDC4 100%); color: white; padding: 22px 55px; text-decoration: none; border-radius: 10px; font-weight: 700; box-shadow: 0 8px 25px rgba(0,0,0,0.6); transition: transform 0.2s; display: inline-block;">Choose Your Path</a>
<a href="/discord" class="cta-button" style="background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); color: white; padding: 22px 55px; text-decoration: none; border-radius: 10px; font-weight: 700; border: 2px solid rgba(168,85,247,0.6); box-shadow: 0 8px 25px rgba(0,0,0,0.6); transition: transform 0.2s; display: inline-block;">Join the Community</a>
</div>
</div>
<!-- Trinity gradient overlay for visual integration -->
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,107,53,0.15) 0%, rgba(168,85,247,0.15) 50%, rgba(78,205,196,0.15) 100%); z-index: 1;"></div>
</div>
<!-- ===================================================================== -->
<!-- BLOCK 2: CHOOSE YOUR PATH -->
<!-- Fire Path vs Frost Path comparison cards -->
<!-- ===================================================================== -->
<div id="choose-path" class="ffg-custom-text" style="padding: 100px 40px; background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);">
<div style="max-width: 1600px; margin: 0 auto;">
<h2 style="text-align: center; font-weight: 800; margin-bottom: 30px; color: #ffffff; text-shadow: 2px 2px 8px rgba(0,0,0,0.7);">Choose Your Destiny</h2>
<p style="text-align: center; color: #a8dadc; margin-bottom: 70px; line-height: 1.6;">Two paths. One legendary community. Which element calls to you?</p>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; margin-bottom: 60px;">
<!-- Fire Path Card -->
<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: 50px; position: relative; overflow: hidden; box-shadow: 0 10px 40px rgba(255, 107, 53, 0.3);">
<div style="position: absolute; top: -50px; right: -50px; font-size: 15rem; opacity: 0.1; pointer-events: none;">🔥</div>
<h3 style="font-weight: 800; color: #ff6b35; margin-bottom: 25px; text-shadow: 0 2px 10px rgba(255, 107, 53, 0.5);">🔥 Fire Path</h3>
<p style="color: #e8f4f8; line-height: 1.7; margin-bottom: 30px;">For those who burn bright. Build communities, forge friendships, and create worlds that bring people together. Fire is heart, passion, and the warmth of belonging.</p>
<h4 style="color: #ff6b35; margin-bottom: 20px; font-weight: 700;">Perfect for:</h4>
<ul style="color: #a8dadc; line-height: 2; padding-left: 25px; list-style: none;">
<li style="margin-bottom: 12px; position: relative; padding-left: 30px;">
<span style="position: absolute; left: 0; color: #ff6b35; font-weight: 800;"></span>
Community builders and social players
</li>
<li style="margin-bottom: 12px; position: relative; padding-left: 30px;">
<span style="position: absolute; left: 0; color: #ff6b35; font-weight: 800;"></span>
Creative storytellers and roleplayers
</li>
<li style="margin-bottom: 12px; position: relative; padding-left: 30px;">
<span style="position: absolute; left: 0; color: #ff6b35; font-weight: 800;"></span>
Event organizers and celebration lovers
</li>
<li style="position: relative; padding-left: 30px;">
<span style="position: absolute; left: 0; color: #ff6b35; font-weight: 800;"></span>
Those who make everyone feel at home
</li>
</ul>
</div>
<!-- Frost Path Card -->
<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: 50px; position: relative; overflow: hidden; box-shadow: 0 10px 40px rgba(78, 205, 196, 0.3);">
<div style="position: absolute; top: -50px; right: -50px; font-size: 15rem; opacity: 0.1; pointer-events: none;">❄️</div>
<h3 style="font-weight: 800; color: #4ecdc4; margin-bottom: 25px; text-shadow: 0 2px 10px rgba(78, 205, 196, 0.5);">❄️ Frost Path</h3>
<p style="color: #e8f4f8; line-height: 1.7; margin-bottom: 30px;">For those who engineer perfection. Master redstone, optimize farms, and build systems that last forever. Frost is precision, elegance, and the beauty of efficiency.</p>
<h4 style="color: #4ecdc4; margin-bottom: 20px; font-weight: 700;">Perfect for:</h4>
<ul style="color: #a8dadc; line-height: 2; padding-left: 25px; list-style: none;">
<li style="margin-bottom: 12px; position: relative; padding-left: 30px;">
<span style="position: absolute; left: 0; color: #4ecdc4; font-weight: 800;"></span>
Technical players and redstone engineers
</li>
<li style="margin-bottom: 12px; position: relative; padding-left: 30px;">
<span style="position: absolute; left: 0; color: #4ecdc4; font-weight: 800;"></span>
Optimization enthusiasts and min-maxers
</li>
<li style="margin-bottom: 12px; position: relative; padding-left: 30px;">
<span style="position: absolute; left: 0; color: #4ecdc4; font-weight: 800;"></span>
Infrastructure builders and system architects
</li>
<li style="position: relative; padding-left: 30px;">
<span style="position: absolute; left: 0; color: #4ecdc4; font-weight: 800;"></span>
Those who love elegant solutions
</li>
</ul>
</div>
</div>
<p style="text-align: center; color: #FFD700; font-weight: 600; line-height: 1.8;">Can't choose? You don't have to. Balance is the real power. Walk both paths and become a legend. 🔥❄️</p>
</div>
</div>
<!-- ===================================================================== -->
<!-- BLOCK 3: ORIGIN STORY -->
<!-- The Trinity founding story and legacy vision -->
<!-- ===================================================================== -->
<div id="origin" style="padding: 100px 60px; margin: 80px 0 0; background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);">
<div style="max-width: 1400px; margin: 0 auto;">
<h2 style="text-align: center; font-size: 3.5rem; margin-bottom: 50px; color: #e8f4f8; font-weight: 800;">The Origin Story</h2>
<p style="font-size: 1.35rem; color: #a8dadc; line-height: 1.8; margin-bottom: 40px; text-align: center;">In February 2026, three people came together with a simple question:</p>
<p style="font-size: 1.8rem; color: #4ecdc4; text-align: center; font-style: italic; margin-bottom: 50px; font-weight: 600;">"What if we built something that outlives us?"</p>
<p style="font-size: 1.35rem; color: #e8f4f8; line-height: 1.8; margin-bottom: 30px;"><span style="color: #4ecdc4; font-weight: 700;">The Wizard</span> brought the frost — technical precision, infrastructure that doesn't break, and systems built to last decades.</p>
<p style="font-size: 1.35rem; color: #e8f4f8; line-height: 1.8; margin-bottom: 30px;"><span style="color: #ff6b35; font-weight: 700;">The Emissary</span> brought the fire — passion for community, belief in the power of connection, and the conviction that gaming spaces should feel like home.</p>
<p style="font-size: 1.35rem; color: #e8f4f8; line-height: 1.8; margin-bottom: 50px;"><span style="color: #A855F7; font-weight: 700;">The Catalyst</span> brought the arcane storm — creative vision, building expertise, and the transformative energy that turns dreams into reality.</p>
<p style="font-size: 1.35rem; color: #a8dadc; line-height: 1.8; margin-bottom: 40px;">Together, they founded Firefrost Gaming on a principle that sounds crazy in 2026:</p>
<p style="font-size: 2rem; color: #FFD700; text-align: center; font-weight: 700; margin-bottom: 50px;">"We're building this for children not yet born."</p>
<p style="font-size: 1.35rem; color: #e8f4f8; line-height: 1.8; margin-bottom: 30px;">Not for quarterly profits. Not for investor returns. Not to flip and sell.</p>
<p style="font-size: 1.35rem; color: #e8f4f8; line-height: 1.8; margin-bottom: 50px;"><strong style="color: #4ecdc4; font-size: 1.4rem;">For legacy.</strong> For a community that will outlive us, documented so well that future generations can continue the work. Every server. Every player. Every moment preserved.</p>
<div style="text-align: center; margin-top: 60px;">
<a href="https://firefrostgaming.com/about" style="display: inline-block; color: #4ecdc4; text-decoration: none; font-size: 1.3rem; font-weight: 600; border-bottom: 2px solid #4ecdc4; padding-bottom: 5px;">Read our full story →</a>
</div>
</div>
</div>
<!-- ===================================================================== -->
<!-- BLOCK 4: WHY FIREFROST -->
<!-- Three-column value propositions: Security, Community, Legacy -->
<!-- ===================================================================== -->
<div class="ffg-custom-text" style="padding: 100px 40px; margin: 80px 0 0; background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);">
<div style="max-width: 1600px; margin: 0 auto;">
<h2 style="text-align: center; margin-bottom: 30px; color: #ffffff; font-weight: 800; text-shadow: 2px 2px 8px rgba(0,0,0,0.7);">Why Firefrost?</h2>
<p style="text-align: center; color: #a8dadc; margin-bottom: 70px; line-height: 1.6;">Because you deserve better than "good enough" hosting. Because community matters. Because legacy outlasts profits.</p>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px;">
<!-- Security First -->
<div style="background: rgba(26, 26, 46, 0.6); border: 2px solid rgba(78, 205, 196, 0.4); border-radius: 15px; padding: 45px; text-align: center;">
<div style="font-size: 4.5rem; margin-bottom: 25px;">🛡️</div>
<h3 style="color: #4ecdc4; margin-bottom: 15px; font-weight: 700;">Security First</h3>
<p style="color: #a8dadc; margin-bottom: 30px; font-weight: 600;">The Iron Wall</p>
<ul style="list-style: none; padding: 0; margin: 0; color: #e8f4f8; text-align: left; line-height: 1.8;">
<li style="margin-bottom: 12px;">✓ 99.9% uptime guarantee</li>
<li style="margin-bottom: 12px;">✓ DDoS protection & monitoring</li>
<li style="margin-bottom: 12px;">✓ Automated backups (daily)</li>
<li style="margin-bottom: 12px;">✓ No compromises on player safety</li>
</ul>
</div>
<!-- Real Community -->
<div style="background: rgba(26, 26, 46, 0.6); border: 2px solid rgba(255, 107, 53, 0.4); border-radius: 15px; padding: 45px; text-align: center;">
<div style="font-size: 4.5rem; margin-bottom: 25px;">❤️</div>
<h3 style="color: #ff6b35; margin-bottom: 15px; font-weight: 700;">Real Community</h3>
<p style="color: #f7931e; margin-bottom: 30px; font-weight: 600;">The Human Touch</p>
<ul style="list-style: none; padding: 0; margin: 0; color: #e8f4f8; text-align: left; line-height: 1.8;">
<li style="margin-bottom: 12px;">✓ Founders-operated (not corporate)</li>
<li style="margin-bottom: 12px;">✓ Active moderation & support</li>
<li style="margin-bottom: 12px;">✓ Discord-integrated events</li>
<li style="margin-bottom: 12px;">✓ Family-friendly culture</li>
</ul>
</div>
<!-- Built to Last -->
<div style="background: rgba(26, 26, 46, 0.6); border: 2px solid rgba(168, 85, 247, 0.4); border-radius: 15px; padding: 45px; text-align: center;">
<div style="font-size: 4.5rem; margin-bottom: 25px;">📜</div>
<h3 style="color: #a855f7; margin-bottom: 15px; font-weight: 700;">Built to Last</h3>
<p style="color: #c084fc; margin-bottom: 30px; font-weight: 600;">Legacy Over Profit</p>
<ul style="list-style: none; padding: 0; margin: 0; color: #e8f4f8; text-align: left; line-height: 1.8;">
<li style="margin-bottom: 12px;">✓ Fully documented infrastructure</li>
<li style="margin-bottom: 12px;">✓ Every decision preserved in Git</li>
<li style="margin-bottom: 12px;">✓ Built for decades, not quarters</li>
<li style="margin-bottom: 12px;">✓ Transparent operations</li>
<li style="margin-bottom: 12px;">✓ Community over shareholders</li>
<li style="margin-bottom: 12px;">✓ Your data will outlive us</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ===================================================================== -->
<!-- BLOCK 6: COMMUNITY STATS & CTA -->
<!-- 13+ servers, growing community, 99.9% uptime + join CTA -->
<!-- ===================================================================== -->
<div class="ffg-custom-text" style="padding: 100px 60px; margin: 80px auto 0; 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%); border-radius: 15px; border: 3px solid rgba(78, 205, 196, 0.4); max-width: 1600px;">
<h2 style="text-align: center; margin-bottom: 30px; color: #e8f4f8; font-weight: 800;">Your Community Awaits</h2>
<p style="text-align: center; color: #a8dadc; margin-bottom: 70px; line-height: 1.6;">Join the Firefrost community. Events, support, friendship — this is your refuge.</p>
<div style="display: flex; justify-content: space-around; margin-bottom: 70px; flex-wrap: wrap; gap: 50px;">
<div style="text-align: center;">
<div style="font-size: 4.5rem; font-weight: 700; color: #4ecdc4; margin-bottom: 10px;">13+</div>
<div style="color: #a8dadc;">Active Servers</div>
</div>
<div style="text-align: center;">
<div style="font-size: 4.5rem; font-weight: 700; color: #ff6b35; margin-bottom: 10px;">Growing</div>
<div style="color: #a8dadc;">Community</div>
</div>
<div style="text-align: center;">
<div style="font-size: 4.5rem; font-weight: 700; color: #a855f7; margin-bottom: 10px;">99.9%</div>
<div style="color: #a8dadc;">Uptime</div>
</div>
</div>
<div style="text-align: center;">
<a href="https://firefrostgaming.com/subscribe" style="display: inline-block; background: linear-gradient(135deg, #FF6B35 0%, #A855F7 50%, #4ECDC4 100%); color: white; padding: 22px 60px; text-decoration: none; border-radius: 12px; font-weight: 700; box-shadow: 0 8px 25px rgba(78, 205, 196, 0.5); transition: transform 0.3s;">🔥⚡❄️ Join Firefrost</a>
<p style="margin-top: 30px; color: #a8dadc;">Or browse our <a href="https://firefrostgaming.com/servers" style="color: #4ecdc4; text-decoration: underline; font-weight: 600;">server list</a> first</p>
</div>
</div>
<!-- ===================================================================== -->
<!-- BLOCK 7: FOOTER -->
<!-- Links, legal, social media, copyright -->
<!-- ===================================================================== -->
<footer class="ffg-footer" style="margin-top: 100px; padding: 80px 60px 50px; background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 100%); border-top: 3px solid rgba(78, 205, 196, 0.4);">
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; margin-bottom: 50px; max-width: 1600px; margin-left: auto; margin-right: auto;">
<!-- About Column -->
<div>
<h4 style="color: #4ecdc4; margin-bottom: 20px; font-weight: 700;">Firefrost Gaming</h4>
<p style="color: #a8dadc; line-height: 1.7; margin-bottom: 20px;">Building a gaming refuge where passion meets precision through creative transformation.</p>
<p class="tagline" style="color: #FFD700; font-weight: 600;">Fire + Arcane + Frost = Forever 🔥⚡❄️</p>
</div>
<!-- Links Column (Quick Links + Legal Combined) -->
<div>
<h4 style="color: #ff6b35; margin-bottom: 20px; font-weight: 700;">Quick Links</h4>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 12px;"><a href="https://firefrostgaming.com/about" style="color: #a8dadc; text-decoration: none;">About Us</a></li>
<li style="margin-bottom: 12px;"><a href="https://firefrostgaming.com/servers" style="color: #a8dadc; text-decoration: none;">Server List</a></li>
<li style="margin-bottom: 12px;"><a href="https://firefrostgaming.com/subscribe" style="color: #a8dadc; text-decoration: none;">Subscribe</a></li>
<li style="margin-bottom: 12px;"><a href="https://firefrostgaming.com/blog" style="color: #a8dadc; text-decoration: none;">Blog</a></li>
<li style="margin-bottom: 12px;"><a href="https://status.firefrostgaming.com" style="color: #a8dadc; text-decoration: none;">Status Page</a></li>
</ul>
<h4 style="color: #4ecdc4; margin-bottom: 20px; margin-top: 35px; font-weight: 700;">Legal</h4>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 12px;"><a href="https://firefrostgaming.com/privacy" style="color: #a8dadc; text-decoration: none;">Privacy Policy</a></li>
<li style="margin-bottom: 12px;"><a href="https://firefrostgaming.com/terms" style="color: #a8dadc; text-decoration: none;">Terms of Service</a></li>
<li style="margin-bottom: 12px;"><a href="https://firefrostgaming.com/contact" style="color: #a8dadc; text-decoration: none;">Contact</a></li>
</ul>
</div>
<!-- Community Column -->
<div>
<h4 style="color: #a855f7; margin-bottom: 20px; font-weight: 700;">Community</h4>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 12px;"><a href="https://linktr.ee/firefrostgaming" style="color: #FFD700; text-decoration: none; font-weight: 600;">🔗 All Our Socials</a></li>
<li style="margin-bottom: 12px;"><a href="https://firefrostgaming.com/discord" style="color: #a8dadc; text-decoration: none;">Discord</a></li>
<li style="margin-bottom: 12px;"><a href="https://twitter.com/PlayFirefrost" style="color: #a8dadc; text-decoration: none;">Twitter/X</a></li>
<li style="margin-bottom: 12px;"><a href="https://instagram.com/playfirefrost" style="color: #a8dadc; text-decoration: none;">Instagram</a></li>
<li style="margin-bottom: 12px;"><a href="https://reddit.com/r/FirefrostGaming" style="color: #a8dadc; text-decoration: none;">Reddit</a></li>
<li style="margin-bottom: 12px;"><a href="https://tiktok.com/@playfirefrost" style="color: #a8dadc; text-decoration: none;">TikTok</a></li>
<li style="margin-bottom: 12px;"><a href="https://twitch.tv/playfirefrost" style="color: #a8dadc; text-decoration: none;">Twitch</a></li>
<li style="margin-bottom: 12px;"><a href="https://www.facebook.com/FirefrostGaming/" style="color: #a8dadc; text-decoration: none;">Facebook</a></li>
<li style="margin-bottom: 12px;"><a href="https://bsky.app/profile/playfirefrost.bsky.social" style="color: #a8dadc; text-decoration: none;">BlueSky</a></li>
</ul>
</div>
</div>
<div style="text-align: center; padding-top: 40px; border-top: 2px solid rgba(78, 205, 196, 0.3);">
<p class="copyright" style="color: #6b7280; margin: 0;">© 2026 Firefrost Gaming. Built for children not yet born.</p>
<p class="bottom-tagline" style="color: #4ecdc4; margin-top: 15px;">Minnesota | Fire + Frost + Foundation = Where Love Builds Legacy 💙</p>
</div>
</footer>
<!-- ===================================================================== -->
<!-- END OF HOMEPAGE BLOCKS -->
<!-- ===================================================================== -->