diff --git a/landing/team.css b/landing/team.css new file mode 100644 --- /dev/null +++ b/landing/team.css @@ -0,0 +1,52 @@ +.wrapper { + padding: 16px 0; + margin: 0 auto 48px auto; +} + +.header { + font-family: 'iA Writer Duo S', monospace; + font-weight: 500; + line-height: 1.35; + text-align: center; + --scale: calc(0.75rem + 2vw); + --smallest-font-size: 30px; + --largest-font-size: 50px; + --smallest-padding-size: 32px; + --largest-padding-size: 64px; + + padding-bottom: clamp( + var(--smallest-padding-size), + var(--scale), + var(--largest-padding-size) + ); + + font-size: clamp( + var(--smallest-font-size), + var(--scale), + var(--largest-font-size) + ); +} + +.teamWrapper { + transition-property: max-width; + transition: 300ms; + display: flex; + flex-wrap: wrap; + row-gap: 16px; + justify-content: center; + min-width: 320px; + margin: 0 auto; + padding-bottom: 72px; +} + +div.headingContent { + text-align: center; + padding-bottom: 72px; +} + +p.team { + max-width: 60ch; + margin: 0 auto; + padding: 0 16px 36px 16px; + font-size: 1.6rem; +} diff --git a/landing/team.react.js b/landing/team.react.js --- a/landing/team.react.js +++ b/landing/team.react.js @@ -3,48 +3,71 @@ import * as React from 'react'; import { assetsCacheURLPrefix } from './asset-meta-data'; +import Button from './button.react.js'; import TeamProfile from './team-profile.react.js'; +import css from './team.css'; function Team(): React.Node { + const onRoleClick = () => { + window.open( + 'https://www.notion.so/commapp/Comm-is-hiring-db097b0d63eb4695b32f8988c8e640fd', + '_blank', + ); + }; return ( -
-

Team

+
+

Team

+
- - - - - +
+

+ Expo started with helping people build awesome projects. Each day + our team continues to grow and empower more creators in the world to + do that. +

+ +
+
+ + + + + +
+
+ +

Team at Software Mansion

+