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