Update the community page to use cards (#6900)

Update the community page to look visually a bit more appealing by using cards.

---------

Co-authored-by: Parker Lougheed <[email protected]>

Author: mit-mit

src/content/community/index.md

@@ -3,81 +3,91 @@ title: Community and support
 shortTitle: Community
 description: Communities, mailing lists, and bug databases for the Dart project.
 group: https://groups.google.com/a/dartlang.org
+showBreadcrumbs: false
 ---
 
-Track the Dart project, get help, and talk with other Dart developers.
-
 We pledge to maintain an open and welcoming environment.
 To learn more about our community standards, check out
 our [code of conduct](/community/code-of-conduct).
 
-
-## Stay informed
-
-[Dart announce]({{page.group}}/d/forum/announce)
-: Low-traffic announcements of new releases, breaking changes,
-  and other important news. Recommended!
-
-[@dart.dev](https://bsky.app/profile/dart.dev)
-: Dart's official Bluesky account.
-
-[@dart_lang](https://twitter.com/dart_lang)
-: Dart's official X (Twitter) account.
-
-[Dart blog](https://blog.dart.dev)
-: The latest news and insights from a diverse group of Dart users.
-
-## Join the conversation
-
-Get answers and connect with Dart developers.
-
-#### Communities
-
-[StackOverflow](https://stackoverflow.com/tags/dart)
-: The best place for how-to questions.
-
-[The dart_community Discord](https://discord.gg/Qt6DgfAWWx)
-: Chat with and get help from other Dart developers.
-
-[Dart on Reddit](https://www.reddit.com/r/dartlang)
-: The subreddit for all things related to Dart.
-
-[It's All Widgets Flutter Forum](https://forum.itsallwidgets.com/)
-: Asynchronously discuss anything Flutter or Dart related.
-
-[Flutter communities]({{site.flutter}}/community#community-grid)
-: Discuss and get help with Flutter.
-
-#### Google Groups
-
-[General discussions]({{page.group}}/d/forum/misc)
-: Discuss miscellaneous Dart topics.
-
-[Dart analyzer]({{page.group}}/d/forum/analyzer-discuss)
-: Get help understanding the [Dart analyzer](/tools/dart-analyze).
-
-## Contribute
+## Stay informed {:style="font-size: 2rem"}
+
+<div class="card-grid">
+  <Card title="Dart announce" link="{{page.group}}/d/forum/announce">
+    Low-traffic announcements of new releases, breaking changes,
+    and other important news. Recommended!
+  </Card>
+  <Card title="Dart blog" link="https://blog.dart.dev">
+    The latest news and insights from a diverse group of Dart users.
+  </Card>
+  <Card title="@dart_lang" link="https://twitter.com/dart_lang">
+    Dart's official X (Twitter) account.
+  </Card>
+  <Card title="@dart.dev" link="https://bsky.app/profile/dart.dev">
+    Dart's official Bluesky account.
+  </Card>
+</div>
+
+## Contribute {:style="font-size: 2rem"}
 
 Dart is open source.
 Learn how to
 [contribute to the core SDK.]({{site.repo.dart.sdk}}/blob/main/CONTRIBUTING.md)
 
-[Dart GitHub repositories]({{site.repo.dart.org}}/)
-: Track new changes and contribute to various Dart projects.
-  * [Core SDK]({{site.repo.dart.sdk}}/)
-    ([issue tracker]({{site.repo.dart.sdk}}/issues/))
-  * [The Dart Language]({{site.repo.dart.lang}})
-    ([issue tracker]({{site.repo.dart.lang}}/issues))
-  * [This site]({{site.repo.this}}/)
-    ([issue tracker]({{site.repo.this}}/issues/))
-
-[Dart reviews]({{page.group}}/d/forum/reviews)
-: High-traffic list of all core SDK code reviews.
+<div class="card-grid">
+  <Card title="Dart GitHub repositories" link="{{site.repo.dart.org}}/">
+    Track new changes and contribute to various Dart projects.
+  </Card>
+  <Card title="Dart code reviews" link="{{page.group}}/d/forum/reviews">
+    High-traffic list of all core SDK code reviews.
+  </Card>
+  <Card title="Dart SDK repo" link="{{site.repo.dart.sdk}}">
+    The Dart SDK, including the VM, JS and Wasm compilers, analysis, 
+    core libraries, and more.
+  </Card>
+  <Card title="Dart language repo" link="{{site.repo.dart.lang}}">
+    The design of the Dart language.
+  </Card>
+  <Card title="Dart website repo" link="{{site.repo.this}}/">
+    The source for the Dart website, built with Jaspr.
+  </Card>
+  <Card title="DartPad" link="{{site.dartpad}}/">
+    An online Dart editor with support for console, web, and Flutter apps.
+  </Card>
+</div>
+
+
+## Join the conversation {:style="font-size: 2rem"}
 
-## Additional community resources
-
-Our wonderful community has provided these resources:
+Get answers and connect with Dart developers.
 
-* [Korean version of this site (한국어)](https://dart-ko.dev/)
-* [Simplified Chinese version of this site (简体中文版)](https://dart.cn)
-* [Traditional Chinese version of this site (正體中文版)](https://dart.tw.gh.miniasp.com/)
+### Communities
+
+<div class="card-grid">
+  <Card title="StackOverflow" link="https://stackoverflow.com/tags/dart">
+    The best place for how-to questions.
+  </Card>
+  <Card title="The dart_community Discord" link="https://discord.gg/Qt6DgfAWWx">
+    Chat with and get help from other Dart developers.
+  </Card>
+  <Card title="Dart on Reddit" link="https://www.reddit.com/r/dartlang">
+    The subreddit for all things related to Dart.
+  </Card>
+  <Card title="It's All Widgets Flutter Forum" link="https://forum.itsallwidgets.com/">
+    Asynchronously discuss anything Flutter or Dart related.
+  </Card>
+  <Card title="Flutter communities" link="{{site.flutter}}/community#community-grid">
+    Discuss and get help with Flutter.
+  </Card>
+</div>
+
+### Google Groups
+
+<div class="card-grid">
+  <Card title="General discussions" link="{{page.group}}/d/forum/misc">
+    Discuss miscellaneous Dart topics.
+  </Card>
+  <Card title="Dart analyzer" link="{{page.group}}/d/forum/analyzer-discuss>">
+    Get help understanding the Dart analyzer.
+  </Card>
+</div>

src/content/resources/whats-new.md

@@ -713,7 +713,7 @@ we made the following changes to this site:
 
 * Introduced the [Fetch data from the internet][] tutorial about using `package:http`.
 * Added a page on [Automated publishing of packages to pub.dev][].
-* Included links to two new site translations in our [community resources section][]:
+* Included links to two new site translations in our [community resources][] section:
   * [Korean version of this site (한국어)](https://dart-ko.dev/)
   * [Traditional Chinese version of this site (正體中文版)](https://dart.tw.gh.miniasp.com/)
 * Updated null safety content in preparation of Dart 3:
@@ -747,7 +747,7 @@ we made the following changes to this site:
 
 [Fetch data from the internet]: /tutorials/server/fetch-data
 [Automated publishing of packages to pub.dev]: /tools/pub/automated-publishing
-[community resources section]: /community#additional-community-resources
+[community resources]: /community
 [migration guide]: /null-safety/migration-guide
 [unsound null safety]: /null-safety/unsound-null-safety
 [Learning Dart as a Swift developer]: /resources/coming-from/swift-to-dart

src/data/site.yaml

@@ -29,6 +29,7 @@ news: https://news.dartlang.org
 announce: https://groups.google.com/a/dartlang.org/g/announce
 android-dev: https://developer.android.com
 apple-dev: https://developer.apple.com
+jaspr: https://jaspr.site/
 
 yt:
   watch: 'https://www.youtube.com/watch'