diff --git a/public/Icons/heat-icon.svg b/public/Icons/heat-icon.svg new file mode 100644 index 0000000..fe4cf02 --- /dev/null +++ b/public/Icons/heat-icon.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Icons/pipe-icon.svg b/public/Icons/pipe-icon.svg new file mode 100644 index 0000000..8fd203f --- /dev/null +++ b/public/Icons/pipe-icon.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Icons/wire-icon.svg b/public/Icons/wire-icon.svg new file mode 100644 index 0000000..5bdb96a --- /dev/null +++ b/public/Icons/wire-icon.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/cookingGame/page.tsx b/src/app/cookingGame/page.tsx new file mode 100644 index 0000000..969e058 --- /dev/null +++ b/src/app/cookingGame/page.tsx @@ -0,0 +1,11 @@ +import Navbar from "@/components/Navbar"; +import UnityIFrame from "@/components/UnityIFrame"; + +export default function CookingGamePage() { + return ( +
+ + +
+ ); +} diff --git a/src/app/pipesGame/page.tsx b/src/app/pipesGame/page.tsx new file mode 100644 index 0000000..4ba267e --- /dev/null +++ b/src/app/pipesGame/page.tsx @@ -0,0 +1,11 @@ +import Navbar from "@/components/Navbar"; +import UnityIFrame from "@/components/UnityIFrame"; + +export default function PipesGamePage() { + return ( +
+ + +
+ ); +} diff --git a/src/app/statesOfMatterGame/page.tsx b/src/app/statesOfMatterGame/page.tsx index 2285bd9..736a5b4 100644 --- a/src/app/statesOfMatterGame/page.tsx +++ b/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 Title: Bumped to 5xl for maximum impact */} + + Choose Your Experiment + + + + Ready to become a scientist today? + + + + {games.map((game, index) => ( + + ))} + + + ); } diff --git a/src/app/wireGame/page.tsx b/src/app/wireGame/page.tsx new file mode 100644 index 0000000..6ee0b61 --- /dev/null +++ b/src/app/wireGame/page.tsx @@ -0,0 +1,11 @@ +import Navbar from "@/components/Navbar"; +import UnityIFrame from "@/components/UnityIFrame"; + +export default function WireGamePage() { + return ( +
+ + +
+ ); +} diff --git a/src/components/StatesOfMatterGameCard.tsx b/src/components/StatesOfMatterGameCard.tsx new file mode 100644 index 0000000..75d87fb --- /dev/null +++ b/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 ( + + {/* TOP HALF: Adaptive Graphic Area */} + + + {`${title} + + + + {/* BOTTOM HALF: Large Titles and Playful Text */} + + + {title} + + + {description} + + + + + + + + ); +}