Phase 6 - Page Sections & Composition

Overview

• Track: Lite (MVP) / Full (Showcase)
• Duration: 2-3 days
• Dependencies: Phase 0-5 completed
• Deliverables: Composed page sections, hero components, feature grids, testimonials

Entry Criteria

• Component library built (Phase 5)
• Design tokens integrated
• Layout system functional
• Content schemas defined

Implementation Steps

Step	Task	MVP	Showcase	Notes
6.01	Build Hero section	✅	✅	Text-focused → Animated hero
6.02	Create Features grid	✅	✅	Static 3-column → Enhanced animations
6.03	Add CTA section	✅	✅	Simple banner → Advanced styling
6.04	Build Footer section	✅	✅	Links and copyright
6.05	Create About section	✅	✅	Text and image → Enhanced layout
6.06	Add Contact section	✅	✅	Form or contact info → Advanced form
6.07	Build Blog listing	✅	✅	Card-based layout → Enhanced cards
6.08	Create Project grid	✅	✅	Portfolio showcase → Advanced grid
6.09	Create Testimonials	❌	✅	Carousel or grid
6.10	Build Stats section	❌	✅	Animated numbers
6.11	Add Timeline	❌	✅	Project/career history
6.12	Create FAQ section	❌	✅	Accordion pattern
6.13	Build Newsletter	❌	✅	Form with validation
6.14	Add Team section	❌	✅	Member cards
6.15	Create Pricing table	❌	✅	Comparison layout
6.16	Build Process section	❌	✅	Step-by-step visual

Lightweight Section Loading

Why this change? Earlier versions embedded large inline scripts for each section. We now extract the observer/animation logic into a tiny Preact island (StatsObserverIsland.tsx) imported once. Each section renders minimal HTML on the server so users without JavaScript still see meaningful content.

Implementation tips

1. Render placeholders server-side (numbers without animation).
2. In the island, hydrate only when the section becomes visible (client:visible).
3. Share a single IntersectionObserver utility.

Common Pitfalls

1. Over-nesting Sections: Don’t wrap sections in sections unnecessarily

   • Solution: Use semantic HTML, sections for major content areas only

2. Missing Semantic Structure: Using divs instead of section/article

   • Solution: Use appropriate HTML5 elements

3. Poor Mobile Experience: Desktop-only section designs

   • Solution: Design mobile-first, test at all breakpoints

4. Inaccessible Animations: Motion without considering preferences

   • Solution: Always respect prefers-reduced-motion

5. Heavy Section Components: Loading too much JavaScript

   • Solution: Keep sections static, use islands sparingly

Exit Criteria

Criteria	MVP	Showcase	Description
Hero section with text focus	✅	✅	Clear messaging → Animated patterns
Features grid (static)	✅	✅	Basic grid → Advanced layouts
Simple CTA section	✅	✅	Basic styling → Enhanced design
About section	✅	✅	Text and image → Enhanced layout
Blog/Project listings	✅	✅	Card-based → Advanced grid
All sections accessible	✅	✅	WCAG AA compliance
Mobile responsive	✅	✅	All breakpoints tested
Testimonials section	❌	✅	Carousel or grid layout
Stats with animations	❌	✅	Animated number counters
Smooth scroll interactions	❌	✅	CSS scroll-behavior
Section transitions	❌	✅	View transitions

Rollback Strategy

If section implementation causes issues:

1. Performance Regression:

   • Remove animations/islands
   • Simplify to static HTML
   • Check bundle size impact

2. Layout Issues:

   • Revert to basic grid
   • Remove complex positioning
   • Test on real devices

3. Accessibility Problems:

   • Simplify interactions
   • Add missing ARIA labels
   • Test with screen readers

AI Assistant Notes

Key Files to Reference

• src/components/sections/* - All section components
• src/pages/index.astro - Section composition
• Section-specific assets and content

Common Prompts for This Phase

• “Create a testimonials section with carousel”
• “Build an accessible FAQ accordion section”
• “Design a hero section with animated background”
• “Compose sections for landing page”

Context Requirements

• Brand guidelines for styling
• Content requirements per section
• Performance constraints
• Animation preferences