Update Fonts

main-site/components/landing-section/LandingSection.tsx

@@ -84,6 +84,7 @@ const LandingSection: React.FC<LandingSectionProps> = ({ isDay, setIsDay }) => {
         <StyledLandingButtonContainer
           btnText="Apply"
           btnLink="https://hackbeanpot.us10.list-manage.com/subscribe?u=a98050d47fdae2481521f0474&id=dccd8c8431"
+          isApplyButton={true}
           newTab
         />
         <StyledCountdownContainer>

main-site/components/past-photos-section/PastPhotosSection.styles.ts

@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 import { max } from '../../../shared-ui/lib/responsive';
 
 const StyledPhotosSection = styled.div`
-  padding-top: 10em;
   position: relative;
   @media ${max.tablet} {
     padding-bottom: 5em;

main-site/components/past-projects-section/PastProjectsSection.styles.ts

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { colors } from '../../../shared-ui/style/colors';
 import { H2, H3, P } from '../../../shared-ui/style/typography';
 import { max, min } from '../../../shared-ui/lib/responsive';
+import { PastProjectProps } from '../../lib/types';
 
 const StyledArrowContainer = styled.div`
   display: flex;
@@ -65,8 +66,10 @@ const StyledPastProjectsInfo = styled.div`
   };
 `;
 
-const StyledPastProjectsInfoContainer = styled.div`
+const StyledPastProjectsInfoContainer = styled.div<PastProjectProps>`
   text-align: center;
+  background-color: ${(props): string => props.isDay ? colors.DARK_BLUE : colors.DEEP_SEA_BLUE};
+  padding-bottom: 5em;
 `;
 
 const StyledPastProjectsTitle = styled(H2)`
@@ -144,6 +147,9 @@ const StyledPastProjectsViewText = styled(P)`
   @media ${max.tabletLg} {
     margin-right: 3em;
     margin-left: 3em;
+    padding-left: 5em;
+    padding-right: 5em;
+    font-size: 0.75em;
   }
 
   @media ${max.tablet} {

main-site/components/past-projects-section/PastProjectsSection.tsx

@@ -28,10 +28,10 @@ import {
 import PrimaryButton from '../../../shared-ui/components/primary-button/PrimaryButton';
 import { min } from '../../../shared-ui/lib/responsive';
 import { pastProjectsData } from '../../lib/data';
-import { PastProjectData } from '../../lib/types';
+import { PastProjectData, PastProjectProps } from '../../lib/types';
 import { getLeftOrRight } from '../../lib/utils';
 
-const PastProjectsSection: React.FC = () => {
+const PastProjectsSection: React.FC<PastProjectProps> = ({ isDay }) => {
   const [currItem, setCurrItem] = useState<PastProjectData>(
     pastProjectsData[0]
   );
@@ -131,7 +131,7 @@ const PastProjectsSection: React.FC = () => {
 
       <StyledTreasureChest src={TreasureChest} />
 
-      <StyledPastProjectsInfoContainer>
+      <StyledPastProjectsInfoContainer isDay={isDay}>
         <StyledPastProjectsViewText>
           Interested in seeing more about our past events and past hacker
           projects?

main-site/lib/types.ts

@@ -84,6 +84,10 @@ export interface PastProjectData {
   award?: string;
 }
 
+export interface PastProjectProps {
+  isDay: boolean;
+}
+
 export interface StyledSponsorsImageProps {
   level: string;
 }

main-site/src/pages/index.tsx

@@ -55,12 +55,12 @@ const IndexPage: React.FC = () => {
       <AboutSection />
       <EventsCalendarSection isDay={isDay}/>
       <TestimonialsSection testimonialData={testimonialSectionData}/>
-      <PastProjectsSection />
-      <FaqSection />
+      <PastProjectsSection isDay={isDay} />
       <PastPhotosSection />
+      <FaqSection />
       {/* <CovidSection /> */}
-      <MeetTheTeamSection />
       <SponsorsSection />
+      <MeetTheTeamSection />
       <AdventureAheadSection />
       {/* <TimeRemaining target={new Date('02/10/2023 18:00:00')} /> */}
       <Footer tabs={mainSiteTabInfo} isDay={isDay} />

shared-ui/components/meet-the-team/team-column/desktop-team-column/DesktopTeamColumn.styles.ts

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { max } from '../../../../lib/responsive';
+import { fonts } from '../../../../../shared-ui/style/typography'
 
 const StyledTeamColumn = styled.div`
   flex-direction: column;
@@ -37,7 +38,7 @@ display: flex
 align-items: center; 
 justify-content: center;
 text-decoration: none;
-font-family: 'Nunito Sans', sans-serif;
+font-family: ${fonts.nunitoSansRegular};
 margin-top: 0.5em;
 
 img {

shared-ui/components/meet-the-team/team-column/mobile-team-column/MobileTeamColumn.styles.ts

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { max } from '../../../../lib/responsive';
+import { fonts } from '../../../../../shared-ui/style/typography'
 
 const StyledMobileTeamColumn = styled.div`
   padding-top: 2.5em;
@@ -45,7 +46,7 @@ const StyledLinkedIn = styled.a`
   color: white;
   text-decoration: none;
   width: 100%;
-  font-family: 'Nunito Sans', sans-serif;
+  font-family: ${fonts.nunitoSansRegular};
 
   img {
     width: 1.0em;

shared-ui/components/primary-button/PrimaryButton.styles.ts

@@ -1,34 +1,32 @@
 import styled from 'styled-components';
 import { colors } from '../../style/colors';
 import { fonts } from '../../style/typography';
-import { min } from '../../lib/responsive';
+import { max } from '../../lib/responsive';
 import { motion } from 'framer-motion';
 import { StyledPrimaryButtonProps } from '../../lib/types';
 
 const StyledPrimaryButton = styled(motion.button)<StyledPrimaryButtonProps>`
-  color: ${(props): string => 
+  color: ${(props): string => props.$isApplyButton ? colors.WHITE :
     props.$transparent ? colors.BUTTON_YELLOW : colors.TEXT_DARKBLUE};
-  background-color: ${(props): string => 
+  background-color: ${(props): string => props.$isApplyButton ? colors.BUTTON_RED :
     props.$transparent ? colors.TRANSPARENT : colors.BUTTON_YELLOW};
-  border-color: ${colors.BUTTON_YELLOW} !important;
   font-family: ${fonts.nunitoSansSemibold};
   transition-duration: 0.5s;
   &:hover {
-    color: ${colors.TEXT_DARKBLUE};
-    background-color: ${colors.BUTTON_DARK_YELLOW};
-    border-color: ${colors.BUTTON_DARK_YELLOW} !important;
+    color: ${(props): string => props.$isApplyButton ? colors.WHITE : colors.TEXT_DARKBLUE};
+    background-color: ${(props): string => props.$isApplyButton ? colors.BUTTON_RED : colors.BUTTON_DARK_YELLOW};
   }
-  padding-right: ${(props): string =>
-    props.$isSmallPrimary ? '1.5em' : '1em'};
-  padding-left: ${(props): string => (props.$isSmallPrimary ? '1.5em' : '1em')};
-  padding-top: ${(props): string => (props.$isSmallPrimary ? '0.5em' : '1em')};
-  padding-bottom: ${(props): string =>
-    props.$isSmallPrimary ? '0.5em' : '1em'};
+  padding-right: ${(props): string => props.$isApplyButton ? '3em' : props.$isSmallPrimary ? '1.5em' : '1em'};
+  padding-left: ${(props): string => props.$isApplyButton ? '3em' : props.$isSmallPrimary ? '1.5em' : '1em'};
+  padding-top: ${(props): string => props.$isApplyButton ? '0.5em' : props.$isSmallPrimary ? '0.5em' : '1em'};
+  padding-bottom: ${(props): string => props.$isApplyButton ? '0.5em' : props.$isSmallPrimary ? '0.5em' : '1em'};
   border-radius: 2em;
-  border: 0.1em solid;
+  border: 0.1em;
   font-size: 1.4em;
   text-decoration: none;
-  @media ${min.tablet} {
+  @media ${max.tabletLg} {
+    padding-right: ${(props): string => props.$isApplyButton ? '10vw' : props.$isSmallPrimary ? '1.5em' : '1em'};
+    padding-left: ${(props): string => props.$isApplyButton ? '10vw' : props.$isSmallPrimary ? '1.5em' : '1em'};
     font-size: 1.2em;
   }
 `;

shared-ui/components/primary-button/PrimaryButton.tsx

@@ -8,7 +8,8 @@ const PrimaryButton: React.FC<ButtonProps> = ({
   btnLink,
   newTab = false,
   isSmallPrimary = false,
-  transparent = false
+  transparent = false,
+  isApplyButton = false,
 }) => {
   const [isClicked, setIsClicked] = useState(false);
   if (!btnLink) {
@@ -28,7 +29,7 @@ const PrimaryButton: React.FC<ButtonProps> = ({
     };
     return (
       <a onClick={onClick}>
-        <StyledPrimaryButton $isSmallPrimary={isSmallPrimary} $transparent={transparent}>
+        <StyledPrimaryButton $isSmallPrimary={isSmallPrimary} $transparent={transparent} $isApplyButton={isApplyButton}>
           {ctaText}
         </StyledPrimaryButton>
       </a>
@@ -43,6 +44,7 @@ const PrimaryButton: React.FC<ButtonProps> = ({
         variants={buttonAnimations}
         $isSmallPrimary={isSmallPrimary}
         $transparent={transparent}
+        $isApplyButton={isApplyButton}
       >
         {btnText}
       </StyledPrimaryButton>

shared-ui/components/secondary-button/SecondaryButton.styles.ts

@@ -1,9 +1,11 @@
 import styled from 'styled-components';
-import { max, min } from '../../lib/responsive';
+import { max } from '../../lib/responsive';
 import { StyledSecondaryButtonProps } from '../../lib/types';
 import { colors } from '../../style/colors';
+import { fonts } from '../../../shared-ui/style/typography'
 
 const StyledSecondaryButton = styled.button<StyledSecondaryButtonProps>`
+  font-family: ${fonts.nunitoRegular};
   color: ${colors.WHITE};
   background-color: ${colors.BUTTON_RED};
   border-color: ${colors.BUTTON_RED};

shared-ui/lib/types.ts

@@ -3,6 +3,7 @@ import { MouseEventHandler } from 'react';
 export interface StyledPrimaryButtonProps {
   $isSmallPrimary: boolean | undefined;
   $transparent: boolean | undefined;
+  $isApplyButton: boolean | undefined;
 }
 
 export interface ButtonProps {
@@ -13,6 +14,7 @@ export interface ButtonProps {
   isSmallPrimary?: boolean;
   isClickable?: boolean;
   transparent?: boolean;
+  isApplyButton?: boolean;
 }
 
 export interface TimeRemainingProps {

shared-ui/style/colors.ts

@@ -46,6 +46,8 @@ const colors = {
   RACE_LINE: '#ffe799',
   YELLOW_GREEN: '#E5C37D',
   SAND_HIGHLIGHTS: '#F3EFE3',
+  DEEP_SEA_BLUE: '#193C60',
+  DARK_BLUE: '#002041',
 
   // for primary button
   BUTTON_YELLOW: '#FABB32',

shared-ui/style/typography.ts

@@ -20,6 +20,7 @@ const H1 = styled.h1`
 `;
 
 const H2 = styled.h2`
+  color: ${colors.WHITE};
   font-family: ${fonts.nunitoSansRegular};
   font-size: clamp(1.5em, 8.2vw, 3.1em);
   margin: 0;