c888f3f5e6
WHAT:
- Complete 11ty static site generator project structure
- Homepage with hero and Fire/Frost path sections
- Master layout system (base + head + footer partials)
- Fire/Frost/Arcane branding CSS
- Critical .eleventy.js config from Gemini
- Ready-to-build test for Ghost CMS migration
STRUCTURE:
- _includes/layouts/base.njk (master template)
- _includes/head.njk (Fire/Frost branding, meta tags)
- _includes/footer.njk (complete footer from Ghost)
- src/css/firefrost.css (minimal responsive styles)
- index.njk (homepage with hero + path cards)
- .eleventy.js (passthrough config for CSS/images)
- package.json (11ty v3.0.0)
- README.md (complete test instructions)
GEMINI'S CRITICAL CONFIG:
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addPassthroughCopy('assets');
This prevents CSS/images from being ignored in build.
BUILD COMMANDS:
npm install
npx @11ty/eleventy
npx @11ty/eleventy --serve (local test at :8080)
DEPLOY TARGET:
Cloudflare Pages with:
- Build command: npx @11ty/eleventy
- Output directory: _site
- NODE_VERSION=20
ABORT CRITERIA:
- 15+ min on build errors
- CSS rewrite needed
- Mobile nav breaks
STATUS: Ready for 2-hour test on Ghost VPS
Signed-off-by: Chronicler #55 <claude@firefrostgaming.com>
96 lines
7.2 KiB
Plaintext
96 lines
7.2 KiB
Plaintext
---
|
|
layout: layouts/base.njk
|
|
title: Home
|
|
description: Fire + Frost + Foundation = Where Love Builds Legacy
|
|
---
|
|
|
|
<!-- Hero Section -->
|
|
<div class="ffg-hero" style="position: relative; min-height: 1000px; display: flex; align-items: center; justify-content: center; margin: 0 0 40px 0; background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 100%);">
|
|
|
|
<div style="position: relative; z-index: 2; text-align: center; padding: 100px 40px;">
|
|
|
|
<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; font-size: 4rem;">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); font-size: 1.5rem;">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 -->
|
|
<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>
|
|
|
|
<!-- Choose Your Path Section -->
|
|
<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); font-size: 3rem;">Choose Your Destiny</h2>
|
|
<p style="text-align: center; color: #a8dadc; margin-bottom: 70px; line-height: 1.6; font-size: 1.2rem;">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); font-size: 2rem;">🔥 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); font-size: 2rem;">❄️ 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: 700; font-size: 1.3rem; margin-top: 50px;">
|
|
All subscribers access ALL servers. Choose based on your heart, not limitations. 💙
|
|
</p>
|
|
</div>
|
|
</div>
|