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

Add team members and job openings

Update team member profiles and open positions
3

Test it

Visit: http://localhost:3000/jobs

Configuration Structure

Hero Section

Team Section

Generate avatars using DiceBear API:
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

Available icons: code, users, target, shield, zap, heart

Perks Section

Available icons: dollar, heart, globe, calendar, laptop, book

Job Openings

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


CTA Section

The bottom call-to-action for speculative applications:
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:
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