From 3bf19ef9d3e9237f903c1b33b58e995a8b62620e Mon Sep 17 00:00:00 2001
From: trishnasharma <trishnasharma@users.noreply.github.com>
Date: Wed, 3 Apr 2024 23:32:16 -0700
Subject: [PATCH] added starter pack and calendar links

---
 .../Landing/_components/Form/Form.module.scss | 97 ++++++++++---------
 .../Landing/_components/Form/Form.tsx         | 22 ++++-
 2 files changed, 72 insertions(+), 47 deletions(-)

diff --git a/app/(pages)/(index-page)/_components/Landing/_components/Form/Form.module.scss b/app/(pages)/(index-page)/_components/Landing/_components/Form/Form.module.scss
index 048fb791..e609ca45 100644
--- a/app/(pages)/(index-page)/_components/Landing/_components/Form/Form.module.scss
+++ b/app/(pages)/(index-page)/_components/Landing/_components/Form/Form.module.scss
@@ -51,10 +51,8 @@ $tablet-scale: 0.75;
     font-family: "Metropolis", sans-serif;
     color: var(--teal-2, #173A52);
     font-size: $ready-title-font-size;
-    font-size: $ready-title-font-size;
     font-style: normal;
     font-weight: 800;
-    font-weight: 800;
     line-height: 103%; /* 49.44px */
     letter-spacing: 0.96px;
     
@@ -75,18 +73,13 @@ $tablet-scale: 0.75;
 
   }
   &_social{
-    font-family: "Metropolis", sans-serif;
     font-family: "Metropolis", sans-serif;
     color: var(--teal-2, #173A52);
     font-size: $social-title-font-size;
-    font-size: $social-title-font-size;
     font-style: normal;
     font-weight: 800;
     line-height: 103%;
     letter-spacing: 1.4px;
-    font-weight: 800;
-    line-height: 103%;
-    letter-spacing: 1.4px;
   }
 
 
@@ -95,38 +88,29 @@ $tablet-scale: 0.75;
 .calendar{
   display: flex;
   flex-direction: column;
-  display: flex;
-  flex-direction: column;
 
   &_inner{
     display: flex;
     flex-direction: column;
 
     &_upper{
-      font-family: "Metropolis", sans-serif;
       font-family: "Metropolis", sans-serif;
       color: var(--teal-2, #173A52);
       font-size: $calendar-upper-font-size;
-      font-size: $calendar-upper-font-size;
       font-style: normal;
       font-weight: 500;
       line-height: 150%; /* 48px */
       letter-spacing: 0.64px;
 
       &_hackdavis{
-        font-family: "Metropolis", sans-serif;
         font-family: "Metropolis", sans-serif;
         color: var(--teal-2, #173A52);
         font-size: $calendar-upper-font-size;
-        font-size: $calendar-upper-font-size;
         font-style: normal;
         font-weight: 600;
         line-height: 150%; /* 48px */
-        font-weight: 600;
-        line-height: 150%; /* 48px */
         letter-spacing: 0.64px;
         font-weight: 600;
-        font-weight: 600;
       }
     }
 
@@ -139,8 +123,6 @@ $tablet-scale: 0.75;
         color: var(--teal-2, #173A52);
         font-family: "Metropolis", sans-serif;
         font-size: $button-font-size;
-        font-family: "Metropolis", sans-serif;
-        font-size: $button-font-size;
         font-style: normal;
         font-weight: 500;
         line-height: 150%; /* 36px */
@@ -162,10 +144,7 @@ $tablet-scale: 0.75;
   flex-direction: column;
   width: 60%;
   gap: 16px;
-  display: flex;
-  flex-direction: column;
-  width: 60%;
-  gap: 16px;
+  gap: 6px;
 // border: 1px solid blue;
 
   &:hover{
@@ -176,6 +155,7 @@ $tablet-scale: 0.75;
     display: flex;
     height: 48px;
     padding: 0.75vw 1.3vw;
+    margin-bottom: 10px;
     justify-content: center;
     align-items: center;
     gap: 10px;
@@ -190,8 +170,6 @@ $tablet-scale: 0.75;
       text-align: center;
       font-family: "Metropolis", sans-serif;
       font-size: $button-font-size;
-      font-family: "Metropolis", sans-serif;
-      font-size: $button-font-size;
       font-style: normal;
       font-weight: 700;
       line-height: normal;
@@ -207,6 +185,7 @@ $tablet-scale: 0.75;
     display: flex;
     height: 48px;
     padding: 0.75vw 1.3vw;
+    margin-bottom: 10px;
     justify-content: center;
     align-items: center;
     gap: 10px;
@@ -230,8 +209,6 @@ $tablet-scale: 0.75;
       text-align: center;
       font-family: "Metropolis", sans-serif;
       font-size: $button-font-size;
-      font-family: "Metropolis", sans-serif;
-      font-size: $button-font-size;
       font-style: normal;
       font-weight: 700;
       line-height: normal;
@@ -247,13 +224,10 @@ $tablet-scale: 0.75;
     gap: 32px;
 
     span{
-      color: var(--teal-2, #173A52);
       color: var(--teal-2, #173A52);
       text-align: center;
       font-family: "Metropolis", sans-serif;
       font-size: $button-font-size;
-      font-family: "Metropolis", sans-serif;
-      font-size: $button-font-size;
       font-style: normal;
       font-weight: 700;
       line-height: normal;
@@ -264,34 +238,62 @@ $tablet-scale: 0.75;
 
 
   }
+
+  &_calendar {
+    // display: flex;
+    // flex-direction: row;
+    // justify-content: center;
+    // gap: 10px;
+    // font-family: "Metropolis", sans-serif;
+    // font-size: $button-font-size;
+    // text-align: center;
+    // font-style: normal;
+    // font-weight: 700;
+    // line-height: normal;
+    // letter-spacing: 0.48px;
+    text-align: center;
+    color: var(--teal-2, #173A52);
+    font-family: "Metropolis", sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    // font-weight: 500;
+    line-height: 110%;
+    letter-spacing: 0.48px;
+
+    span{
+      color: var(--teal-2, #173A52);
+      text-align: center;
+      font-style: normal;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: normal;
+      font-variant: all-small-caps;
+      letter-spacing: 0.48px;
+      text-decoration-line: underline;
+      padding: 0 5px;
+    }
+  }
 }
 @media (max-width: $tablet-breakpoint) {
   .container{
     width: calc(500px * 0.75);
     gap: 20px;
-    width: calc(500px * 0.75);
-    gap: 20px;
   }
   .title{
     &_ready{
       font-size: calc($ready-title-font-size * 0.75);
-      font-size: calc($ready-title-font-size * 0.75);
     }
     &_social{
       font-size: calc($social-title-font-size * 0.75);
-      font-size: calc($social-title-font-size * 0.75);
     }
     margin-bottom: 11px;
-    margin-bottom: 11px;
   }
   .calendar{
     &_inner{
       &_upper{
-        font-size: calc($calendar-upper-font-size * 0.75);
         font-size: calc($calendar-upper-font-size * 0.75);
         &_hackdavis{
           font-size: calc($calendar-upper-font-size * 0.75);
-          font-size: calc($calendar-upper-font-size * 0.75);
         }
       }
       &_lower{
@@ -303,9 +305,6 @@ $tablet-scale: 0.75;
         &_icon{
           width: $button-font-size ;
           height: $button-font-size;
-
-
-
         }
       }
     }
@@ -317,7 +316,6 @@ $tablet-scale: 0.75;
 
       p{
         font-size: calc($button-font-size * 0.75);
-        font-size: calc($button-font-size * 0.75);
       }
     }
     &_sponsor{
@@ -326,12 +324,17 @@ $tablet-scale: 0.75;
 
       p{
         font-size: calc($button-font-size * 0.75);
-        font-size: calc($button-font-size * 0.75);
       }
     }
     &_userType{
       span{
         font-size: calc($button-font-size * 0.75);
+      }
+    }
+
+    &_calendar{
+      font-size: calc($button-font-size * 0.75);
+      span{
         font-size: calc($button-font-size * 0.75);
       }
     }
@@ -350,7 +353,6 @@ $tablet-scale: 0.75;
     text-align: center;
     width: 100%;
     margin-top: 10%;
-    margin-top: 10%;
   }
   .buttons{
     justify-content: center;
@@ -403,10 +405,8 @@ $tablet-scale: 0.75;
     }
   }
   .buttons{
-    width: 100%;
     width: 100%;
     &_register{
-      width: 85%;
       width: 85%;
       height: 48px; 
       padding: 7.75px 13.0px;
@@ -415,7 +415,6 @@ $tablet-scale: 0.75;
       }
     }
     &_sponsor{
-      width: 85%;
       width: 85%;
       height: 48px;
       padding: 7.75px 13.0px;
@@ -425,7 +424,13 @@ $tablet-scale: 0.75;
     }
     &_userType{
       gap: 25px;
-      gap: 25px;
+      margin-bottom: 5px;
+      span{
+        font-size: 18px;
+      }
+    }
+    &_calendar{
+      font-size: 18px;
       span{
         font-size: 18px;
       }
diff --git a/app/(pages)/(index-page)/_components/Landing/_components/Form/Form.tsx b/app/(pages)/(index-page)/_components/Landing/_components/Form/Form.tsx
index 416cfa36..f8fca8fd 100644
--- a/app/(pages)/(index-page)/_components/Landing/_components/Form/Form.tsx
+++ b/app/(pages)/(index-page)/_components/Landing/_components/Form/Form.tsx
@@ -17,9 +17,16 @@ const FormLinks: { [key: string]: FormLink } = {
     title: 'Volunteer',
     url: 'https://form.typeform.com/to/MY8EI47D',
   },
-
   Mentor: { title: 'Mentor', url: 'https://form.typeform.com/to/cvy9LlyR' },
   Sponsor: { title: 'Sponsor', url: 'mailto:team@hackdavis.io' },
+  Calendar: {
+    title: 'HackDavis 2024 Calendar',
+    url: 'https://drive.google.com/file/d/1AGBLnS55qNEuGNXh9VLSdx2PaHsGVgE7/view?usp=drive_link',
+  },
+  StarterPack: {
+    title: 'Starter Pack',
+    url: 'https://hackdavis.notion.site/HackDavis-2024-Starter-Pack-bea21741698046e99e46f13c9b311039?pvs=4',
+  },
 };
 
 export default function Form() {
@@ -72,6 +79,19 @@ export default function Form() {
               <span>{FormLinks.Mentor.title}</span>
             </Link>
           </div>
+          <div className={styles.buttons_calendar}>
+            New to hackathons?
+            <Link href={FormLinks.StarterPack.url}>
+              <span>{FormLinks.StarterPack.title}</span>
+            </Link>
+          </div>
+          <div className={styles.buttons_calendar}>
+            Grab your
+            <Link href={FormLinks.Calendar.url}>
+              <span>{FormLinks.Calendar.title}</span>
+            </Link>
+            today!
+          </div>
         </div>
       </div>
     </div>