FEAT: Improve subscribe links

TODO.md

@@ -4,8 +4,8 @@
 
 - [x] Refactor all 20XX for 20XX +1 and any outdated content
 - [x] Update `favicon` (color)
-- [ ] Make the applcations closed page
-- [ ] Make the subscrive page
+- [x] Make the applcations closed page
+- [x] Make the subscrive page
 - [x] Update FAQ
 - [x] Put the new logos
 - [x] Make sure that github continous integration accepts the commits

src/index.html

@@ -357,8 +357,8 @@ <h1 class="title__title" id="title">
         </h1>
         <span class="title__more-info">
           <span class="title__hackers">600 Hackers</span>
-          <span class="title__date"><time datetime="2020-05-21/2020-05-23">May 12&ndash;14</time></span>
-          <span class="title__duration">36 Hours</span>
+          <span class="title__date"><time datetime="2020-05-21/2020-05-23">May 12&ndash;14 2023</time></span>
+          <span class="title__duration">36 H</span>
         </span>
       </div>
       <a
@@ -369,8 +369,23 @@ <h1 class="title__title" id="title">
         data-location="hero"
         target="_blank"
         rel="noopener noreferrer"
+      >
+        <span class="classic-button__text"
+          >Subscribe as a <b class="classic-button__fs-bigger">Hacker</b> for 2024</span
+        >
+      </a>
+      <a
+        href="https://cdn.forms-content.sg-form.com/01e493d1-6390-11ee-af1c-7a6c855df2c6"
+        class="classic-button mt-2"
+        role="button"
+        data-ga-apply-button
+        data-location="hero"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <span class="classic-button__text"
+          >Subscribe as a <b class="classic-button__fs-bigger">Volunteer</b> for 2024</span
         >
-        <span class="classic-button__text">Subscribe</span>
       </a>
     </header>
     <nav class="nav">
@@ -480,18 +495,20 @@ <h2 class="section__title">How to participate</h2>
                   you've graduated more than a year ago and can't participate as a hacker, apply now as a mentor!
                 </p>
                 <div class="participate__bottom-row">
-                  <a
+                  <!--<a
                     class="classic-button"
                     href="https://my.hackupc.com/user/signup/mentor/"
                     role="button"
                     data-ga-apply-button
                     data-location="participate"
                     data-role="mentor"
                   >
-                    <span class="classic-button__text">Apply</span>
-                  </a>
-                  <!-- <span class="classic-button-disabled">Closed</span>
-                  <span class="participate__message"></span> -->
+                    <span class="classic-button__text">Apply</span> 
+                  </a>-->
+                  <!-- del this -->
+                  <span class="classic-button-disabled">Closed</span>
+                  <!--
+                    <span class="participate__message"></span>  -->
                 </div>
               </dd>
             </div>

src/styles/sections/hero/hero.scss

@@ -177,19 +177,26 @@ $hero-max-height: 900px;
     }
 
     &__hackers {
+      padding: 0 10px;
       text-align: left;
     }
 
     &__date {
+      padding: 0 10px;
       text-align: center;
     }
 
     &__duration {
+      padding: 0 10px;
       text-align: right;
     }
   }
 
   .apply-button {
     margin-top: calc(min(15vh, (900px - 8rem) * 0.15) - 1rem);
   }
+
+  .mt-2 {
+    margin-top: 20px;
+  }
 }

src/styles/shared/body.scss

@@ -121,6 +121,10 @@ $btn-thickness: 0.5rem;
     transition: transform 150ms $ease-bounce;
   }
 
+  &__fs-bigger {
+    font-size: 110%;
+  }
+
   &:active &__text {
     transform: translateY($btn-thickness);
   }