Skip to main content
Configuration File: config/home.ts
Using Feature Icons? Check the Icons Guide to learn how to add and configure icons for your features, stats, and benefits sections.

​
Overview

The home page is your main landing page. Configure:
  • Hero section with title, subtitle, and stats
  • Features grid showcasing your benefits
  • Products section linking to other hosting types
Configuration file: config/home.ts

​
Quick Start

1

Edit the config file

Open config/home.ts:
export const homeConfig = {
  hero: {
    title: "Game server hosting built to",
    highlight: "run",
    titleSuffix: ", not impress.",
    subtitle: "Low-latency servers and transparent pricing",
    backgroundImage: "https://cdn.example.com/hero.jpg",
    // ...
  },
};
2

Customize features and products

Update feature cards and product offerings
3

Test it

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

​
Configuration Structure

​
Hero Section

hero: {
  backgroundImage: "https://cdn.example.com/hero.jpg",
  
  title: "Game server hosting built to",
  highlight: "run",                    // Highlighted word
  titleSuffix: ", not impress.",
  
  subtitle: "Low-latency servers, transparent pricing, and full control from day one.",
  
  primaryCta: {
    text: "Get Started",
    href: "#pricing",                  // "#section" or "/page"
  },
  
  stats: [
    { value: "99.9%", label: "Uptime" },
    { value: "10K+", label: "Servers" },
    { value: "24/7", label: "Support" },
  ],
}
Title Format: Displays as "title [highlight] titleSuffix"
  • Example: “Game server hosting built to run, not impress.”
Stats: Show 3 key metrics (uptime, customer count, support availability)

​
Features Section

features: {
  title: "Why Choose Latch?",
  description: "Everything you need to run professional game servers",
  
  items: [
    {
      title: "Lightning Fast",
      description: "High-performance servers with ultra-low latency for the best gaming experience.",
      color: "yellow",
      icon: "Zap",
    },
    {
      title: "99.9% Uptime",
      description: "Enterprise-grade infrastructure ensures your server is always online.",
      color: "green",
      icon: "ShieldCheck",
    },
    {
      title: "Full Control",
      description: "Complete access to server files, mods, and configurations via our panel.",
      color: "purple",
      icon: "Sliders",
    },
    {
      title: "Instant Setup",
      description: "Deploy your game server in seconds with our one-click installation.",
      color: "blue",
      icon: "RotateCw",
    },
    {
      title: "24/7 Support",
      description: "Expert support team available around the clock to help you succeed.",
      color: "orange",
      icon: "Headphones",
    },
    {
      title: "Global Network",
      description: "Deploy servers in multiple regions worldwide for optimal performance.",
      color: "cyan",
      icon: "Cloud",
    },
  ],
}
Available colors: yellow, green, purple, blue, orange, cyan, brand Recommended: 6 features for best grid layout (2 rows of 3)

​
Products Section

products: {
  title: "More Hosting Solutions",
  description: "Beyond game servers, we offer enterprise-grade hosting for all your needs.",
  
  items: [
    {
      icon: "Server",
      title: "Dedicated Server",
      description: "Powerful bare-metal servers with full root access and guaranteed resources.",
      href: "/dedicated",
      iconColor: "text-cyan-400",
      iconBg: "bg-cyan-500/5",
      iconBorder: "border-cyan-500/20",
      startingPrice: "89",
    },
    {
      icon: "HardDrive",
      title: "VPS Hosting",
      description: "Scalable virtual private servers with instant deployment and full control.",
      href: "/vps",
      iconColor: "text-purple-400",
      iconBg: "bg-purple-500/5",
      iconBorder: "border-purple-500/20",
      startingPrice: "9.99",
    },
    {
      icon: "Globe",
      title: "Web Hosting",
      description: "Fast and reliable web hosting with cPanel, free SSL, and unlimited bandwidth.",
      href: "/web-hosting",
      iconColor: "text-green-400",
      iconBg: "bg-green-500/5",
      iconBorder: "border-green-500/20",
      startingPrice: "3.99",
    },
  ],
}
Icon colors: Match iconColor, iconBg, and iconBorder for visual consistency

​
Complete Example

export const homeConfig = {
  hero: {
    backgroundImage: "https://cdn.example.com/hero.jpg",
    
    title: "Game server hosting built to",
    highlight: "perform",
    titleSuffix: "",
    
    subtitle: "Professional hosting for serious gamers",
    
    primaryCta: {
      text: "View Plans",
      href: "/games",
    },
    
    stats: [
      { value: "99.9%", label: "Uptime" },
      { value: "5K+", label: "Servers" },
      { value: "24/7", label: "Support" },
    ],
  },
  
  features: {
    title: "Why Choose Us?",
    description: "Everything you need for game hosting",
    
    items: [
      {
        title: "Lightning Fast",
        description: "Ultra-low latency servers",
        color: "yellow",
        icon: "Zap",
      },
      {
        title: "99.9% Uptime",
        description: "Always online when you need it",
        color: "green",
        icon: "ShieldCheck",
      },
      {
        title: "Full Control",
        description: "Complete server access",
        color: "purple",
        icon: "Sliders",
      },
      {
        title: "Instant Setup",
        description: "Deploy in seconds",
        color: "blue",
        icon: "RotateCw",
      },
    ],
  },
  
  products: {
    title: "More Hosting Solutions",
    description: "Enterprise hosting for all needs",
    
    items: [
      {
        icon: "Server",
        title: "Dedicated Server",
        description: "Bare-metal power",
        href: "/dedicated",
        iconColor: "text-cyan-400",
        iconBg: "bg-cyan-500/5",
        iconBorder: "border-cyan-500/20",
        startingPrice: "89",
      },
    ],
  },
};

​
Best Practices

​
Hero Section

  1. Clear value proposition - Tell users what you do in the title
  2. Strong highlight word - “perform”, “run”, “dominate”, “win”
  3. Concrete stats - Real numbers build trust
  4. Clear CTA - Direct users to pricing or games

​
Features

  1. 6 features - Perfect grid layout (2 rows × 3 columns)
  2. Vary colors - Don’t repeat colors too much
  3. Action-oriented - Focus on benefits, not just specs
  4. Icons match content - Zap for speed, Shield for security

​
Products

  1. 3 products max - Dedicated, VPS, Web Hosting
  2. Consistent styling - Use matching icon color patterns
  3. Clear pricing - Show starting price upfront
  4. Descriptive - Explain who each product is for

​
Troubleshooting

​
Hero title not displaying correctly

The title format is: title [highlight] titleSuffix If you don’t want a suffix, set it to empty string: 
titleSuffix: ""

​
Stats not showing

Ensure stats array has exactly 3 items with value and label: 
stats: [
  { value: "99.9%", label: "Uptime" }
]

​
Feature colors not working

Use lowercase color names: yellow, green, purple, blue, orange, cyan, brand

​
Icons not displaying

Use PascalCase Lucide icon names: Zap, ShieldCheck, Sliders, RotateCw, Headphones, Cloud, Server, HardDrive, Globe