🛡️ Guided — Cert Landing Page Template¶

Created: 2026-04-20
Status: ✅ Guardrailed — all cert pages MUST use PathLayout
Template: src/layouts/PathLayout.astro (~320 lines)
Used by: AB-900, AI-901, AZ-900

🔴 GUARDRAIL: Do NOT Create Custom Landing Pages¶

Every certification landing page MUST use PathLayout.astro. No exceptions.

Why: Custom pages drifted apart (AB-900 had different sections from AI-901). PathLayout ensures every cert page has identical structure, consistent UX, and is maintainable from one file.

How to Create a New Cert Landing Page¶

Step 1: Create one file¶

src/pages/{cert-code}/index.astro

Step 2: Pass data props to PathLayout¶

---
import PathLayout from '@layouts/PathLayout.astro';

const domains = [
  {
    name: 'Domain Name Here',
    number: 1,
    moduleCount: 10,
    isFree: true,  // set on the free domain
    description: 'What this domain covers.',
    firstModuleSlug: '{cert}/domain-1/first-module',
    modules: ['Module 1', 'Module 2', ...],
  },
  // ... more domains
];
---

<PathLayout
  title="XX-000: Cert Name — Guided"
  description="SEO description for the page."
  cert="XX-000"
  certTitle="First Line"
  certSubtitle="Second Line (accent colour)"
  heroDescription="1-2 sentence description shown in the hero."
  domains={domains}
  questionDomains={[
    { name: 'Domain Name', number: 1, total: 65, easy: 20, medium: 30, hard: 15, weight: '35-40%', free: 7, isFree: true },
    // ... more domains
  ]}
  totalModules={28}
  questionCount={200}
  freeDomain={1}
  freeQuestions={20}
  freeDescription="Domain X (Name — N modules) + 20 practice questions."
  highlights={[
    { icon: '🛡️', title: 'Highlight 1', desc: 'Short description.' },
    { icon: '🤖', title: 'Highlight 2', desc: 'Short description.' },
    { icon: '🔧', title: 'Highlight 3', desc: 'Short description.' },
    { icon: '📊', title: 'Highlight 4', desc: 'Short description.' },
  ]}
  sampleQuestion={{
    question: 'A realistic exam-style question?',
    options: ['A. Wrong answer', 'B. Correct answer', 'C. Wrong answer'],
    correctIndex: 1
  }}
  examDetails={{
    replaces: 'OLD-000 (optional)',
    duration: '45 minutes',
    passingScore: '700 / 1000',
    questionTypes: 'MCQ, multi-select, true/false',
    cost: '$99 USD',
    learnLink: 'https://learn.microsoft.com/en-us/credentials/certifications/exams/{cert}/'
  }}
  faqs={[
    { q: 'Question?', a: 'Answer.' },
    // 5-6 FAQs recommended
  ]}
/>

Step 3: That's it¶

PathLayout renders ALL 8 sections automatically:

Hero — cert badge, title, description, product chooser cards (Study Guide + Practice Exam), stats
What You'll Learn — 4 feature highlight cards
Full Curriculum — expandable domain cards with numbered module lists
Practice Exam Lab — Study Mode + Exam Mode cards, expandable domain cards with Easy/Medium/Hard difficulty breakdown
Pricing — 3-tier cards (Practice $14, Study Guide $19, Bundle $29)
About the Exam — details table + domain weight bars + Microsoft Learn link
FAQ — expandable Q&A from props
Bottom CTA — "Start Free" + "Try Practice Quiz"

Props Reference¶

Prop	Type	Required	Description
`title`	string	✅	Page title for SEO
`description`	string	✅	Meta description
`cert`	string	✅	Exam code (e.g. "AB-900")
`certTitle`	string	✅	First line of hero heading
`certSubtitle`	string	✅	Second line (accent coloured)
`heroDescription`	string	✅	1-2 sentence hero description
`domains`	array	✅	Study domains with modules
`questionDomains`	array	✅	Practice exam domains with difficulty
`totalModules`	number	✅	Total module count
`questionCount`	number	✅	Total question count
`freeDomain`	number	✅	Which domain number is free
`freeQuestions`	number	✅	How many free questions
`freeDescription`	string	✅	Free tier description text
`highlights`	array	✅	4 feature cards (icon, title, desc)
`sampleQuestion`	object	✅	Hero preview question
`examDetails`	object	✅	Exam metadata
`faqs`	array	✅	5-6 FAQ items

Domain Object Shape¶

interface DomainOverview {
  name: string;        // "M365 Core Features"
  number: number;      // 1, 2, 3...
  moduleCount: number; // 10
  description: string; // What this domain covers
  isFree?: boolean;    // true for the free domain
  firstModuleSlug?: string; // "ab-900/domain-1/welcome-to-m365"
  modules?: string[];  // ["Module 1", "Module 2"]
}

QuestionDomain Object Shape¶

interface QuestionDomain {
  name: string;    // "M365 Core Features"
  number: number;  // 1
  total: number;   // 65
  easy: number;    // 20
  medium: number;  // 30
  hard: number;    // 15
  weight: string;  // "35-40%"
  free: number;    // 7
  isFree?: boolean; // true for the free domain
}

Current Pages Using This Template¶

Cert	File	Modules	Questions	Free Domain	Status
AB-900	`src/pages/ab-900/index.astro`	28	200	Domain 3	✅ Live
AI-901	`src/pages/ai-901/index.astro`	26	200	Domain 1	✅ Live
AZ-900	`src/pages/az-900/index.astro`	35	200	Domain 1	🟡 Coming Soon

Checklist for New Cert Page¶

[ ] Create src/pages/{cert}/index.astro
[ ] Pass ALL required props (see table above)
[ ] Create practice page at src/pages/{cert}/practice.astro
[ ] Create question JSON files in src/data/questions/
[ ] Create study content in src/content/{cert}/
[ ] Build and verify all 8 sections render
[ ] Test product chooser cards link correctly
[ ] Test free tier modules are accessible
[ ] Update this doc with the new cert row