[tutorial] Improve "next steps" at end of tutorial (#8507)

Co-authored-by: HiDeoo <[email protected]> Co-authored-by: Sergio A. Arevalo Soria <[email protected]> Co-authored-by: Luiz Ferraz <[email protected]> Co-authored-by: Bryce Russell <[email protected]> Co-authored-by: Atharva <[email protected]>
withastro · Jun 13, 2024 · b5dbd53 · b5dbd53
1 parent 9e4bb15
commit b5dbd53
Showing 1 changed file with 27 additions and 8 deletions.
diff --git a/src/content/docs/en/tutorial/6-islands/3.mdx b/src/content/docs/en/tutorial/6-islands/3.mdx
@@ -14,6 +14,7 @@ import CompletionConfetti from '~/components/tutorial/CompletionConfetti.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
 import Button from '~/components/Button.astro';
 
+import { CardGrid, LinkCard } from '@astrojs/starlight/components';
 
 There's one more edit to make...
 
@@ -56,14 +57,6 @@ Welcome to the universe, astronaut. 👩🏼‍🚀👨🏿‍🚀🧑‍🚀
 </Checklist>
 </Box>
 
-## Next Steps
-
-Continue with either of our tutorial extensions to [add view transitions to this project](/en/tutorials/add-view-transitions/) or to [add a content collection to manage your blog posts](/en/tutorials/add-content-collections/)
-
-[Start a new Astro project](/en/getting-started/)
-
-[Join us on Discord](https://astro.build/chat)
-
 <CompletionConfetti />
 
 ## Share your achievement!
@@ -74,3 +67,29 @@ Congratulations on completing the Astro blog tutorial! Share your achievement wi
   <Button link='https://twitter.com/intent/tweet?text=Just%20finished%20learning%20how%20to%20build%20my%20first%20Astro%20blog!%20Check%20it%20out%20at%20https://docs.astro.build/%0Avia%20%40astrodotbuild'>Share on Twitter</Button>
   <Button link='https://www.reddit.com/submit?url=https://docs.astro.build/&title=Just%20finished%20learning%20how%20to%20build%20my%20first%20Astro%20blog!'>Share on Reddit</Button>
 </div>
+
+## Next Steps
+
+You can enhance this project's final code with one of our tutorial extensions, or start your next Astro project!
+<CardGrid>
+  <LinkCard
+    title="Extend with content collections"
+    description="Refactor the tutorial code to manage your blog posts with content collections."
+    href="/en/tutorials/add-content-collections/"
+  />
+   <LinkCard
+    title="Extend with view transitions"
+    description="Add view transitions to the tutorial code to customize page navigation."
+    href="/en/tutorials/add-view-transitions/"
+  />
+  <LinkCard
+    title="Start a new Astro Project"
+    description="Begin a new empty project, or use an existing Astro theme template."
+    href="/en/install-and-setup/"
+  />
+  <LinkCard
+    title="Join us on Discord"
+    description="Connect with our community to ask questions, share your work, and get involved with the project!"
+    href="https://astro.build/chat"
+  />
+</CardGrid>