Juan Diego Moreno Upegui
f22055f388
- 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
313 lines
6.4 KiB
CSS
313 lines
6.4 KiB
CSS
.homepage {
|
|
display: flex;
|
|
overflow-x: hidden;
|
|
flex-direction: column;
|
|
gap: 140px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* ----- Offer section styles ----- */
|
|
.offer-section {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.title-and-phrase {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm-8px);
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.cards-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-lg-24px);
|
|
}
|
|
|
|
.offer-card {
|
|
border: var(--main-border);
|
|
border-radius: var(--space-lg-24px);
|
|
|
|
height: 200px;
|
|
padding: var(--space-3xl-64px);
|
|
|
|
display: flex;
|
|
|
|
background-image: url("../assets/imgs/img-preview.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: right;
|
|
background-size: contain;
|
|
}
|
|
|
|
.card-content {
|
|
max-width: 500px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md-16px);
|
|
}
|
|
|
|
/* ----- Pricing section styles ----- */
|
|
.pricing-container {
|
|
margin-bottom: 140px;
|
|
background-color: transparent;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2xl-48px);
|
|
padding: 0px 350px;
|
|
}
|
|
|
|
.pricing-cards-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: var(--space-lg-24px);
|
|
}
|
|
|
|
.best-plan-card {
|
|
border-top-left-radius: var(--space-2xl-48px);
|
|
border-top-right-radius: var(--space-2xl-48px);
|
|
|
|
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;
|
|
border-top-left-radius: var(--space-2xl-48px);
|
|
|
|
& .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;
|
|
}
|
|
|
|
& a {
|
|
color: var(--pricingcard-value-txtcolor);
|
|
}
|
|
}
|
|
|
|
.price-and-description {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
& h4,
|
|
h6,
|
|
p {
|
|
color: var(--pricingcard-value-txtcolor);
|
|
}
|
|
}
|
|
|
|
.button-and-link-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md-16px);
|
|
align-items: center;
|
|
}
|
|
|
|
.select-plan-button {
|
|
height: 42px;
|
|
width: 100%;
|
|
padding: var(--space-sm-8px) var(--space-md-16px);
|
|
border: none;
|
|
border-radius: 16px;
|
|
background-color: #e54c75;
|
|
font-family: var(--font-family-primary);
|
|
font-size: var(--font-desktop-h6);
|
|
font-weight: bold;
|
|
color: white;
|
|
cursor: pointer;
|
|
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);
|
|
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);
|
|
}
|
|
}
|
|
|
|
.basic-mid-plans-container {
|
|
display: flex;
|
|
width: 100%;
|
|
gap: var(--space-lg-24px);
|
|
box-sizing: border-box;
|
|
|
|
& .pricing-card {
|
|
height: 300px;
|
|
display: flex;
|
|
gap: var(--space-lg-24px);
|
|
|
|
padding: var(--space-xl-32px);
|
|
background-color: var(--pricingcard-sec-car-bgcolor);
|
|
}
|
|
}
|
|
|
|
.mid-plan {
|
|
width: 60%;
|
|
border-bottom-left-radius: var(--space-2xl-48px);
|
|
|
|
& .price-container {
|
|
height: 100%;
|
|
width: 50%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
& .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;
|
|
|
|
& h5,
|
|
h6,
|
|
p {
|
|
color: var(--pricingcard-value-txtcolor);
|
|
}
|
|
}
|
|
|
|
& a {
|
|
color: var(--pricingcard-value-txtcolor);
|
|
}
|
|
}
|
|
|
|
.basic-plan {
|
|
width: 40%;
|
|
border-bottom-right-radius: var(--space-2xl-48px);
|
|
|
|
& .price-container {
|
|
height: 100%;
|
|
width: 50%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
& .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;
|
|
|
|
& h5,
|
|
h6,
|
|
p {
|
|
color: var(--pricingcard-value-txtcolor);
|
|
}
|
|
}
|
|
|
|
& a {
|
|
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;
|
|
}
|