base commit

client/src/app/layout/MainLayout.tsx

@@ -1,10 +1,18 @@
 import { type PropsWithChildren } from 'react'
 import Box from '@mui/material/Box'
 import Container from '@mui/material/Container'
+import Divider from '@mui/material/Divider'
+import Grid from '@mui/material/Grid'
+import Link from '@mui/material/Link'
+import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
+import { Link as RouterLink } from 'react-router-dom'
 import { AppHeader } from '@/app/layout/AppHeader'
+import { STORE_EMAIL, STORE_NAME, STORE_PHONE, STORE_SOCIAL_NOTE } from '@/shared/config'
 
 export function MainLayout({ children }: PropsWithChildren) {
+  const year = new Date().getFullYear()
+
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
       <AppHeader />
@@ -12,17 +20,76 @@ export function MainLayout({ children }: PropsWithChildren) {
       <Box component="main" sx={{ flex: 1, py: 3 }}>
         <Container maxWidth="lg">{children}</Container>
       </Box>
+
       <Box
         component="footer"
         sx={{
-          py: 2,
-          textAlign: 'center',
+          mt: 'auto',
           borderTop: 1,
           borderColor: 'divider',
-          color: 'text.secondary',
+          bgcolor: 'background.default',
+          py: { xs: 3, md: 4 },
         }}
       >
-        <Typography variant="body2">Изделия ручной работы · доставка по договорённости</Typography>
+        <Container maxWidth="lg">
+          <Grid container spacing={3}>
+            <Grid size={{ xs: 12, sm: 4 }}>
+              <Typography variant="subtitle1" fontWeight={700} gutterBottom>
+                Магазин
+              </Typography>
+              <Stack spacing={1}>
+                <Link component={RouterLink} to="/" color="inherit" underline="hover" variant="body2">
+                  Каталог
+                </Link>
+                <Typography variant="body2" color="text.secondary">
+                  Изделия ручной работы: вещь с характером и вниманием к деталям.
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                  Как заказать: добавьте позиции в корзину и оформите доставку или самовывоз на чек-ауте.
+                </Typography>
+              </Stack>
+            </Grid>
+            <Grid size={{ xs: 12, sm: 4 }}>
+              <Typography variant="subtitle1" fontWeight={700} gutterBottom>
+                Покупателям
+              </Typography>
+              <Stack spacing={1}>
+                <Link component={RouterLink} to="/me" color="inherit" underline="hover" variant="body2">
+                  Личный кабинет
+                </Link>
+                <Typography variant="body2" color="text.secondary">
+                  Доставка и самовывоз: уточняются при оформлении заказа; по вопросам — контакты ниже.
+                </Typography>
+              </Stack>
+            </Grid>
+            <Grid size={{ xs: 12, sm: 4 }}>
+              <Typography variant="subtitle1" fontWeight={700} gutterBottom>
+                Контакты
+              </Typography>
+              <Stack spacing={0.75}>
+                <Typography variant="body2">
+                  Email:{' '}
+                  <Link href={`mailto:${STORE_EMAIL}`} underline="hover">
+                    {STORE_EMAIL}
+                  </Link>
+                </Typography>
+                <Typography variant="body2">
+                  Телефон:{' '}
+                  <Link href={`tel:${STORE_PHONE.replace(/\s/g, '')}`} underline="hover">
+                    {STORE_PHONE}
+                  </Link>
+                </Typography>
+                <Typography variant="caption" color="text.secondary">
+                  {STORE_SOCIAL_NOTE}
+                </Typography>
+              </Stack>
+            </Grid>
+          </Grid>
+          <Divider sx={{ my: 2 }} />
+          <Typography variant="caption" color="text.secondary" display="block" textAlign={{ xs: 'left', sm: 'center' }}>
+            © {year} {STORE_NAME}. Сделано для демонстрации возможностей витрины.
+          </Typography>
+        </Container>
       </Box>
     </Box>
   )