Merge branch 'main' into HMT-37-under-construction-placeholder

src/app/page.tsx

@@ -1,9 +1,11 @@
+import JudgingCriteria from "@/components/LandingPage/JudgingCriteria";
 import PagePlaceholder from "@/components/PagePlaceholder";
 
 export default function Home() {
   return (
     <main>
       <PagePlaceholder />
+      <JudgingCriteria />
     </main>
   );
 }

src/components/LandingPage/JudgingCriteria.tsx

@@ -0,0 +1,68 @@
+import Image from "next/image";
+
+const judgingCriteriaStyles =
+  "relative flex -mt-5 justify-between bg-[#BAFBE4] py-20 px-10 md:px-24 lg:px-40 drop-shadow-lg md:drop-shadow-none";
+
+const itemStyles =
+  "flex justify-start p-4 lg:px-10 lg:text-[1.0rem] items-start";
+
+const checkMarkSvg = "/svgs/judgingCriteria/check_mark_bkg.svg";
+
+export const JUDGING_CRITERIA = [
+  {
+    category: "Judging Criteria - Idea",
+    description:
+      "Does the product address the prompt? Does the product introduce a new/unique approach or perspective?",
+  },
+  {
+    category: "Judging Criteria - Effectiveness",
+    description:
+      "Does the product function as intended? Does the product execute on its idea in a way that’s effective?",
+  },
+  {
+    category: "Judging Criteria - Technical Challenge",
+    description:
+      "Does the product function as intended? Does the product execute on its idea in a way that’s effective?",
+  },
+  {
+    category: "Judging Criteria - Presentation/Marketability",
+    description:
+      "Is the implementation complex? Does the product feature different parts? Does the product use interesting concepts or technologies? (If you are unable to judge this criteria accurately, please leave it blank.)",
+  },
+  {
+    category: "Judging Criteria - Design",
+    description:
+      "Does the team seem organized in their presentation/demo? Does the presentation engage the judges and have real-world marketability? (If you are unable to judge this criteria accurately, please leave it blank.)",
+  },
+];
+
+const JudgingCriteria = () => {
+  const listJudgingCriteria = JUDGING_CRITERIA.map((criterion, index) => (
+    <li key={index} className={itemStyles}>
+      <Image
+        src={checkMarkSvg}
+        alt="check mark icon"
+        width={60}
+        height={60}
+        className="mr-6"
+      ></Image>
+      <div>
+        <h2>{criterion.category}</h2>
+        <p>{criterion.description}</p>
+      </div>
+    </li>
+  ));
+  return (
+    <div className={judgingCriteriaStyles}>
+      <div>
+        <h1 className="mb-10 text-2xl font-bold">
+          Judging
+          <em className="text-[#7055FD]"> Criteria</em>
+        </h1>
+        <ul className="flex flex-col">{listJudgingCriteria}</ul>
+      </div>
+    </div>
+  );
+};
+
+export default JudgingCriteria;

src/components/layouts/MainLayout.tsx

@@ -9,7 +9,7 @@ interface Props {
 export default function MainLayout({ children }: Props) {
   return (
     <>
-      <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <main className="flex min-h-screen flex-col items-center justify-between">
         {children}
       </main>
       <Footer />