VPS Hosting Configuration

Configuration File: config/hosting/vps.ts

Overview

The VPS hosting configuration allows you to:

Define VPS hosting plans with specs and pricing
Showcase features and benefits
List available operating systems
Customize hero section with stats

Configuration file: config/hosting/vps.ts

Quick Start

Edit the config file

Open config/hosting/vps.ts and modify the configuration:

export const vpsConfig = {
  hero: {
    title: "Virtual servers that",
    highlight: "scale",
    subtitle: "Full root access, instant deployment, and powerful hardware",
    backgroundImage: "https://images.pexels.com/photos/17489151/pexels-photo-17489151.jpeg",
    stats: [
      { value: "99.9%", label: "Uptime SLA" },
      { value: "NVMe", label: "SSD Storage" },
      { value: "Instant", label: "Deployment" }
    ]
  },
  // ... more config
};

Update plans

Modify the VPS plans with your specifications and pricing

Test it

npm run dev

Visit: http://localhost:3000/vps

Configuration Structure

Hero Section

hero: {
  title: "Virtual servers that",
  highlight: "scale",              // Highlighted word in brand color
  subtitle: "Full root access, instant deployment, and powerful hardware",
  backgroundImage: "https://images.pexels.com/photos/17489151.jpeg",
  stats: [
    { value: "99.9%", label: "Uptime SLA" },
    { value: "NVMe", label: "SSD Storage" },
    { value: "Instant", label: "Deployment" }
  ]
}

Plans Section

plansSection: {
  title: "VPS Hosting Plans",
  description: "Flexible virtual servers with full root access.",
}

### Custom Configuration Section

```typescript
customConfig: {
  title: "Need Custom Configuration?",
  description: "Contact our team for custom VPS configurations tailored to your requirements.",
  buttonText: "Contact Sales",
  buttonUrl: "/contact"
}

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

### VPS Plans

Each plan includes specs and pricing:

```typescript
plans: [
  {
    name: "VPS-STARTER",
    vcpu: "2 vCPU",
    ram: "4GB",
    storage: "50GB NVMe",
    bandwidth: "2TB",
    price: 9.99,
    orderUrl: "#",  // Link for "Get Started" button
    features: [
      "Full Root Access",
      "1 IPv4 Address",
      "DDoS Protection",
      "Daily Backups"
    ],
    popular: false
  },
  {
    name: "VPS-STANDARD",
    vcpu: "4 vCPU",
    ram: "8GB",
    storage: "100GB NVMe",
    bandwidth: "4TB",
    price: 19.99,
    orderUrl: "#",  // Link for "Get Started" button
    features: [
      "Full Root Access",
      "2 IPv4 Addresses",
      "Advanced DDoS Protection",
      "Daily Backups"
    ],
    popular: true  // Shows "Most Popular" badge
  },
]

Fields:

name - Plan name
vcpu - CPU cores
ram - Memory
storage - Disk space
bandwidth - Monthly transfer
price - Monthly price (number)
orderUrl - Link for “Get Started” button (required)
features - List of included features
popular - Set true to highlight (optional)

Features Section

featuresSection: {
  title: "Everything You Need",
  description: "Powerful features for developers and businesses",
}

features: [
  {
    icon: "Zap",
    title: "NVMe SSD Storage",
    description: "Lightning-fast NVMe drives deliver exceptional performance",
    color: "yellow" as const
  },
  {
    icon: "Shield",
    title: "DDoS Protection",
    description: "Enterprise-grade DDoS mitigation keeps your VPS online",
    color: "green" as const
  },
]

Available colors: yellow, green, blue, purple, cyan, orange Icons: Browse Lucide icons at lucide.dev

Operating Systems

operatingSystemsSection: {
  title: "Choose Your Operating System",
  description: "Deploy with any OS you need",
  footerText: "Need a different OS?",
  footerCta: "Contact us",
  footerCtaLink: "/contact",  // Link for the CTA button
  footerCtaText: "for custom installations.",
}

operatingSystems: [
  {
    name: "Ubuntu",
    logo: "/assets/os/ubuntu.svg"
  },
  {
    name: "Debian",
    logo: "/assets/os/debian.svg"
  },
  {
    name: "CentOS",
    logo: "/assets/os/centos.svg"
  },
  {
    name: "Rocky Linux",
    logo: "/assets/os/rockylinux.svg"
  },
  {
    name: "Windows Server",
    logo: "/assets/os/windows.svg"
  }
]

Note: Place OS logos in public/assets/os/

Complete Example

export const vpsConfig = {
  hero: {
    title: "Virtual servers that",
    highlight: "scale",
    subtitle: "Full root access, instant deployment, and powerful hardware",
    backgroundImage: "https://images.pexels.com/photos/17489151.jpeg",
    stats: [
      { value: "99.9%", label: "Uptime SLA" },
      { value: "NVMe", label: "SSD Storage" },
      { value: "Instant", label: "Deployment" }
    ]
  },
  
  plansSection: {
    title: "VPS Hosting Plans",
    description: "Flexible virtual servers with full root access.",
  },
  
  plans: [
    {
      name: "VPS-STARTER",
      vcpu: "2 vCPU",
      ram: "4GB",
      storage: "50GB NVMe",
      bandwidth: "2TB",
      price: 9.99,
      features: [
        "Full Root Access",
        "1 IPv4 Address",
        "DDoS Protection",
        "Daily Backups"
      ],
      popular: false
    },
    {
      name: "VPS-STANDARD",
      vcpu: "4 vCPU",
      ram: "8GB",
      storage: "100GB NVMe",
      bandwidth: "4TB",
      price: 19.99,
      features: [
        "Full Root Access",
        "2 IPv4 Addresses",
        "Advanced DDoS Protection",
        "Daily Backups"
      ],
      popular: true
    },
  ],
  
  featuresSection: {
    title: "Everything You Need",
    description: "Powerful features designed for developers",
  },

  features: [
    {
      icon: "Zap",
      title: "NVMe SSD Storage",
      description: "Lightning-fast NVMe drives for exceptional performance",
      color: "yellow" as const
    },
    {
      icon: "Shield",
      title: "DDoS Protection",
      description: "Enterprise-grade DDoS mitigation included",
      color: "green" as const
    },
  ],
  
  operatingSystemsSection: {
    title: "Choose Your Operating System",
    description: "Deploy with any OS you need",
    footerText: "Need a different OS?",
    footerCta: "Contact us",
    footerCtaText: "for custom installations.",
  },

  operatingSystems: [
    { name: "Ubuntu", logo: "/assets/os/ubuntu.svg" },
    { name: "Debian", logo: "/assets/os/debian.svg" },
    { name: "CentOS", logo: "/assets/os/centos.svg" },
  ]
};

Best Practices

Pricing

Show value progression - Each tier adds significant resources
Highlight the middle tier - Use popular: true
Include bandwidth - Clearly state monthly transfer limits

Features

Focus on benefits - Explain what features do for users
Use 6 features - Perfect grid layout
Choose relevant icons - Match icons to feature meaning

Operating Systems

Show popular options - Ubuntu, Debian, CentOS first
Use official logos - Get from official sources
Offer Windows - Many users need Windows Server

Troubleshooting

Plans not showing

Check that each plan has all required fields: name, vcpu, ram, storage, bandwidth, price, features

Images not loading

Background images: Use full URLs
OS logos: Place in public/assets/os/ and use paths like /assets/os/ubuntu.svg

Colors not working

Make sure to include as const after the color:

color: "yellow" as const  // ✓ Correct
color: "yellow"           // ✗ TypeScript error

Getting Started

Configuration

Products & Hosting

Page Configuration

Deployment

Help & Resources

Overview

Quick Start

Configuration Structure

Hero Section

Plans Section

Features Section

Operating Systems

Complete Example

Best Practices

Pricing

Features

Operating Systems

Troubleshooting

Plans not showing

Images not loading

Colors not working

​Overview

​Quick Start

​Configuration Structure

​Hero Section

​Plans Section

​Features Section

​Operating Systems

​Complete Example

​Best Practices

​Pricing

​Features

​Operating Systems

​Troubleshooting

​Plans not showing

​Images not loading

​Colors not working

Overview

Quick Start

Configuration Structure

Hero Section

Plans Section

Features Section

Operating Systems

Complete Example

Best Practices

Pricing

Features

Operating Systems

Troubleshooting

Plans not showing

Images not loading

Colors not working