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

# Home Page Configuration

> Configure your landing page with hero section, features, and product cards

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

<Info>
  **Using Feature Icons?** Check the [Icons Guide](../help/icons) to learn how to add and configure icons for your features, stats, and benefits sections.
</Info>

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

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

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

  <Step title="Customize features and products">
    Update feature cards and product offerings
  </Step>

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

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

***

## Configuration Structure

### Hero Section

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

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

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

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

```typescript theme={null}
titleSuffix: ""
```

### Stats not showing

Ensure stats array has exactly 3 items with value and label:

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

***