feat: Refactor carousel component and add new event card

- Updated ClientCarousel to accept props for dynamic image rendering.
- Changed CarouselProps interface to export for better type usage.
- Enhanced Carousel component to handle default images and improved styling.
- Introduced EventoCard component for displaying event details with dynamic data.
- Added MarkdownRenderer for rendering markdown content in EventoCard.
- Removed old Formulario component and replaced it with FormularioRegistro for better structure.
- Implemented prefetching logic in FormularioRegistro to auto-fill user data based on account info.
- Created PrefetchAbiertaCorta component for handling short answer questions with pre-filled data.
- Added useGetApi hook for simplified API data fetching.
- Updated plantillas data to include validation types for new form fields.
- Introduced new types for event and questionnaire handling in TypeScript.
- Enhanced styles for better UI/UX, including carousel controls and required field indicators.

src/components/carousel.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import React from 'react';
 
-interface CarouselProps {
+export interface CarouselProps {
   id?: string;
   images?: {
     src: string;
@@ -9,15 +9,9 @@ interface CarouselProps {
   }[];
 }
 
-export default function Carousel({
-  id = 'carouselExample',
-  images = [
-    {
-      src: '/feriasex.png',
-      alt: 'Imagen de ejemplo',
-    },
-  ],
-}: CarouselProps) {
+export default function Carousel({ id, images }: CarouselProps) {
+  console.log('Carousel images:', images);
+  
   if (!images || images.length === 0) {
     return <div>No hay imágenes para mostrar</div>;
   }
@@ -31,11 +25,17 @@ export default function Carousel({
             className={`carousel-item ${index === 0 ? 'active' : ''}`}
           >
             <Image
-              src={img.src}
-              width={1600}
-              height={535}
+              src={img.src ? img.src : '/default-banner.png'}
+              width={1200}
+              height={400}
               alt="Ejemplo de banner"
               className="d-block w-100 rounded-3 img-fluid"
+              style={{
+                height: '400px',
+                objectFit: 'cover',
+                objectPosition: 'center',
+                maxHeight: '400px',
+              }}
             />
           </div>
         ))}