homepage

2023-08-08 13:24:05 +08:00
parent 37fe67dc81
commit 3cf38930eb
29 changed files with 719 additions and 258 deletions
--- a/client/src/pages/components/Choice.tsx
+++ b/client/src/pages/components/Choice.tsx
@@ -0,0 +1,103 @@
+import { Box, Image, Flex, Grid, useTheme } from '@chakra-ui/react';
+import React, { useRef } from 'react';
+import { useTranslation } from 'next-i18next';
+import MyTooltip from '@/components/MyTooltip';
+import MyIcon from '@/components/Icon';
+
+const Choice = () => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+
+  const list = [
+    {
+      icon: '/imgs/home/icon_1.svg',
+      title: t('home.Choice Open'),
+      desc: t('home.Choice Open Desc'),
+      tooltip: '前往 GitHub',
+      onClick: () => window.open('https://github.com/labring/FastGPT', '_blank')
+    },
+    {
+      icon: '/imgs/home/icon_2.svg',
+      title: t('home.Choice QA'),
+      desc: t('home.Choice QA Desc'),
+      onClick: () => {}
+    },
+    {
+      icon: '/imgs/home/icon_3.svg',
+      title: t('home.Choice Visual'),
+      desc: t('home.Choice Visual Desc'),
+      onClick: () => {}
+    },
+    {
+      icon: '/imgs/home/icon_4.svg',
+      title: t('home.Choice Extension'),
+      desc: t('home.Choice Extension Desc'),
+      onClick: () => {}
+    },
+    {
+      icon: '/imgs/home/icon_5.svg',
+      title: t('home.Choice Debug'),
+      desc: t('home.Choice Debug Desc'),
+      onClick: () => {}
+    },
+    {
+      icon: '/imgs/home/icon_6.svg',
+      title: t('home.Choice Models'),
+      desc: t('home.Choice Models Desc'),
+      onClick: () => {}
+    }
+  ];
+
+  return (
+    <Box>
+      <Box
+        className="textlg"
+        py={['30px', '60px']}
+        textAlign={'center'}
+        fontSize={['22px', '30px']}
+        fontWeight={'bold'}
+      >
+        {t('home.Why FastGPT')}
+      </Box>
+      <Grid px={[5, 0]} gridTemplateColumns={['1fr', `1fr 1fr`, 'repeat(3,1fr)']} gridGap={6}>
+        {list.map((item) => (
+          <MyTooltip key={item.title} label={item.tooltip}>
+            <Flex
+              alignItems={'flex-start'}
+              border={theme.borders.md}
+              borderRadius={'lg'}
+              p={'40px'}
+              transition={'0.1s'}
+              cursor={'default'}
+              _hover={{
+                bg: 'rgba(255,255,255,0.8)'
+              }}
+              onClick={item.onClick}
+            >
+              <Flex
+                flex={'0 0 48px'}
+                h={'48px'}
+                alignItems={'center'}
+                justifyContent={'center'}
+                boxShadow={theme.shadows.base}
+                borderRadius={'14px'}
+              >
+                <Image src={item.icon} w={'28px'} alt={''} />
+              </Flex>
+              <Box ml={5}>
+                <Box fontSize={['lg', '2xl']} fontWeight={'bold'} color={'myGray.900'}>
+                  {item.title}
+                </Box>
+                <Box mt={1} fontSize={['md', 'lg']}>
+                  {item.desc}
+                </Box>
+              </Box>
+            </Flex>
+          </MyTooltip>
+        ))}
+      </Grid>
+    </Box>
+  );
+};
+
+export default Choice;