Problem or limitation
The "GAMES & CHALLENGES" section grid container currently has a large empty layout gap, with only one active card ("Guess the Algorithm") rendered on the left. The lack of varied interactive content limits user engagement and leaves the UI looking incomplete on desktop viewports.
Proposed solution
Implement two new interactive challenge cards right next to the existing module to complete a three-column layout. Both cards must perfectly mirror the design token system of the existing card: a light card wrapper, an inner dotted background pattern, a geometric icon placeholder in the top right, clear typography hierarchy, a divider rule, and an "EXPLORE" text element anchored by the purple arrow circle button at the bottom right.
Card 1: Complexity Time Attack (Middle Grid Slot)
Title: Complexity Time Attack
Description: Race against the clock! You are given a raw snippet of code or a descriptive scenario, and you must quickly choose its correct Big-O time complexity ($O(1)$, $O(\log n)$, $O(n)$, $O(n \log n)$, $O(n^2)$) before time runs out.
Card 2: The Pathfinding Maze (Right Grid Slot)
Title: The Pathfinding Maze
Description:
Step into the grid! Draw obstacles on a dynamic custom map and select your traversal weapon. Can you beat the computer by manually clicking the shortest path before Dijkstra or A* finds it?
Alternatives considered
We considered keeping only one card and centering it, but expanding the actual content offerings fits the platform's core educational goal much better and provides excellent full-stack and frontend component tasks for open-source contributors.
Use case
Adding these modules provides immediate clarity and a comprehensive suite of learning games for users visiting the platform. For GSSoC contributors, this architecture breaks down cleanly into highly modular frontend component design and logical state handling tasks.
Additional context
This change will involve appending these two new object configurations into the array mapping over the challenge card components inside the frontend workspace.
Ensure proper grid responsiveness (grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) so the layout breaks gracefully on tablet and mobile viewports.
Problem or limitation
The "GAMES & CHALLENGES" section grid container currently has a large empty layout gap, with only one active card ("Guess the Algorithm") rendered on the left. The lack of varied interactive content limits user engagement and leaves the UI looking incomplete on desktop viewports.
Proposed solution
Implement two new interactive challenge cards right next to the existing module to complete a three-column layout. Both cards must perfectly mirror the design token system of the existing card: a light card wrapper, an inner dotted background pattern, a geometric icon placeholder in the top right, clear typography hierarchy, a divider rule, and an "EXPLORE" text element anchored by the purple arrow circle button at the bottom right.$O(1)$ , $O(\log n)$ , $O(n)$ , $O(n \log n)$ , $O(n^2)$) before time runs out.
Card 1: Complexity Time Attack (Middle Grid Slot)
Title: Complexity Time Attack
Description: Race against the clock! You are given a raw snippet of code or a descriptive scenario, and you must quickly choose its correct Big-O time complexity (
Card 2: The Pathfinding Maze (Right Grid Slot)
Title: The Pathfinding Maze
Description:
Step into the grid! Draw obstacles on a dynamic custom map and select your traversal weapon. Can you beat the computer by manually clicking the shortest path before Dijkstra or A* finds it?
Alternatives considered
We considered keeping only one card and centering it, but expanding the actual content offerings fits the platform's core educational goal much better and provides excellent full-stack and frontend component tasks for open-source contributors.
Use case
Adding these modules provides immediate clarity and a comprehensive suite of learning games for users visiting the platform. For GSSoC contributors, this architecture breaks down cleanly into highly modular frontend component design and logical state handling tasks.
Additional context
This change will involve appending these two new object configurations into the array mapping over the challenge card components inside the frontend workspace.
Ensure proper grid responsiveness (grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) so the layout breaks gracefully on tablet and mobile viewports.