diff --git a/public/team/anthony-gonzalez.png b/public/team/anthony-gonzalez.png new file mode 100644 index 0000000..4b422c3 Binary files /dev/null and b/public/team/anthony-gonzalez.png differ diff --git a/public/team/jennifer-yu.png b/public/team/jennifer-yu.png new file mode 100644 index 0000000..cc530e5 Binary files /dev/null and b/public/team/jennifer-yu.png differ diff --git a/public/team/lina-palaka.png b/public/team/lina-palaka.png new file mode 100644 index 0000000..b62b25b Binary files /dev/null and b/public/team/lina-palaka.png differ diff --git a/public/team/marina-hu.png b/public/team/marina-hu.png new file mode 100644 index 0000000..3f1a8e0 Binary files /dev/null and b/public/team/marina-hu.png differ diff --git a/public/team/murou-wang.png b/public/team/murou-wang.png new file mode 100644 index 0000000..5d0f41c Binary files /dev/null and b/public/team/murou-wang.png differ diff --git a/public/team/osheen-tikku.png b/public/team/osheen-tikku.png new file mode 100644 index 0000000..d234821 Binary files /dev/null and b/public/team/osheen-tikku.png differ diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx new file mode 100644 index 0000000..4f1ca1a --- /dev/null +++ b/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 ( +
+ + +
+ ); +}; + +export default About; diff --git a/src/app/about/style.module.scss b/src/app/about/style.module.scss new file mode 100644 index 0000000..6ffdee4 --- /dev/null +++ b/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; + } +} diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx index 88941fe..a6c0ab6 100644 --- a/src/components/Card/index.tsx +++ b/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 (
-
+
Event image
{children}
diff --git a/src/components/TeamCard/index.tsx b/src/components/TeamCard/index.tsx new file mode 100644 index 0000000..3633c7c --- /dev/null +++ b/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 ( + + + {title} + + + {position} + + + ); +}; + +export default TeamCard; diff --git a/src/components/TeamCard/style.module.scss b/src/components/TeamCard/style.module.scss new file mode 100644 index 0000000..eda6fd0 --- /dev/null +++ b/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; + } + } + \ No newline at end of file diff --git a/src/sections/about/Hero/index.tsx b/src/sections/about/Hero/index.tsx new file mode 100644 index 0000000..33fe85d --- /dev/null +++ b/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 ( +
+
+ Hello World! + + Join us in our endeavor to empower the next generation of programmers, builders, and leaders. + +
+
+ ); +} diff --git a/src/sections/about/Hero/style.module.scss b/src/sections/about/Hero/style.module.scss new file mode 100644 index 0000000..7c69517 --- /dev/null +++ b/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; +} + diff --git a/src/sections/about/MeetTeam/index.tsx b/src/sections/about/MeetTeam/index.tsx new file mode 100644 index 0000000..0d73c4d --- /dev/null +++ b/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 ( +
+
+ Meet Our Team +
+
+
+ {team.map((item, index) => ( + + ))} +
+
+
+ ); +} diff --git a/src/sections/about/MeetTeam/style.module.scss b/src/sections/about/MeetTeam/style.module.scss new file mode 100644 index 0000000..5cd2003 --- /dev/null +++ b/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; + } + } +} diff --git a/src/sections/about/MeetTeam/team.ts b/src/sections/about/MeetTeam/team.ts new file mode 100644 index 0000000..89a7f38 --- /dev/null +++ b/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; \ No newline at end of file