deploy

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

@@ -46,7 +46,11 @@ function CatalogSliderInner({ slides }: { slides: CatalogSliderSlide[] }) {
           bgcolor: 'action.hover',
         }}
       >
-        {slides.map((slide, i) => (
+        {slides.map((slide, i) => {
+          const captionText = String(slide.caption ?? '')
+            .trim()
+            .replace(/\u00a0/g, ' ')
+          return (
             <Box
               key={slide.id}
               sx={{
@@ -60,39 +64,48 @@ function CatalogSliderInner({ slides }: { slides: CatalogSliderSlide[] }) {
               <Box
                 component="img"
                 src={slide.url}
-              alt=""
+                alt={captionText || 'Слайд каталога'}
                 loading={i === 0 ? 'eager' : 'lazy'}
                 sx={{
+                  position: 'absolute',
+                  inset: 0,
                   width: '100%',
                   height: '100%',
                   objectFit: 'cover',
                   display: 'block',
+                  zIndex: 0,
                 }}
               />
-            {slide.caption.trim() ? (
+              {captionText ? (
                 <Box
                   sx={{
                     position: 'absolute',
-                  bottom: 0,
                     left: 0,
                     right: 0,
-                  px: 2,
+                    top: slides.length > 1 ? 20 : 0,
+                    zIndex: 4,
                     pt: 4,
-                  pb: slides.length > 1 ? 5 : 2,
+                    pb: slides.length > 1 ? 2 : 2,
-                  background: 'linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 55%, transparent 100%)',
+                    //    background: 'linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.4) 50%, transparent 100%)',
                   }}
                 >
                   <Typography
                     color="common.white"
                     variant="subtitle1"
-                  sx={{ fontWeight: 700, textShadow: '0 1px 4px rgba(0,0,0,0.6)' }}
+                    sx={{
+                      fontWeight: 700,
+                      textShadow: '0 1px 4px rgba(0,0,0,0.75)',
+                      textAlign: 'center',
+                      fontSize: { xs: '1.25rem', sm: '1.5rem' },
+                    }}
                   >
-                  {slide.caption.trim()}
+                    {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,