Overview

All section components have already been built. This ticket covers assembling the Create Account and Sign In pages into their respective layouts, wiring up data/props, and ensuring correct spacing, ordering, and responsive behaviour across all three breakpoints. Both pages share the same layout and components — the Sign In page is a variant of the Create Account page with the Username field removed and the Sign In CTA replacing the "Already have an account?"

Sign In
Illustrations

Form Fields

Create Account

• Email Address (required)
• Password (required) — show/hide toggle, helper text: "Passwords should be at least 15 characters OR at least 8 characters including a number and lowercase letter."
• Username (required)
• Checkbox: "Also join the Boost Developers Mailing List"
• Primary CTA: "Create Account"
• Divider: "OR"
• "Continue with GitHub" button (GitHub icon)
• "Continue with Google" button (Google icon)
• "Already have an account? Sign in →"

Sign In

All fields and CTAs identical to Create Account with two exceptions:

• Username field is not shown
• "Already have an account? Sign in →" is replaced with "Don't have an account? Sign up →"

Props / Data Wiring

• CreateAccountForm — handle controlled input state for email, password, username, and mailing list checkbox; handle form submission
• IllustrationPanel — pass illustrations array (image assets); pass active index to control which illustration is displayed

Acceptance Criteria

• All components render in the correct order per breakpoint, as defined in Figma
• Password field includes show/hide toggle and helper text
• Mailing list checkbox is unchecked by default
• "Already have an account? Sign in →" links to the sign in page
• "Don't have an account? Sign up →" links to the sign up page
• Light and dark mode render correctly for all components
• All props wired with mock data
• Tested in Chrome, Safari, Firefox

Out of Scope

• Building or modifying individual components (separate tickets)
• Authentication logic and OAuth integration (separate tickets)
• Live data fetching — use mock data for now
• Form validation & error handling