team illustration, paddings

frontend/pages/team/index.js

@@ -9,6 +9,8 @@ import {
   useMediaQuery,
   UnorderedList,
   ListItem,
+  Box,
+  SimpleGrid,
 } from "@chakra-ui/react";
 import { DEFAULT_METATAGS } from "../../src/core/constants";
 import UIContext from "../../src/core/providers/UIProvider/context";
@@ -21,6 +23,7 @@ const assets = {
   background1920: `${AWS_PATH}/blog-background-720x405.png`,
   background2880: `${AWS_PATH}/blog-background-720x405.png`,
   background3840: `${AWS_PATH}/blog-background-720x405.png`,
+  team: `${AWS_PATH}/Team-page-illustration.png`,
 };
 
 const Product = () => {
@@ -116,11 +119,20 @@ const Product = () => {
       alignItems="center"
       w="100%"
     >
-      <Stack mx={margin} my={6} maxW="1700px">
+      <Stack mx={margin} mt={6} maxW="1700px" w="100%">
-        <Heading as="h2" size="md" w="100%" px={12} py={2} borderTopRadius="xl">
+        <SimpleGrid
+          px={12}
+          alignItems="start"
+          columns={{ base: 1, md: 2 }}
+          // mb={24}
+          spacingY={{ base: 10, md: 32 }}
+          spacingX={{ base: 10, md: 24 }}
+        >
+          <Box>
+            <Heading as="h2" size="md" w="100%" py={2} borderTopRadius="xl">
               Meet The Moonstream Team
             </Heading>
-        <chakra.span pl={2} px={12} py={2}>
+            <chakra.span pl={2} py={2}>
               <Text mb={2}>
                 We are a distributed team of nerds with very strong expertise in
                 math, software engineering, machine learning, and cryptography.
@@ -128,26 +140,29 @@ const Product = () => {
                 companies.
               </Text>
               <Text mb={2}>
-            We believe that the crypto world opens opportunities for financial
+                We believe that the crypto world opens opportunities for
-            inclusion. Meaning that people from all walks of life and financial
+                financial inclusion. Meaning that people from all walks of life
-            situations can have a new source of income. We are passionate about
+                and financial situations can have a new source of income. We are
-            developing technology that helps people become active participants
+                passionate about developing technology that helps people become
-            in this field and take advantage of this opportunity. We’re striving
+                active participants in this field and take advantage of this
-            to debunk harmful stereotypes and make the crypto field more
+                opportunity. We’re striving to debunk harmful stereotypes and
-            inclusive.
+                make the crypto field more inclusive.
               </Text>
             </chakra.span>
+          </Box>
+          <Box
+            w="full"
+            h="full"
+            py={48}
+            backgroundImage={`url(${assets[`team`]})`}
+            backgroundSize="cover"
+            bgPos="bottom"
+            bgColor="transparent"
+          ></Box>
+        </SimpleGrid>
       </Stack>
-      <Stack mx={margin} my={6} maxW="1700px">
+      <Stack mx={margin} my={6} maxW="1700px" w="100%">
-        <Heading
+        <Heading as="h2" size="md" w="100%" px={12} py={2} borderTopRadius="xl">
-          as="h2"
-          size="md"
-          w="100%"
-          //   bgColor="gray.200"
-          px={12}
-          py={2}
-          borderTopRadius="xl"
-        >
           Values that we share within our team:
         </Heading>
         <chakra.span pl={2} px={12} py={2}>
@@ -175,16 +190,8 @@ const Product = () => {
           </Text>
         </chakra.span>
       </Stack>
-      <Stack mx={margin} mb={12} maxW="1700px">
+      <Stack mx={margin} mb={12} maxW="1700px" w="100%">
-        <Heading
+        <Heading as="h2" size="md" w="100%" px={12} py={2} borderTopRadius="xl">
-          as="h2"
-          size="md"
-          w="100%"
-          // bgColor="gray.200"
-          px={12}
-          py={2}
-          borderTopRadius="xl"
-        >
           Our engineering team
         </Heading>
         <chakra.span pl={2} px={12} py={2}>
@@ -220,7 +227,7 @@ const Product = () => {
           </UnorderedList>
         </chakra.span>
       </Stack>
-      <Stack mx={margin} mb={12} maxW="1700px">
+      <Stack mx={margin} mb={12} maxW="1700px" w="100%">
         <Heading as="h2" size="md" w="100%" px={12} py={2} borderTopRadius="xl">
           Our marketing and growth team
         </Heading>