> ## 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.
# About Page Configuration
> Configure your about page with company story, values, and statistics
**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
Open `config/pages/about.ts`:
```typescript theme={null}
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
};
```
Update your company story, values, and statistics
```bash theme={null}
npm run dev
```
Visit: [http://localhost:3000/about](http://localhost:3000/about)
***
## Configuration Structure
### Hero Section
```typescript theme={null}
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
```typescript theme={null}
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
```typescript theme={null}
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
```typescript theme={null}
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
```typescript theme={null}
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:
```typescript theme={null}
stats: [
{ label: "Active Servers", value: "50K+" }
]
```
### Story paragraphs render as one block
Each paragraph must be a separate string in the array:
```typescript theme={null}
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
***