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

1

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

Update plans

Modify the VPS plans with your specifications and pricing
3

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

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

​
Features

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

​
Operating Systems

  1. Show popular options - Ubuntu, Debian, CentOS first
  2. Use official logos - Get from official sources
  3. 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