src/app/(public)/registro/[slug]/page.tsx

@@ -52,9 +52,9 @@ export default function Page() {
       <Button icon="arrow-left" onClick={() => router.back()}>
         Volver
       </Button>
-      <div className="text-center mb-4">
+      <div className="text-center mb-4 mt-2">
         <Image
-          src={'/banner1.png'}
+          src={'/feriasex.jpg'}
           width={1000}
           height={300}
           alt="Ejemplo de banner"

src/components/carousel.tsx

@@ -13,11 +13,7 @@ export default function Carousel({
   id = 'carouselExample',
   images = [
     {
-      src: '/banner1.png',
-      alt: 'Imagen de ejemplo',
-    },
-    {
-      src: '/banner2.png',
+      src: '/feriasex.jpg',
       alt: 'Imagen de ejemplo',
     },
   ],
@@ -36,14 +32,10 @@ export default function Carousel({
           >
             <Image
               src={img.src}
-              width={1000}
-              height={400}
+              width={1600}
+              height={535}
               alt="Ejemplo de banner"
-              className="d-block w-100 rounded-3"
-              style={{
-                objectFit: 'cover',
-                objectPosition: 'center',
-              }}
+              className="d-block w-100 rounded-3 img-fluid"
             />
           </div>
         ))}

src/components/formulario-card.tsx

@@ -38,7 +38,7 @@ export default function FormularioCard({
                 width={400}
                 height={300}
                 className="img"
-                src="/banner1.png"
+                src="/feriasex.jpg"
                 alt="Banner formulario"
               />
               <div className="card-caption">{cuestionario.nombre_form}</div>
@@ -63,7 +63,12 @@ export default function FormularioCard({
               )}
             </p>
             {button_message && (
-              <Button onClick={() => router.push(link)} outline className='mt-3 w-100 py-1 rounded' variant='primary'>
+              <Button
+                onClick={() => router.push(link)}
+                outline
+                className="mt-3 w-100 py-1 rounded"
+                variant="primary"
+              >
                 {button_message}
               </Button>
             )}

src/styles/sass/bootstrap.scss

@@ -75,6 +75,18 @@ ul.list-unstyled li {
     @extend .rounded;
     @extend .shadow;
 
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 50%; // ajusta según el tamaño deseado
+      background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
+      pointer-events: none;
+      z-index: 1;
+    }
+
     img {
       @extend .img-fluid, .rounded;
       width: 100%;
@@ -90,6 +102,7 @@ ul.list-unstyled li {
       color: #fff;
       font-size: 1.25rem;
       text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5);
+      z-index: 2;
     }
   }