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

​
Overview

The jobs/careers page allows you to:
  • Showcase your team with photos and bios
  • Highlight company culture and values
  • Display benefits and perks
  • List job openings with full descriptions
Configuration file: config/pages/jobs.ts

​
Quick Start

1

Edit the config file

Open config/pages/jobs.ts:
export const jobsConfig = {
  hero: {
    title: "Build the future of",
    highlight: "game hosting",
    subtitle: "Join a team obsessed with low latency and honest pricing",
    backgroundImage: "https://cdn.example.com/image.jpg",
    stats: [
      { value: "12+", label: "Team Members" },
      { value: "8+", label: "Countries" },
      { value: "5", label: "Open Roles" },
    ],
  },
  team: { /* ... */ },
  culture: { /* ... */ },
  perks: { /* ... */ },
  openings: [ /* ... */ ],
  cta: {
    title: "Don't see your role?",
    subtitle: "Send us your resume...",
    email: "careers@latch.gg",
  },
};
2

Add team members and job openings

Update team member profiles and open positions
3

Test it

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

​
Configuration Structure

​
Hero Section

hero: {
  title: "Build the future of",
  highlight: "game hosting",       // Highlighted word
  subtitle: "Join a team obsessed with low latency, honest pricing, and tools that stay out of the way.",
  backgroundImage: "https://cdn.arcanitegames.ca/image.jpg",
  stats: [
    { value: "12+", label: "Team Members" },
    { value: "8+", label: "Countries" },
    { value: "5", label: "Open Roles" },
  ],
}

​
Team Section

Generate avatars using DiceBear API: 
team: {
  title: "Meet the team",
  subtitle: "Small team. Big impact. Everyone here ships code and talks to users.",
  members: [
    {
      name: "Alex Rivers",
      role: "Founder & CEO",
      avatar: "https://api.dicebear.com/9.x/adventurer/svg?seed=Alex%20Rivers&backgroundColor=3b82f6",
      bio: "Built Latch from a Discord bot. Still writes code daily."
    },
    {
      name: "Jordan Kim",
      role: "CTO",
      avatar: "https://api.dicebear.com/9.x/adventurer/svg?seed=Jordan%20Kim&backgroundColor=10b981",
      bio: "Infrastructure architect. Loves Rust and hates downtime."
    },
  ],
}
Avatar Colors:
  • 3b82f6 - Blue
  • 10b981 - Green
  • 8b5cf6 - Purple
  • f59e0b - Amber
  • ef4444 - Red
  • ec4899 - Pink
  • 06b6d4 - Cyan
  • a855f7 - Purple
Change the seed parameter to change the avatar style (use the person’s name).

​
Culture Section

culture: {
  title: "How we work",
  subtitle: "Principles that guide everything we build and ship.",
  values: [
    {
      icon: "code",
      title: "Ship fast, iterate faster",
      description: "We deploy daily. Quick feedback loops matter more than perfect launches."
    },
    {
      icon: "users",
      title: "Everyone talks to users",
      description: "No gatekeepers. Engineers answer support tickets and join community Discord calls."
    },
    {
      icon: "target",
      title: "Performance is a feature",
      description: "Every millisecond counts. We benchmark everything and optimize relentlessly."
    },
  ],
}
Available icons: code, users, target, shield, zap, heart

​
Perks Section

perks: {
  title: "Benefits & perks",
  subtitle: "We take care of the people who take care of our servers.",
  items: [
    {
      icon: "dollar",
      title: "Competitive salary + equity",
      description: "Top-tier compensation with meaningful ownership stake in the company."
    },
    {
      icon: "heart",
      title: "Health & wellness",
      description: "Premium health, dental, and vision coverage. Mental health support included."
    },
    {
      icon: "globe",
      title: "Fully remote",
      description: "Work from anywhere. We have team members across 8 countries and counting."
    },
    {
      icon: "calendar",
      title: "Unlimited PTO",
      description: "Take the time you need. We trust you to manage your schedule responsibly."
    },
  ],
}
Available icons: dollar, heart, globe, calendar, laptop, book

​
Job Openings

openings: [
  {
    id: "senior-backend",              // URL-friendly
    title: "Senior Backend Engineer",
    department: "Engineering",
    location: "Remote",
    type: "Full-time",
    description: "Build the infrastructure that powers 10K+ game servers. Work with Rust, Go, and Kubernetes.",
    responsibilities: [
      "Design and implement high-performance backend services for game server orchestration",
      "Optimize database queries and caching strategies for sub-10ms response times",
      "Build monitoring and alerting systems to maintain 99.9% uptime",
      "Collaborate with DevOps to improve deployment pipelines and infrastructure",
    ],
    requirements: [
      "5+ years of backend development experience with Rust, Go, or similar systems languages",
      "Deep understanding of distributed systems, databases, and performance optimization",
      "Experience with Kubernetes, Docker, and cloud infrastructure (AWS/GCP)",
      "Track record of building and scaling high-availability systems",
    ],
    bonus: [
      "Experience in gaming or game server hosting",
      "Open source contributions to infrastructure projects",
      "Knowledge of DDoS mitigation and network security",
    ],
  },
]
Fields:
  • id - URL-friendly identifier (lowercase with hyphens)
  • title - Job title
  • department - Engineering, Operations, Support, Marketing, etc.
  • location - Remote, City Name, or Hybrid
  • type - Full-time, Part-time, Contract
  • description - Brief overview (1-2 sentences)
  • responsibilities - Array of key duties
  • requirements - Array of required qualifications
  • bonus - Array of nice-to-have skills (optional)

​
Complete Example

export const jobsConfig = {
  hero: {
    title: "Build the future of",
    highlight: "game hosting",
    subtitle: "Join our team and shape the future",
    backgroundImage: "https://cdn.example.com/hero.jpg",
    stats: [
      { value: "12+", label: "Team Members" },
      { value: "8+", label: "Countries" },
      { value: "5", label: "Open Roles" },
    ],
    openPositions: 5,
  },
  
  team: {
    title: "Meet the team",
    subtitle: "Small team. Big impact.",
    members: [
      {
        name: "Alex Rivers",
        role: "Founder & CEO",
        avatar: "https://api.dicebear.com/9.x/adventurer/svg?seed=Alex%20Rivers&backgroundColor=3b82f6",
        bio: "Built the company from scratch"
      },
    ],
  },
  
  culture: {
    title: "How we work",
    subtitle: "Our guiding principles",
    values: [
      {
        icon: "code",
        title: "Ship fast",
        description: "Deploy daily and iterate"
      },
      {
        icon: "users",
        title: "Talk to users",
        description: "Everyone does support"
      },
    ],
  },
  
  perks: {
    title: "Benefits & perks",
    subtitle: "We take care of our team",
    items: [
      {
        icon: "dollar",
        title: "Competitive salary",
        description: "Top-tier compensation"
      },
      {
        icon: "globe",
        title: "Fully remote",
        description: "Work from anywhere"
      },
    ],
  },
  
  openings: [
    {
      id: "backend-engineer",
      title: "Backend Engineer",
      department: "Engineering",
      location: "Remote",
      type: "Full-time",
      description: "Build scalable infrastructure",
      responsibilities: [
        "Design backend services",
        "Optimize performance",
        "Maintain uptime",
      ],
      requirements: [
        "5+ years experience",
        "Strong system design skills",
        "Kubernetes experience",
      ],
      bonus: [
        "Gaming industry experience",
        "Open source contributions",
      ],
    },
  ],

  cta: {
    title: "Don't see your role?",
    subtitle: "We're always looking for exceptional people. Send us your resume and tell us what you'd build.",
    email: "careers@latch.gg",
  },
};

​
CTA Section

The bottom call-to-action for speculative applications: 
cta: {
  title: "Don't see your role?",
  subtitle: "We're always looking for exceptional people. Send us your resume and tell us what you'd build.",
  email: "careers@latch.gg",
}
Fields:
  • title - Main heading
  • subtitle - Supporting text
  • email - Email address for applications (links to mailto:)

​
Best Practices

​
Team Section

  1. Real photos or avatars - Use DiceBear for consistency
  2. Short bios - 1-2 sentences max
  3. Diverse roles - Show all departments

​
Culture

  1. Authentic values - Don’t copy generic startup values
  2. Specific examples - “We deploy daily” vs “We move fast”
  3. 5-6 values - Not too many

​
Job Openings

  1. Clear titles - “Senior Backend Engineer” not “Code Ninja”
  2. Realistic requirements - Don’t ask for 10 years in 5-year-old tech
  3. Specific tech stack - List actual tools you use
  4. Bonus section - Shows nice-to-haves, not dealbreakers

​
Perks

  1. Concrete benefits - “$2,000 learning budget” not “growth opportunities”
  2. Important first - Salary, health, remote work
  3. 6-8 items - Cover main benefits

​
Troubleshooting

​
Avatars not loading

Check DiceBear URL format: 
https://api.dicebear.com/9.x/adventurer/svg?seed=NAME&backgroundColor=COLOR
Replace spaces in names with %20.

​
Open positions count mismatch

Update hero.openPositions to match number of items in openings array.

​
Job listings not showing

Ensure all required fields are present: id, title, department, location, type, description, responsibilities, requirements

​
Icons not working

Use lowercase Lucide icon names: code, users, target, shield, zap, heart, dollar, globe, calendar, laptop, book