OneTeam/NaliiaWebsite
16
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign pricing section and improve theming system

Browse Source
This commit is contained in:
Juan Diego Moreno Upegui
2026-02-05 16:10:26 -05:00
parent 83b0461f3b
commit 934d6e5fda
3 changed files with 233 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/styles/index.css
View File

@@ -54,7 +54,7 @@
}
/* ----- Pricing section styles ----- */
.pricing {
.pricing-container {
margin-bottom: 140px;
background-color: transparent;
display: flex;
@@ -122,10 +122,6 @@
p {
color: var(--pricingcard-value-txtcolor);
}
& .price-title {
text-decoration: underline;
}
}
.button-and-link-container {
@@ -197,3 +193,101 @@
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);
}
}