Hardware Configuration

Configuration File: config/hardware.ts

Customizing Processor Icons? See the Icons Guide for instructions on adding icons to your hardware features.

Overview

The hardware section showcases your infrastructure specs:

Processor specifications (AMD/Intel)
RAM type and speed
Global network with interactive globe
Storage (NVMe) specifications
Uptime SLA
DDoS protection capacity

Configuration file: config/hardware.ts

Quick Start

Edit the config file

Open config/hardware.ts:

export const hardwareConfig = {
  section: {
    title: "Enterprise-Grade Hardware",
    description: "Powered by cutting-edge processors",
  },
  processors: {
    amd: {
      name: "Ryzen 9 7950X",
      boostClock: "5.7 GHz",
      // ...
    },
  },
};

Customize hardware specs

Update processor, RAM, storage, and network details

Test it

npm run dev

Visit: http://localhost:3000 (scroll to hardware section)

Configuration Structure

Section Header

section: {
  title: "Enterprise-Grade Hardware",
  description: "Powered by cutting-edge processors, ultra-fast storage, and global infrastructure",
}

Processors

You can configure AMD, Intel, or both:

processors: {
  amd: {
    name: "Ryzen 9 7950X",
    logo: "https://upload.wikimedia.org/wikipedia/commons/7/7c/AMD_Logo.svg",
    boostClock: "5.7 GHz",
    cores: "16 Cores",
    threads: "32 Threads",
    color: "emerald",
  },
  intel: {
    name: "Xeon Skylake",
    logo: "https://upload.wikimedia.org/wikipedia/commons/8/85/Intel_logo_2023.svg",
    boostClock: "4.8 GHz",
    cores: "12 Cores",
    threads: "24 Threads",
    color: "emerald",
  },
}

To show only one processor: Delete the other configuration Available colors: emerald, blue, purple, yellow, green, cyan, orange

RAM

ram: {
  title: "DDR5 RAM",
  description: "Up to 128GB ECC",
  speed: "6400",
  speedUnit: "MT/s",
  color: "yellow",
}

Global Network

network: {
  title: "Global Network",
  description: "Strategic datacenters worldwide",
  regionsCount: 4,
  regionsText: "Regions Active",
  color: "cyan",
  
  // RGB values from 0 to 1 for globe dots
  globeDotColor: [0.3, 0.8, 1] as [number, number, number],
  
  // Datacenter locations (latitude, longitude)
  // Find coordinates at: https://www.latlong.net/
  globeCoordinates: [
    { lat: 40.7128, lng: -74.006 },
    { lat: 37.7749, lng: -122.4194 },
    { lat: 51.5074, lng: -0.1278 },
    { lat: 1.3521, lng: 103.8198 },
  ],
}

Globe Dot Colors (RGB values 0-1):

Cyan: [0.3, 0.8, 1]
Green: [0.16, 0.82, 0.45]
Orange: [1, 0.6, 0.2]
Blue: [0.2, 0.4, 1]
Purple: [0.8, 0.3, 1]

Finding Coordinates: Use LatLong.net to find lat/lng for your datacenter cities

NVMe Storage

nvme: {
  title: "NVMe SSD",
  description: "Gen4 PCIe Storage",
  speed: "7000",
  speedUnit: "MB/s",
  color: "orange",
}

Uptime SLA

uptime: {
  title: "Uptime SLA",
  description: "Always Online",
  percentage: "99.99",
  color: "emerald",
}

Note: Don’t include the % symbol in percentage value

DDoS Protection

ddos: {
  title: "DDoS Protection",
  description: "Always Protected",
  capacity: "3.2",
  capacityUnit: "Tbps",
  color: "green",
}

Complete Example

export const hardwareConfig = {
  section: {
    title: "Enterprise-Grade Hardware",
    description: "Powered by the latest technology",
  },
  
  processors: {
    amd: {
      name: "Ryzen 9 7950X",
      logo: "https://upload.wikimedia.org/wikipedia/commons/7/7c/AMD_Logo.svg",
      boostClock: "5.7 GHz",
      cores: "16 Cores",
      threads: "32 Threads",
      color: "emerald",
    },
  },
  
  ram: {
    title: "DDR5 RAM",
    description: "Up to 128GB ECC",
    speed: "6400",
    speedUnit: "MT/s",
    color: "yellow",
  },
  
  network: {
    title: "Global Network",
    description: "Worldwide datacenters",
    regionsCount: 4,
    regionsText: "Regions Active",
    color: "cyan",
    globeDotColor: [0.3, 0.8, 1] as [number, number, number],
    globeCoordinates: [
      { lat: 40.7128, lng: -74.006 },
      { lat: 51.5074, lng: -0.1278 },
    ],
  },
  
  nvme: {
    title: "NVMe SSD",
    description: "Gen4 PCIe Storage",
    speed: "7000",
    speedUnit: "MB/s",
    color: "orange",
  },
  
  uptime: {
    title: "Uptime SLA",
    description: "Always Online",
    percentage: "99.99",
    color: "emerald",
  },
  
  ddos: {
    title: "DDoS Protection",
    description: "Always Protected",
    capacity: "3.2",
    capacityUnit: "Tbps",
    color: "green",
  },
};

Troubleshooting

Processors not showing

Check all required fields are present:

processors: {
  amd: {
    name: "...",
    logo: "...",
    boostClock: "...",
    cores: "...",
    threads: "...",
    color: "emerald"
  }
}

Globe not rendering

Ensure globeCoordinates has valid lat/lng values:

Latitude: -90 to 90
Longitude: -180 to 180

Globe dots not visible

Check globeDotColor uses values between 0 and 1:

globeDotColor: [0.3, 0.8, 1] as [number, number, number]

Don’t forget the type assertion as [number, number, number]

Uptime percentage showing incorrectly

Don’t include the % symbol:

percentage: "99.99"  // ✓ Correct
percentage: "99.99%" // ✗ Wrong

Colors not working

Use lowercase color names: emerald, blue, purple, yellow, green, cyan, orange

Getting Started

Configuration

Products & Hosting

Page Configuration

Deployment

Help & Resources

Overview

Quick Start

Configuration Structure

Section Header

Processors

RAM

Global Network

NVMe Storage

Uptime SLA

DDoS Protection

Complete Example

Troubleshooting

Processors not showing

Globe not rendering

Globe dots not visible

Uptime percentage showing incorrectly

Colors not working

​Overview

​Quick Start

​Configuration Structure

​Section Header

​Processors

​RAM

​Global Network

​NVMe Storage

​Uptime SLA

​DDoS Protection

​Complete Example

​Troubleshooting

​Processors not showing

​Globe not rendering

​Globe dots not visible

​Uptime percentage showing incorrectly

​Colors not working

Overview

Quick Start

Configuration Structure

Section Header

Processors

RAM

Global Network

NVMe Storage

Uptime SLA

DDoS Protection

Complete Example

Troubleshooting

Processors not showing

Globe not rendering

Globe dots not visible

Uptime percentage showing incorrectly

Colors not working