hamid
86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
'use client';
|
|
import { FunctionComponent } from 'react';
|
|
import { Box, SxProps, Theme } from '@mui/material';
|
|
import AppIcon from '@/components/common/AppIcon';
|
|
|
|
const ILLUSTRATION_SIZE = 220;
|
|
|
|
interface AuthIllustrationProps {
|
|
sx?: SxProps<Theme>;
|
|
}
|
|
|
|
/**
|
|
* A calm, abstract hero graphic for the login front door — layered soft-tint circles (brand
|
|
* tokens only, no stock photos or raster art) with a centered family glyph and a floating
|
|
* trust badge, echoing the trust bullets underneath. Purely decorative.
|
|
* @component AuthIllustration
|
|
*/
|
|
const AuthIllustration: FunctionComponent<AuthIllustrationProps> = ({ sx }) => (
|
|
<Box
|
|
aria-hidden="true"
|
|
sx={{
|
|
position: 'relative',
|
|
width: ILLUSTRATION_SIZE,
|
|
height: ILLUSTRATION_SIZE,
|
|
flexShrink: 0,
|
|
...sx,
|
|
}}
|
|
>
|
|
<Box sx={{ position: 'absolute', inset: 0, borderRadius: '50%', bgcolor: 'var(--bal-primary-soft)' }} />
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
insetInlineStart: '16%',
|
|
insetBlockEnd: '4%',
|
|
width: '46%',
|
|
height: '46%',
|
|
borderRadius: '50%',
|
|
bgcolor: 'var(--bal-secondary-soft)',
|
|
}}
|
|
/>
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: '58%',
|
|
height: '58%',
|
|
borderRadius: '50%',
|
|
bgcolor: 'var(--bal-bg-paper)',
|
|
boxShadow: 'var(--bal-shadow-3)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<AppIcon icon="family" size={64} color="var(--bal-primary)" />
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
insetInlineEnd: '8%',
|
|
insetBlockStart: '10%',
|
|
width: '30%',
|
|
height: '30%',
|
|
borderRadius: '50%',
|
|
bgcolor: 'var(--bal-bg-paper)',
|
|
boxShadow: 'var(--bal-shadow-2)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<AppIcon icon="verified" size={30} color="var(--bal-trust)" />
|
|
</Box>
|
|
</Box>
|
|
);
|
|
|
|
export default AuthIllustration;
|