wrote component for the judges page, added more code to the FAQ and h…

…ome pages

src/components/JudgeComponent/JudgeComponent.scss

@@ -0,0 +1,8 @@
+.judge-image {
+  mask: url(#trapezoidMask);
+  -webkit-mask: url(#trapezoidMask);
+}
+
+.judge-card {
+  display: flex;
+}

src/components/JudgeComponent/JudgeComponent.tsx

@@ -0,0 +1,60 @@
+import "./JudgeComponent.scss";
+
+interface JudgeProps {
+  name: string;
+  pronouns: string;
+  position: string;
+  funFact: string;
+}
+
+const JudgeComponent = (props: JudgeProps) => {
+  return (
+    <div className="judge-card">
+      <svg
+        width="161"
+        height="160"
+        viewBox="0 0 161 160"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <mask id="trapezoidMask">
+            <rect width="161" height="160" fill="black" />
+            <path
+              d="M0 159.231L27.3357 0H161L133.664 159.231H0Z"
+              fill="white"
+            />
+          </mask>
+        </defs>
+        <rect
+          width="161"
+          height="160"
+          mask="url(#trapezoidMask)"
+          fill="url(#imagePattern)"
+        />
+        <pattern
+          id="imagePattern"
+          patternUnits="userSpaceOnUse"
+          width="161"
+          height="160"
+        >
+          <image
+            className="judge-image"
+            href="/images/duck.jpg"
+            x="0"
+            y="0"
+            width="161"
+            height="160"
+          />
+        </pattern>
+      </svg>
+      <div className="judge-info">
+        <h3>Name: {props.name}</h3>
+        <p>Pronouns: {props.pronouns}</p>
+        <p>Position: {props.position}</p>
+        <p>Fun Fact: {props.funFact}</p>
+      </div>
+    </div>
+  );
+};
+
+export default JudgeComponent;

src/pages/FAQ/FAQ.scss

@@ -1,32 +1,9 @@
-$desktop-padding: 8vw;
-$heading-font: "Ridge Bold", sans-serif;
-$text-font: "NB International", sans-serif;
-
-@font-face {
-  font-family: "Ridge Bold";
-  src: url("../../assets/fonts/ridge-bold-oblique.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "NB International";
-  src: url("../../assets/fonts/NB-International-Regular.ttf") format("truetype");
-}
-
-h2 {
-  font-family: "Ridge Bold";
-  font-size: 1.5rem;
-  margin: 0;
-}
-
 .faq {
   height: 100%;
   overflow: hidden;
   display: flex;
   align-items: center;
 
-  > .faq-container {
-    p {
-      font-family: $text-font;
-    }
+  .faq-container {
   }
 }

src/pages/FAQ/FAQ.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-key */
 import "./FAQ.scss";
 import { useRef } from "react";
 
@@ -55,9 +54,9 @@ export default function FAQ() {
         <div ref={faq1Ref} className="faq-container">
           <h2>FAQ</h2>
           {FaqList1.map((item) => (
-            <div className="block">
+            <div className="block" key={item.question}>
               <h4>{item.question}</h4>
-              <p dangerouslySetInnerHTML={{ __html: item.answer }} />
+              <p>{item.answer}</p>
             </div>
           ))}
         </div>
@@ -66,9 +65,9 @@ export default function FAQ() {
         <div ref={faq2Ref} className="faq-container">
           <h2>FAQ</h2>
           {FaqList2.map((item) => (
-            <div className="block">
+            <div className="block" key={item.question}>
               <h4>{item.question}</h4>
-              <p dangerouslySetInnerHTML={{ __html: item.answer }} />
+              <p>{item.answer}</p>
             </div>
           ))}
         </div>

src/pages/Judges/Judges.scss

@@ -1,2 +1,6 @@
 .judges {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }

src/pages/Judges/Judges.tsx

@@ -1,9 +1,28 @@
 import "./Judges.scss";
+import JudgeComponent from "../../components/JudgeComponent/JudgeComponent";
 
 export default function Judges() {
   return (
     <section className="judges">
       <h2>Judges</h2>
+      <JudgeComponent
+        name="First Last"
+        pronouns="They/Them"
+        position="Position @ Company"
+        funFact="I'm left handed!"
+      />
+      <JudgeComponent
+        name="First Last"
+        pronouns="They/Them"
+        position="Position @ Company"
+        funFact="I'm left handed!"
+      />
+      <JudgeComponent
+        name="First Last"
+        pronouns="They/Them"
+        position="Position @ Company"
+        funFact="I'm left handed!"
+      />
     </section>
   );
 }

src/styles/App.scss

@@ -18,5 +18,11 @@
     @media (max-width: $mobile-breakpoint) {
       padding: 0;
     }
+
+    h2 {
+      font-family: $header-font;
+      font-size: 1.5rem;
+      margin: 0;
+    }
   }
 }