> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yuvrajverma.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Games Listing Page

> Configure the games directory page (/games) with hero section and grid layout

<Callout icon="link-horizontal" color="#2fbe1f">**Configuration File:** `config/pages/games.ts`</Callout>

## 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

<Steps>
  <Step title="Edit the config file">
    Open `config/pages/games.ts`:

    ```typescript theme={null}
    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",
        // ...
      },
    };
    ```
  </Step>

  <Step title="Customize hero and grid section">
    Update title, description, and stats
  </Step>

  <Step title="Test it">
    ```bash theme={null}
    npm run dev
    ```

    Visit: [http://localhost:3000/games](http://localhost:3000/games)
  </Step>
</Steps>

***

## Configuration Structure

### Hero Section

```typescript theme={null}
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

```typescript theme={null}
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

<Info>New compact single-row design that appears below the game grid</Info>

```typescript theme={null}
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:**

```typescript theme={null}
// 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

<Info>6-card grid with left-aligned icons matching VPS/Dedicated style</Info>

```typescript theme={null}
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:**

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

```typescript theme={null}
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:

```typescript theme={null}
stats: [
  { label: "Games Supported", value: "20+" }
]
```

### Title highlight not working

Check `titleHighlight` is set (not `highlight`):

```typescript theme={null}
titleHighlight: "Game"  // ✓ Correct
highlight: "Game"       // ✗ Wrong
```

### Background image not loading

Use full HTTPS URL:

```typescript theme={null}
backgroundImage: "https://cdn.example.com/image.jpg"
```

Not relative paths:

```typescript theme={null}
backgroundImage: "/images/hero.jpg"  // Won't work in config
```

***