Tasks: Modern Homepage Layout

Input: Design documents from /specs/001-modern-homepage-layout/Prerequisites: plan.md (required), spec.md (required for user stories), research.md, data-model.md, contracts/

Tests: Include validation tasks for SEO, accessibility, responsive behavior, shared-data rendering, and Jekyll build verification. This feature does not require new automated test infrastructure unless implementation introduces logic that justifies it.

Organization: Tasks are grouped by user story to enable independent implementation and testing of each story.

Format: [ID] [P?] [Story] Description

Path Conventions

Phase 1: Setup (Shared Infrastructure)

Purpose: Reconfirm the concrete homepage implementation surface after the planning changes

Phase 2: Foundational (Blocking Prerequisites)

Purpose: Lock the shared homepage architecture, contracts, and validation rules before story work starts

⚠️ CRITICAL: No user story work can begin until this phase is complete

Checkpoint: Homepage structure, data ownership, SEO rules, and performance/a11y constraints are fixed and story implementation can begin

Phase 3: User Story 1 - Understand The Site Quickly (Priority: P1) 🎯 MVP

Goal: Deliver a clear landing-shell experience that explains what Geekmonks teaches, who it serves, and where a first-time visitor should start

Independent Test: Open / on desktop and mobile and confirm the page exposes one clear h1, a readable value proposition, and a primary CTA into tutorial content without relying only on the top navigation

Validation for User Story 1

Implementation for User Story 1

Checkpoint: The homepage clearly communicates value and a first-click path for new visitors on desktop and mobile

Phase 4: User Story 2 - Discover Courses And Learning Paths (Priority: P2)

Goal: Surface featured learning paths and supporting route choices using shared course and navigation data

Independent Test: Load / and confirm the featured learning paths clearly route users to AI/ML, AWS, and Spring destinations through data-driven homepage sections rather than nav alone

Validation for User Story 2

Implementation for User Story 2

Checkpoint: The homepage makes course discovery obvious, data-driven, and resilient to incomplete course metadata

Phase 5: User Story 3 - Maintain A Reusable Homepage System (Priority: P3)

Goal: Leave the homepage as a maintainable section system with reusable includes and shared Sass organization

Independent Test: Review the implementation and confirm homepage sections are modular, styling is organized in shared Sass files, and maintainers can adjust section content or order without rewriting one large template

Validation for User Story 3

Implementation for User Story 3

Checkpoint: The homepage is modular, maintainable, and ready for future iteration without large template rewrites

Phase 6: Polish & Cross-Cutting Concerns

Purpose: Final verification and cleanup across the full homepage redesign

Dependencies & Execution Order

Phase Dependencies

User Story Dependencies

Within Each User Story

Parallel Opportunities

Parallel Example: User Story 1

# Launch validation checks for User Story 1 together:
Task: "Validate homepage h1, title/description alignment, and root-page schema behavior in index.md and shared head includes"
Task: "Validate keyboard flow, focus visibility, and mobile readability in the landing-shell layouts"
Task: "Validate reduced-motion-safe and no-required-JS behavior in homepage hero and shared shell includes"

# Launch implementation work for User Story 1 together:
Task: "Update homepage hero and orientation copy in index.md"
Task: "Restructure the homepage route into semantic landing-shell sections in _layouts/web/homepage.html"
Task: "Refine shared homepage hero and proof components in _includes/components/"
Task: "Refresh shared homepage shell presentation in _includes/layouts/"

Parallel Example: User Story 2

# Launch validation checks for User Story 2 together:
Task: "Validate featured-track card semantics and image fallback behavior in the course promotion include and course data"
Task: "Validate homepage route coverage for primary and secondary destinations in homepage copy and shared nav data"
Task: "Validate responsive layout behavior for track and CTA sections in homepage Sass files"

# Launch implementation work for User Story 2 together:
Task: "Update featured learning-path summaries and CTA destinations in index.md"
Task: "Refactor featured track rendering to stay data-driven in _includes/components/course-promotion.html"
Task: "Refine secondary route discovery in _includes/components/homepage-secondary-cta.html and shared banner data"
Task: "Handle missing course metadata fallback cases in homepage components"

Parallel Example: User Story 3

# Launch validation checks for User Story 3 together:
Task: "Validate homepage component modularity across the layout and homepage components"
Task: "Validate shared style organization and import order across _sass/web/ and assets/css/web.scss"
Task: "Validate implementation alignment with the homepage contract and data model"

# Launch implementation work for User Story 3 together:
Task: "Extract or consolidate repeated homepage section markup in the homepage layout and components"
Task: "Consolidate homepage-specific style responsibilities in shared Sass partials"
Task: "Clean up shared asset imports and section-style ordering in assets/css/web.scss"

Implementation Strategy

MVP First (User Story 1 Only)

  1. Complete Phase 1: Setup
  2. Complete Phase 2: Foundational
  3. Complete Phase 3: User Story 1
  4. STOP and VALIDATE: Confirm the homepage clearly communicates value, audience, and first-click path on desktop and mobile
  5. Demo the refreshed landing-shell direction before extending course discovery work

Incremental Delivery

  1. Complete Setup + Foundational to lock homepage architecture and rules
  2. Add User Story 1 and validate the hero/orientation experience
  3. Add User Story 2 and validate featured learning-path discovery
  4. Add User Story 3 and validate maintainability/modularity
  5. Finish with cross-cutting QA and build verification

Parallel Team Strategy

With multiple developers:

  1. One developer updates homepage route structure in _layouts/web/homepage.html
  2. One developer handles homepage and shared shell includes under _includes/components/ and _includes/layouts/
  3. One developer handles Sass and import cleanup under _sass/web/ and assets/css/web.scss
  4. Converge for final SEO, accessibility, and build validation

Notes