Update About Page

components/grid/grid.module.scss

@@ -28,5 +28,6 @@
     width: 100%;
     height: 100%;
     object-fit: contain;
+
   }
 }

components/team/team-item.interface.ts

@@ -0,0 +1,5 @@
+export interface TeamItemI {
+  name: string;
+  role: string;
+  imagePath: string;
+}

components/team/team.module.scss

@@ -0,0 +1,57 @@
+@import '../../styles/styles.scss';
+
+.team {
+  text-align: center;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: auto;
+  gap: 24px;
+
+  @include ksm {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: auto;
+    gap: 24px;
+  }
+
+  @include sm {
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: auto;
+    gap: 24px;
+  }
+
+  @include md {
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: auto;
+    gap: 32px 48px;
+  }
+
+  .images {
+    border-radius: 50%;
+    object-fit: contain;
+    border: 5px solid $salmon;
+
+    &:nth-of-type(4n + 2) {
+      border: 2px solid $midori;
+    }
+
+    &:nth-of-type(4n + 3) {
+      border: 2px solid $pacific;
+    }
+
+    &:nth-of-type(4n + 4) {
+      border: 2px solid $primary;
+    }
+  }
+
+  .content {
+    h3 {
+      margin-top: $base;
+      font-size: 16px;
+    }
+
+    p {
+      margin: 0;
+      font-size: 14px;
+    }
+  }
+}

components/team/team.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames/bind';
+import styles from './team.module.scss';
+import { TeamItemI } from './team-item.interface';
+import Image from 'next/image';
+import { H3, Text } from '@components/typography/typography';
+
+const cx = classNames.bind(styles);
+
+type Props = {
+  items: TeamItemI[];
+  basePath: string;
+  style?: string;
+};
+
+const Team = ({ style, basePath, items }: Props) => {
+  const teamItems = items.map((item: TeamItemI) => (
+    <div key={item.name}>
+      <Image
+        className={styles.images}
+        src={`${basePath}${item.imagePath}`}
+        alt={item.name}
+        height="500"
+        width="500"
+      />
+      <div className={styles.content}>
+      <H3>{item.name}</H3>
+      <Text className={styles.title}>{item.role}</Text>
+      </div>
+    </div>
+  ));
+
+  return <div className={cx('team', style)}>{teamItems}</div>;
+};
+
+export default Team;

content/about/team.json

@@ -0,0 +1,100 @@
+{
+  "base": "/images/team",
+  "members": [
+    {
+      "name": "Becca Chang",
+      "imagePath": "/Blank.png",
+      "role": "President"
+    },
+    {
+      "name": "Terence Huynh",
+      "imagePath": "/Terence.png",
+      "role": "Tech Lead"
+    },
+    {
+      "name": "Daniel Sykes-Turner",
+      "imagePath": "/Daniel.jpg",
+      "role": "Treasurer"
+    },
+    {
+      "name": "Nicholas Whittaker",
+      "imagePath": "/nickw.png",
+      "role": "Logistics Lead"
+    },
+    {
+      "name": "Kevin Lu",
+      "imagePath": "/blank.png",
+      "role": "Sponsorship Lead"
+    },
+    {
+      "name": "Alfie Torres",
+      "imagePath": "/Blank.png",
+      "role": "Marketing Lead"
+    },
+    {
+      "name": "Pauline Mascarinas",
+      "imagePath": "/Blank.png",
+      "role": "Marketing Officer"
+    },
+    {
+      "name": "Milindi Kodikara",
+      "imagePath": "/mili.jpeg",
+      "role": "Marketing Officer"
+    },
+    {
+      "name": "Joey Yuen",
+      "imagePath": "/Blank.png",
+      "role": "Marketing Officer"
+    },
+    {
+      "name": "Nick Ang",
+      "imagePath": "/nicka.jpeg",
+      "role": "Tech Officer"
+    },
+    {
+      "name": "Austin Pham",
+      "imagePath": "/Blank.png",
+      "role": "Tech Officer"
+    },
+    {
+      "name": "Sameer Syed",
+      "imagePath": "/Blank.png",
+      "role": "Tech Officer"
+    },
+    {
+      "name": "Madeline Long",
+      "imagePath": "/Blank.png",
+      "role": "Tech Officer"
+    },
+    {
+      "name": "Uday Kumar",
+      "imagePath": "/Blank.png",
+      "role": "Logistics Officer"
+    },
+    {
+      "name": "Yagebu Xie",
+      "imagePath": "/Blank.png",
+      "role": "Logistics Officer"
+    },
+    {
+      "name": "Karl-Samouth Cheam",
+      "imagePath": "/Blank.png",
+      "role": "Logistics Officer"
+    },
+    {
+      "name": "Bryan Wong",
+      "imagePath": "/Blank.png",
+      "role": "Sponsorship Officer"
+    },
+    {
+      "name": "Palaash Srivastava",
+      "imagePath": "/Blank.png",
+      "role": "Sponsorship Officer"
+    },
+    {
+      "name": "Irene Ung",
+      "imagePath": "/Blank.png",
+      "role": "Sponsorship Officer"
+    }
+  ]
+}

pages/about/index.tsx

@@ -4,25 +4,22 @@ import Head from 'next/head';
 import Page from '../../layouts/page/page';
 import AboutUs from '../../sections/about-us/about-us';
 import Diversity from '../../sections/diversity/diversity';
-import Privacy from '../../sections/privacy/privacy';
-import { PageNavigation } from '@components/page-navigation/page-navigation';
+import Stats from '../../sections/stats/stats';
+import AboutHero from '../../sections/about-hero/about-hero';
+import MeetTheTeam from '../../sections/meet-the-team/meet-the-team';
+
 
 export default () => (
   <div>
     <Head>
       <title>About Us - UNIHACK</title>
     </Head>
     <Page>
-      <PageNavigation
-        backLinkTitle="Home"
-        backLinkHref="/"
-        underlineColor="yellow"
-      >
-        About Us
-      </PageNavigation>
+      <AboutHero />
+      <Stats />
       <AboutUs />
+      <MeetTheTeam />
       <Diversity />
-      <Privacy />
     </Page>
   </div>
 );

sections/about-hero/about-hero.module.scss

@@ -0,0 +1,90 @@
+@import "../../styles/styles.scss";
+@import "../../styles/spacing.scss";
+@import "../../styles/typography/typography.scss";
+
+.about-hero-container {
+  z-index: 1;
+}
+
+.about-hero {
+  z-index: 0;
+  padding: $space-xxlarge 0;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  background: $primary;
+  // box-sizing: content-box !important;
+  position: relative;
+
+  @include md {
+    height: 400px;
+  }
+
+  &-container {
+    @include page-margin;
+
+    @include sm {
+      text-align: center;
+    }
+
+    @include lg {
+      max-width: 760px;
+    }
+
+    h1 {
+      font-weight: 600;
+      line-height: 42px;
+      font-size: 32px;
+      letter-spacing: -1px;
+      margin: 0 0 $base * 4;
+      color: black;
+
+      span {
+        display: inline-block;
+      }
+
+      @include md {
+        line-height: 70px;
+        font-size: 64px;
+      }
+    }
+
+    p {
+      margin: 0 0 $base * 4;
+      font-size: 18px;
+      line-height: 28px;
+      color: white;
+    }
+  }
+
+  &-link {
+    background-color: transparent !important;
+  }
+
+  &-event-data {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    text-align: left;
+
+    @include sm {
+      flex-direction: row;
+      margin: 0 0 $base * 4;
+    }
+
+    &-content {
+      margin: 0 0 $base * 4;
+      h4 {
+        color: white;
+      }
+      @include sm {
+        margin: 0 $base * 2;
+
+        p {
+          padding-bottom: $base;
+          border-bottom: 3px solid $primary;
+        }
+      }
+    }
+  }
+}

sections/about-hero/about-hero.tsx

@@ -0,0 +1,16 @@
+import { H2XL } from '@components/typography/typography';
+import React from 'react';
+import styles from './about-hero.module.scss';
+
+
+const Abouthero = () => (
+  <section className={styles['about-hero']}>
+    <div className={styles['about-hero-container']}>
+      <H2XL>
+        We help build the next generation of makers and thinkers
+      </H2XL>
+    </div>
+  </section>
+);
+
+export default Abouthero;

sections/about-us/about-us.module.scss

@@ -2,15 +2,14 @@
 
 .about-us {
   display: flex;
-  align-items: center;
   flex-direction: column;
-  padding-top: $base * 7;
-  padding-bottom: $base * 7;
+  align-items: center;
+  padding-top: $base * 10;
+  padding-bottom: $base * 20;
 
   &-content {
     @include page-margin;
     display: flex;
-    flex-direction: column;
     align-items: center;
 
     h1 {
@@ -24,6 +23,10 @@
       font-weight: 400;
     }
 
-
   }
 }
+
+.about-us-container {
+   display: flex;
+   width: 80%;
+}