firefrost-gaming/firefrost-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8360f393be057bd2570f44aac083a04ead657cfe
firefrost-website/contact.njk
Claude (Chronicler #56) 2921e88334 feat: add Discord redirect and complete social media integration 
WHAT WAS DONE:
1. Created /discord redirect page → https://discord.gg/hDHvKfqhKs
2. Updated Contact page Discord button to point to /discord
3. Added ALL social media links with Simple Icons to Contact page
4. Added YouTube and social links section to homepage

DISCORD REDIRECT PAGE (discord.njk):
- JavaScript redirect to Discord invite
- Fallback button for users with JS disabled
- Uses permalink: /discord/
- Redirects to: https://discord.gg/hDHvKfqhKs

CONTACT PAGE (contact.njk):
- Discord button now points to /discord (internal redirect)
- Social Media card now has ALL platforms with official Simple Icons:
  * Linktree (all socials hub)
  * YouTube
  * Twitter/X
  * Instagram
  * TikTok
  * Twitch
  * Facebook
  * Reddit
  * BlueSky
- Icons via https://cdn.simpleicons.org/

HOMEPAGE (index.njk):
- Added "Follow Our Journey" section before final CTA
- Includes 5 main platforms: YouTube, Discord, X, Instagram, TikTok
- Simple Icons for visual consistency
- Centered layout with flex display

ICONS:
All social icons use Simple Icons CDN for official brand colors
and consistent sizing (24px on contact, 28px on homepage).

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

119 lines
7.9 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="/discord" 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>
<!-- Social Links with Icons -->
<div style="display: flex; flex-direction: column; gap: 15px; align-items: center;">
<a href="https://linktr.ee/firefrostgaming" style="display: flex; align-items: center; gap: 12px; color: #FFD700; text-decoration: none; font-size: 1.1rem; font-weight: 600;">
<img src="https://cdn.simpleicons.org/linktree/FFD700" alt="Linktree" style="width: 24px; height: 24px;" />
All Our Socials
</a>
<a href="https://youtube.com/@playfirefrost" style="display: flex; align-items: center; gap: 12px; color: #4ecdc4; text-decoration: none; font-size: 1.1rem; font-weight: 600;">
<img src="https://cdn.simpleicons.org/youtube" alt="YouTube" style="width: 24px; height: 24px;" />
YouTube
</a>
<a href="https://twitter.com/PlayFirefrost" style="display: flex; align-items: center; gap: 12px; color: #4ecdc4; text-decoration: none; font-size: 1.1rem; font-weight: 600;">
<img src="https://cdn.simpleicons.org/x" alt="X/Twitter" style="width: 24px; height: 24px;" />
Twitter/X
</a>
<a href="https://instagram.com/playfirefrost" style="display: flex; align-items: center; gap: 12px; color: #4ecdc4; text-decoration: none; font-size: 1.1rem; font-weight: 600;">
<img src="https://cdn.simpleicons.org/instagram" alt="Instagram" style="width: 24px; height: 24px;" />
Instagram
</a>
<a href="https://tiktok.com/@playfirefrost" style="display: flex; align-items: center; gap: 12px; color: #4ecdc4; text-decoration: none; font-size: 1.1rem; font-weight: 600;">
<img src="https://cdn.simpleicons.org/tiktok" alt="TikTok" style="width: 24px; height: 24px;" />
TikTok
</a>
<a href="https://twitch.tv/playfirefrost" style="display: flex; align-items: center; gap: 12px; color: #4ecdc4; text-decoration: none; font-size: 1.1rem; font-weight: 600;">
<img src="https://cdn.simpleicons.org/twitch" alt="Twitch" style="width: 24px; height: 24px;" />
Twitch
</a>
<a href="https://www.facebook.com/FirefrostGaming/" style="display: flex; align-items: center; gap: 12px; color: #4ecdc4; text-decoration: none; font-size: 1.1rem; font-weight: 600;">
<img src="https://cdn.simpleicons.org/facebook" alt="Facebook" style="width: 24px; height: 24px;" />
Facebook
</a>
<a href="https://reddit.com/r/FirefrostGaming" style="display: flex; align-items: center; gap: 12px; color: #4ecdc4; text-decoration: none; font-size: 1.1rem; font-weight: 600;">
<img src="https://cdn.simpleicons.org/reddit" alt="Reddit" style="width: 24px; height: 24px;" />
Reddit
</a>
<a href="https://bsky.app/profile/playfirefrost.bsky.social" style="display: flex; align-items: center; gap: 12px; color: #4ecdc4; text-decoration: none; font-size: 1.1rem; font-weight: 600;">
<img src="https://cdn.simpleicons.org/bluesky" alt="BlueSky" style="width: 24px; height: 24px;" />
BlueSky
</a>
</div>
</div>
</div>
</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