115 lines
3.8 KiB
TypeScript
115 lines
3.8 KiB
TypeScript
|
import { alpha } from '@mui/material/styles';
|
||
|
|
import Box from '@mui/material/Box';
|
||
|
|
import Typography from '@mui/material/Typography';
|
||
|
|
import GradientText from 'docs/src/components/typography/GradientText';
|
||
|
|
import HeroContainer from 'docs/src/layouts/HeroContainer';
|
||
|
|
import IconImage from 'docs/src/components/icon/IconImage';
|
||
|
|
import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
|
||
|
|
import {
|
||
|
|
DesignKitImagesSet1,
|
||
|
|
DesignKitImagesSet2,
|
||
|
|
DesignKitTools,
|
||
|
|
} from 'docs/src/components/home/DesignKits';
|
||
|
|
|
||
|
|
export default function TemplateHero() {
|
||
|
|
return (
|
||
|
|
<HeroContainer
|
||
|
|
linearGradient
|
||
|
|
left={
|
||
|
|
<Box sx={{ textAlign: { xs: 'center', md: 'left' } }}>
|
||
|
|
<Typography
|
||
|
|
variant="body2"
|
||
|
|
sx={[
|
||
|
|
{
|
||
|
|
fontWeight: 'bold',
|
||
|
|
},
|
||
|
|
(theme) => ({
|
||
|
|
color: 'primary.600',
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: { xs: 'center', md: 'start' },
|
||
|
|
'& > *': { mr: 1 },
|
||
|
|
...theme.applyDarkStyles({
|
||
|
|
color: 'primary.400',
|
||
|
|
}),
|
||
|
|
}),
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<IconImage width={28} height={28} loading="eager" name="product-designkits" /> Design
|
||
|
|
Kits
|
||
|
|
</Typography>
|
||
|
|
<Typography variant="h1" sx={{ my: 2, maxWidth: 500 }}>
|
||
|
|
Material UI
|
||
|
|
<br /> in your favorite
|
||
|
|
<br /> <GradientText>design tool</GradientText>
|
||
|
|
</Typography>
|
||
|
|
<Typography sx={{ color: 'text.secondary', mb: 3, maxWidth: 450 }}>
|
||
|
|
Pick your favorite design tool to enjoy and use Material UI components. Boost
|
||
|
|
consistency and facilitate communication when working with developers.
|
||
|
|
</Typography>
|
||
|
|
<GetStartedButtons
|
||
|
|
primaryLabel="Buy now"
|
||
|
|
primaryUrl="https://mui.com/store/?utm_source=marketing&utm_medium=referral&utm_campaign=design-cta#design"
|
||
|
|
secondaryLabel="Figma Preview"
|
||
|
|
secondaryUrl="https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x"
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
}
|
||
|
|
right={
|
||
|
|
<Box sx={{ position: 'relative', height: '100%', perspective: '1000px' }}>
|
||
|
|
<DesignKitTools />
|
||
|
|
<Box
|
||
|
|
sx={(theme) => ({
|
||
|
|
position: 'absolute',
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
zIndex: 1,
|
||
|
|
background: `linear-gradient(90deg, ${alpha(
|
||
|
|
theme.palette.primaryDark[900],
|
||
|
|
0.8,
|
||
|
|
)} 1%, ${alpha(theme.palette.primaryDark[900], 0.1)})`,
|
||
|
|
opacity: 0,
|
||
|
|
...theme.applyDarkStyles({
|
||
|
|
opacity: 1,
|
||
|
|
}),
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
left: '40%',
|
||
|
|
position: 'absolute',
|
||
|
|
display: 'flex',
|
||
|
|
transform: 'translateX(-40%) rotateZ(30deg) rotateX(8deg) rotateY(-8deg)',
|
||
|
|
transformOrigin: 'center center',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<DesignKitImagesSet1
|
||
|
|
keyframes={{
|
||
|
|
'0%': {
|
||
|
|
transform: 'translateY(-200px)',
|
||
|
|
},
|
||
|
|
'100%': {
|
||
|
|
transform: 'translateY(0px)',
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<DesignKitImagesSet2
|
||
|
|
keyframes={{
|
||
|
|
'0%': {
|
||
|
|
transform: 'translateY(150px)',
|
||
|
|
},
|
||
|
|
'100%': {
|
||
|
|
transform: 'translateY(-80px)',
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
sx={{ ml: { xs: 2, sm: 4, md: 8 } }}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|