Add "Why us" landing page to flutter.dev - #13658
Draft
vmkstudio wants to merge 2 commits into
Draft
Conversation
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.
|
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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 adoptingFlutter, implemented from a design handoff.
Approach
The goal was to reuse what
sites/wwwalready has rather than introduce aparallel set of conventions:
DefaultLayout— the page adds neitherCTASection, unchangedIconcomponent (Material Symbols Rounded).btnfromcomponents/_btn.scsscore/_vars.scssbreakpoints.screen()mixins, mobile-firstNine 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 thecase quote landed on 36px exactly. Only the stat numerals (
3X,97%) and thefixed hero stage geometry are literals, as no token covers them.
New files
content/why-us/index.md— page content and frontmatterlib/src/pages/why_us_page.dart— composes the sectionslib/src/components/sections/why_us_*.dart— six page sectionslib/src/utils/visibility_observer.dart— scroll-into-view trigger and tweenlib/styles/pages/_why_us.scss— page stylesNote 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.dartimportsdart:io, so calling it from a@clientcomponent pulls the server-only SDK into the client bundle and
build_web_compilerssilently skips compilingmain.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— cleandart run dash_site --site=www build— succeeds;/why-usgeneratedmain), no skippedentrypoints
Open questions
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.
hubsymbol where the design had abespoke SVG. Close, but not identical.