Page Sections

Toggle sections on/off and customize their appearance.

Section Visibility

Every section can be toggled on or off. Set to false to hide:

src/config/site.config.ts

sections: {
  hero: true,           // Main banner with server name
  serverStatus: true,   // Live player count
  stats: true,          // Statistics strip
  gameModes: true,      // Game mode cards
  features: true,       // Server features
  cta: true,            // Call-to-action
  footer: true,         // Footer with links
}

○Example

To hide the stats section, change stats: true to stats: false

Hero Section

The main banner at the top of your page.

hero: {
  // Animated particle background
  animatedBackground: true,
  
  // Show online/offline badge
  showStatusBadge: true,
  
  // Main button
  primaryButton: {
    text: 'Start Playing',
    showIcon: true,
  },
  
  // Copy IP button
  secondaryButton: {
    text: 'Copy Server IP',
    copiedText: 'Copied!',
  },
}

Disable Animations

For a cleaner look or better performance, disable the particle background:

hero: {
  animatedBackground: false,
  // ...
}

Server Status Section

Shows live player count and server status.

serverStatus: {
  // Enable live polling
  enabled: true,
  
  // How often to check (milliseconds)
  pollingInterval: 30000,  // 30 seconds
  
  // What to display
  showPlayerCount: true,
  showVersion: true,
  
  // Message when server is down
  offlineText: 'Server Maintenance',
}

Polling Intervals

Interval	Value	Use Case
15 seconds	15000	Real-time feel, more API calls
30 seconds	30000	Default, good balance
60 seconds	60000	Lower API usage
5 minutes	300000	Minimal updates

Stats Section

A strip showing key server statistics.

stats: [
  {
    id: 'uptime',
    icon: Clock,
    value: '99.9%',
    label: 'Uptime',
  },
  {
    id: 'players',
    icon: Users,
    value: '10,000+',
    label: 'Players',
  },
  {
    id: 'modes',
    icon: Gamepad2,
    value: '6',
    label: 'Game Modes',
  },
  {
    id: 'events',
    icon: Trophy,
    value: 'Weekly',
    label: 'Events',
  },
]

✓Add More Stats

Just copy an existing stat object and paste it below. Change the id, icon, value, and label.

CTA Section

Call-to-action near the bottom of the page.

cta: {
  title: 'Ready to Join the Adventure?',
  subtitle: 'Connect now and become part of our growing community',
  
  primaryButton: {
    text: 'Join Server Now',
    showIcon: true,
  },
  
  // Discord button (leave url empty to hide)
  discord: {
    text: 'Join Discord',
    url: 'https://discord.gg/your-server',
  },
}

Footer

Links, social icons, and copyright.

footer: {
  showLogo: true,
  copyright: '© {year} YourServer. All rights reserved.',
  
  links: [
    { id: 'store', label: 'Store', url: 'https://store.yourserver.com', external: true },
    { id: 'rules', label: 'Rules', url: '/rules', external: false },
    { id: 'discord', label: 'Discord', url: 'https://discord.gg/xxx', external: true },
    { id: 'vote', label: 'Vote', url: 'https://vote.yourserver.com', external: true },
  ],
  
  socials: {
    discord: 'https://discord.gg/your-server',
    twitter: '',   // Leave empty to hide
    youtube: '',
    tiktok: '',
  },
}

○Dynamic Year

Use {year} in the copyright text to automatically insert the current year.