feat: add DeliverySection with pickup, courier, and postal cards

2026-05-19 14:44:08 +05:00
parent 22ac9e381d
commit 2ffa11be50
1 changed files with 61 additions and 0 deletions
@@ -0,0 +1,61 @@
 import Grid from '@mui/material/Grid'
 import Paper from '@mui/material/Paper'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import { Package, Store, Truck } from 'lucide-react'
 import { PICKUP_ADDRESS_FULL } from '@/shared/constants/pickup-point'
 const deliveries = [
  {
    title: 'Самовывоз',
    icon: <Store size={28} />,
    lines: ['Бесплатно.', PICKUP_ADDRESS_FULL, 'Перед визитом согласуем время — чтобы заказ точно был готов к выдаче.'],
  },
  {
    title: 'Курьер по городу',
    icon: <Truck size={28} />,
    lines: [
      'Доставка в пределах города.',
      'Сроки и стоимость зависят от адреса и веса заказа.',
      'Мастер свяжется с вами для уточнения деталей после оформления.',
    ],
  },
  {
    title: 'Почта / СДЭК',
    icon: <Package size={28} />,
    lines: [
      'Отправка в другие города.',
      'Каждому заказу присваивается трек-номер для отслеживания.',
      'Стоимость рассчитывается по тарифу перевозчика при оформлении.',
    ],
  },
 ]
 export function DeliverySection() {
  return (
    <Paper variant="outlined" sx={{ p: 3, borderRadius: 2 }}>
      <Typography variant="h5" gutterBottom>
        Доставка
      </Typography>
      <Grid container spacing={2}>
        {deliveries.map((d) => (
          <Grid key={d.title} size={{ xs: 12, sm: 6, md: 4 }}>
            <Paper variant="outlined" sx={{ p: 2, borderRadius: 2, height: '100%' }}>
              <Stack spacing={1.5}>
                <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
                  {d.icon}
                  <Typography variant="h6">{d.title}</Typography>
                </Stack>
                {d.lines.map((line, i) => (
                  <Typography key={i} variant="body2" color="text.secondary">
                    {line}
                  </Typography>
                ))}
              </Stack>
            </Paper>
          </Grid>
        ))}
      </Grid>
    </Paper>
  )
 }