feat: rewrite InfoPage as static container with section components

client/src/pages/info/ui/InfoPage.tsx

@@ -1,42 +1,27 @@
-import Alert from '@mui/material/Alert'
 import Box from '@mui/material/Box'
-import Paper from '@mui/material/Paper'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
-import { useQuery } from '@tanstack/react-query'
+import { DeliverySection } from './sections/DeliverySection'
-import { fetchPublicInfoBlocks } from '@/entities/info'
+import { HowToOrderSection } from './sections/HowToOrderSection'
+import { PaymentSection } from './sections/PaymentSection'
+import { ReturnsSection } from './sections/ReturnsSection'
 
 export function InfoPage() {
-  const q = useQuery({
-    queryKey: ['info-page', 'public', 'blocks'],
-    queryFn: fetchPublicInfoBlocks,
-  })
-
   return (
     <Box>
       <Typography variant="h4" gutterBottom>
         Информация для покупателей
       </Typography>
-      <Typography color="text.secondary" sx={{ mb: 2 }}>
+      <Typography color="text.secondary" sx={{ mb: 3 }}>
         Как оформить заказ, как проходит доставка, оплата и другие важные детали.
       </Typography>
 
-      {q.isLoading && <Typography color="text.secondary">Загрузка…</Typography>}
+      <Stack spacing={3}>
-      {q.isError && <Alert severity="error">Не удалось загрузить информацию.</Alert>}
+        <HowToOrderSection />
-      {q.isSuccess && q.data.items.length === 0 && <Alert severity="info">Раздел пока не заполнен.</Alert>}
+        <DeliverySection />
-
+        <PaymentSection />
-      {q.isSuccess && q.data.items.length > 0 && (
+        <ReturnsSection />
-        <Stack spacing={2}>
-          {q.data.items.map((block) => (
-            <Paper key={block.id} variant="outlined" sx={{ p: 2, borderRadius: 2 }}>
-              <Typography variant="h6" sx={{ mb: 0.75 }}>
-                {block.title}
-              </Typography>
-              <Typography sx={{ whiteSpace: 'pre-wrap' }}>{block.body}</Typography>
-            </Paper>
-          ))}
       </Stack>
-      )}
     </Box>
   )
 }