mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-18 18:46:19 +08:00
zuomeng wang
715b235fea
* feat: update landing page * feat(code): improve code editing experience * feat: update landing page * fix: react warning * fix: update logo and i18n Co-authored-by: tzhangchi <terry.zhangchi@outlook.com> Co-authored-by: Yifeng Wang <doodlewind@qq.com>
201 lines
8.1 KiB
TypeScript
201 lines
8.1 KiB
TypeScript
import { Box, Grid, Typography } from '@mui/joy';
|
|
import { useState } from 'react';
|
|
// eslint-disable-next-line no-restricted-imports
|
|
import { Paper, Slide, Tab, Tabs, useMediaQuery } from '@mui/material';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { AFFiNEImage } from '../common';
|
|
import ShapeImage from './shape.png';
|
|
import TaskImage from './task.png';
|
|
|
|
export const FunctionTabs = () => {
|
|
const matches = useMediaQuery('(max-width: 1024px)');
|
|
const { t } = useTranslation();
|
|
const [tab, selectTab] = useState(0);
|
|
return (
|
|
<Paper
|
|
sx={{
|
|
// backgroundColor: 'rgba(54, 100, 214, 0.05)',
|
|
padding: '10px',
|
|
position: 'relative',
|
|
height: '700px',
|
|
}}
|
|
elevation={0}
|
|
>
|
|
<Tabs
|
|
value={tab}
|
|
onChange={(_, value) => selectTab(value)}
|
|
centered
|
|
>
|
|
<Tab label={t('description2.part1')} value={0} />
|
|
<Tab label={t('description3.part1')} value={1} />
|
|
</Tabs>
|
|
<Slide direction="left" in={tab === 0} mountOnEnter unmountOnExit>
|
|
<Grid
|
|
xs={12}
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: matches ? 'column' : 'row',
|
|
marginBottom: '12em',
|
|
position: 'absolute',
|
|
top: '100px',
|
|
left: 0,
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<Grid
|
|
xs={matches ? 12 : 3}
|
|
sx={{
|
|
display: 'flex',
|
|
paddingLeft: '20px',
|
|
flex: 1,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'left',
|
|
alignSelf: 'center',
|
|
textAlign: 'left',
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<Typography
|
|
level="h2"
|
|
fontWeight={'bold'}
|
|
style={{ marginBottom: '0.5em' }}
|
|
>
|
|
{t('description2.part1')}
|
|
</Typography>
|
|
<Typography
|
|
fontSize="1.2em"
|
|
style={{ marginBottom: '0.5em' }}
|
|
>
|
|
{t('description2.part2')}
|
|
</Typography>
|
|
<Typography
|
|
fontSize="1.2em"
|
|
style={{ marginBottom: '0.25em' }}
|
|
>
|
|
{t('description2.part3')}
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
<Grid
|
|
xs={matches ? 12 : 9}
|
|
sx={{ display: 'flex', width: '100%', flex: 2 }}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'left',
|
|
textAlign: 'left',
|
|
transition: 'all .5s',
|
|
transform: 'scale(0.98)',
|
|
boxShadow: '2px 2px 40px #0002',
|
|
':hover': {
|
|
transform: 'scale(1)',
|
|
boxShadow: '2px 2px 40px #0004',
|
|
},
|
|
}}
|
|
>
|
|
<AFFiNEImage
|
|
src={ShapeImage}
|
|
alt="AFFiNE Shape Your Page"
|
|
/>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
</Slide>
|
|
<Slide direction="left" in={tab === 1} mountOnEnter unmountOnExit>
|
|
<Grid
|
|
xs={12}
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: matches ? 'column' : 'row-reverse',
|
|
position: 'absolute',
|
|
top: '100px',
|
|
left: 0,
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<Grid
|
|
xs={matches ? 12 : 6}
|
|
sx={{
|
|
display: 'flex',
|
|
...(matches ? {} : { marginLeft: '4em' }),
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'left',
|
|
alignSelf: 'center',
|
|
textAlign: 'left',
|
|
width: '100%',
|
|
}}
|
|
>
|
|
<Typography
|
|
level="h2"
|
|
fontWeight={'bold'}
|
|
style={{ marginBottom: '0.5em' }}
|
|
>
|
|
{t('description3.part1')}
|
|
</Typography>
|
|
<Typography
|
|
fontSize="1.2em"
|
|
style={{ marginBottom: '0.25em' }}
|
|
>
|
|
{t('description3.part2')}
|
|
</Typography>
|
|
<Typography
|
|
fontSize="1.2em"
|
|
style={{ marginBottom: '0.25em' }}
|
|
>
|
|
{t('description3.part3')}
|
|
</Typography>
|
|
<Typography
|
|
fontSize="1.2em"
|
|
style={{ marginBottom: '0.25em' }}
|
|
>
|
|
{t('description3.part4')}
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
<Grid
|
|
xs={matches ? 12 : 6}
|
|
sx={{ display: 'flex', width: '100%' }}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'left',
|
|
textAlign: 'left',
|
|
transition: 'all .5s',
|
|
transform: 'scale(0.98)',
|
|
boxShadow: '2px 2px 40px #0002',
|
|
':hover': {
|
|
transform: 'scale(1)',
|
|
boxShadow: '2px 2px 40px #0004',
|
|
},
|
|
}}
|
|
>
|
|
<AFFiNEImage
|
|
src={TaskImage}
|
|
alt="AFFiNE Plan Your Task"
|
|
/>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
</Slide>
|
|
</Paper>
|
|
);
|
|
};
|