Skip to content

Rebuild the public homepage on the design 5a mockup #179

Description

@alexeygrigorev

Rebuild the public homepage on the "design 5a" mockup from DataTalks.Club UI mockups.zip. The current homepage is the adopted CMP shell (divided rows, courses.css + site_shell.css); design 5a is a different visual system — banded sections, a cream/lavender/mint/ink palette, hand-drawn illustrations, and a course-first narrative.

Normative references: _docs/specs/02-url-link-seo-compatibility.md (canonical, title, meta), _docs/specs/03-github-content-and-people.md (public projection is the only source of content facts), _docs/accessibility/.

Scope

  • Replace templates/core/home.html with the design 5a page: masthead, hero, "the climb" three-stage explainer, member stories, course catalogue (featured cohort + horizontal scroller), how-the-courses-work strip, this-week's events, latest podcast/article, wiki-as-a-graph, and a closing account band.
  • Carry the page's stylesheet inline in <head>. The homepage stops loading courses.css, core/site_shell.css, core/accessibility.css, Tailwind and FontAwesome.
  • Add core/home_content.py: every fact on the page (course titles, cohort years, public paths, homework/project counts, wiki topics and edges, publication dates) is read from the checked public projection and fails loudly when the projection does not supply it. Only short section copy and the per-course promise lines are editorial constants.
  • Add templates/core/_home_illustration.html for the shared inline SVG illustration variants.
  • Keep the existing shared behaviour: skip link and #main-content focus target, site announcement placement, dark-mode toggle contract (darkMode storage key, cookie endpoint, dark/dark-mode body classes), impersonation banner, analytics-preferences panel, shared footer.
  • Update the contract tests, deploy/smoke.py, and the Playwright expectations that pin the old homepage identity.

Non-goals

  • No change to /events, /courses, event detail, or any hub page. Those keep the adopted CMP shell; the homepage simply leaves the shared home-events-cmp contract.
  • No new content models, no projection schema change, no new dependency.
  • Not extracting the inline stylesheet into a shared design system — that is the epic in Use the CMP design system across the entire website #129.

Dependencies

Acceptance criteria

  • / renders the design 5a composition at 1440px and 390px with no horizontal overflow, in light and dark mode.
  • / loads zero <link rel="stylesheet"> elements and exactly one <head><style>.
  • Title is DataTalks.Club — free courses for data and AI engineers; the canonical link stays https://datatalks.club/; the X-Robots-Tag development header is unchanged.
  • /unified/ renders byte-identical <main> markup to /.
  • Every course card, event card, podcast, article and wiki node links to the path the public projection supplies; a missing projection record raises ImproperlyConfigured rather than rendering a dead link.
  • Exactly one element carries data-featured-course.
  • Skip link moves focus to #main-content; the nav toggle exposes aria-expanded; the dark-mode toggle exposes aria-pressed and survives reload.
  • The site announcement still renders between </header> and <main>.
  • deploy/smoke.py asserts the new home identity and still rejects a /courses page that regressed to the homepage.
  • Focused Django tests, make test-playwright-core, lint, format, typecheck and the terminology check pass.

Browser scenarios

  • Desktop 1440x900 and mobile 390x844, light and dark: load /, screenshot full page, confirm no Traceback/Page not found, no horizontal overflow.
  • Mobile: open the nav toggle, confirm aria-expanded="true" and that the links panel is reachable by keyboard.
  • Desktop: scroll the catalogue with both arrow buttons and confirm the scroller respects prefers-reduced-motion.

Open item

The three member stories in core/home_content.py are placeholder copy taken from the mockup, not quotes from named members who agreed to be attributed. They must be replaced with real attributable stories, or the entries removed (which hides the section), before this page is served from datatalks.club.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P0Must-have or release-blockingaccessibilityArea: accessibilityenhancementNew feature or requestfrontendArea: frontendhumanCode complete; manual verification requiredseoArea: seotestingArea: testing

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions