firefrost-gaming/firefrost-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
620097d2a6762cb412b4b88cc3ffbfacb161a88b
firefrost-website/contact.njk
Claude (Chronicler #56) 620097d2a6 feat: add Formspree contact form to contact page 
WHAT WAS DONE:
Added complete contact form section using Formspree integration.

FORM FIELDS:
- Name (required)
- Email (required)
- Subject (required)
- Message (textarea, required)
- Submit button with Fire/Frost/Arcane gradient

STYLING:
- Dark theme matching site aesthetic
- Frost cyan borders and labels
- Responsive form layout
- Fire/Frost/Arcane gradient submit button

ACTION REQUIRED:
Replace 'YOUR_FORM_ID' in the form action URL with actual Formspree form ID:
1. Sign up at https://formspree.io
2. Create new form
3. Get form endpoint ID
4. Replace in: action="https://formspree.io/f/YOUR_FORM_ID"

FORM ENDPOINT:
Currently set to: https://formspree.io/f/YOUR_FORM_ID (placeholder)
Form will not work until Formspree ID is configured.

Signed-off-by: Claude (Chronicler #56) <claude@firefrostgaming.com>
2026-04-03 02:10:33 +00:00

112 lines
7.8 KiB
Plaintext
Raw Blame History

---
layout: layouts/base.njk
title: Contact Us
description: Get in touch with The Trinity at Firefrost Gaming
---
<!-- CONTACT 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);">Contact Us</h1>
<p style="font-size: 1.5rem; color: #a8dadc; max-width: 900px; margin: 0 auto 40px; line-height: 1.8;">Get in touch with The Trinity. We're here to help.</p>
<p style="font-size: 1.8rem; color: #FFD700; font-weight: 700;">Fire + Arcane + Frost = Here for You</p>
</div>
<!-- CONTACT METHODS -->
<div style="padding: 100px 60px; background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);">
<div style="max-width: 1400px; margin: 0 auto;">
<div style="text-align: center; margin-bottom: 80px;">
<h2 style="font-size: 3rem; margin-bottom: 20px; color: #e8f4f8; font-weight: 800;">How to Reach Us</h2>
<p style="font-size: 1.3rem; color: #a8dadc; line-height: 1.7;">Choose the method that works best for you.</p>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 50px; margin-bottom: 80px;">
<!-- Discord - Primary -->
<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: 45px; text-align: center;">
<div style="font-size: 4rem; margin-bottom: 20px;">💬</div>
<h3 style="color: #A855F7; font-size: 2rem; margin-bottom: 15px; font-weight: 700;">Discord (Fastest)</h3>
<p style="color: #e8f4f8; line-height: 1.8; margin-bottom: 25px; font-size: 1.1rem;">Join our community Discord for real-time support, announcements, and to connect with other players.</p>
<a href="https://discord.gg/firefrost" style="display: inline-block; background: linear-gradient(135deg, #A855F7 0%, #C77DFF 100%); color: white; padding: 15px 40px; text-decoration: none; border-radius: 8px; font-weight: 700; font-size: 1.1rem;">Join Discord</a>
</div>
<!-- Email - Support -->
<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: 45px; text-align: center;">
<div style="font-size: 4rem; margin-bottom: 20px;">📧</div>
<h3 style="color: #4ecdc4; font-size: 2rem; margin-bottom: 15px; font-weight: 700;">Email Support</h3>
<p style="color: #e8f4f8; line-height: 1.8; margin-bottom: 25px; font-size: 1.1rem;">For account issues, billing questions, or detailed technical support.</p>
<p style="color: #4ecdc4; font-size: 1.2rem; font-weight: 600; margin-bottom: 10px;">support@firefrostgaming.com</p>
<p style="color: #a8dadc; font-size: 0.95rem; font-style: italic;">Response time: 24-48 hours</p>
</div>
<!-- Social Media -->
<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: 45px; text-align: center;">
<div style="font-size: 4rem; margin-bottom: 20px;">🔥</div>
<h3 style="color: #ff6b35; font-size: 2rem; margin-bottom: 15px; font-weight: 700;">Social Media</h3>
<p style="color: #e8f4f8; line-height: 1.8; margin-bottom: 25px; font-size: 1.1rem;">Follow us for updates, events, and community highlights.</p>
<p style="margin-bottom: 15px;"><a href="https://www.facebook.com/FirefrostGaming/" style="color: #4ecdc4; text-decoration: none; font-size: 1.1rem; font-weight: 600;">Facebook</a></p>
<p style="color: #a8dadc; font-size: 0.95rem; font-style: italic;">More platforms coming soon</p>
</div>
</div>
</div>
</div>
<!-- CONTACT FORM -->
<div style="padding: 100px 60px; background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);">
<div style="max-width: 800px; margin: 0 auto;">
<div style="text-align: center; margin-bottom: 60px;">
<h2 style="font-size: 3rem; margin-bottom: 20px; color: #e8f4f8; font-weight: 800;">Send Us a Message</h2>
<p style="font-size: 1.3rem; color: #a8dadc; line-height: 1.7;">Fill out the form below and we'll get back to you within 24-48 hours.</p>
</div>
<!-- Formspree Form - Replace YOUR_FORM_ID with actual Formspree form ID -->
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST" style="background: rgba(26, 26, 46, 0.6); border: 2px solid rgba(78, 205, 196, 0.4); border-radius: 15px; padding: 50px;">
<div style="margin-bottom: 30px;">
<label for="name" style="display: block; color: #4ecdc4; font-weight: 600; margin-bottom: 10px; font-size: 1.1rem;">Name *</label>
<input type="text" id="name" name="name" required style="width: 100%; padding: 15px; background: rgba(15, 15, 30, 0.8); border: 2px solid rgba(78, 205, 196, 0.3); border-radius: 8px; color: #e8f4f8; font-size: 1rem;" />
</div>
<div style="margin-bottom: 30px;">
<label for="email" style="display: block; color: #4ecdc4; font-weight: 600; margin-bottom: 10px; font-size: 1.1rem;">Email *</label>
<input type="email" id="email" name="email" required style="width: 100%; padding: 15px; background: rgba(15, 15, 30, 0.8); border: 2px solid rgba(78, 205, 196, 0.3); border-radius: 8px; color: #e8f4f8; font-size: 1rem;" />
</div>
<div style="margin-bottom: 30px;">
<label for="subject" style="display: block; color: #4ecdc4; font-weight: 600; margin-bottom: 10px; font-size: 1.1rem;">Subject *</label>
<input type="text" id="subject" name="subject" required style="width: 100%; padding: 15px; background: rgba(15, 15, 30, 0.8); border: 2px solid rgba(78, 205, 196, 0.3); border-radius: 8px; color: #e8f4f8; font-size: 1rem;" />
</div>
<div style="margin-bottom: 30px;">
<label for="message" style="display: block; color: #4ecdc4; font-weight: 600; margin-bottom: 10px; font-size: 1.1rem;">Message *</label>
<textarea id="message" name="message" rows="6" required style="width: 100%; padding: 15px; background: rgba(15, 15, 30, 0.8); border: 2px solid rgba(78, 205, 196, 0.3); border-radius: 8px; color: #e8f4f8; font-size: 1rem; resize: vertical;"></textarea>
</div>
<div style="text-align: center;">
<button type="submit" style="background: linear-gradient(135deg, #FF6B35 0%, #A855F7 50%, #4ECDC4 100%); color: white; padding: 18px 60px; border: none; border-radius: 8px; font-weight: 700; font-size: 1.2rem; cursor: pointer; transition: transform 0.2s;">Send Message</button>
</div>
</form>
</div>
</div>
<!-- ADDITIONAL CONTACTS -->
<div style="padding: 100px 60px; background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 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;">Other Contacts</h2>
<div style="margin-bottom: 40px;">
<h3 style="color: #A855F7; font-size: 1.8rem; margin-bottom: 15px; font-weight: 700;">Legal & Privacy</h3>
<p style="color: #e8f4f8; line-height: 1.8; font-size: 1.1rem; margin-bottom: 15px;">For data requests, privacy concerns, or legal matters:</p>
<p style="color: #4ecdc4; font-size: 1.2rem; font-weight: 600;">legal@firefrostgaming.com</p>
</div>
<div style="margin-bottom: 40px;">
<h3 style="color: #A855F7; font-size: 1.8rem; margin-bottom: 15px; font-weight: 700;">Press & Media</h3>
<p style="color: #e8f4f8; line-height: 1.8; font-size: 1.1rem; margin-bottom: 15px;">Media inquiries, press releases, or interview requests:</p>
<p style="color: #4ecdc4; font-size: 1.2rem; font-weight: 600;">press@firefrostgaming.com</p>
</div>
</div>
</div>
Reference in New Issue View Git Blame Copy Permalink