base commit

2026-05-10 13:50:44 +05:00
parent 6c07488964
commit 97537a8717
22 changed files with 307 additions and 100 deletions
@@ -0,0 +1,87 @@
+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 * as maplibregl from 'maplibre-gl'
+import Map, { Marker } from 'react-map-gl/maplibre'
+import { PICKUP_ADDRESS_FULL, PICKUP_COORDINATES } from '@/shared/constants/pickup-point'
+
+const rasterStyle = {
+  version: 8 as const,
+  sources: {
+    osm: {
+      type: 'raster' as const,
+      tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
+      tileSize: 256,
+      attribution: '© OpenStreetMap contributors',
+    },
+  },
+  layers: [{ id: 'osm', type: 'raster' as const, source: 'osm' }],
+}
+
+export function AboutPage() {
+  const { lat, lng } = PICKUP_COORDINATES
+  return (
+    <Box>
+      <Typography variant="h4" gutterBottom>
+        О нас
+      </Typography>
+      <Typography color="text.secondary" sx={{ mb: 3 }}>
+        Магазин изделий ручной работы. Мы отвечаем за качество и сроки изготовления всего, что вы видите в каталоге.
+      </Typography>
+
+      <Stack spacing={3}>
+        <Paper variant="outlined" sx={{ p: 2, borderRadius: 2 }}>
+          <Typography variant="h6" gutterBottom>
+            Контакты и самовывоз
+          </Typography>
+          <Typography sx={{ mb: 1 }}>
+            Забрать заказ можно по адресу самовывоза (координаты указаны на карте ниже):
+          </Typography>
+          <Typography sx={{ whiteSpace: 'pre-wrap', fontWeight: 600 }}>{PICKUP_ADDRESS_FULL}</Typography>
+          <Typography color="text.secondary" variant="body2" sx={{ mt: 1 }}>
+            Перед визитом мы свяжемся с вами и согласуем время — чтобы заказ точно был готов к выдаче.
+          </Typography>
+        </Paper>
+
+        <Box
+          sx={{
+            height: 380,
+            borderRadius: 2,
+            overflow: 'hidden',
+            border: 1,
+            borderColor: 'divider',
+            position: 'relative',
+          }}
+        >
+          <Map
+            mapLib={maplibregl}
+            initialViewState={{ latitude: lat, longitude: lng, zoom: 16 }}
+            style={{ width: '100%', height: 380 }}
+            mapStyle={rasterStyle}
+            scrollZoom={false}
+            dragRotate={false}
+            dragPan={false}
+            doubleClickZoom={false}
+            keyboard={false}
+            touchZoomRotate={false}
+          >
+            <Marker longitude={lng} latitude={lat} anchor="bottom">
+              <Box
+                sx={{
+                  width: 20,
+                  height: 20,
+                  bgcolor: 'primary.main',
+                  borderRadius: '50%',
+                  border: 2,
+                  borderColor: 'background.paper',
+                  boxShadow: 3,
+                }}
+              />
+            </Marker>
+          </Map>
+        </Box>
+      </Stack>
+    </Box>
+  )
+}