134 lines
4.3 KiB
TypeScript
134 lines
4.3 KiB
TypeScript
import InnerContent from '@/components/layout/innerContent';
|
||
import image from '@/public/img/features/feature-one.png';
|
||
import {
|
||
Flex,
|
||
Link,
|
||
Button,
|
||
Icon,
|
||
Image,
|
||
Text,
|
||
useColorModeValue,
|
||
} from '@chakra-ui/react';
|
||
import React from 'react';
|
||
import { MdChevronRight } from 'react-icons/md';
|
||
|
||
export default function FeatureOne() {
|
||
const textColor = useColorModeValue('#120F43', 'white');
|
||
const textColorSecondary = useColorModeValue('gray.600', 'white');
|
||
return (
|
||
<Flex
|
||
w="100%"
|
||
direction={{ base: 'column' }}
|
||
pt={{ base: '100px', md: '140px', lg: '140px' }}
|
||
pb={{ base: '100px', md: '140px', lg: '140px' }}
|
||
overflow="hidden"
|
||
bgSize="cover"
|
||
position="relative"
|
||
>
|
||
<InnerContent px={{ base: '20px', md: '40px', xl: '0px' }}>
|
||
<Flex
|
||
align={'center'}
|
||
direction={{ base: 'column', lg: 'row' }}
|
||
maxW="100%"
|
||
justifyContent="space-between"
|
||
columnGap="50px"
|
||
alignItems={{ base: 'center', lg: 'unset' }}
|
||
>
|
||
<Flex
|
||
direction="column"
|
||
my="auto"
|
||
maxW="100%"
|
||
alignItems={{ base: 'center', lg: 'unset' }}
|
||
>
|
||
<Text
|
||
as="h3"
|
||
fontWeight="700"
|
||
letterSpacing="2px"
|
||
bg="brand.500"
|
||
bgClip="text"
|
||
fontSize={{ base: 'xs', md: 'md' }}
|
||
textAlign={{ base: 'center', lg: 'left' }}
|
||
w="100%"
|
||
mb="10px"
|
||
>
|
||
YOUR STARTUP FEATURES
|
||
</Text>
|
||
<Text
|
||
as="h2"
|
||
fontWeight="800"
|
||
color={textColor}
|
||
fontSize={{ base: '30px', md: '40px', xl: '42px' }}
|
||
lineHeight={{ base: '40px', md: '50px', lg: '52px' }}
|
||
mb="20px"
|
||
w={{ base: '100%', md: '80%', lg: '100%' }}
|
||
textAlign={{ base: 'center', lg: 'left' }}
|
||
maxW={{ base: '100%', md: 'unset' }}
|
||
>
|
||
Ready to use Web App
|
||
<br />
|
||
for your Startup project
|
||
</Text>
|
||
<Text
|
||
color={textColorSecondary}
|
||
textAlign={{ base: 'center', lg: 'left' }}
|
||
fontSize={{ base: 'sm', md: 'md', xl: 'md' }}
|
||
w={{ base: '94%', md: '94%', lg: '97%' }}
|
||
lineHeight={{ base: '24px', md: '30px' }}
|
||
fontWeight="500"
|
||
letterSpacing="0px"
|
||
mb="30px"
|
||
>
|
||
It’s so easy to beat your endless procrastination when you have
|
||
all the necessary resources to get that project done and start to
|
||
generate your startup’s first dollar in just a few days.
|
||
</Text>
|
||
<Flex
|
||
align="center"
|
||
direction={{ base: 'column', md: 'row' }}
|
||
mb={{ md: '0px', lg: '30px' }}
|
||
justifyContent={{ base: 'center', lg: 'unset' }}
|
||
>
|
||
<Link href="/dashboard/signin" me={{ base: '0px', md: '14px' }}>
|
||
<Button
|
||
py="20px"
|
||
px="16px"
|
||
fontSize="sm"
|
||
variant="primary"
|
||
borderRadius="45px"
|
||
mb={{ base: '20px', md: '0px' }}
|
||
w={{ base: '335px', md: '230px' }}
|
||
h="54px"
|
||
>
|
||
Get started now
|
||
<Icon as={MdChevronRight} mt="2px" h="16px" w="16px" />
|
||
</Button>
|
||
</Link>
|
||
<Link href="/dashboard/signin">
|
||
<Button
|
||
py="20px"
|
||
px="16px"
|
||
fontSize="sm"
|
||
variant="setup"
|
||
borderRadius="45px"
|
||
mb={{ base: '20px', md: '0px' }}
|
||
w={{ base: '335px', md: '160px' }}
|
||
h="54px"
|
||
>
|
||
Try it for Free
|
||
<Icon as={MdChevronRight} mt="2px" h="16px" w="16px" />
|
||
</Button>
|
||
</Link>
|
||
</Flex>
|
||
</Flex>
|
||
<Image
|
||
alt=" "
|
||
src={image.src}
|
||
w={{ base: '100%', lg: '415px', xl: '575px' }}
|
||
mt={{ base: '20px', md: '50px', lg: '0px' }}
|
||
/>
|
||
</Flex>
|
||
</InnerContent>
|
||
</Flex>
|
||
);
|
||
}
|