Skip to content

Add "Why us" landing page to flutter.dev - #13658

Draft
vmkstudio wants to merge 2 commits into
flutter:mainfrom
vmkstudio:why-us-landing-page
Draft

Add "Why us" landing page to flutter.dev#13658
vmkstudio wants to merge 2 commits into
flutter:mainfrom
vmkstudio:why-us-landing-page

Conversation

@vmkstudio

Copy link
Copy Markdown

Note

Opening as a draft for early feedback on approach and on the open
questions at the bottom — particularly how to host the whitepaper PDF.

Adds /why-us, a marketing page making the business case for adopting
Flutter, implemented from a design handoff.

Approach

The goal was to reuse what sites/www already has rather than introduce a
parallel set of conventions:

Concern Reused
Header and footer DefaultLayout — the page adds neither
Closing call to action The shared CTASection, unchanged
Icons The existing Icon component (Material Symbols Rounded)
Buttons .btn from components/_btn.scss
Colour, radius, spacing Tokens from core/_vars.scss
Breakpoints breakpoints.screen() mixins, mobile-first

Nine of the design's eleven type sizes map exactly onto the existing heading
scale. The section subhead moved 32px → 36px (--font-size-heading-2) and the
case quote landed on 36px exactly. Only the stat numerals (3X, 97%) and the
fixed hero stage geometry are literals, as no token covers them.

New files

  • content/why-us/index.md — page content and frontmatter
  • lib/src/pages/why_us_page.dart — composes the sections
  • lib/src/components/sections/why_us_*.dart — six page sections
  • lib/src/utils/visibility_observer.dart — scroll-into-view trigger and tween
  • lib/styles/pages/_why_us.scss — page styles

Note for reviewers

The four sections that hydrate on the client take their asset URLs as
constructor parameters instead of calling context.asset() themselves.
utils/asset_utils.dart imports dart:io, so calling it from a @client
component pulls the server-only SDK into the client bundle and
build_web_compilers silently skips compiling main.client.dart.js
disabling interactivity across the whole site, not just this page. Worth
knowing about if other pages later add client-side sections.

Verification

  • dart analyze — clean
  • dart run dash_site --site=www build — succeeds; /why-us generated
  • Client bundle compiles (322,812 bytes vs 318,796 on main), no skipped
    entrypoints
  • All 28 assets referenced by the page resolve in the build output

Open questions

  1. The whitepaper PDF is 7.1 MB and committed to the repo. Every other PDF
    the site links to is hosted externally. Happy to swap the link for a CDN URL
    if you'd prefer to host it there — probably the right call.
  2. The "One Design System" card uses the hub symbol where the design had a
    bespoke SVG. Close, but not identical.
  3. The page is not yet linked from the header nav; let me know where it belongs.

Adds `/why-us`, a marketing page making the business case for adopting
Flutter, implemented from a design handoff.

The page reuses the site's existing conventions rather than introducing
parallel ones:

- `DefaultLayout` supplies the header and footer.
- The closing call to action reuses the shared `CTASection`.
- Icons use the existing `Icon` component and Material Symbols Rounded.
- Colour, radius, spacing and type resolve to the tokens in
  `core/_vars.scss`; nine of the design's eleven type sizes map exactly
  onto the existing heading scale.
- The stylesheet is mobile-first and layers wider treatments with the
  `breakpoints.screen()` mixins, matching the rest of the site.

Only the stat numerals and the fixed hero stage geometry are literals,
as no token covers them.

The four sections that hydrate on the client take their asset URLs as
parameters. They must not call `context.asset()` themselves: the asset
helpers import `dart:io`, which pulls the server-only SDK into the client
bundle and stops it compiling.
@google-cla

google-cla Bot commented Aug 3, 2026

Copy link
Copy Markdown

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

Four issues only visible once the page was rendered:

- Hero text was black. `core/_base.scss` declares `color: black` directly on
  h1..h6 and a grey on body copy; an inherited colour on the section can never
  override a direct declaration, so the dark-background text restates it.
- The "One team, not three" row was mirrored. The media column already comes
  first in the DOM, so `row-reverse` flipped it to the wrong side.
- Success-case device imagery overflowed its card. The media box had a width
  but no height, so `overflow: hidden` never clipped it.
- Feature-card body copy inherited the body grey instead of black.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant