use Wrapper component

vocdoni · Nov 18, 2024 · 96c7839 · 96c7839
1 parent d1e8801
commit 96c7839
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 68 deletions.
diff --git a/src/components/Home/Clients.tsx b/src/components/Home/Clients.tsx
@@ -1,5 +1,6 @@
-import { Box, Card, CardBody, CardHeader, Grid, Image, Text } from '@chakra-ui/react'
+import { Card, CardBody, CardHeader, Grid, Image, Text } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
+import Wrapper from '~components/Layout/Wrapper'
 import barca from '/assets/barca.png'
 import bellpuig from '/assets/bellpuig.svg.png'
 import berga from '/assets/berga.svg.png'
@@ -15,7 +16,7 @@ const Clients = () => {
   const { t } = useTranslation()
 
   return (
-    <Box py={10}>
+    <Wrapper as='section' display='block' py={10}>
       <Text textAlign='center' mb={20}>
         {t('clients', { defaultValue: 'Trusted by leading organizations' })}
       </Text>
@@ -115,7 +116,7 @@ const Clients = () => {
           </CardBody>
         </Card>
       </Grid>
-    </Box>
+    </Wrapper>
   )
 }
 export default Clients
diff --git a/src/components/Home/CreateProcess.tsx b/src/components/Home/CreateProcess.tsx
@@ -1,25 +1,15 @@
-import { Box, Button, Flex, Image, Text } from '@chakra-ui/react'
+import { Box, Button, Image, Text } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
 import { Link as ReactRouterLink } from 'react-router-dom'
+import Wrapper from '~components/Layout/Wrapper'
 import { Routes } from '~src/router/routes'
 import devices from '/assets/devices_vocdoni.png'
 
 const CreateProcess = () => {
   const { t } = useTranslation()
 
   return (
-    <Flex
-      as='section'
-      width='full'
-      maxW='1920px'
-      px={{
-        base: '10px',
-        sm: '20px',
-        md: '80px',
-      }}
-      py={10}
-      flexDirection={{ base: 'column', lg: 'row' }}
-    >
+    <Wrapper as='section' py={10} display='flex' flexDirection={{ base: 'column', lg: 'row' }}>
       <Box flex='1 1 50%'>
         <Text fontSize='48px' mt='80px' textAlign={{ base: 'center', lg: 'start' }}>
           {t('home.create_process.title')}
@@ -34,7 +24,7 @@ const CreateProcess = () => {
       <Box flex='1 1 50%' display={{ lg: 'flex' }} justifyContent='center' alignItems='center'>
         <Image src={devices} w={{ base: '535px', lg: '100%' }} mx='auto' />
       </Box>
-    </Flex>
+    </Wrapper>
   )
 }
 

diff --git a/src/components/Home/Features.tsx b/src/components/Home/Features.tsx
@@ -1,5 +1,6 @@
-import { Box, Card, CardBody, CardHeader, Grid, Text } from '@chakra-ui/react'
+import { Card, CardBody, CardHeader, Grid, Text } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
+import Wrapper from '~components/Layout/Wrapper'
 
 type FeaturesItem = {
   title: string
@@ -47,18 +48,7 @@ const Features = () => {
     },
   ]
   return (
-    <Box
-      as='section'
-      width='full'
-      m='0 auto'
-      maxW='1920px'
-      px={{
-        base: '10px',
-        sm: '20px',
-        md: '80px',
-      }}
-      py={10}
-    >
+    <Wrapper as='section' display={'block'} py={10}>
       <Text mx='auto' w='fit-content' mb={10}>
         {t('features', { defaultValue: 'Key Features' })}
       </Text>
@@ -70,7 +60,7 @@ const Features = () => {
           </Card>
         ))}
       </Grid>
-    </Box>
+    </Wrapper>
   )
 }
 

diff --git a/src/components/Home/StartNow.tsx b/src/components/Home/StartNow.tsx
@@ -1,20 +1,18 @@
-import { Button, Flex, Text } from '@chakra-ui/react'
+import { Button, Text } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
+import Wrapper from '~components/Layout/Wrapper'
 
 const StartNow = () => {
   const { t } = useTranslation()
 
   return (
-    <Flex
+    <Wrapper
+      as='section'
+      display='flex'
       flexDirection='column'
       justifyContent={'center'}
       alignItems={'center'}
       gap={4}
-      px={{
-        base: '10px',
-        sm: '20px',
-        md: '80px',
-      }}
       py={10}
       bgColor='home.start_now.bg_light'
       color={'home.start_now.color_light'}
@@ -27,7 +25,7 @@ const StartNow = () => {
         {t('', { defaultValue: 'Join thousands of organizations making better decisions with VotingPlatform.' })}
       </Text>
       <Button _dark={{ bgColor: 'home.start_now.btn_bg_dark' }}> {t('', { defaultValue: 'Get Started Now' })}</Button>
-    </Flex>
+    </Wrapper>
   )
 }
 

diff --git a/src/components/Home/UseCases.tsx b/src/components/Home/UseCases.tsx
@@ -1,5 +1,6 @@
-import { Box, Heading, Tab, TabList, TabPanel, TabPanels, Tabs, Text } from '@chakra-ui/react'
+import { Heading, Tab, TabList, TabPanel, TabPanels, Tabs, Text } from '@chakra-ui/react'
 import { useTranslation } from 'react-i18next'
+import Wrapper from '~components/Layout/Wrapper'
 
 type UseCasesItem = {
   tab: string
@@ -52,18 +53,7 @@ const UseCases = () => {
     },
   ]
   return (
-    <Box
-      as='section'
-      width='full'
-      m='0 auto'
-      maxW='1920px'
-      px={{
-        base: '10px',
-        sm: '20px',
-        md: '80px',
-      }}
-      py={10}
-    >
+    <Wrapper as='section' display={'block'} py={10}>
       <Text mx='auto' w='fit-content' mb={10}>
         {t('use_cases', { defaultValue: 'Use Cases' })}
       </Text>
@@ -82,7 +72,7 @@ const UseCases = () => {
           ))}
         </TabPanels>
       </Tabs>
-    </Box>
+    </Wrapper>
   )
 }
 

diff --git a/src/components/Layout/Wrapper.tsx b/src/components/Layout/Wrapper.tsx
@@ -1,20 +1,16 @@
-import { Box, Flex } from '@chakra-ui/react'
+import { Box } from '@chakra-ui/react'
 
 const Wrapper = ({ ...props }) => (
-  <Box bg={'wrapper.bg_light'} _dark={{ bgColor: 'wrapper.bg_dark' }}>
-    <Flex
-      minH='100vh'
-      position='relative'
-      flexDirection='column'
-      width='full'
-      m='0 auto'
-      px={{
-        base: '10px',
-        sm: '20px',
-      }}
-      {...props}
-    ></Flex>
-  </Box>
+  <Box
+    width='full'
+    maxW='1920px'
+    px={{
+      base: '10px',
+      sm: '20px',
+      md: '80px',
+    }}
+    {...props}
+  ></Box>
 )
 
 export default Wrapper