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

@@ -41,6 +41,8 @@ const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } =
                 )
             }
         </div>
+
+        <slot name="extraContent" />
     </div>
 </section>
 

src/components/footer/Footer.astro

@@ -4,11 +4,124 @@ import "./footer.css";
 
 <div class="footer-container">
     <div class="logo-and-copyright">
-        <img
+        <svg
-            src="/src/assets/imgs/logo-naliia-blanco.svg"
+            xmlns="http://www.w3.org/2000/svg"
-            alt="Logo de Naliia de color blanco"
+            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
                 >

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);
+    background-color: var(--main-bg-color);
-    border-top: 1px solid rgb(255, 255, 255, 0.2);
+    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 {

src/components/navbar/Navbar.astro

@@ -12,11 +12,35 @@ const currentPath: string = Astro.url.pathname;
 
 <nav class="navbar nav-container">
     <a href="/" class="nav-link"
-        ><img
+        ><svg
-            src="/src/assets/imgs/n-naliia-blanca.svg"
+            xmlns="http://www.w3.org/2000/svg"
-            alt="N del logo de Naliia"
+            id="Capa_2"
-            class="logo-naliia"
+            data-name="Capa 2"
-        /></a
+            viewBox="0 0 31.15 32"
+            height="32"
+            width="31.15"
+        >
+            <defs>
+                <linearGradient
+                    id="navbar-gradient"
+                    x1="0%"
+                    y1="100%"
+                    x2="0%"
+                    y2="0%"
+                >
+                    <stop offset="0%" stop-color="var(--navbar-n-naliia-start)"
+                    ></stop>
+                    <stop offset="100%" stop-color="var(--navbar-n-naliia-end)"
+                    ></stop>
+                </linearGradient>
+            </defs>
+            <g id="Capa_1-2" data-name="Capa 1">
+                <path
+                    fill="url(#navbar-gradient)"
+                    d="M28.24,12.07c.94-1.3,1.67-2.44,2.15-3.37.5-.98.76-1.98.76-2.97,0-.4-.11-.88-.35-1.47-.22-.57-.48-1.06-.77-1.46-.23-.31-.58-.73-1.03-.73-.64,0-1.57.42-2.83,1.3-1.19.83-2.67,2.07-4.39,3.69-1.72,1.62-3.76,3.75-6.07,6.33-1.32,1.47-2.71,3.09-4.18,4.85l2.34-3.95c.94-1.59,1.88-3.21,2.78-4.83.91-1.63,1.62-3.04,2.1-4.18.5-1.2.74-2.1.74-2.75,0-.81-.31-1.45-.91-1.89-.56-.41-1.33-.62-2.28-.62-1.04,0-2.31.32-3.75.95-1.13.49-2.78,1.28-4.94,2.34.17-.15.36-.31.56-.46.52-.39.67-.57.67-.81,0-.32-.17-.46-.27-.51-.3-.17-.63.04-.76.13-2.36,1.35-4.26,2.95-5.67,4.76-1.45,1.86-2.15,3.33-2.15,4.48s.76,1.23,1,1.23c.16,0,.41,0,2.55-1.22,1.36-.78,2.45-1.38,3.22-1.79.77-.41,2-.97,3.67-1.68,2.6-1.08,3.35-1.25,3.57-1.25.13,0,.23.04.32.13.09.08.13.17.13.3,0,.4-.32,1.49-1.84,4.38-1.25,2.37-3.16,5.67-5.68,9.8h0c-.48.81-1.12,1.81-1.9,2.99-1.1,1.67-1.25,2.18-1.25,2.46,0,.38.29.84.95,1.5.65.65,1.16.95,1.63.95s.92-.33,1.45-1.03c.94-1.22,1.86-2.42,2.77-3.61.91-1.19,1.73-2.25,2.46-3.2.72-.94,1.44-1.84,2.14-2.68.7-.84,1.19-1.42,1.47-1.72,5.77-6.46,7.7-7.42,8.34-7.42.03,0,.05,0,.06,0,0,0,0,.02,0,.04,0,.19-.18.89-1.8,3.22-1.28,1.81-2.44,3.56-3.45,5.22-1.02,1.66-1.88,3.23-2.57,4.65-.69,1.43-1.22,2.72-1.56,3.82-.34,1.12-.52,2.09-.52,2.9,0,.92.26,1.68.77,2.26.52.59,1.22.89,2.08.89.57,0,1.23-.19,1.97-.55.7-.35,1.5-.87,2.38-1.55.86-.67,1.79-1.46,2.76-2.35.97-.89,2.07-1.97,3.29-3.22l.12-.12-.07-2.75-.66.64c-.86.83-1.72,1.6-2.55,2.3-.83.69-1.55,1.21-2.13,1.53-.55.31-1.02.46-1.4.46-.77,0-1.09-.3-1.09-1.02,0-1.18.6-2.8,1.79-4.8,1.21-2.05,3.17-4.9,5.82-8.49Z"
+                ></path>
+            </g>
+        </svg></a
     >
 
     <div class="pageslinks-container">
@@ -37,7 +61,7 @@ const currentPath: string = Astro.url.pathname;
             viewBox="0 0 2048 2048"
             class="svg-container"
             ><path
-                fill="#ffffff"
+                fill="var(--main-icon-color)"
                 d="M960 512q93 0 174 35t142 96t96 142t36 175q0 93-35 174t-96 142t-142 96t-175 36q-93 0-174-35t-142-96t-96-142t-36-175q0-93 35-174t96-142t142-96t175-36m0 768q66 0 124-25t101-69t69-102t26-124t-25-124t-69-101t-102-69t-124-26q-35 0-64 7v626q29 7 64 7m64-896H896V0h128zM896 1536h128v384H896zm1024-640v128h-384V896zM384 1024H0V896h384zm123-426L236 326l90-90l272 271zm906 724l271 272l-90 90l-272-271zm0-724l-91-91l272-271l90 90zm-906 724l91 91l-272 271l-90-90z"
             ></path></svg
         >

src/components/navbar/navbar.css

@@ -5,8 +5,8 @@
     height: 72px;
     box-sizing: border-box;
     padding: 16px 64px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    border-bottom: 1px solid var(--navbar-border-color);
-    background-color: var(--bg-dark);
+    background-color: var(--main-bg-color);
 }
 
 .nav-link {
@@ -15,11 +15,6 @@
     justify-content: center;
 }
 
-.logo-naliia {
-    height: 32px;
-    width: auto;
-}
-
 .pageslinks-container {
     display: flex;
     gap: 48px;
@@ -28,7 +23,7 @@
 a {
     text-decoration: none;
     position: relative;
-    color: white;
+    color: var(--main-text-color);
     font-size: var(--font-desktop-base);
     line-height: var(--line-height-desktop-h6);
     font-weight: bold;

src/layouts/Layout.astro

@@ -16,7 +16,7 @@ const { pageTitle } = Astro.props;
 ---
 
 <!doctype html>
-<html lang="es">
+<html lang="es" data-theme="light">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width" />
@@ -27,7 +27,19 @@ const { pageTitle } = Astro.props;
     </head>
 
     <body class="body-container">
-        <div class="bg-image" aria-hidden="true"></div>
+        <svg
+            class="bg-svg"
+            aria-hidden="true"
+            width="1400"
+            height="1400"
+            viewBox="0 0 124.94 128.36"
+            style="color: var(--naliia-n-bg-color);"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M113.28,48.43c3.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,33.13,0,39.02,0,43.64s3.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"
+                fill="currentColor"></path>
+        </svg>
 
         <header>
             <Navbar />

src/pages/index.astro

@@ -2,6 +2,20 @@
 import Layout from "../layouts/Layout.astro";
 import InitialSection from "../components/InitialSection.astro";
 import "../styles/index.css";
+
+const basicPlanFeatures = [
+    "Roles y permisos",
+    "Administración de Clientes",
+    "Administración de Proveedores",
+    "Productos/Servicios",
+    "Contabilidad",
+    "Informes contables",
+    "Ventas",
+    "Informes de ventas",
+    "Compras",
+    "Agenda",
+    "Liquidación de profesionales",
+];
 ---
 
 <Layout pageTitle="Home page">
@@ -86,23 +100,73 @@ import "../styles/index.css";
             </div>
 
             <div class="pricing-cards-container">
+                <div class="pricing-card best-plan-card">
+                        <div class="price-container">
+                            <p class="plan-type">Plan Avanzado</p>
+
+                            <div class="price-and-description">
+                                <h4 class="price-title">$500.000 COP</h4>
+                                <h6 class="price-subtitle">La mejor opción para tu negocio!</h6>
+                            </div>
+
+                            <div class="button-and-link-container">
+                                <button class="button select-plan-button"
+                                    >Contáctanos</button
+                                >
+        
+                                <a href="/pricing"
+                                    >O conoce a detalle todos los planes</a
+                                >
+                            </div>
+                        </div>
+
+                        <div class="divider"></div>
+
+                        <div class="features-container">
+                            <p class="features-subtitle">Tu plan incluye:</p>
+
+                            <div class="features-list">
+                                <div class="basic-features">
+                                    <p><strong>Características básicas:</strong></p>
+                                    
+                                    <p>Control completo de usuarios, clientes, proveedores, inventario, contabilidad y reportes financieros. Módulos de ventas, compras y agenda de profesionales.</p>
+                                </div>
+
+                                <div class="webapp-features">
+                                    <p><strong>Aplicación web:</strong></p>
+                                    
+                                    <p>Acceso personalizado para gestionar servicios diarios: control en tiempo real, registro de evidencias, reportes y comunicación fluida con central.</p>
+                                </div>
+
+                                <div class="ai-features">
+                                    <p><strong>Servicio al cliente y postventa:</strong></p>
+                                    
+                                    <p>Agendamiento y confirmación por WhatsApp/redes, con notificaciones de salida vía WhatsApp o email.</p>
+                                </div>
+                            </div>
+                        </div>
+                </div>
+
                 <div class="pricing-card">
                     <div class="pricing-card-content">
                         <p class="plan-type">Plan Básico</p>
 
                         <div class="price-and-description">
                             <h4>$100.000 COP</h4>
-                            <p>
+                            <p>Esencial para administrar tu negocio</p>
-                                Todo lo esencial para administrar tu negocio
-                                desde un solo lugar, con control de clientes,
-                                ventas y operaciones diarias.
-                            </p>
                         </div>
 
                         <div class="features-container">
-                            <h6>Este plan incluye:</h6>
+                            <h6>Incluye:</h6>
 
-                            <ul>
+                            {
+                                basicPlanFeatures.map((feature) => (
+                                    <p>{feature}</p>
+                                    <div class="horizontal-divider"></div>
+                                ))
+                            }
+
+                            <!-- <ul>
                                 <li>Roles y permisos</li>
                                 <li>Administración de Clientes</li>
                                 <li>Administración de Proveedores</li>
@@ -122,6 +186,61 @@ import "../styles/index.css";
                                     <li>Agenda</li>
                                     <li>Liquidación de profesionales</li>
                                 </ul>
+                            </details> -->
+                        </div>
+                    </div>
+
+                    <div class="button-and-link-container">
+                        <button class="button select-plan-button"
+                            >Contáctanos</button
+                        >
+
+                        <a href="/pricing" class="more-details-link"
+                            >Conoce a detalle todos los planes</a
+                        >
+                    </div>
+                </div>
+
+                <div class="pricing-card">
+                    <div class="pricing-card-content">
+                        <p class="plan-type">Plan Intermedio</p>
+
+                        <div class="price-and-description">
+                            <h4>$300.000 COP</h4>
+                            <p>
+                                Gestión completa del negocio con una <strong
+                                    >app web</strong
+                                > para que tu equipo pueda ver, organizar y para que
+                                tu equipo pueda ver, organizar y monitorear sus servicios
+                                agendados.
+                            </p>
+                        </div>
+
+                        <div
+                            class="features-container container-intermediate-plan"
+                        >
+                            <h6>Características</h6>
+                            <p>
+                                Incluye todos los beneficios del Plan Básico e
+                                incluye además una <strong
+                                    >Aplicación web</strong
+                                > para la gestión del negocio.
+                            </p>
+
+                            <details class="more-features-details">
+                                <summary class="more-details"
+                                    ><strong
+                                        >Caracteristicas de la app web</strong
+                                    ></summary
+                                >
+                                <ul>
+                                    <li>Informes contables</li>
+                                    <li>Ventas</li>
+                                    <li>Informes de ventas</li>
+                                    <li>Compras</li>
+                                    <li>Agenda</li>
+                                    <li>Liquidación de profesionales</li>
+                                </ul>
                             </details>
                         </div>
                     </div>
@@ -136,80 +255,6 @@ import "../styles/index.css";
                         >
                     </div>
                 </div>
-
-                <div class="pricing-card best-plan-card">
-                    <div class="pricing-card-content">
-                        <p class="plan-type">Plan Avanzado</p>
-
-                        <div class="price-and-description">
-                            <h4>$500.000 COP</h4>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur
-                                adipisicing elit. Repudiandae sapiente optio,
-                                quisquam ea placeat architecto dicta, suscipit
-                                quasi necessitatibus neque.
-                            </p>
-                        </div>
-
-                        <div class="features-container">
-                            <h6>Características</h6>
-                            <ul>
-                                <li>Característica #1 del plan</li>
-                                <li>Característica #2 del plan</li>
-                                <li>Característica #3 del plan</li>
-                                <li>Característica #4 del plan</li>
-                                <li>Característica #5 del plan</li>
-                            </ul>
-                        </div>
-                    </div>
-
-                    <div class="button-and-link-container">
-                        <button class="button select-plan-button"
-                            >Contáctanos</button
-                        >
-
-                        <a href="/pricing" class="more-details-link"
-                            >Conoce a detalle todos los planes</a
-                        >
-                    </div>
-                </div>
-
-                <div class="pricing-card">
-                    <div class="pricing-card-content">
-                        <p class="plan-type">Plan Intermedio</p>
-
-                        <div class="price-and-description">
-                            <h4>$300.000 COP</h4>
-                            <p>
-                                Lorem ipsum dolor sit amet, consectetur
-                                adipisicing elit. Repudiandae sapiente optio,
-                                quisquam ea placeat architecto dicta, suscipit
-                                quasi necessitatibus neque.
-                            </p>
-                        </div>
-
-                        <div class="features-container">
-                            <h6>Características</h6>
-                            <ul>
-                                <li>Característica #1 del plan</li>
-                                <li>Característica #2 del plan</li>
-                                <li>Característica #3 del plan</li>
-                                <li>Característica #4 del plan</li>
-                                <li>Característica #5 del plan</li>
-                            </ul>
-                        </div>
-                    </div>
-
-                    <div class="button-and-link-container">
-                        <button class="button select-plan-button"
-                            >Contáctanos</button
-                        >
-
-                        <a href="/pricing" class="more-details-link"
-                            >Conoce a detalle todos los planes</a
-                        >
-                    </div>
-                </div>
             </div>
         </section>
     </section>

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 {

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 {
+.best-plan-card {
-    border-radius: var(--space-lg-24px);
+    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;
+    & .plan-type {
-    width: 380px;
+        font-weight: bold;
-    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
+        background-color: var(--pricingcard-plantype-bgcolor);
-    background-color: #363636;
+        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 {
+    & a {
-    display: flex;
+        color: var(--pricingcard-value-txtcolor);
-    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;
 }
 
 .price-and-description {
     display: flex;
     flex-direction: column;
-    gap: var(--space-sm-8px);
-}
 
-.features-container {
+    & h4,
-    display: flex;
+    h6,
-    flex-direction: column;
+    p {
-    gap: var(--space-sm-8px);
+        color: var(--pricingcard-value-txtcolor);
+    }
 
-    && li {
+    & .price-title {
-        color: white;
+        text-decoration: underline;
-        font-size: var(--font-desktop-base);
-        line-height: var(--line-height-desktop-base);
     }
 }
 
@@ -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);
+    }
+}