From 4952ed637179a4f381304868a9294ff05f92e104 Mon Sep 17 00:00:00 2001
From: Kirill <mpak8501@yandex.ru>
Date: Tue, 19 May 2026 14:43:26 +0500
Subject: [PATCH] feat: add HowToOrderSection with purchase step stepper

---
 .../info/ui/sections/HowToOrderSection.tsx    | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 client/src/pages/info/ui/sections/HowToOrderSection.tsx

diff --git a/client/src/pages/info/ui/sections/HowToOrderSection.tsx b/client/src/pages/info/ui/sections/HowToOrderSection.tsx
new file mode 100644
index 0000000..af539f7
--- /dev/null
+++ b/client/src/pages/info/ui/sections/HowToOrderSection.tsx
@@ -0,0 +1,55 @@
+import Paper from '@mui/material/Paper'
+import Step from '@mui/material/Step'
+import StepContent from '@mui/material/StepContent'
+import StepLabel from '@mui/material/StepLabel'
+import Stepper from '@mui/material/Stepper'
+import Typography from '@mui/material/Typography'
+import { CheckCircle, ClipboardList, Mail, ShoppingCart, Truck } from 'lucide-react'
+
+const steps = [
+  {
+    label: 'Выберите товары',
+    icon: <ShoppingCart size={20} />,
+    text: 'Найдите нужные изделия в каталоге и добавьте их в корзину. Вы можете выбрать несколько товаров от разных мастеров — все они соберутся в одном заказе.',
+  },
+  {
+    label: 'Проверьте корзину',
+    icon: <ClipboardList size={20} />,
+    text: 'Перейдите в корзину и проверьте состав заказа: названия товаров, количество и итоговую сумму. Здесь же можно изменить количество или удалить позиции.',
+  },
+  {
+    label: 'Укажите контакты и адрес',
+    icon: <Mail size={20} />,
+    text: 'Заполните имя, телефон и email для связи. Укажите адрес доставки — город, улицу, дом и квартиру. Эти данные нужны для расчёта стоимости и сроков.',
+  },
+  {
+    label: 'Выберите доставку и оплату',
+    icon: <Truck size={20} />,
+    text: 'Выберите способ доставки: самовывоз, курьер или почта/СДЭК. Затем укажите способ оплаты: картой онлайн или при получении.',
+  },
+  {
+    label: 'Подтвердите заказ',
+    icon: <CheckCircle size={20} />,
+    text: 'Проверьте все данные ещё раз и нажмите «Оформить заказ». После этого мастер получит уведомление и начнёт подготовку вашего изделия.',
+  },
+]
+
+export function HowToOrderSection() {
+  return (
+    <Paper variant="outlined" sx={{ p: 3, borderRadius: 2 }}>
+      <Typography variant="h5" gutterBottom>
+        Как оформить заказ
+      </Typography>
+      <Stepper orientation="vertical" activeStep={-1}>
+        {steps.map((step, idx) => (
+          <Step key={idx} completed={false}>
+            <StepLabel StepIconComponent={() => step.icon}>{step.label}</StepLabel>
+            <StepContent>
+              <Typography color="text.secondary">{step.text}</Typography>
+            </StepContent>
+          </Step>
+        ))}
+      </Stepper>
+    </Paper>
+  )
+}