libreria-astro-lefebvre 0.1.80 → 0.1.82
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
CHANGED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import type { ComponentMetadata } from '../interfaces/types';
|
|
2
|
+
|
|
3
|
+
export const metadata: ComponentMetadata = {
|
|
4
|
+
component_name: 'Hero_2026_Lliria',
|
|
5
|
+
category: 'Contenido de Imagen',
|
|
6
|
+
name: 'Hero de portada con título, descripción, imagen de fondo y CTA móvil 2026',
|
|
7
|
+
description: 'Cabecera de portada a todo el ancho con imagen de fondo cover y 600px de alto mínimo, con el texto centrado verticalmente. En escritorio el texto (título h1 en Poppins 56px regular y descripción en 32px, ambos en color oscuro #262626) ocupa la mitad izquierda, dejando visible la imagen en la mitad derecha. En móvil el texto ocupa todo el ancho (título 36px semibold, descripción 28px), la imagen muestra su zona izquierda (object-position: left) y aparece un botón CTA opcional (SOLO visible en móvil, según diseño)',
|
|
8
|
+
framework: 'Astro',
|
|
9
|
+
priority: 1,
|
|
10
|
+
tags: ['hero', 'banner', 'imagen', 'portada', 'cabecera', 'inicio'],
|
|
11
|
+
fields: [
|
|
12
|
+
{
|
|
13
|
+
name: 'title',
|
|
14
|
+
type: 'text',
|
|
15
|
+
help: 'Título principal del hero (h1). Admite HTML',
|
|
16
|
+
label: 'Texto del título',
|
|
17
|
+
mandatory: false,
|
|
18
|
+
example_value: 'Apuntes & Consejos'
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
name: 'description',
|
|
22
|
+
type: 'text',
|
|
23
|
+
help: 'Descripción o subtítulo que aparece debajo del título. Admite HTML',
|
|
24
|
+
label: 'Texto de la descripción',
|
|
25
|
+
mandatory: false,
|
|
26
|
+
example_value: 'Decide con seguridad en lo fiscal, lo laboral y lo mercantil, con asesoramiento claro, práctico y siempre actualizado.'
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
name: 'image',
|
|
30
|
+
type: 'image',
|
|
31
|
+
help: 'Imagen de fondo del hero. Cubre toda la sección (object-fit: cover, 600px de alto en escritorio). Conviene que la zona izquierda de la imagen sea clara para que el texto oscuro se lea bien',
|
|
32
|
+
label: 'Imagen de fondo',
|
|
33
|
+
mandatory: false,
|
|
34
|
+
example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png'
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
name: 'imageAlt',
|
|
38
|
+
type: 'text',
|
|
39
|
+
help: 'Texto alternativo de la imagen de fondo para accesibilidad. Si la imagen es puramente decorativa, puede dejarse vacío',
|
|
40
|
+
label: 'Alt de la imagen',
|
|
41
|
+
mandatory: false,
|
|
42
|
+
example_value: 'Dos profesionales revisando documentación en una tablet'
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
name: 'ctaText',
|
|
46
|
+
type: 'text',
|
|
47
|
+
help: 'Texto del botón CTA. El botón SOLO se muestra en móvil (en escritorio el diseño no lo incluye). Si se deja vacío, no aparece ningún botón',
|
|
48
|
+
label: 'Texto del botón (solo móvil)',
|
|
49
|
+
mandatory: false,
|
|
50
|
+
example_value: 'Pruébalo ya'
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
name: 'ctaUrl',
|
|
54
|
+
type: 'text',
|
|
55
|
+
help: 'URL de destino del botón CTA móvil. Solo tiene efecto si se ha informado el texto del botón',
|
|
56
|
+
label: 'URL del botón',
|
|
57
|
+
mandatory: false,
|
|
58
|
+
example_value: 'https://www.lefebvre.es/tienda/apuntes-y-consejos'
|
|
59
|
+
}
|
|
60
|
+
]
|
|
61
|
+
};
|
|
@@ -61,12 +61,14 @@ const structuredData = items.length > 0 ? `<script type="application/ld+json">
|
|
|
61
61
|
<button data-linkedto={`${idAccordion}${index + 1}`}
|
|
62
62
|
class={`
|
|
63
63
|
btn py-3 px-5 leading-6 font-inter
|
|
64
|
-
cursor-pointer border border-transparent bg-F2F3F8
|
|
65
|
-
hover:border hover:border-[#5F6168]
|
|
66
|
-
hover:bg-white rounded-lg ${idAccordion}button
|
|
64
|
+
cursor-pointer border border-transparent bg-[#F2F3F8]
|
|
65
|
+
hover:border hover:border-[#5F6168]
|
|
66
|
+
hover:bg-white rounded-lg ${idAccordion}button
|
|
67
67
|
${item.default ? 'active' : ''}
|
|
68
68
|
text-gray-100 max-w-10 max-h-5 text-[0px]
|
|
69
69
|
md:bg-gray-50 md:text-black md:max-w-none md:max-h-none md:text-[16px]
|
|
70
|
+
[&.active]:bg-white [&.active]:border-[#5F6168] [&.active]:text-black
|
|
71
|
+
[&.active]:max-w-none [&.active]:max-h-none [&.active]:text-[16px]
|
|
70
72
|
`}
|
|
71
73
|
>{item.name}</button>
|
|
72
74
|
</p>
|
|
@@ -96,23 +98,6 @@ const structuredData = items.length > 0 ? `<script type="application/ld+json">
|
|
|
96
98
|
</article>
|
|
97
99
|
</section>
|
|
98
100
|
|
|
99
|
-
<style>
|
|
100
|
-
.bg-F2F3F8 {
|
|
101
|
-
background-color: #F2F3F8;
|
|
102
|
-
}
|
|
103
|
-
/* !important: mismo selector de especificidad que las utilidades Tailwind
|
|
104
|
-
(text-[0px], border-transparent, max-w-10...) y el orden de hojas en el
|
|
105
|
-
portal hace que Tailwind cargue después y las pise en móvil */
|
|
106
|
-
.active{
|
|
107
|
-
background-color: #ffffff !important;
|
|
108
|
-
border: 1px solid #5F6168 !important;
|
|
109
|
-
color: black !important;
|
|
110
|
-
max-width: none !important;
|
|
111
|
-
max-height: none !important;
|
|
112
|
-
font-size: 16px !important;
|
|
113
|
-
}
|
|
114
|
-
</style>
|
|
115
|
-
|
|
116
101
|
<script is:inline define:vars={{ idAccordion }}>
|
|
117
102
|
|
|
118
103
|
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
---
|
|
2
|
+
import LimboImage from '../LimboImage.astro';
|
|
3
|
+
|
|
4
|
+
const {
|
|
5
|
+
title,
|
|
6
|
+
description,
|
|
7
|
+
image,
|
|
8
|
+
imageAlt = '',
|
|
9
|
+
ctaText,
|
|
10
|
+
ctaUrl = '#'
|
|
11
|
+
} = Astro.props;
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
<section class="relative w-full overflow-hidden bg-gray-100">
|
|
15
|
+
<LimboImage
|
|
16
|
+
src={image}
|
|
17
|
+
alt={imageAlt}
|
|
18
|
+
class="absolute inset-0 w-full h-full object-cover object-left md:object-center"
|
|
19
|
+
loading="eager"
|
|
20
|
+
/>
|
|
21
|
+
<div class="relative max-w-7xl w-full mx-auto flex items-center min-h-[600px] px-8 md:px-0">
|
|
22
|
+
<div class="w-full md:w-1/2 flex flex-col items-start gap-8 py-8 md:py-20 md:pr-16">
|
|
23
|
+
<div class="flex flex-col gap-4 w-full">
|
|
24
|
+
{title && (
|
|
25
|
+
<h1 class="font-poppins text-[#262626] text-4xl leading-[44px] tracking-[-0.5px] font-semibold md:text-[56px] md:leading-[64px] md:tracking-[-1px] md:font-normal" set:html={title}></h1>
|
|
26
|
+
)}
|
|
27
|
+
{description && (
|
|
28
|
+
<p class="font-poppins text-[#262626] text-[28px] leading-9 md:text-[32px] md:leading-10 font-normal" set:html={description}></p>
|
|
29
|
+
)}
|
|
30
|
+
</div>
|
|
31
|
+
{ctaText && (
|
|
32
|
+
<a
|
|
33
|
+
href={ctaUrl}
|
|
34
|
+
class="md:hidden inline-flex items-center justify-center w-fit h-10 px-4 rounded-lg bg-[#00092CE5] text-white font-inter text-base font-semibold leading-6 shadow-md"
|
|
35
|
+
>
|
|
36
|
+
{ctaText}
|
|
37
|
+
</a>
|
|
38
|
+
)}
|
|
39
|
+
</div>
|
|
40
|
+
<div class="hidden md:block md:w-1/2"></div>
|
|
41
|
+
</div>
|
|
42
|
+
</section>
|
|
@@ -51,6 +51,7 @@ import * as GeometricShapeCard from '../carbins/GeometricShapeCard.ts';
|
|
|
51
51
|
import * as HeaderCorporativo from '../carbins/HeaderCorporativo.ts';
|
|
52
52
|
import * as Hero_2025_Benidorm from '../carbins/Hero_2025_Benidorm.ts';
|
|
53
53
|
import * as Hero_2026_Benidorm from '../carbins/Hero_2026_Benidorm.ts';
|
|
54
|
+
import * as Hero_2026_Lliria from '../carbins/Hero_2026_Lliria.ts';
|
|
54
55
|
import * as ImageTextSimple from '../carbins/ImageTextSimple.ts';
|
|
55
56
|
import * as Imagen_2025_Bogota from '../carbins/Imagen_2025_Bogota.ts';
|
|
56
57
|
import * as Imagen_2025_Fukushima from '../carbins/Imagen_2025_Fukushima.ts';
|
|
@@ -144,6 +145,7 @@ export const components = [
|
|
|
144
145
|
{component: HeaderCorporativo},
|
|
145
146
|
{component: Hero_2025_Benidorm},
|
|
146
147
|
{component: Hero_2026_Benidorm},
|
|
148
|
+
{component: Hero_2026_Lliria},
|
|
147
149
|
{component: ImageTextSimple},
|
|
148
150
|
{component: Imagen_2025_Bogota},
|
|
149
151
|
{component: Imagen_2025_Fukushima},
|
package/src/index.ts
CHANGED
|
@@ -58,6 +58,7 @@ import GeometricShapeCard from './components/Astro/GeometricShapeCard.astro';
|
|
|
58
58
|
import HeaderCorporativo from './components/Astro/HeaderCorporativo.astro';
|
|
59
59
|
import Hero_2025_Benidorm from './components/Astro/Hero_2025_Benidorm.astro';
|
|
60
60
|
import Hero_2026_Benidorm from './components/Astro/Hero_2026_Benidorm.astro';
|
|
61
|
+
import Hero_2026_Lliria from './components/Astro/Hero_2026_Lliria.astro';
|
|
61
62
|
import ImageTextSimple from './components/Astro/ImageTextSimple.astro';
|
|
62
63
|
import Imagen_2025_Bogota from './components/Astro/Imagen_2025_Bogota.astro';
|
|
63
64
|
import Imagen_2025_Fukushima from './components/Astro/Imagen_2025_Fukushima.astro';
|
|
@@ -101,7 +102,7 @@ import ReactButton from './components/React/ReactButton.jsx';
|
|
|
101
102
|
// Exporta todos los componentes uno a uno para que puedan ser usados directamente.
|
|
102
103
|
|
|
103
104
|
|
|
104
|
-
export { VueButton, Author_2025_Algarve, Button, CTA_2025_Formentera, Cabecera_2025_Barcelona, Cabecera_2025_Madrid, Cabecera_2026_Bilbao, Cabecera_2026_Dakota, Cabecera_2026_Madrid, Calculadora_2026_Lisboa, Card_2025_Malta, Contenido_2025_Alcorcon, Contenido_2025_Cordoba, Contenido_2025_Granada, Contenido_2025_Malaga, Contenido_2025_Montevideo, Contenido_2026_Cabra, Contenido_2026_Denia, Contenido_2026_Dubai, Contenido_2026_Estepona, Contenido_2026_Estocolmo, Contenido_2026_Huesca, Contenido_2026_Jaen, Contenido_2026_Leon, Contenido_2026_Mallorca, Contenido_2026_Marruecos, Contenido_2026_Menorca, Contenido_2026_Michigan, Contenido_2026_Moraira, Contenido_2026_Mostoles, Contenido_2026_Orcasitas, Contenido_2026_Oslo, Contenido_2026_Quito, Contenido_2026_Seattle, Contenido_2026_Sevilla, Contenido_2026_Tokyo, Contenido_2026_Ubeda, Contenido_2026_Yakarta, CorpFooter, CorpHero, CorpNavigation, Enlace_2025_Venecia, FAQ_2025_Hiroshima, Footer_2025_Napoles, Formulario_2025_Nara, Formulario_2025_Seul, Formulario_2025_Teruel, Formulario_2026_Carabanchel, Formulario_2026_Wichita, Galeria_2026_Segorbe, GeometricShape, GeometricShapeCard, HeaderCorporativo, Hero_2025_Benidorm, Hero_2026_Benidorm, ImageTextSimple, Imagen_2025_Bogota, Imagen_2025_Fukushima, Imagen_2026_Algar, Indice_2025_Taiwan, Mapa_2026_Girona, Modal_2025_Sagunto, Modal_2026_Almeria, Paginacion_2025_Paris, RRSS_2025_Pisa, SEO_Head_Section, SEO_Schema_Page, Separador_2025_Reinosa, Separador_2025_Toledo, Share_2025_Florencia, SpectrumSeparator, Sumario_2025_Beijing, Tabla_2025_Fuenlabrada, Tabla_2026_Cadiz, Tag_2025_Bolonia, TestHijo, TestPadre, Test_2026_Gaza, TextBox, TextImageBackground, TextImageBlock, TextImageCard, TextImageHeader, Texto_2025_Kyoto, Texto_2026_Alicante, Texto_2026_Castellon, Tiempo_2025_Londres, Titulo_2025_Algeciras, Titulo_2025_Santorini, VideoAutoplay, Video_2025_Polop, Video_2025_Valencia, Video_2026_Andujar, ReactButton };
|
|
105
|
+
export { VueButton, Author_2025_Algarve, Button, CTA_2025_Formentera, Cabecera_2025_Barcelona, Cabecera_2025_Madrid, Cabecera_2026_Bilbao, Cabecera_2026_Dakota, Cabecera_2026_Madrid, Calculadora_2026_Lisboa, Card_2025_Malta, Contenido_2025_Alcorcon, Contenido_2025_Cordoba, Contenido_2025_Granada, Contenido_2025_Malaga, Contenido_2025_Montevideo, Contenido_2026_Cabra, Contenido_2026_Denia, Contenido_2026_Dubai, Contenido_2026_Estepona, Contenido_2026_Estocolmo, Contenido_2026_Huesca, Contenido_2026_Jaen, Contenido_2026_Leon, Contenido_2026_Mallorca, Contenido_2026_Marruecos, Contenido_2026_Menorca, Contenido_2026_Michigan, Contenido_2026_Moraira, Contenido_2026_Mostoles, Contenido_2026_Orcasitas, Contenido_2026_Oslo, Contenido_2026_Quito, Contenido_2026_Seattle, Contenido_2026_Sevilla, Contenido_2026_Tokyo, Contenido_2026_Ubeda, Contenido_2026_Yakarta, CorpFooter, CorpHero, CorpNavigation, Enlace_2025_Venecia, FAQ_2025_Hiroshima, Footer_2025_Napoles, Formulario_2025_Nara, Formulario_2025_Seul, Formulario_2025_Teruel, Formulario_2026_Carabanchel, Formulario_2026_Wichita, Galeria_2026_Segorbe, GeometricShape, GeometricShapeCard, HeaderCorporativo, Hero_2025_Benidorm, Hero_2026_Benidorm, Hero_2026_Lliria, ImageTextSimple, Imagen_2025_Bogota, Imagen_2025_Fukushima, Imagen_2026_Algar, Indice_2025_Taiwan, Mapa_2026_Girona, Modal_2025_Sagunto, Modal_2026_Almeria, Paginacion_2025_Paris, RRSS_2025_Pisa, SEO_Head_Section, SEO_Schema_Page, Separador_2025_Reinosa, Separador_2025_Toledo, Share_2025_Florencia, SpectrumSeparator, Sumario_2025_Beijing, Tabla_2025_Fuenlabrada, Tabla_2026_Cadiz, Tag_2025_Bolonia, TestHijo, TestPadre, Test_2026_Gaza, TextBox, TextImageBackground, TextImageBlock, TextImageCard, TextImageHeader, Texto_2025_Kyoto, Texto_2026_Alicante, Texto_2026_Castellon, Tiempo_2025_Londres, Titulo_2025_Algeciras, Titulo_2025_Santorini, VideoAutoplay, Video_2025_Polop, Video_2025_Valencia, Video_2026_Andujar, ReactButton };
|
|
105
106
|
|
|
106
107
|
|
|
107
108
|
// Exporta la función listComponents para que sea usado en el Pagebuilder en Vue.
|
|
@@ -171,6 +172,7 @@ export const components = {
|
|
|
171
172
|
HeaderCorporativo: HeaderCorporativo,
|
|
172
173
|
Hero_2025_Benidorm: Hero_2025_Benidorm,
|
|
173
174
|
Hero_2026_Benidorm: Hero_2026_Benidorm,
|
|
175
|
+
Hero_2026_Lliria: Hero_2026_Lliria,
|
|
174
176
|
ImageTextSimple: ImageTextSimple,
|
|
175
177
|
Imagen_2025_Bogota: Imagen_2025_Bogota,
|
|
176
178
|
Imagen_2025_Fukushima: Imagen_2025_Fukushima,
|