Update UI for frontend courses page

src/components/courses/CourseStep.astro

@@ -1,17 +1,21 @@
+---
+import { Swords } from 'lucide-react';
+---
+
 <div class='flex flex-col'>
-  <p
+  <div
     class='-ml-[27.6px] mb-3 flex items-center text-sm leading-none text-gray-400'
   >
     <span class='h-3 w-3 rounded-full bg-black'></span>
     <span class='h-[1px] w-[15px] bg-black'></span>
-    <span class='rounded-md border border-black bg-black px-3 py-2 text-white'>
+    <h2 class='rounded-md border border-black bg-black px-3 py-2 text-white'>
-      Learn the absolute basics i.e. HTML and CSS
+      Step 1 — Learn the absolute basics i.e. HTML and CSS
-    </span>
+    </h2>
-  </p>
+  </div>
 
   <p class='mb-2 text-sm text-gray-500'>
-    Purchase and watch one of the following <span
+    Purchase and watch one of the following <span class='font-medium text-black'
-      class='font-medium text-black'>premium courses</span
+      >premium courses</span
     >
   </p>
 
@@ -20,7 +24,7 @@
       <li>
         <a href='#' class='group font-medium text-gray-800 hover:text-black'>
           <span
-            class='mr-1.5 inline-block rounded bg-green-300 text-black px-1.5 py-0.5 text-xs uppercase no-underline'
+            class='mr-1.5 inline-block rounded bg-green-300 px-1.5 py-0.5 text-xs uppercase text-black no-underline'
           >
             Course
           </span>
@@ -33,7 +37,7 @@
       <li>
         <a href='#' class='group font-medium text-gray-800 hover:text-black'>
           <span
-              class='mr-1.5 inline-block rounded bg-green-300 text-black px-1.5 py-0.5 text-xs uppercase no-underline'
+            class='mr-1.5 inline-block rounded bg-green-300 px-1.5 py-0.5 text-xs uppercase text-black no-underline'
           >
             Course
           </span>
@@ -54,23 +58,26 @@
 
   <div class='mt-3 flex flex-col gap-1'>
     <a
-        href='/projects/task-tracker'
+      href='/projects/task-tracker'
-        class='flex items-center gap-3 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300'
+      class='flex items-center gap-2 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300'
     >
+      <Swords size='1.25em' className='text-gray-400' />
       Build a login page for a website.
     </a>
 
     <a
-        href='/projects/task-tracker'
+      href='/projects/task-tracker'
-        class='flex items-center gap-3 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300'
+      class='flex items-center gap-2 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300'
     >
+      <Swords size='1.25em' className='text-gray-400' />
       Create a landing page for an e-commerce website.
     </a>
 
     <a
-        href='/projects/task-tracker'
+      href='/projects/task-tracker'
-        class='flex items-center gap-3 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300'
+      class='flex items-center gap-2 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300'
     >
+      <Swords size='1.25em' className='text-gray-400' />
       Create a responsive website for a restaurant.
     </a>
   </div>

src/components/courses/Milestone.astro

@@ -0,0 +1,29 @@
+---
+import { Flag } from 'lucide-react';
+---
+
+<div class='flex flex-col'>
+  <p
+    class='-ml-[37px] mb-3 flex items-center text-sm leading-none text-gray-400'
+  >
+    <span
+      class='relative flex h-8 w-8 items-center justify-center rounded-full bg-green-600 text-white'
+    >
+      <Flag size='1.2em' />
+    </span>
+    <span class='h-[2px] w-[4.5px] bg-green-600'></span>
+    <span
+      class='rounded-md border border-green-600 bg-green-600 px-3 py-2 text-white'
+    >
+      You are ready to apply for jobs
+    </span>
+  </p>
+
+  <p class='mb-2 text-sm text-gray-500'>
+    At this point, you should have a solid understanding of basic front-end development concepts and be able to build simple websites. Start applying for jobs, while continuing to learn and improve your skills.
+  </p>
+
+  <p class='mb-2 text-sm text-gray-500'>
+    You might have a difficult time finding a job at this stage, but don't get discouraged. Keep applying and improving your skills. You can also consider contributing to open-source projects to gain experience and build your portfolio.
+  </p>
+</div>

src/data/projects/number-guessing-game.md

@@ -0,0 +1,76 @@
+---
+title: 'Number Guessing Game'
+description: 'Build a simple number guessing game to test your luck.'
+isNew: false
+sort: 4
+difficulty: 'beginner'
+nature: 'CLI'
+skills:
+  - 'Programming Language'
+  - 'CLI'
+  - 'Logic Building'
+seo:
+  title: 'Number Guessing Game Project Idea'
+  description: 'Build a simple number guessing game to test your luck.'
+  keywords:
+    - 'number guessing game'
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+You are required to build a simple number guessing game where the computer randomly selects a number and the user has to guess it. The user will be given a limited number of chances to guess the number. If the user guesses the number correctly, the game will end, and the user will win. Otherwise, the game will continue until the user runs out of chances.
+
+## Requirements
+
+It is a CLI-based game, so you need to use the command line to interact with the game. The game should work as follows:
+
+- When the game starts, it should display a welcome message along with the rules of the game.
+- The computer should randomly select a number between 1 and 100.
+- User should select the difficulty level (easy, medium, hard) which will determine the number of chances they get to guess the number.
+- The user should be able to enter their guess.
+- If the user's guess is correct, the game should display a congratulatory message along with the number of attempts it took to guess the number.
+- If the user's guess is incorrect, the game should display a message indicating whether the number is greater or less than the user's guess.
+- The game should end when the user guesses the correct number or runs out of chances.
+
+Here is a sample output of the game:
+
+```plaintext
+Welcome to the Number Guessing Game!
+I'm thinking of a number between 1 and 100.
+You have 5 chances to guess the correct number.
+
+Please select the difficulty level:
+1. Easy (10 chances)
+2. Medium (5 chances)
+3. Hard (3 chances)
+
+Enter your choice: 2
+
+Great! You have selected the Medium difficulty level.
+Let's start the game!
+
+Enter your guess: 50
+Incorrect! The number is less than 50.
+
+Enter your guess: 25
+Incorrect! The number is greater than 25.
+
+Enter your guess: 35
+Incorrect! The number is less than 35.
+
+Enter your guess: 30
+Congratulations! You guessed the correct number in 4 attempts.
+```
+
+To make the game more interesting, you can add the following features:
+
+- Allow the user to play multiple rounds of the game (i.e., keep playing until the user decides to quit). You can do this by asking the user if they want to play again after each round.
+- Add a timer to see how long it takes the user to guess the number.
+- Implement a hint system that provides clues to the user if they are stuck.
+- Keep track of the user's high score (i.e., the fewest number of attempts it took to guess the number under a specific difficulty level).

src/pages/[roadmapId]/courses.astro

@@ -21,7 +21,8 @@ import RoadmapNote from '../../components/RoadmapNote.astro';
 import { RoadmapTitleQuestion } from '../../components/RoadmapTitleQuestion';
 import ResourceProgressStats from '../../components/ResourceProgressStats.astro';
 import AstroIcon from '../../components/AstroIcon.astro';
-import CourseStep from "../../components/courses/CourseStep.astro";
+import CourseStep from '../../components/courses/CourseStep.astro';
+import Milestone from '../../components/courses/Milestone.astro';
 
 export async function getStaticPaths() {
   const roadmapIds = await getRoadmapIds();
@@ -93,14 +94,36 @@ const seoDescription = `Seeking ${nounTitle.toLowerCase()} courses to enhance yo
 
     <div class='container'>
       <div class='relative my-3 rounded-lg border bg-white px-12 py-8'>
-
         <span class='absolute inset-y-0 left-[26.3px] w-[1px] bg-black'></span>
 
+        <div class='mb-8 flex flex-col gap-4 text-sm text-gray-500 leading-normal'>
+          <p>
+            Frontend development is a vast field with a lot of tools and
+            technologies. We have the <a class="font-medium underline underline-offset-2 text-black" href="/frontend">frontend roadmap</a>
+            which is filled with a lot of <span class="font-medium text-black">free and good</span> resources to help you learn. But sometimes it helps to have a minimalistic list of courses
+            and project recommendations to help you get started.
+          </p>
+
+          <p class="bg-yellow-100 text-yellow-900 rounded-md p-2">
+            Below are some of the best courses (paid) and projects to help you learn frontend development. These are handpicked and are a great way to get started.
+          </p>
+
+          <p>
+            Please note that these are paid courses curated from external platforms. We earn a small commission if you purchase the course using the links below. This helps us maintain the website and keep it free for everyone.
+          </p>
+
+          <p>
+            If you are looking for free resources, you can check out the <a class="font-medium underline underline-offset-2 text-black" href="/frontend">frontend roadmap</a>. Also, we have a <a class="font-medium underline underline-offset-2 text-black" href="/frontend/projects">list of projects</a> that you can work on to enhance your skills.
+          </p>
+        </div>
+
         <!--Step content curator-->
         <CourseStep />
-        <div class="mt-8"></div>
+        <div class='mt-8'></div>
         <CourseStep />
-        <div class="mt-8"></div>
+        <div class='mt-8'></div>
+        <Milestone />
+        <div class='mt-8'></div>
         <CourseStep />
       </div>
     </div>