feat: refactor components to use slots, implement CSS-controlled SVG graphics, and enhance theming system
- Refactored InitialSection.astro to use named slot (extraContent) instead of prop for flexible HTML/JSX content injection from parent components - Updated index.astro to utilize extraContent slot in InitialSection component - Replaced decorative background div in Layout.astro with inline SVG element, enabling dynamic color control via CSS variable (--naliia-n-bg-color) - Added .bg-svg class and --bg-svg-color variable in global.css for customizable SVG decorative background - Converted navbar logo from img to inline SVG with CSS-controlled gradient using linearGradient definition - Implemented gradient variables (--navbar-n-naliia-start, --navbar-n-naliia-end) for theme-aware logo coloring - Configured vertical gradient (bottom-to-top) with pink color at bottom for navbar logo - Added data-theme attribute support in Layout.astro for light/dark theme switching - Extended global.css with comprehensive color palette (pink, yellow, mistyRose variants) and semantic tokens - Refactored all color references to use CSS custom properties for consistent theming - Updated Footer.astro logo from img to inline SVG with gradient support matching navbar implementation - Replaced hardcoded color values in navbar.css and footer.css with semantic token variables - Added [data-theme='dark'] selector in global.css to support future dark mode implementation - Created reusable CSS variables for borders, backgrounds, and text colors across components - Improved pricing card layout with enhanced visual hierarchy and gradient-based pricing tiers - Restructured index.astro pricing section with improved feature presentation and layout
This commit is contained in:
@@ -4,11 +4,124 @@ import "./footer.css";
|
||||
|
||||
<div class="footer-container">
|
||||
<div class="logo-and-copyright">
|
||||
<img
|
||||
src="/src/assets/imgs/logo-naliia-blanco.svg"
|
||||
alt="Logo de Naliia de color blanco"
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
id="Capa_2"
|
||||
data-name="Capa 2"
|
||||
viewBox="0 0 389.44 147.78"
|
||||
class="logo-naliia-footer"
|
||||
/>
|
||||
>
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: url(#Degradado_sin_nombre_66-6);
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: url(#Degradado_sin_nombre_66-4);
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
fill: url(#Degradado_sin_nombre_66-5);
|
||||
}
|
||||
|
||||
.cls-4 {
|
||||
fill: url(#Degradado_sin_nombre_66-3);
|
||||
}
|
||||
|
||||
.cls-5 {
|
||||
fill: url(#Degradado_sin_nombre_66-2);
|
||||
}
|
||||
|
||||
.cls-6 {
|
||||
fill: url(#Degradado_sin_nombre_66);
|
||||
}
|
||||
</style>
|
||||
<linearGradient
|
||||
id="Degradado_sin_nombre_66"
|
||||
data-name="Degradado sin nombre 66"
|
||||
x1="62.47"
|
||||
y1="147.78"
|
||||
x2="62.47"
|
||||
y2="19.42"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0" stop-color="var(--navbar-n-naliia-start)"
|
||||
></stop>
|
||||
<stop offset="1" stop-color="var(--navbar-n-naliia-end)"
|
||||
></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="Degradado_sin_nombre_66-2"
|
||||
data-name="Degradado sin nombre 66"
|
||||
x1="163.9"
|
||||
y1="131.54"
|
||||
x2="163.9"
|
||||
y2="36.56"
|
||||
xlink:href="#Degradado_sin_nombre_66"></linearGradient>
|
||||
<linearGradient
|
||||
id="Degradado_sin_nombre_66-3"
|
||||
data-name="Degradado sin nombre 66"
|
||||
x1="224.84"
|
||||
y1="129.79"
|
||||
x2="224.84"
|
||||
y2="1.75"
|
||||
xlink:href="#Degradado_sin_nombre_66"></linearGradient>
|
||||
<linearGradient
|
||||
id="Degradado_sin_nombre_66-4"
|
||||
data-name="Degradado sin nombre 66"
|
||||
x1="258.01"
|
||||
y1="129.79"
|
||||
x2="258.01"
|
||||
y2="0"
|
||||
xlink:href="#Degradado_sin_nombre_66"></linearGradient>
|
||||
<linearGradient
|
||||
id="Degradado_sin_nombre_66-5"
|
||||
data-name="Degradado sin nombre 66"
|
||||
x1="290.16"
|
||||
y1="129.79"
|
||||
x2="290.16"
|
||||
y2="0"
|
||||
xlink:href="#Degradado_sin_nombre_66"></linearGradient>
|
||||
<linearGradient
|
||||
id="Degradado_sin_nombre_66-6"
|
||||
data-name="Degradado sin nombre 66"
|
||||
x1="345.54"
|
||||
y1="131.54"
|
||||
x2="345.54"
|
||||
y2="36.56"
|
||||
xlink:href="#Degradado_sin_nombre_66"></linearGradient>
|
||||
</defs>
|
||||
<g id="Capa_1-2" data-name="Capa 1">
|
||||
<g>
|
||||
<path
|
||||
class="cls-6"
|
||||
d="M113.28,67.85c3.79-5.22,6.69-9.77,8.63-13.53,2.02-3.91,3.04-7.93,3.04-11.93,0-1.59-.46-3.51-1.39-5.89-.9-2.27-1.94-4.24-3.09-5.86-.91-1.26-2.32-2.94-4.13-2.94-2.58,0-6.29,1.7-11.34,5.2-4.78,3.31-10.7,8.29-17.61,14.8-6.89,6.49-15.08,15.03-24.35,25.38-5.28,5.89-10.88,12.39-16.76,19.45l9.4-15.83c3.78-6.36,7.54-12.88,11.17-19.38,3.66-6.54,6.49-12.19,8.41-16.78,2.01-4.8,2.99-8.41,2.99-11.04,0-3.27-1.23-5.82-3.65-7.58-2.27-1.65-5.35-2.49-9.15-2.49-4.19,0-9.25,1.28-15.04,3.81-4.52,1.97-11.16,5.12-19.8,9.39.69-.61,1.44-1.22,2.24-1.83,2.09-1.57,2.7-2.3,2.7-3.26,0-1.27-.69-1.83-1.1-2.05-1.22-.66-2.53.16-3.07.5-9.46,5.43-17.11,11.85-22.73,19.09C2.82,52.55,0,58.44,0,63.06s3.07,4.95,4.01,4.95c.65,0,1.63,0,10.24-4.91,5.47-3.12,9.81-5.54,12.9-7.2,3.07-1.65,8.03-3.91,14.72-6.72,10.44-4.35,13.46-5,14.32-5,.5,0,.92.16,1.3.51.35.32.5.69.5,1.2,0,1.61-1.28,5.97-7.37,17.57-5,9.51-12.66,22.74-22.8,39.33h0c-1.92,3.24-4.48,7.27-7.6,11.99-4.41,6.68-5.01,8.73-5.01,9.86,0,1.53,1.17,3.38,3.8,6.01,2.6,2.6,4.67,3.8,6.52,3.8s3.68-1.32,5.81-4.13c3.76-4.9,7.46-9.72,11.1-14.48,3.64-4.75,6.93-9.04,9.86-12.85,2.91-3.78,5.79-7.4,8.59-10.76,2.8-3.37,4.79-5.69,5.9-6.92,23.14-25.91,30.9-29.78,33.47-29.78.12,0,.2,0,.25.02,0,.04,0,.09,0,.16,0,.77-.7,3.57-7.22,12.9-5.13,7.24-9.79,14.28-13.85,20.93-4.08,6.67-7.55,12.95-10.32,18.67-2.79,5.74-4.89,10.89-6.24,15.31-1.38,4.49-2.08,8.4-2.08,11.62,0,3.69,1.04,6.74,3.1,9.06,2.11,2.37,4.91,3.57,8.34,3.57,2.29,0,4.95-.75,7.9-2.22,2.81-1.41,6.02-3.5,9.54-6.23,3.47-2.69,7.19-5.87,11.08-9.44,3.87-3.56,8.32-7.9,13.22-12.92l.48-.49-.28-11.03-2.65,2.56c-3.43,3.32-6.88,6.43-10.25,9.23-3.32,2.77-6.2,4.84-8.55,6.15-2.19,1.22-4.08,1.85-5.62,1.85-3.1,0-4.36-1.19-4.36-4.11,0-4.75,2.41-11.23,7.16-19.25,4.87-8.22,12.73-19.67,23.36-34.04Z"
|
||||
></path>
|
||||
<path
|
||||
class="cls-5"
|
||||
d="M207.8,129.79h-12.77c-6.65,0-11.02-4.37-11.02-11.02v-3.32c-4.02,9.97-14.52,16.09-30.26,16.09-20.47,0-33.76-10.32-33.76-26.76,0-22.56,25.36-36.56,63.49-37.08-1.75-13.99-7.52-29.39-23.26-29.39-12.24,0-19.94,10.14-23.79,20.64l-9.27-9.45c8.92-9.27,21.34-12.94,33.93-12.94,25.36,0,41.11,13.82,41.11,39.88v37.43c0,5.07,2.1,11.37,5.25,15.57l.35.35ZM184.01,105.48v-28.34c0-2.45-.17-4.9-.35-7.7-27.29.7-45.3,14.87-45.3,36.21,0,14.34,8.05,23.61,20.99,23.61,13.99,0,24.66-11.37,24.66-23.79Z"
|
||||
></path>
|
||||
<path
|
||||
class="cls-4"
|
||||
d="M212.95,129.79l.35-.53c3.15-4.02,5.07-10.32,5.07-15.39V17.67c0-5.25-1.92-11.37-5.07-15.57l-.35-.35h12.77c6.65,0,11.02,4.37,11.02,11.02v106c0,6.65-4.37,11.02-11.02,11.02h-12.77Z"
|
||||
></path>
|
||||
<path
|
||||
class="cls-2"
|
||||
d="M244.8,129.79l.35-.53c3.15-4.02,5.07-10.32,5.07-15.39v-59.65c0-5.25-1.92-11.37-5.07-15.57l-.35-.35h12.77c6.65,0,11.02,4.37,11.02,11.02v69.44c0,6.65-4.37,11.02-11.02,11.02h-12.77ZM259.49,0c6.82,0,11.72,4.55,11.72,11.72,0,6.65-4.9,11.37-11.72,11.37-7.17,0-11.72-4.72-11.72-11.37,0-7.17,4.55-11.72,11.72-11.72Z"
|
||||
></path>
|
||||
<path
|
||||
class="cls-3"
|
||||
d="M287.98,129.79c-6.65,0-11.02-4.37-11.02-11.02V49.33c0-6.65,4.37-11.02,11.02-11.02h12.77s-.35.35-.35.35c-3.15,4.2-5.07,10.32-5.07,15.57v59.65c0,5.07,1.92,11.37,5.07,15.39l.35.53h-12.77ZM291.65,0c6.82,0,11.72,4.55,11.72,11.72,0,6.65-4.9,11.37-11.72,11.37-7.17,0-11.72-4.72-11.72-11.37,0-7.17,4.55-11.72,11.72-11.72Z"
|
||||
></path>
|
||||
<path
|
||||
class="cls-1"
|
||||
d="M389.44,129.79h-12.77c-6.65,0-11.02-4.37-11.02-11.02v-3.32c-4.02,9.97-14.52,16.09-30.26,16.09-20.47,0-33.76-10.32-33.76-26.76,0-22.56,25.36-36.56,63.49-37.08-1.75-13.99-7.52-29.39-23.26-29.39-12.24,0-19.94,10.14-23.79,20.64l-9.27-9.45c8.92-9.27,21.34-12.94,33.93-12.94,25.36,0,41.11,13.82,41.11,39.88v37.43c0,5.07,2.1,11.37,5.25,15.57l.35.35ZM365.65,105.48v-28.34c0-2.45-.18-4.9-.35-7.7-27.29.7-45.3,14.87-45.3,36.21,0,14.34,8.05,23.61,20.99,23.61,13.99,0,24.66-11.37,24.66-23.79Z"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
@@ -24,7 +137,7 @@ import "./footer.css";
|
||||
height="34"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#ffffff"
|
||||
fill="var(--main-icon-color)"
|
||||
d="M17.6 6.32A7.85 7.85 0 0 0 12 4a7.94 7.94 0 0 0-6.88 11.89L4 20l4.2-1.1a7.9 7.9 0 0 0 3.79 1a8 8 0 0 0 8-7.93a8 8 0 0 0-2.39-5.65M12 18.53a6.6 6.6 0 0 1-3.36-.92l-.24-.15l-2.49.66l.66-2.43l-.16-.25a6.6 6.6 0 0 1 10.25-8.17a6.65 6.65 0 0 1 2 4.66a6.66 6.66 0 0 1-6.66 6.6m3.61-4.94c-.2-.1-1.17-.58-1.35-.64s-.32-.1-.45.1a9 9 0 0 1-.63.77c-.11.14-.23.15-.43 0a5.33 5.33 0 0 1-2.69-2.35c-.21-.35.2-.33.58-1.08a.38.38 0 0 0 0-.35c0-.1-.45-1.08-.61-1.47s-.32-.33-.45-.34h-.39a.7.7 0 0 0-.53.25A2.2 2.2 0 0 0 8 10.17a3.8 3.8 0 0 0 .81 2.05a8.9 8.9 0 0 0 3.39 3a3.85 3.85 0 0 0 2.38.5a2 2 0 0 0 1.33-.94a1.6 1.6 0 0 0 .12-.94c-.09-.1-.22-.15-.42-.25"
|
||||
></path></svg
|
||||
>
|
||||
@@ -37,7 +150,7 @@ import "./footer.css";
|
||||
height="28"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#ffffff"
|
||||
fill="var(--main-icon-color)"
|
||||
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
|
||||
></path></svg
|
||||
>
|
||||
@@ -50,7 +163,7 @@ import "./footer.css";
|
||||
height="28"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#ffffff"
|
||||
fill="var(--main-icon-color)"
|
||||
d="M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm3.519 0L12 11.671L18.481 6zM20 7.329l-7.341 6.424a1 1 0 0 1-1.318 0L4 7.329V18h16z"
|
||||
></path></svg
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user