design: upgrade typography, shadows, spacing, empty states, 404 page, focus rings, noise overlay

client/src/app/layout/MainLayout.tsx

@@ -23,8 +23,10 @@ export function MainLayout({ children }: PropsWithChildren) {
       <ScrollToTop />
       <AppHeader />
 
-      <Box component="main" sx={{ flex: 1, py: { xs: 4, md: 6 } }}>
-        <Container maxWidth="lg">{children}</Container>
+      <Box component="main" sx={{ flex: 1, py: { xs: 3, md: 5 } }}>
+        <Container maxWidth="xl" sx={{ px: { xs: 2, sm: 3, md: 4 } }}>
+          {children}
+        </Container>
       </Box>
 
       <Box
@@ -33,24 +35,19 @@ export function MainLayout({ children }: PropsWithChildren) {
           mt: 'auto',
           borderTop: 1,
           borderColor: 'divider',
-          bgcolor: 'background.default',
-          py: { xs: 4, md: 6 },
+          bgcolor: 'background.paper',
+          py: { xs: 5, md: 7 },
         }}
       >
-        <Container maxWidth="lg">
-          <Grid container spacing={4}>
+        <Container maxWidth="xl" sx={{ px: { xs: 2, sm: 3, md: 4 } }}>
+          <Grid container spacing={5}>
             <Grid size={{ xs: 12, sm: 6, md: 3 }}>
-              <Typography variant="subtitle1" gutterBottom sx={{ fontWeight: 600, letterSpacing: '-0.25px' }}>
-                Магазин
+              <Typography variant="subtitle1" gutterBottom sx={{ fontWeight: 700, letterSpacing: '-0.5px' }}>
+                {STORE_NAME}
+              </Typography>
+              <Typography variant="body2" color="text.secondary" sx={{ mt: 1, maxWidth: 260 }}>
+                Изделия ручной работы: вещи с характером и вниманием к деталям.
               </Typography>
-              <Stack spacing={1.5}>
-                <Link component={RouterLink} to="/" color="inherit" underline="hover" variant="body2">
-                  Каталог
-                </Link>
-                <Typography variant="body2" color="text.secondary">
-                  Изделия ручной работы: вещи с характером и вниманием к деталям.
-                </Typography>
-              </Stack>
             </Grid>
             <Grid size={{ xs: 12, sm: 6, md: 3 }}>
               <Typography variant="subtitle1" gutterBottom sx={{ fontWeight: 600, letterSpacing: '-0.25px' }}>
@@ -111,7 +108,7 @@ export function MainLayout({ children }: PropsWithChildren) {
               </Stack>
             </Grid>
           </Grid>
-          <Divider sx={{ my: 3 }} />
+          <Divider sx={{ my: 4 }} />
           <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.5 }}>
             <Typography variant="caption" color="text.secondary" sx={{ display: 'block', textAlign: 'center' }}>
               © {year} {STORE_NAME}