Merge pull request #60 from microsoft/anpethel/howToPlay

creating How to play screen

Client/src/App.tsx

@@ -9,13 +9,15 @@ import { AdminScreen } from "./screens/AdminScreen/AdminScreen";
 import { AboutScreen } from "./screens/AboutScreen/AboutScreen";
 import { PartnersScreen } from "./screens/PartnersScreen/PartnersScreen";
 import { ContactUsScreen } from "./screens/ContactUsScreen/ContactUsScreen";
+import { HowToPlayScreen } from "./screens/HowToPlayScreen";
 
 function App() {
   return (
     <Layout>
       <Routes>
         <Route path="/" element={<StartScreen />} />
         <Route path="/career-game" element={<GameScreen />} />
+        <Route path="/howToPlay" element={<HowToPlayScreen />} />
         <Route
           path="/career-game/results"
           element={<ResultScreen />}

Client/src/components/Layout/Header/Header.tsx

@@ -45,6 +45,11 @@ export function Header(): React.ReactElement {
               Career game
             </Link>
           </li>
+          <li className="nav-list-item">
+            <Link to="/howToPlay" title="How to play">
+              How to play
+            </Link>
+          </li>
           <li className="nav-list-item">
             <Link to="/about" title="Go to CareerCraft About Us page">
               About Us

Client/src/screens/HowToPlayScreen/HowToPlayScreen.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { H1 } from "../../components/Typography";
+import { H2 } from "../../components/Typography";
+import { usePageTracking } from "../../hooks/usePageTracking";
+
+export function HowToPlayScreen(): React.ReactElement {
+    usePageTracking("HowToPlayScreen");
+
+    return (
+        <div>
+            <H1>How To Play</H1>
+            <div className="game-screen-margin-top">
+                <H2>Guidance</H2>
+                <p>
+                    This game helps you explore career options and 
+                    gain valuable skillsets along the way. To get 
+                    started, please enter your first name, a career
+                    that interests you how many rounds you want to 
+                    play. Each round will consist of a Scenario and 
+                    3 Options for you to choose from that will lead 
+                    to the next Scenario. After all the rounds finish, 
+                    we will recap the learnings.  Have fun and happy 
+                    learning! Look for a surprise at the end as well.
+                </p>
+            </div>
+        </div>
+    );
+}

Client/src/screens/HowToPlayScreen/index.ts

@@ -0,0 +1 @@
+export * from "./HowToPlayScreen";