81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { Box, Flex, Grid } from '@chakra-ui/react';
|
|
import { useTranslation } from 'next-i18next';
|
|
|
|
const FAQ = () => {
|
|
const { t } = useTranslation();
|
|
const faqs = [
|
|
{
|
|
title: t('common:FAQ.switch_package_q'),
|
|
desc: t('common:FAQ.switch_package_a')
|
|
},
|
|
{
|
|
title: t('common:FAQ.check_subscription_q'),
|
|
desc: t('common:FAQ.check_subscription_a')
|
|
},
|
|
{
|
|
title: t('common:FAQ.ai_point_q'),
|
|
desc: t('common:FAQ.ai_point_a')
|
|
},
|
|
{
|
|
title: t('common:FAQ.ai_point_expire_q'),
|
|
desc: t('common:FAQ.ai_point_expire_a')
|
|
},
|
|
{
|
|
title: t('common:FAQ.dataset_compute_q'),
|
|
desc: t('common:FAQ.dataset_compute_a')
|
|
},
|
|
{
|
|
title: t('common:FAQ.dataset_index_q'),
|
|
desc: t('common:FAQ.dataset_index_a')
|
|
},
|
|
{
|
|
title: t('common:FAQ.package_overlay_q'),
|
|
desc: t('common:FAQ.package_overlay_a')
|
|
},
|
|
{
|
|
title: t('common:FAQ.free_user_clean_q'),
|
|
desc: t('common:FAQ.free_user_clean_a')
|
|
}
|
|
];
|
|
|
|
return (
|
|
<Flex
|
|
mt={['40px', '200px']}
|
|
pb={'10vh'}
|
|
flexDirection={'column'}
|
|
alignItems={'center'}
|
|
position={'relative'}
|
|
>
|
|
<Box fontWeight={'bold'} fontSize={['24px', '36px']} color={'myGray.900'}>
|
|
{t('common:support.wallet.subscription.FAQ')}
|
|
</Box>
|
|
<Grid mt={12} gridTemplateColumns={['1fr', '1fr 1fr']} gap={4} w={'100%'}>
|
|
{faqs.map((item, i) => (
|
|
<Box
|
|
key={i}
|
|
py={8}
|
|
px={9}
|
|
borderRadius={'lg'}
|
|
borderWidth={'1px'}
|
|
borderColor={'myGray.150'}
|
|
bg={'rgba(255,255,255,0.9)'}
|
|
_hover={{
|
|
borderColor: 'primary.300'
|
|
}}
|
|
>
|
|
<Box fontWeight={'bold'} pb={3} color={'myGray.900'}>
|
|
{item.title}
|
|
</Box>
|
|
<Box fontSize={'sm'} color={'myGray.600'}>
|
|
{item.desc}
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Grid>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default FAQ;
|