Implement redesigned screens and copy

[thekaveman]

Pages

1. Home page: Change design entirely - 2
2. Verifier selection page: Move to one-column layout, change/add copy - 2
3. Eligibility start page: Already on one-column layout - 1
4. CC Form page: Move to one-column layout, change copy, add back button - 3
5. Connect your card page: Move to one-column layout, possibly add new copy areas - 2
6. Success Page - 2

Ensure no changes/regressions on:

1. 404 error pages
2. 500 error pages
3. Elig error page
4. Enroll error page
5. Login.gov IAL2 flow

Complexity:

1. No new content, no new images. Just move around elements.
2. New static content blocks/new images/icons.
3. New interactive segments (like a Back Button) / Redesigned entirely

---

🚧 This is not final. This is a working draft of upcoming tickets, as Design finalizes the flow, copy and wireframes 🚧

1. Agency Index Home page: benefits.cal-itp.org/mst

Before	After	Complexity
		- Move to one-column - New copy - Slightly changed copy blocks design

2. Eligibility Verifier selection page: https://dev-benefits.calitp.org/eligibility/

Before	After	Complexity
		- Move to one-column - New copy - Add new copy blocks - Restyle copy

3. Eligibility Start page: https://dev-benefits.calitp.org/eligibility/start

Before	After	Complexity
		- Move to one-column - Slightly change copy design/blocks - Add back button

This page is different for Login.gov and CC flow, so will need double the copy/icons/anything else content.

4. CC Form page: https://dev-benefits.calitp.org/eligibility/confirm

Before	After	Complexity
		- Move to one-column - Slightly restyle some text

5. Connect your card page: Move to one-column layout, possibly add new copy areas

Before	After	Complexity
		- Move to one-column layout - Possibly add new copy blocks

6. Success Page

---

Things to discuss during Design-Dev handoff:

• During design handoff: determine what is the new maximum width of text (container-fluid) in Mobile and on Desktop/Tablet widths. Is it based on a percentage width? Is it based on logic like, 100% of current viewport width minus a fixed pixel width left and right margin? What we need to know first is whether the width logic is different from what we currently have on Prod, which is a mix of percentage and fixed left/right margin: https://benefits.calitp.org
• During design handoff: confirm all new font-size, line-spacing, letter-spacing. Try as much as possible to make sure all these new types are the same few sizes. Both the desktop and the corresponding mobile font size/letter spacing/line height needs to be the same.
• During design handoff: How is the width of the text input form field determined? Percentage or some other calculation? Does it change depending on screen width? Does the location/alignment of the text input form field change? How is that determined on Desktop and Mobile?
• We need the edited/cropped new top photo if it's different from what's currently on https://benefits.calitp.org/
• Will the height of the page now be fluid entirely, or will it have a minimum height of the viewport height?

Recommended refactors to in-line with this feature development:

• HTML Refactor: Add height and width attributes to all images #834
• A11y: Ensure units for fonts, paddings, margins, etc. meet our accessibility standards #778 (Start by doing this for the new form input elements only)
• CSS Refactor: Refactor H1, H2, H3, H4, <a>, button styles #751

[thekaveman]

I think a lot of this has been addressed and/or refactored into new, more specific tickets.

@angela-tran @machikoyasuda can we close this one?