diff --git a/src/pages/index.astro b/src/pages/index.astro index d273a54..5dd3414 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -87,90 +87,128 @@ import "../styles/index.css";
-

Tipo de plan

+
+

Plan Básico

-
-

$100.000

-

- Lorem ipsum dolor sit amet, consectetur adipisicing - elit. Repudiandae sapiente optio, quisquam ea - placeat architecto dicta, suscipit quasi - necessitatibus neque. -

+
+

$100.000 COP

+

+ Todo lo esencial para administrar tu negocio + desde un solo lugar, con control de clientes, + ventas y operaciones diarias. +

+
+ +
+
Este plan incluye:
+ +
    +
  • Roles y permisos
  • +
  • Administración de Clientes
  • +
  • Administración de Proveedores
  • +
  • Productos/Servicios
  • +
  • Contabilidad
  • +
+ +
+ Ver más características +
    +
  • Informes contables
  • +
  • Ventas
  • +
  • Informes de ventas
  • +
  • Compras
  • +
  • Agenda
  • +
  • Liquidación de profesionales
  • +
+
+
-
-
Características
-
    -
  • Característica #1 del plan
  • -
  • Característica #2 del plan
  • -
  • Característica #3 del plan
  • -
  • Característica #4 del plan
  • -
  • Característica #5 del plan
  • -
-
+
-

Tipo de plan

+
+

Plan Avanzado

-
-

$500.000

-

- Lorem ipsum dolor sit amet, consectetur adipisicing - elit. Repudiandae sapiente optio, quisquam ea - placeat architecto dicta, suscipit quasi - necessitatibus neque. -

+
+

$500.000 COP

+

+ Lorem ipsum dolor sit amet, consectetur + adipisicing elit. Repudiandae sapiente optio, + quisquam ea placeat architecto dicta, suscipit + quasi necessitatibus neque. +

+
+ +
+
Características
+
    +
  • Característica #1 del plan
  • +
  • Característica #2 del plan
  • +
  • Característica #3 del plan
  • +
  • Característica #4 del plan
  • +
  • Característica #5 del plan
  • +
+
-
-
Características
-
    -
  • Característica #1 del plan
  • -
  • Característica #2 del plan
  • -
  • Característica #3 del plan
  • -
  • Característica #4 del plan
  • -
  • Característica #5 del plan
  • -
-
+
-

Tipo de plan

+
+

Plan Intermedio

-
-

$300.000

-

- Lorem ipsum dolor sit amet, consectetur adipisicing - elit. Repudiandae sapiente optio, quisquam ea - placeat architecto dicta, suscipit quasi - necessitatibus neque. -

+
+

$300.000 COP

+

+ Lorem ipsum dolor sit amet, consectetur + adipisicing elit. Repudiandae sapiente optio, + quisquam ea placeat architecto dicta, suscipit + quasi necessitatibus neque. +

+
+ +
+
Características
+
    +
  • Característica #1 del plan
  • +
  • Característica #2 del plan
  • +
  • Característica #3 del plan
  • +
  • Característica #4 del plan
  • +
  • Característica #5 del plan
  • +
+
-
-
Características
-
    -
  • Característica #1 del plan
  • -
  • Característica #2 del plan
  • -
  • Característica #3 del plan
  • -
  • Característica #4 del plan
  • -
  • Característica #5 del plan
  • -
-
+
diff --git a/src/styles/index.css b/src/styles/index.css index 089c605..5daffc4 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -2,7 +2,7 @@ display: flex; overflow-x: hidden; flex-direction: column; - gap: 220px; + gap: 140px; background-color: transparent; } @@ -78,16 +78,33 @@ display: flex; flex-direction: column; + justify-content: space-between; gap: var(--space-2xl-48px); - height: 600px; + min-height: 650px; + width: 380px; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); background-color: #363636; } +.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: 620px; + height: 680px; } .pricing-card .plan-type { @@ -119,9 +136,16 @@ } } +.button-and-link-container { + display: flex; + flex-direction: column; + gap: var(--space-md-16px); + align-items: center; +} + .select-plan-button { height: 42px; - width: auto; + width: 100%; padding: var(--space-sm-8px) var(--space-md-16px); border: none; border-radius: 16px; @@ -134,3 +158,13 @@ display: flex; justify-content: center; } + +.button-and-link-container a { + 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; +}