Add the tracks section

index.html

@@ -82,6 +82,43 @@ <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">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>

styles.css

@@ -707,6 +707,16 @@ h1, h2, h3, h4, h5, h6 {
   margin: 0.25rem;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-9 {
+  margin-top: 2.25rem;
+  margin-bottom: 2.25rem;
+}
+
 .mb-16 {
   margin-bottom: 4rem;
 }
@@ -715,6 +725,10 @@ h1, h2, h3, h4, h5, h6 {
   margin-bottom: 6rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mb-5 {
   margin-bottom: 1.25rem;
 }
@@ -826,6 +840,10 @@ h1, h2, h3, h4, h5, h6 {
   height: 2rem;
 }
 
+.h-\[448px\] {
+  height: 448px;
+}
+
 .h-full {
   height: 100%;
 }
@@ -834,6 +852,10 @@ h1, h2, h3, h4, h5, h6 {
   height: 100vh;
 }
 
+.w-40 {
+  width: 10rem;
+}
+
 .w-72 {
   width: 18rem;
 }
@@ -842,6 +864,10 @@ h1, h2, h3, h4, h5, h6 {
   width: 2rem;
 }
 
+.w-\[298px\] {
+  width: 298px;
+}
+
 .w-\[434px\] {
   width: 434px;
 }
@@ -874,6 +900,10 @@ h1, h2, h3, h4, h5, h6 {
   flex-grow: 1;
 }
 
+.grow-0 {
+  flex-grow: 0;
+}
+
 .table-auto {
   table-layout: auto;
 }
@@ -1389,6 +1419,10 @@ h1, h2, h3, h4, h5, h6 {
   justify-items: stretch;
 }
 
+.gap-11 {
+  gap: 2.75rem;
+}
+
 .gap-12 {
   gap: 3rem;
 }
@@ -2033,6 +2067,10 @@ h1, h2, h3, h4, h5, h6 {
   padding: 3rem;
 }
 
+.p-6 {
+  padding: 1.5rem;
+}
+
 .px-10 {
   padding-left: 2.5rem;
   padding-right: 2.5rem;
@@ -2076,10 +2114,6 @@ h1, h2, h3, h4, h5, h6 {
   padding-bottom: 1.75rem;
 }
 
-.pb-16 {
-  padding-bottom: 4rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -2919,6 +2953,10 @@ canvas {
     display: flex;
   }
 
+  .lg\:w-\[999px\] {
+    width: 999px;
+  }
+
   .lg\:flex-\[0_0_454px\] {
     flex: 0 0 454px;
   }
@@ -2939,6 +2977,14 @@ canvas {
     gap: 5rem;
   }
 
+  .lg\:gap-11 {
+    gap: 2.75rem;
+  }
+
+  .lg\:self-auto {
+    align-self: auto;
+  }
+
   .lg\:self-start {
     align-self: flex-start;
   }

tailwind.config.js

@@ -8,7 +8,6 @@ module.exports = {
       'body': ['"Fivo Sans"', 'sans-serif']
     },
     backgroundImage: {
-      'enchanted-forest': "url('img/website-bg.svg')",
       'fireflies': "url('img/website-bg2.png')",
       'plus-icon': "url('img/icons/plus.png')",
       'groundboi': "url('img/sticker2-no_border.png')",