other styling needs

Client/src/components/Carousel/Carousel.scss

@@ -0,0 +1,54 @@
+.carousel-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    position: relative;
+  }
+
+  .carousel-container {
+    flex-grow: 1;
+    overflow: hidden;
+    position: relative;
+    max-width: 600px; 
+    margin: 0 50px;   
+  }
+
+  .carousel-track {
+    display: flex;
+    transition: transform 0.5s ease-in-out;
+  }
+
+  button {
+    background-color: #007BFF;
+    border: 2px solid #007BFF;
+    color: white;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background-color 0.3s ease, color 0.3s ease;
+
+    &:hover {
+      background-color: #0056b3;
+      color: white;
+    }
+
+
+    &.prev, &.next {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 10;
+      background-color: rgba(0, 123, 255, 0.7);
+    }
+
+    &.prev {
+      left: -50px;
+    }
+
+    &.next {
+      right: -50px; 
+    }
+  }
+

Client/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,96 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import './Carousel.scss';
+
+interface CarouselProps {
+    images: string[];
+    interval?: number;
+}
+
+export const Carousel: React.FC<CarouselProps> = ({ images, interval = 5000 }) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const carouselRef = useRef<HTMLDivElement>(null);
+    const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+    const slideTo = useCallback((index: number) => {
+        const newIndex = index < 0 ? images.length - 1 : index % images.length;
+        setCurrentIndex(newIndex);
+
+        const track = carouselRef.current?.querySelector('.carousel-track') as HTMLDivElement | null;
+        if (track) {
+            track.style.transform = `translateX(${-newIndex * 100}%)`;
+        }
+    }, [images.length]);
+
+    const prevSlide = useCallback(() => slideTo(currentIndex - 1), [currentIndex, slideTo]);
+    const nextSlide = useCallback(() => slideTo(currentIndex + 1), [currentIndex, slideTo]);
+
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'ArrowLeft') prevSlide();
+            if (event.key === 'ArrowRight') nextSlide();
+        };
+
+        const handleMouseEnter = () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+                intervalRef.current = null;
+            }
+        };
+
+        const handleMouseLeave = () => {
+            if (!intervalRef.current) {
+                intervalRef.current = setInterval(nextSlide, interval);
+            }
+        };
+
+        const carouselElement = carouselRef.current;
+
+        if (carouselElement) {
+            carouselElement.addEventListener('keydown', handleKeyDown);
+            carouselElement.addEventListener('mouseenter', handleMouseEnter);
+            carouselElement.addEventListener('mouseleave', handleMouseLeave);
+        }
+
+        document.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            if (intervalRef.current) clearInterval(intervalRef.current);
+            if (carouselElement) {
+                carouselElement.removeEventListener('keydown', handleKeyDown);
+                carouselElement.removeEventListener('mouseenter', handleMouseEnter);
+                carouselElement.removeEventListener('mouseleave', handleMouseLeave);
+            }
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [prevSlide, nextSlide, interval]);
+
+    useEffect(() => {
+        if (!intervalRef.current) {
+            intervalRef.current = setInterval(nextSlide, interval);
+        }
+        return () => {
+            if (intervalRef.current) {
+                clearInterval(intervalRef.current);
+            }
+        };
+    }, [interval, nextSlide]);
+
+    return (
+        <div className="carousel-wrapper">
+            <button className="prev" onClick={prevSlide}>prev</button>
+            <div className="carousel-container" ref={carouselRef} tabIndex={0}>
+                <div className="carousel-track">
+                    {images.map((src, index) => (
+                        <img
+                            key={index}
+                            src={src}
+                            alt={`Slide ${index + 1}`}
+                            style={{ width: '100%', transition: 'transform 0.5s ease-in-out' }}
+                        />
+                    ))}
+                </div>
+            </div>
+            <button className="next" onClick={nextSlide}>next</button>
+        </div>
+    );
+};

Client/src/components/Carousel/index.ts

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

Client/src/components/Layout/Layout.scss

@@ -3,6 +3,7 @@
   flex-direction: row;
   padding-top: 90px;
   height: 100%;
+
 }
 
 .main-container {
@@ -11,6 +12,7 @@
   margin-right: auto;
   display: flex;
   flex-direction: column;
+  line-height: 1.5em;
 }
 
 .main {
@@ -55,3 +57,8 @@
   padding: 8px 0;
   border-bottom: 1px solid #e0e0e0;
 }
+
+.contact-link {
+  // color: #333;
+  text-decoration:underline;
+}

Client/src/components/Typography/Typography.scss

@@ -6,4 +6,14 @@
 .h2 {
   font-size: 1.5em;
   margin-bottom: 20px;
+}
+
+.ul {
+  list-style-type: disc;
+  padding-left: 20px;
+}
+
+.li {
+  margin-bottom: 10px;
+  margin-left: 20px;
 }

Client/src/components/Typography/Typography.tsx

@@ -14,3 +14,15 @@ export function H2(
 ): React.ReactElement {
   return <h2 className="h2">{props.children}</h2>;
 }
+
+export function UL(
+  props: PropsWithChildren<TypographyProps>
+): React.ReactElement {
+  return <ul className="ul">{props.children}</ul>;
+}
+
+export function LI(
+  props: PropsWithChildren<TypographyProps>
+): React.ReactElement {
+  return <li className="li">{props.children}</li>;
+}

Client/src/screens/ContactUsScreen/ContactUsScreen.tsx

@@ -9,8 +9,20 @@ export function ContactUsScreen(): React.ReactElement {
   return (
     <div>
       <H1>Contact Us</H1>
+      <p>We're here to assist you every step 
+        of the way! Whether you have questions, 
+        need support, or simply want to share 
+        your thoughts, we encourage you to 
+        contact us. Your feedback is crucial, 
+        and we're eager to hear your ideas, 
+        suggestions, or just to chat about your 
+        gaming experiences. Reach out with 
+        confidence knowing your voice matters to 
+        us. We're not just listening; we're 
+        ready to engage and enhance your journey 
+        with us.</p>
       <div className="game-screen-margin-top">
-        <H2>Email: <a href="mailto:[email protected]">[email protected]</a></H2>
+        <H2>Email: <a className="contact-link" href="mailto:[email protected]">[email protected]</a></H2>
       </div>
     </div>
   );

Client/src/screens/HowToPlayScreen/HowToPlayScreen.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { H1 } from "../../components/Typography";
 import { H2 } from "../../components/Typography";
 import { usePageTracking } from "../../hooks/usePageTracking";
+import { Carousel } from "../../components/Carousel/Carousel";
 
 export function HowToPlayScreen(): React.ReactElement {
     usePageTracking("HowToPlayScreen");
@@ -12,17 +13,20 @@ export function HowToPlayScreen(): React.ReactElement {
             <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 
+                    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 
+                    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 className="game-screen-margin-top">
+                <Carousel images={["/game-guide-1.png", "/game-guide-2.png", "/game-guide-3.png", "/game-guide-4.png"]} />
+            </div>
         </div>
     );
 }

Client/src/screens/ResultScreen/ResultScreen.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from "react";
 import { H1 } from "../../components/Typography";
 import { H2 } from "../../components/Typography";
-
+import { UL } from "../../components/Typography";
+import { LI } from "../../components/Typography";
 import { AppContext } from "../../context/AppContext";
 import { usePageTracking } from "../../hooks/usePageTracking";
 import { IAppContext } from "../../models/IAppContext";
@@ -48,11 +49,15 @@ export function ResultScreen(): React.ReactElement {
         />
         <H1>Great work, {userName}!</H1>
         <H2>{summary}</H2>
-        <ul className="game-screen-margin-top">
-          {lessons.map((lesson, index) => (
-            <H2><li key={index}>{lesson}</li></H2>
-          ))}
-        </ul>
+        <div className="game-screen-margin-top">
+          <UL>
+            <H2>Here is a recap of lessons learned</H2>
+            {lessons.map((lesson, index) => (
+              <LI key={index}>{lesson}</LI>
+            ))}
+          </UL>
+        </div>
+
         <button
           onClick={() => {
             const link = document.createElement('a');