> ## 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.
# VPS Hosting Configuration
> Configure your VPS hosting page with plans, features, and operating systems
**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
Open `config/hosting/vps.ts` and modify the configuration:
```typescript theme={null}
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
};
```
Modify the VPS plans with your specifications and pricing
```bash theme={null}
npm run dev
```
Visit: [http://localhost:3000/vps](http://localhost:3000/vps)
***
## Configuration Structure
### Hero Section
```typescript theme={null}
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
````typescript theme={null}
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
```typescript theme={null}
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](https://lucide.dev)
### Operating Systems
```typescript theme={null}
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
```typescript theme={null}
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:
```typescript theme={null}
color: "yellow" as const // ✓ Correct
color: "yellow" // ✗ TypeScript error
```
***