K1 45 create states of matter game selection menu

src/app/cookingGame/page.tsx

@@ -0,0 +1,11 @@
+import Navbar from "@/components/Navbar";
+import UnityIFrame from "@/components/UnityIFrame";
+
+export default function CookingGamePage() {
+  return (
+    <main>
+      <Navbar />
+      <UnityIFrame game="StatesOfMatter" />
+    </main>
+  );
+}

src/app/pipesGame/page.tsx

@@ -0,0 +1,11 @@
+import Navbar from "@/components/Navbar";
+import UnityIFrame from "@/components/UnityIFrame";
+
+export default function PipesGamePage() {
+  return (
+    <main>
+      <Navbar />
+      <UnityIFrame game="StatesOfMatter" />
+    </main>
+  );
+}

src/app/statesOfMatterGame/page.tsx

@@ -1,11 +1,52 @@
 import Navbar from "@/components/Navbar";
-import UnityIFrame from "@/components/UnityIFrame";
+import StatesOfMatterGameCard from "@/components/StatesOfMatterGameCard";
+import { Box, Flex, Heading, Text, SimpleGrid } from "@chakra-ui/react";
 
 export default function StatesOfMatterPage() {
+  const games = [
+    {
+      title: "Wire Spark",
+      description: "Master the circuits and light up the city!",
+      href: "/wireGame",
+      bgGradient: "linear(to-br, blue.400, blue.600)",
+      iconSrc: "/icons/wire-icon.svg",
+    },
+    {
+      title: "Heating Station",
+      description: "Cook up some science in the heat lab!",
+      href: "/cookingGame",
+      bgGradient: "linear(to-br, orange.400, red.500)",
+      iconSrc: "/icons/heat-icon.svg",
+    },
+    {
+      title: "Pipe Flow",
+      description: "Connect the flow and fix the leaks!",
+      href: "/pipesGame",
+      bgGradient: "linear(to-br, teal.400, teal.500)",
+      iconSrc: "/icons/pipe-icon.svg",
+    },
+  ];
+
   return (
-    <main>
+    <Box minH="100vh" bg="#F4F8FB">
       <Navbar />
-      <UnityIFrame game="StatesOfMatter" />
-    </main>
+
+      <Flex direction="column" align="center" pt={16} px={4}>
+        {/* Main Title: Bumped to 5xl for maximum impact */}
+        <Heading as="h1" size={{ base: "3xl", md: "5xl" }} color="gray.900" mb={4} fontWeight="900" textAlign="center">
+          Choose Your Experiment
+        </Heading>
+
+        <Text color="gray.500" fontSize="xl" fontWeight="medium" mb={16} textAlign="center">
+          Ready to become a scientist today?
+        </Text>
+
+        <SimpleGrid columns={{ base: 1, md: 3 }} gap={10} maxW="6xl" w="full" px={4}>
+          {games.map((game, index) => (
+            <StatesOfMatterGameCard key={index} {...game} />
+          ))}
+        </SimpleGrid>
+      </Flex>
+    </Box>
   );
 }

src/app/wireGame/page.tsx

@@ -0,0 +1,11 @@
+import Navbar from "@/components/Navbar";
+import UnityIFrame from "@/components/UnityIFrame";
+
+export default function WireGamePage() {
+  return (
+    <main>
+      <Navbar />
+      <UnityIFrame game="StatesOfMatter" />
+    </main>
+  );
+}

src/components/StatesOfMatterGameCard.tsx

@@ -0,0 +1,84 @@
+import { Box, Heading, Text, Button } from "@chakra-ui/react";
+import Link from "next/link";
+import Image from "next/image";
+
+interface StatesOfMatterGameCardProps {
+  title: string;
+  description: string;
+  href: string;
+  bgGradient: string;
+  iconSrc: string;
+}
+
+export default function StatesOfMatterGameCard({
+  title,
+  description,
+  href,
+  bgGradient,
+  iconSrc,
+}: StatesOfMatterGameCardProps) {
+  return (
+    <Box
+      bg="white"
+      borderRadius="2xl"
+      boxShadow="sm"
+      _hover={{ boxShadow: "md", transform: "translateY(-4px)" }}
+      transition="all 0.2s"
+      overflow="hidden"
+      display="flex"
+      flexDirection="column"
+    >
+      {/* TOP HALF: Adaptive Graphic Area */}
+      <Box
+        h="200px"
+        w="full"
+        bgGradient={bgGradient}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        position="relative"
+        overflow="hidden"
+      >
+        <Box
+          position="relative"
+          w="full"
+          h="full"
+          transform="scale(1.0)" // Slightly zoomed out from 1.5
+          transition="transform 0.3s ease" // Smooth transition if you add hover effects later
+        >
+          <Image src={iconSrc} alt={`${title} icon`} fill style={{ objectFit: "cover" }} priority />
+        </Box>
+      </Box>
+
+      {/* BOTTOM HALF: Large Titles and Playful Text */}
+      <Box display="flex" flexDirection="column" alignItems="center" textAlign="center" p={8} flexGrow={1}>
+        <Heading size="xl" mb={3} color="gray.800" fontWeight="800" letterSpacing="tight">
+          {title}
+        </Heading>
+        <Text fontSize="md" color="gray.500" mb={8} flexGrow={1} lineHeight="tall">
+          {description}
+        </Text>
+
+        <Link href={href} style={{ width: "100%" }}>
+          <Button
+            w="full"
+            bg="#2B8BFF"
+            color="white"
+            _hover={{ bg: "blue.500" }}
+            borderRadius="full"
+            size="lg"
+            display="flex"
+            gap={2}
+            fontWeight="bold"
+            boxShadow="0 4px 14px 0 rgba(43, 139, 255, 0.39)" // Added a slight glow/shadow to match Figma
+          >
+            <svg width="1.2em" height="1.2em" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M8 5v14l11-7z" />
+            </svg>
+            PLAY
+          </Button>
+        </Link>
+      </Box>
+    </Box>
+  );
+}