docs(docs): improve index.mdx and write checkout

docs/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.wordWrapColumn": 120
+}

docs/src/content/docs/guides/checkout-answer.md

@@ -4,3 +4,39 @@ description: Guide to checkout the answer of someone else
 sidebar:
   order: 3
 ---
+
+All Angular Challenges answers will be presented in the form of a Pull Request (PR). To view and follow them, navigate through the **Files Changes** page on GitHub. However, understanding and following this process may not be straightforward if you are not familiar with the interface. In many cases, you may prefer to check out the branch and review the solution in your preferred IDE.
+
+This guide has been created to help you in archieving this.
+
+## Checkout a PR locally from someone else
+
+### Sync your repository
+
+First you need to synchronize your fork to ensure it is up to date with the forked repository.
+
+This can be archieved by clicking the **Sync fork** button on the main page of your fork.
+
+![Sync project header](../../../assets/fork-sync.png)
+
+The image above shows that my branch is behind of the main branch by 8 commits, and I need to synchronize it to be up to date.
+
+![Sync project update modal](../../../assets/sync-fork-update.png)
+
+### Checkout locally
+
+Navigate to the PR you wish to check out locally and obtain its ID. You will find it in the title of the PR (as shown below).
+
+![PR header](../../../assets/PR-header.png)
+
+Next, go to any terminal within your project directory and run the following command:
+
+```bash
+gh pr checkout <ID>
+```
+
+If you don't remember the command, click on the Code button on the right side of the header, and you can easily copy/paste the command.
+
+![PR code modal](../../../assets/PR-code-btn-modal.png)
+
+🔥 You can now navigate through the solution locally and serve it to test it. 🔥

docs/src/content/docs/index.mdx

@@ -19,27 +19,32 @@ hero:
 import { Card, CardGrid } from '@astrojs/starlight/components';
 
 <CardGrid>
-  <Card title="More than 30 challenges">
-    This repository gather more than 30 challenges about Angular, Nx, Ngrx,
-    Rxjs, Ngrx about real life issues or specific feature to level up your game.
+<Card title="More than 30 Challenges">
+    This repository gathers over 30 challenges related to <b>Angular</b>, <b>Nx</b>, <b>Ngrx</b>, <b>RxJS</b>, and <b>Ngrx</b>. 
+    These challenges revolve around real-life issues or specific features to elevate your skills.
 </Card>
-  <Card title="Become an OSS maintainer">
-    One goal of this repository is to break the barrier to OSS. By answering
-    challenges, you will learn how to start contributing to any other Open
-    Source Project.
+
+<Card title="Become an OSS Maintainer">
+  One of the goals of this repository is to <b>lower the barrier</b> to entry
+  for Open Source Software (OSS). By engaging with these challenges, you will
+  learn how to start contributing to any other Open Source Project.
 </Card>
-  <Card title="Learn alongside other">
-    It's always hard to learn and practise a new framework. This set of
-    challenges will give your real use cases to practise what you have been
-    learning and anybody can comment or help you out. Learning alone is great,
-    but learning alongside other is way better.
+
+<Card title="Learn Alongside Others">
+  Learning and practicing a new framework is always challenging. This set of
+  challenges provides real-world use cases to apply what you've been learning.
+  Anyone can comment or offer assistance.
+  <b>
+    Learning alone is great, but learning alongside others will get you farer.
+  </b>
 </Card>
+
 <Card title="Contribute">
-    You have an issue, an interesing bug, an idea. Don't waste any time and
-    create your own challenges.
+  Do you have an issue, an interesting bug, or an idea? Don't hesitate;{' '}
+  <b>create your own challenges</b> without wasting any time.
 </Card>
-  <Card title="Prepare yourself for interview">
-    Doing those challenges will get you ready for any technical challenges for a
-    frontend role.
+
+<Card title="Prepare Yourself for Interviews">
+    Completing these challenges will prepare you for any technical challenges you may encounter in a frontend role during interviews.
 </Card>
 </CardGrid>

docs/src/styles/custom-css.css

@@ -22,3 +22,7 @@
 a.primary {
   color: #fff !important;
 }
+
+b {
+  color: var(--sl-color-accent-high);
+}