Adds mission office photo

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;
+    }
+`;