Skip to content

Commit 3edd44a

Browse files
theop04theop04
committed
feat: fixed the UI for the main selection page and created a SOM game card component
1 parent c821b58 commit 3edd44a

File tree

5 files changed

+237
-19
lines changed

5 files changed

+237
-19
lines changed

‎public/Icons/heat-icon.svg‎

Lines changed: 36 additions & 0 deletions
Loading

‎public/Icons/pipe-icon.svg‎

Lines changed: 39 additions & 0 deletions
Loading

‎public/Icons/wire-icon.svg‎

Lines changed: 35 additions & 0 deletions
Loading

‎src/app/statesOfMatterGame/page.tsx‎

Lines changed: 43 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,52 @@
11
import Navbar from "@/components/Navbar";
2-
import Link from "next/link";
2+
import StatesOfMatterGameCard from "@/components/StatesOfMatterGameCard";
3+
import { Box, Flex, Heading, Text, SimpleGrid } from "@chakra-ui/react";
34

45
export default function StatesOfMatterPage() {
6+
const games = [
7+
{
8+
title: "Wire Spark",
9+
description: "Master the circuits and light up the city!",
10+
href: "/wireGame",
11+
bgGradient: "linear(to-br, blue.400, blue.600)",
12+
iconSrc: "/icons/wire-icon.svg",
13+
},
14+
{
15+
title: "Heating Station",
16+
description: "Cook up some science in the heat lab!",
17+
href: "/cookingGame",
18+
bgGradient: "linear(to-br, orange.400, red.500)",
19+
iconSrc: "/icons/heat-icon.svg",
20+
},
21+
{
22+
title: "Pipe Flow",
23+
description: "Connect the flow and fix the leaks!",
24+
href: "/pipesGame",
25+
bgGradient: "linear(to-br, teal.400, teal.500)",
26+
iconSrc: "/icons/pipe-icon.svg",
27+
},
28+
];
29+
530
return (
6-
<main>
31+
<Box minH="100vh" bg="#F4F8FB">
732
<Navbar />
833

9-
{/* TODO: Implement the Figma Design here */}
10-
<div className="flex flex-col items-center justify-center p-24">
11-
<h1 className="text-4xl font-bold mb-8">Choose a Game</h1>
34+
<Flex direction="column" align="center" pt={16} px={4}>
35+
{/* Main Title: Bumped to 5xl for maximum impact */}
36+
<Heading as="h1" size={{ base: "3xl", md: "5xl" }} color="gray.900" mb={4} fontWeight="900" textAlign="center">
37+
Choose Your Experiment
38+
</Heading>
39+
40+
<Text color="gray.500" fontSize="xl" fontWeight="medium" mb={16} textAlign="center">
41+
Ready to become a scientist today?
42+
</Text>
1243

13-
{/* Placeholder links to verify your routing works */}
14-
<div className="flex gap-4">
15-
<Link href="/wireGame" className="px-4 py-2 bg-blue-500 text-white rounded">
16-
Wire Game
17-
</Link>
18-
<Link href="/cookingGame" className="px-4 py-2 bg-blue-500 text-white rounded">
19-
Cooking Game
20-
</Link>
21-
<Link href="/pipesGame" className="px-4 py-2 bg-blue-500 text-white rounded">
22-
Pipes Game
23-
</Link>
24-
</div>
25-
</div>
26-
</main>
44+
<SimpleGrid columns={{ base: 1, md: 3 }} gap={10} maxW="6xl" w="full" px={4}>
45+
{games.map((game, index) => (
46+
<StatesOfMatterGameCard key={index} {...game} />
47+
))}
48+
</SimpleGrid>
49+
</Flex>
50+
</Box>
2751
);
2852
}

‎src/components/StatesOfMatterGameCard.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { Box, Heading, Text, Button } from "@chakra-ui/react";
2+
import Link from "next/link";
3+
import Image from "next/image";
4+
5+
interface StatesOfMatterGameCardProps {
6+
title: string;
7+
description: string;
8+
href: string;
9+
bgGradient: string;
10+
iconSrc: string;
11+
}
12+
13+
export default function StatesOfMatterGameCard({
14+
title,
15+
description,
16+
href,
17+
bgGradient,
18+
iconSrc,
19+
}: StatesOfMatterGameCardProps) {
20+
return (
21+
<Box
22+
bg="white"
23+
borderRadius="2xl"
24+
boxShadow="sm"
25+
_hover={{ boxShadow: "md", transform: "translateY(-4px)" }}
26+
transition="all 0.2s"
27+
overflow="hidden"
28+
display="flex"
29+
flexDirection="column"
30+
>
31+
{/* TOP HALF: Adaptive Graphic Area */}
32+
<Box
33+
h="200px"
34+
w="full"
35+
bgGradient={bgGradient}
36+
display="flex"
37+
alignItems="center"
38+
justifyContent="center"
39+
position="relative"
40+
overflow="hidden"
41+
>
42+
<Box
43+
position="relative"
44+
w="full"
45+
h="full"
46+
transform="scale(1.0)" // Slightly zoomed out from 1.5
47+
transition="transform 0.3s ease" // Smooth transition if you add hover effects later
48+
>
49+
<Image src={iconSrc} alt={`${title} icon`} fill style={{ objectFit: "cover" }} priority />
50+
</Box>
51+
</Box>
52+
53+
{/* BOTTOM HALF: Large Titles and Playful Text */}
54+
<Box display="flex" flexDirection="column" alignItems="center" textAlign="center" p={8} flexGrow={1}>
55+
<Heading size="xl" mb={3} color="gray.800" fontWeight="800" letterSpacing="tight">
56+
{title}
57+
</Heading>
58+
<Text fontSize="md" color="gray.500" mb={8} flexGrow={1} lineHeight="tall">
59+
{description}
60+
</Text>
61+
62+
<Link href={href} style={{ width: "100%" }}>
63+
<Button
64+
w="full"
65+
bg="#2B8BFF"
66+
color="white"
67+
_hover={{ bg: "blue.500" }}
68+
borderRadius="full"
69+
size="lg"
70+
display="flex"
71+
gap={2}
72+
fontWeight="bold"
73+
boxShadow="0 4px 14px 0 rgba(43, 139, 255, 0.39)" // Added a slight glow/shadow to match Figma
74+
>
75+
<svg width="1.2em" height="1.2em" viewBox="0 0 24 24" fill="currentColor">
76+
<path d="M8 5v14l11-7z" />
77+
</svg>
78+
PLAY
79+
</Button>
80+
</Link>
81+
</Box>
82+
</Box>
83+
);
84+
}

0 commit comments

Comments
 (0)