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

# Web Hosting Configuration

> Configure your web hosting page with plans, control panels, and features

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

## Overview

The web hosting configuration allows you to:

* Define shared hosting plans with pricing
* Showcase cPanel and control panel options
* List features and included services
* Customize hero section with stats

Configuration file: `config/hosting/web-hosting.ts`

## Quick Start

<Steps>
  <Step title="Edit the config file">
    Open `config/hosting/web-hosting.ts` and modify:

    ```typescript theme={null}
    export const webHostingConfig = {
      hero: {
        title: "Web hosting that just",
        highlight: "works",
        subtitle: "Fast, reliable, and easy to use",
        backgroundImage: "https://images.pexels.com/photos/270366.jpeg",
        stats: [
          { label: "Uptime", value: "99.9%" },
          { label: "Setup Time", value: "< 5min" },
          { label: "Support", value: "24/7" },
        ]
      },
      // ... more config
    };
    ```
  </Step>

  <Step title="Configure plans">
    Update hosting plans with your offerings and prices
  </Step>

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

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

***

## Configuration Structure

### Hero Section

```typescript theme={null}
hero: {
  title: "Web hosting that just",
  highlight: "works",                // Highlighted word
  subtitle: "Fast, reliable, and easy to use. Perfect for WordPress.",
  backgroundImage: "https://images.pexels.com/photos/270366.jpeg",
  stats: [
    { label: "Uptime", value: "99.9%" },
    { label: "Setup Time", value: "< 5min" },
    { label: "Support", value: "24/7" },
  ]
}
```

### Plans Section

````typescript theme={null}
plansSection: {
  title: "Web Hosting Plans",
  description: "Choose the perfect plan for your website",
}

### Custom Configuration Section

```typescript
customConfig: {
  title: "Need Custom Configuration?",
  description: "Contact our team for custom web hosting solutions tailored to your website needs.",
  buttonText: "Contact Sales",
  buttonUrl: "/contact"
}
````

This section displays a call-to-action at the bottom of the plans for custom configurations.

````

### Key Specs Icons

Define which specs to display:

```typescript
keySpecs: {
  websites: { icon: "Globe", label: "Websites" },
  storage: { icon: "HardDrive", label: "Storage" },
  email: { icon: "Mail", label: "Emails" }
}
````

### Hosting Plans

```typescript theme={null}
plans: [
  {
    name: "Starter",
    websites: "1 Website",
    storage: "10GB SSD",
    bandwidth: "100GB",
    email: "10 Email Accounts",
    price: 3.99,
    orderUrl: "#",  // Link for "Get Started" button
    features: [
      "Free SSL Certificate",
      "cPanel Included",
      "WordPress Installer",
      "Daily Backups",
      "24/7 Support"
    ],
    popular: false
  },
  {
    name: "Business",
    websites: "5 Websites",
    storage: "50GB SSD",
    bandwidth: "500GB",
    email: "50 Email Accounts",
    price: 7.99,
    orderUrl: "#",  // Link for "Get Started" button
    features: [
      "Free SSL Certificates",
      "cPanel Included",
      "WordPress Installer",
      "Daily Backups",
      "Priority Support",
      "Free Domain (1 Year)"
    ],
    popular: true  // Highlighted plan
  },
  {
    name: "Professional",
    websites: "Unlimited Websites",
    storage: "100GB SSD",
    bandwidth: "Unmetered",
    email: "Unlimited Email Accounts",
    price: 14.99,
    orderUrl: "#",  // Link for "Get Started" button
    features: [
      "Everything in Business",
      "Free CDN",
      "Advanced Security"
    ],
    popular: false
  }
]
```

**Fields:**

* `name` - Plan name
* `websites` - Number of sites allowed
* `storage` - Disk space
* `bandwidth` - Monthly transfer
* `email` - Email accounts
* `price` - Monthly price (number)
* `orderUrl` - Link for "Get Started" button (required)
* `features` - List of features
* `popular` - Highlight with badge (optional)

### Features Section

```typescript theme={null}
featuresSection: {
  title: "Everything You Need to Succeed",
  description: "Feature-rich hosting with all the tools you need",
}

features: [
  {
    title: "cPanel Control Panel",
    description: "Industry-standard cPanel makes managing your website easy",
    color: "blue" as const,
    icon: "Layout"
  },
  {
    title: "Free SSL Certificates",
    description: "Secure your website with free Let's Encrypt SSL",
    color: "green" as const,
    icon: "Lock"
  },
  {
    title: "One-Click WordPress",
    description: "Install WordPress and 400+ apps instantly",
    color: "purple" as const,
    icon: "Zap"
  },
]
```

**Available colors**: blue, green, purple, cyan, yellow, orange

**Icons**: Layout, Lock, Zap, Mail, HardDrive, RefreshCw, Globe, etc. Browse at [lucide.dev](https://lucide.dev)

***

## Complete Example

```typescript theme={null}
export const webHostingConfig = {
  hero: {
    title: "Web hosting that just",
    highlight: "works",
    subtitle: "Fast, reliable, and easy to use",
    backgroundImage: "https://images.pexels.com/photos/270366.jpeg",
    stats: [
      { label: "Uptime", value: "99.9%" },
      { label: "Setup Time", value: "< 5min" },
      { label: "Support", value: "24/7" },
    ]
  },
  
  plansSection: {
    title: "Web Hosting Plans",
    description: "All plans include free SSL and 99.9% uptime guarantee",
    cta: {
      text: "Need a custom solution?",
      linkText: "Contact sales",
      linkUrl: "/contact"
    }
  },
  
  keySpecs: {
    websites: { icon: "Globe", label: "Websites" },
    storage: { icon: "HardDrive", label: "Storage" },
    email: { icon: "Mail", label: "Emails" }
  },
  
  plans: [
    {
      name: "Starter",
      websites: "1 Website",
      storage: "10GB SSD",
      bandwidth: "100GB",
      email: "10 Email Accounts",
      price: 3.99,
      features: [
        "Free SSL Certificate",
        "cPanel Included",
        "WordPress Installer",
        "Daily Backups",
        "24/7 Support"
      ],
      popular: false
    },
    {
      name: "Business",
      websites: "5 Websites",
      storage: "50GB SSD",
      bandwidth: "500GB",
      email: "50 Email Accounts",
      price: 7.99,
      features: [
        "Free SSL Certificates",
        "cPanel Included",
        "WordPress Installer",
        "Priority Support",
        "Free Domain (1 Year)"
      ],
      popular: true
    },
  ],
  
  featuresSection: {
    title: "Everything You Need to Succeed",
    description: "Feature-rich hosting with all the tools",
  },

  features: [
    {
      title: "cPanel Control Panel",
      description: "Industry-standard cPanel",
      color: "blue" as const,
      icon: "Layout"
    },
    {
      title: "Free SSL Certificates",
      description: "Secure with Let's Encrypt SSL",
      color: "green" as const,
      icon: "Lock"
    },
  ],
};
```

***

## Best Practices

### Pricing

1. **Clear progression** - Show value increase between tiers
2. **Highlight mid-tier** - Most customers choose this
3. **Include freebies** - Free domain, SSL, etc.

### Plans

1. **Start simple** - 1 site for starter plan
2. **Unlimited wisely** - Only on higher tiers
3. **Show bandwidth** - Be transparent about limits

### Features

1. **Emphasize ease of use** - cPanel, WordPress installer
2. **Security matters** - SSL, backups, security
3. **Professional email** - Important selling point

***

## Troubleshooting

### Plans not displaying

Check that each plan has all required fields: name, websites, storage, bandwidth, email, price, features

### Colors not working

Include `as const` after color:

```typescript theme={null}
color: "blue" as const
```

***