Merge pull request #43 from UR-dandyhacks/feature/prizes-section

Add the Prizes section! 🥳

index.html

@@ -18,6 +18,7 @@ <h3 class="text-2xl"><a href="#hero">DandyHacks &OpenCurlyQuote;23</a></h3>
       <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 hover:scale-110 transition-transform origin-center"><a href="#about">About</a></li>
         <li class="text-right hover:scale-110 transition-transform origin-center"><a href="#tracks">Tracks</a></li>
+        <li class="text-right hover:scale-110 transition-transform origin-center"><a href="#prizes">Prizes</a></li>
         <li class="text-right hover:scale-110 transition-transform origin-center"><a href="#faq">FAQ</a></li>
         <li class="hidden text-right hover:scale-110 transition-transform origin-center lg:block"><a href="#sponsoring">Sponsoring</a></li>
       </ul>
@@ -85,7 +86,7 @@ <h2 class="text-2xl lg:text-5xl">
       </div>
       <img class="hidden hover-scale 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="relative flex 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>
@@ -125,9 +126,28 @@ <h3 class="mb-4 text-2xl text-center font-display">Emerging Tech</h3>
         </div>
       </div>
     </div>
-    <div id="faq" class="relative px-5 bg-deep-purple">
+    <div id="particles-js" class="relative px-5 bg-deep-purple">
+      <div class="flex flex-col items-center justify-center pt-16 gap-10 bg-deep-purple">
+        <h2 class="text-5xl">
+          <div id="prizes" class="absolute -top-20"></div>
+          Prizes
+        </h2>
+        <div class="flex flex-wrap justify-center pointer-events-none max-w-7xl gap-6">
+          <div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-acer-nitro-monitor bg-violet bg-[bottom_-16px_right_-16px]"><h3>Acer Nitro KG241Y Sbiip 23.8" Monitor</h3></div>
+          <div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-razer-blackwidow bg-violet bg-[bottom_-16px_right_-16px]"><h3>Razer BlackWidow V4 with Yellow Switches</h3></div>
+          <div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-wireless-photo-printer bg-violet bg-[bottom_-16px_right_-16px]"><h3>Wireless Photo Printer</h3></div>
+          <div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-jbl-flip-5 bg-violet bg-[bottom_-16px_right_-16px]"><h3>JBL Flip 5 Speaker</h3></div>
+          <div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-desk-lamp bg-violet bg-[bottom_-8px_right_0px]"><h3>Desk Lamp</h3></div>
+          <div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-echo-dot bg-violet bg-[bottom_-12px_right_-16px]"><h3>Echo dot 5th gen</h3></div>
+          <div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-airtag bg-violet bg-[bottom_-16px_right_-16px]"><h3>AirTag</h3></div>
+          <div class="hover-scale pointer-events-auto flex items-center h-28 p-8 bg-no-repeat bg-contain w-72 md:w-80 lg:w-96 grow-0 rounded-2xl bg-prize-amazon-fire-stick bg-violet bg-[bottom_-16px_right_0px]"><h3>Amazon Fire Stick</h3></div>
+        </div>
+      </div>
       <div class="flex flex-col items-center py-24 box-border gap-12 lg:gap-20">
-        <h2 class="text-5xl">FAQS</h2>
+        <h2 class="text-5xl">
+          <div id="faq" class="absolute -top-20"></div>
+          FAQS
+        </h2>
         <div class="flex flex-col px-10 py-4 pointer-events-none lg:py-0 gap-5 lg:px-0">
           <details>
             <summary>

main.css

@@ -45,7 +45,7 @@
     left: 0;
   }
 
-  #faq > div > * {
+  #particles-js > div > * {
     position: relative;
     z-index: 10;
   }

script.js

@@ -41,5 +41,5 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // particles.js
 
-    particlesJS.load('faq', 'assets/particlesjs-config.json');
+    particlesJS.load('particles-js', 'assets/particlesjs-config.json');
 });

styles.css

@@ -844,6 +844,10 @@ h1, h2, h3, h4, h5, h6 {
   display: none;
 }
 
+.h-28 {
+  height: 7rem;
+}
+
 .h-8 {
   height: 2rem;
 }
@@ -888,6 +892,10 @@ h1, h2, h3, h4, h5, h6 {
   width: 100vw;
 }
 
+.max-w-7xl {
+  max-width: 80rem;
+}
+
 .flex-none {
   flex: none;
 }
@@ -1431,6 +1439,10 @@ h1, h2, h3, h4, h5, h6 {
   justify-items: stretch;
 }
 
+.gap-10 {
+  gap: 2.5rem;
+}
+
 .gap-12 {
   gap: 3rem;
 }
@@ -1775,6 +1787,10 @@ h1, h2, h3, h4, h5, h6 {
   border-radius: 0.25rem;
 }
 
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
 .rounded-3xl {
   border-radius: 1.5rem;
 }
@@ -1953,6 +1969,38 @@ h1, h2, h3, h4, h5, h6 {
   background-image: url('img/hero-bg/layer4.svg');
 }
 
+.bg-prize-acer-nitro-monitor {
+  background-image: url('img/prizes/acer_nitro_monitor.png');
+}
+
+.bg-prize-airtag {
+  background-image: url('img/prizes/airtag.png');
+}
+
+.bg-prize-amazon-fire-stick {
+  background-image: url('img/prizes/amazon_fire_stick.png');
+}
+
+.bg-prize-desk-lamp {
+  background-image: url('img/prizes/desk_lamp.png');
+}
+
+.bg-prize-echo-dot {
+  background-image: url('img/prizes/echo_dot.png');
+}
+
+.bg-prize-jbl-flip-5 {
+  background-image: url('img/prizes/jbl_flip_5.png');
+}
+
+.bg-prize-razer-blackwidow {
+  background-image: url('img/prizes/razer_blackwidow.png');
+}
+
+.bg-prize-wireless-photo-printer {
+  background-image: url('img/prizes/wireless_photo_printer.png');
+}
+
 .decoration-slice {
   -webkit-box-decoration-break: slice;
           box-decoration-break: slice;
@@ -1973,6 +2021,10 @@ h1, h2, h3, h4, h5, h6 {
           box-decoration-break: clone;
 }
 
+.bg-contain {
+  background-size: contain;
+}
+
 .bg-cover {
   background-size: cover;
 }
@@ -2006,6 +2058,22 @@ h1, h2, h3, h4, h5, h6 {
           background-clip: text;
 }
 
+.bg-\[bottom_-12px_right_-16px\] {
+  background-position: bottom -12px right -16px;
+}
+
+.bg-\[bottom_-16px_right_-16px\] {
+  background-position: bottom -16px right -16px;
+}
+
+.bg-\[bottom_-16px_right_0px\] {
+  background-position: bottom -16px right 0px;
+}
+
+.bg-\[bottom_-8px_right_0px\] {
+  background-position: bottom -8px right 0px;
+}
+
 .bg-center-bottom {
   background-position: center bottom;
 }
@@ -2079,6 +2147,10 @@ h1, h2, h3, h4, h5, h6 {
   padding: 1.5rem;
 }
 
+.p-8 {
+  padding: 2rem;
+}
+
 .px-10 {
   padding-left: 2.5rem;
   padding-right: 2.5rem;
@@ -2118,6 +2190,10 @@ h1, h2, h3, h4, h5, h6 {
   padding-bottom: 1.75rem;
 }
 
+.pt-16 {
+  padding-top: 4rem;
+}
+
 .pt-32 {
   padding-top: 8rem;
 }
@@ -2710,7 +2786,7 @@ canvas {
   left: 0;
 }
 
-#faq > div > * {
+#particles-js > div > * {
   position: relative;
   z-index: 10;
 }
@@ -2879,6 +2955,10 @@ canvas {
     height: fit-content;
   }
 
+  .md\:w-80 {
+    width: 20rem;
+  }
+
   .md\:w-fit {
     width: -moz-fit-content;
     width: fit-content;
@@ -2976,6 +3056,10 @@ canvas {
     display: flex;
   }
 
+  .lg\:w-96 {
+    width: 24rem;
+  }
+
   .lg\:w-\[999px\] {
     width: 999px;
   }

tailwind.config.js

@@ -15,6 +15,14 @@ module.exports = {
       'enchanted-forest-layer-2': "url('img/hero-bg/layer2.svg')",
       'enchanted-forest-layer-3': "url('img/hero-bg/layer3.svg')",
       'enchanted-forest-layer-4': "url('img/hero-bg/layer4.svg')",
+      'prize-acer-nitro-monitor': "url('img/prizes/acer_nitro_monitor.png')",
+      'prize-airtag': "url('img/prizes/airtag.png')",
+      'prize-amazon-fire-stick': "url('img/prizes/amazon_fire_stick.png')",
+      'prize-desk-lamp': "url('img/prizes/desk_lamp.png')",
+      'prize-echo-dot': "url('img/prizes/echo_dot.png')",
+      'prize-jbl-flip-5': "url('img/prizes/jbl_flip_5.png')",
+      'prize-razer-blackwidow': "url('img/prizes/razer_blackwidow.png')",
+      'prize-wireless-photo-printer': "url('img/prizes/wireless_photo_printer.png')",
     },
     extend: {
       backgroundPosition: {