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:
2

Customize your story and values

Update your company story, values, and statistics
3

Test it

Visit: http://localhost:3000/about

Configuration Structure

Hero Section

Story Section

Each paragraph is a separate string in the array - typically 3-5 paragraphs work best.

Values Section

Available icons: rocket, shield, heart, zap, users, trendingUp, star, check Available colors: blue, purple, pink, yellow, green, cyan, orange, red

Stats Section

Available icons: server, globe, award, clock, users, heart, star

Complete Example


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:

Story paragraphs render as one block

Each paragraph must be a separate string in the array:

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