libreria-astro-lefebvre 0.2.17 → 0.2.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/carbins/Contenido_2025_Alcorcon.ts +11 -1
- package/src/components/Astro/Boton_2026_Elx.astro +1 -1
- package/src/components/Astro/Button.astro +1 -1
- package/src/components/Astro/Calculadora_2026_Lisboa.astro +1 -1
- package/src/components/Astro/Contenido_2025_Alcorcon.astro +4 -2
- package/src/components/Astro/Contenido_2025_Malaga.astro +8 -8
- package/src/components/Astro/Contenido_2026_Castellon.astro +1 -1
- package/src/components/Astro/Contenido_2026_Dubai.astro +1 -1
- package/src/components/Astro/Contenido_2026_Huesca.astro +1 -1
- package/src/components/Astro/Contenido_2026_Moraira.astro +2 -2
- package/src/components/Astro/Contenido_2026_Mostoles.astro +2 -2
- package/src/components/Astro/Contenido_2026_Sevilla.astro +8 -8
- package/src/components/Astro/Contenido_2026_Yakarta.astro +7 -7
- package/src/components/Astro/GeometricShapeCard.astro +1 -1
- package/src/components/Astro/Imagen_2025_Bogota.astro +2 -2
- package/src/components/Astro/Modal_2025_Sagunto.astro +1 -1
- package/src/components/Astro/TextImageBlock.astro +1 -1
- package/src/components/Astro/TextImageHeader.astro +1 -1
- package/src/components/Astro/Texto_2026_Alicante.astro +1 -1
- package/src/components/Astro/Texto_2026_Castellon.astro +1 -1
- package/src/components/React/ReactButton.jsx +1 -1
- package/src/components/Vue/VueButton.vue +1 -1
package/package.json
CHANGED
|
@@ -17,11 +17,21 @@ export const metadata: ComponentMetadata = {
|
|
|
17
17
|
{
|
|
18
18
|
name: 'title',
|
|
19
19
|
type: 'text',
|
|
20
|
-
help: 'Título principal (h2) que aparece superpuesto sobre la imagen o vídeo de fondo. Si se deja vacío, no se muestra',
|
|
20
|
+
help: 'Título principal (h2 por defecto, o h1 según "Tipo de título") que aparece superpuesto sobre la imagen o vídeo de fondo. Si se deja vacío, no se muestra',
|
|
21
21
|
label: 'Texto del título',
|
|
22
22
|
mandatory: false,
|
|
23
23
|
example_value: 'Prueba GenIA-L gratis durante 30 días'
|
|
24
24
|
},
|
|
25
|
+
{
|
|
26
|
+
name: 'titleTag',
|
|
27
|
+
type: 'select',
|
|
28
|
+
help: 'Etiqueta HTML del título. Ambas opciones tienen exactamente el mismo aspecto; solo cambia la jerarquía semántica. Usa h1 solo si el título es el encabezado principal de la página (una sola vez por página)',
|
|
29
|
+
label: 'Tipo de título',
|
|
30
|
+
mandatory: false,
|
|
31
|
+
options: ['h2', 'h1'],
|
|
32
|
+
options_labels: ['Encabezado h2 (por defecto)', 'Encabezado h1'],
|
|
33
|
+
example_value: 'h2'
|
|
34
|
+
},
|
|
25
35
|
{
|
|
26
36
|
name: 'subtitle',
|
|
27
37
|
type: 'text',
|
|
@@ -29,7 +29,7 @@ const imageModalUrl = extractImageUrl(imageModal);
|
|
|
29
29
|
const randomId = Math.floor(Math.random() * 1000);
|
|
30
30
|
|
|
31
31
|
// Estilos del diseño de Figma (Button / Medium): 48px alto, radio 8px, IBM Plex Sans 16px semibold, sombra "Raised".
|
|
32
|
-
const baseClass = 'inline-flex items-center justify-center h-12 px-4 gap-1 rounded-
|
|
32
|
+
const baseClass = 'inline-flex items-center justify-center h-12 px-4 gap-1 rounded-full font-body text-base font-semibold leading-6 no-underline hover:underline transition-all duration-300 cursor-pointer shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)]';
|
|
33
33
|
const typeClass = {
|
|
34
34
|
primary: 'bg-[#d71635] text-white',
|
|
35
35
|
secondary: 'bg-[rgba(255,255,255,0.01)] border border-[#d71635] text-[#d71635]',
|
|
@@ -3,4 +3,4 @@
|
|
|
3
3
|
const { label } = Astro.props;
|
|
4
4
|
|
|
5
5
|
---
|
|
6
|
-
<button class="btn bg-[#d71635] text-[#f2eee1] p-2 rounded-
|
|
6
|
+
<button class="btn bg-[#d71635] text-[#f2eee1] p-2 rounded-full font-bold m-4 cursor-pointer transition-colors duration-300 hover:bg-[#71131f]">{label}</button>
|
|
@@ -36,7 +36,7 @@ const randomId = Math.floor(Math.random() * 1000);
|
|
|
36
36
|
<div class="text-[#1b1b1b]/90 font-body text-base not-italic font-normal leading-6 flex flex-col gap-4 listIco" set:html={text} />
|
|
37
37
|
)}
|
|
38
38
|
{textBtn && linkBtn && (
|
|
39
|
-
<a href={linkBtn} target="_self" class="flex flex-col justify-center items-center w-fit h-12 min-w-[120px] px-5 mt-6 rounded-
|
|
39
|
+
<a href={linkBtn} target="_self" class="flex flex-col justify-center items-center w-fit h-12 min-w-[120px] px-5 mt-6 rounded-full bg-[rgba(27,27,27,0.90)] shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)] text-white font-body font-semibold text-sm md:text-base transition-all duration-300 hover:bg-[linear-gradient(rgba(255,255,255,0.10),rgba(255,255,255,0.10))]">{textBtn}</a>
|
|
40
40
|
)}
|
|
41
41
|
</div>
|
|
42
42
|
|
|
@@ -3,6 +3,7 @@ import { extractImageUrl } from '../../lib/functions.js';
|
|
|
3
3
|
|
|
4
4
|
const {
|
|
5
5
|
title,
|
|
6
|
+
titleTag = 'h2',
|
|
6
7
|
subtitle,
|
|
7
8
|
description,
|
|
8
9
|
txtBtn,
|
|
@@ -15,6 +16,7 @@ const {
|
|
|
15
16
|
} = Astro.props;
|
|
16
17
|
|
|
17
18
|
const srcUrl = extractImageUrl(src);
|
|
19
|
+
const TitleTag = titleTag === 'h1' ? 'h1' : 'h2';
|
|
18
20
|
---
|
|
19
21
|
|
|
20
22
|
<section class="w-full flex items-center justify-center pb-9">
|
|
@@ -34,12 +36,12 @@ const srcUrl = extractImageUrl(src);
|
|
|
34
36
|
{(title || subtitle || description || (showBtn && linkBtn)) && (
|
|
35
37
|
<div class="absolute inset-0 flex flex-col justify-center items-center p-4 md:p-6 lg:p-8 z-10">
|
|
36
38
|
<div class="max-w-4xl w-full text-center">
|
|
37
|
-
{title && <
|
|
39
|
+
{title && <TitleTag class="text-[#1b1b1b] font-heading text-[28px] sm:text-[36px] md:text-[48px] lg:text-[64px] font-medium text-center leading-tight mb-4">{title}</TitleTag>}
|
|
38
40
|
{subtitle && <p class="text-[#1b1b1b] font-body sm:font-heading text-[18px] sm:text-[22px] md:text-[28px] lg:text-[32px] font-normal leading-tight text-center mb-4">{subtitle}</p>}
|
|
39
41
|
{description && <div class="text-[#403830] font-body lg:font-heading text-sm sm:text-base md:text-lg lg:text-xl font-normal leading-7 mb-6 text-center" set:html={description}></div>}
|
|
40
42
|
|
|
41
43
|
{showBtn && linkBtn && (
|
|
42
|
-
<a href={linkBtn} target="_self" class="inline-block h-11 md:h-12 text-[#ffffff] font-body font-semibold bg-[#d71635] px-5 md:px-7 py-2.5 md:py-3 border border-[#d71635] rounded-
|
|
44
|
+
<a href={linkBtn} target="_self" class="inline-block h-11 md:h-12 text-[#ffffff] font-body font-semibold bg-[#d71635] px-5 md:px-7 py-2.5 md:py-3 border border-[#d71635] rounded-full hover:bg-[#ffffff] transition-all duration-300 hover:text-[#1b1b1b] hover:border-[#1b1b1b] text-sm leading-[21px] md:text-base md:leading-6">{txtBtn}</a>
|
|
43
45
|
)}
|
|
44
46
|
</div>
|
|
45
47
|
</div>
|
|
@@ -107,10 +107,10 @@ const videoUrl = iframeSrc || '';
|
|
|
107
107
|
{(showBtn && linkBtn) || showBtnModal ? (
|
|
108
108
|
<Fragment>
|
|
109
109
|
{showBtn && linkBtn && (
|
|
110
|
-
<a href={linkBtn} target="_self" class="inline-flex w-fit mr-3 h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-
|
|
110
|
+
<a href={linkBtn} target="_self" class="inline-flex w-fit mr-3 h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-full shadow-md hover:bg-[#ebe7da] transition-all duration-300 hover:text-[#d71635] hover:border-[#d71635] text-sm leading-[21px] md:text-base md:leading-6">{txtBtn}</a>
|
|
111
111
|
)}
|
|
112
112
|
{showBtnModal && (
|
|
113
|
-
<button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-flex w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 mt-0 border border-[#d71635] rounded-
|
|
113
|
+
<button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-flex w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 mt-0 border border-[#d71635] rounded-full shadow-md hover:bg-[#ebe7da] transition-all duration-300 hover:text-[#d71635] hover:border-[#d71635] text-sm leading-[21px] md:text-base md:leading-6 cursor-pointer`}>{txtBtnModal}</button>
|
|
114
114
|
)}
|
|
115
115
|
</Fragment>
|
|
116
116
|
) : (
|
|
@@ -143,10 +143,10 @@ const videoUrl = iframeSrc || '';
|
|
|
143
143
|
{(showBtn && linkBtn) || showBtnModal ? (
|
|
144
144
|
<Fragment>
|
|
145
145
|
{showBtn && linkBtn && (
|
|
146
|
-
<a href={linkBtn} target="_self" class="inline-flex w-fit mr-3 h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-
|
|
146
|
+
<a href={linkBtn} target="_self" class="inline-flex w-fit mr-3 h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-full shadow-md hover:bg-[#ebe7da] transition-all duration-300 hover:text-[#d71635] hover:border-[#d71635] text-sm leading-[21px] md:text-base md:leading-6">{txtBtn}</a>
|
|
147
147
|
)}
|
|
148
148
|
{showBtnModal && (
|
|
149
|
-
<button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-flex w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 mt-0 border border-[#d71635] rounded-
|
|
149
|
+
<button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-flex w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 mt-0 border border-[#d71635] rounded-full shadow-md hover:bg-[#ebe7da] transition-all duration-300 hover:text-[#d71635] hover:border-[#d71635] text-sm leading-[21px] md:text-base md:leading-6 cursor-pointer`}>{txtBtnModal}</button>
|
|
150
150
|
)}
|
|
151
151
|
</Fragment>
|
|
152
152
|
) : (
|
|
@@ -195,10 +195,10 @@ const videoUrl = iframeSrc || '';
|
|
|
195
195
|
{(showBtn && linkBtn) || showBtnModal ? (
|
|
196
196
|
<Fragment>
|
|
197
197
|
{showBtn && linkBtn && (
|
|
198
|
-
<a href={linkBtn} target="_self" class="inline-flex w-fit mr-3 h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-
|
|
198
|
+
<a href={linkBtn} target="_self" class="inline-flex w-fit mr-3 h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-full shadow-md hover:bg-[#ebe7da] transition-all duration-300 hover:text-[#d71635] hover:border-[#d71635] text-sm leading-[21px] md:text-base md:leading-6">{txtBtn}</a>
|
|
199
199
|
)}
|
|
200
200
|
{showBtnModal && (
|
|
201
|
-
<button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 mt-0 border border-[#d71635] rounded-
|
|
201
|
+
<button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 mt-0 border border-[#d71635] rounded-full shadow-md hover:bg-[#ebe7da] transition-all duration-300 hover:text-[#d71635] hover:border-[#d71635] text-sm leading-[21px] md:text-base md:leading-6 cursor-pointer`}>{txtBtnModal}</button>
|
|
202
202
|
)}
|
|
203
203
|
</Fragment>
|
|
204
204
|
) : (
|
|
@@ -218,10 +218,10 @@ const videoUrl = iframeSrc || '';
|
|
|
218
218
|
{(showBtn && linkBtn) || showBtnModal ? (
|
|
219
219
|
<Fragment>
|
|
220
220
|
{showBtn && linkBtn && (
|
|
221
|
-
<a href={linkBtn} target="_self" class="inline-flex w-fit mr-3 h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-
|
|
221
|
+
<a href={linkBtn} target="_self" class="inline-flex w-fit mr-3 h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-full shadow-md hover:bg-[#ebe7da] transition-all duration-300 hover:text-[#d71635] hover:border-[#d71635] text-sm leading-[21px] md:text-base md:leading-6">{txtBtn}</a>
|
|
222
222
|
)}
|
|
223
223
|
{showBtnModal && (
|
|
224
|
-
<button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-flex w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 mt-0 border border-[#d71635] rounded-
|
|
224
|
+
<button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-flex w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 mt-0 border border-[#d71635] rounded-full shadow-md hover:bg-[#ebe7da] transition-all duration-300 hover:text-[#d71635] hover:border-[#d71635] text-sm leading-[21px] md:text-base md:leading-6 cursor-pointer`}>{txtBtnModal}</button>
|
|
225
225
|
)}
|
|
226
226
|
</Fragment>
|
|
227
227
|
) : (
|
|
@@ -57,7 +57,7 @@ const imageUrl = imageBase || extractImageUrl(image) || DEFAULT_IMAGE;
|
|
|
57
57
|
/>
|
|
58
58
|
|
|
59
59
|
{showBtn && linkBtn && (
|
|
60
|
-
<a href={linkBtn} target="_self" class="inline-flex w-fit items-center h-10 text-[#ffffff] font-body font-semibold text-sm leading-[21px] bg-[#d71635] px-4 py-2 border border-[#d71635] rounded-
|
|
60
|
+
<a href={linkBtn} target="_self" class="inline-flex w-fit items-center h-10 text-[#ffffff] font-body font-semibold text-sm leading-[21px] bg-[#d71635] px-4 py-2 border border-[#d71635] rounded-full hover:bg-[#ffffff] hover:text-[#d71635] transition-all duration-300">{txtBtn}</a>
|
|
61
61
|
)}
|
|
62
62
|
</div>
|
|
63
63
|
|
|
@@ -25,7 +25,7 @@ import Contenido_2026_Orcasitas from './Contenido_2026_Orcasitas.astro';
|
|
|
25
25
|
<div class="w-full flex justify-center mt-4">
|
|
26
26
|
{showBtn ? (
|
|
27
27
|
<div class="flex justify-center">
|
|
28
|
-
<a href={buttonUrl} class="px-5 py-3 font-body font-semibold text-base leading-6 border-1 border-[#d71635] text-[#d71635] hover:text-[#1b1b1b] hover:border-[#1b1b1b] transition-all duration-300 rounded-
|
|
28
|
+
<a href={buttonUrl} class="px-5 py-3 font-body font-semibold text-base leading-6 border-1 border-[#d71635] text-[#d71635] hover:text-[#1b1b1b] hover:border-[#1b1b1b] transition-all duration-300 rounded-full cursor-pointer shadow-sm">{buttonText}</a>
|
|
29
29
|
</div>
|
|
30
30
|
) : null}
|
|
31
31
|
</div>
|
|
@@ -38,7 +38,7 @@ const randomId = Math.floor(Math.random() * 1000);
|
|
|
38
38
|
<div class="text-[#1b1b1b]/90 font-body text-base not-italic font-normal leading-6 flex flex-col gap-4 listIco" set:html={text} />
|
|
39
39
|
)}
|
|
40
40
|
{textBtn && linkBtn && (
|
|
41
|
-
<a href={linkBtn} target="_self" class="flex flex-col justify-center items-start w-fit h-12 min-w-[120px] px-5 mt-6 rounded-
|
|
41
|
+
<a href={linkBtn} target="_self" class="flex flex-col justify-center items-start w-fit h-12 min-w-[120px] px-5 mt-6 rounded-full bg-[#d71635] shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)] text-white font-body font-semibold text-sm leading-[21px] md:text-base md:leading-6 transition-all duration-300 hover:bg-[linear-gradient(rgba(255,255,255,0.10),rgba(255,255,255,0.10))]">{textBtn}</a>
|
|
42
42
|
)}
|
|
43
43
|
</div>
|
|
44
44
|
|
|
@@ -45,7 +45,7 @@ const hasContent = title || description;
|
|
|
45
45
|
|
|
46
46
|
<div class="w-full max-w-7xl flex flex-col items-center justify-center text-center">
|
|
47
47
|
{showBtn && linkBtn && (
|
|
48
|
-
<a href={linkBtn} target="_self" class="flex items-center justify-center w-fit py-3 px-6 mx-auto gap-4 shrink-0 rounded-
|
|
48
|
+
<a href={linkBtn} target="_self" class="flex items-center justify-center w-fit py-3 px-6 mx-auto gap-4 shrink-0 rounded-full border border-[#d71635] bg-[#d71635] text-white text-center font-body text-base font-semibold leading-6 no-underline hover:bg-white hover:text-[#d71635] transition-all duration-300 cursor-pointer shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)]">{txtBtn}</a>
|
|
49
49
|
)}
|
|
50
50
|
{showBtnModal && (
|
|
51
51
|
<Modal_2025_Sagunto buttonText={txtBtnModal} frontColor="#ffffff" backColor="#d71635" borderColor="#d71635" imageModal={imageModal} altModal={altModal} titleModal={titleModal} descriptionModal={descriptionModal} lf2FormTitle={lf2FormTitle} idebook={idebook} />
|
|
@@ -66,7 +66,7 @@ const hasContent = title || description;
|
|
|
66
66
|
)}
|
|
67
67
|
<div class={`w-full max-w-7xl flex flex-col items-center justify-center text-center ${hasContent ? '' : 'my-auto'}`}>
|
|
68
68
|
{showBtn && linkBtn && (
|
|
69
|
-
<a href={linkBtn} target="_self" class="flex items-center justify-center w-fit py-3 px-6 mx-auto gap-4 shrink-0 rounded-
|
|
69
|
+
<a href={linkBtn} target="_self" class="flex items-center justify-center w-fit py-3 px-6 mx-auto gap-4 shrink-0 rounded-full border border-[#d71635] bg-[#d71635] text-white text-center font-body text-base font-semibold leading-6 no-underline hover:bg-white hover:text-[#d71635] transition-all duration-300 cursor-pointer shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)]">{txtBtn}</a>
|
|
70
70
|
)}
|
|
71
71
|
{showBtnModal && (
|
|
72
72
|
<Modal_2025_Sagunto buttonText={txtBtnModal} frontColor="#ffffff" backColor="#d71635" borderColor="#d71635" imageModal={imageModal} altModal={altModal} titleModal={titleModal} descriptionModal={descriptionModal} lf2FormTitle={lf2FormTitle} idebook={idebook} />
|
|
@@ -48,7 +48,7 @@ const TitleTag = titleTag === 'p' ? 'p' : 'h3';
|
|
|
48
48
|
|
|
49
49
|
<div class="w-full max-w-7xl flex flex-col items-center justify-center text-center">
|
|
50
50
|
{showBtn && linkBtn && (
|
|
51
|
-
<a href={linkBtn} target="_self" class="flex items-center justify-center w-fit mx-auto px-6 py-4 h-12 gap-4 shrink-0 self-stretch rounded-
|
|
51
|
+
<a href={linkBtn} target="_self" class="flex items-center justify-center w-fit mx-auto px-6 py-4 h-12 gap-4 shrink-0 self-stretch rounded-full border border-[#d71635] bg-[rgba(255,255,255,0.01)] text-[#d71635] text-center font-body text-base font-semibold leading-6 no-underline hover:underline hover:bg-white transition-all duration-300 cursor-pointer shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)]">{txtBtn}</a>
|
|
52
52
|
)}
|
|
53
53
|
{showBtnModal && (
|
|
54
54
|
<Modal_2025_Sagunto buttonText={txtBtnModal} frontColor="#d71635" backColor="#ffffff" borderColor="#d71635" imageModal={imageModal} altModal={altModal} titleModal={titleModal} descriptionModal={descriptionModal} lf2FormTitle={lf2FormTitle} idebook={idebook} nomprod={nomprod} />
|
|
@@ -98,7 +98,7 @@ const TitleTag = titleTag === 'p' ? 'p' : 'h3';
|
|
|
98
98
|
|
|
99
99
|
<div class={`w-full max-w-7xl flex flex-col items-center justify-center text-center ${hasContent ? '' : 'mt-auto'}`}>
|
|
100
100
|
{showBtn && linkBtn && (
|
|
101
|
-
<a href={linkBtn} target="_self" class="flex items-center justify-center w-fit mx-auto px-6 py-4 h-12 gap-4 shrink-0 self-stretch rounded-
|
|
101
|
+
<a href={linkBtn} target="_self" class="flex items-center justify-center w-fit mx-auto px-6 py-4 h-12 gap-4 shrink-0 self-stretch rounded-full border border-[#d71635] bg-white text-[#d71635] text-center font-body text-base font-semibold leading-6 no-underline hover:underline hover:bg-white transition-all duration-300 cursor-pointer shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)]">{txtBtn}</a>
|
|
102
102
|
)}
|
|
103
103
|
{showBtnModal && (
|
|
104
104
|
<Modal_2025_Sagunto buttonText={txtBtnModal} frontColor="#d71635" backColor="#ffffff" borderColor="#d71635" imageModal={imageModal} altModal={altModal} titleModal={titleModal} descriptionModal={descriptionModal} lf2FormTitle={lf2FormTitle} idebook={idebook} nomprod={nomprod} />
|
|
@@ -68,10 +68,10 @@ const imageUrl = imageBase || extractImageUrl(image);
|
|
|
68
68
|
{(showBtn && linkBtn) || showBtnModal ? (
|
|
69
69
|
<Fragment>
|
|
70
70
|
{showBtn && linkBtn && (
|
|
71
|
-
<a href={linkBtn} target="_self" class="inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-
|
|
71
|
+
<a href={linkBtn} target="_self" class="inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-full shadow-md hover:bg-[#ebe7da] transition-all duration-300 hover:text-[#d71635] hover:border-[#d71635] text-sm leading-[21px] md:text-base md:leading-6">{txtBtn}</a>
|
|
72
72
|
)}
|
|
73
73
|
{showBtnModal && (
|
|
74
|
-
<button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 mt-0 border border-[#d71635] rounded-
|
|
74
|
+
<button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 mt-0 border border-[#d71635] rounded-full shadow-md hover:bg-[#ebe7da] transition-all duration-300 hover:text-[#d71635] hover:border-[#d71635] text-sm leading-[21px] md:text-base md:leading-6 cursor-pointer`}>{txtBtnModal}</button>
|
|
75
75
|
)}
|
|
76
76
|
</Fragment>
|
|
77
77
|
) : (
|
|
@@ -90,10 +90,10 @@ const imageUrl = imageBase || extractImageUrl(image);
|
|
|
90
90
|
{(showBtn && linkBtn) || showBtnModal ? (
|
|
91
91
|
<Fragment>
|
|
92
92
|
{showBtn && linkBtn && (
|
|
93
|
-
<a href={linkBtn} target="_self" class="inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-
|
|
93
|
+
<a href={linkBtn} target="_self" class="inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-full shadow-md hover:bg-[#ebe7da] transition-all duration-300 hover:text-[#d71635] hover:border-[#d71635] text-sm leading-[21px] md:text-base md:leading-6">{txtBtn}</a>
|
|
94
94
|
)}
|
|
95
95
|
{showBtnModal && (
|
|
96
|
-
<button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 mt-0 border border-[#d71635] rounded-
|
|
96
|
+
<button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 mt-0 border border-[#d71635] rounded-full shadow-md hover:bg-[#ebe7da] transition-all duration-300 hover:text-[#d71635] hover:border-[#d71635] text-sm leading-[21px] md:text-base md:leading-6 cursor-pointer`}>{txtBtnModal}</button>
|
|
97
97
|
)}
|
|
98
98
|
</Fragment>
|
|
99
99
|
) : (
|
|
@@ -134,10 +134,10 @@ const imageUrl = imageBase || extractImageUrl(image);
|
|
|
134
134
|
{(showBtn && linkBtn) || showBtnModal ? (
|
|
135
135
|
<Fragment>
|
|
136
136
|
{showBtn && linkBtn && (
|
|
137
|
-
<a href={linkBtn} target="_self" class="inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-
|
|
137
|
+
<a href={linkBtn} target="_self" class="inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-full shadow-md hover:bg-[#ebe7da] transition-all duration-300 hover:text-[#d71635] hover:border-[#d71635] text-sm leading-[21px] md:text-base md:leading-6">{txtBtn}</a>
|
|
138
138
|
)}
|
|
139
139
|
{showBtnModal && (
|
|
140
|
-
<button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 mt-0 border border-[#d71635] rounded-
|
|
140
|
+
<button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 mt-0 border border-[#d71635] rounded-full shadow-md hover:bg-[#ebe7da] transition-all duration-300 hover:text-[#d71635] hover:border-[#d71635] text-sm leading-[21px] md:text-base md:leading-6 cursor-pointer`}>{txtBtnModal}</button>
|
|
141
141
|
)}
|
|
142
142
|
</Fragment>
|
|
143
143
|
) : (
|
|
@@ -154,10 +154,10 @@ const imageUrl = imageBase || extractImageUrl(image);
|
|
|
154
154
|
{(showBtn && linkBtn) || showBtnModal ? (
|
|
155
155
|
<Fragment>
|
|
156
156
|
{showBtn && linkBtn && (
|
|
157
|
-
<a href={linkBtn} target="_self" class="inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-
|
|
157
|
+
<a href={linkBtn} target="_self" class="inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-full shadow-md hover:bg-[#ebe7da] transition-all duration-300 hover:text-[#d71635] hover:border-[#d71635] text-sm leading-[21px] md:text-base md:leading-6">{txtBtn}</a>
|
|
158
158
|
)}
|
|
159
159
|
{showBtnModal && (
|
|
160
|
-
<button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 mt-0 border border-[#d71635] rounded-
|
|
160
|
+
<button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-block w-fit h-11 md:h-12 text-[#d71635] font-body font-semibold bg-[#ffffff] px-3.5 md:px-5 py-2.5 md:py-3 mt-0 border border-[#d71635] rounded-full shadow-md hover:bg-[#ebe7da] transition-all duration-300 hover:text-[#d71635] hover:border-[#d71635] text-sm leading-[21px] md:text-base md:leading-6 cursor-pointer`}>{txtBtnModal}</button>
|
|
161
161
|
)}
|
|
162
162
|
</Fragment>
|
|
163
163
|
) : (
|
|
@@ -59,20 +59,20 @@ const structuredData = items.length > 0 ? `<script type="application/ld+json">
|
|
|
59
59
|
<article class="w-full flex flex-col items-center justify-center">
|
|
60
60
|
<div class="w-2/5 flex justify-center items-center relative text-[40px] leading-[48px] md:text-[56px] md:leading-[64px] text-center font-heading font-normal mb-0 md:mb-12">
|
|
61
61
|
<!-- <div class="flex bg-[#d71635]/4 border border-[#e1c8b4] rounded-lg"> -->
|
|
62
|
-
<div class="flex gap-1 md:gap-
|
|
62
|
+
<div class="flex gap-1 md:gap-0 items-center md:p-1 md:rounded-full md:bg-[rgba(0,25,120,0.04)]">
|
|
63
63
|
{items.map((item, index) => (
|
|
64
64
|
<p class="font-body text-base">
|
|
65
65
|
{/* <a href={`#accordion${index + 1}`} class="btn py-[20px] px-[16px]">{item}</a> */}
|
|
66
66
|
<button data-linkedto={`${idAccordion}${index + 1}`}
|
|
67
67
|
class={`
|
|
68
|
-
btn py-3 px-5 leading-6 font-body
|
|
69
|
-
cursor-pointer border border-transparent bg-[#ebe7da]
|
|
70
|
-
hover:
|
|
71
|
-
hover:bg-white rounded-lg ${idAccordion}button
|
|
68
|
+
btn py-3 px-5 md:py-2 md:px-4 leading-6 font-body
|
|
69
|
+
cursor-pointer border border-transparent md:border-0 bg-[#ebe7da]
|
|
70
|
+
hover:bg-[rgba(0,25,120,0.08)] rounded-full ${idAccordion}button
|
|
72
71
|
${item.default ? 'active' : ''}
|
|
73
72
|
text-gray-100 max-w-10 max-h-5 text-[0px]
|
|
74
|
-
md:bg-
|
|
75
|
-
[&.active]:bg-
|
|
73
|
+
md:bg-transparent md:text-[#363942] md:max-w-none md:max-h-none md:text-[16px]
|
|
74
|
+
[&.active]:bg-[rgba(0,9,44,0.9)] [&.active]:hover:bg-[rgba(0,9,44,0.9)] [&.active]:text-white
|
|
75
|
+
md:[&.active]:shadow-[0_2px_4px_0_rgba(107,58,8,0.08),0_4px_8px_0_rgba(107,58,8,0.04)]
|
|
76
76
|
[&.active]:max-w-none [&.active]:max-h-none [&.active]:text-[16px]
|
|
77
77
|
`}
|
|
78
78
|
>{item.name}</button>
|
|
@@ -31,7 +31,7 @@ const randomId = `geo-shape-card-`+ Math.random().toString(36).substring(2, 15);
|
|
|
31
31
|
<div class={`js-hidden-${randomId} transition-[height] duration-300 relative overflow-hidden js-not-showing h-0`}>
|
|
32
32
|
<div class="flex flex-col gap-4" set:html={secondaryContent}></div>
|
|
33
33
|
</div>
|
|
34
|
-
<button id={randomId} type="button" class="mt-4 px-4 py-2 text-[#1b1b1b] rounded-
|
|
34
|
+
<button id={randomId} type="button" class="mt-4 px-4 py-2 text-[#1b1b1b] rounded-full border border-[#1b1b1b] hover:text-white hover:bg-[#d71635] transition cursor-pointer">∨ Leer más</button>
|
|
35
35
|
)}
|
|
36
36
|
</div>
|
|
37
37
|
</div>
|
|
@@ -48,7 +48,7 @@ const structuredData = `<script type="application/ld+json">
|
|
|
48
48
|
title={title}
|
|
49
49
|
loading="lazy"
|
|
50
50
|
class="object-cover object-center w-full h-full rounded-2xl shadow-lg"
|
|
51
|
-
|
|
51
|
+
fallback={iframeSrc}
|
|
52
52
|
/>
|
|
53
53
|
) : iframeSrc ? (
|
|
54
54
|
<video autoplay loop muted playsinline class="object-cover object-center w-full h-full rounded-2xl shadow-lg">
|
|
@@ -66,7 +66,7 @@ const structuredData = `<script type="application/ld+json">
|
|
|
66
66
|
<h3 class={`text-[${color === 'default' ? '#ffffff' : color}] font-heading text-[36px] md:text-[40px] font-normal text-center leading-[44px] md:leading-[48px] mb-0`} set:html={title}></h3>}
|
|
67
67
|
|
|
68
68
|
{showBtn ? (
|
|
69
|
-
<a href={linkBtn} class="text-[#d71635] font-body font-semibold bg-white px-7 py-3 border border-[#ffffff] rounded-
|
|
69
|
+
<a href={linkBtn} class="text-[#d71635] font-body font-semibold bg-white px-7 py-3 border border-[#ffffff] rounded-full hover:bg-[#d71635] hover:border-[#d71635] shadow-lg transition-all duration-300 hover:text-[#ffffff]">{txtBtn}</a>
|
|
70
70
|
) : (
|
|
71
71
|
<div class="flex justify-center"></div>
|
|
72
72
|
)}
|
|
@@ -22,7 +22,7 @@ const randomId = Math.floor(Math.random() * 1000);
|
|
|
22
22
|
---
|
|
23
23
|
<button
|
|
24
24
|
id={`js-open-sagunto-popup-${randomId}`}
|
|
25
|
-
class="text-base leading-6 font-semibold font-body inline-block w-fit mt-6 p-3 px-5 h-12 rounded-
|
|
25
|
+
class="text-base leading-6 font-semibold font-body inline-block w-fit mt-6 p-3 px-5 h-12 rounded-full transition-colors duration-300 cursor-pointer border"
|
|
26
26
|
style={`border-color: ${borderColor}; background-color: ${backColor}; color: ${frontColor};`}
|
|
27
27
|
>
|
|
28
28
|
{buttonText}
|
|
@@ -22,7 +22,7 @@ const imageUrl = extractImageUrl(image);
|
|
|
22
22
|
set:html={description}
|
|
23
23
|
/>
|
|
24
24
|
<div class="flex justify-start">
|
|
25
|
-
<a href={buttonUrl} class="border-1 border-[#d71635] bg-[#d71635] text-white font-bold block p-4 px-8 rounded-
|
|
25
|
+
<a href={buttonUrl} class="border-1 border-[#d71635] bg-[#d71635] text-white font-bold block p-4 px-8 rounded-full hover:bg-white hover:text-[#d71635] transition-colors duration-300">{buttonText}</a>
|
|
26
26
|
</div>
|
|
27
27
|
</div>
|
|
28
28
|
<div class={`w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'}`}>
|
|
@@ -25,7 +25,7 @@ const imageUrl = extractImageUrl(image);
|
|
|
25
25
|
<div class="font-bold text-md text-white mt-3 mb-9" set:html={description}>
|
|
26
26
|
</div>
|
|
27
27
|
<div class={`flex ${orientation === "right" ? "flex-row-reverse" : "flex-row"} gap-2 mb-5`}>
|
|
28
|
-
<a href={buttonUrl} class="btn btn-primary-brand btn-lg px-6 py-3 bg-[#d71635] transition duration-700 ease-in-out hover:bg-[linear-gradient(rgba(255,255,255,0.10),rgba(255,255,255,0.10))] text-white rounded-
|
|
28
|
+
<a href={buttonUrl} class="btn btn-primary-brand btn-lg px-6 py-3 bg-[#d71635] transition duration-700 ease-in-out hover:bg-[linear-gradient(rgba(255,255,255,0.10),rgba(255,255,255,0.10))] text-white rounded-full shadow">
|
|
29
29
|
{buttonText}
|
|
30
30
|
</a>
|
|
31
31
|
</div>
|
|
@@ -23,6 +23,6 @@ const color = rawColor?.toLowerCase() === '#262626' ? '#1b1b1b' : (rawColor ?? '
|
|
|
23
23
|
{showIco && <div class="mb-4 p-3 rounded-[48px] border-0 border-[#e1c8b4] bg-[#ebe7da] inline-flex"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.7666 3.02778C8.09281 3.12766 6.82755 3.50873 5.48708 4.61778C4.78257 5.20066 4.11577 6.04613 3.74806 6.82279C3.29002 7.79017 3.09934 8.88652 3.02363 10.9875C2.97923 12.2204 3.00211 18.294 3.0532 18.8412C3.17304 20.1237 3.33622 20.758 3.76184 21.5955C4.44449 22.9387 5.54687 24.0188 6.91147 24.6813C7.94762 25.1843 8.78243 25.3296 10.9214 25.3791C11.8335 25.4003 12.2144 25.4344 12.3716 25.509C12.5387 25.5884 12.7102 25.8342 13.3825 26.9582C14.1109 28.1758 14.2275 28.3286 14.6469 28.6131C15.0553 28.8903 15.439 29 15.9997 29C16.5603 29 16.944 28.8903 17.3524 28.6131C17.7718 28.3286 17.8885 28.1758 18.6169 26.9582C19.2892 25.8342 19.4607 25.5884 19.6278 25.509C19.785 25.4344 20.1658 25.4003 21.0779 25.3791C23.2377 25.3291 24.0675 25.1825 25.1189 24.6651C26.6317 23.9207 27.7897 22.6928 28.4639 21.1183C28.699 20.5689 28.8567 19.8239 28.9457 18.8412C28.9981 18.2629 29.0211 12.2884 28.9759 11.005C28.8731 8.09038 28.5463 6.9439 27.4163 5.53448C26.8465 4.82378 25.9679 4.12259 25.1786 3.74846C24.2289 3.29837 23.1162 3.10071 21.1089 3.02552C20.166 2.99023 11.7229 2.99206 10.7666 3.02778ZM10.7047 4.85473C8.95228 4.92831 7.95719 5.14242 7.2218 5.60409C6.61473 5.98525 5.9837 6.61661 5.60273 7.22399C5.12984 7.97801 4.93275 8.91747 4.85221 10.8016C4.81356 11.7049 4.81356 17.5929 4.85218 18.299C4.91965 19.5332 5.0283 20.0446 5.36818 20.7276C5.63029 21.2543 5.86984 21.5812 6.33732 22.0499C6.79396 22.5077 7.12113 22.748 7.64741 23.0123C8.44157 23.411 9.0265 23.5041 11.1227 23.5653C12.6141 23.6089 12.9529 23.6817 13.507 24.0779C13.9232 24.3756 14.1233 24.6439 14.8924 25.9358C15.217 26.4811 15.5118 26.9604 15.5476 27.001C15.7621 27.2444 16.2361 27.2444 16.4523 27.001C16.4883 26.9604 16.7201 26.5845 16.9674 26.1657C17.8547 24.6629 18.0567 24.3863 18.4924 24.077C19.0509 23.6804 19.389 23.6079 20.8767 23.5651C22.9678 23.5049 23.5575 23.4111 24.352 23.0123C24.8782 22.748 25.2054 22.5077 25.6621 22.0499C26.1294 21.5813 26.3641 21.2611 26.6285 20.731C26.97 20.0464 27.0817 19.5209 27.1459 18.2961C27.1859 17.534 27.1869 11.7295 27.1472 10.8016C27.0666 8.91747 26.8695 7.97801 26.3966 7.22399C26.0203 6.62399 25.3773 5.98064 24.7776 5.60409C24.0239 5.13095 23.085 4.93376 21.2018 4.85318C20.404 4.81904 11.5235 4.82034 10.7047 4.85473ZM10.9896 11.4245C10.7898 11.4582 10.6772 11.5142 10.5153 11.6605C9.9801 12.1443 10.1494 13.0247 10.8271 13.2824C10.9796 13.3404 11.1241 13.342 15.9997 13.342C20.8752 13.342 21.0197 13.3404 21.1722 13.2824C21.5421 13.1418 21.7927 12.7913 21.7967 12.4089C21.7978 12.3002 21.7825 12.1526 21.7626 12.0809C21.6949 11.8364 21.4004 11.5329 21.1468 11.4463C21.0556 11.4151 19.9971 11.4058 16.0926 11.4019C13.315 11.399 11.0819 11.4089 10.9896 11.4245ZM10.9442 15.668C10.6572 15.7366 10.4059 15.9444 10.279 16.2181C10.1711 16.4508 10.1714 16.7717 10.2797 17.003C10.4167 17.2955 10.6532 17.4887 10.9537 17.5537C11.0794 17.5809 12.0119 17.5878 14.5908 17.5806L18.0589 17.5709L18.2043 17.5037C18.3908 17.4175 18.6181 17.1898 18.7034 17.0039C18.797 16.7998 18.797 16.4213 18.7034 16.2172C18.6182 16.0316 18.41 15.823 18.2129 15.726L18.0589 15.6501L14.5598 15.6451C12.5745 15.6423 11.0103 15.6521 10.9442 15.668Z" fill="#d71635"/></svg></div>}
|
|
24
24
|
<h3 class:list={[`text-[${color}] font-heading text-xl leading-7 md:text-2xl md:leading-8 font-semibold`, showDescription ? 'mb-8' : 'mb-0']} set:html={title}></h3>
|
|
25
25
|
{showDescription && <div class={`text-[${color}] font-body text-base font-normal leading-6 mb-8`} set:html={description}></div>}
|
|
26
|
-
{showBtn && <a href={linkBtn} class="text-[#ffffff] font-body font-normal text-base leading-6 bg-[#d71635] px-5 py-3 border border-[#d71635] rounded-
|
|
26
|
+
{showBtn && <a href={linkBtn} class="text-[#ffffff] font-body font-normal text-base leading-6 bg-[#d71635] px-5 py-3 border border-[#d71635] rounded-full hover:bg-[#ffffff] hover:border-[#d71635] shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)] transition-all duration-300 hover:text-[#d71635]">{txtBtn}</a>}
|
|
27
27
|
</article>
|
|
28
28
|
</section>
|
|
@@ -33,6 +33,6 @@ const pretitleMargin = titleAlign === 'center' ? 'mx-auto' : titleAlign === 'rig
|
|
|
33
33
|
{description && <div class={`w-full font-body text-[#403830] text-base font-normal leading-6 ${alignClass}`} set:html={description}></div>}
|
|
34
34
|
|
|
35
35
|
{showBtn && btnLabel && (
|
|
36
|
-
<a href={btnSrc} class={`${btnSelf} text-white font-body font-normal bg-[#d71635] px-5 py-3 border border-[#d71635] rounded-
|
|
36
|
+
<a href={btnSrc} class={`${btnSelf} text-white font-body font-normal bg-[#d71635] px-5 py-3 border border-[#d71635] rounded-full hover:bg-white hover:text-[#d71635] transition-all duration-300`}>{btnLabel}</a>
|
|
37
37
|
)}
|
|
38
38
|
</section>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
const ReactButton = ({ label, onClick, type = 'button', disabled = false }) => (
|
|
4
|
-
<button className="bg-yellow-400 text-black p-2 rounded-
|
|
4
|
+
<button className="bg-yellow-400 text-black p-2 rounded-full font-bold m-4 cursor-pointer transition-colors duration-300 hover:bg-orange-600" type={type} onClick={onClick} disabled={disabled}>
|
|
5
5
|
{label}
|
|
6
6
|
</button>
|
|
7
7
|
);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<button class="bg-green-400 text-black p-2 rounded-
|
|
2
|
+
<button class="bg-green-400 text-black p-2 rounded-full font-bold m-4 cursor-pointer transition-colors duration-300 hover:bg-yellow-300">
|
|
3
3
|
<slot>{{ label }}</slot>
|
|
4
4
|
</button>
|
|
5
5
|
</template>
|