Added new games to the resources page

src/components/GamesSection/GameSection.jsx

@@ -1,22 +1,67 @@
 import './index.less';
 import AnimatedSquaresBackground from 'components/AnimatedSquaresBackground/AnimatedSquaresBackground';
 
-const GamesSection = ({ className = '' }) => {
-    return (
-        <section className={`games-section ${className}`}>
-            <h1 className="games-section__header">Resources</h1>
-            <div className="games-container">
-                <a href="https://mtg.quantsoc.org" className="game-box large mock-trading-card">
-                    Mock Trading Game
-                </a>
-                <a href="/mathsprint" className="game-box small mathsprint-card">
-                    MathSprint
-                    {/* Animated background for Mathsprint, just ignore this stuff */}
-                    <AnimatedSquaresBackground />
-                </a>
-            </div>
-        </section>
-    );
-};
+const games = [
+  {
+    title: 'Mock Trading Game',
+    description: '',
+    path: 'https://mtg.quantsoc.org',
+    size: 'large',
+    className: 'mock-trading-card',
+    comingSoon: false,
+  },
+  {
+    title: 'MathSprint',
+    description: 'A fast paced calculation game',
+    path: '/mathsprint',
+    size: 'small',
+    className: 'mathsprint-card',
+    comingSoon: false,
+    background: <AnimatedSquaresBackground />,
+  },
+  {
+    title: 'Sum Game',
+    description: 'Coming soon…',
+    path: '#',
+    size: 'small',
+    className: 'sum-game-card',
+    comingSoon: true,
+  },
+  {
+    title: 'Sequence Game',
+    description: 'Coming soon…',
+    path: '#',
+    size: 'small',
+    className: 'sequence-game-card',
+    comingSoon: true,
+  },
+  {
+    title: 'Pendominoes Game',
+    description: 'Coming soon…',
+    path: '#',
+    size: 'small',
+    className: 'pendominoes-game-card',
+    comingSoon: true,
+  },
+];
+
+const GamesSection = ({ className = '' }) => (
+  <section className={`games-section ${className}`}>
+    <h1 className="games-section__header">Resources</h1>
+    <div className="games-container">
+      {games.map(({ title, description, path, size, className: cardClass, comingSoon, background }) => (
+        <a
+          key={title}
+          href={path}
+          className={`game-box ${size} ${cardClass} ${comingSoon ? 'coming-soon' : ''}`}
+        >
+          <div className="game-box__title">{title}</div>
+          {description && <div className="game-box__desc">{description}</div>}
+          {background}
+        </a>
+      ))}
+    </div>
+  </section>
+);
 
 export default GamesSection;

src/components/GamesSection/index.less

@@ -1,98 +1,86 @@
 @import '../../styles/constants.less';
 
 .games-container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-
+    display: grid;
+    /* 3 “small” units per row */
+    grid-template-columns: repeat(3, 1fr);
+    /* gap between columns (and rows) */
+    gap: 20px;
 }
 
 .games-section__header {
     margin-bottom: 1rem;
 }
 
+/* no longer needed, but you can keep if used elsewhere */
 .row {
-    display: flex;
-    width: 100%;
-    flex-wrap: wrap;
 }
 
+/* base card styles */
 .game-box {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
+
+    /* spacing is handled by the grid’s `gap` */
+    margin: 0;
+
     color: white;
-    margin: 10px;
     border-radius: 15px;
-    height: 150px;
-    flex: 1 1 100%;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-    margin-top: 5px;
-    height: 250px;
     text-align: center;
     cursor: pointer;
     text-decoration: none;
     font-size: 30px;
-    transition: font-size 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease-out; /* Add this line for transitions */
+    transition:
+        font-size 0.3s ease,
+        box-shadow 0.3s ease,
+        transform 0.3s ease-out;
     overflow: hidden;
-    position: relative; /* Add this line to position .area relative to .game-box */
+    position: relative;
+    height: 200px;
 
     &:hover {
-        box-shadow: inset 0 0 20px @quantsoc-primary, 0 0 20px @quantsoc-primary;
+        box-shadow:
+            inset 0 0 20px @quantsoc-primary,
+            0 0 20px @quantsoc-primary;
         font-size: 40px;
         transform: scale(1.03);
     }
 }
 
-.large {
-    flex: 3 1 50%;
-    background-color: #4CAF50;
-}
-
-.small {
-    flex: 1 1 25%;
-    background-color: #2196F3;
-}
-
-.row:nth-child(even) .large {
-    width: 30%;
+/* only controls grid-span now, no colours */
+.game-box.small {
+    grid-column: span 1;
 }
 
-.row:nth-child(even) .small {
-    width: 60%;
+.game-box.large {
+    grid-column: span 2;
 }
 
 @media (max-width: 768px) {
-    .large, .small {
-        flex: 1 1 100%;
+    .games-container {
+        grid-template-columns: 1fr;
+    }
+    .game-box {
         width: 100%;
         padding: 20%;
     }
-
-    .games-container, .row {
-        flex-direction: column;
-    }
 }
 
-
+/* Card-specific colours/backgrounds */
 .mock-trading-card {
-    // background: linear-gradient(130deg, @quantsoc-accent,@quantsoc-secondary);
-    background: url('../../assets/quantsoc-graphics/new-mock-trading-optimised.svg');
-
-    background: 
-    url('https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmxoOWZ1ejlnYmYwYnpsN3Z3ajdhNTNoNnl2N3B4MXpjNmxzdDQwdiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/d1Gvd3wrtBcaMkhO/giphy.gif'), 
-    url("https://i.gifer.com/KM74.gif"), 
-    linear-gradient(145deg, @mid-purple ,@lightest-purple);
-
-
+    background:
+        url('../../assets/quantsoc-graphics/new-mock-trading-optimised.svg'),
+        url('https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmxoOWZ1ejlnYmYwYnpsN3Z3ajdhNTNoNnl2N3B4MXpjNmxzdDQwdiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/d1Gvd3wrtBcaMkhO/giphy.gif'),
+        url("https://i.gifer.com/KM74.gif"),
+        linear-gradient(145deg, @mid-purple, @lightest-purple);
     background-blend-mode: overlay;
-
     background-size: cover;
     background-position: center;
     font-family: 'Consolas', 'Courier New', Courier, monospace;
     text-shadow: 2px 2px 12px @dark-purple;
-
-
 }
 
 .mathsprint-card {
@@ -102,4 +90,48 @@
     font-family: 'Consolas', 'Courier New', Courier, monospace;
     color: white;
     text-shadow: 2px 2px 12px @dark-purple;
-}
+}
+
+.sum-game-card {
+    background-color: #FF9800;
+    background-size: cover;
+    font-weight: 400;
+    font-family: 'Consolas', 'Courier New', Courier, monospace;
+    color: white;
+    text-shadow: 2px 2px 12px @dark-purple;
+}
+
+.sequence-game-card {
+    background-color: #9C27B0;
+    background-size: cover;
+    font-weight: 400;
+    font-family: 'Consolas', 'Courier New', Courier, monospace;
+    color: white;
+    text-shadow: 2px 2px 12px @dark-purple;
+}
+
+.pendominoes-game-card {
+    background-color: #673AB7;
+    background-size: cover;
+    font-weight: 400;
+    font-family: 'Consolas', 'Courier New', Courier, monospace;
+    color: white;
+    text-shadow: 2px 2px 12px @dark-purple;
+}
+
+/* Title & description inside each card */
+.game-box__title {
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
+.game-box__desc {
+    font-size: 1rem;
+    margin-top: 0.5rem;
+}
+
+/* Coming-soon styling */
+.game-box.coming-soon {
+    opacity: 0.6;
+    cursor: not-allowed;
+}