From cab7bbe3f18db61cc880466315ada2926f94d28b Mon Sep 17 00:00:00 2001 From: Kevin Moore Date: Mon, 13 Jul 2026 17:33:58 +0000 Subject: [PATCH 1/7] feat(web): refresh Flutter Web landing page copy and layout Refreshes the Flutter Web landing page (flutter.dev/development/web) to align with new marketing messaging and target audiences. - Updates Hero section to emphasize high-performance web applications. - Updates 3-point pitch features: 'Same code', 'Same experience', and 'Great performance' (with WebAssembly). - Adds a 'When to use Flutter on the web' comparison grid (Ideal vs. Less Ideal use cases). - Replaces the generic CTA section with a custom dual-pathway CTA targeting existing Flutter developers and web developers new to Flutter. - Updates layout and typography styles for the new section and custom CTAs. --- sites/www/lib/src/pages/web_page.dart | 148 ++++++++++++++----- sites/www/lib/src/style_hash.dart | 2 +- sites/www/lib/styles/pages/_development.scss | 79 +++++++++- 3 files changed, 183 insertions(+), 46 deletions(-) diff --git a/sites/www/lib/src/pages/web_page.dart b/sites/www/lib/src/pages/web_page.dart index c183ef18753..b01a300ed66 100644 --- a/sites/www/lib/src/pages/web_page.dart +++ b/sites/www/lib/src/pages/web_page.dart @@ -10,6 +10,7 @@ import '../components/sections/case_studies.dart'; import '../components/sections/cta_section.dart'; import '../components/sections/feature_columns_section.dart'; import '../components/sections/hero_section.dart'; +import '../components/common/icon.dart'; import '../utils/asset_utils.dart'; import '../utils/scroll_spy.dart'; @@ -20,10 +21,11 @@ class WebPage extends StatelessComponent { Component build(BuildContext context) { return main_([ HeroSection( - title: 'Flutter on the Web', + title: 'High-Performance Web Applications, Rendered Pixel-Perfect.', text: - 'Easily reach more users in browsers with the same experience as ' - 'on mobile devices through the power of Flutter on the web.', + 'Bring your native mobile experience to the browser with zero compromise. ' + 'Powered by WebAssembly for stable, 60fps performance. ' + 'Best for SPAs, PWAs, and complex web tools.', media: img( src: context.asset('images/flutter-on-web.png'), alt: 'Flutter on Web', @@ -32,57 +34,85 @@ class WebPage extends StatelessComponent { section(classes: 'content-container', attributes: scroll.spyContent, [ FeatureColumnsSection([ FeatureColumn( - title: 'Shared codebase', + title: 'Same code', description: - 'Share your Dart code between mobile and web applications; ' - 'web is just another device target for your app.', + 'Almost all of your code — your Dart business logic and your Flutter widgets — ' + 'works identically across mobile, desktop, and the web, eliminating duplicate work.', image: context.asset('images/all-one-codebase.png'), ), FeatureColumn( - title: 'Reach more users', + title: 'Same experience', description: - 'Acquire users beyond app stores without limitations from ' - 'just a click of a URL in a web browser.', + 'Flutter uses the same rendering engine on the web and mobile, ' + 'ensuring your application looks and feels exactly the same without fighting browser and platform differences.', image: context.asset('images/reach-more-users.png'), ), FeatureColumn( - title: 'Powered by WebAssembly', + title: 'Great performance', description: - 'Ship your app using WebAssembly for ' - 'an efficient and fast experience on the web.', + 'Deploy your web application with WebAssembly (Wasm) for a blazing-fast, ' + 'jank-free experience across modern browsers.', image: context.asset('images/build-wasm.png'), imageAlt: 'Ship with WebAssembly', ), ]), - section([ - div(classes: 'features container', [ - div(classes: 'feature nospy', [ - const div(classes: 'text', [ - Component.element( - tag: 'hgroup', - children: [ - h4(classes: 'eyebrow', [.text('Flutter on the Web')]), - h3([.text('Build better web apps')]), - ], - ), - p([ - .text( - 'The web itself is a flexible platform, but Flutter is ' - 'ideal for building web applications like PWAs or SPAs ' - 'and bringing your existing mobile app to the web. ', - ), + section(classes: 'module', [ + div(classes: 'use-cases-header stacked-header container', [ + h2([.text('When to use Flutter on the web')]), + ]), + div(classes: 'container', [ + div(classes: 'use-cases-grid', [ + div(classes: 'use-case-col ideal', [ + h4([.text('Ideal Use Cases ✅')]), + ul([ + li([ + .text( + 'Progressive Web Apps (PWAs) and Single Page Apps (SPAs)', + ), + ]), + li([ + .text( + 'Code Sharing: Reusing UI and logic between mobile, desktop, and web apps', + ), + ]), + li([ + .text( + 'Rich Application UIs: Productivity, creative, or specialized business tools', + ), + ]), + li([ + .text( + 'Highly Interactive Canvas Apps: Complex dashboards, games, or visualization tools', + ), + ]), ]), - a( - classes: 'btn', - href: 'https://docs.flutter.dev/get-started/web', - [.text('Learn more')], - ), ]), - div(classes: 'media', [ - img( - src: context.asset('images/build-better-web-apps.png'), - alt: 'Build better web apps', - ), + div(classes: 'use-case-col less-ideal', [ + h4([.text('Less Ideal Use Cases ⚠️')]), + ul([ + li([ + .text( + 'SEO-Heavy Sites: Static blogs, documentation, or public marketing pages', + ), + ]), + li([ + .text( + 'Simple Static Web Pages: Simple landing pages or sites with minimal interaction', + ), + ]), + li([ + .text( + 'Heavy Text Selection: Pages where standard DOM-based text-selection and reader mode are critical', + ), + ]), + li([ + .text( + 'Alternative Option: If you want to build a traditional SEO-friendly page with Dart, consider ', + ), + a(href: 'https://jaspr.site/', [.text('Jaspr')]), + .text('.'), + ]), + ]), ]), ]), ]), @@ -130,7 +160,45 @@ class WebPage extends StatelessComponent { const section(id: 'case-studies', classes: 'module carousel-section', [ CaseStudies(tag: 'web'), ]), - const CTASection(), + section(id: 'cta', classes: 'module', [ + div(classes: 'insert cta-insert container', [ + div(classes: 'text', [ + h3([.text('Get started')]), + p([.text('Choose the pathway that matches your experience:')]), + div(classes: 'cta-buttons', [ + div(classes: 'cta-pathway', [ + h4([.text('Existing Flutter Developer')]), + a( + href: 'https://docs.flutter.dev/get-started/web', + classes: 'btn', + [ + .text('Add web support'), + ], + ), + ]), + div(classes: 'cta-pathway', [ + h4([.text('New to Flutter (Web Developer)')]), + a( + href: + 'https://docs.flutter.dev/get-started/flutter-for/web-devs', + classes: 'btn quiet', + [ + .text('Web developer guide'), + RawText(' '), + Icon.linkArrow(), + ], + ), + ]), + ]), + ]), + div(classes: 'media', [ + img( + src: context.asset('/images/common/get-started-background.png'), + alt: 'Powered by Dart', + ), + ]), + ]), + ]), ]), ]); } diff --git a/sites/www/lib/src/style_hash.dart b/sites/www/lib/src/style_hash.dart index 703cc3cdaa1..0ce07d6a9e0 100644 --- a/sites/www/lib/src/style_hash.dart +++ b/sites/www/lib/src/style_hash.dart @@ -2,4 +2,4 @@ // dart format off /// The generated hash of the `main.css` file. -const generatedStylesHash = 'wtGNzA0XTdiZ'; +const generatedStylesHash = '3-OfK9aIumgK'; diff --git a/sites/www/lib/styles/pages/_development.scss b/sites/www/lib/styles/pages/_development.scss index 8b8fb211276..8667184192a 100644 --- a/sites/www/lib/styles/pages/_development.scss +++ b/sites/www/lib/styles/pages/_development.scss @@ -33,12 +33,81 @@ body.development { } /* Web */ - &.web section.hero { - background-image: linear-gradient(35deg, #e6e4fd 10%, #f3fcff 60%); - } + &.web { + section.hero { + background-image: linear-gradient(35deg, #e6e4fd 10%, #f3fcff 60%); + } + + #feature-grid { + background-image: linear-gradient(145deg, #037efe 30%, #1cdac6 90%); + } + + .use-cases-grid { + display: flex; + flex-direction: column; + gap: 2rem; + margin-top: 2rem; + + @include breakpoints.screen('md') { + flex-direction: row; + gap: 4rem; + } + } + + .use-cases-header { + h2 { + font-size: var(--font-size-heading-2); + } + } + + .use-case-col { + flex: 1; + + h4 { + margin-bottom: 1rem; + font-weight: 600; + font-size: var(--font-size-heading-3); + } + + ul { + list-style-type: disc; + padding-left: 1.5rem; - &.web #feature-grid { - background-image: linear-gradient(145deg, #037efe 30%, #1cdac6 90%); + li { + margin-bottom: 0.5rem; + line-height: 1.6; + font-size: var(--font-size-heading-4); + } + } + } + + .cta-insert { + h4 { + color: white; + margin-bottom: 0.5rem; + } + p { + margin-bottom: 1rem; + } + .cta-buttons { + display: flex; + flex-direction: column; + gap: 2rem; + width: 100%; + margin-top: 2rem; + + @include breakpoints.screen('md') { + flex-direction: row; + gap: 4rem; + } + } + .cta-pathway { + flex: 1; + display: flex; + flex-direction: column; + align-items: flex-start; + } + } } #notification.module { From 62f6e25433ff4d93e64674aa5734ab682d99d421 Mon Sep 17 00:00:00 2001 From: Kevin Moore Date: Mon, 13 Jul 2026 18:38:10 +0000 Subject: [PATCH 2/7] fix(web): resolve linter warnings (const and imports) --- sites/www/lib/src/pages/web_page.dart | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/sites/www/lib/src/pages/web_page.dart b/sites/www/lib/src/pages/web_page.dart index b01a300ed66..dc90232c9c3 100644 --- a/sites/www/lib/src/pages/web_page.dart +++ b/sites/www/lib/src/pages/web_page.dart @@ -6,11 +6,10 @@ import 'package:jaspr/dom.dart'; import 'package:jaspr/jaspr.dart'; import '../components/common/feature_grid.dart'; +import '../components/common/icon.dart'; import '../components/sections/case_studies.dart'; -import '../components/sections/cta_section.dart'; import '../components/sections/feature_columns_section.dart'; import '../components/sections/hero_section.dart'; -import '../components/common/icon.dart'; import '../utils/asset_utils.dart'; import '../utils/scroll_spy.dart'; @@ -56,7 +55,7 @@ class WebPage extends StatelessComponent { imageAlt: 'Ship with WebAssembly', ), ]), - section(classes: 'module', [ + const section(classes: 'module', [ div(classes: 'use-cases-header stacked-header container', [ h2([.text('When to use Flutter on the web')]), ]), @@ -162,7 +161,7 @@ class WebPage extends StatelessComponent { ]), section(id: 'cta', classes: 'module', [ div(classes: 'insert cta-insert container', [ - div(classes: 'text', [ + const div(classes: 'text', [ h3([.text('Get started')]), p([.text('Choose the pathway that matches your experience:')]), div(classes: 'cta-buttons', [ From 8dfd3fbb21b527d7aa1e4f45b23acb22e1bff213 Mon Sep 17 00:00:00 2001 From: Kevin Moore Date: Mon, 13 Jul 2026 20:22:38 +0000 Subject: [PATCH 3/7] style(web): style inline links inside use cases Style inline links inside the "When to use Flutter on the web" comparison grid. - Adds styling for `a` tags inside `.use-case-col` to use the primary blue color (`--blue-6`) and underline. - Adds hover state using `--blue-7`. - Updates the compiled stylesheet hash in `style_hash.dart` to `SpDqoGChHvZv`. This ensures the "Jaspr" alternative option link is clearly visible as a link. --- sites/www/lib/src/style_hash.dart | 2 +- sites/www/lib/styles/pages/_development.scss | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/sites/www/lib/src/style_hash.dart b/sites/www/lib/src/style_hash.dart index 0ce07d6a9e0..4ea91f96285 100644 --- a/sites/www/lib/src/style_hash.dart +++ b/sites/www/lib/src/style_hash.dart @@ -2,4 +2,4 @@ // dart format off /// The generated hash of the `main.css` file. -const generatedStylesHash = '3-OfK9aIumgK'; +const generatedStylesHash = 'SpDqoGChHvZv'; diff --git a/sites/www/lib/styles/pages/_development.scss b/sites/www/lib/styles/pages/_development.scss index 8667184192a..c1680e0fb95 100644 --- a/sites/www/lib/styles/pages/_development.scss +++ b/sites/www/lib/styles/pages/_development.scss @@ -63,6 +63,15 @@ body.development { .use-case-col { flex: 1; + a { + color: var(--blue-6); + text-decoration: underline; + + &:hover { + color: var(--blue-7); + } + } + h4 { margin-bottom: 1rem; font-weight: 600; From 3584c0b82abdf6521bbc5ff6c6e9717cb57d511c Mon Sep 17 00:00:00 2001 From: Kevin Moore Date: Mon, 13 Jul 2026 21:41:24 +0000 Subject: [PATCH 4/7] feat(web): add "How we build" mirror grid to use cases Add a "How we build our own web experiences" mirror grid below the "When to use" section. - Highlights Flutter & Dart DevTools as an example of application-centric tooling built with Flutter Web. - Highlights dart.dev, flutter.dev, and pub.dev as examples of content-rich websites built with Jaspr. - Adds SCSS styles for the separator, subheading, and paragraph layout. - Updates the compiled stylesheet hash in `style_hash.dart` to `qNVkEeks2cg-`. --- sites/www/lib/src/pages/web_page.dart | 52 ++++++++++++++++++++ sites/www/lib/src/style_hash.dart | 2 +- sites/www/lib/styles/pages/_development.scss | 18 +++++++ 3 files changed, 71 insertions(+), 1 deletion(-) diff --git a/sites/www/lib/src/pages/web_page.dart b/sites/www/lib/src/pages/web_page.dart index dc90232c9c3..9a639f87014 100644 --- a/sites/www/lib/src/pages/web_page.dart +++ b/sites/www/lib/src/pages/web_page.dart @@ -114,6 +114,58 @@ class WebPage extends StatelessComponent { ]), ]), ]), + const div(classes: 'use-cases-separator', []), + const h3( + classes: 'use-cases-subheading', + [.text('How we build our own web experiences')], + ), + div(classes: 'use-cases-grid', [ + div(classes: 'use-case-col', [ + h4([.text('Application Tooling')]), + p([ + .text('Example: '), + a( + href: 'https://docs.flutter.dev/tools/devtools', + [.text('Flutter & Dart DevTools')], + ), + .text('.'), + ]), + ul([ + li([ + .text('Complex, highly interactive developer tooling.'), + ]), + li([ + .text( + 'Built with Flutter Web (Canvas/Wasm) to leverage the same UI codebase and rich widgets.', + ), + ]), + ]), + ]), + div(classes: 'use-case-col', [ + h4([.text('Content & Websites')]), + p([ + .text('Examples: '), + a(href: 'https://dart.dev', [.text('dart.dev')]), + .text(', '), + a(href: 'https://flutter.dev', [.text('flutter.dev')]), + .text(', and '), + a(href: 'https://pub.dev', [.text('pub.dev')]), + .text('.'), + ]), + ul([ + li([ + .text( + 'Document-centric pages requiring fast initial load times and SEO.', + ), + ]), + li([ + .text( + 'Built with Jaspr (Dart\'s native static/SSR framework).', + ), + ]), + ]), + ]), + ]), ]), ]), section(id: 'feature-grid', classes: 'module', [ diff --git a/sites/www/lib/src/style_hash.dart b/sites/www/lib/src/style_hash.dart index 4ea91f96285..fdcce7b679c 100644 --- a/sites/www/lib/src/style_hash.dart +++ b/sites/www/lib/src/style_hash.dart @@ -2,4 +2,4 @@ // dart format off /// The generated hash of the `main.css` file. -const generatedStylesHash = 'SpDqoGChHvZv'; +const generatedStylesHash = 'qNVkEeks2cg-'; diff --git a/sites/www/lib/styles/pages/_development.scss b/sites/www/lib/styles/pages/_development.scss index c1680e0fb95..83680e6eb8b 100644 --- a/sites/www/lib/styles/pages/_development.scss +++ b/sites/www/lib/styles/pages/_development.scss @@ -60,6 +60,17 @@ body.development { } } + .use-cases-separator { + margin: 3rem 0; + border-top: 1px solid var(--grey-3); + } + + .use-cases-subheading { + font-size: var(--font-size-heading-3); + margin-bottom: 2rem; + font-weight: 600; + } + .use-case-col { flex: 1; @@ -72,6 +83,13 @@ body.development { } } + p { + margin-top: 0.5rem; + margin-bottom: 1rem; + font-size: var(--font-size-heading-4); + color: var(--grey-6); + } + h4 { margin-bottom: 1rem; font-weight: 600; From 8ece7e128b0f5a35542c8b351e8bf186522ee0c0 Mon Sep 17 00:00:00 2001 From: Kevin Moore Date: Mon, 13 Jul 2026 22:26:00 +0000 Subject: [PATCH 5/7] fix(web): address PR review comments for landing page refresh Address feedback from abdallahshaban557 and gemini-code-assist. - Shortens hero title to "Pixel-Perfect Web Applications". - Removes "zero compromise" from hero copy. - Integrates developer tool and website examples into the "When to use" grid columns: - Mentions DevTools in "Rich Application UIs". - Mentions dart.dev, flutter.dev, and pub.dev in the Jaspr alternative bullet. - Removes the separate "How we build" grid and styling. - Changes the second pathway button text to "Get started". - Re-compiles styles and updates generated hash to "SpDqoGChHvZv". --- sites/www/lib/src/pages/web_page.dart | 73 +++++--------------- sites/www/lib/src/style_hash.dart | 2 +- sites/www/lib/styles/pages/_development.scss | 18 ----- 3 files changed, 17 insertions(+), 76 deletions(-) diff --git a/sites/www/lib/src/pages/web_page.dart b/sites/www/lib/src/pages/web_page.dart index 9a639f87014..1724286aa14 100644 --- a/sites/www/lib/src/pages/web_page.dart +++ b/sites/www/lib/src/pages/web_page.dart @@ -20,9 +20,9 @@ class WebPage extends StatelessComponent { Component build(BuildContext context) { return main_([ HeroSection( - title: 'High-Performance Web Applications, Rendered Pixel-Perfect.', + title: 'Pixel-Perfect Web Applications', text: - 'Bring your native mobile experience to the browser with zero compromise. ' + 'Bring your native mobile experience to the browser. ' 'Powered by WebAssembly for stable, 60fps performance. ' 'Best for SPAs, PWAs, and complex web tools.', media: img( @@ -76,8 +76,13 @@ class WebPage extends StatelessComponent { ]), li([ .text( - 'Rich Application UIs: Productivity, creative, or specialized business tools', + 'Rich Application UIs: Productivity, creative, or specialized business tools (for example, ', ), + a( + href: 'https://docs.flutter.dev/tools/devtools', + [.text('DevTools')], + ), + .text(')'), ]), li([ .text( @@ -109,59 +114,13 @@ class WebPage extends StatelessComponent { 'Alternative Option: If you want to build a traditional SEO-friendly page with Dart, consider ', ), a(href: 'https://jaspr.site/', [.text('Jaspr')]), - .text('.'), - ]), - ]), - ]), - ]), - const div(classes: 'use-cases-separator', []), - const h3( - classes: 'use-cases-subheading', - [.text('How we build our own web experiences')], - ), - div(classes: 'use-cases-grid', [ - div(classes: 'use-case-col', [ - h4([.text('Application Tooling')]), - p([ - .text('Example: '), - a( - href: 'https://docs.flutter.dev/tools/devtools', - [.text('Flutter & Dart DevTools')], - ), - .text('.'), - ]), - ul([ - li([ - .text('Complex, highly interactive developer tooling.'), - ]), - li([ - .text( - 'Built with Flutter Web (Canvas/Wasm) to leverage the same UI codebase and rich widgets.', - ), - ]), - ]), - ]), - div(classes: 'use-case-col', [ - h4([.text('Content & Websites')]), - p([ - .text('Examples: '), - a(href: 'https://dart.dev', [.text('dart.dev')]), - .text(', '), - a(href: 'https://flutter.dev', [.text('flutter.dev')]), - .text(', and '), - a(href: 'https://pub.dev', [.text('pub.dev')]), - .text('.'), - ]), - ul([ - li([ - .text( - 'Document-centric pages requiring fast initial load times and SEO.', - ), - ]), - li([ - .text( - 'Built with Jaspr (Dart\'s native static/SSR framework).', - ), + .text(' (which powers '), + a(href: 'https://dart.dev', [.text('dart.dev')]), + .text(', '), + a(href: 'https://flutter.dev', [.text('flutter.dev')]), + .text(', and '), + a(href: 'https://pub.dev', [.text('pub.dev')]), + .text(').'), ]), ]), ]), @@ -234,7 +193,7 @@ class WebPage extends StatelessComponent { 'https://docs.flutter.dev/get-started/flutter-for/web-devs', classes: 'btn quiet', [ - .text('Web developer guide'), + .text('Get started'), RawText(' '), Icon.linkArrow(), ], diff --git a/sites/www/lib/src/style_hash.dart b/sites/www/lib/src/style_hash.dart index fdcce7b679c..4ea91f96285 100644 --- a/sites/www/lib/src/style_hash.dart +++ b/sites/www/lib/src/style_hash.dart @@ -2,4 +2,4 @@ // dart format off /// The generated hash of the `main.css` file. -const generatedStylesHash = 'qNVkEeks2cg-'; +const generatedStylesHash = 'SpDqoGChHvZv'; diff --git a/sites/www/lib/styles/pages/_development.scss b/sites/www/lib/styles/pages/_development.scss index 83680e6eb8b..c1680e0fb95 100644 --- a/sites/www/lib/styles/pages/_development.scss +++ b/sites/www/lib/styles/pages/_development.scss @@ -60,17 +60,6 @@ body.development { } } - .use-cases-separator { - margin: 3rem 0; - border-top: 1px solid var(--grey-3); - } - - .use-cases-subheading { - font-size: var(--font-size-heading-3); - margin-bottom: 2rem; - font-weight: 600; - } - .use-case-col { flex: 1; @@ -83,13 +72,6 @@ body.development { } } - p { - margin-top: 0.5rem; - margin-bottom: 1rem; - font-size: var(--font-size-heading-4); - color: var(--grey-6); - } - h4 { margin-bottom: 1rem; font-weight: 600; From b7047a55b6992ef81d3fa9b20b2830488a5cd440 Mon Sep 17 00:00:00 2001 From: Kevin Moore Date: Mon, 13 Jul 2026 17:52:27 -0700 Subject: [PATCH 6/7] Update DevTools link text for clarity --- sites/www/lib/src/pages/web_page.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sites/www/lib/src/pages/web_page.dart b/sites/www/lib/src/pages/web_page.dart index 1724286aa14..2842d015dcf 100644 --- a/sites/www/lib/src/pages/web_page.dart +++ b/sites/www/lib/src/pages/web_page.dart @@ -80,7 +80,7 @@ class WebPage extends StatelessComponent { ), a( href: 'https://docs.flutter.dev/tools/devtools', - [.text('DevTools')], + [.text('Dart & Flutter DevTools')], ), .text(')'), ]), From 84ca1f35c148001f55e86ddfae124cfcc63b0bb8 Mon Sep 17 00:00:00 2001 From: Kevin Moore Date: Fri, 17 Jul 2026 17:22:37 +0000 Subject: [PATCH 7/7] refactor(web): address review feedback on Flutter Web landing page Address review feedback from @mit-mit on PR #13574: - Update Hero copy to reference native app experience. - Simplify feature copy to remove 'Almost all of'. - Apply sentence casing to section headings and leading bullet labels. - Ensure consistent punctuation across list items. - Extract Jaspr reference into a standalone architectural callout. --- sites/docs/lib/src/style_hash.dart | 2 +- sites/www/lib/src/pages/web_page.dart | 54 +++++++++++--------- sites/www/lib/src/style_hash.dart | 2 +- sites/www/lib/styles/pages/_development.scss | 15 ++++++ 4 files changed, 46 insertions(+), 27 deletions(-) diff --git a/sites/docs/lib/src/style_hash.dart b/sites/docs/lib/src/style_hash.dart index bd8e030c02b..cda8a35dcdf 100644 --- a/sites/docs/lib/src/style_hash.dart +++ b/sites/docs/lib/src/style_hash.dart @@ -2,4 +2,4 @@ // dart format off /// The generated hash of the `main.css` file. -const generatedStylesHash = ''; +const generatedStylesHash = 'MrDaamQhHwYP'; diff --git a/sites/www/lib/src/pages/web_page.dart b/sites/www/lib/src/pages/web_page.dart index 2842d015dcf..1b40a0657b6 100644 --- a/sites/www/lib/src/pages/web_page.dart +++ b/sites/www/lib/src/pages/web_page.dart @@ -22,7 +22,7 @@ class WebPage extends StatelessComponent { HeroSection( title: 'Pixel-Perfect Web Applications', text: - 'Bring your native mobile experience to the browser. ' + 'Bring your native app experience to the browser. ' 'Powered by WebAssembly for stable, 60fps performance. ' 'Best for SPAs, PWAs, and complex web tools.', media: img( @@ -35,7 +35,7 @@ class WebPage extends StatelessComponent { FeatureColumn( title: 'Same code', description: - 'Almost all of your code — your Dart business logic and your Flutter widgets — ' + 'Your code — your Dart business logic and your Flutter widgets — ' 'works identically across mobile, desktop, and the web, eliminating duplicate work.', image: context.asset('images/all-one-codebase.png'), ), @@ -62,69 +62,73 @@ class WebPage extends StatelessComponent { div(classes: 'container', [ div(classes: 'use-cases-grid', [ div(classes: 'use-case-col ideal', [ - h4([.text('Ideal Use Cases ✅')]), + h4([.text('Ideal use cases ✅')]), ul([ li([ .text( - 'Progressive Web Apps (PWAs) and Single Page Apps (SPAs)', + 'Progressive Web Apps (PWAs) and single-page apps (SPAs).', ), ]), li([ .text( - 'Code Sharing: Reusing UI and logic between mobile, desktop, and web apps', + 'Code sharing: Reusing UI and logic between mobile, desktop, and web apps.', ), ]), li([ .text( - 'Rich Application UIs: Productivity, creative, or specialized business tools (for example, ', + 'Rich application UIs: Productivity, creative, or specialized business tools (for example, ', ), a( href: 'https://docs.flutter.dev/tools/devtools', [.text('Dart & Flutter DevTools')], ), - .text(')'), + .text(').'), ]), li([ .text( - 'Highly Interactive Canvas Apps: Complex dashboards, games, or visualization tools', + 'Highly interactive canvas apps: Complex dashboards, games, or visualization tools.', ), ]), ]), ]), div(classes: 'use-case-col less-ideal', [ - h4([.text('Less Ideal Use Cases ⚠️')]), + h4([.text('Less ideal use cases ⚠️')]), ul([ li([ .text( - 'SEO-Heavy Sites: Static blogs, documentation, or public marketing pages', - ), - ]), - li([ - .text( - 'Simple Static Web Pages: Simple landing pages or sites with minimal interaction', + 'SEO-heavy sites: Static blogs, documentation, or public marketing pages.', ), ]), li([ .text( - 'Heavy Text Selection: Pages where standard DOM-based text-selection and reader mode are critical', + 'Simple static web pages: Simple landing pages or sites with minimal interaction.', ), ]), li([ .text( - 'Alternative Option: If you want to build a traditional SEO-friendly page with Dart, consider ', + 'Heavy text selection: Pages where standard DOM-based text-selection and reader mode are critical.', ), - a(href: 'https://jaspr.site/', [.text('Jaspr')]), - .text(' (which powers '), - a(href: 'https://dart.dev', [.text('dart.dev')]), - .text(', '), - a(href: 'https://flutter.dev', [.text('flutter.dev')]), - .text(', and '), - a(href: 'https://pub.dev', [.text('pub.dev')]), - .text(').'), ]), ]), ]), ]), + div(classes: 'use-cases-note', [ + p([ + .text( + 'Building content-centric or SEO-heavy sites? Consider ', + ), + a(href: 'https://jaspr.site/', [.text('Jaspr')]), + .text(' (which powers '), + a(href: 'https://dart.dev', [.text('dart.dev')]), + .text(', '), + a(href: 'https://flutter.dev', [.text('flutter.dev')]), + .text(', and '), + a(href: 'https://pub.dev', [.text('pub.dev')]), + .text( + ') or combining Jaspr with Flutter Web for a hybrid experience.', + ), + ]), + ]), ]), ]), section(id: 'feature-grid', classes: 'module', [ diff --git a/sites/www/lib/src/style_hash.dart b/sites/www/lib/src/style_hash.dart index 4ea91f96285..b7cdd3955f7 100644 --- a/sites/www/lib/src/style_hash.dart +++ b/sites/www/lib/src/style_hash.dart @@ -2,4 +2,4 @@ // dart format off /// The generated hash of the `main.css` file. -const generatedStylesHash = 'SpDqoGChHvZv'; +const generatedStylesHash = 'M_coaE-iMcTx'; diff --git a/sites/www/lib/styles/pages/_development.scss b/sites/www/lib/styles/pages/_development.scss index c1680e0fb95..e123811065c 100644 --- a/sites/www/lib/styles/pages/_development.scss +++ b/sites/www/lib/styles/pages/_development.scss @@ -90,6 +90,21 @@ body.development { } } + .use-cases-note { + margin-top: 2.5rem; + font-size: var(--font-size-heading-4); + line-height: 1.6; + + a { + color: var(--blue-6); + text-decoration: underline; + + &:hover { + color: var(--blue-7); + } + } + } + .cta-insert { h4 { color: white;