UX: Review & Optimize PSU Landing Page for Mobile Browsers

[NicolasLivanos]

Describe the task

Optimize PSU Landing Page on Mobile

Acceptance Criteria

• All copy on vertical view is underlined; users cant distinguish the ASA Go and FBP Go hotlinks (horizontal view is ok)
• Miro Board sub text: Checkout = Check out
• Teams Meetings sub text: remove "or watch the recordings"
• AOB

Additional context

• PSU Landing Page Revamp: Internal vs External Tools vs Public APIs #4466

[rajpersram]

Here's the pesky offending CSS for the underlining:

.css-y33c8r .SidebarToolList-text {
    text-decoration: underline;
}

[rajpersram]

Ideally, the semantics of the page should:

• Have the page title as h1
• component box titles as h2.
• Description should a paragraph
• Link as anchor

This will help on mobile as well to create the proper spacing and weight of elements.

Example:

<h1>Decision Support Tools</h1>

<section>
  <h2>Auto Spatial Advisory</h2>
  <p>A spatial analysis tool that...</p>
  <a href="#">Get Started</a>
</section>

<section>
  <h2>MoreCast</h2>
  <p>A system that enhances...</p>
  <a href="#">Get Started</a>
</section>