Move new game and leaderboard to header bar

frontend/src/App.css

@@ -9,7 +9,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-
+  background: linear-gradient(to bottom right, #f5f5dc, #e6e0c3);
+  height: 130vh;
   margin: 0;
   text-align: center;
 }

frontend/src/components/AboutUs.css

@@ -0,0 +1,95 @@
+/* AboutUs.css - Styling to match plant cards */
+.about-us-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 2rem;
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Style the team cards to match plant cards */
+.team-card {
+  position: relative;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px var(--shadow-color, rgba(0, 0, 0, 0.2));
+  background-color: var(--card-bg, #faf3d3);
+  padding: 1rem;
+  display: grid;
+  grid-template-rows: auto auto 1fr auto auto auto auto auto;
+  transition: transform 0.3s ease;
+  border: 2px solid var(--border-color, #67733e);
+  overflow: hidden;
+}
+
+.team-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 6px 12px var(--shadow-color, rgba(0, 0, 0, 0.3));
+}
+
+/* Common name styling */
+.team-card p[data-testid="common-name"] {
+  font-family: "WonderLight", sans-serif;
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-align: center;
+  margin: 0.5rem 0;
+  color: var(--text-color, #333);
+}
+
+/* Scientific name/GitHub styling */
+.team-card p[data-testid="scientific-name"] {
+  font-style: italic;
+  font-size: 0.9rem;
+  text-align: center;
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+  color: var(--text-color, #555);
+}
+
+.team-card p[data-testid="scientific-name"] a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.team-card p[data-testid="scientific-name"] a:hover {
+  color: var(--accent-color, #67733e);
+  text-decoration: underline;
+}
+
+/* Image styling */
+.team-card img {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  border-radius: 6px;
+  margin-bottom: 1rem;
+  border: 1px solid var(--border-color, #67733e);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .about-us-container {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 1.5rem;
+  }
+
+  .team-card img {
+    height: 150px;
+  }
+}
+
+@media (max-width: 480px) {
+  .about-us-container {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 1rem;
+  }
+
+  .team-card {
+    padding: 0.75rem;
+  }
+
+  .team-card img {
+    height: 120px;
+  }
+}

frontend/src/components/AboutUs.jsx

@@ -0,0 +1,26 @@
+// AboutUs.jsx
+import "./AboutUs.css";
+
+const AboutUs = ({ name, github, picture }) => {
+  return (
+    <article className="team-card">
+      <p data-testid="common-name">{name}</p>
+      <p data-testid="scientific-name">
+        <a href={github} target="_blank" rel="noopener noreferrer">
+          {github.replace("https://github.com/", "@")}
+        </a>
+      </p>
+      <img
+        data-testid="image-url"
+        src={picture}
+        alt={`${name}'s profile`}
+        onError={(e) => {
+          e.target.src = "/path/to/fallback-image.png";
+          e.target.onerror = null;
+        }}
+      />
+    </article>
+  );
+};
+
+export default AboutUs;

frontend/src/components/AboutUsContainer.jsx

@@ -0,0 +1,51 @@
+// AboutUsContainer.jsx - Optional update if needed
+import AboutUs from "./AboutUs";
+import "./AboutUs.css";
+
+const AboutUsContainer = () => {
+  const us = [
+    {
+      name: "Abbie Finlayson",
+      github: "https://github.com/abbiefinlayson1",
+      picture: "https://avatars.githubusercontent.com/u/190519928?v=4",
+    },
+    {
+      name: "Alec McGill",
+      github: "https://github.com/AMcGill3",
+      picture:
+        "https://ca.slack-edge.com/T03ALA7H4-U0892FD1SH2-86ad26fdcf23-512",
+    },
+    {
+      name: "Imogen Lovell",
+      github: "https://github.com/I-Lovell",
+      picture:
+        "https://ca.slack-edge.com/T03ALA7H4-U088ZSY6ZC3-cfaafb34b226-512",
+    },
+    {
+      name: "Jack Misner",
+      github: "https://github.com/jackmisner",
+      picture: "https://avatars.githubusercontent.com/u/189114969?v=4",
+    },
+    {
+      name: "Luke Howarth",
+      github: "https://github.com/LukeHoweth",
+      picture: "https://avatars.githubusercontent.com/u/53517302?v=4",
+    },
+    {
+      name: "Michal Podolak",
+      github: "https://github.com/Michal-P-1",
+      picture:
+        "https://ca.slack-edge.com/T03ALA7H4-U08188F7N01-a99979029cde-512",
+    },
+  ];
+
+  return (
+    <div className="about-us-container" data-testid="team-cards-container">
+      {us.map(({ name, github, picture }) => (
+        <AboutUs key={name} name={name} github={github} picture={picture} />
+      ))}
+    </div>
+  );
+};
+
+export default AboutUsContainer;

frontend/src/components/Header/Header.jsx

@@ -46,6 +46,9 @@ const Header = () => {
           <img src={BotaniclashLogo} alt="BotaniClash Logo" />
         </Link>
         <nav className="nav">
+          <Link to="/leaderboard" className="nav-link">
+            Leaderboard
+          </Link>
           {!token && (
             <Link to="/signup" className="nav-link">
               Signup
@@ -57,6 +60,11 @@ const Header = () => {
             </Link>
           )}
 
+          {token && (
+            <Link to="/setupgame" className="homepage-nav-link">
+              Play game
+            </Link>
+          )}
           {token && (
             <Link to="/" onClick={handleLogout} className="nav-link">
               Logout

frontend/src/pages/Home/HomePage.jsx

@@ -1,50 +1,11 @@
-import { Link } from "react-router-dom";
-import { useEffect, useState } from "react";
 import "./HomePage.css";
-
+import AboutUsContainer from "../../components/AboutUsContainer";
 export const HomePage = () => {
-  const [token, setToken] = useState();
-
-  useEffect(() => {
-    // Initial check
-    setToken(localStorage.getItem("token"));
-
-    // Create a function to handle storage changes
-    const handleStorageChange = () => {
-      setToken(localStorage.getItem("token"));
-    };
-
-    // Add event listener
-    window.addEventListener("storage", handleStorageChange);
-
-    // Create a custom event listener for login/logout actions
-    const handleAuthChange = () => {
-      setToken(localStorage.getItem("token"));
-    };
-
-    window.addEventListener("authChange", handleAuthChange);
-
-    // Cleanup
-    return () => {
-      window.removeEventListener("storage", handleStorageChange);
-      window.removeEventListener("authChange", handleAuthChange);
-    };
-  }, []);
-
   return (
     <div className="home">
       <h1>Welcome to BotaniClash!</h1>
-      <div className="homepage-nav">
-        {token && (
-          <Link to="/setupgame" className="homepage-nav-link">
-            Play game
-          </Link>
-        )}
-
-        <Link to="/leaderboard" className="homepage-nav-link">
-          Leaderboard
-        </Link>
-      </div>
+      <h2>A competetive plant-based card game!</h2>
+      <AboutUsContainer />
     </div>
   );
 };