libreria-astro-lefebvre 0.0.6 → 0.0.7

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/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>

package/src/components/Astro/Repetidor_2025_Orcasitas.astro

@@ -0,0 +1,189 @@
+---
+const { 
+    loadScript = true, 
+    items,
+    slidesToShow = 5,
+    slidesToScroll = 1,
+} = Astro.props;
+
+const carouselId = "glider-carousel-"+Math.floor(Math.random()*1000);
+const buttonsId = "glider-carousel-buttons-"+Math.floor(Math.random()*1000);
+const prevId = "glider-carousel-prev-"+Math.floor(Math.random()*1000);
+const nextId = "glider-carousel-next-"+Math.floor(Math.random()*1000);
+
+const randomId = Math.floor(Math.random() * 1000);
+
+---
+
+    {loadScript && 
+        <div>
+            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css"/>
+            <script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script>
+        </div>
+    }
+
+    <div class="w-full">
+        <div id={carouselId} class="glider w-full">
+            {items.map((item, idx) => (
+                <div class="p-10 bg-white" key={idx}>
+                {item.iframeSrc ? (
+                    <div class="w-full">
+                        <span class={`popup-iframe-trigger-${randomId} cursor-pointer`} data-iframesrc={item.iframeSrc}>
+                            <img src={item.imageSrc} class="w-full h-full rounded-xl p-2 transition-transform hover:scale-105 cursor-pointer"/>
+                        </span>
+                    </div>
+                    <div class="p-6 flex-grow flex flex-col">
+                        <div class="mt-2 flex items-center gap-2 flex-grow">
+                            <div class="flex flex-col text-[#262626] h-full">
+                                <p class="text-base font-inter font-normal leading-[24px] mb-[24px]">{item.description}</p>
+                                <p class="text-[14px] font-semibold leading-[20px]">{item.author}<br />{item.positionCompany}</p>
+                            </div>
+                        </div>
+                    </div>
+                ) : (
+                    <img src={item.image} alt={item.altImage} />
+                    <p>{item.descriptionImage}</p>
+                )}
+                </div>
+            ))}
+        </div>
+        <div id={buttonsId} class="carouselGlider hidden md:flex"></div>
+    </div>
+
+<div id={"popup-iframe-modal-" + randomId } class="fixed w-full h-full top-0 left-0 z-9999 hidden">
+    <div class="flex flex-col justify-center items-center w-full h-full bg-blue-100/90 p-4">
+        <div class="w-full flex justify-end">
+            <button class="js-close-popup w-auto m-4 p-2 bg-white rounded transition-transform hover:scale-125 cursor-pointer">❌</button>
+        </div>
+        <div class="w-full h-full flex items-center justify-center">
+            <iframe
+                class="rounded-xl shadow-lg max-w-3/4 aspect-video" 
+                src=""
+                frameborder="0" 
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                allowfullscreen=""></iframe>
+        </div>
+    </div>
+</div>
+
+<script is:inline define:vars={{ randomId }}>
+
+    const iframePopup = document.getElementById(`popup-iframe-modal-${randomId}`);
+    document.querySelectorAll(`.popup-iframe-trigger-${randomId}`).forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            const iframeSrc = btn.getAttribute('data-iframesrc');
+            iframePopup.classList.remove('hidden');    
+            iframePopup.querySelector('iframe').setAttribute('src', iframeSrc);          
+        });
+    });
+
+    iframePopup.querySelector('.js-close-popup').addEventListener('click', () => {
+        iframePopup.classList.add('hidden');
+        iframePopup.querySelector('iframe').setAttribute('src', '');
+    });
+
+</script>
+    
+
+    <script is:inline define:vars={{carouselId, buttonsId, prevId, nextId, slidesToShow, slidesToScroll}}>
+        document.addEventListener('DOMContentLoaded', function() {
+
+            new Glider(document.querySelector('#' + carouselId), {
+
+            // `auto` allows automatic responsive
+            // width calculations
+            slidesToShow: slidesToShow,
+            slidesToScroll: '1',
+
+            // should have been named `itemMinWidth`
+            // slides grow to fit the container viewport
+            // ignored unless `slidesToShow` is set to `auto`
+            itemWidth: undefined,
+
+            // if true, slides wont be resized to fit viewport
+            // requires `itemWidth` to be set
+            // * this may cause fractional slides
+            exactWidth: false,
+
+            // speed aggravator - higher is slower
+            duration: .5,
+
+            // dot container element or selector
+            dots: '#' + buttonsId,
+
+            // arrow container elements or selector
+            arrows: {
+                prev: '#' + prevId,
+                // may also pass element directly
+                next: '#' + nextId
+            },
+
+            // allow mouse dragging
+            draggable: true,
+            // how much to scroll with each mouse delta
+            dragVelocity: 3.3,
+
+            // use any custom easing function
+            // compatible with most easing plugins
+            easing: function (x, t, b, c, d) {
+                return c*(t/=d)*t + b;
+            },
+
+            // event control
+            scrollPropagate: false,
+            eventPropagate: true,
+
+            // Force centering slide after scroll event
+            scrollLock: false,
+            // how long to wait after scroll event before locking
+            // if too low, it might interrupt normal scrolling
+            scrollLockDelay: 150,
+
+            // Force centering slide after resize event
+            resizeLock: true,
+
+            // Glider.js breakpoints are mobile-first
+            responsive: [
+                {
+                breakpoint: 1400,
+                settings: {
+                    slidesToShow: slidesToShow,
+                    slidesToScroll: 1
+                }
+                },
+                {
+                breakpoint: 1200,
+                settings: {
+                    slidesToShow: (slidesToShow >= 5)? slidesToShow - 1 : slidesToShow,
+                    slidesToScroll: 1
+                }
+                },
+                {
+                breakpoint: 900,
+                settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 1
+                }
+                },
+                {
+                breakpoint: 767,
+                settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 3
+                }
+                },
+                {
+                breakpoint: 575,
+                settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1
+                }
+                }
+            ]
+            });
+
+        });
+    </script>
+    
+    
+    

package/src/components/Astro/Repetidor_2025_Oslo.astro

@@ -0,0 +1,54 @@
+---
+const {
+    items
+} = Astro.props;
+
+const randomId = Math.floor(Math.random() * 1000);
+
+---
+<div class="max-w-7xl w-full flex flex-row flex-wrap items-center justify-center">
+    <div class="w-full flex flex-row flex-wrap items-center justify-center">
+        {items.map(item => (
+            <article class="w-full md:w-1/3 h-full aspect-video relative">
+                <span class={`popup-iframe-trigger-${randomId} cursor-pointer`} data-iframesrc={item.iframeSrc}>
+                    <img src={item.imageSrc} class="w-full h-full rounded-xl p-2 transition-transform hover:scale-105 cursor-pointer"/>
+                </span>
+            </article> 
+        ))}
+    </div>
+</div>
+
+<div id={"popup-iframe-modal-" + randomId } class="fixed w-full h-full top-0 left-0 z-9999 hidden">
+    <div class="flex flex-col justify-center items-center w-full h-full bg-blue-100/90 p-4">
+        <div class="w-full flex justify-end">
+            <button class="js-close-popup w-auto m-4 p-2 bg-white rounded transition-transform hover:scale-125 cursor-pointer">❌</button>
+        </div>
+        <div class="w-full h-full flex items-center justify-center">
+            <iframe
+                class="rounded-xl shadow-lg max-w-3/4 aspect-video" 
+                src=""
+                frameborder="0" 
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                allowfullscreen=""></iframe>
+        </div>
+    </div>
+</div>
+
+
+<script is:inline define:vars={{ randomId }}>
+
+    const iframePopup = document.getElementById(`popup-iframe-modal-${randomId}`);
+    document.querySelectorAll(`.popup-iframe-trigger-${randomId}`).forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            const iframeSrc = btn.getAttribute('data-iframesrc');
+            iframePopup.classList.remove('hidden');    
+            iframePopup.querySelector('iframe').setAttribute('src', iframeSrc);          
+        });
+    });
+
+    iframePopup.querySelector('.js-close-popup').addEventListener('click', () => {
+        iframePopup.classList.add('hidden');
+        iframePopup.querySelector('iframe').setAttribute('src', '');
+    });
+
+</script>