Web Hosting Configuration

Configuration File: config/hosting/web-hosting.ts

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

Edit the config file

Open config/hosting/web-hosting.ts and modify:

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
};

Configure plans

Update hosting plans with your offerings and prices

Test it

npm run dev

Visit: http://localhost:3000/web-hosting

Configuration Structure

Hero Section

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

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

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

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

Complete Example

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

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

Plans

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

Features

Emphasize ease of use - cPanel, WordPress installer
Security matters - SSL, backups, security
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:

color: "blue" as const

Getting Started

Configuration

Products & Hosting

Page Configuration

Deployment

Help & Resources

Overview

Quick Start

Configuration Structure

Hero Section

Plans Section

Hosting Plans

Features Section

Complete Example

Best Practices

Pricing

Plans

Features

Troubleshooting

Plans not displaying

Colors not working

​Overview

​Quick Start

​Configuration Structure

​Hero Section

​Plans Section

​Hosting Plans

​Features Section

​Complete Example

​Best Practices

​Pricing

​Plans

​Features

​Troubleshooting

​Plans not displaying

​Colors not working

Overview

Quick Start

Configuration Structure

Hero Section

Plans Section

Hosting Plans

Features Section

Complete Example

Best Practices

Pricing

Plans

Features

Troubleshooting

Plans not displaying

Colors not working