From 9999b28d4975093716361c538edd162af8705795 Mon Sep 17 00:00:00 2001
From: Kirill <mpak8501@yandex.ru>
Date: Tue, 19 May 2026 09:00:26 +0500
Subject: [PATCH] test commit

---
 client/src/app/layout/MainLayout.tsx          |  48 ++++---
 client/src/app/providers/AppProviders.tsx     | 126 ++++++++++++------
 client/src/app/routes/index.tsx               |   7 +-
 client/src/pages/not-found/index.ts           |   1 +
 .../src/pages/not-found/ui/NotFoundPage.tsx   |  46 +++++++
 client/src/pages/product/ui/ProductPage.tsx   |   9 +-
 client/src/pages/terms/index.ts               |   1 +
 client/src/pages/terms/ui/TermsPage.tsx       |  69 ++++++++++
 .../widgets/reviews-block/ui/ReviewsBlock.tsx |  10 +-
 9 files changed, 249 insertions(+), 68 deletions(-)
 create mode 100644 client/src/pages/not-found/index.ts
 create mode 100644 client/src/pages/not-found/ui/NotFoundPage.tsx
 create mode 100644 client/src/pages/terms/index.ts
 create mode 100644 client/src/pages/terms/ui/TermsPage.tsx

diff --git a/client/src/app/layout/MainLayout.tsx b/client/src/app/layout/MainLayout.tsx
index ddc01f2..8d49510 100644
--- a/client/src/app/layout/MainLayout.tsx
+++ b/client/src/app/layout/MainLayout.tsx
@@ -18,7 +18,7 @@ export function MainLayout({ children }: PropsWithChildren) {
     <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
       <AppHeader />
 
-      <Box component="main" sx={{ flex: 1, py: 3 }}>
+      <Box component="main" sx={{ flex: 1, py: { xs: 4, md: 6 } }}>
         <Container maxWidth="lg">{children}</Container>
       </Box>
 
@@ -29,32 +29,29 @@ export function MainLayout({ children }: PropsWithChildren) {
           borderTop: 1,
           borderColor: 'divider',
           bgcolor: 'background.default',
-          py: { xs: 3, md: 4 },
+          py: { xs: 4, md: 6 },
         }}
       >
         <Container maxWidth="lg">
-          <Grid container spacing={3}>
+          <Grid container spacing={4}>
             <Grid size={{ xs: 12, sm: 4 }}>
-              <Typography variant="subtitle1" gutterBottom sx={{ fontWeight: 700 }}>
+              <Typography variant="subtitle1" gutterBottom sx={{ fontWeight: 600, letterSpacing: '-0.25px' }}>
                 Магазин
               </Typography>
-              <Stack spacing={1}>
+              <Stack spacing={1.5}>
                 <Link component={RouterLink} to="/" color="inherit" underline="hover" variant="body2">
                   Каталог
                 </Link>
-                <Link component={RouterLink} to="/privacy" 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" gutterBottom sx={{ fontWeight: 700 }}>
+              <Typography variant="subtitle1" gutterBottom sx={{ fontWeight: 600, letterSpacing: '-0.25px' }}>
                 Покупателям
               </Typography>
-              <Stack spacing={1}>
+              <Stack spacing={1.5}>
                 <Link component={RouterLink} to="/me" color="inherit" underline="hover" variant="body2">
                   Личный кабинет
                 </Link>
@@ -67,10 +64,10 @@ export function MainLayout({ children }: PropsWithChildren) {
               </Stack>
             </Grid>
             <Grid size={{ xs: 12, sm: 4 }}>
-              <Typography variant="subtitle1" gutterBottom sx={{ fontWeight: 700 }}>
+              <Typography variant="subtitle1" gutterBottom sx={{ fontWeight: 600, letterSpacing: '-0.25px' }}>
                 Контакты
               </Typography>
-              <Stack spacing={0.75}>
+              <Stack spacing={1}>
                 <Typography variant="body2">
                   Email:{' '}
                   <Link href={`mailto:${STORE_EMAIL}`} underline="hover">
@@ -97,15 +94,26 @@ export function MainLayout({ children }: PropsWithChildren) {
                 </Link>
               </Stack>
             </Grid>
+            <Grid size={{ xs: 12, sm: 4 }}>
+              <Typography variant="subtitle1" gutterBottom sx={{ fontWeight: 600, letterSpacing: '-0.25px' }}>
+                Юридическая информация
+              </Typography>
+              <Stack spacing={1.5}>
+                <Link component={RouterLink} to="/privacy" color="inherit" underline="hover" variant="body2">
+                  Политика конфиденциальности
+                </Link>
+                <Link component={RouterLink} to="/terms" color="inherit" underline="hover" variant="body2">
+                  Пользовательское соглашение
+                </Link>
+              </Stack>
+            </Grid>
           </Grid>
-          <Divider sx={{ my: 2 }} />
-          <Typography
-            variant="caption"
-            color="text.secondary"
-            sx={{ display: 'block', textAlign: { xs: 'left', sm: 'center' } }}
-          >
-            © {year} {STORE_NAME}
-          </Typography>
+          <Divider sx={{ my: 3 }} />
+          <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}
+            </Typography>
+          </Box>
         </Container>
       </Box>
     </Box>
diff --git a/client/src/app/providers/AppProviders.tsx b/client/src/app/providers/AppProviders.tsx
index ad90173..2ce3a99 100644
--- a/client/src/app/providers/AppProviders.tsx
+++ b/client/src/app/providers/AppProviders.tsx
@@ -24,97 +24,135 @@ function AppThemeInner({ children }: PropsWithChildren) {
             case 'forest':
               return {
                 ...common,
-                primary: { main: isDark ? '#4CAF50' : '#2E7D32' },
-                secondary: { main: isDark ? '#A1887F' : '#6D4C41' },
-                info: { main: isDark ? '#29B6F6' : '#0288D1' },
-                success: { main: isDark ? '#66BB6A' : '#2E7D32' },
-                warning: { main: isDark ? '#FFB74D' : '#ED6C02' },
-                error: { main: isDark ? '#EF5350' : '#D32F2F' },
-                divider: isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.10)',
+                primary: { main: isDark ? '#8FBC8F' : '#2E8B57' },
+                secondary: { main: isDark ? '#CD853F' : '#8B4513' },
+                info: { main: isDark ? '#4682B4' : '#1E90FF' },
+                success: { main: isDark ? '#90EE90' : '#32CD32' },
+                warning: { main: isDark ? '#FFD700' : '#FFA500' },
+                error: { main: isDark ? '#F08080' : '#CD5C5C' },
+                divider: isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)',
                 text,
                 chip,
                 background: isDark
-                  ? { default: '#0E1510', paper: '#121B14' }
-                  : { default: '#F6FAF6', paper: '#FFFFFF' },
+                  ? { default: '#0F1720', paper: '#1A242E' }
+                  : { default: '#F8F6F3', paper: '#FFFFFF' },
               }
             case 'ocean':
               return {
                 ...common,
-                primary: { main: isDark ? '#42A5F5' : '#1565C0' },
-                secondary: { main: isDark ? '#4DD0E1' : '#00838F' },
-                info: { main: isDark ? '#4FC3F7' : '#0288D1' },
-                success: { main: isDark ? '#26C6DA' : '#00838F' },
-                warning: { main: isDark ? '#FFCC80' : '#ED6C02' },
-                error: { main: isDark ? '#EF5350' : '#D32F2F' },
-                divider: isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.10)',
+                primary: { main: isDark ? '#5F9EA0' : '#20B2AA' },
+                secondary: { main: isDark ? '#7B68EE' : '#6A5ACD' },
+                info: { main: isDark ? '#87CEEB' : '#00BFFF' },
+                success: { main: isDark ? '#98FB98' : '#00FA9A' },
+                warning: { main: isDark ? '#FFE4B5' : '#FFDAB9' },
+                error: { main: isDark ? '#FF6347' : '#FF4500' },
+                divider: isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)',
                 text,
                 chip,
                 background: isDark
-                  ? { default: '#0B1220', paper: '#0F172A' }
-                  : { default: '#F6FAFF', paper: '#FFFFFF' },
+                  ? { default: '#0A1A2A', paper: '#0F1D35' }
+                  : { default: '#F0F8FF', paper: '#FFFFFF' },
               }
             case 'berry':
               return {
                 ...common,
-                primary: { main: isDark ? '#BA68C8' : '#7B1FA2' },
-                secondary: { main: isDark ? '#F06292' : '#C2185B' },
-                info: { main: isDark ? '#64B5F6' : '#1976D2' },
-                success: { main: isDark ? '#81C784' : '#2E7D32' },
-                warning: { main: isDark ? '#FFB74D' : '#ED6C02' },
-                error: { main: isDark ? '#EF5350' : '#D32F2F' },
-                divider: isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.10)',
+                primary: { main: isDark ? '#9370DB' : '#8A2BE2' },
+                secondary: { main: isDark ? '#FF69B4' : '#FF1493' },
+                info: { main: isDark ? '#00CED1' : '#00BFFF' },
+                success: { main: isDark ? '#00FF7F' : '#7CFC00' },
+                warning: { main: isDark ? '#FFD700' : '#FFA500' },
+                error: { main: isDark ? '#FF4500' : '#FF6347' },
+                divider: isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)',
                 text,
                 chip,
                 background: isDark
-                  ? { default: '#140A17', paper: '#1B0F20' }
-                  : { default: '#FFF7FD', paper: '#FFFFFF' },
+                  ? { default: '#1A0A1A', paper: '#250E25' }
+                  : { default: '#FFF0F5', paper: '#FFFFFF' },
               }
             case 'craft':
             default:
               return {
                 ...common,
-                primary: { main: isDark ? '#BCAAA4' : '#6D4C41' },
-                secondary: { main: isDark ? '#FFCCBC' : '#8D6E63' },
-                info: { main: isDark ? '#90CAF9' : '#1976D2' },
-                success: { main: isDark ? '#A5D6A7' : '#2E7D32' },
-                warning: { main: isDark ? '#FFB74D' : '#ED6C02' },
-                error: { main: isDark ? '#EF9A9A' : '#D32F2F' },
-                divider: isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.10)',
+                primary: { main: isDark ? '#A0522D' : '#8B4513' },
+                secondary: { main: isDark ? '#D2B48C' : '#DEB887' },
+                info: { main: isDark ? '#6495ED' : '#4169E1' },
+                success: { main: isDark ? '#9ACD32' : '#6B8E23' },
+                warning: { main: isDark ? '#F4A460' : '#CD853F' },
+                error: { main: isDark ? '#DC143C' : '#B22222' },
+                divider: isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)',
                 text,
                 chip,
                 background: isDark
-                  ? { default: '#12100F', paper: '#191615' }
-                  : { default: '#FAF8F5', paper: '#FFFFFF' },
+                  ? { default: '#1A1410', paper: '#251E17' }
+                  : { default: '#FAF9F6', paper: '#FFFFFF' },
               }
           }
         })(),
         shape: { borderRadius: 12 },
         typography: {
-          fontFamily: '"Segoe UI", system-ui, sans-serif',
-          h4: { fontWeight: 700 },
-          h5: { fontWeight: 600 },
+          fontFamily: '"Outfit", "Segoe UI", system-ui, sans-serif',
+          h4: { fontWeight: 700, letterSpacing: '-0.5px' },
+          h5: { fontWeight: 600, letterSpacing: '-0.25px' },
+          h6: { fontWeight: 600 },
+          subtitle1: { fontWeight: 600 },
+          subtitle2: { fontWeight: 500 },
+          body1: { fontSize: '0.875rem' },
+          body2: { fontSize: '0.75rem' },
+          button: { textTransform: 'none', fontWeight: 600 },
         },
         components: {
           MuiButton: {
             styleOverrides: {
-              root: { textTransform: 'none', borderRadius: 12, fontWeight: 600 },
+              root: {
+                textTransform: 'none',
+                borderRadius: 12,
+                fontWeight: 600,
+                transition: 'all 0.2s ease-in-out',
+              },
               contained: {
                 boxShadow: '0 4px 14px 0 rgba(0,0,0,0.15)',
                 '&:hover': {
                   boxShadow: '0 6px 20px 0 rgba(0,0,0,0.25)',
-                  transform: 'translateY(-1px)',
+                  transform: 'translateY(-2px)',
+                },
+                '&:active': {
+                  boxShadow: '0 2px 8px 0 rgba(0,0,0,0.15)',
+                  transform: 'translateY(0)',
                 },
               },
               outlined: {
-                '&:hover': { boxShadow: '0 2px 8px 0 rgba(0,0,0,0.1)' },
+                border: '1px solid',
+                '&:hover': {
+                  boxShadow: '0 2px 8px 0 rgba(0,0,0,0.1)',
+                  borderWidth: '2px',
+                },
+                '&:active': {
+                  boxShadow: 'none',
+                },
+              },
+              text: {
+                '&:hover': {
+                  boxShadow: '0 1px 3px 0 rgba(0,0,0,0.1)',
+                  backgroundColor: 'action.hover',
+                },
+                '&:active': {
+                  backgroundColor: 'action.selected',
+                },
               },
             },
           },
           MuiIconButton: {
             styleOverrides: {
               root: {
-                transition: 'all 0.2s ease',
-                '&:hover': { transform: 'scale(1.1)' },
+                transition: 'all 0.2s ease-in-out',
+                '&:hover': {
+                  backgroundColor: 'action.hover',
+                  transform: 'scale(1.1)',
+                },
+                '&:active': {
+                  backgroundColor: 'action.selected',
+                  transform: 'scale(0.95)',
+                },
               },
             },
           },
diff --git a/client/src/app/routes/index.tsx b/client/src/app/routes/index.tsx
index b40af29..a2b1a20 100644
--- a/client/src/app/routes/index.tsx
+++ b/client/src/app/routes/index.tsx
@@ -1,5 +1,5 @@
 import { lazy, Suspense } from 'react'
-import { Navigate, Route, Routes } from 'react-router-dom'
+import { Route, Routes } from 'react-router-dom'
 import { MainLayout } from '@/app/layout/MainLayout'
 import { AboutPage } from '@/pages/about'
 // import { AdminLayoutPage } from '@/pages/admin-layout'
@@ -9,8 +9,10 @@ import { CheckoutPage } from '@/pages/checkout'
 import { HomePage } from '@/pages/home'
 import { InfoPage } from '@/pages/info'
 // import { MeLayoutPage } from '@/pages/me'
+import { NotFoundPage } from '@/pages/not-found'
 import { PrivacyPolicyPage } from '@/pages/privacy-policy'
 import { ProductPage } from '@/pages/product'
+import { TermsPage } from '@/pages/terms'
 import { SkeletonPage } from '@/shared/ui/SkeletonPage'
 
 const AdminLayoutPage = lazy(() => import('@/pages/admin-layout').then((m) => ({ default: m.AdminLayoutPage })))
@@ -36,6 +38,7 @@ export function AppRoutes() {
         <Route path="/about" element={<AboutPage />} />
         <Route path="/info" element={<InfoPage />} />
         <Route path="/privacy" element={<PrivacyPolicyPage />} />
+        <Route path="/terms" element={<TermsPage />} />
         <Route
           path="/me/*"
           element={
@@ -45,7 +48,7 @@ export function AppRoutes() {
           }
         />
         <Route path="/products/:id" element={<ProductPage />} />
-        <Route path="*" element={<Navigate to="/" replace />} />
+        <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </MainLayout>
   )
diff --git a/client/src/pages/not-found/index.ts b/client/src/pages/not-found/index.ts
new file mode 100644
index 0000000..4773243
--- /dev/null
+++ b/client/src/pages/not-found/index.ts
@@ -0,0 +1 @@
+export { NotFoundPage } from './ui/NotFoundPage'
diff --git a/client/src/pages/not-found/ui/NotFoundPage.tsx b/client/src/pages/not-found/ui/NotFoundPage.tsx
new file mode 100644
index 0000000..f3fd34a
--- /dev/null
+++ b/client/src/pages/not-found/ui/NotFoundPage.tsx
@@ -0,0 +1,46 @@
+import { Box, Typography, Button, Stack, Paper } from '@mui/material'
+import { Link as RouterLink } from 'react-router-dom'
+
+export function NotFoundPage() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: '100vh',
+        bgcolor: 'background.default',
+        alignItems: 'center',
+        justifyContent: 'center',
+        py: 4,
+        px: 2,
+      }}
+    >
+      <Paper sx={{ p: 4, borderRadius: 3, bgcolor: 'background.paper' }}>
+        <Stack spacing={3} alignItems="center" textAlign="center">
+          <Box sx={{ fontSize: 96, lineHeight: 1 }}>404</Box>
+          <Typography variant="h4" component="h1" gutterBottom>
+            Страница не найдена
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ maxWidth: 400 }}>
+            Извините, но запрашиваемая страница не существует или была удалена.
+          </Typography>
+          <Stack direction="row" spacing={2} sx={{ mt: 2 }}>
+            <Button
+              variant="contained"
+              size="large"
+              onClick={() => {
+                window.location.href = '/'
+              }}
+              sx={{ px: 4 }}
+            >
+              Вернуться на главную
+            </Button>
+            <Button variant="outlined" size="large" component={RouterLink} to="/" sx={{ px: 4 }}>
+              Посмотреть каталог
+            </Button>
+          </Stack>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
diff --git a/client/src/pages/product/ui/ProductPage.tsx b/client/src/pages/product/ui/ProductPage.tsx
index 0cc428e..01fbc58 100644
--- a/client/src/pages/product/ui/ProductPage.tsx
+++ b/client/src/pages/product/ui/ProductPage.tsx
@@ -194,7 +194,14 @@ export function ProductPage() {
         {reviewsQuery.isLoading && <Typography color="text.secondary">Загрузка отзывов…</Typography>}
         {reviewsQuery.isError && <Alert severity="warning">Не удалось загрузить отзывы.</Alert>}
         {reviewsQuery.data && reviewsQuery.data.total === 0 && (
-          <Typography color="text.secondary">Пока нет опубликованных отзывов на этот товар.</Typography>
+          <Box sx={{ textAlign: 'center', py: 3 }}>
+            <Typography variant="h6" color="text.secondary" sx={{ mb: 1 }}>
+              Отзывов пока нет
+            </Typography>
+            <Typography variant="body2" color="text.secondary" sx={{ maxWidth: 400 }}>
+              Будьте первым, кто оставит отзыв на этот товар. Ваше мнение поможет улучшить качество наших изделий.
+            </Typography>
+          </Box>
         )}
         {reviewsQuery.data && reviewsQuery.data.items.length > 0 && (
           <Stack spacing={1.25}>
diff --git a/client/src/pages/terms/index.ts b/client/src/pages/terms/index.ts
new file mode 100644
index 0000000..2f6018a
--- /dev/null
+++ b/client/src/pages/terms/index.ts
@@ -0,0 +1 @@
+export { TermsPage } from './ui/TermsPage'
diff --git a/client/src/pages/terms/ui/TermsPage.tsx b/client/src/pages/terms/ui/TermsPage.tsx
new file mode 100644
index 0000000..ed6fe68
--- /dev/null
+++ b/client/src/pages/terms/ui/TermsPage.tsx
@@ -0,0 +1,69 @@
+import { Box, Typography, Button, Stack } from '@mui/material'
+import { Link as RouterLink } from 'react-router-dom'
+
+export function TermsPage() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: '100vh',
+        bgcolor: 'background.default',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        py: 4,
+        px: 2,
+      }}
+    >
+      <Box sx={{ maxWidth: 800, width: '100%', py: 4 }}>
+        <Typography variant="h4" component="h1" gutterBottom sx={{ mb: 4 }}>
+          Пользовательское соглашение
+        </Typography>
+
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+          Последнее обновление: 18 мая 2026 г.
+        </Typography>
+
+        <Box sx={{ bgcolor: 'background.paper', p: 3, borderRadius: 2 }}>
+          <Typography variant="body2" color="text.primary" sx={{ lineHeight: 1.7, mb: 2 }}>
+            1. ОБЩИЕ ПОЛОЖЕНИЯ
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+            Настоящее пользовательское соглашение (далее – «Соглашение») регулирует отношения между пользователями сайта
+            и администрацией сайта в связи с использованием сайта Любимый Креатив.
+          </Typography>
+
+          <Typography variant="body2" color="text.primary" sx={{ lineHeight: 1.7, mb: 2 }}>
+            2. ПРЕДМЕТ СОГЛАШЕНИЯ
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+            Сайт предоставляет пользователям возможность ознакомиться с информацией о товарах, совершать покупки и
+            оставлять отзывы.
+          </Typography>
+
+          <Typography variant="body2" color="text.primary" sx={{ lineHeight: 1.7, mb: 2 }}>
+            3. ПРАВА И ОБЯЗАННОСТИ ПОЛЬЗОВАТЕЛЯ
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+            Пользователь обязуется предоставлять достоверную информацию при регистрации и оформлении заказов, не
+            использовать сайт в незаконных целях, соблюдать правила поведения при оставлении отзывов и комментариев.
+          </Typography>
+
+          <Typography variant="body2" color="text.primary" sx={{ lineHeight: 1.7, mb: 2 }}>
+            4. ОТВЕТСТВЕННОСТЬ
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+            Администрация сайта не несет ответственности за прямые или косвенные убытки, возникшие в результате
+            использования информации, размещенной на сайте.
+          </Typography>
+        </Box>
+
+        <Stack direction="row" justifyContent="center" mt={4}>
+          <Button variant="outlined" size="medium" component={RouterLink} to="/" sx={{ px: 3 }}>
+            Вернуться на главную
+          </Button>
+        </Stack>
+      </Box>
+    </Box>
+  )
+}
diff --git a/client/src/widgets/reviews-block/ui/ReviewsBlock.tsx b/client/src/widgets/reviews-block/ui/ReviewsBlock.tsx
index 0acc819..5fc196b 100644
--- a/client/src/widgets/reviews-block/ui/ReviewsBlock.tsx
+++ b/client/src/widgets/reviews-block/ui/ReviewsBlock.tsx
@@ -53,7 +53,15 @@ export function ReviewsBlock() {
       )}
       {q.isError && <Alert severity="error">Не удалось загрузить отзывы.</Alert>}
       {!q.isLoading && !q.isError && q.data && items.length === 0 && (
-        <Typography color="text.secondary">Пока нет опубликованных отзывов о товарах.</Typography>
+        <Box sx={{ textAlign: 'center', py: 4 }}>
+          <Typography variant="h6" color="text.secondary" sx={{ mb: 2 }}>
+            Отзывов пока нет
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ maxWidth: 400 }}>
+            Будьте первым, кто оставит отзыв о наших товарах. Ваше мнение поможет другим покупателям сделать правильный
+            выбор.
+          </Typography>
+        </Box>
       )}
       {items.length > 0 && (
         <Stack spacing={2}>