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

1

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",
      // ...
    },
  },
};
2

Customize hardware specs

Update processor, RAM, storage, and network details
3

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