libreria-astro-lefebvre 0.0.35 → 0.0.37

package/src/components/Astro/Contenido_2025_Montevideo.astro

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

package/src/components/Astro/Formulario_2025_Teruel.astro

@@ -0,0 +1,125 @@
+---
+
+const {
+    bottomBorder = false,
+    orientation = 'left',
+    title = '',
+    description = '',
+    imageSrc = '',
+
+    showBtn = false,
+    linkBtn = '#',
+    txtBtn = 'Saber más',
+
+    showBtnModal = true,
+    txtBtnModal = 'Saber más',
+    imageModal = '',
+    altModal = '',
+    titleModal = '',
+    subtitleModal = '',
+    descriptionModal = '',
+    lf2FormTitle = '',
+
+} = Astro.props;
+
+const randomId = Math.floor(Math.random() * 1000);
+
+
+---
+
+<article id={`article-${randomId}`} class="w-full flex flex-col pb-4 mb-4 items-center justify-center border-0 md:border-b-1 border-b-[#B6B7BB]" style={bottomBorder ? '' : 'border-bottom: none;'} >
+    <div class={`flex-col flex md:${orientation === 'left' ? 'flex-row' : 'flex-row-reverse'} items-center gap-4 mb-8 md:mb-0`}>
+        <div class="w-full md:w-1/2 p-4 flex flex-col flex-wrap ">
+            <h2 class="text-[28px] md:text-[32px] leading-[36px] md:leading-[40px] mb-[24px] text-[#363942] font-poppins font-semibold">{title}</h2>
+            <div 
+                class="text-[#363942] font-inter font-normal text-base leading-[28px] flex flex-col gap-4 md-0 md:mb-8" 
+                set:html={description} 
+            />
+            {showBtn && linkBtn && (
+                <a href={linkBtn} target="_self" class="inline-block w-fit h-[44px] md:h-[48px] text-[#2134F1] font-inter font-semibold bg-[#ffffff] px-[14px] md:px-[20px] py-[10px] md:py-[12px] border border-[#2134F1] rounded-lg shadow-md hover:bg-[#DDE0EC] transition-all duration-300 hover:text-[#2134F1] hover:border-[#2134F1] text-sm md:text-base">{txtBtn}</a>
+            )}
+            {showBtnModal && (
+                <button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-block w-fit h-[44px] md:h-[48px] text-[#2134F1] font-inter font-semibold bg-[#ffffff] px-[14px] md:px-[20px] py-[10px] md:py-[12px] mt-[16px] md:mt-0 border border-[#2134F1] rounded-lg shadow-md hover:bg-[#DDE0EC] transition-all duration-300 hover:text-[#2134F1] hover:border-[#2134F1] text-sm md:text-base cursor-pointer`}>{txtBtnModal}</button>
+            )}
+        </div>
+        <div class={`w-full md:w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'}`}>
+            <img src={imageSrc} alt={title} class="w-full md:w-1/2 rounded-2xl" />
+        </div>
+    </div>
+
+</article>
+
+<div id={`teruel-popup-modal-${randomId}`} class="fixed w-full h-full pt-[48px] top-0 left-0 z-9999 hidden bg-gray-100/90">
+    <div class="flex flex-col justify-center items-center w-full md:w-4/5 max-w-[1000px] h-auto m-auto p-4 rounded-2xl bg-white shadow-lg border border-[#B6B7BB]">
+        <div class="w-full flex justify-end">
+            <button id={`js-close-teruel-popup-${randomId}`} class="js-close-popup w-auto transition-transform hover:scale-125 cursor-pointer">X</button>
+        </div>
+        <div class="w-full h-full flex flex-col md:flex-row items-start justify-center">
+            <div class="w-full md:w-1/2 flex justify-center items-center p-0 md:p-4 mt-[32px] md:mt-0">
+                <img src={imageModal} alt={altModal} class="w-fit" />
+            </div>
+            <div class="w-full md:w-1/2">
+                <h2 class="font-poppins text-[#262626] text-[28px] md:text-[32px] font-normal text-left leading-[40px] my-[32px] md:mb-[32px]">{titleModal}</h2>
+                <h3 class="font-poppins text-[#262626] text-[20px] md:text-[24px] font-semibold text-left leading-[32px] mb-[8px]">{subtitleModal}</h3>
+                <div class="font-inter text-base font-normal leading-[24px]" set:html={descriptionModal} />
+                    <div id={`lf2-form-container-${randomId}`} class="w-full">
+                        <!--FORMULARIO -->
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<script is:inline define:vars={{ randomId, lf2FormTitle }}>
+
+    document.addEventListener('DOMContentLoaded', () => {
+
+        let configLf2 = {
+            fake: true,
+            formulario: lf2FormTitle,
+            bootstrap: true,
+            target: '#'+ `lf2-form-container-${randomId}`
+        };
+
+        try {
+            apiManager.pintarFormularioAutogestionado(configLf2);
+        } catch (error) {
+            var apiManager = new LeadformApiManagerClass();
+        }
+
+
+        const teruelModalButton = document.getElementById(`js-open-teruel-popup-${randomId}`);
+        
+        teruelModalButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            
+            const modalPopup = document.getElementById(`teruel-popup-modal-${randomId}`);
+            const articleElement = document.getElementById(`article-${randomId}`);
+            const parentElement = articleElement ? articleElement.parentElement : null;
+
+            if (modalPopup && parentElement && parentElement.parentNode) {
+                parentElement.parentNode.insertBefore(modalPopup, parentElement.nextSibling);
+            }
+            
+            if (modalPopup) {
+                apiManager.pintarFormularioAutogestionado(configLf2);
+                modalPopup.classList.remove('hidden');
+                if (parentElement) {
+                    parentElement.classList.add('blur-sm');
+                }
+                
+                const closeBtn = modalPopup.querySelector(`#js-close-teruel-popup-${randomId}`);
+                if (closeBtn) {
+                    closeBtn.onclick = () => {
+                        modalPopup.classList.add('hidden');
+                        if (parentElement) {
+                            parentElement.classList.remove('blur-sm');
+                        }
+                    };
+                }
+            }
+        });
+    });
+
+</script>

package/src/components/Astro/Repetidor_2025_Cabra.astro

@@ -1,153 +1,153 @@
----
-
-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);
-
-const structuredData = `<script type="application/ld+json">
-{
-    "@context": "https://schema.org",
-    "@type": "WebPage",
-    "name": "Interactive Content Tabs",
-    "description": "Interactive tabbed content component with multiple sections",
-    "mainEntity": {
-        "@type": "ItemList",
-        "numberOfItems": ${items.length},
-        "itemListElement": [
-            ${items.map((item, index) => `{
-                "@type": "ListItem",
-                "position": ${index + 1},
-                "name": "${item.name}",
-                "description": "Interactive content section",
-                ${item.image ? `"image": "${item.image}",` : ''}
-                ${item.buttonUrl ? `"url": "${item.buttonUrl}"` : ''}
-            }`).join(',\n      ')}
-        ]
-    },
-    "interactionStatistic": {
-        "@type": "InteractionCounter",
-        "interactionType": "https://schema.org/ClickAction",
-        "userInteractionCount": "${items.length}"
-    }
-}
-</script>`;
-
----
-
-
-<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 inter leading-[64px] mt-[40px]">
-            <!-- <div class="flex bg-transparent md:bg-gray-50 md:border md:border-[#B6B7BB] rounded-lg"> -->
-                <div class="flex gap-1 md:gap-8 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] font-inter
-                                cursor-pointer border border-transparent 
-                                hover:border hover:border-[#5F6168] 
-                                hover:bg-white rounded-lg ${identifier}button 
-                                ${item.default ? 'active' : ''}
-                                bg-F2F3F8 text-gray-100 max-w-[40px] max-h-[20px] text-[0px]
-                                md:bg-gray-50 md:text-black md:max-w-none md:max-h-none md:text-[16px]
-                                `}
-                            >{item.name}</button>
-                        </p>
-                    ))}
-                </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 = 'h4'
-                                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 min-h-auto lg:min-h-full object-cover rounded-xl" />
-                        </div>
-                    </div>
-
-                </div>
-            ))}
-        </div>
-    </article>
-</section>
-
-
-
-<style>
-    .bg-F2F3F8 {
-        background-color: #F2F3F8;
-    }
-    .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>
-
+---
+
+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);
+
+const structuredData = `<script type="application/ld+json">
+{
+    "@context": "https://schema.org",
+    "@type": "WebPage",
+    "name": "Interactive Content Tabs",
+    "description": "Interactive tabbed content component with multiple sections",
+    "mainEntity": {
+        "@type": "ItemList",
+        "numberOfItems": ${items.length},
+        "itemListElement": [
+            ${items.map((item, index) => `{
+                "@type": "ListItem",
+                "position": ${index + 1},
+                "name": "${item.name}",
+                "description": "Interactive content section",
+                ${item.image ? `"image": "${item.image}",` : ''}
+                ${item.buttonUrl ? `"url": "${item.buttonUrl}"` : ''}
+            }`).join(',\n      ')}
+        ]
+    },
+    "interactionStatistic": {
+        "@type": "InteractionCounter",
+        "interactionType": "https://schema.org/ClickAction",
+        "userInteractionCount": "${items.length}"
+    }
+}
+</script>`;
+
+---
+
+
+<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 inter leading-[64px] mt-[40px]">
+            <!-- <div class="flex bg-transparent md:bg-gray-50 md:border md:border-[#B6B7BB] rounded-lg"> -->
+                <div class="flex gap-1 md:gap-8 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] font-inter
+                                cursor-pointer border border-[#b6b7bb]
+                                hover:border hover:border-[#5F6168] hover:!bg-[#ffffff] rounded-lg ${identifier}button 
+                                ${item.default ? 'active' : ''}
+                                bg-F2F3F8 text-gray-100 max-w-[40px] max-h-[20px] text-[0px] md:w-[150px]
+                                md:bg-gray-50 md:text-black md:max-w-none md:max-h-none md:text-[16px]
+                                `}
+                            >{item.name}</button>
+                        </p>
+                    ))}
+                </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="h1-40-left"
+                                flexJustify="justify-start"
+                            />
+                            <Repetidor_2025_Menorca 
+                                flexOrientationIcoText = "flex-row"
+                                flexOrientationBlockIcoText = "flex-col"
+                                positionFlex = 'items-start'
+                                positionBtnFlex = 'justify-start'
+                                items = {item.items}
+                                headingType = 'h4'
+                                showBtn = {true}
+                                btnLabel = "Ver experiencias de uso"
+                                buttonUrl={item.buttonUrl}
+                                widthArticle = "w-4/5"
+                            />
+                        </div>
+                        <div class="w-full md:w-1/2 p-0 md:pr-2">
+                            <img src={item.image} alt="Imagen" class="w-full min-h-auto lg:min-h-full object-cover rounded-xl" />
+                        </div>
+                    </div>
+
+                </div>
+            ))}
+        </div>
+    </article>
+</section>
+
+
+
+<style>
+    .bg-F2F3F8 {
+        background-color: #F2F3F8;
+    }
+    .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>
+
 <Fragment set:html={structuredData} />

package/src/components/Astro/Repetidor_2025_Dubai.astro

@@ -1,30 +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.25em] md:text-[2.5em] font-poppins leading-[44px] md:leading-[48px] mb-[23px] text-[#262626] font-normal not-italic">{title}</h2>
-    <div class="max-w-[900px] text-[#363942] font-inter font-normal text-base not-italic leading-[24px] 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>
+---
+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.25em] md:text-[2.5em] font-poppins leading-[44px] md:leading-[48px] mb-[23px] text-[#262626] font-normal not-italic">{title}</h2>
+    <div class="max-w-[900px] text-[#363942] font-inter font-normal text-base not-italic leading-[24px] flex flex-col gap-4 mb-8">
+        <p class="font-poppins text-[18px] md:text-[20px] leading-[28px]" 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>