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:
@@ -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>
|
||||
Todo lo esencial para administrar tu negocio
|
||||
desde un solo lugar, con control de clientes,
|
||||
ventas y operaciones diarias.
|
||||
</p>
|
||||
<p>Esencial para administrar tu negocio</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>
|
||||
|
||||
Reference in New Issue
Block a user