libreria-astro-lefebvre 0.2.24 → 0.2.26

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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "libreria-astro-lefebvre",
3
- "version": "0.2.24",
3
+ "version": "0.2.26",
4
4
  "description": "Librería de componentes Astro, React y Vue para Lefebvre",
5
5
  "author": "Equipo web desarrollo Lefebvre",
6
6
  "type": "module",
@@ -29,9 +29,9 @@ 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-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)]';
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(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,0.04)]';
33
33
  const typeClass = {
34
- primary: 'bg-[#d71635] text-white',
34
+ primary: 'bg-[#d71635] text-white hover:bg-[#71131f]',
35
35
  secondary: 'bg-[rgba(255,255,255,0.01)] border border-[#d71635] text-[#d71635]',
36
36
  };
37
37
  ---
@@ -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-full font-bold m-4 cursor-pointer transition-colors duration-300 hover:bg-[#71131f]">{label}</button>
6
+ <button class="btn bg-[#d71635] text-white p-2 rounded-full shadow-[0_2px_4px_-2px_rgba(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,0.04)] font-bold m-4 cursor-pointer transition-colors duration-300 hover:bg-[#71131f]">{label}</button>
@@ -7,14 +7,25 @@ const {
7
7
  backColor = '#d71635',
8
8
  borderColor = '#d71635',
9
9
  } = Astro.props;
10
+ const isRed = String(backColor).toLowerCase() === '#d71635';
11
+ // Rojo de marca: el hover oscurece (#71131f); el resto de colores conserva el intercambio de siempre
12
+ const hoverBg = isRed ? '#71131f' : frontColor;
13
+ const hoverText = isRed ? frontColor : backColor;
14
+ const hoverBorder = isRed ? '#71131f' : borderColor;
10
15
 
11
16
  ---
12
17
  <a
13
18
  href={buttonUrl}
14
- class="text-base leading-6 font-semibold font-body inline-block mt-6 p-3 px-5 h-12 rounded-full transition-colors duration-300 border border-solid w-fit"
19
+ class={`text-base leading-6 font-semibold font-body inline-block mt-6 p-3 px-5 h-12 rounded-full transition-colors duration-300 border border-solid w-fit ${isRed ? 'shadow-[0_2px_4px_-2px_rgba(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,0.04)]' : ''}`}
15
20
  style={`border-color: ${borderColor}; background-color: ${backColor}; color: ${frontColor};`}
16
- onmouseover={`this.style.backgroundColor='${frontColor}'; this.style.color='${backColor}';`}
17
- onmouseout={`this.style.backgroundColor='${backColor}'; this.style.color='${frontColor}';`}
21
+ data-bg={backColor}
22
+ data-fg={frontColor}
23
+ data-border={borderColor}
24
+ data-hover-bg={hoverBg}
25
+ data-hover-fg={hoverText}
26
+ data-hover-border={hoverBorder}
27
+ onmouseover="this.style.backgroundColor=this.dataset.hoverBg;this.style.color=this.dataset.hoverFg;this.style.borderColor=this.dataset.hoverBorder;"
28
+ onmouseout="this.style.backgroundColor=this.dataset.bg;this.style.color=this.dataset.fg;this.style.borderColor=this.dataset.border;"
18
29
  >
19
30
  {buttonText}
20
31
  </a>
@@ -90,7 +90,7 @@ const categories = [
90
90
  </a>
91
91
  <div class="flex items-center gap-4">
92
92
  <div class="flex items-center gap-4">
93
- <a href={url} class="h-12 max-[375px] px-3 md:px-5 py-3 font-body font-semibold max-[375px]:text-sm text-base border-1 border-[#d71635] bg-[#d71635] text-[#ffffff] hover:border-[#71131f] hover:bg-[#71131f] transition-all duration-300 rounded-lg cursor-pointer shadow-sm">{label}</a>
93
+ <a href={url} class="h-12 max-[375px] px-3 md:px-5 py-3 font-body font-semibold max-[375px]:text-sm text-base border-1 border-[#d71635] bg-[#d71635] text-[#ffffff] hover:border-[#71131f] hover:bg-[#71131f] transition-all duration-300 rounded-full cursor-pointer shadow-[0_2px_4px_-2px_rgba(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,0.04)]">{label}</a>
94
94
  </div>
95
95
  <button onclick="document.getElementById('navbar-default').classList.toggle('hidden'); event.target.classList.toggle('bg-[#fafaf5]');"
96
96
  type="button" class="font-body inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-[#6d5e52] rounded-lg md:hidden hover:bg-[#ebe7da]
@@ -97,7 +97,7 @@ const categories: MenuItem[] = (categoriesProp && categoriesProp.length > 0)
97
97
  </a>
98
98
  <div class="flex items-center gap-4">
99
99
  <div class="flex items-center gap-4">
100
- <a href={url} class="h-12 max-[375px] px-3 md:px-5 py-3 font-body font-semibold max-[375px]:text-sm text-base border-1 border-[#d71635] bg-[#d71635] text-[#ffffff] hover:border-[#71131f] hover:bg-[#71131f] transition-all duration-300 rounded-lg cursor-pointer shadow-sm">{label}</a>
100
+ <a href={url} class="h-12 max-[375px] px-3 md:px-5 py-3 font-body font-semibold max-[375px]:text-sm text-base border-1 border-[#d71635] bg-[#d71635] text-[#ffffff] hover:border-[#71131f] hover:bg-[#71131f] transition-all duration-300 rounded-full cursor-pointer shadow-[0_2px_4px_-2px_rgba(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,0.04)]">{label}</a>
101
101
  </div>
102
102
  <button onclick="document.getElementById('navbar-default').classList.toggle('hidden'); event.target.classList.toggle('bg-[#fafaf5]');"
103
103
  type="button" class="font-body inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-[#6d5e52] rounded-lg md:hidden hover:bg-[#ebe7da]
@@ -101,7 +101,7 @@ const categories: MenuItem[] = (categoriesProp && categoriesProp.length > 0)
101
101
  <div class="flex items-center gap-4">
102
102
  {label && (
103
103
  <div class="flex items-center gap-4">
104
- <a href={url} class="h-12 max-[375px] px-3 md:px-5 py-3 font-body font-semibold max-[375px]:text-sm max-[375px]:leading-[21px] text-base leading-6 border-1 border-[#d71635] bg-[#d71635] text-[#ffffff] hover:border-[#71131f] hover:bg-[#71131f] transition-all duration-300 rounded-lg cursor-pointer shadow-sm">{label}</a>
104
+ <a href={url} class="h-12 max-[375px] px-3 md:px-5 py-3 font-body font-semibold max-[375px]:text-sm max-[375px]:leading-[21px] text-base leading-6 border-1 border-[#d71635] bg-[#d71635] text-[#ffffff] hover:border-[#71131f] hover:bg-[#71131f] transition-all duration-300 rounded-full cursor-pointer shadow-[0_2px_4px_-2px_rgba(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,0.04)]">{label}</a>
105
105
  </div>
106
106
  )}
107
107
  <button onclick="document.getElementById('navbar-default').classList.toggle('hidden'); event.target.classList.toggle('bg-[#fafaf5]');"
@@ -41,7 +41,7 @@ const TitleTag = titleTag === 'h1' ? 'h1' : 'h2';
41
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>}
42
42
 
43
43
  {showBtn && linkBtn && (
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>
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-[#71131f] hover:border-[#71131f] shadow-[0_2px_4px_-2px_rgba(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,0.04)] transition-all duration-300 text-sm leading-[21px] md:text-base md:leading-6">{txtBtn}</a>
45
45
  )}
46
46
  </div>
47
47
  </div>
@@ -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-full hover:bg-[#ffffff] hover:text-[#d71635] transition-all duration-300">{txtBtn}</a>
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 shadow-[0_2px_4px_-2px_rgba(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,0.04)] hover:bg-[#71131f] hover:border-[#71131f] transition-all duration-300">{txtBtn}</a>
61
61
  )}
62
62
  </div>
63
63
 
@@ -95,7 +95,7 @@ const structuredData = `<script type="application/ld+json">
95
95
  <div id={`${identifier}${index + 1}`} class={`${index === 0 ? '' : 'hidden'} collapse-arrow ${identifier}item`}>
96
96
 
97
97
  <div class="w-full flex-col flex md:flex-row gap-4 md:gap-12">
98
- <div class="w-full md:w-1/2">
98
+ <div class="w-full md:w-1/2 listIco">
99
99
  <Contenido_2026_Menorca
100
100
  flexOrientationIcoText="flex-row"
101
101
  flexOrientationBlockIcoText="flex-col"
@@ -139,6 +139,34 @@ const structuredData = `<script type="application/ld+json">
139
139
  box-shadow: 0 2px 4px 0 rgba(107, 58, 8, 0.08), 0 4px 8px 0 rgba(107, 58, 8, 0.04);
140
140
  }
141
141
  }
142
+
143
+ .listIco :global(ul) {
144
+ list-style: none;
145
+ padding-left: 0;
146
+ margin: 16px 0;
147
+ }
148
+
149
+ .listIco :global(ul li) {
150
+ position: relative;
151
+ padding-left: 28px;
152
+ margin-bottom: 12px;
153
+ color: #403830;
154
+ font-family: 'IBM Plex Sans', sans-serif;
155
+ font-size: 1em;
156
+ line-height: 1.5em;
157
+ }
158
+
159
+ .listIco :global(ul li::before) {
160
+ content: "";
161
+ position: absolute;
162
+ left: 0;
163
+ top: 2px;
164
+ width: 20px;
165
+ height: 20px;
166
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.17788 0.00580546C9.12701 0.0108677 8.96575 0.025754 8.81951 0.0389066C5.20138 0.363884 2.01164 2.75985 0.671987 6.15893C0.200921 7.35413 0 8.42681 0 9.74663C0 10.5144 0.0444848 11 0.174609 11.6536C0.68334 14.2087 2.19721 16.4507 4.39222 17.8999C6.63897 19.3832 9.42877 19.8642 12.0564 19.2212C15.3567 18.4137 17.9874 15.9659 19.0345 12.7285C19.9357 9.94188 19.5131 6.83849 17.8996 4.39581C16.7833 2.70576 15.1898 1.40798 13.3329 0.676495C12.4733 0.337879 11.6783 0.144728 10.7039 0.0378433C10.4708 0.0122547 9.34953 -0.0112536 9.17788 0.00580546ZM9.1432 1.462C7.5796 1.59533 6.13149 2.11736 4.92363 2.98312C4.24438 3.47 3.46618 4.24801 2.97918 4.92709C2.2656 5.92213 1.74702 7.18032 1.55005 8.39438C1.46638 8.9102 1.4563 9.05576 1.4563 9.74663C1.4563 10.4375 1.46638 10.5831 1.55005 11.0989C1.61077 11.4731 1.78586 12.1885 1.8598 12.3643C1.87185 12.393 1.92949 12.5465 1.98789 12.7054C2.16248 13.1804 2.47595 13.8021 2.7747 14.2657C3.36847 15.1871 4.32602 16.1416 5.24732 16.7303C5.69737 17.0179 6.32256 17.3313 6.78486 17.5012C6.94382 17.5596 7.09732 17.6172 7.12599 17.6292C7.30187 17.7032 8.01742 17.8782 8.39177 17.9389C8.90771 18.0226 9.05331 18.0326 9.74434 18.0326C10.4354 18.0326 10.581 18.0226 11.0969 17.9389C11.4713 17.8782 12.1868 17.7032 12.3627 17.6292C12.3914 17.6172 12.5449 17.5596 12.7038 17.5012C13.1661 17.3313 13.7913 17.0179 14.2414 16.7303C14.9909 16.2514 15.8059 15.4939 16.3721 14.75C17.1657 13.7074 17.7281 12.3967 17.9386 11.0989C18.0223 10.5831 18.0324 10.4375 18.0324 9.74663C18.0324 9.05576 18.0223 8.9102 17.9386 8.39438C17.8779 8.02012 17.7028 7.30475 17.6289 7.12891C17.6168 7.10025 17.5592 6.94679 17.5008 6.78787C17.3262 6.31283 17.0127 5.69119 16.714 5.22759C16.1202 4.30612 15.1627 3.35165 14.2414 2.76295C13.7913 2.47535 13.1661 2.16191 12.7038 1.99208C12.5449 1.93369 12.3914 1.87606 12.3627 1.86402C12.2774 1.82817 11.7609 1.68783 11.5247 1.63633C10.9249 1.50557 10.5953 1.47043 9.88307 1.46128C9.53336 1.4568 9.20042 1.45712 9.1432 1.462ZM12.6669 6.80699C12.6021 6.82939 12.5085 6.8804 12.4588 6.92034C12.4092 6.96029 11.4741 7.88793 10.3808 8.98179L8.39299 10.9706L7.70854 10.2898C6.92315 9.50865 6.88699 9.48283 6.57664 9.48193C6.43294 9.48149 6.38041 9.49252 6.27112 9.54596C5.93369 9.711 5.77866 10.101 5.90911 10.4565C5.95498 10.5816 6.02347 10.6558 6.95533 11.591C8.09016 12.7298 8.07402 12.7172 8.39177 12.7166C8.53422 12.7163 8.6033 12.7042 8.69234 12.6637C8.78804 12.6203 9.2145 12.2045 11.1694 10.2485C13.4275 7.98936 13.5331 7.87997 13.5798 7.75205C13.7912 7.17318 13.2446 6.60734 12.6669 6.80699Z' fill='%23d71635'/%3E%3C/svg%3E");
167
+ background-repeat: no-repeat;
168
+ background-size: contain;
169
+ }
142
170
  </style>
143
171
 
144
172
  <script is:inline define:vars={{ identifier }}>
@@ -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-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>
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(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,0.04)] text-white font-body font-semibold text-sm leading-[21px] md:text-base md:leading-6 transition-all duration-300 hover:bg-[#71131f]">{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-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>
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-[#71131f] hover:border-[#71131f] transition-all duration-300 cursor-pointer shadow-[0_2px_4px_-2px_rgba(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,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-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>
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-[#71131f] hover:border-[#71131f] transition-all duration-300 cursor-pointer shadow-[0_2px_4px_-2px_rgba(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,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} />
@@ -50,10 +50,10 @@ const forceSkeleton = !lf2FormTitle;
50
50
  set:html={description}
51
51
  />
52
52
  {showBtn && linkBtn && (
53
- <a href={linkBtn} target="_self" class="inline-block w-fit h-11 md:h-12 text-white font-body font-semibold bg-[#d71635] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-full shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)] hover:bg-[linear-gradient(rgba(255,255,255,0.10),rgba(255,255,255,0.10))] transition-all duration-300 text-sm md:text-base mt-4">{txtBtn}</a>
53
+ <a href={linkBtn} target="_self" class="inline-block w-fit h-11 md:h-12 text-white font-body font-semibold bg-[#d71635] px-3.5 md:px-5 py-2.5 md:py-3 border border-[#d71635] rounded-full shadow-[0_2px_4px_-2px_rgba(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,0.04)] hover:bg-[#71131f] hover:border-[#71131f] transition-all duration-300 text-sm md:text-base mt-4">{txtBtn}</a>
54
54
  )}
55
55
  {showBtnModal && (
56
- <button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-block w-fit h-11 md:h-12 text-white font-body font-semibold bg-[#d71635] px-3.5 md:px-5 py-2.5 md:py-3 mt-4 md:mt-0 border border-[#d71635] rounded-full shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)] hover:bg-[linear-gradient(rgba(255,255,255,0.10),rgba(255,255,255,0.10))] transition-all duration-300 text-sm md:text-base cursor-pointer`}>{txtBtnModal}</button>
56
+ <button id={`js-open-teruel-popup-${randomId}`} class={`popup-modal-trigger-${randomId} inline-block w-fit h-11 md:h-12 text-white font-body font-semibold bg-[#d71635] px-3.5 md:px-5 py-2.5 md:py-3 mt-4 md:mt-0 border border-[#d71635] rounded-full shadow-[0_2px_4px_-2px_rgba(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,0.04)] hover:bg-[#71131f] hover:border-[#71131f] transition-all duration-300 text-sm md:text-base cursor-pointer`}>{txtBtnModal}</button>
57
57
  )}
58
58
  </div>
59
59
  <div class={`w-full md:w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'}`}>
@@ -17,12 +17,13 @@ const {
17
17
  } = Astro.props;
18
18
 
19
19
  const imageModalUrl = extractImageUrl(imageModal);
20
+ const isRed = String(backColor).toLowerCase() === '#d71635';
20
21
  const randomId = Math.floor(Math.random() * 1000);
21
22
 
22
23
  ---
23
24
  <button
24
25
  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-full transition-colors duration-300 cursor-pointer border"
26
+ 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 ${isRed ? 'shadow-[0_2px_4px_-2px_rgba(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,0.04)] hover:!bg-[#71131f] hover:!border-[#71131f]' : ''}`}
26
27
  style={`border-color: ${borderColor}; background-color: ${backColor}; color: ${frontColor};`}
27
28
  >
28
29
  {buttonText}
@@ -31,13 +31,14 @@ const {
31
31
  } = Astro.props;
32
32
 
33
33
  const imageModalUrl = extractImageUrl(imageModal);
34
+ const isRed = String(backColor).toLowerCase() === '#d71635';
34
35
  const uid = 'almeria-' + Math.random().toString(36).substring(2, 11);
35
36
  ---
36
37
 
37
38
  {buttonText && (
38
39
  <button
39
40
  id={`js-open-${uid}`}
40
- class="text-base leading-6 font-semibold font-body inline-block w-fit mt-6 p-3 px-5 h-12 rounded-xl transition-colors duration-300 cursor-pointer border"
41
+ 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 ${isRed ? 'shadow-[0_2px_4px_-2px_rgba(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,0.04)] hover:!bg-[#71131f] hover:!border-[#71131f]' : ''}`}
41
42
  style={`border-color: ${borderColor}; background-color: ${backColor}; color: ${frontColor};`}
42
43
  >
43
44
  {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-full hover:bg-white hover:text-[#d71635] transition-colors duration-300">{buttonText}</a>
25
+ <a href={buttonUrl} class="border-1 border-[#d71635] bg-[#d71635] text-white font-bold block p-4 px-8 rounded-full shadow-[0_2px_4px_-2px_rgba(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,0.04)] hover:bg-[#71131f] hover:border-[#71131f] 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-full shadow">
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-[#71131f] text-white rounded-full shadow-[0_2px_4px_-2px_rgba(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,0.04)]">
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-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>}
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-[#71131f] hover:border-[#71131f] shadow-[0_2px_4px_-2px_rgba(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,0.04)] transition-all duration-300">{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-full hover:bg-white hover:text-[#d71635] transition-all duration-300`}>{btnLabel}</a>
36
+ <a href={btnSrc} class={`${btnSelf} text-white font-body font-normal bg-[#d71635] px-5 py-3 border border-[#d71635] rounded-full shadow-[0_2px_4px_-2px_rgba(107,58,8,0.08),0_4px_8px_-2px_rgba(107,58,8,0.04)] hover:bg-[#71131f] hover:border-[#71131f] transition-all duration-300`}>{btnLabel}</a>
37
37
  )}
38
38
  </section>