🎬 Swisser-Web-02

Present Your Server Like a Cinematic Experience

The premium agency-inspired template that showcases your server as a narrative masterpiece

Where Legends Are Written »

---

🎯 Why Choose This Template?

Your FiveM server deserves a cinematic presentation. NightCity RP Template delivers a clean, agency-style aesthetic inspired by GTA loading screens and film studios. This isn't just another gaming website—it's a professional showcase for your narrative-driven server.

Watch your player count grow as visitors are captivated by cinematic animations, live server stats, and a design that presents your server like a premium entertainment experience.

✨ Key Features That Set You Apart

🎨 Cinematic Agency Design

• GTA loading screen inspired aesthetic
• Clean, professional layout like a film agency
• Netflix-style gallery navigation
• Editorial magazine-inspired typography

⚡ Performance That Delivers

• Lightning-fast load times with Vite 7.1
• Live player count updates every 30 seconds
• One-click FiveM server connection
• GitHub Pages ready—deploy in minutes

🛠️ Built for Real Developers

• Clean, maintainable React components
• Full TypeScript support with zero errors
• Tailwind CSS for rapid customization
• Professional CI/CD pipeline included

📱 Everything Your Server Needs

• Hero Section - Cinematic loading screen with rotating tips
• Features Grid - Editorial-style feature showcase
• Jobs System - Professional career presentation
• Rules Section - Clean documentation layout
• Team Showcase - Agency-style team portraits
• Media Gallery - Netflix-inspired media browser
• Legal Pages - GDPR-compliant privacy policy
• Navigation - Transparent to solid scroll effect

🚀 Get Started in 3 Minutes

# Clone the template
git clone https://github.com/yourusername/nightcity-rp.git

# Install and run
cd nightcity-rp
npm install
npm run dev

Your site is now live at http://localhost:5173 ✨

🌐 Deploy to GitHub Pages

Push your code and let GitHub Actions handle the rest:

git push origin main

Your site automatically deploys to: https://[username].github.io/[repo-name]/

🎮 FiveM Integration That Works

Connect Your Server in 30 Seconds

1. Find your server on servers.fivem.net
2. Copy your server code from the URL
3. Add it to site.config.json:

"api": {
  "serverCode": "ymkax5"  // Your code here
}

That's it! Your site now shows:

• ✅ Live player count
• ✅ Server online/offline status
• ✅ Direct connect button
• ✅ Auto-refresh every 30 seconds

🎨 Make It Yours

Simple Configuration

Everything is in one file: src/config/site.config.json (700+ lines)

• Server details with cinematic taglines
• Separate loading/main backgrounds
• Professional job descriptions
• Clean rule guidelines
• Team leadership presentation
• All UI text customizable

Professional Image Hosting

All images are hosted on Unsplash CDN:

• No GitHub Pages path issues
• Faster loading from global CDN
• Professional stock photos included
• Just replace URLs to customize

💪 What Makes This Design Special?

The Cinematic Aesthetic

• GTA loading screen inspiration
• Ken Burns effect animations
• Smooth ScrollTrigger transitions
• Film noir color palette (noir/blanc/gold)

Production-Ready Code

• Clean, professional codebase
• Build runs without warnings
• TypeScript fully configured
• Comprehensive .gitignore

Developer Experience

• One-command deployment
• Automated GitHub Actions
• Type-safe development
• Modern React 19.1

🛠️ Tech Stack

• React 19.1 - Latest and greatest
• TypeScript - Type-safe by default
• Vite 7.1 - Instant HMR
• Tailwind CSS - Style at the speed of thought
• GSAP - Hollywood-grade animations
• Framer Motion - Smooth as butter

📦 Clean Project Structure

swisser-web-03/
├── .github/workflows/    # Automated deployment
├── src/
│   ├── components/       # Modular components
│   ├── config/          # Single config file
│   └── pages/           # Route pages
├── public/              # Static assets
└── DEPLOYMENT.md        # Complete guide

🤝 Features Overview

Design Philosophy

• Clean, cinematic presentation
• Professional agency aesthetic
• GTA loading screen inspiration
• Focus on storytelling and narrative

Technical Excellence

• React 19.1 with TypeScript
• GSAP ScrollTrigger animations
• Tailwind CSS with custom design tokens
• Fully responsive and optimized

💝 Support the Project

If Swisser-Web-03 helps your server grow:

• ⭐ Star this repo
• 🔄 Share with friends
• 💬 Join our Discord
• ☕ Buy us a coffee

---

Ready to Create Your Legend?

Transform your FiveM server into a cinematic experience

Start Your Story →

Every Story. Every Choice. Every Moment.