import type { BoxProps } from '@mui/material/Box';
import { m } from 'framer-motion';
import { varAlpha } from 'minimal-shared/utils';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import SvgIcon from '@mui/material/SvgIcon';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import { CONFIG } from 'src/global-config';
import { varFade, MotionViewport } from 'src/components/animate';
import { SectionTitle } from './components/section-title';
import { CircleSvg, FloatLine, FloatPlusIcon } from './components/svg-elements';
// ----------------------------------------------------------------------
const renderLines = () => (
<>
);
export function HomeMinimal({ sx, ...other }: BoxProps) {
const renderDescription = () => (
<>
{ITEMS.map((item) => (
{item.icon}
{item.title}
{item.description}
))}
);
const renderImage = () => (
({
left: 0,
width: 720,
borderRadius: 2,
position: 'absolute',
bgcolor: 'background.default',
boxShadow: `-40px 40px 80px 0px ${varAlpha(theme.vars.palette.grey['500Channel'], 0.16)}`,
...theme.applyStyles('dark', {
boxShadow: `-40px 40px 80px 0px ${varAlpha(theme.vars.palette.common.blackChannel, 0.16)}`,
}),
}),
]}
>
);
return (
{renderLines()}
{renderDescription()}
{renderImage()}
);
}
// ----------------------------------------------------------------------
const ITEMS = [
{
title: 'Branding',
description: 'Consistent design makes it easy to brand your own.',
icon: (
),
},
{
title: 'UI & UX design',
description: 'The kit is built on the principles of the atomic design system.',
icon: (
),
},
{
title: 'Development',
description: 'Easy to customize and extend, saving you time and money.',
icon: (
),
},
];