libreria-astro-lefebvre 0.0.5 → 0.0.7

package/src/components/Astro/Footer_2025_Napoles.astro

@@ -0,0 +1,128 @@
+---
+import Separador_2025_Reinosa from './Separador_2025_Reinosa.astro';
+
+const categories = [
+    {
+        name: 'Lefebvre',
+        link: '#',
+        subcategories: [
+            {name: 'Lefebvre.es', link: 'https://lefebvre.es/quienes-somos/'}, 
+            {name: 'Conócenos', link: 'https://lefebvre.es/cultura-empresarial/equipo-direccion/'}, 
+            {name: 'Trabaja con nosotros', link: 'https://lefebvre.es/talento'},
+            {name: 'Contacto Lefebvre', link: 'https://lefebvre.es/contacto/'},
+            {name: 'Canal ético', link: '#'},
+            {name: 'Partners', link: '#'}
+        ], 
+    },
+    {
+        name: 'Explora GenIA-L',
+        link: '#',
+        subcategories: [
+            {name: 'IA Jurídica', link: '#'}, 
+            {name: 'Casos reales', link: '#'},
+            {name: 'Novedades y recursos', link: '#'},
+            {name: 'Preguntas Frecuentes', link: '#'},
+            {name: 'Contacto GenIA-L', link: '#'}
+        ],
+    },
+    {
+        name: 'Portales Lefebvre',
+        link: '#',
+        subcategories: [
+            {name: 'GenIA-L', link: '#'},
+            {name: 'Formacion', link: '#'},
+            {name: 'ElDerecho.com', link: '#'},
+            {name: 'EsapcioAsesoría.com', link: '#'},
+            {name: 'Derecholocal.es', link: '#'},
+            {name: 'ESG', link: '#'}
+        ],
+    },
+    {
+        name: 'Tienda Online',
+        link: '#',
+        subcategories: [
+            {name: 'Nuestros productos', link: '#'}
+        ],
+    },
+
+    ];
+---
+
+<footer>
+    <div class="bg-white text-[#363942] py-10 border-t border-gray-300">
+        <div class="max-w-7xl flex-wrap md:flex-nowrap w-full px-4 flex items-start mx-auto">
+            {categories.map(category => (
+                <div class="w-1/2 flex-nowrap px-[16px] flex-1">
+                    <div class="text-xl text-[#262626] font-semibold mb-4">{category.name}</div>
+                    <ul>
+                        {category.subcategories.length > 0 ? (
+                            category.subcategories.map(sub => (
+                                <li>
+                                    <a href={sub.link} class="text-[#363942] hover:underline transition-colors duration-200 block py-1" target="_blank">
+                                        {sub.name}
+                                    </a>
+                                </li>
+                            ))
+                        ) : (
+                            <li>
+                                <a href={category.link} class="text-[#363942] hover:underline transition-colors duration-200 block py-1" target="_blank">
+                                    {category.name}
+                                </a>
+                            </li>
+                        )}
+                    </ul>
+                </div>
+            ))}
+        </div>
+    </div>
+    <div class="bg-[white] text-[#262626] border-t border-gray-300">
+        <div class="flex flex-col md:flex-row gap-8 max-w-7xl mx-auto p-[32px]">
+            <div class="flex flex-col flex-[4_4_0%]">
+                <div class="mb-8">
+                    <img src="https://assets.lefebvre.es/media/logos-2/svg/lefebvre.svg" alt="Logo" class="h-10" />
+                </div>
+                <div>
+                    <ul class="flex flex-wrap gap-2 text-sm text-gray-800">
+                        <li>
+                            <span class="flex items-center gap-1">
+                                &copy; {new Date().getFullYear()} Lefebvre. Todos los derechos reservados.
+                            </span>
+                        </li>
+                        <li><a href="https://lefebvre.es/aviso-legal/" class="ml-[8px] hover:underline">Aviso legal</a></li> ·
+                        <li><a href="https://lefebvre.es/politica-privacidad/" class="hover:underline">Política de privacidad</a></li> ·
+                        <li><a href="https://lefebvre.es/politica-de-cookies/" class="hover:underline">Política de cookies</a></li> ·
+                        <li><a href="https://lefebvre.es/condiciones/" class="hover:underline">Condiciones de contratación</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="flex flex-1 items-start justify-start md:justify-end">
+                <a href="https://www.instagram.com/lefebvre_es/" class="mx-2 first-of-type:ml-0" aria-label="Instagram">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
+                        <path d="M21.2725 0C22.5262 0 23.7287 0.49823 24.6152 1.38477C25.5018 2.2713 26 3.47379 26 4.72754V21.2725C26 22.5262 25.5018 23.7287 24.6152 24.6152C23.7287 25.5018 22.5262 26 21.2725 26H4.72754C3.47379 26 2.2713 25.5018 1.38477 24.6152C0.49823 23.7287 0 22.5262 0 21.2725V4.72754C0 3.47379 0.49823 2.2713 1.38477 1.38477C2.2713 0.49823 3.47379 0 4.72754 0H21.2725ZM8.10742 3.5459C5.58811 3.5459 3.5459 5.58811 3.5459 8.10742V17.8926C3.5459 20.4119 5.58811 22.4541 8.10742 22.4541H17.8926C20.4119 22.4541 22.4541 20.4119 22.4541 17.8926V8.10742C22.4541 5.58811 20.4119 3.5459 17.8926 3.5459H8.10742ZM17.8926 5.3291C19.4267 5.3291 20.6709 6.57331 20.6709 8.10742V17.8926C20.6709 19.4267 19.4267 20.6709 17.8926 20.6709H8.10742C6.57331 20.6709 5.3291 19.4267 5.3291 17.8926V8.10742C5.3291 6.57331 6.57331 5.3291 8.10742 5.3291H17.8926ZM13 8.30273C11.7541 8.30273 10.5597 8.79775 9.67871 9.67871C8.79775 10.5597 8.30273 11.7541 8.30273 13C8.30274 14.2459 8.79775 15.4403 9.67871 16.3213C10.5597 17.2022 11.7541 17.6973 13 17.6973C14.2459 17.6973 15.4403 17.2022 16.3213 16.3213C17.2022 15.4403 17.6973 14.2459 17.6973 13C17.6973 11.7541 17.2022 10.5597 16.3213 9.67871C15.4403 8.79775 14.2459 8.30274 13 8.30273ZM13 10.0859C13.7728 10.0859 14.5141 10.393 15.0605 10.9395C15.607 11.4859 15.9141 12.2272 15.9141 13C15.9141 13.7728 15.607 14.5141 15.0605 15.0605C14.5141 15.607 13.7728 15.9141 13 15.9141C12.2272 15.9141 11.4859 15.607 10.9395 15.0605C10.393 14.5141 10.0859 13.7728 10.0859 13C10.0859 12.2272 10.393 11.4859 10.9395 10.9395C11.4859 10.393 12.2272 10.0859 13 10.0859ZM17.6973 7.41016C17.2048 7.41016 16.8059 7.80937 16.8057 8.30176C16.8057 8.79436 17.2047 9.19434 17.6973 9.19434C18.1898 9.1943 18.5889 8.79434 18.5889 8.30176C18.5886 7.80939 18.1897 7.4102 17.6973 7.41016Z" fill="#363942"/>
+                    </svg>
+                </a>
+                <a href="https://www.facebook.com/Lefebvre.ES/" class="mx-2" aria-label="Facebook">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.72727 0C3.47352 0 2.27112 0.498051 1.38459 1.38459C0.498051 2.27112 0 3.47352 0 4.72727V21.2727C0 22.5265 0.498051 23.7289 1.38459 24.6154C2.27112 25.502 3.47352 26 4.72727 26H21.2727C22.5265 26 23.7289 25.502 24.6154 24.6154C25.502 23.7289 26 22.5265 26 21.2727V4.72727C26 3.47352 25.502 2.27112 24.6154 1.38459C23.7289 0.498051 22.5265 0 21.2727 0H4.72727ZM10.2605 7.41355C10.2605 6.38787 10.6679 5.40418 11.3931 4.67881C12.1182 3.95344 13.1018 3.54577 14.1275 3.54545H17.5665C17.8029 3.54545 17.9955 3.73809 17.9955 3.97564V7.41355C17.9955 7.64991 17.8029 7.84255 17.5665 7.84255H15.847C15.6777 7.84255 15.5101 7.87591 15.3538 7.94072C15.1974 8.00553 15.0553 8.10052 14.9357 8.22026C14.8161 8.34001 14.7212 8.48215 14.6565 8.63858C14.5919 8.79501 14.5587 8.96264 14.5588 9.13191V10.4213H17.5665C17.6318 10.4215 17.6961 10.4365 17.7546 10.4653C17.8132 10.494 17.8645 10.5357 17.9045 10.5871C17.9446 10.6386 17.9725 10.6985 17.986 10.7623C17.9995 10.8261 17.9983 10.8922 17.9825 10.9555L17.1234 14.3945C17.0999 14.4873 17.0461 14.5696 16.9705 14.6283C16.8949 14.6869 16.8019 14.7186 16.7062 14.7184H14.5576V22.0244C14.5576 22.1385 14.5123 22.2479 14.4316 22.3285C14.351 22.4092 14.2415 22.4545 14.1275 22.4545H10.6895C10.5757 22.4542 10.4665 22.4088 10.3861 22.3281C10.3057 22.2475 10.2605 22.1383 10.2605 22.0244V14.7195H8.112C7.99791 14.7195 7.88849 14.6742 7.80782 14.5935C7.72714 14.5129 7.68182 14.4035 7.68182 14.2894V10.8503C7.68182 10.6139 7.87446 10.4213 8.112 10.4213H10.2605V7.41355Z" fill="#363942"/>
+                    </svg>
+                </a>
+                <a href="https://www.linkedin.com/company/lefebvre_es" class="mx-2" aria-label="LinkedIn">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.72727 0C3.47352 0 2.27112 0.498051 1.38459 1.38459C0.498051 2.27112 0 3.47352 0 4.72727V21.2727C0 22.5265 0.498051 23.7289 1.38459 24.6154C2.27112 25.502 3.47352 26 4.72727 26H21.2727C22.5265 26 23.7289 25.502 24.6154 24.6154C25.502 23.7289 26 22.5265 26 21.2727V4.72727C26 3.47352 25.502 2.27112 24.6154 1.38459C23.7289 0.498051 22.5265 0 21.2727 0H4.72727ZM6.15136 8.16636C6.68578 8.16636 7.1983 7.95407 7.57618 7.57618C7.95407 7.1983 8.16636 6.68578 8.16636 6.15136C8.16636 5.61695 7.95407 5.10443 7.57618 4.72654C7.1983 4.34866 6.68578 4.13636 6.15136 4.13636C5.61695 4.13636 5.10443 4.34866 4.72654 4.72654C4.34866 5.10443 4.13636 5.61695 4.13636 6.15136C4.13636 6.68578 4.34866 7.1983 4.72654 7.57618C5.10443 7.95407 5.61695 8.16636 6.15136 8.16636ZM8.16518 21.8636V9.77718H4.13636V21.8636H8.16636H8.16518ZM13.403 9.77718H9.77718V21.8636H13.403V14.5718C13.8698 13.8131 14.6758 13 15.8198 13C17.4318 13 17.8348 14.612 17.8348 15.418V21.8636H21.8636V15.418C21.8636 13.2576 20.9217 9.77718 17.4318 9.77718C15.2124 9.77718 13.9809 10.5867 13.4018 11.3455V9.77718H13.403Z" fill="#363942"/>
+                    </svg>
+                </a>
+                <a href="https://twitter.com/Lefebvre_ES" class="mx-2" aria-label="X.com">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.72727 0C2.11647 0 0 2.11647 0 4.72727V21.2727C0 23.8835 2.11647 26 4.72727 26H21.2727C23.8835 26 26 23.8835 26 21.2727V4.72727C26 2.11647 23.8835 0 21.2727 0H4.72727ZM4.3322 4.13636C4.12496 4.2135 3.9501 4.36692 3.84804 4.57163C3.69807 4.8724 3.73113 5.23213 3.9334 5.50055L10.5683 14.3054L3.57681 21.8029C3.55848 21.8226 3.54122 21.8428 3.52502 21.8636H5.9441L11.6517 15.743L16.0401 21.5668C16.143 21.7033 16.2816 21.8053 16.4377 21.8636H21.664C21.8706 21.7863 22.045 21.6332 22.1468 21.4288C22.2968 21.1281 22.2638 20.7683 22.0615 20.4999L15.4265 11.695L22.475 4.13636H20.0511L14.3431 10.2574L9.95469 4.43369C9.85153 4.2968 9.71247 4.19464 9.55583 4.13636H4.3322ZM17.19 20.147L6.41905 5.85347H8.80488L19.5759 20.147H17.19Z" fill="#363942"/>
+                    </svg>
+                </a>
+                <a href="https://www.youtube.com/c/lefebvre_es" class="mx-2" aria-label="YouTube">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.72727 0C3.47352 0 2.27112 0.498051 1.38459 1.38459C0.498051 2.27112 0 3.47352 0 4.72727V21.2727C0 22.5265 0.498051 23.7289 1.38459 24.6154C2.27112 25.502 3.47352 26 4.72727 26H21.2727C22.5265 26 23.7289 25.502 24.6154 24.6154C25.502 23.7289 26 22.5265 26 21.2727V4.72727C26 3.47352 25.502 2.27112 24.6154 1.38459C23.7289 0.498051 22.5265 0 21.2727 0H4.72727ZM4.13636 13C4.13636 11.7307 4.19545 10.5335 4.27464 9.529C4.3251 8.80617 4.63522 8.12596 5.1478 7.61382C5.66038 7.10167 6.34085 6.79213 7.06373 6.74227C9.03965 6.60944 11.0196 6.54637 13 6.55318C15.5492 6.55318 17.5051 6.64064 18.9363 6.74227C19.6591 6.79213 20.3396 7.10167 20.8522 7.61382C21.3648 8.12596 21.6749 8.80617 21.7254 9.529C21.8034 10.5335 21.8636 11.7307 21.8636 13C21.8636 14.3154 21.7998 15.5527 21.7171 16.5785C21.5989 18.0428 20.4833 19.1608 19.0438 19.2613C17.0319 19.3919 15.0161 19.4538 13 19.4468C10.426 19.4468 8.40273 19.3617 6.95618 19.2613C5.51673 19.1608 4.40109 18.0428 4.28291 16.5785C4.18679 15.3881 4.1379 14.1943 4.13636 13ZM10.7971 9.99227L15.8198 13L10.7971 16.0089V9.99109V9.99227Z" fill="#363942"/>
+                    </svg>
+                </a>
+            </div>
+        </div>
+    </div>
+    <Separador_2025_Reinosa />
+</footer>

package/src/components/Astro/Formulario_2025_Seul.astro

@@ -0,0 +1,63 @@
+---
+
+const { 
+    title, 
+    description = "", 
+    showImage = false,
+    orientation = "left",
+    imageSrc,
+    lf2FormTitle = "Formulario de contacto",
+} = Astro.props;
+
+const idTargetLf2 = 'lf2-form-' + Math.random().toString(36).substring(2, 15);
+---
+
+
+
+<div class="w-full flex flex-col md:flex-row px-6 md:px-4 lg:px-0 gap-8">
+     <div class="max-w-7xl w-full mx-auto flex justify-start mb-8 flex-col">
+    {showImage ? (
+        <article class="flex flex-col items-center justify-center py-6">
+            <div class={`flex-col md:flex ${orientation === 'left' ? 'flex-row' : 'flex-row-reverse'} w-full items-start gap-4 justify-center`}>
+                <div class="w-full md:w-1/3 flex justify-start mb-8 flex-col">
+                    <div id={idTargetLf2} class="w-full flex flex-col mx-auto gap-3"></div>
+                </div>
+                <div class={`w-full md:w-1/2 p-0 md:p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'}`}>
+                    <img src={imageSrc} alt={title} class="w-full md:w-4/5 h-auto rounded-lg" />
+                </div>
+            </div>
+        </article>
+    ) : (
+        <article class="flex flex-col items-center justify-center py-6">
+            <div class={`flex-col md:flex ${orientation === 'left' ? 'flex-row' : 'flex-row-reverse'} w-full items-start gap-4 justify-center`}>
+                <div class="w-full md:w-1/3 flex justify-start mb-8 flex-col">
+                    <p class="font-poppins text-[#262626] text-[32px] font-semibold text-left leading-[40px] mb-[16px] text-wrap md:text-nowrap">{title}</p>
+                    <p>{description}</p>
+                </div>
+                <div class={`w-full md:w-1/2 p-0 md:p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'}`}>
+                    <div id={idTargetLf2} class="w-full flex flex-col mx-auto gap-3"></div>
+                </div>
+            </div>
+        </article>
+    )}
+    </div>
+</div>
+
+
+<script is:client define:vars={{ idTargetLf2 , lf2FormTitle}}>
+    document.addEventListener('DOMContentLoaded', () => {
+        let configLf2 = {
+            fake: true,
+            formulario: lf2FormTitle,
+            bootstrap: false,
+            target: '#'+idTargetLf2,
+            defaultparameters: {},
+        };
+        try {
+            apiManager.pintarFormularioAutogestionado(configLf2);
+        } catch (error) {
+            var apiManager = new LeadformApiManagerClass();
+            apiManager.pintarFormularioAutogestionado(configLf2);
+        }
+    });
+</script>

package/src/components/Astro/HeaderCorporativo.astro

@@ -0,0 +1,26 @@
+---
+const {
+    logo = 'https://espacioasesoria.com/wp-content/themes/lf-espacioasesoria-theme/src/images/logo-espacio-asesoria.png',
+    alt = 'EspacioAsesoría',
+    showLefebvreLogo = true
+} = Astro.props;
+
+
+---
+
+<header class="z-9999 relative">
+    <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
+        <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
+            
+            <a href="/" class="flex justify-between items-center">
+                <img src={logo} class="" alt={alt}/>
+            </a>
+
+
+            {showLefebvreLogo && (
+                <img src="https://assets.lefebvre.es/media/logos-2/svg/lefebvre.svg" class="" alt="Lefebvre"/>
+            )}
+                     
+        </div>
+    </nav>
+</header>

package/src/components/Astro/ImageTextSimple.astro

@@ -0,0 +1,56 @@
+---
+const {
+    image,
+    title,
+    video ,
+    description,
+} = Astro.props;
+---
+
+<!-- Componente que sirve para las páginas soluciones-profesionales y conocenos entre otras. Si se le pasa por parámetro una imagen, la muestra a la izquierda y el texto a la derecha. Si se le pasa un vídeo, muestra el vídeo a la izquierda y el texto a la derecha. -->
+ 
+<div class="max-w-7xl mx-auto px-4">
+        <div class="w-full bg-white mt-[-60px] z-10 relative">
+            <div class="flex flex-col lg:flex-row p-0 lg:p-20 mt-4 lg:mt-0">
+                
+                {image
+                    ? (
+                            <div class="w-full lg:w-1/2 lg:mx-4 mask-add mask-[url(https://assets.lefebvre.es/media/logos-2/svg/lefebvre-iso.svg)] mask-no-repeat mask-center bg-cover" style={`background-image: url('${image}')`} id="rotating-image"></div>
+                        )
+                    : video
+                        ? (
+                                <div class="w-full lg:w-1/2 lg:mx-4 flex items-center justify-center">
+                                    <iframe src={video} title="YouTube video" allowfullscreen class="w-full aspect-video"></iframe>
+                                </div>
+                            )
+                        : null
+                }
+                
+                <script>
+                    let lastScrollY = window.scrollY;
+                    let rotation = 0;
+
+                    function onScroll() {
+                        const currentScrollY = window.scrollY;
+                        // Increment rotation based on scroll delta
+                        rotation += (currentScrollY - lastScrollY) * 0.07;
+                        const image = document.getElementById('rotating-image') ?? null;
+                        if (image) {
+                            image.style.transform = `perspective(900px) rotateY(${rotation}deg)`;
+                            image.style.transformOrigin = '50% 50%';
+                        }
+                        lastScrollY = currentScrollY;
+                    }
+
+                    window.addEventListener('scroll', onScroll);
+                </script>
+                <div class="w-full lg:w-1/2 lg:mx-4 mt-3 lg:mt-0">
+                    <h2 class="text-4xl font-bold">
+                        {title}
+                    </h2>
+                    <div class="my-4" set:html={description}></div>
+                    </div>
+                </div>
+            </div>
+    </div>
+</div>

package/src/components/Astro/Imagen_2025_Bogota.astro

@@ -0,0 +1,43 @@
+---
+const {
+    title,
+    description,
+    txtBtn,
+    linkBtn,
+    alt,
+    src,
+    iframeSrc,
+    showBtn = true
+    } = Astro.props;
+
+---
+
+<section class="w-full flex items-center justify-center">
+
+    <article class="w-full flex flex-col items-center justify-center p-6 h-full lg:h-[384px]">
+
+        <div class="max-w-7xl h-full flex justify-center items-center aspect-auto relative md:w-4/5 lg:aspect-video">
+            <div class="absolute inset-0">
+
+                {src && src !== "" ? (
+                    <img src={src} alt={alt} title={title} class="object-cover object-center w-full h-full rounded-2xl"> 
+                ) : (
+                    <video autoplay loop muted playsinline class="object-cover object-center w-full h-full rounded-2xl">
+                        <source src={iframeSrc} type="video/mp4" />
+                    </video> 
+                )}                
+            </div>
+            
+            <div class="w-4/5 relative z-10 flex flex-col justify-center items-center h-full text-center p-0 py-8 md:p-6">
+                <h3 class="text-[#ffffff] font-poppins text-[40px] font-semibold text-center leading-[48px] mb-[32px]">{title}</h3>
+                <div class="text-[#ffffff] font-inter text-xl font-normal leading-[28px] mb-8 text-center" set:html={description}></div>
+                
+                 {showBtn ? (
+                    <a href={linkBtn} class="text-[#ffffff] font-poppins font-semibold bg-transparent px-[28px] py-[14px] border border-[#ffffff] rounded-xl hover:bg-[#ffffff] transition-all duration-300 hover:text-[#262626] hover:border border-[#262626]">{txtBtn}</a>
+                ) : (
+                    <div class="flex justify-center"></div>
+                )}
+            </div>
+        </div>          
+    </article>
+</section>

package/src/components/Astro/Repetidor_2025_Cabra.astro

@@ -0,0 +1,121 @@
+---
+
+import Repetidor_2025_Menorca from './Repetidor_2025_Menorca.astro';
+import Titulo_2025_Algeciras from './Titulo_2025_Algeciras.astro';
+
+const {
+    items = [],
+} = Astro.props;
+
+const identifier = 'js-megablock'+ Math.random().toString(36).substring(2, 15);
+
+---
+
+
+<section class="w-full flex items-center justify-center">
+    <article class="w-full flex flex-col items-center justify-center">
+        <div class="w-full flex justify-center items-center relative text-[56px] text-center font-poppins font-normal leading-[64px] mt-[40px]">
+            <div class="flex bg-transparent md:bg-gray-50 md:border md:border-[#B6B7BB] rounded-lg">
+                <div class="flex gap-4 md:gap-0 items-center">
+                    {items.map((item, index) => (
+                        <p class="text-base">
+                            {/* <a href={`#accordion${index + 1}`} class="btn py-[20px] px-[16px]">{item}</a> */}
+                            <button data-linkedto={`${identifier}${index + 1}`} 
+                            class={`
+                                btn py-[14px] px-[20px] 
+                                cursor-pointer border border-transparent 
+                                hover:border hover:border-[#5F6168] 
+                                hover:bg-white rounded-lg ${identifier}button 
+                                ${item.default ? 'active' : ''}
+                                bg-gray-100 text-gray-100 max-w-[40px] max-h-[20px] text-[0px]
+                                md:bg-gray-100 md:text-black md:max-w-none md:max-h-none md:text-[16px]
+                                `}
+                            >{item.name}</button>
+                        </p>
+                    ))}
+                </div>
+            </div> 
+        </div>
+        <div class="lg:max-w-7xl md:w-full px-6 md:w-4/5 md:px-[0] col my-[40px]">
+            {items.map((item, index) => (
+                <div id={`${identifier}${index + 1}`} class={`${item.default ? '' : 'hidden'} collapse-arrow ${identifier}item`}>
+
+
+                    <div class="w-full flex-col flex md:flex-row gap-[16px] md:gap-[48px]">
+                        <div class="w-full md:w-1/2"> 
+                            <Titulo_2025_Algeciras 
+                                title={item.name}
+                                tipo="h3-mb32"
+                                flexJustify="justify-start"
+                            />
+                            <Repetidor_2025_Menorca 
+                                flexOrientationIcoText = "flex-row"
+                                flexOrientationBlockIcoText = "flex-col"
+                                positionFlex = 'items-start'
+                                positionBtnFlex = 'justify-start'
+                                items = {item.items}
+                                headingType = 'h3'
+                                showBtn = {true}
+                                btnLabel = "Ver experiencias de uso"
+                                buttonUrl={item.buttonUrl}
+                            />
+                        </div>
+                        <div class="w-full md:w-1/2 p-0 md:pr-2">
+                            <img src={item.image} alt="Imagen" class="w-full h-auto rounded-xl" />
+                        </div>
+                    </div>
+
+                </div>
+            ))}
+        </div>
+    </article>
+</section>
+
+
+
+<style>
+    .active{
+        background-color: #ffffff;
+        border: 1px solid #5F6168;
+        color: black;
+        max-width: none;
+        max-height: none;
+        font-size: 16px;
+
+        &:hover{
+            background-color: #ffffff;
+            border: 1px solid #5F6168;
+        }
+    }
+</style>
+
+<script is:inline define:vars={{ identifier }}>
+
+document.querySelectorAll(`.${identifier}button`).forEach(btn => {
+
+    btn.addEventListener('click', (e) => {
+        const linkedId = btn.getAttribute('data-linkedto');
+        const targetItem = document.getElementById(linkedId);
+        if (targetItem) {
+
+            const collapseCount = document.querySelectorAll(`.${identifier}item.collapse`).length;
+            const hiddenCount = document.querySelectorAll(`.${identifier}item.hidden`).length;
+            const desiredClass = collapseCount > hiddenCount ? 'collapse' : 'hidden';
+            
+            document.querySelectorAll(`.${identifier}item`).forEach(item => {
+                if (item === targetItem) return;
+                if (item.classList.contains(desiredClass)) return;                
+                item.classList.add(desiredClass);
+            });
+            targetItem.classList.toggle(desiredClass);
+            
+
+            document.querySelectorAll(`.${identifier}button`).forEach(item => {
+                if (item === btn) return;
+                item.classList.remove('active');
+            });
+            btn.classList.toggle('active');  
+        }       
+    });
+});
+</script>

package/src/components/Astro/Repetidor_2025_Dubai.astro

@@ -0,0 +1,30 @@
+---
+const {
+    title,
+    description,
+    buttonText,
+    buttonUrl,
+    showBtn,
+    items
+    } = Astro.props;
+
+import Repetidor_2025_Orcasitas from './Repetidor_2025_Orcasitas.astro';
+---
+<article class="w-full flex flex-col text-center items-center justify-center p-12 pb-4 bg-[#ffffff] rounded-2xl">
+    <h2 class="text-[2.625em] leading-[47px] mb-[23px] text-[#262626] font-semibold not-italic">{title}</h2>
+    <div class="max-w-[900px] text-[#363942] font-inter font-normal text-[1.125em] not-italic leading-[28px] flex flex-col gap-4 mb-8">
+        <p set:html={description}></p>
+    </div>
+    <div class="max-w-7xl flex-wrap md:flex-nowrap w-full flex items-center ">
+        <Repetidor_2025_Orcasitas items={items} />
+    </div> 
+    <div class="w-full flex justify-center">
+        {showBtn ? (
+            <div class="flex justify-center">
+                <a href={buttonUrl} class="px-5 py-3 font-inter font-semibold text-base border-1 border-[#2134F1] text-[#2134F1] hover:text-[#262626] hover:border-[#262626] transition-all duration-300 rounded-lg cursor-pointer shadow-sm">{buttonText}</a>
+            </div>
+        ) : (
+            <div class="flex justify-center"></div>
+        )} 
+    </div>
+</article>

package/src/components/Astro/Repetidor_2025_Estocolmo.astro

@@ -0,0 +1,34 @@
+---
+const {
+    items,
+    } = Astro.props;
+
+import Titulo_2025_Santorini from './Titulo_2025_Santorini.astro';
+
+---
+<div class="w-full flex flex-row flex-wrap items-center justify-center mb-4">
+    <div class="max-w-7xl flex flex-col md:flex-row flex-nowrap items-stretch justify-center mb-0">
+        {items.map(item => (
+            <a href={item.link} class="w-full flex flex-col cursor-pointer">
+                <article class="w-full p-[12px] h-full">
+                    <div class="w-full h-full flex flex-col rounded-lg border border-gray-200 hover:items-center shadow-sm hover:bg-gradient-to-r from-[#001978] via-[#2134F1] to-[#F81BBD] transition-all duration-300"> 
+                        <div class="bg-white hover:h-[calc(100%-12px)] hover:w-[calc(100%-1px)] mt-[1px] rounded-tl-[7px] rounded-tr-[7px]">
+                            <div class="w-full">
+                                <img class="cursor-pointer rounded-tr-lg rounded-tl-lg mx-auto h-full" src={item.image} alt={item.altImage} />
+                            </div>
+                            <div class="p-6 flex-grow flex flex-col">
+                                <Titulo_2025_Santorini description={item.tag} />
+                                <div class="mt-2 flex items-center gap-2 flex-grow">
+                                    <div class="flex flex-col text-[#262626] h-full">
+                                        <p class="text-lg font-semibold leading-tight mb-[8px]">{item.title}</p>
+                                        <p class="text-base font-normal leading-tight mb-[8px]">{item.description}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </article>
+            </a>
+        ))}
+    </div>
+</div>

package/src/components/Astro/Repetidor_2025_Menorca.astro

@@ -0,0 +1,42 @@
+---
+import Contenido_2025_Granada from "./Contenido_2025_Granada.astro";
+import CTA_2025_Formentera from "./CTA_2025_Formentera.astro";
+
+
+const {
+    flexOrientationBlockIcoText = "flex-row",
+    flexOrientationIcoText = "flex-row",
+    positionFlex = "items-center",
+    positionBtnFlex = "justify-center",
+    headingType = 'h3',
+    items = [],
+    btnLabel = "Ver más",
+    buttonUrl = "#",
+    showBtn = false,
+} = Astro.props;
+
+---
+
+<article class={`${positionFlex === 'items-center' ? 'items-center' : 'items-start'} flex flex-col justify-center mb-4`}>
+    <div class={`flex ${flexOrientationBlockIcoText} items-start flex-wrap px-6`}>
+        {items.map(item => (
+            <Contenido_2025_Granada 
+                title={item.title}
+                tipo={headingType}
+                description={item.description}
+                flexOrientationBlock={flexOrientationBlockIcoText}
+                flexOrientationIcoText={flexOrientationIcoText}
+                positionFlex={positionFlex}
+                icon={item.icon}
+            />
+        ))}  
+    </div>
+    <div class={`${positionBtnFlex === 'justify-center' ? 'justify-center' : 'justify-start'} pl-0 md:pl-[16px] lg:pl-[32px] w-full flex`}>
+         {showBtn ? (
+            <CTA_2025_Formentera buttonText={btnLabel} buttonUrl={buttonUrl} /> 
+        ) : (
+            <div class="flex justify-center"></div>
+        )}  
+        
+    </div>
+</article>

package/src/components/Astro/Repetidor_2025_Michigan.astro

@@ -0,0 +1,24 @@
+---
+const {
+    orientation = 'left',
+    items
+    } = Astro.props;
+---
+<section class="w-full flex flex-col items-center justify-center">
+    {items.map(item => (
+        <article class="w-full flex flex-col items-center justify-center border-b-1 border-b-[#B6B7BB]" style={items.indexOf(item) === items.length - 1 ? 'border-bottom: none;' : ''} >
+            <div class={`flex-col flex md:${orientation === 'left' ? 'flex-row' : 'flex-row-reverse'} items-center gap-4`}>
+                <div class="w-full md:w-1/2 p-4 flex flex-col flex-wrap ">
+                    <h2 class="text-[32px] leading-[40px] mb-[24px] text-[#363942] font-poppins font-semibold">{item.title}</h2>
+                    <div 
+                    class="text-[#363942] font-inter font-normal text-base leading-[28px] flex flex-col gap-4 mb-8" 
+                    set:html={item.description} 
+                    />
+                </div>
+                <div class={`w-full md:w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'}`}>
+                    <img src={item.image} alt={item.title} class="w-full md:w-1/2 rounded" />
+                </div>
+            </div>
+        </article>
+    ))}
+</section>