Carodriguez/about us page

Client/src/App.tsx

@@ -6,6 +6,9 @@ import { Route, Routes } from "react-router-dom";
 import { GameScreen } from "./screens/GameScreen";
 import { ResultScreen } from "./screens/ResultScreen";
 import { AdminScreen } from "./screens/AdminScreen/AdminScreen";
+import { AboutScreen } from "./screens/AboutScreen/AboutScreen";
+import { PartnersScreen } from "./screens/PartnersScreen/PartnersScreen";
+import { ContactUsScreen } from "./screens/ContactUsScreen/ContactUsScreen";
 
 function App() {
   return (
@@ -18,6 +21,9 @@ function App() {
           element={<ResultScreen />}
         />
         <Route path="/admin" element={<AdminScreen />} />
+        <Route path="/about" element={<AboutScreen />} />
+        <Route path="/partners" element={<PartnersScreen />} />
+        <Route path="/contact" element={<ContactUsScreen />} />
       </Routes>
     </Layout>
   );

Client/src/Pages.css

@@ -0,0 +1,186 @@
+.partners-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .title {
+    text-align: center;
+    color: #333;
+    font-size: 2.2rem;
+    margin-bottom: 30px;
+  }
+
+  .partners-list {
+    list-style-type: none;
+    padding: 0;
+  }
+
+  .partner-item {
+    background-color: #fff;
+    margin-bottom: 20px;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .partner-title {
+    color: #005a9c;
+    margin-bottom: 10px;
+    font-size: 1.5rem;
+  }
+
+  .partner-description {
+    color: #555;
+    font-size: 1rem;
+    line-height: 1.6;
+  }
+  .about-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f4f7fa;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  .about-title {
+    text-align: center;
+    color: #2c3e50;
+    font-size: 2.5rem;
+    margin-bottom: 20px;
+  }
+
+  .about-section {
+    margin-bottom: 40px;
+  }
+
+  .section-title {
+    color: #005a9c;
+    font-size: 1.8rem;
+    margin-bottom: 10px;
+  }
+
+  .section-description {
+    color: #333;
+    line-height: 1.6;
+    font-size: 1.1rem;
+  }
+
+  .team-section {
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .team-list {
+    list-style-type: none;
+    padding: 0;
+  }
+
+  .team-member {
+    font-size: 1.2rem;
+    padding: 8px 0;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .team-member:last-child {
+    border-bottom: none;
+  }
+
+  .team-member strong {
+    font-weight: bold;
+    color: #005a9c; /* Adjust color as needed */
+  }
+
+  .team-description {
+    font-weight: normal; /* Ensure descriptions are not bold */
+    color: #555; /* Slightly muted color for descriptions */
+  }
+
+  .contact-container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .contact-title {
+    text-align: center;
+    color: #2c3e50;
+    font-size: 2.5rem;
+    margin-bottom: 20px;
+  }
+
+  .contact-info {
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  .contact-info h2 {
+    color: #005a9c;
+    font-size: 1.8rem;
+    margin-bottom: 15px;
+  }
+
+  .contact-info p {
+    font-size: 1.1rem;
+    color: #333;
+    line-height: 1.6;
+  }
+
+  .contact-info a {
+    color: #005a9c;
+    text-decoration: none;
+  }
+
+  .contact-info a:hover {
+    text-decoration: underline;
+  }
+
+
+  @media (max-width: 768px) {
+    .partners-container {
+      padding: 10px;
+    }
+
+    .partner-item {
+      padding: 15px;
+    }
+
+    .title {
+      font-size: 1.8rem;
+    }
+
+    .partner-title {
+      font-size: 1.3rem;
+    }
+
+    .partner-description {
+      font-size: 0.95rem;
+    }
+    .about-container {
+      padding: 15px;
+    }
+
+    .about-title {
+      font-size: 2rem;
+    }
+
+    .section-title {
+      font-size: 1.5rem;
+    }
+
+    .team-member {
+      font-size: 1.1rem;
+    }
+  }
+

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

@@ -46,17 +46,17 @@ export function Header(): React.ReactElement {
             </Link>
           </li>
           <li className="nav-list-item">
-            <Link to="/" title="Go to CareerCraft About Us page">
+            <Link to="/about" title="Go to CareerCraft About Us page">
               About Us
             </Link>
           </li>
           <li className="nav-list-item">
-            <Link to="/" title="Go to Partners page">
+            <Link to="/partners" title="Go to Partners page">
               Partners
             </Link>
           </li>
           <li className="nav-list-item">
-            <Link to="/" title="Go to CareerCraft Contact Us page">
+            <Link to="/contact" title="Go to CareerCraft Contact Us page">
               Contact Us
             </Link>
           </li>

Client/src/screens/AboutScreen/AboutScreen.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { usePrompts } from "../../hooks/usePrompts";
+import { H1, H2 } from "../../components/Typography";
+import { usePageTracking } from "../../hooks/usePageTracking";
+import "../../Pages.css"; // Importing a new CSS file for custom styling
+
+export function AboutScreen(): React.ReactElement {
+  usePageTracking("AboutScreen");
+    usePrompts();
+
+  return (
+    <div className="about-container">
+      <H1>About Us</H1>
+
+      <section className="about-section">
+        <H2>Mission</H2>
+        <p className="section-description">
+          To empower people with disabilities and the nonprogits that serve them by providing technology, resources and tools that open the door
+          to career exploration and support the journey towards meaningful employment.
+        </p>
+      </section>
+
+      <section className="about-section">
+        <H2>Gamify AI</H2>
+        <p className="section-description">
+          We partnered with NW Works to build and app that provides a safe, low-risk environment for people with disabilities
+          to explore career options and gain valuable skillsets to support their mission to empower individuals with disabilities
+          in securing and sustaining meaningful employment.
+        </p>
+      </section>
+
+      <section className="team-section">
+        <H2>The Team</H2>
+        <ul className="team-list">
+        <li className="team-member">
+            <strong>Augustus Willman</strong> - <span className="team-description">Accessibility</span>
+          </li>
+          <li className="team-member">
+            <strong>Won Song</strong> - <span className="team-description">Front End Development</span>
+          </li>
+          <li className="team-member">
+            <strong>David Berquist</strong> - <span className="team-description">AI Development</span>
+          </li>
+          <li className="team-member">
+            <strong>Ryan Pethel</strong> - <span className="team-description">Front End Development</span>
+          </li>
+          <li className="team-member">
+            <strong>Giovanni Ferioli</strong> - <span className="team-description">Back End Development</span>
+          </li>
+          <li className="team-member">
+            <strong>Carlos Rodriguez</strong> - <span className="team-description">Back End Development</span>
+          </li>
+          <li className="team-member">
+            <strong>Michelle Jones</strong> - <span className="team-description">Project Support</span>
+          </li>
+          <li className="team-member">
+            <strong>Teresa Wong</strong> - <span className="team-description">Accessibility</span>
+          </li>
+          <li className="team-member">
+            <strong>Tricia McIntosh</strong> - <span className="team-description">Project Support</span>
+          </li>
+          <li className="team-member">
+            <strong>Balinda Moreland</strong> - <span className="team-description">Product Advisor</span>
+          </li>
+          <li className="team-member">
+            <strong>Ryan Johnson</strong> - <span className="team-description">General Development</span>
+          </li>
+        </ul>
+
+
+
+      </section>
+
+    </div>
+  );
+}

Client/src/screens/AboutScreen/index.ts

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

Client/src/screens/ContactUsScreen/ContactUsScreen.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { usePrompts } from "../../hooks/usePrompts";
+import { H1 } from "../../components/Typography";
+import { usePageTracking } from "../../hooks/usePageTracking";
+import "../../Pages.css"; // Importing a new CSS file for custom styling
+
+export function ContactUsScreen(): React.ReactElement {
+  usePageTracking("ContactUsScreen");
+    usePrompts();
+
+  return (
+    <div className="contact-container">
+      <H1>Contact Us</H1>
+
+      <div className="contact-info">
+        <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
+        <p>Phone: <a href="tel:540-667-0809">540-667-0809</a></p>
+        <p>Address: 3085 Shawnee Drive, Winchester, VA 22601</p>
+      </div>
+
+    </div>
+  );
+}
+

Client/src/screens/ContactUsScreen/index.ts

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

Client/src/screens/PartnersScreen/PartnersScreen.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { usePrompts } from "../../hooks/usePrompts";
+import { H1, H2 } from "../../components/Typography";
+import { usePageTracking } from "../../hooks/usePageTracking";
+import "../../Pages.css"; // Importing a new CSS file for custom styling
+
+export function PartnersScreen(): React.ReactElement {
+  usePageTracking("PartnersScreen");
+    usePrompts();
+
+  return (
+    <>
+    <H1>Our Partners</H1>
+      <div className="partners-container">
+        <ul className="partners-list">
+          <li className="partner-item">
+            <H2>NW Works</H2>
+            <p className="partner-description">
+              Since its founding in 1970, NW Works has been a support system,
+              helping adults with disabilities and individuals encountering
+              barriers to employment develop skills and find stable, rewarding
+              jobs.
+            </p>
+          </li>
+          <li className="partner-item">
+            <H2>Microsoft</H2>
+            <p className="partner-description">
+              The Hackathon is an annual event at Microsoft where employees
+              collaborate on innovative projects that solve real-world problems.
+            </p>
+          </li>
+        </ul>
+      </div>
+
+    </>
+  );
+}

Client/src/screens/PartnersScreen/index.ts

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