пва

client/src/app/routes/index.tsx

@@ -11,12 +11,15 @@ import { NotFoundPage } from '@/pages/not-found'
 import { PrivacyPolicyPage } from '@/pages/privacy-policy'
 import { ProductPage } from '@/pages/product'
 import { TermsPage } from '@/pages/terms'
+import { usePageTitleReset } from '@/shared/lib/use-page-title'
 import { SkeletonPage } from '@/shared/ui/SkeletonPage'
 
 const AdminLayoutPage = lazy(() => import('@/pages/admin-layout').then((m) => ({ default: m.AdminLayoutPage })))
 const MeLayoutPage = lazy(() => import('@/pages/me').then((m) => ({ default: m.MeLayoutPage })))
 
 export function AppRoutes() {
+  usePageTitleReset()
+
   return (
     <MainLayout>
       <Routes>

client/src/entities/product/ui/ProductCard.tsx

@@ -1,13 +1,14 @@
 import type { ReactNode } from 'react'
 import { useCallback, useMemo, useRef } from 'react'
+import { useMediaQuery } from '@mui/material'
 import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
 import CardMedia from '@mui/material/CardMedia'
 import Chip from '@mui/material/Chip'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import { useNavigate } from 'react-router-dom'
+import { Autoplay } from 'swiper/modules'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import 'swiper/css'
 import type { Product } from '@/entities/product/model/types'
@@ -19,6 +20,7 @@ type Props = { product: Product; mediaHeight?: number; actions?: ReactNode }
 
 export function ProductCard({ product, mediaHeight = 200, actions }: Props) {
   const navigate = useNavigate()
+  const isMobile = useMediaQuery('(max-width:600px)')
   const swiperRef = useRef<SwiperType | null>(null)
   const imageUrls = useMemo(() => {
     const fromImages = (product.images ?? [])
@@ -76,12 +78,14 @@ export function ProductCard({ product, mediaHeight = 200, actions }: Props) {
     >
       <Box sx={{ position: 'relative' }}>
         {imageUrls.length ? (
-          <Box onMouseMove={onMouseMove} sx={{ height: mediaHeight, overflow: 'hidden' }}>
+          <Box onMouseMove={!isMobile ? onMouseMove : undefined} sx={{ height: mediaHeight, overflow: 'hidden' }}>
             <Swiper
               onSwiper={(s) => {
                 swiperRef.current = s
               }}
-              allowTouchMove={false}
+              modules={isMobile ? [Autoplay] : undefined}
+              autoplay={isMobile ? { delay: 3000, disableOnInteraction: false, pauseOnMouseEnter: true } : undefined}
+              allowTouchMove={!isMobile}
               style={{ width: '100%', height: mediaHeight }}
             >
               {imageUrls.map((url) => (
@@ -150,8 +154,8 @@ export function ProductCard({ product, mediaHeight = 200, actions }: Props) {
         )}
       </Box>
 
-      <CardContent sx={{ flexGrow: 1, p: 2, '&:last-child': { pb: 2 } }}>
+      <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', p: 2, pb: 2 }}>
-        <Stack spacing={1.25}>
+        <Stack spacing={1.25} sx={{ flexGrow: 1 }}>
           {product.category && (
             <Chip
               label={product.category.name}
@@ -231,15 +235,15 @@ export function ProductCard({ product, mediaHeight = 200, actions }: Props) {
           >
             {product.shortDescription ?? 'Описание появится позже.'}
           </Typography>
-
-          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mt: 'auto', pt: 0.5 }}>
-            <Typography variant="h6" color="primary" sx={{ fontWeight: 700, fontSize: '1.1rem' }}>
-              {formatPriceRub(product.priceCents)}
-            </Typography>
-            {actions}
-          </Box>
         </Stack>
-      </CardContent>
+
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', pt: 1.5 }}>
+          <Typography variant="h6" color="primary" sx={{ fontWeight: 700, fontSize: '1.1rem' }}>
+            {formatPriceRub(product.priceCents)}
+          </Typography>
+          {actions}
+        </Box>
+      </Box>
     </Card>
   )
 }

client/src/pages/about/ui/AboutPage.tsx

@@ -7,6 +7,7 @@ import * as maplibregl from 'maplibre-gl'
 import Map, { Marker } from 'react-map-gl/maplibre'
 import { STORE_EMAIL, STORE_PHONE, VK_URL } from '@/shared/config'
 import { PICKUP_ADDRESS_FULL, PICKUP_COORDINATES } from '@/shared/constants/pickup-point'
+import { usePageTitle } from '@/shared/lib/use-page-title'
 
 const rasterStyle = {
   version: 8 as const,
@@ -22,6 +23,7 @@ const rasterStyle = {
 }
 
 export function AboutPage() {
+  usePageTitle('О нас')
   const { lat, lng } = PICKUP_COORDINATES
   return (
     <Box>

client/src/pages/cart/ui/CartPage.tsx

@@ -12,9 +12,11 @@ import { Minus, Plus, Trash2 } from 'lucide-react'
 import { Link as RouterLink } from 'react-router-dom'
 import { fetchMyCart, removeCartItem, setCartQty } from '@/entities/cart/api/cart-api'
 import { formatPriceRub } from '@/shared/lib/format-price'
+import { usePageTitle } from '@/shared/lib/use-page-title'
 import { $user } from '@/shared/model/auth'
 
 export function CartPage() {
+  usePageTitle('Корзина')
   const user = useUnit($user)
   const qc = useQueryClient()
 

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

@@ -3,6 +3,7 @@ import Container from '@mui/material/Container'
 import Divider from '@mui/material/Divider'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
+import { usePageTitle } from '@/shared/lib/use-page-title'
 import { DeliverySection } from './sections/DeliverySection'
 import { HowToOrderSection } from './sections/HowToOrderSection'
 import { OrderStatusesSection } from './sections/OrderStatusesSection'
@@ -10,6 +11,7 @@ import { PaymentSection } from './sections/PaymentSection'
 import { ReturnsSection } from './sections/ReturnsSection'
 
 export function InfoPage() {
+  usePageTitle('Информация для покупателей')
   return (
     <Container maxWidth="lg" sx={{ py: { xs: 4 } }}>
       {/* Hero */}

client/src/pages/me/ui/sections/AddressesPage.tsx

@@ -16,6 +16,7 @@ import {
 } from '@/entities/user/api/address-api'
 import type { ShippingAddress } from '@/entities/user/model/types'
 import { AddressFormDialog, type AddressFormValues } from '@/features/address-form'
+import { usePageTitle } from '@/shared/lib/use-page-title'
 
 const defaultAddressForm = (isDefault: boolean): AddressFormValues => ({
   label: '',
@@ -29,6 +30,7 @@ const defaultAddressForm = (isDefault: boolean): AddressFormValues => ({
 })
 
 export function AddressesPage() {
+  usePageTitle('Адреса доставки')
   const queryClient = useQueryClient()
   const [open, setOpen] = useState(false)
   const [editing, setEditing] = useState<ShippingAddress | null>(null)

client/src/pages/me/ui/sections/MessagesPage.tsx

@@ -16,6 +16,7 @@ import { fetchMyOrder, postOrderMessage } from '@/entities/order/api/order-api'
 import { fetchMyConversations, markOrderMessagesRead } from '@/entities/user/api/messages-api'
 import { fetchAdminAvatar } from '@/entities/user/api/user-api'
 import { orderStatusLabelRu } from '@/shared/lib/order-status-labels'
+import { usePageTitle } from '@/shared/lib/use-page-title'
 import { $user } from '@/shared/model/auth'
 import { ChatMessageBubble } from '@/shared/ui/ChatMessageBubble'
 import { OrderMessageBody } from '@/shared/ui/OrderMessageBody'
@@ -24,6 +25,7 @@ import { RichTextMessageEditor } from '@/shared/ui/RichTextMessageEditor'
 import { UserAvatar } from '@/shared/ui/UserAvatar'
 
 export function MessagesPage() {
+  usePageTitle('Сообщения')
   const qc = useQueryClient()
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const [text, setText] = useState('')

client/src/pages/me/ui/sections/NotificationsPage.tsx

@@ -13,6 +13,7 @@ import {
 } from '@/entities/notification/api/notifications-api'
 import type { UserNotificationSettings } from '@/entities/notification/api/notifications-api'
 import { isSyntheticEmail } from '@/shared/lib/is-synthetic-email'
+import { usePageTitle } from '@/shared/lib/use-page-title'
 import { $user } from '@/shared/model/auth'
 
 function isOrderStatusChangesOn(s: UserNotificationSettings): boolean {
@@ -27,6 +28,7 @@ const orderStatusChangesPayload = (on: boolean) => ({
 })
 
 export function NotificationsPage() {
+  usePageTitle('Уведомления')
   const queryClient = useQueryClient()
   const [error, setError] = useState<string | null>(null)
   const user = useUnit($user)

client/src/pages/me/ui/sections/OrdersPage.tsx

@@ -12,8 +12,10 @@ import { ORDER_STATUSES } from '@/shared/constants/order'
 import { formatPriceRub } from '@/shared/lib/format-price'
 import { groupOrdersByStatus } from '@/shared/lib/group-orders-by-status'
 import { orderStatusLabelRu } from '@/shared/lib/order-status-labels'
+import { usePageTitle } from '@/shared/lib/use-page-title'
 
 export function OrdersPage() {
+  usePageTitle('Заказы')
   const ordersQuery = useQuery({
     queryKey: ['me', 'orders'],
     queryFn: fetchMyOrders,

client/src/pages/me/ui/sections/SettingsPage.tsx

@@ -4,6 +4,7 @@ import Divider from '@mui/material/Divider'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import { useUnit } from 'effector-react'
+import { usePageTitle } from '@/shared/lib/use-page-title'
 import { $user } from '@/shared/model/auth'
 import { AuthMethodsSection } from './AuthMethodsSection'
 import { AvatarSection } from './AvatarSection'
@@ -11,6 +12,7 @@ import { DeleteAccountSection } from './DeleteAccountSection'
 import { ProfileSection } from './ProfileSection'
 
 export function SettingsPage() {
+  usePageTitle('Настройки')
   const user = useUnit($user)
 
   if (!user) {

client/src/pages/privacy-policy/ui/PrivacyPolicyPage.tsx

@@ -9,6 +9,7 @@ import {
   STORE_OP_ADDR,
   STORE_PUBLIC_SITE_URL,
 } from '@/shared/config'
+import { usePageTitle } from '@/shared/lib/use-page-title'
 
 const SITE_URL = STORE_PUBLIC_SITE_URL || (typeof window !== 'undefined' ? window.location.origin : '')
 
@@ -90,6 +91,7 @@ const sections = [
 ]
 
 export function PrivacyPolicyPage() {
+  usePageTitle('Политика конфиденциальности')
   return (
     <Box sx={{ maxWidth: 800, mx: 'auto', py: { xs: 3, md: 5 }, px: { xs: 2, md: 0 } }}>
       <Typography

client/src/pages/product/ui/ProductPage.tsx

@@ -23,6 +23,7 @@ import { ProductReviewsList } from '@/features/product-review'
 import { formatPriceRub } from '@/shared/lib/format-price'
 import { getOriginalWebpUrl } from '@/shared/lib/get-original-webp-url'
 import { reviewsCountRu } from '@/shared/lib/reviews-count-ru'
+import { usePageTitle } from '@/shared/lib/use-page-title'
 import { $user } from '@/shared/model/auth'
 import { OptimizedImage } from '@/shared/ui/OptimizedImage'
 
@@ -39,6 +40,8 @@ export function ProductPage() {
     enabled: Boolean(id),
   })
 
+  usePageTitle(productQuery.data?.title ?? null)
+
   const imageUrls = useMemo(() => {
     const p = productQuery.data
     if (!p) return []

client/src/pages/terms/ui/TermsPage.tsx

@@ -10,6 +10,7 @@ import {
   STORE_OP_INN,
   STORE_OP_ADDR,
 } from '@/shared/config'
+import { usePageTitle } from '@/shared/lib/use-page-title'
 
 const SITE_URL = STORE_PUBLIC_SITE_URL || (typeof window !== 'undefined' ? window.location.origin : '')
 
@@ -147,6 +148,7 @@ const sections = [
 ]
 
 export function TermsPage() {
+  usePageTitle('Пользовательское соглашение')
   return (
     <Box sx={{ maxWidth: 800, mx: 'auto', py: { xs: 3, md: 5 }, px: { xs: 2, md: 0 } }}>
       <Typography

client/src/shared/lib/use-page-title.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+const BASE_TITLE = 'Любимый Креатив — Изделия ручной работы'
+
+let currentTitle: string = BASE_TITLE
+
+export function usePageTitle(title: string | null) {
+  useEffect(() => {
+    currentTitle = title ? `${title} — Любимый Креатив` : BASE_TITLE
+    document.title = currentTitle
+  }, [title])
+}
+
+export function usePageTitleReset() {
+  const location = useLocation()
+
+  useEffect(() => {
+    document.title = BASE_TITLE
+    currentTitle = BASE_TITLE
+  }, [location.pathname])
+}