Skip to main content
Configuration File: config/pages/about.ts

Overview

The about page allows you to:
  • Share your company story and mission
  • Highlight core values
  • Display key statistics and achievements
  • Build trust with potential customers
Configuration file: config/pages/about.ts

Quick Start

1

Edit the config file

Open config/pages/about.ts:
export const aboutConfig = {
  hero: {
    title: "Building the Future of",
    highlight: "Game Hosting",
    subtitle: "We're gamers who got tired of unreliable servers",
    backgroundImage: "https://cdn.example.com/hero.jpg",
    stats: [
      { label: "Active Servers", value: "50K+" },
      { label: "Global Locations", value: "12" },
      { label: "Uptime", value: "99.9%" },
    ],
  },
  // ... more config
};
2

Customize your story and values

Update your company story, values, and statistics
3

Test it

npm run dev
Visit: http://localhost:3000/about

Configuration Structure

Hero Section

hero: {
  title: "Building the Future of",
  highlight: "Game Hosting",         // Highlighted word
  subtitle: "We're gamers who got tired of unreliable servers, confusing panels, and slow support. So we built Latch.",
  backgroundImage: "https://cdn.arcanitegames.ca/image.jpg",
  stats: [
    { label: "Active Servers", value: "50K+" },
    { label: "Global Locations", value: "12" },
    { label: "Uptime", value: "99.9%" },
  ],
}

Story Section

story: {
  title: "Our Story",
  subtitle: "How we became the trusted choice for thousands of gaming communities worldwide",
  paragraphs: [
    "Latch was born from frustration. As passionate gamers ourselves, we were tired of unreliable hosting, slow support, and servers that couldn't handle our communities during peak times.",
    "In 2020, we decided to build the hosting platform we wished existed. Starting with a handful of dedicated servers in a single data center, we focused obsessively on three things: performance, reliability, and support.",
    "Today, we power over 50,000+ game servers across 120+ countries. But our mission hasn't changed — we're still gamers building for gamers, listening to feedback, and constantly improving.",
    "Every feature we add, every server we deploy, and every support ticket we answer is driven by one goal: making game server hosting simple, fast, and reliable for everyone."
  ]
}
Each paragraph is a separate string in the array - typically 3-5 paragraphs work best.

Values Section

values: {
  title: "Our Values",
  subtitle: "The principles that guide everything we do",
  items: [
    {
      icon: "rocket",
      title: "Performance First",
      description: "AMD Ryzen 9 7950X processors and DDR5 RAM ensure your server runs at peak performance 24/7.",
      color: "blue"
    },
    {
      icon: "shield",
      title: "Security Always",
      description: "Enterprise-grade DDoS protection and daily backups keep your community safe and protected.",
      color: "purple"
    },
    {
      icon: "heart",
      title: "Customer Obsessed",
      description: "Real humans providing real support. We're here for you every step of the way, anytime.",
      color: "pink"
    },
    {
      icon: "zap",
      title: "Lightning Fast",
      description: "NVMe storage and premium network infrastructure ensure sub-second response times worldwide.",
      color: "yellow"
    },
    {
      icon: "users",
      title: "Community Driven",
      description: "Built by gamers who understand what you need. Your feedback directly shapes our roadmap.",
      color: "green"
    },
    {
      icon: "trendingUp",
      title: "Always Improving",
      description: "Continuous updates and new features. We're never satisfied with 'good enough'.",
      color: "cyan"
    }
  ]
}
Available icons: rocket, shield, heart, zap, users, trendingUp, star, check Available colors: blue, purple, pink, yellow, green, cyan, orange, red

Stats Section

stats: {
  title: "By the Numbers",
  subtitle: "Real stats from real servers",
  items: [
    {
      icon: "server",
      value: "50,000+",
      label: "Active Servers",
      description: "Game servers running worldwide",
      color: "blue"
    },
    {
      icon: "globe",
      value: "120+",
      label: "Countries",
      description: "Communities we serve globally",
      color: "purple"
    },
    {
      icon: "award",
      value: "99.9%",
      label: "Uptime SLA",
      description: "Guaranteed reliability",
      color: "green"
    },
    {
      icon: "clock",
      value: "24/7",
      label: "Support",
      description: "Always here when you need us",
      color: "cyan"
    }
  ]
}
Available icons: server, globe, award, clock, users, heart, star

Complete Example

export const aboutConfig = {
  hero: {
    title: "Building the Future of",
    highlight: "Game Hosting",
    subtitle: "We're gamers building for gamers",
    backgroundImage: "https://cdn.example.com/hero.jpg",
    stats: [
      { label: "Active Servers", value: "50K+" },
      { label: "Global Locations", value: "12" },
      { label: "Uptime", value: "99.9%" },
    ],
  },
  
  story: {
    title: "Our Story",
    subtitle: "How we got started",
    paragraphs: [
      "We started in 2020 with a simple mission: make game hosting better.",
      "Today, we serve thousands of communities worldwide with reliable, fast hosting.",
      "Our focus remains the same - performance, reliability, and great support."
    ]
  },
  
  values: {
    title: "Our Values",
    subtitle: "What we believe in",
    items: [
      {
        icon: "rocket",
        title: "Performance First",
        description: "Top-tier hardware for maximum performance",
        color: "blue"
      },
      {
        icon: "shield",
        title: "Security Always",
        description: "DDoS protection and daily backups",
        color: "purple"
      },
      {
        icon: "heart",
        title: "Customer Obsessed",
        description: "24/7 support from real humans",
        color: "pink"
      },
    ]
  },
  
  stats: {
    title: "By the Numbers",
    subtitle: "Our achievements",
    items: [
      {
        icon: "server",
        value: "50K+",
        label: "Active Servers",
        description: "Servers running worldwide",
        color: "blue"
      },
      {
        icon: "globe",
        value: "120+",
        label: "Countries",
        description: "Global reach",
        color: "purple"
      },
    ]
  }
};

Best Practices

Story Section

  1. Authentic - Tell your real story, not generic corporate speak
  2. Concise - 3-5 paragraphs max
  3. Customer-focused - Explain how you solve their problems
  4. Timeline - Include founding year and growth milestones

Values

  1. Specific - “AMD Ryzen 9 7950X” not “powerful servers”
  2. Action-oriented - What you DO, not what you believe
  3. 6 values - More than 3, less than 10
  4. Real benefits - Tie each value to customer benefit

Stats

  1. Impressive but real - Don’t inflate numbers
  2. Diverse metrics - Mix technical (uptime) and business (customers)
  3. Updated regularly - Keep numbers current
  4. 4-6 stats - Enough to impress, not overwhelming

Hero

  1. Clear message - What you do in one sentence
  2. Key metrics - 3 most impressive stats
  3. Visual - High-quality background image

Troubleshooting

Stats not showing in hero

Ensure stats array has label and value:
stats: [
  { label: "Active Servers", value: "50K+" }
]

Story paragraphs render as one block

Each paragraph must be a separate string in the array:
paragraphs: [
  "First paragraph.",
  "Second paragraph.",
  "Third paragraph."
]

Icons not displaying

Use Lucide icon names in camelCase: rocket, shield, heart, zap, users, trendingUp For stats section: server, globe, award, clock, users, heart, star

Colors not working

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