Service Page Template

Based on the DevOps as a Service page (April 2026). Use this structure for all service pages. Same pattern, different content.

Frontmatter

yaml layout: base type: service description: [1 sentence - what the service is] title: [Service Name] on AWS | base2Services banner: [banner image path] mobile_banner: [480w variant] tablet_banner: [800w variant] banner_title: [Service Name] banner_sub: [What it covers. Short. Punchy.] meta_title: [SEO title] meta_description: [SEO description - what it is + fixed monthly fee + key benefit] flyout_active: false exit_popup_active: false

Page Structure (top to bottom)

1. Hero Banner

• Banner image with title and sub from frontmatter
• Rendered by base layout automatically
• Sub should list scope, end with pricing model
• No overlay needed if images are designed for it

2. Narrative Section

• .container.inner
• H2: describes what this service IS (not the service name - that is in the hero)
• 1-2 short paragraphs explaining the service
• Inline CTA button to #contact
• Tone: plain English, outcome-focused, no jargon

3. What You Get

• .svc-what-you-get (full-width section, own background)
• H2: "What you get"
• 6 SVG illustration cards in 3x2 grid (.svc-wyg-grid)
• Each card: coloured background (alternate .bg-green / .bg-blue), watermark SVG, title + 1-sentence description
• Below cards: "Everything included. Fixed monthly fee." sub-heading
• 3-column deliverables list with ticks (Operations / Engineering / Security & Compliance)
• Deliverables are the SPECIFIC line items unique to this service

4. How It Works

• .container.inner
• H2: "How it works"
• Short intro paragraph about the continuous model
• Infinity loop SVG behind a 4-cell grid
• Cycle items relevant to this service (e.g. Assess / Build / Improve / Support)

5. Testimonials

• .section-testimonials > .section-inner
• Uses .testimonials-featured pattern (same as homepage)
• 3 static cards with quote, logo, author, "Read case study" link
• Pick the 3 strongest quotes relevant to this service

6. Trust Bar

• .svc-trust-bar
• Dark background, "Audited and certified" label
• 3 badge items with white card backgrounds (AWS + ISO + third cert)

7. CTA

• .section-cta > .section-inner
• White background
• Service-specific heading (not generic "Ready to talk?")
• Short sub text
• Single primary button
• Different from homepage CTA

8. Case Studies

• .container.inner
• H2: "Case Studies"
• Dynamic 3-card grid from site data filtered by service type
• "See More Results" link

9. FAQ

• .svc-faq-section
• 6 cards in 3x2 grid, answers visible (no accordion)
• Keep JSON-LD with full detailed answers for Google SEO
• Questions should be the ones a real buyer asks

10. Cross-links

• .container.inner
• H2: "Not quite what you need?"
• Sub: "Every team is different. These may fit better."
• 3 buttons linking to sibling services

11. Contact Form

• = partial("contact_forms/inbuilt_contact_form.html.haml")

SCSS Files

• scss/site/_service-modern.scss - all service page styles
• scss/site/_home-modern.scss - homepage-specific (not used on service pages except shared components like .testimonials-featured)

Color Variation

• Hero: use banner images, no overlay unless needed
• SVG cards: alternate .bg-green ($base2-green) and .bg-blue ($base2-blue)
• Dark sections: $base2-blue-new for trust bar only
• CTA: white background
• FAQ: white background
• What You Get section: $svc-surface-alt background

What NOT to do

• Don't repeat the service name as an H2 if it is already in the banner H1
• Don't use "so your team can…" as a tagline suffix
• Don't use negative framing ("the old way", "transform", "fix")
• Don't add icons when images with overlays or SVG watermarks work better
• Don't use $base2-blue-new for everything - vary green/blue
• Don't put cross-links between trust and CTA (breaks conversion momentum)
• Don't make the FAQ an accordion for 1-sentence answers
• Don't duplicate content between cards and deliverables lists