deploy

client/src/widgets/catalog-slider/ui/CatalogSlider.tsx

@@ -46,53 +46,66 @@ function CatalogSliderInner({ slides }: { slides: CatalogSliderSlide[] }) {
           bgcolor: 'action.hover',
         }}
       >
-        {slides.map((slide, i) => (
+        {slides.map((slide, i) => {
-          <Box
+          const captionText = String(slide.caption ?? '')
-            key={slide.id}
+            .trim()
-            sx={{
+            .replace(/\u00a0/g, ' ')
-              position: 'absolute',
+          return (
-              inset: 0,
-              opacity: i === index ? 1 : 0,
-              transition: 'opacity 0.75s ease-in-out',
-              pointerEvents: 'none',
-            }}
-          >
             <Box
-              component="img"
+              key={slide.id}
-              src={slide.url}
-              alt=""
-              loading={i === 0 ? 'eager' : 'lazy'}
               sx={{
-                width: '100%',
+                position: 'absolute',
-                height: '100%',
+                inset: 0,
-                objectFit: 'cover',
+                opacity: i === index ? 1 : 0,
-                display: 'block',
+                transition: 'opacity 0.75s ease-in-out',
+                pointerEvents: 'none',
               }}
-            />
+            >
-            {slide.caption.trim() ? (
               <Box
+                component="img"
+                src={slide.url}
+                alt={captionText || 'Слайд каталога'}
+                loading={i === 0 ? 'eager' : 'lazy'}
                 sx={{
                   position: 'absolute',
-                  bottom: 0,
+                  inset: 0,
-                  left: 0,
+                  width: '100%',
-                  right: 0,
+                  height: '100%',
-                  px: 2,
+                  objectFit: 'cover',
-                  pt: 4,
+                  display: 'block',
-                  pb: slides.length > 1 ? 5 : 2,
+                  zIndex: 0,
-                  background: 'linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 55%, transparent 100%)',
                 }}
-              >
+              />
-                <Typography
+              {captionText ? (
-                  color="common.white"
+                <Box
-                  variant="subtitle1"
+                  sx={{
-                  sx={{ fontWeight: 700, textShadow: '0 1px 4px rgba(0,0,0,0.6)' }}
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    top: slides.length > 1 ? 20 : 0,
+                    zIndex: 4,
+                    pt: 4,
+                    pb: slides.length > 1 ? 2 : 2,
+                    //    background: 'linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.4) 50%, transparent 100%)',
+                  }}
                 >
-                  {slide.caption.trim()}
+                  <Typography
-                </Typography>
+                    color="common.white"
-              </Box>
+                    variant="subtitle1"
-            ) : null}
+                    sx={{
-          </Box>
+                      fontWeight: 700,
-        ))}
+                      textShadow: '0 1px 4px rgba(0,0,0,0.75)',
+                      textAlign: 'center',
+                      fontSize: { xs: '1.25rem', sm: '1.5rem' },
+                    }}
+                  >
+                    {captionText}
+                  </Typography>
+                </Box>
+              ) : null}
+            </Box>
+          )
+        })}
 
         {slides.length > 1 && (
           <Stack
@@ -103,7 +116,7 @@ function CatalogSliderInner({ slides }: { slides: CatalogSliderSlide[] }) {
               bottom: 12,
               left: '50%',
               transform: 'translateX(-50%)',
-              zIndex: 2,
+              zIndex: 3,
               px: 1,
               py: 0.5,
               borderRadius: 2,