You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.5 KiB
91 lines
2.5 KiB
import {
|
|
Box,
|
|
Button,
|
|
chakra,
|
|
Flex,
|
|
Image,
|
|
useColorModeValue,
|
|
} from '@chakra-ui/react'
|
|
import React from 'react'
|
|
import AnimatedScrollWrapper from '../AnimatedScrollWrapper'
|
|
|
|
export default function DownloadAppSection() {
|
|
return (
|
|
<AnimatedScrollWrapper>
|
|
<Box my={16}>
|
|
<Flex
|
|
padding={5}
|
|
background={useColorModeValue('gray.100', 'gray.700')}
|
|
borderRadius='2xl'
|
|
>
|
|
<Flex
|
|
borderRadius='2xl'
|
|
m={{ base: 5, md: 8 }}
|
|
p={{ base: 5, md: 8 }}
|
|
width='100%'
|
|
border='1px solid gray'
|
|
direction='row'
|
|
justifyContent='center'
|
|
>
|
|
<Box>
|
|
<Image
|
|
alt={'Hero Image'}
|
|
fit={'cover'}
|
|
align={'center'}
|
|
w={'180px'}
|
|
// h={'100%'}
|
|
src={'/images/smsgatewayandroid.png'}
|
|
/>
|
|
</Box>
|
|
<Box>
|
|
<Flex
|
|
height='100%'
|
|
direction='column'
|
|
justifyContent='center'
|
|
alignItems='center'
|
|
>
|
|
<chakra.h1
|
|
fontSize='md'
|
|
fontWeight='bold'
|
|
my={4}
|
|
color={useColorModeValue('gray.800', 'white')}
|
|
>
|
|
Download the App to get started!
|
|
</chakra.h1>
|
|
<chakra.p
|
|
fontSize='sm'
|
|
color={useColorModeValue('gray.600', 'gray.400')}
|
|
mb={4}
|
|
>
|
|
Unlock the power of messaging with our open-source Android SMS
|
|
Gateway.
|
|
</chakra.p>
|
|
<a href='/android' target='_blank'>
|
|
<Button
|
|
/* flex={1} */
|
|
px={4}
|
|
fontSize={'sm'}
|
|
rounded={'full'}
|
|
bg={'blue.400'}
|
|
color={'white'}
|
|
boxShadow={
|
|
'0px 1px 25px -5px rgb(66 153 225 / 48%), 0 10px 10px -5px rgb(66 153 225 / 43%)'
|
|
}
|
|
_hover={{
|
|
bg: 'blue.500',
|
|
}}
|
|
_focus={{
|
|
bg: 'blue.500',
|
|
}}
|
|
>
|
|
Download App
|
|
</Button>
|
|
</a>
|
|
</Flex>
|
|
</Box>
|
|
</Flex>
|
|
</Flex>
|
|
</Box>
|
|
</AnimatedScrollWrapper>
|
|
)
|
|
}
|