Skip to content

Commit

Permalink
added starter pack and calendar links
Browse files Browse the repository at this point in the history
  • Loading branch information
@trishnasharma
trishnasharma committed Apr 4, 2024
1 parent 73ef388 commit 3bf19ef
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 47 deletions.
97 changes: 51 additions & 46 deletions app/(pages)/(index-page)/_components/Landing/_components/Form/Form.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;
}


Expand All @@ -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;
}
}

Expand All @@ -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 */
Expand All @@ -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{
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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{
Expand All @@ -303,9 +305,6 @@ $tablet-scale: 0.75;
&_icon{
width: $button-font-size ;
height: $button-font-size;



}
}
}
Expand All @@ -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{
Expand All @@ -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);
}
}
Expand All @@ -350,7 +353,6 @@ $tablet-scale: 0.75;
text-align: center;
width: 100%;
margin-top: 10%;
margin-top: 10%;
}
.buttons{
justify-content: center;
Expand Down Expand Up @@ -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;
Expand All @@ -415,7 +415,6 @@ $tablet-scale: 0.75;
}
}
&_sponsor{
width: 85%;
width: 85%;
height: 48px;
padding: 7.75px 13.0px;
Expand All @@ -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;
}
Expand Down
22 changes: 21 additions & 1 deletion app/(pages)/(index-page)/_components/Landing/_components/Form/Form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:[email protected]' },
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() {
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 3bf19ef

Please sign in to comment.