Merge pull request #45 from UR-dandyhacks/dev

Ship the Prizes section!

index.html

@@ -16,10 +16,11 @@ <h3 class="text-2xl"><a href="#hero">DandyHacks &OpenCurlyQuote;23</a></h3>
       <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="relative z-40 md:hidden" src="img/icons/hamburger.png" />
       <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>
+        <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>
     </div>
     <a id="mlh-trust-badge" style="
@@ -54,13 +55,13 @@ <h2 class="text-2xl lg:text-4xl text-purple">November 3-5</h2>
           </div>
         </div>
         <div class="flex flex-col items-center justify-center font-bold md:flex-row gap-7 md:max-lg:relative md:max-lg:bottom-14">
-          <a class="flex items-center justify-center px-6 py-4 text-xl rounded-full lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-lavender" href="https://docs.google.com/forms/d/e/1FAIpQLSf0fuT8o8gTrG9d8flxtpRD1JkOzHu8tEXG-wXM3KiNzhHRyw/viewform?usp=sf_link" target="_blank">Register</a>
-          <a class="flex items-center justify-center px-6 py-4 text-xl rounded-full lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-purple" href="https://discord.gg/SbNBkUK6Cr" target="_blank">Join Discord</a>
+          <a class="flex items-center justify-center px-6 py-4 text-xl rounded-full hover-scale lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-lavender" href="https://docs.google.com/forms/d/e/1FAIpQLSf0fuT8o8gTrG9d8flxtpRD1JkOzHu8tEXG-wXM3KiNzhHRyw/viewform?usp=sf_link" target="_blank">Register</a>
+          <a class="flex items-center justify-center px-6 py-4 text-xl rounded-full hover-scale lg:px-10 lg:py-5 lg:text-2xl text-deep-purple bg-purple" href="https://discord.gg/SbNBkUK6Cr" target="_blank">Join Discord</a>
         </div>
       </div>
     </div>
     <div class="flex flex-row items-center justify-center gap-[77px] relative">
-      <img class="hidden lg:self-start lg:block" src="img/sticker2.png" />
+      <img class="hidden hover-scale xl:self-start xl: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">
           <div id="about" class="absolute -top-20"></div>
@@ -83,9 +84,9 @@ <h2 class="text-2xl lg:text-5xl">
           </p>
         </div>
       </div>
-      <img class="hidden lg:block lg:relative lg:b-[150px]" src="img/sticker1.png" />
+      <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>
@@ -97,24 +98,24 @@ <h2 class="text-5xl">
           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">
+        <div class="flex flex-row flex-wrap justify-center pt-5 pb-12 lg:pt-1 gap-12">
+          <div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6 hover-scale">
             <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">
+          <div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6 hover-scale">
             <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">
+          <div class="w-[298px] h-[448px] rounded-3xl bg-deep-purple p-6 hover-scale">
             <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">
@@ -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>
@@ -215,13 +235,13 @@ <h2 class="text-5xl">FAQS</h2>
           </details>
         </div>
       </div>
-      <div class="flex-col items-center hidden mb-24 pointer-events-none lg:flex gap-20">
+      <div class="flex-col items-center hidden mb-24 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">
+        <div class="flex flex-row pointer-events-none gap-24">
+          <div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl hover-scale pointer-events-auto">
             <h3 class="text-3xl text-center pb-7">What does a sponsor do?</h3>
             <p>Sponsors enable us to:</p>
             <ul class="list-disc list-inside">
@@ -230,23 +250,24 @@ <h3 class="text-3xl text-center pb-7">What does a sponsor do?</h3>
                   from our hackers</b></li>
             </ul>
           </div>
-          <div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl">
+          <div class="flex flex-col w-[434px] bg-violet rounded-3xl p-12 text-xl hover-scale pointer-events-auto">
             <h3 class="text-3xl text-center pb-7">Why sponsor?</h3>
             <p>As a sponsor, you will be able to:</p>
             <ul class="list-disc list-inside">
               <li>
-                Connect with top students, and get early access to resumes and
-                portfolios.
+                Connect with <b>top students</b>, and get <b>early access</b> to
+                resumes and portfolios.
               </li>
               <li>
-                Showcase your products and see talented students make cool hacks
-                with them.
+                <b>Showcase your products</b> and see talented students make
+                cool hacks with them.
               </li>
               <li>
-                Inspire the next generation of developers to find pride and joy in
-                building awesome things.
+                <b>Inspire the next generation</b> of developers to find pride
+                and joy in building awesome things.
               </li>
-              <li>Attract next generation talent for tech development programs.</li>
+              <li><b>Attract next generation talent</b> for tech development
+                programs.</li>
             </ul>
           </div>
         </div>
@@ -256,10 +277,10 @@ <h3 class="text-3xl text-center pb-7">Why sponsor?</h3>
       <div class="flex flex-col items-center gap-5">
         <span class="hidden font-bold lg:inline">[email protected]</span>
         <div class="flex gap-2.5 items-center">
-          <a href="mailto:[email protected]"><img src="img/social/mail.svg"></a>
-          <a href="https://www.instagram.com/dandyhacks"><img src="img/social/instagram.svg"></a>
-          <a href="https://www.facebook.com/DandyHacks"><img src="img/social/facebook.svg"></a>
-          <a href="https://twitter.com/dandyhacks"><img src="img/social/twitter.svg"></a>
+          <a class="hover:scale-110 transition-transform origin-center" href="mailto:[email protected]"><img src="img/social/mail.svg"></a>
+          <a class="hover:scale-110 transition-transform origin-center" href="https://www.instagram.com/dandyhacks"><img src="img/social/instagram.svg"></a>
+          <a class="hover:scale-110 transition-transform origin-center" href="https://www.facebook.com/DandyHacks"><img src="img/social/facebook.svg"></a>
+          <a class="hover:scale-110 transition-transform origin-center" href="https://twitter.com/dandyhacks"><img src="img/social/twitter.svg"></a>
         </div>
       </div>
       <div class="flex flex-col items-center mb-5 gap-5 lg:mb-0">

main.css

@@ -45,11 +45,15 @@
     left: 0;
   }
 
-  #faq > div > * {
+  #particles-js > div > * {
     position: relative;
     z-index: 10;
   }
 
+  .hover-scale, details {
+    @apply hover:scale-105 transition-transform origin-center;
+  }
+
   /* Parallax effect */
 
   .wrapper {

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');
 });