homepage

client/src/pages/components/Ability.tsx

@@ -0,0 +1,106 @@
+import { Box, Image, BoxProps, Grid, useTheme } from '@chakra-ui/react';
+import React from 'react';
+import { useTranslation } from 'next-i18next';
+
+const Ability = () => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+
+  const CardStyles: BoxProps = {
+    pt: 4,
+    borderRadius: 'xl',
+    overflow: 'hidden',
+    border: theme.borders.base
+  };
+  const TitleStyles: BoxProps = {
+    px: 4,
+    fontSize: ['xl', '30px'],
+    fontWeight: 'bold'
+  };
+  const DescStyles: BoxProps = {
+    px: 4,
+    mt: 2,
+    mb: 5,
+    fontSize: ['sm', 'lg'],
+    whiteSpace: 'pre-wrap'
+  };
+
+  return (
+    <Box>
+      <Box
+        className="textlg"
+        py={['30px', '60px']}
+        textAlign={'center'}
+        fontSize={['22px', '30px']}
+        fontWeight={'bold'}
+      >
+        {t('home.FastGPT Ability')}
+      </Box>
+      <Grid px={[5, 0]} minH={'400px'} gridTemplateColumns={['1fr', `500px 1fr`]} gridGap={6}>
+        <Box
+          {...CardStyles}
+          backgroundImage={'linear-gradient(to bottom right, #00A9A6 0%, #33BABB 100%)'}
+        >
+          <Box {...TitleStyles} color={'white'}>
+            {t('home.AI Assistant')}
+          </Box>
+          <Box {...DescStyles} color={'rgba(255,255,255,0.9)'}>
+            {t('home.AI Assistant Desc')}
+          </Box>
+          <Image
+            src="/imgs/home/ai_assiatant.png"
+            alt={''}
+            w={'100%'}
+            borderRadius={'lg'}
+            transform={'translateX(20px)'}
+          />
+        </Box>
+        <Box
+          {...CardStyles}
+          pb={4}
+          backgroundImage={'linear-gradient(120deg, #3370ff 0%, #4e83fd 100%)'}
+        >
+          <Box {...TitleStyles} color={'white'}>
+            {t('home.Dateset')}
+          </Box>
+          <Box {...DescStyles} color={'rgba(255,255,255,0.9)'}>
+            {t('home.Dateset Desc')}
+          </Box>
+          <Image
+            src="/imgs/home/dataset_import.png"
+            alt={''}
+            w={'90%'}
+            mx={'auto'}
+            borderRadius={'lg'}
+          />
+        </Box>
+      </Grid>
+      <Grid
+        mt={6}
+        px={[5, 0]}
+        minH={'400px'}
+        gridTemplateColumns={['1fr', `1fr 500px`]}
+        gridGap={6}
+      >
+        <Box {...CardStyles} backgroundImage={'linear-gradient(to top, #6a85b6 0%, #bac8e0 100%)'}>
+          <Box {...TitleStyles}>{t('home.Advanced Settings')}</Box>
+          <Box {...DescStyles} fontSize={['sm', 'md']}>
+            {t('home.Advanced Settings Desc')}
+          </Box>
+          <Image src="/imgs/home/advanced_settings.png" alt={''} w={'100%'} />
+        </Box>
+        <Box
+          {...CardStyles}
+          pb={4}
+          backgroundImage={'linear-gradient(to right, #FDCBB1 0%, #FEE5D8 100%)'}
+        >
+          <Box {...TitleStyles}>{t('home.OpenAPI')}</Box>
+          <Box {...DescStyles}>{t('home.OpenAPI Desc')}</Box>
+          <Image src="/imgs/home/openapi.png" alt={''} w={'90%'} mx={'auto'} borderRadius={'lg'} />
+        </Box>
+      </Grid>
+    </Box>
+  );
+};
+
+export default Ability;