Frontpage Frontend PR

src/app/_components/FrontPage/course/Choice.module.css

@@ -0,0 +1,167 @@
+.courseCard {
+  display: flex;
+  flex-direction: row;
+  height: 95px;
+  width: 300px;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  /* border: 2px solid var(--warmYellow); */
+  border-radius: 16px;
+  /* box-shadow: 0px 4px 0px 0px; */
+  cursor: pointer;
+  /* background: var(--faintYellow); */
+  padding: 0 16px;
+
+  margin-top: 20px;
+
+}
+
+.courseHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.courseTitle {
+  text-align: center;
+  font-family: var(--font-poppins), sans-serif;
+  font-weight: 700;
+  font-size: 19px;
+  color: var(--primary);
+  margin: 0;
+}
+
+.courseProgress {
+  font-family: var(--font-poppins), sans-serif;
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--primary);
+}
+
+.progressBar {
+  position: relative;
+  width: 100px;
+  height: 12px;
+  background: var(--faintGrey);
+  border-radius: 25px;
+  overflow: hidden;
+  margin: 8px 0;
+}
+
+.progressWrapper {
+  display: flex;
+
+  justify-content: space-between;
+}
+
+.progressFill {
+  height: 100%;
+  background: var(--coolAccentBg);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.startBtn,
+.reviewBtn {
+  display: inline-block;
+  width: 80px;
+  height: 25px;
+  padding: 8px 16px;
+  font-family: var(--font-poppins), sans-serif;
+  font-weight: 500;
+  font-size: 18px;
+  text-align: center;
+  text-decoration: none;
+  border-radius: 25px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.startBtn {
+  background: var(--warm);
+  color: var(--white);
+  border: none;
+}
+
+/* .startBtn:hover {
+  background: #d9534f;
+} */
+
+.reviewBtn {
+  background: var(--warm);
+  color: var(--white);
+  border: none;
+}
+
+/* .reviewBtn:hover {
+  background: #5cb85c;
+} */
+
+
+.selectedcourseContainer {
+  display: flex;
+  flex-direction: column;
+  height: 95px;
+  width: 344px;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid var(--coolDark);
+  border-radius: 16px;
+  box-shadow: 0px 4px 0px 0px black;
+  cursor: pointer;
+  background: var(--coolAccentBg);
+}
+
+.correctcourse {
+  background-color: var(--faintSuccess);
+  border: 2px solid var(--success);
+  box-shadow: 0px 4px 0px 0px var(--success);
+}
+
+.incorrectcourse {
+  background-color: var(--faintFailure);
+  border: 2px solid var(--failure);
+  box-shadow: 0px 4px 0px 0px var(--failure);
+}
+
+@media screen and (max-height: 840px) {
+  .courseContainer,
+  .selectedcourseContainer {
+    height: 80px;
+  }
+}
+@media screen and (max-height: 750px) {
+  .courseContainer,
+  .selectedcourseContainer {
+    height: 64px;
+  }
+}
+
+.questionLabel {
+  font-family: var(--font-poppins), sans-serif;
+  font-weight: 700;
+  font-size: 22px;
+  line-height: 33px;
+  color: var(--primary);
+  text-align: left;
+}
+
+.courseText {
+  font-family: var(--font-poppins), sans-serif;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 30px;
+  text-align: center;
+  color: var(--primary);
+}
+
+.selectedcourseText {
+  font-family: var(--font-poppins), sans-serif;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 30px;
+  text-align: center;
+  color: white;
+}

src/app/_components/FrontPage/course/Course.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import styles from "./Choice.module.css";
+
+interface CourseProps {
+  title: string;
+  progress: number;
+  totalProgress: number;
+  urlToCourse: string;
+  bgColour: string;
+  borderColour: string;
+}
+
+export const Course: React.FC<CourseProps> = ({
+  title,
+  progress,
+  totalProgress,
+  urlToCourse,
+  bgColour,
+  borderColour,
+
+}) => {
+  const progressPercentage = (progress / totalProgress) * 100;
+  const isCompleted = progress === totalProgress;
+
+  return (
+    <div 
+    className={styles.courseCard}
+    style={
+      {
+        border: `2px solid ${borderColour}`, 
+        backgroundColor: bgColour, 
+        boxShadow: `0px 4px 0px ${borderColour}`
+        }}>
+      <div>
+          <h3 className={styles.courseTitle}>{title}</h3>
+
+
+
+        <div className={styles.courseTitle} style={{fontSize: '14px'}}>Progress</div>
+
+        <div className={styles.progressWrapper}>
+
+          <div className={styles.progressBar}>
+            <div
+              className={styles.progressFill}
+              style={{ width: `${progressPercentage}%` }}
+            />
+          </div>
+
+          <span className={styles.courseProgress}>
+          &nbsp; &nbsp; {progress}/{totalProgress}
+          </span>
+
+
+
+
+        </div>
+
+      </div>
+
+      <a href={urlToCourse} className={isCompleted ? styles.reviewBtn : styles.startBtn}>
+        {isCompleted ? "Review" : progress > 0 ? "Continue" : "Start"}
+      </a>
+    </div>
+  );
+};
+

src/app/_components/FrontPage/course/index.ts

@@ -0,0 +1 @@
+export { Course } from "./Course";

src/app/_components/FrontPage/index.module.css

@@ -0,0 +1,56 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.subContainer {
+
+  position: absolute;
+  top: 170px;
+  display: flex;
+  max-height: 723px;
+  height: calc(100% - 104px - 120px);
+  width: 100%;
+  z-index: 1;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+  bottom: 120px;
+
+}
+
+/* Course{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin-top: 20px;
+} */
+
+.subContainerReview {
+  position: absolute;
+  margin-top: 20px;
+  top: 104px;
+  display: flex;
+  max-height: 723px;
+  height: calc(100% - 104px - 120px);
+  width: 100%;
+  z-index: 1;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+  bottom: 120px;
+}
+
+/* adjust for smaller header on very small screens (iPhone SE) */
+@media screen and (max-height: 750px) {
+  .subContainer {
+    top: 60px;
+  }
+}

src/app/_components/FrontPage/index.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import styles from "./index.module.css";
+import { Header } from "../shared/Header/Header";
+import { theme } from "../../../styles/index";
+import { Background } from "../shared/Background/Background";
+import { Navbar } from "../shared/Navbar/Navbar";
+import { Course } from "./course";
+export const FrontPage: React.FC = () => {
+
+
+  return (
+    <div className={styles.container}>
+      <Background />
+      <Header
+        title="Quiz"
+        subtitle="Test your knowledge!"
+        color={theme.colors.primary}
+
+      />
+
+      <div className={styles.subContainer}>
+
+
+          <Course
+            bgColour = {theme.colors.faintYellow}
+            borderColour={theme.colors.warmYellow}
+            title="Simile"
+            progress={0}
+            totalProgress={15} urlToCourse={"/quiz/simile"}
+          />
+
+          <Course
+            bgColour = {theme.colors.faintBlue}
+            borderColour={theme.colors.coolAccentBg}
+
+
+            title="Metaphor"
+            progress={2}
+            totalProgress={15} urlToCourse={"/quiz/metaphor"}
+          />
+
+          <Course
+            bgColour= {theme.colors.faintCoolDark}
+            borderColour={theme.colors.coolDark}
+
+
+            title="Idiom"
+            progress={15}
+            totalProgress={15} urlToCourse={"/quiz/idiom"}
+          />
+
+          <Course
+            bgColour = {theme.colors.white}
+            borderColour={theme.colors.coolDark}
+
+
+            title="Random"
+            progress={0}
+            totalProgress={15} urlToCourse={"/quiz/random"}
+          />
+
+      </div>
+      <Navbar />
+    </div>
+  );
+};

src/app/_components/QuizPage/StatusInfo/StatusInfo.tsx

@@ -3,6 +3,7 @@ import { IoCloseOutline } from "react-icons/io5";
 import { theme } from "../../../../styles/index";
 import { ProgressBar } from "./ProgressBar";
 import { StarInfo } from "./StarInfo";
+import Link from 'next/link'
 
 interface StatusInfoProps {
   completed: number;
@@ -12,10 +13,12 @@ interface StatusInfoProps {
 export const StatusInfo: React.FC<StatusInfoProps> = ({ completed, total }) => {
   return (
     <div className={styles.container}>
-      <IoCloseOutline
-        size={50}
-        style={{ color: `${theme.colors.secondary}` }}
-      />
+      <Link href="/quiz">
+        <IoCloseOutline
+          size={50}
+          style={{ color: `${theme.colors.secondary}` }}
+        />
+      </Link>
       <ProgressBar completed={completed} total={total} />
       <StarInfo />
     </div>