From 83b0461f3b0b7b804869744a6f5e7c6b0da4e108 Mon Sep 17 00:00:00 2001 From: Juan Diego Moreno Upegui Date: Wed, 4 Feb 2026 18:31:47 -0500 Subject: [PATCH] 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 --- src/components/InitialSection.astro | 2 + src/components/footer/Footer.astro | 127 ++++++++++++++++- src/components/footer/footer.css | 6 +- src/components/navbar/Navbar.astro | 36 ++++- src/components/navbar/navbar.css | 11 +- src/layouts/Layout.astro | 16 ++- src/pages/index.astro | 207 +++++++++++++++++----------- src/styles/global.css | 103 +++++++++++--- src/styles/index.css | 131 +++++++++++------- 9 files changed, 464 insertions(+), 175 deletions(-) diff --git a/src/components/InitialSection.astro b/src/components/InitialSection.astro index 104bf68..579b887 100644 --- a/src/components/InitialSection.astro +++ b/src/components/InitialSection.astro @@ -41,6 +41,8 @@ const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } = ) } + + diff --git a/src/components/footer/Footer.astro b/src/components/footer/Footer.astro index ffd6a17..dfa471c 100644 --- a/src/components/footer/Footer.astro +++ b/src/components/footer/Footer.astro @@ -4,11 +4,124 @@ import "./footer.css";
- Logo de Naliia de color blanco + > + + + + + + + + + + + + + + + + + + + + + + +
@@ -24,7 +137,7 @@ import "./footer.css"; height="34" viewBox="0 0 24 24" > @@ -37,7 +150,7 @@ import "./footer.css"; height="28" viewBox="0 0 24 24" > @@ -50,7 +163,7 @@ import "./footer.css"; height="28" viewBox="0 0 24 24" > diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css index ebf2e33..237249e 100644 --- a/src/components/footer/footer.css +++ b/src/components/footer/footer.css @@ -5,8 +5,8 @@ justify-content: space-between; padding: 16px 64px; box-sizing: border-box; - background-color: var(--dark-gray); - border-top: 1px solid rgb(255, 255, 255, 0.2); + background-color: var(--main-bg-color); + border-top: var(--main-border); } .logo-and-copyright { @@ -18,7 +18,7 @@ .divider { width: 1px; height: 40px; - background-color: rgba(255, 255, 255, 0.2); + background-color: rgba(68, 68, 68, 0.2); } .logo-naliia-footer { diff --git a/src/components/navbar/Navbar.astro b/src/components/navbar/Navbar.astro index 81829ba..115cef8 100644 --- a/src/components/navbar/Navbar.astro +++ b/src/components/navbar/Navbar.astro @@ -12,11 +12,35 @@ const currentPath: string = Astro.url.pathname;
diff --git a/src/styles/global.css b/src/styles/global.css index a092d24..8b53d26 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -30,9 +30,46 @@ :root { /* Primitive values */ + --bg-svg-color: #ffffff; /* Colors */ --dark-gray: #252525; + --light-gray: #444444; + --base-white: #ffffff; + --base-black: #000000; + + --main-pink-50: #fcedf1; + --main-pink-100: #f7c8d4; + --main-pink-200: #f3adc0; + --main-pink-300: #ee87a3; + --main-pink-400: #ea7091; + --main-pink-500: #e54c75; + --main-pink-600: #d0456a; + --main-pink-700: #a33653; + --main-pink-800: #7e2a40; + --main-pink-900: #602031; + + --main-yellow-50: #fef8f1; + --main-yellow-100: #fde9d4; + --main-yellow-200: #fbdfbf; + --main-yellow-300: #fad0a1; + --main-yellow-400: #f9c78f; + --main-yellow-500: #f7b973; + --main-yellow-600: #e1a869; + --main-yellow-700: #af8352; + --main-yellow-800: #88663f; + --main-yellow-900: #684e30; + + --main-mistyRose-50: #fefcfa; + --main-mistyRose-100: #fcf6f0; + --main-mistyRose-200: #faf2e9; + --main-mistyRose-300: #f8ece0; + --main-mistyRose-400: #f6e8d9; + --main-mistyRose-500: #f4e2d0; + --main-mistyRose-600: #decebd; + --main-mistyRose-700: #ada094; + --main-mistyRose-800: #867c72; + --main-mistyRose-900: #665f57; /* Fonts */ --font-family-primary: "Gilroy"; @@ -93,7 +130,24 @@ --space-9: 160px; /* Tokens */ - --bg-dark: var(--dark-gray); + /* Light theme (default) */ + --main-bg-color: var(--base-white); + --main-text-color: var(--light-gray); + --secundary-text-color: var(--base-white); + --card-bg-color: var(--main-mistyRose-500); + --naliia-n-bg-color: var(--main-pink-500); + --main-icon-color: var(--light-gray); + --navbar-border-color: rgba(68, 68, 68, 0.2); + --navbar-n-naliia-start: var(--main-pink-500); + --navbar-n-naliia-end: var(--main-yellow-500); + --main-border: 1px solid rgba(68, 68, 68, 0.2); + --pricingcard-bgcolor: var(--dark-gray); + --pricingcard-section-bgcolor: var(--dark-gray); + --pricingcard-plantype-bgcolor: var(--main-pink-500); + --pricingcard-plantype-txtcolor: var(--base-white); + --pricingcard-value-txtcolor: var(--base-white); + --pricingcard-features-subtitlecolor: var(--main-pink-500); + --pricingcard-features-txtcolor: var(--base-white); /* spacing, padding, margin */ --space-none-0: var(--space-none); @@ -174,13 +228,19 @@ --line-height-mobile-h1: var(--lh-h1-mobile); } +[data-theme="dark"] { + /* Dark theme */ + --navbar-n-naliia-start: var(--base-white); + --navbar-n-naliia-end: var(--base-white); +} + html, body { margin: 0; width: 100%; height: 100%; min-height: 100vh; - background-color: var(--bg-dark); + background-color: var(--main-bg-color); font-family: var(--font-family-primary), sans-serif, Arial; } @@ -189,7 +249,7 @@ p { line-height: var(--line-height-desktop-base); padding: 0; margin: 0; - color: white; + color: var(--main-text-color); @media (max-width: 768px) { font-size: var(--font-mobile-base); @@ -204,7 +264,7 @@ h1 { line-height: var(--line-height-desktop-h1); padding: 0; margin: 0; - color: white; + color: var(--main-text-color); @media (max-width: 768px) { font-size: var(--font-mobile-h1); @@ -219,7 +279,7 @@ h2 { line-height: var(--line-height-desktop-h2); padding: 0; margin: 0; - color: white; + color: var(--main-text-color); @media (max-width: 768px) { font-size: var(--font-mobile-h2); @@ -234,7 +294,7 @@ h3 { line-height: var(--line-height-desktop-h3); padding: 0; margin: 0; - color: white; + color: var(--main-text-color); @media (max-width: 768px) { font-size: var(--font-mobile-h3); @@ -249,7 +309,7 @@ h4 { line-height: var(--line-height-desktop-h4); padding: 0; margin: 0; - color: white; + color: var(--main-text-color); @media (max-width: 768px) { font-size: var(--font-mobile-h4); @@ -264,7 +324,7 @@ h5 { line-height: var(--line-height-desktop-h5); padding: 0; margin: 0; - color: white; + color: var(--main-text-color); @media (max-width: 768px) { font-size: var(--font-mobile-h5); @@ -279,7 +339,7 @@ h6 { line-height: var(--line-height-desktop-h6); padding: 0; margin: 0; - color: white; + color: var(--main-text-color); @media (max-width: 768px) { font-size: var(--font-mobile-h6); @@ -289,21 +349,30 @@ h6 { } } -.bg-image { +a, +li, +summary { + color: var(--main-text-color); + text-decoration: none; + font-size: var(--font-desktop-base); + line-height: var(--line-height-desktop-base); + + @media (max-width: 768px) { + font-size: var(--font-mobile-base); + line-height: var(--line-height-mobile-base); + } +} + +.bg-svg { position: absolute; top: -180px; right: 0px; - width: 1400px; height: 1400px; - - transform: translateX(8%); - background-image: url("../assets/imgs/n-naliia-blanca.svg"); - background-repeat: no-repeat; - background-size: contain; z-index: -1; pointer-events: none; - opacity: 0.02; + opacity: 0.05; + transform: translateX(8%); } .body-container { diff --git a/src/styles/index.css b/src/styles/index.css index 5daffc4..89c03c6 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -32,7 +32,7 @@ } .offer-card { - border: 1px solid rgba(255, 255, 255, 0.2); + border: var(--main-border); border-radius: var(--space-lg-24px); height: 200px; @@ -65,74 +65,66 @@ .pricing-cards-container { display: flex; - flex-direction: row; + flex-direction: column; justify-content: center; align-items: center; gap: var(--space-lg-24px); } -.pricing-card { - border-radius: var(--space-lg-24px); +.best-plan-card { + border-top-left-radius: var(--space-2xl-48px); + border-top-right-radius: var(--space-2xl-48px); - padding: var(--space-3xl-64px) var(--space-xl-32px); + display: flex; + align-items: center; + gap: var(--space-2xl-48px); + padding: var(--space-xl-32px); + + height: 372px; + width: 100%; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); + background-color: var(--pricingcard-bgcolor); + box-sizing: border-box; +} + +.price-container { + height: 100%; + width: 50%; display: flex; flex-direction: column; justify-content: space-between; - gap: var(--space-2xl-48px); + border-top-left-radius: var(--space-2xl-48px); - min-height: 650px; - width: 380px; - box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); - background-color: #363636; -} + & .plan-type { + font-weight: bold; + background-color: var(--pricingcard-plantype-bgcolor); + color: var(--pricingcard-plantype-txtcolor); + padding: var(--space-sm-8px) var(--space-md-16px); + border-radius: var(--space-md-16px); + width: fit-content; + display: flex; + align-items: center; + justify-content: center; + } -.pricing-card-content { - display: flex; - flex-direction: column; - gap: var(--space-2xl-48px); -} - -.more-details { - font-size: var(--font-desktop-base); - line-height: var(--line-height-desktop-base); - color: white; - text-align: left; - cursor: pointer; - text-decoration: underline; -} - -.best-plan-card { - border: 4px solid #e54c75; - height: 680px; -} - -.pricing-card .plan-type { - font-weight: bold; - background-color: #e54c75; - padding: var(--space-sm-8px) var(--space-md-16px); - border-radius: var(--space-md-16px); - width: fit-content; - display: flex; - align-items: center; - justify-content: center; + & a { + color: var(--pricingcard-value-txtcolor); + } } .price-and-description { display: flex; flex-direction: column; - gap: var(--space-sm-8px); -} -.features-container { - display: flex; - flex-direction: column; - gap: var(--space-sm-8px); + & h4, + h6, + p { + color: var(--pricingcard-value-txtcolor); + } - && li { - color: white; - font-size: var(--font-desktop-base); - line-height: var(--line-height-desktop-base); + & .price-title { + text-decoration: underline; } } @@ -163,8 +155,45 @@ font-size: var(--font-desktop-sm); font-weight: normal; line-height: var(--line-height-desktop-sm); - color: white; text-align: center; cursor: pointer; text-decoration: underline; } + +.divider { + width: 1px; + height: 95%; + background-color: rgba(255, 255, 255, 0.2); +} + +.features-container { + height: 100%; + width: 100%; + + display: flex; + flex-direction: column; + gap: var(--space-md-16px); + + & .features-subtitle { + font-weight: bold; + font-size: var(--font-desktop-base); + color: var(--pricingcard-features-subtitlecolor); + } +} + +.features-list { + display: flex; + flex-direction: column; + gap: var(--space-md-16px); + + & .basic-features, + .webapp-features, + .ai-features { + display: flex; + flex-direction: column; + } + + & p { + color: var(--pricingcard-features-txtcolor); + } +}