Skip to main content
Configuration File: config/pages/games.ts

​
Overview

The games listing page (/games) displays all available game servers:
  • Hero section with title and stats
  • Grid section header
  • Automatic grid of all game configs
Configuration file: config/pages/games.ts

​
Quick Start

1

Edit the config file

Open config/pages/games.ts:
export const gamesPageConfig = {
  hero: {
    title: "Choose Your",
    titleHighlight: "Game",
    description: "Premium game server hosting with instant setup",
    backgroundImage: "https://cdn.example.com/games-hero.jpg",
    // ...
  },
};
2

Customize hero and grid section

Update title, description, and stats
3

Test it

npm run dev
Visit: http://localhost:3000/games

​
Configuration Structure

​
Hero Section

hero: {
  title: "Choose Your",
  titleHighlight: "Game",           // Highlighted word
  description: "Premium game server hosting with instant setup, DDoS protection, and enterprise-grade hardware. Deploy in seconds.",
  backgroundImage: "https://cdn.arcanitegames.ca/6a762d5be25e3837cd62986bd43f0106_hytale_cursebreaker_key_art_2k.jpg",
  stats: [
    { label: "Games Supported", value: "20+" },
    { label: "Active Servers", value: "10K+" },
    { label: "Countries", value: "50+" },
  ],
}
Title Format: "title [titleHighlight]"
  • Example: “Choose Your Game”
Stats: Show 3 metrics related to game hosting (games supported, servers running, global reach)

​
Grid Section

grid: {
  title: "Available Game Servers",
  description: "Choose from our selection of optimized game server hosting solutions.",
}
The grid automatically displays all game configs from config/games/ directory. No need to manually list games here.

​
Request Game CTA

New compact single-row design that appears below the game grid
requestGame: {
  title: "Don't see your game?",
  description: "Request it and we'll add it within 48 hours",
  buttonText: "Request a Game",
  buttonLink: "/contact",
}
Options:
FieldTypeDescription
titlestringCTA title (keep short)
descriptionstringBrief explanation
buttonTextstringButton label
buttonLinkstringDestination URL (internal/external)
Example variants: 
// Simple variant
requestGame: {
  title: "Don't see your game?",
  description: "Let us know",
  buttonText: "Submit Request",
  buttonLink: "/contact",
}

// Detailed variant
requestGame: {
  title: "Missing a game?",
  description: "We add new games within 48 hours of request",
  buttonText: "Request Now",
  buttonLink: "https://forms.google.com/your-form",
}

​
Features Section

6-card grid with left-aligned icons matching VPS/Dedicated style
featuresSection: {
  title: "Why Host With Us?",
  description: "Every game server includes enterprise-grade features at no extra cost",
},

features: [
  {
    icon: "Zap",              // Icon name (lucide-react)
    title: "Instant Setup",
    description: "Deploy your server in under 5 minutes with automated configuration and one-click mod installation.",
    color: "yellow" as const, // Icon/border color
  },
  {
    icon: "Shield",
    title: "DDoS Protected",
    description: "Enterprise-grade protection with automatic attack mitigation keeps your server online 24/7.",
    color: "purple" as const,
  },
  // ... 4 more features
]
Available Icons:
IconDescriptionBest For
ZapLightning boltSpeed, instant features
ShieldProtection shieldSecurity, DDoS protection
UsersMultiple peopleSupport, community
ClockClock/timeUptime, reliability
Available Colors:
ColorHexUse For
yellow#EAB308Speed, performance
purple#A855F7Premium, security
blue#3B82F6Trust, support
green#10B981Reliability, uptime
cyan#06B6D4Technology, storage
orange#F97316Backups, safety
Best Practices:
  1. Use 6 features - Fills the 3-column grid perfectly
  2. Vary colors - Don’t use same color twice
  3. Short titles - 2-3 words max
  4. Descriptive text - 15-25 words explaining the benefit
  5. Match icons - Zap for speed, Shield for security, etc.

​
Complete Example

export const gamesPageConfig = {
  hero: {
    title: "Choose Your",
    titleHighlight: "Game",
    description: "Professional game hosting with instant deployment and 24/7 support.",
    backgroundImage: "https://cdn.example.com/hero.jpg",
    stats: [
      { label: "Games Supported", value: "15+" },
      { label: "Active Servers", value: "5K+" },
      { label: "Countries", value: "30+" },
    ],
  },
  
  grid: {
    title: "Available Game Servers",
    description: "Optimized hosting for your favorite games.",
  },

  requestGame: {
    title: "Don't see your game?",
    description: "Request it and we'll add it within 48 hours",
    buttonText: "Request a Game",
    buttonLink: "/contact",
  },

  featuresSection: {
    title: "Why Host With Us?",
    description: "Every game server includes enterprise-grade features at no extra cost",
  },

  features: [
    {
      icon: "Zap",
      title: "Instant Setup",
      description: "Deploy your server in under 5 minutes with automated configuration and one-click mod installation.",
      color: "yellow" as const,
    },
    {
      icon: "Shield",
      title: "DDoS Protected",
      description: "Enterprise-grade protection with automatic attack mitigation keeps your server online 24/7.",
      color: "purple" as const,
    },
    {
      icon: "Users",
      title: "24/7 Support",
      description: "Expert support team ready to help you anytime. Average response time under 15 minutes.",
      color: "blue" as const,
    },
    {
      icon: "Clock",
      title: "99.9% Uptime",
      description: "Enterprise-grade infrastructure with redundant systems ensures your server is always available.",
      color: "green" as const,
    },
    {
      icon: "Zap",
      title: "NVMe Storage",
      description: "Lightning-fast Gen4 NVMe SSDs deliver instant world loading and zero lag during gameplay.",
      color: "cyan" as const,
    },
    {
      icon: "Shield",
      title: "Auto Backups",
      description: "Daily automatic backups with one-click restore. Never lose your world or player progress.",
      color: "orange" as const,
    },
  ],
} as const;
Note: Don’t forget as const at the end for TypeScript

​
Best Practices

​
Hero Section

  1. Clear purpose - “Choose Your Game” immediately tells users what this page is for
  2. Highlight key word - Make “Game” stand out
  3. Brief description - 1-2 sentences max
  4. Relevant stats - Games count, server count, global reach

​
Grid Section

  1. Simple title - “Available Game Servers” is clear
  2. Short description - Don’t overwhelm before they see the games
  3. Let games speak - The game cards do the heavy lifting

​
Background Image

  1. High quality - Use 1920x1080 or higher
  2. Gaming theme - Use a popular game background
  3. Not too busy - Text must be readable over it

​
Troubleshooting

​
Games not showing in grid

The grid automatically pulls from config/games/ directory. Check:
  1. Game configs exist in config/games/
  2. Each game has enabled: true
  3. Games are properly exported

​
Stats not displaying

Ensure stats array has exactly 3 items with label and value: 
stats: [
  { label: "Games Supported", value: "20+" }
]

​
Title highlight not working

Check titleHighlight is set (not highlight): 
titleHighlight: "Game"  // ✓ Correct
highlight: "Game"       // ✗ Wrong

​
Background image not loading

Use full HTTPS URL: 
backgroundImage: "https://cdn.example.com/image.jpg"
Not relative paths: 
backgroundImage: "/images/hero.jpg"  // Won't work in config