add components mdx to style section

content/pages/index.mdx

-<SEO title="Home" />
-
 import { Box } from 'theme-ui'
+import { Heading } from 'theme-ui'
 import { Text } from 'theme-ui'
+import { Card } from 'theme-ui'
+import { Flex } from 'theme-ui'
+import { Image } from 'theme-ui'
+import { Grid } from 'theme-ui'
 
 <SEO title="Home" />
 <Box
@@ -24,5 +27,136 @@ import { Text } from 'theme-ui'
 </Text>
 </Box>
 
-![Alt Image Text 1](../assets/material-design.jpg)
+<Box 
+  bg='rgb(128, 107, 100)'
+  ml={-200}
+  mr={-200}
+  mt={30}
+  mb={30}
+  padding= '0 20px 0 20px'
+  >
+<Grid
+  gap={0}
+  columns={[ 2, null, 3 ]}
+  bg='rgb(128, 107, 100)'
+  ml={100}
+  mr={100}
+  >
+  <Box>
+    <Card
+  sx={{
+    maxWidth: 256,
+    mt: 40,
+    mb: 40,
+  }}>
+  <Image 
+    display='block'
+    objectFit= 'contain'
+    height= '100%'
+    width='55px' 
+    ml={100} 
+    mr={0} 
+    src={'https://d1yei2z3i6k35z.cloudfront.net/23847/5d59204f29c18_logo_64_shield.png'} />
+  <Text
+   sx={{
+    fontSize: 30,
+    textAlign: 'center',
+    fontWeight: '700',
+    color: 'white',
+  }}>
+    Sécurisé 
+  </Text>
+  <Text 
+  sx={{
+    fontSize: 10,
+    textAlign: 'center',
+    fontWeight: '400',
+    color: 'white',
+  }}>
+    Vos données sont en lieu sûr et sauvegardées toutes les nuits  
+  </Text>
+   
+</Card>
+  </Box>
+  <Box>
+    <Card
+  sx={{
+    //display: 'flex',
+    //flexDirection: 'column',
+      //minHeight: '100vh',
+      variant: 'layout.root',
+    maxWidth: 256,
+     //ml: 10,
+  //mr: 10,
+  mt: 40,
+  mb: 40,
+  }}>
+  <Image 
+  alignItems='center'
+  height= '100%'
+  width='55px' 
+  ml={100} 
+  mr={100} 
+  src={'https://d1yei2z3i6k35z.cloudfront.net/23847/5d59205cb224f_logo_64_gdpr.png'} />
+  <Text 
+  sx={{
+    fontSize: 30,
+    textAlign: 'center',
+    fontWeight: '700',
+    color: 'white',
+  }}
+  >
+    Souverain
+  </Text>
+  <Text>
+    <Text
+    sx={{
+    fontSize: 10,
+    textAlign: 'center',
+    fontWeight: '400',
+    color: 'white',
+  }}
+  >
+    Nous sommes hébergés en France et conformes au RGPD
+  </Text>
+  </Text>
+</Card>
+</Box>
+
+  <Box>
+    <Card
+  sx={{
+  maxWidth: 256,
+  ml: 50,
+  mr: 10,
+  mt: 40,
+  mb: 40,
+  }}>
+  <Image
+  height= '100%'
+  width='55px' 
+  ml={85} 
+  mr={0} 
+  src={'https://d1yei2z3i6k35z.cloudfront.net/23847/5e90aa8c5541d_freedom_logo_64.png'} />
+  <Text sx={{
+    fontSize: 30,
+    textAlign: 'center',
+    fontWeight: '700',
+    color: 'white',
+}}>
+    Libre
+  </Text>
+  <Text 
+  sx={{
+    fontSize: 10,
+    textAlign: 'center',
+    fontWeight: '400',
+    color: 'white',
+  }}>
+   Notre solution s'appuie sur des logiciels libres et nos conditions générales sont éthiques. 
+  </Text>
+</Card>
+    </Box>
+  </Grid>
+</Box>