feat: mejoras en componentes y correcciones ortográficas

- Corrección ortográfica en index.astro (sábados)
- Implementación de prop autoHeight en InitialSection para ajuste dinámico de altura
- Creación del componente PricingCard con diseño responsive
- Creación de PlanDetailsTable con características detalladas de cada plan
- Agregados emojis ✅ a características incluidas en planes
- Actualización de estilos para página de pricing
- Ajustes en el slot extraContent de InitialSection
- Mejoras visuales y estructurales en pricing.astro

src/components/InitialSection.astro

@@ -2,19 +2,40 @@
 export interface SectionProps {
     imgSrc: string;
     imgAlt: string;
+    imgWidth?: number;
+    imgHeight?: number;
+    customXPosition?: string;
     logoSrc: string;
     logoAlt: string;
     mainTitle: string;
     subtitle: string;
     buttonText?: string;
+    autoHeight?: boolean;
 }
 
-const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } =
-    Astro.props as SectionProps;
+const {
+    imgSrc,
+    imgAlt,
+    imgWidth,
+    imgHeight,
+    logoSrc,
+    logoAlt,
+    mainTitle,
+    subtitle,
+    buttonText,
+    customXPosition,
+    autoHeight = false,
+} = Astro.props as SectionProps;
 ---
 
-<section class="section-1 first-sect-container">
-    <img src={imgSrc} alt={imgAlt} class="main-img" fetchpriority="high" />
+<section class="section-1 first-sect-container" data-auto-height={autoHeight}>
+    <img
+        src={imgSrc}
+        alt={imgAlt}
+        class="main-img"
+        fetchpriority="high"
+        style={`width: ${imgWidth ? imgWidth : "auto"}px; height: ${imgHeight ? imgHeight : "auto"}px; ${customXPosition ? `transform: translateX(${customXPosition});` : ""}`}
+    />
 
     <div class="landing-content">
         <div class="logo-container">
@@ -41,7 +62,6 @@ const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } =
                 )
             }
         </div>
-
         <slot name="extraContent" />
     </div>
 </section>
@@ -57,6 +77,12 @@ const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } =
         padding: 80px 300px 0px 300px;
     }
 
+    .section-1[data-auto-height="true"] {
+        height: auto;
+        min-height: 100vh;
+        padding-bottom: 80px;
+    }
+
     .main-img {
         position: absolute;
         top: 20px;
@@ -65,7 +91,7 @@ const { imgSrc, imgAlt, logoSrc, logoAlt, mainTitle, subtitle, buttonText } =
         width: 680px;
         height: auto;
 
-        transform: translateX(-25%);
+        transform: translateX(-32%);
         z-index: -1;
         pointer-events: none;
     }

src/components/PlanDetailsTable.astro

@@ -0,0 +1,233 @@
+---
+
+---
+
+<table border="1" cellpadding="8" cellspacing="0">
+    <thead>
+        <tr>
+            <th class="first-col">Básico</th>
+            <th>Intermedio</th>
+            <th>Avanzado</th>
+            <th class="last-col">Observación</th>
+        </tr>
+    </thead>
+
+    <tbody>
+        <tr>
+            <td class="subtitle">Módulo Administrativo</td>
+            <td class="subtitle">Módulo Administrativo</td>
+            <td class="subtitle">Módulo Administrativo</td>
+            <td></td>
+        </tr>
+        <tr>
+            <td>✅ Roles y permisos</td>
+            <td>✅ Roles y permisos</td>
+            <td>✅ Roles y permisos</td>
+            <td>Control de accesos y permisos por usuario</td>
+        </tr>
+        <tr>
+            <td>✅ Clientes</td>
+            <td>✅ Clientes</td>
+            <td>✅ Clientes</td>
+            <td>Registro de clientes con datos de contacto</td>
+        </tr>
+        <tr>
+            <td>✅ Proveedores</td>
+            <td>✅ Proveedores</td>
+            <td>✅ Proveedores</td>
+            <td>Gestión de proveedores y datos asociados</td>
+        </tr>
+        <tr>
+            <td>✅ Productos / Servicios</td>
+            <td>✅ Productos / Servicios</td>
+            <td>✅ Productos / Servicios</td>
+            <td>Gestión de productos y servicios con precios y categorías</td>
+        </tr>
+        <tr>
+            <td>✅ Contabilidad</td>
+            <td>✅ Contabilidad</td>
+            <td>✅ Contabilidad</td>
+            <td>Registro contable, ingresos, gastos y utilidades</td>
+        </tr>
+        <tr>
+            <td>✅ Informes contables</td>
+            <td>✅ Informes contables</td>
+            <td>✅ Informes contables</td>
+            <td>Reportes financieros y contables</td>
+        </tr>
+        <tr>
+            <td>✅ Ventas</td>
+            <td>✅ Ventas</td>
+            <td>✅ Ventas</td>
+            <td>Registro y control de ventas</td>
+        </tr>
+        <tr>
+            <td>✅ Informes de ventas</td>
+            <td>✅ Informes de ventas</td>
+            <td>✅ Informes de ventas</td>
+            <td>Reportes por cliente, producto y medio de pago</td>
+        </tr>
+        <tr>
+            <td>✅ Inventarios</td>
+            <td>✅ Inventarios</td>
+            <td>✅ Inventarios</td>
+            <td>Control de inventario por ubicación</td>
+        </tr>
+        <tr>
+            <td>✅ Informes de inventarios</td>
+            <td>✅ Informes de inventarios</td>
+            <td>✅ Informes de inventarios</td>
+            <td>Reportes de stock y movimientos</td>
+        </tr>
+        <tr>
+            <td>✅ Compras</td>
+            <td>✅ Compras</td>
+            <td>✅ Compras</td>
+            <td>Registro de compras y actualización de inventario</td>
+        </tr>
+        <tr>
+            <td>✅ Agenda</td>
+            <td>✅ Agenda</td>
+            <td>✅ Agenda</td>
+            <td>Gestión de agenda por profesional o sede</td>
+        </tr>
+        <tr>
+            <td>✅ Liquidación de profesionales</td>
+            <td>✅ Liquidación de profesionales</td>
+            <td>✅ Liquidación de profesionales</td>
+            <td>Pagos calculados por día, semana o mes</td>
+        </tr>
+
+        <tr>
+            <td class="empty-cell">❌</td>
+            <td class="subtitle">WebApp</td>
+            <td class="subtitle">WebApp</td>
+            <td>Aplicación web para el equipo de trabajo</td>
+        </tr>
+        <tr>
+            <td class="empty-cell">❌</td>
+            <td>✅ Acceso y cuenta</td>
+            <td>✅ Acceso y cuenta</td>
+            <td>Inicio de sesión seguro y recuperación de contraseña</td>
+        </tr>
+        <tr>
+            <td class="empty-cell">❌</td>
+            <td>✅ Gestión diaria de servicios</td>
+            <td>✅ Gestión diaria de servicios</td>
+            <td>Visualización y detalle de servicios agendados</td>
+        </tr>
+        <tr>
+            <td class="empty-cell">❌</td>
+            <td>✅ Control del servicio</td>
+            <td>✅ Control del servicio</td>
+            <td>Estados sincronizados en tiempo real</td>
+        </tr>
+        <tr>
+            <td class="empty-cell">❌</td>
+            <td>✅ Adiciones y observaciones</td>
+            <td>✅ Adiciones y observaciones</td>
+            <td>Registro de notas y servicios adicionales</td>
+        </tr>
+        <tr>
+            <td class="empty-cell">❌</td>
+            <td>✅ Evidencias</td>
+            <td>✅ Evidencias</td>
+            <td>Carga y gestión de evidencias desde la app</td>
+        </tr>
+        <tr>
+            <td class="empty-cell">❌</td>
+            <td>✅ Reportes</td>
+            <td>✅ Reportes</td>
+            <td>Reportes por fecha, estado y profesional</td>
+        </tr>
+        <tr>
+            <td class="empty-cell">❌</td>
+            <td>✅ Experiencia y navegación</td>
+            <td>✅ Experiencia y navegación</td>
+            <td>Interfaz intuitiva y personalizable</td>
+        </tr>
+
+        <tr>
+            <td class="empty-cell">❌</td>
+            <td class="empty-cell">❌</td>
+            <td class="subtitle">Servicio al cliente y postventa</td>
+            <td>Comunicación y seguimiento automatizado</td>
+        </tr>
+        <tr>
+            <td class="empty-cell">❌</td>
+            <td class="empty-cell">❌</td>
+            <td>✅ Agendamiento por WhatsApp y redes sociales</td>
+            <td>Agentes de IA para agendamiento automático</td>
+        </tr>
+        <tr>
+            <td class="empty-cell">❌</td>
+            <td class="empty-cell">❌</td>
+            <td>✅ Confirmación de citas</td>
+            <td>Confirmaciones automáticas por WhatsApp y redes</td>
+        </tr>
+        <tr>
+            <td class="empty-cell">❌</td>
+            <td class="empty-cell">❌</td>
+            <td>✅ Mensajes de salida</td>
+            <td>Mensajes automáticos por WhatsApp y correo</td>
+        </tr>
+
+        <tr>
+            <td>8 horas de capacitación</td>
+            <td>12 horas de capacitación</td>
+            <td>16 horas de capacitación</td>
+            <td></td>
+        </tr>
+
+        <tr>
+            <td colspan="4" style="text-align: center;"
+                >Soporte para todos los planes de lunes a viernes de 8am a 6pm y
+                sábados de 8am a 4pm</td
+            >
+        </tr>
+    </tbody>
+</table>
+
+<style>
+    table {
+        width: 100%;
+        border: var(--detailstable-primaryborder);
+        border-spacing: 0;
+        border-collapse: collapse;
+    }
+
+    th {
+        background-color: var(--detailstable-header-primarybgcolor);
+        color: var(--detailstable-header-txtcolor);
+        font-weight: bold;
+        text-align: center;
+    }
+
+    td,
+    th {
+        padding: 16px 32px;
+    }
+
+    td {
+        color: var(--detailstable-primarytxtcolor);
+    }
+
+    .subtitle {
+        font-weight: bold;
+        text-align: center;
+        color: var(--main-pink-500);
+    }
+
+    .empty-cell {
+        text-align: center;
+        color: var(--light-gray);
+    }
+
+    .first-col {
+        border-top-left-radius: 16px;
+    }
+
+    .last-col {
+        border-top-right-radius: 16px;
+    }
+</style>

src/components/PricingCard.astro

@@ -0,0 +1,149 @@
+---
+export interface PricingCardProps {
+    planType: string;
+    price: string;
+    description: string;
+    featuresTitle: string;
+    featuresDescription: string;
+    buttonText: string;
+    isBestPlan?: boolean;
+}
+
+const {
+    planType,
+    price,
+    description,
+    featuresTitle,
+    featuresDescription,
+    buttonText,
+    isBestPlan,
+} = Astro.props as PricingCardProps;
+---
+
+<div class="pricing-card" data-best-plan={isBestPlan}>
+    <div class="pricing-card-header">
+        <p class="plan-type">{`Plan ${planType}`}</p>
+
+        <div class="price-and-description">
+            <h4 class="price">{price}</h4>
+
+            <h6 class="description">{description}</h6>
+        </div>
+
+        <div class="features">
+            <p class="features-title">¿Qué te incluimos?</p>
+
+            <div class="features-list">
+                <p class="features-subtitle">
+                    <strong>{featuresTitle}</strong>
+                </p>
+
+                <p class="features-description">
+                    {featuresDescription}
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <button class="button call-to-action-button">{buttonText}</button>
+</div>
+
+<style>
+    .pricing-card[data-best-plan="true"] {
+        border: 4px solid var(--primarybutton-bgcolor);
+        height: 750px;
+    }
+
+    .pricing-card {
+        flex: 1;
+        height: 700px;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        border-radius: var(--space-lg-24px);
+        background-color: var(--pricingcard-secundarybgcolor);
+        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
+
+        padding: var(--space-3xl-64px) var(--space-xl-32px);
+        box-sizing: border-box;
+    }
+
+    .pricing-card-header {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-xl-32px);
+    }
+
+    .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;
+    }
+
+    .price-and-description {
+        display: flex;
+        flex-direction: column;
+
+        & .price {
+            color: var(--pricingcard-primarytextcolor);
+        }
+
+        & .description {
+            color: var(--pricingcard-primarytextcolor);
+        }
+    }
+
+    .features {
+        display: flex;
+        flex-direction: column;
+        border-top: 1px solid var(--main-pink-500);
+        border-bottom: 1px solid var(--main-pink-500);
+        padding: var(--padding-lg-24px) 0;
+        gap: var(--space-xl-32px);
+
+        & .features-title {
+            font-weight: bold;
+            color: var(--main-pink-500);
+        }
+
+        & .features-list {
+            display: flex;
+            flex-direction: column;
+            gap: var(--space-sm-8px);
+        }
+
+        & .features-subtitle {
+            color: var(--pricingcard-primarytextcolor);
+        }
+
+        & .features-description {
+            color: var(--pricingcard-primarytextcolor);
+        }
+    }
+
+    .call-to-action-button {
+        height: 42px;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        background-color: var(--primarybutton-bgcolor);
+        border: none;
+        border-radius: var(--space-sm-8px);
+        color: var(--primarybutton-txtcolor);
+        font-family: var(--font-family-primary);
+        font-weight: bold;
+        font-size: var(--font-desktop-h6);
+        line-height: var(--line-height-desktop-h6);
+        cursor: pointer;
+    }
+</style>

src/components/footer/Footer.astro

@@ -123,7 +123,7 @@ import "./footer.css";
             </g>
         </svg>
 
-        <div class="divider"></div>
+        <div class="footer-divider"></div>
 
         <p>&copy; 2026 Naliia. Todos los derechos reservados.</p>
     </div>

src/components/footer/footer.css

@@ -15,7 +15,7 @@
     gap: var(--space-lg-24px);
 }
 
-.divider {
+.footer-divider {
     width: 1px;
     height: 40px;
     background-color: rgba(68, 68, 68, 0.2);

src/pages/index.astro

@@ -20,7 +20,7 @@ import "../styles/index.css";
             <div class="title-and-phrase">
                 <h4>¿Qué ofrecemos?</h4>
 
-                <p>
+                <p class="sections-subtitle">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                     Sint, saepe quisquam deleniti mollitia tempore, laborum
                     neque commodi ipsam nobis placeat.
@@ -80,10 +80,10 @@ import "../styles/index.css";
             <div class="title-and-phrase">
                 <h4>Elige tu plan</h4>
 
-                <p>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                    Nobis labore consequatur reiciendis ullam veritatis
-                    inventore. Molestiae minima ab ut fugiat.
+                <p class="sections-subtitle">
+                    Nuestros planes están diseñados para adaptarse a las
+                    necesidades de tu negocio, ofreciendo flexibilidad y
+                    escalabilidad a medida que creces.
                 </p>
             </div>
 
@@ -259,6 +259,14 @@ import "../styles/index.css";
                     </div>
                 </div>
             </div>
+
+            <p class="important-information">
+                Todos los planes incluyen soporte de lunes a viernes de 8am a
+                6pm y sábados de 8am a 4pm. Además, cada plan cuenta con una
+                cantidad de horas de capacitación, de la siguiente manera: Plan
+                Básico: 8 horas, Plan Intermedio: 12 horas, Plan Avanzado: 16
+                horas.
+            </p>
         </section>
     </section>
 </Layout>

src/pages/pricing.astro

@@ -1,12 +1,70 @@
 ---
 // imports
 import Layout from "../layouts/Layout.astro";
+import InitialSection from "../components/InitialSection.astro";
+import PricingCard from "../components/PricingCard.astro";
+import PlanDetailsTable from "../components/PlanDetailsTable.astro";
+import "../styles/pricingPage.css";
 ---
 
 <Layout pageTitle="Precios y membresías">
-    <h1>Precios y membresías</h1>
-    <p>
-        Aquí encontrarás información sobre los precios y las opciones de
-        membresía disponibles.
-    </p>
+    <section class="pricing-page">
+        <InitialSection
+            imgSrc="/src/assets/imgs/phone_with-stats.svg"
+            imgAlt="Fotografia de un dispositivo móvil flotante con graficas y estadísticas en la pantalla y con un borde amarillo brillante"
+            imgWidth={520}
+            customXPosition="-52%"
+            logoSrc="/src/assets/imgs/logo-naliia.svg"
+            logoAlt="Logo de Naliia"
+            mainTitle="Elige tu plan, impulsa tu negocio"
+            subtitle="El siguiente nivel de tu negocio está a un clic. Elige, empieza y deja que los resultados hablen."
+            autoHeight={true}
+        >
+            <div slot="extraContent">
+                <div class="pricingcards">
+                    <PricingCard
+                        planType="Básico"
+                        price="$100.000 COP"
+                        description="¡Administra tu negocio desde el primer día!"
+                        featuresTitle="Módulo administrativo"
+                        featuresDescription="Centraliza la operación de tu negocio con herramientas administrativas, comerciales y contables que te permiten gestionar clientes, ventas, inventarios, agenda y reportes desde un solo sistema."
+                        buttonText="Elegir Básico"
+                    />
+
+                    <PricingCard
+                        planType="Avanzado"
+                        price="$500.000 COP"
+                        description="El mejor plan todo en uno para el control total de tu negocio."
+                        featuresTitle="Módulo administrativo + web app + Inteligencia artificial"
+                        featuresDescription="Incluye todo lo del Plan Básico, la app web del Plan Intermedio y agentes de inteligencia artificial que automatizan el agendamiento de citas, confirmaciones y mensajes por WhatsApp y otros canales, mejorando la atención al cliente y la postventa."
+                        buttonText="Elegir Avanzado"
+                        isBestPlan={true}
+                    />
+
+                    <PricingCard
+                        planType="Intermedio"
+                        price="$300.000 COP"
+                        description="Más control y colaboración con una web app para tu equipo de trabajo."
+                        featuresTitle="Módulo administrativo + web app"
+                        featuresDescription="Incluye todo lo del Plan Básico, más una aplicación web que permite al equipo acceder a su cuenta, gestionar servicios diarios, registrar avances, observaciones y evidencias, y consultar reportes en tiempo real."
+                        buttonText="Elegir Intermedio"
+                    />
+                </div>
+            </div>
+        </InitialSection>
+
+        <section class="sections">
+            <div class="title-and-phrase">
+                <h4>Detalles de nuestros planes</h4>
+
+                <p class="sections-subtitle">
+                    Todos los detalles de lo que incluye cada uno de nuestros
+                    planes para que puedas elegir el que mejor se adapte a tus
+                    necesidades.
+                </p>
+            </div>
+
+            <PlanDetailsTable />
+        </section>
+    </section>
 </Layout>

src/styles/global.css

@@ -141,7 +141,10 @@
     --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);
+    --primarybutton-bgcolor: var(--main-pink-500);
+    --primarybutton-txtcolor: var(--base-white);
     --pricingcard-bgcolor: var(--dark-gray);
+    --pricingcard-secundarybgcolor: var(--main-mistyRose-500);
     --pricingcard-section-bgcolor: var(--dark-gray);
     --pricingcard-sec-car-bgcolor: var(--light-gray);
     --pricingcard-plantype-bgcolor: var(--main-pink-500);
@@ -149,6 +152,11 @@
     --pricingcard-value-txtcolor: var(--base-white);
     --pricingcard-features-subtitlecolor: var(--main-pink-500);
     --pricingcard-features-txtcolor: var(--base-white);
+    --pricingcard-primarytextcolor: var(--light-gray);
+    --detailstable-header-primarybgcolor: var(--dark-gray);
+    --detailstable-header-txtcolor: var(--base-white);
+    --detailstable-primarytxtcolor: var(--light-gray);
+    --detailstable-primaryborder: 1px solid rgba(68, 68, 68, 0.2);
 
     /* spacing, padding, margin */
     --space-none-0: var(--space-none);

src/styles/index.css

@@ -13,6 +13,12 @@
     padding: 0px 350px;
 }
 
+.sections-subtitle {
+    font-size: var(--font-desktop-base);
+    line-height: var(--line-height-desktop-base);
+    font-weight: bold;
+}
+
 /* ----- Offer section styles ----- */
 .offer-section {
     background-color: transparent;
@@ -291,3 +297,16 @@
         color: var(--pricingcard-value-txtcolor);
     }
 }
+
+.important-information {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding: var(--space-md-16px) var(--space-xl-32px);
+
+    border: 2px solid red;
+    border-radius: var(--space-md-16px);
+
+    font-weight: bold;
+}

src/styles/pricingPage.css

@@ -0,0 +1,52 @@
+.pricing-page {
+    display: flex;
+    overflow-x: hidden;
+    flex-direction: column;
+    gap: 140px;
+    background-color: transparent;
+    margin-bottom: 140px;
+}
+
+.sections {
+    display: flex;
+    flex-direction: column;
+    gap: 48px;
+    padding: 0px 350px;
+}
+
+.sections-subtitle {
+    font-size: var(--font-desktop-base);
+    line-height: var(--line-height-desktop-base);
+    font-weight: bold;
+}
+
+.title-and-phrase {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm-8px);
+    align-items: flex-start;
+}
+
+.pricingcards {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: var(--space-lg-24px);
+}
+
+.plans-details-container {
+    display: flex;
+}
+
+.plan-details {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md-16px);
+}
+
+.plan-title {
+    border: 1px solid black;
+    text-align: center;
+    padding: 24px;
+}