Koa Health Mental Care Landing Page

Overview

This landing page for Koa Health is a sophisticated example of modern healthcare B2B web design, focusing on clarity, trust, and accessibility. It provides an excellent reference for builders looking to implement complex layout grids, scroll-triggered animations, and a cohesive brand identity that balances authoritative serif typography with a minimalist color palette.

Design System

• Color Palette & Visual Hierarchy: The site uses a deep "Koa Blue" (#2940D3) as its primary brand anchor, contrasted against a clean off-white/cream background (#F5EBE1). Accents of darker blues and black text create strong readability. Visual weight is managed through large typography and expansive whitespace to prevent information overload.
• Typography System: A dual-font approach is utilized. A high-contrast, elegant serif is used for major headers to convey medical authority and warmth, while a clean sans-serif handles body copy and navigation. Hierarchies are clear, with large "Page Header" styles (new-text-page-header) for heroes and smaller, bolded accents for features.
• Page Structure & Flow: The flow follows a standard conversion funnel: (1) Centered Hero with a clear CTA, (2) Sub-navigation for anchor jumping, (3) A "Mental Healthcare" section featuring staggered mobile mockups in a blue container, and (4) A multi-column feature grid with thin top-border accents.
• Reusable Components:
  • Mobile Mockups: Layered and overlapping PNGs that create depth and show off UI.
  • Buttons: Simple, rounded rectangular buttons with generous padding and subtle :hover state changes (bg-koa-blue/75).
  • Feature Grid: A flexible 12-column grid layout where each item is preceded by a border-t scale-in animation.
  • Modal Forms: A sophisticated location-selection modal with radio group inputs and a dedicated image sidebar.
• Interactions & Motion: The HTML reveals a custom animation framework (sa="alpha,y") that handles fade-ins and vertical translations as users scroll. Thin borders use scaleX transitions (origin 0% 50%) to "draw" lines as they enter the viewport.
• Implementation Clues: Built with Nuxt.js (Vue) and Tailwind CSS. The use of grid-layout and col-span-* classes demonstrates a rigid adherence to a 12-column system, making it highly modular for layout experimentation.

Use Cases

• Who should clone this: SaaS companies, healthcare providers, or B2B platforms that need to present clinical or technical information in a way that feels approachable and human-centric.
• Effective Remixes: Fintech applications could swap the medical serif for a bold geometric sans for a more tech-forward feel. The "staggered phone" section is perfect for any mobile-first product showcase.
• Remix Directions: Consider adopting the thin accent borders above feature lists as a minimalist alternative to bulky cards. The hero section is ideal for a "Quick Clone" to validate landing page copy without complex assets.
• Suggested Scope: A full-page clone is recommended to capture the sophisticated interplay between the scroll-triggered animations and the grid-based layout flow.