Home Page Configuration

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

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

Customize features and products

Update feature cards and product offerings

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

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

Features

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

Products

3 products max - Dedicated, VPS, Web Hosting
Consistent styling - Use matching icon color patterns
Clear pricing - Show starting price upfront
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

Getting Started

Configuration

Products & Hosting

Page Configuration

Deployment

Help & Resources

Overview

Quick Start

Configuration Structure

Hero Section

Features Section

Products Section

Complete Example

Best Practices

Hero Section

Features

Products

Troubleshooting

Hero title not displaying correctly

Stats not showing

Feature colors not working

Icons not displaying

​Overview

​Quick Start

​Configuration Structure

​Hero Section

​Features Section

​Products Section

​Complete Example

​Best Practices

​Hero Section

​Features

​Products

​Troubleshooting

​Hero title not displaying correctly

​Stats not showing

​Feature colors not working

​Icons not displaying

Overview

Quick Start

Configuration Structure

Hero Section

Features Section

Products Section

Complete Example

Best Practices

Hero Section

Features

Products

Troubleshooting

Hero title not displaying correctly

Stats not showing

Feature colors not working

Icons not displaying