Roles Hub Documentation

This directory contains the Roles hub pages—a key part of DigitalStaff’s marketing strategy targeting businesses looking to automate specific job roles instead of hiring traditional employees.

Overview

The Roles hub showcases how AI and RPA can automate common business roles like bookkeepers, data entry clerks, data analysts, and accounting assistants. Each role page demonstrates:

File Structure

/src/pages/roles/
├── index.astro                    # Hub landing page (main roles directory)
├── role-template.astro            # Template for creating new role pages
├── bookkeeper.astro              # Individual role page
├── data-entry-clerk.astro        # Individual role page
├── data-analyst.astro            # Individual role page
├── accounting-assistant.astro    # Individual role page
└── README.md                     # This file

Creating a New Role Page

Step 1: Copy the Template

cd src/pages/roles
cp role-template.astro your-new-role.astro

Use kebab-case for filenames (e.g., virtual-assistant.astro, executive-assistant.astro).

Step 2: Customize the Content

Open your new file and update the following sections:

1. Role Information

const roleTitle = "Virtual Assistant";
const roleDescription = "Stop paying $45K+ annually for virtual assistants...";
const roleCategory = "Administrative"; // Options: Administrative, Financial, Technical, Operations, Customer Service

2. Statistics

Update the stats to reflect the role’s automation benefits:

const stats = [
  {
    value: '70%',
    label: 'Time Savings',
    icon: '⏱️',
    description: 'Reduction in time spent on routine tasks'
  },
  // ... more stats
];

3. Challenges

Define the problems businesses face with traditional hiring:

const challenges = [
  {
    title: 'High Turnover',
    description: 'Why this role has high turnover...',
    icon: '🔄'
  },
  // ... more challenges
];

4. Cost Comparison

Show the financial benefit:

const costComparison = {
  traditionalCost: '$50,000',  // Annual cost of hiring
  automationCost: '$12,000',   // Your automation service cost
  annualSavings: '$38,000',    // Difference
  roiMonths: '3-6'             // Time to ROI
};

5. Automations

List specific tasks you automate:

const automations = [
  {
    title: 'Email Management',
    description: 'How you automate email tasks...',
    icon: '📧',
    benefits: [
      'Auto-sort and prioritize emails',
      'Template-based responses',
      'Calendar scheduling',
      'Follow-up reminders'
    ]
  },
  // ... more automation categories
];

6. FAQs

Add role-specific FAQs:

const faqs = [
  {
    question: 'How long does it take to set up automation for this role?',
    answer: 'Most automation solutions are up and running within 2-4 weeks...'
  },
  // ... more FAQs
];

7. Case Studies (Optional)

const caseStudies = [
  {
    title: 'Company Name: Brief Result',
    description: 'Full case study description...',
    image: caseStudyImages.manufacturing,
    metrics: ['60% time reduction', '$42K savings'],
    client: 'Company Name',
    industry: 'Industry'
  }
];

Step 3: Update the Hub Index Page

Add your new role to /src/pages/roles/index.astro:

const roles = [
  // ... existing roles
  {
    name: 'Virtual Assistant',
    slug: 'virtual-assistant',
    category: 'Administrative',
    description: 'Brief description of the role automation...',
    icon: '🤖'
  }
];

Update the categories if needed:

const categories = {
  'Financial Operations': ['Financial'],
  'Administrative Support': ['Administrative'],
  'Data & Analytics': ['Technical'],
  'Operations': ['Operations'], // Add if needed
  'Customer Service': ['Customer Service'] // Add if needed
};

Step 4: Test Your Page

  1. Start the dev server:

    npm run dev

  2. Visit your page:

    http://localhost:4321/roles/your-new-role

  3. Check that all sections render correctly

  4. Test navigation from the hub page

  5. Verify breadcrumbs and CTAs work

Custom Layout: RoleLayout.astro

All role pages use the custom RoleLayout.astro located at /src/layouts/RoleLayout.astro.

Key Features:

Props Reference:

interface Props {
  title: string;                    // Role name (e.g., "Bookkeeper")
  description: string;              // SEO description and hero subtitle
  roleCategory?: string;            // Category badge (Financial, Administrative, etc.)
  stats?: StatItem[];               // Impact statistics
  challenges?: ChallengeItem[];     // Hiring challenges
  automations?: AutomationItem[];   // Tasks automated
  costComparison?: CostComparison;  // Financial comparison
  caseStudies?: CaseStudyItem[];    // Success stories
  testimonials?: TestimonialItem[]; // Client testimonials
  faqs?: FAQItem[];                 // Frequently asked questions
  ctaTitle?: string;                // CTA section title
  ctaDescription?: string;          // CTA section description
  ctaButtonText?: string;           // CTA button text
  ctaButtonLink?: string;           // CTA button link
}

SEO Best Practices

Each role page should:

  1. Target specific keywords: “[role] automation”, “automate [role]”, “[role] AI”
  2. Include clear value propositions: Cost savings, time savings, accuracy improvements
  3. Use descriptive URLs: /roles/data-entry-clerk not /roles/dec
  4. Add structured data (future enhancement): JobPosting schema
  5. Optimize meta descriptions: Include role name, benefit, and CTA

Role pages are integrated into:

  1. Main Navigation (Desktop & Mobile):

  2. Footer:

  3. Breadcrumbs:

Excluding the Template from Search and Build

The role-template.astro file is excluded from:

  1. Pagefind Search: Uses excludeFromSearch={true} prop (if implemented in Layout)
  2. Public Access: Redirects to 404 via netlify.toml: 
    [[redirects]]
  from = "/roles/role-template"
  to = "/404"
  status = 404
  force = true

Role Categories

Current categories:

Content Strategy

When creating role pages, focus on:

  1. Pain Points: What makes this role expensive/difficult to hire?
  2. Automation Benefits: Specific tasks automated and their impact
  3. ROI: Clear financial comparison showing savings
  4. Social Proof: Case studies and testimonials when available
  5. Trust Building: FAQs addressing concerns about automation
  6. Clear CTAs: Every section should guide toward consultation/automation plan

Images

Role pages use images from /src/lib/images.ts:

import { caseStudyImages, testimonialHeadshots } from '../../lib/images';

// Use in your page:
image: caseStudyImages.manufacturing
image: testimonialHeadshots.kevin

If you need new images:

  1. Add to Supabase storage or local assets
  2. Export from /src/lib/images.ts
  3. Reference in role pages

Future Enhancements

Potential improvements:

Maintenance

Regular tasks:

Questions?

For questions about the Roles hub:

Last Updated: November 2025 Maintainer: DigitalStaff Development Team