Re-design LP Layout (page composition, visual structure)

OVERVIEW

This issue focuses on improving the visual structure and page composition of the landing experience so it feels understandable, trustworthy, and easy to use. The current page reads as too empty and does not visually convey that TFA offers both an AI chat experience and a letter generation tool. We will introduce a scrollable section layout, stronger hero (initial screen or what users see before they scroll down), relevant imagery, clearer hierarchy that supports the product story/value and prepares users for the intake + tool-choice flow.

SCOPE

landing page visual composition, LP section layout.

ACTION ITEMS

• Make the landing page scrollable with multiple informative sections below the fold
• Add large, high-contrast value statement in the hero (big headline)
• Ensure the hero area visually supports two-tool messaging (Chat + Letter) without relying on menu discovery.
• Add visual(s) in the hero (image/illustration or product mock-up)
• Create a visually clear “How Does It Work” section that provides step-by-step guidance for new users
  • Maybe map out the process visually like flow graphic
  • Add a section that maps out what questions/issues TFA can help with.
  • Add examples of content blocks:
    • Visual previews/screenshots of letter types.
    • Example of questions and answers from the chatbot.
• Improve spacing/typography hierarchy so the disclaimer is readable and not visually minimised.
• Includes short privacy summary
• Include FAQ section wit 3-5 common questions users might have
• Add Who we are / Meet the team (highlighting Code PDX and Oregon Law Center teams)
• Add short section of why tenants’ rights matters and what those entail
• Add other short summaries of sections below the fold (TBD)