Merge pull request #117 from HackDavis/feat/changeToRecruitmentVersion

Feat/change to recruitment version

app/(pages)/(index-page)/_components/BottomSection/BottomSection.module.scss

@@ -2,12 +2,17 @@
     display: flex;
     flex-direction: row;
     background: linear-gradient(180deg, #347163 0%, #122537 92.85%);
-    justify-content: space-evenly;
+    justify-content: space-between;
     align-items: flex-start;
     padding-bottom: 10%;
+    flex-wrap: wrap;
+    padding-left: 13vw;
+    padding-right: 13vw;
+
     .polaroids {
         align-self: flex-start;
     }
+
 }
 
 @media screen and (min-width: 1920px) {

app/(pages)/(index-page)/_components/BottomSection/BottomSection.tsx

@@ -1,15 +1,17 @@
 import FAQ from './FAQ/FAQ';
 import BottomPolaroids from './BottomPolaroids/BottomPolaroids';
 import style from './BottomSection.module.scss';
+import DirectorFAQ from './DirectorFAQ/DirectorFAQ';
+
 export default function BottomSection() {
   return (
-    <div>
-      <div className={style.container}>
-        <FAQ />
-        <div className={style.polaroids}>
-          <BottomPolaroids />
-        </div>
+    <div className={style.container}>
+      <DirectorFAQ />
+
+      <div className={style.polaroids}>
+        <BottomPolaroids />
       </div>
+      <FAQ />
     </div>
   );
 }

app/(pages)/(index-page)/_components/BottomSection/DirectorFAQ/Assets/dropDown.tsx

@@ -0,0 +1,11 @@
+export const DropDownArrow = () => (
+  <svg
+    width="15"
+    height="13"
+    viewBox="0 0 22 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M1 1L11 11L21 1" stroke="white" strokeWidth="2" />
+  </svg>
+);

app/(pages)/(index-page)/_components/BottomSection/DirectorFAQ/Assets/plusHorizontal.tsx

@@ -0,0 +1,17 @@
+export const PlusHorizontal = () => (
+  <svg
+    width="19"
+    height="3"
+    viewBox="0 0 19 3"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.09241 1.41174H17.563"
+      stroke="white"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

app/(pages)/(index-page)/_components/BottomSection/DirectorFAQ/Assets/plusVertical.tsx

@@ -0,0 +1,17 @@
+export const PlusVertical = () => (
+  <svg
+    width="19"
+    height="3"
+    viewBox="0 0 19 3"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M1.09241 1.41174H17.563"
+      stroke="white"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

app/(pages)/(index-page)/_components/BottomSection/DirectorFAQ/DirectorFAQ.module.scss

@@ -0,0 +1,159 @@
+// values are for the screen width 960 and less
+.container {
+    display: flex;
+    flex-direction: column;
+    width: 83%;
+    margin-top: 8%;
+
+    .FAQText {
+        color: #FFF;
+        font-family: "Metropolis";
+        font-size: 2.25rem;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        letter-spacing: 1.821px;
+        padding-bottom: 36px;
+    }
+    .questions {
+        color: #FFF;
+        font-family: "Metropolis";
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 64px;
+        letter-spacing: 0.342px;
+        background-image: none;
+    }
+
+    .answer {
+        color: #FFF;
+        font-family: "Metropolis";
+        font-size: 1rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 150%; /* 25.613px */
+        letter-spacing: 0.342px;
+        padding-bottom: 3%;
+    }
+
+    // used for customizable Accordion item
+      .itemBtn {
+        cursor: pointer;
+        background-color: transparent;
+        border: none;
+        width: 100%;
+        text-align: start;
+      }
+
+      .itemBtnExpanded {
+        background-color: transparent;
+
+        .questionRow{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+
+            .dropDownArrow {
+                transform: rotate(180deg);
+            }
+          }
+      }
+
+      .itemContent {
+        transition: height 0.3s ease-in-out;
+      }   
+
+      .questionRow{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
+        .dropDownArrow {
+            transform: rotate(0deg);
+            transition: transform 0.3s cubic-bezier(0, 0, 0, 1);
+            transform-origin: center center; 
+        }
+      }
+
+  }
+  @media screen and (min-width: 961px) {
+    .container {
+        width: 39%;
+
+        .FAQText {
+            font-size: 3.75rem;
+        }
+
+        .questions {
+            font-size: 0.9375rem;
+            line-height: 39px;
+
+        }
+
+        .answer {
+            font-size: 0.9375rem;
+        }
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .container {
+        width: 56%;
+
+        .FAQText {
+            font-size: 4rem;
+            padding-bottom: 55px;
+        }
+
+        .questions {
+            font-size: 1rem;
+            line-height: 41.6px;
+        }
+
+        .answer {
+            font-size: 1rem;
+        }
+    }
+}
+
+@media screen and (min-width: 1366px) {
+    .container {
+        width: 56%;
+
+        .FAQText {
+            font-size: 5.7rem;
+        }
+
+        .questions {
+            font-size: 1.07rem;
+            line-height: 51.16px;
+        }
+
+        .answer {
+            font-size: 1.07rem;
+        }
+    }
+}
+
+@media screen and (min-width: 1920px) {
+    .container {
+        width: 61%;
+
+        .FAQText {
+            font-size: 8rem;
+        }
+
+        .questions {
+            font-size: 1.5rem;
+            line-height: 72px;
+        }
+
+        .answer {
+            font-size: 1.5rem;
+        }
+    }
+}
+