Skip to main content
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

1

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

Configure plans

Update hosting plans with your offerings and prices
3

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

  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: 
color: "blue" as const