> ## 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.

# Jobs/Careers Configuration

> Configure your careers page with team members, company culture, and job openings

<Callout icon="link-horizontal" color="#2fbe1f">**Configuration File:** `config/pages/jobs.ts`</Callout>

## 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

<Steps>
  <Step title="Edit the config file">
    Open `config/pages/jobs.ts`:

    ```typescript theme={null}
    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",
      },
    };
    ```
  </Step>

  <Step title="Add team members and job openings">
    Update team member profiles and open positions
  </Step>

  <Step title="Test it">
    ```bash theme={null}
    npm run dev
    ```

    Visit: [http://localhost:3000/jobs](http://localhost:3000/jobs)
  </Step>
</Steps>

***

## Configuration Structure

### Hero Section

```typescript theme={null}
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:

```typescript theme={null}
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

```typescript theme={null}
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

```typescript theme={null}
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

```typescript theme={null}
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

```typescript theme={null}
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:

```typescript theme={null}
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

***