diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-14 19:55:06 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-14 19:55:22 +0800 |
commit | fab3a90d5add060f2bfeb1dc470373af03fd6d83 (patch) | |
tree | f3ac82df3b2d900cd49abd775fd79f05d4f9345f /packages/website/ts/@next/pages/about | |
parent | a04c54b4d8fe96bf4b2f51b674fa9df87a58c2bb (diff) | |
download | dexon-sol-tools-fab3a90d5add060f2bfeb1dc470373af03fd6d83.tar dexon-sol-tools-fab3a90d5add060f2bfeb1dc470373af03fd6d83.tar.gz dexon-sol-tools-fab3a90d5add060f2bfeb1dc470373af03fd6d83.tar.bz2 dexon-sol-tools-fab3a90d5add060f2bfeb1dc470373af03fd6d83.tar.lz dexon-sol-tools-fab3a90d5add060f2bfeb1dc470373af03fd6d83.tar.xz dexon-sol-tools-fab3a90d5add060f2bfeb1dc470373af03fd6d83.tar.zst dexon-sol-tools-fab3a90d5add060f2bfeb1dc470373af03fd6d83.zip |
Adds mission office photo
Diffstat (limited to 'packages/website/ts/@next/pages/about')
-rw-r--r-- | packages/website/ts/@next/pages/about/mission.tsx | 34 |
1 files changed, 27 insertions, 7 deletions
diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx index b06130345..286d2629f 100644 --- a/packages/website/ts/@next/pages/about/mission.tsx +++ b/packages/website/ts/@next/pages/about/mission.tsx @@ -35,13 +35,14 @@ export const NextAboutMission = () => ( linkLabel="Our mission and values" linkUrl="#" > - <Section isFullWidth={true}> - <Image - src="/images/@next/about/about-mission@2x.jpg" - height="372" - alt="" - isCentered={true} - /> + <Section isFullWidth={true} isPadded={false}> + <FullWidthImage> + <Image + src="/images/@next/about/about-office.png" + alt="0x Offices" + isCentered={true} + /> + </FullWidthImage> </Section> <Section isFlex={true} maxWidth="1170px" wrapWidth="100%"> @@ -74,3 +75,22 @@ const StyledDefinition = styled(Definition)` border-top: 1px solid #eaeaea; } `; + +const FullWidthImage = styled.figure` + width: 100vw; + margin-left: calc(50% - 50vw); + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + @media (min-width: 768px) { + height: 500px; + } + + @media (max-width: 768px) { + height: 400px; + } +`; |