Industries Pages - Documentation

Two Approaches for Industry Pages

1. Supabase-Driven (Legacy)

2. Standalone .astro Pages (New)

Both approaches work together seamlessly.

How to Create a New Standalone Industry Page

Step 1: Create the industry page file

Create a new file: src/pages/industries/{industry-name}.astro

Example: src/pages/industries/construction.astro

---
import IndustryLayout from '../../layouts/IndustryLayout.astro';
import { caseStudyImages, testimonialHeadshots } from '../../lib/images';

const stats = [
  {
    value: '60%',
    label: 'Time Savings',
    icon: '⏱️',
    description: 'Description of the stat'
  }
  // Add 3-4 stats
];

const features = [
  {
    title: 'Feature Name',
    description: 'Feature description',
    icon: '📊',
    benefits: [
      'Benefit 1',
      'Benefit 2'
    ]
  }
  // Add 4-6 features
];

const caseStudies = [
  {
    title: 'Case Study Title',
    description: 'Description',
    image: caseStudyImages.manufacturing,
    metrics: ['Metric 1', 'Metric 2', 'Metric 3'],
    client: 'Client Name',
    industry: 'Industry Name'
  }
  // Add 1-2 case studies
];

const testimonials = [
  {
    quote: "Testimonial quote",
    author: "Name",
    role: "Title",
    company: "Company",
    image: testimonialHeadshots.kevin
  }
  // Add 1-2 testimonials
];

const faqs = [
  {
    question: 'Question?',
    answer: 'Answer'
  }
  // Add 4-6 FAQs
];
---

<IndustryLayout
  title="Industry Name"
  description="Hero description"
  stats={stats}
  features={features}
  caseStudies={caseStudies}
  testimonials={testimonials}
  faqs={faqs}
  ctaTitle="Custom CTA Title"
  ctaDescription="Custom CTA description"
  ctaButtonText="Schedule a Consultation"
  ctaButtonLink="/contact"
  ctaSecondaryButtonText="Explore Solutions"
  ctaSecondaryButtonLink="/automations"
/>

Step 2: Add to the industries index

Edit src/pages/industries/index.astro:

Add to standaloneIndustries array:

const standaloneIndustries = [
  {
    name: 'Construction',
    slug: 'construction',
    description: 'Transform your construction business...'
  },
  {
    name: 'Your New Industry',  // Add this
    slug: 'your-industry-slug',
    description: 'Brief description for the card'
  }
];

Add to appropriate category:

const categories = {
  'Technology & Digital': ['Cybersecurity', 'Telecommunications'],
  'Healthcare & Life Sciences': ['Healthcare'],
  'Financial & Professional': ['Financial Services', 'Legal Services'],
  'Commerce & Services': ['Retail & E-commerce', 'Hospitality & Tourism'],
  'Industrial & Manufacturing': ['Manufacturing', 'Energy & Utilities', 'Agriculture', 'Construction', 'Your New Industry'],
  'Media & Creative': ['Media & Entertainment', 'Marketing & Advertising']
};

Step 3: Test

Visit:

Quick Copy-Paste Method

Fastest way to create a new industry page:

  1. Copy existing page:

    cp src/pages/industries/construction.astro src/pages/industries/new-industry.astro

  2. Edit the new file - customize stats, features, FAQs, title, description

  3. Add to standaloneIndustries array in index.astro

  4. Add to appropriate category in index.astro

Done!

AI-Friendly Instructions

When working with AI, you can say:

“Create a new standalone industry page for [Industry Name]. Use the construction page as a template. Add it to the [Category Name] category on the industries index page.”

Or:

“Update the [Industry Name] page to add a new feature about [Feature Description]“

Available Components

Images

Available images from src/lib/images.ts:

Notes