- );
-}
\ No newline at end of file
diff --git a/peer-prep/src/pages/Home/HomePage.module.css b/peer-prep/src/pages/Home/HomePage.module.css
new file mode 100644
index 0000000000..9887a97f4a
--- /dev/null
+++ b/peer-prep/src/pages/Home/HomePage.module.css
@@ -0,0 +1,25 @@
+.header {
+ min-height: calc(100vh - 60px - var(--mantine-spacing-md));
+ /* background-color: var(--mantine-color-gray-0); */
+}
+
+.header-content {
+ min-height: 100vh;
+}
+.title {
+ text-align: center;
+ font-size: 24rem;
+}
+
+.description {
+ text-align: center;
+}
+
+.wrapper {
+ padding-top: calc(var(--mantine-spacing-xl) * 4);
+ padding-bottom: calc(var(--mantine-spacing-xl) * 4);
+}
+
+.shaded {
+ background-color: var(--mantine-color-gray-0);
+}
diff --git a/peer-prep/src/pages/Home/HomePage.tsx b/peer-prep/src/pages/Home/HomePage.tsx
new file mode 100644
index 0000000000..437f01acf1
--- /dev/null
+++ b/peer-prep/src/pages/Home/HomePage.tsx
@@ -0,0 +1,165 @@
+import {
+ Box,
+ Button,
+ Center,
+ Container,
+ Group,
+ rem,
+ SimpleGrid,
+ Stack,
+ Text,
+ ThemeIcon,
+ Title,
+} from "@mantine/core";
+import {
+ IconGauge,
+ IconCookie,
+ IconUser,
+ IconMessage2,
+ IconLock,
+} from "@tabler/icons-react";
+import classes from "./HomePage.module.css";
+
+export const MOCKDATA = [
+ {
+ icon: IconGauge,
+ title: "Extreme performance",
+ description:
+ "This dust is actually a powerful poison that will even make a pro wrestler sick, Regice cloaks itself with frigid air of -328 degrees Fahrenheit",
+ },
+ {
+ icon: IconUser,
+ title: "Privacy focused",
+ description:
+ "People say it can run at the same speed as lightning striking, Its icy body is so cold, it will not melt even if it is immersed in magma",
+ },
+ {
+ icon: IconCookie,
+ title: "No third parties",
+ description:
+ "They’re popular, but they’re rare. Trainers who show them off recklessly may be targeted by thieves",
+ },
+ {
+ icon: IconLock,
+ title: "Secure by default",
+ description:
+ "Although it still can’t fly, its jumping power is outstanding, in Alola the mushrooms on Paras don’t grow up quite right",
+ },
+ {
+ icon: IconMessage2,
+ title: "24/7 Support",
+ description:
+ "Rapidash usually can be seen casually cantering in the fields and plains, Skitty is known to chase around after its own tail",
+ },
+];
+
+interface FeatureProps {
+ icon: React.FC;
+ title: React.ReactNode;
+ description: React.ReactNode;
+}
+
+export default function Home() {
+ return (
+ <>
+
+
+
+
+
+ Welcome to PeerPrep!
+
+
+ {" "}
+ At PeerPrep, we want you to ace your coding interviews. But,
+ doing it alone is boring. Find someone to collaborate with on a
+ coding problem, with test cases, timed submission, and more!{" "}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Integrate effortlessly with any technology stack
+
+
+
+
+ Every once in a while, you’ll see a Golbat that’s missing some
+ fangs. This happens when hunger drives it to try biting a
+ Steel-type Pokémon.
+
+
+
+
+ {MOCKDATA.map(Feature)}
+
+
+
+
+
+ );
+}
+
+export function Feature(
+ { icon: Icon, title, description }: FeatureProps,
+ index: number
+) {
+ return (
+
+
+
+
+
+ {title}
+
+
+ {description}
+
+
+ );
+}
+
+export function FeaturesGrid() {
+ const features = MOCKDATA.map((feature, index) => (
+
+ ));
+
+ return (
+
+
+ Integrate effortlessly with any technology stack
+
+
+
+
+ Every once in a while, you’ll see a Golbat that’s missing some fangs.
+ This happens when hunger drives it to try biting a Steel-type Pokémon.
+
+
+
+
+ {features}
+
+
+ );
+}
diff --git a/peer-prep/src/pages/Login.tsx b/peer-prep/src/pages/Login.tsx
deleted file mode 100644
index 8519d930f6..0000000000
--- a/peer-prep/src/pages/Login.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function Login() {
- return (
-