Homepage getting started/responsive improvements

[lynwilhelm]

Use Case

This ticket is to ensure cards are known to be clickable and that content and design is improved for mobile. This ticket include a switch to dark theme, which works way better with color contrast as well as aligning with the apps dark theme.

Acceptance Criteria

• New page: “About Simularium”
• New page title: Change “Quickstart guide” to “Getting started” in menu
• Change “Help” to “resources”
• Switch order of action buttons and navigation buttons in header
• Update h1, h2, and h3 global sizes for desktop
• New h1 and h2 sizes for mobile.
• Note minor content updates-I’d suggest a quick compare against current site
• New cards design with improved animation (load button, simulation title and GIF load trajectory)
• Enable drag and drop when the “Choose a Simularium fille to load” modal is shown
• Update “Choose a Simularium fille to load” modal (update tab group styling if you can in this round)
• Hope I didn’t miss anything!

Details

Figma design location