Games Listing Page

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

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",
    // ...
  },
};

Customize hero and grid section

Update title, description, and stats

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:

Field	Type	Description
`title`	string	CTA title (keep short)
`description`	string	Brief explanation
`buttonText`	string	Button label
`buttonLink`	string	Destination 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:

Icon	Description	Best For
`Zap`	Lightning bolt	Speed, instant features
`Shield`	Protection shield	Security, DDoS protection
`Users`	Multiple people	Support, community
`Clock`	Clock/time	Uptime, reliability

Available Colors:

Color	Hex	Use For
`yellow`	#EAB308	Speed, performance
`purple`	#A855F7	Premium, security
`blue`	#3B82F6	Trust, support
`green`	#10B981	Reliability, uptime
`cyan`	#06B6D4	Technology, storage
`orange`	#F97316	Backups, safety

Best Practices:

Use 6 features - Fills the 3-column grid perfectly
Vary colors - Don’t use same color twice
Short titles - 2-3 words max
Descriptive text - 15-25 words explaining the benefit
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

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

Grid Section

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

Background Image

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

Troubleshooting

Games not showing in grid

The grid automatically pulls from config/games/ directory. Check:

Game configs exist in config/games/
Each game has enabled: true
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

Getting Started

Configuration

Products & Hosting

Page Configuration

Deployment

Help & Resources

Overview

Quick Start

Configuration Structure

Hero Section

Grid Section

Request Game CTA

Features Section

Complete Example

Best Practices

Hero Section

Grid Section

Background Image

Troubleshooting

Games not showing in grid

Stats not displaying

Title highlight not working

Background image not loading

​Overview

​Quick Start

​Configuration Structure

​Hero Section

​Grid Section

​Request Game CTA

​Features Section

​Complete Example

​Best Practices

​Hero Section

​Grid Section

​Background Image

​Troubleshooting

​Games not showing in grid

​Stats not displaying

​Title highlight not working

​Background image not loading

Overview

Quick Start

Configuration Structure

Hero Section

Grid Section

Request Game CTA

Features Section

Complete Example

Best Practices

Hero Section

Grid Section

Background Image

Troubleshooting

Games not showing in grid

Stats not displaying

Title highlight not working

Background image not loading