ui phase 3

2026-07-18 01:56:17 +03:30
parent 222856d600
commit 53b4e1b0a4
33 changed files with 1000 additions and 81 deletions
@@ -0,0 +1,85 @@
+'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;