Added meet our team section

src/app/about/page.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Image from 'next/image';
+import styles from './style.module.scss';
+import Typography from '@/components/Typography';
+import MeetTeam from '@/sections/about/MeetTeam';
+import Hero from '@/sections/about/Hero';
+
+const About: React.FC = () => {
+  return (
+    <main className={styles.main}>
+        <Hero />
+        <MeetTeam />
+    </main>
+  );
+};
+
+export default About;

src/app/about/style.module.scss

@@ -0,0 +1,17 @@
+@use 'src/styles/vars.scss' as vars;
+
+.main {
+  padding: 9.25rem 0;
+  gap: 9.25rem;
+  width: 80%;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  @media screen and (width < vars.$breakpoint) {
+    width: auto;
+    padding: 3.5rem 2rem;
+    gap: 3.5rem;
+  }
+}

src/components/Card/index.tsx

@@ -6,12 +6,13 @@ interface EventCardProps {
   image: string;
   children: ReactNode;
   className?: string;
+  aspectRatio?: number;
 }
 
-const Card = ({ image, children, className }: EventCardProps) => {
+const Card = ({ image, children, className, aspectRatio }: EventCardProps) => {
   return (
     <div className={`${styles.card} ${className || ''}`}>
-      <div className={styles.picture}>
+      <div className={styles.picture} style={{aspectRatio}}>
         <Image src={image} alt="Event image" objectFit="cover" fill />
       </div>
       <div className={styles.cardContent}>{children}</div>

src/components/TeamCard/index.tsx

@@ -0,0 +1,24 @@
+import Image from 'next/image';
+import styles from './style.module.scss';
+import Typography from '../Typography';
+import Card from '../Card';
+
+interface TeamCardProps {
+  image: string;
+  team: { title: string; position: string};
+}
+
+const TeamCard = ({ image, team: { title, position } }: TeamCardProps ) => {
+  return (
+    <Card image={image} className={styles.card} aspectRatio={9 / 8}>
+      <Typography variant="body" className={styles.heading}>
+        {title}
+      </Typography>
+      <Typography variant="label" className={styles.date}>
+        {position}
+      </Typography>
+    </Card>
+  );
+};
+
+export default TeamCard;

src/components/TeamCard/style.module.scss

@@ -0,0 +1,24 @@
+.card {
+    width: 22.5rem;
+  }
+
+  .teamCard {
+    display: flex;
+    flex-direction: column;
+    flex: none;
+    width: 22.5rem;
+    border-radius: 0.75rem;
+    border: 1px solid #c3c6cf;
+    background-color: #faf9fc;
+    overflow: hidden;
+
+    .picture {
+      aspect-ratio: 9 / 8;
+      position: relative;
+    }
+
+    .cardContent {
+      padding: 1rem;
+    }
+  }
+

src/sections/about/Hero/index.tsx

@@ -0,0 +1,15 @@
+import Typography from '@/components/Typography';
+import styles from './style.module.scss';
+
+export default function Hero() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.description}>
+        <Typography variant="display/medium">Hello World!</Typography>
+        <Typography variant="subheading">
+            Join us in our endeavor to empower the next generation of programmers, builders, and leaders.
+        </Typography>
+      </div>
+    </div>
+  );
+}

src/sections/about/Hero/style.module.scss

@@ -0,0 +1,23 @@
+@use 'src/styles/vars.scss' as vars;
+
+.container {
+  display: flex;
+  grid-template-columns: 1fr minmax(auto, 400px);
+  align-items: center;
+  grid-gap: 3rem;
+
+  @media screen and (width < 1100px) {
+    grid-template-columns: 1fr;
+    justify-items: center;
+
+    grid-gap: 2rem;
+  }
+}
+
+.description {
+  display: flex;
+  flex-direction: column;
+  grid-area: description;
+  gap: 1rem;
+}
+

src/sections/about/MeetTeam/index.tsx

@@ -0,0 +1,22 @@
+import Typography from '@/components/Typography';
+import styles from './style.module.scss';
+import Image from 'next/image';
+import team from './team';
+import TeamCard from '@/components/TeamCard';
+
+export default function MeetTeam() {
+  return (
+    <div className={styles.container}>
+        <div className={styles.description}>
+            <Typography variant="display/medium">Meet Our Team</Typography>
+        </div>
+        <div className={styles.wrapper}>
+          <div className={styles.teamGrid}>
+            {team.map((item, index) => (
+              <TeamCard key={index} {...item} />
+            ))}
+          </div>
+      </div>
+    </div>
+  );
+}

src/sections/about/MeetTeam/style.module.scss

@@ -0,0 +1,34 @@
+@use 'src/styles/vars.scss' as vars;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  align-self: flex-start;
+  width: 100%;
+
+  .description {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .wrapper {
+    display: flex;
+    overflow: hidden;
+
+    .teamGrid {
+      display: grid;
+
+      @media screen and (width < vars.$breakpoint) {
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr;
+      }
+
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-rows: 1fr 1fr;
+      padding: 1rem 0;
+      gap: 1rem;
+    }
+  }
+}

src/sections/about/MeetTeam/team.ts

@@ -0,0 +1,46 @@
+const team = [
+    {
+        image: '/team/murou-wang.png',
+        team: {
+            title: 'Murou Wang',
+            position: 'Vice President Outreach',
+        },
+    },
+    {
+        image: '/team/lina-palaka.png',
+        team: {
+            title: 'Lina Palaka',
+            position: 'Logistics Lead',
+        },
+    },
+    {
+        image: '/team/marina-hu.png', 
+        team: {
+            title: 'Marina Hu',
+            position: 'Logistics Lead',
+        },
+    },
+    {
+        image: '/team/anthony-gonzalez.png',
+        team: {
+            title: 'Anthony Gonzalez',
+            position: 'Content Director',
+        },
+    },
+    {
+        image: '/team/jennifer-yu.png',
+        team: {
+            title: 'Jennifer Yu',
+            position: 'Content Director',
+        },
+    },
+    {
+        image: '/team/osheen-tikku.png',
+        team: {
+            title: 'Osheen Tikku',
+            position: 'Content Director',
+        },
+    },
+];
+
+export default team;