Merge pull request #34 from UR-dandyhacks/dev

Add Tracks section

index.html

@@ -15,8 +15,9 @@ <h3 class="text-2xl"><a href="#hero">DandyHacks &OpenCurlyQuote;23</a></h3>
       <input class="absolute w-8 h-8 opacity-0 peer md:hidden" type="checkbox" />
       <div class="fixed top-0 left-0 w-screen h-screen bg-black opacity-0 pointer-events-none peer-checked:pointer-events-auto transition-opacity peer-checked:opacity-50 md:hidden"></div>
       <img class="md:hidden" src="img/icons/hamburger.png" />
-      <ul class="fixed top-0 right-0 z-30 flex flex-col justify-end h-screen pb-32 text-3xl font-bold transition-transform gap-8 md:flex-row md:text-xl px-9 md:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 md:bg-deep-purple md:translate-x-0 md:w-fit md:h-fit md:relative md:gap-16 md:transition-none">
+      <ul class="fixed top-0 right-0 z-30 flex flex-col h-screen pt-32 text-3xl font-bold transition-transform gap-8 md:flex-row md:text-xl px-9 md:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 md:bg-deep-purple md:translate-x-0 md:w-fit md:h-fit md:relative md:gap-16 md:transition-none">
         <li class="text-right"><a href="#about">About</a></li>
+        <li class="text-right"><a href="#tracks">Tracks</a></li>
         <li class="text-right"><a href="#faq">FAQ</a></li>
         <li class="hidden text-right lg:block"><a href="#sponsoring">Sponsoring</a></li>
       </ul>
@@ -59,10 +60,12 @@ <h2 class="text-2xl lg:text-4xl text-purple">November 3-5</h2>
       </div>
     </div>
     <div class="flex flex-row items-center justify-center gap-[77px] relative">
-      <div id="about" class="absolute -top-16 lg:-top-[150px]"></div>
       <img class="hidden lg:self-start lg:block" src="img/sticker2.png" />
       <div class="px-9 lg:px-0 lg:flex-[0_0_454px] flex flex-col gap-7 lg:gap-14 mb-16 lg:mb-[150px]">
-        <h2 class="text-2xl lg:text-5xl">What is DandyHacks?</h2>
+        <h2 class="text-2xl lg:text-5xl">
+          <div id="about" class="absolute -top-20"></div>
+          What is DandyHacks?
+        </h2>
         <div class="text-base lg:text-xl">
           <p>
             DandyHacks is the University of Rochester’s annual 42-hour long
@@ -82,6 +85,46 @@ <h2 class="text-2xl lg:text-5xl">What is DandyHacks?</h2>
       </div>
       <img class="hidden lg:block lg:relative lg:b-[150px]" src="img/sticker1.png" />
     </div>
+    <div class="relative flex flex-row items-center justify-center text-xl bg-violet">
+      <div class="flex flex-col grow-0 items-center w-full gap-7 lg:gap-11 px-9 lg:px-0 lg:w-[999px] box-border text-base lg:text-xl">
+        <h2 class="text-5xl">
+          <div id="tracks" class="absolute -top-20"></div>
+          Tracks
+        </h2>
+        <p>
+          Choose one track to submit your project into. Each track will have
+          three top winners, and each project may only win in one track. Each
+          track will have different prizes, so pick and choose your track
+          depending on which prize you want to win!
+        </p>
+        <div class="flex flex-col p-12 lg:flex-row gap-12">
+          <div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6">
+            <img class="w-40 mx-auto my-9" src="img/tracks/entertainment.svg" alt="A window with a video player" />
+            <h3 class="mb-4 text-2xl text-center font-display">Entertainment</h3>
+            <p class="text-center">
+              What innovative platforms can be created for content creation and
+              distribution?
+            </p>
+          </div>
+          <div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6">
+            <img class="w-40 mx-auto my-9" src="img/tracks/productivity.svg" alt="A to-do lists with 2 items, both of which are checked" />
+            <h3 class="mb-4 text-2xl text-center font-display">Productivity</h3>
+            <p class="text-center">
+              What innovative tools or applications can help streamline workflow
+              and task management?
+            </p>
+          </div>
+          <div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6">
+            <img class="w-40 mx-auto my-9" src="img/tracks/emerging-tech.svg" alt="A gear with a light bulb inside the hole" />
+            <h3 class="mb-4 text-2xl text-center font-display">Emerging Tech</h3>
+            <p class="text-center">
+              What applications can emerging technologies, such as AI or VR,
+              have in various industries?
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
     <div id="faq" class="relative px-5 bg-deep-purple">
       <div class="flex flex-col items-center py-24 box-border gap-12 lg:gap-20">
         <h2 class="text-5xl">FAQS</h2>
@@ -172,8 +215,11 @@ <h2 class="text-5xl">FAQS</h2>
           </details>
         </div>
       </div>
-      <div id="sponsoring" class="flex-col items-center hidden mb-24 pointer-events-none lg:flex gap-20">
-        <h2 class="text-5xl">Sponsoring</h2>
+      <div class="flex-col items-center hidden mb-24 pointer-events-none lg:flex gap-20">
+        <h2 class="text-5xl">
+          <div id="sponsoring" class="absolute -top-20"></div>
+          Sponsoring
+        </h2>
         <div class="flex flex-row gap-24">
           <div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl">
             <h3 class="text-3xl text-center pb-7">What does a sponsor do?</h3>