parent
684bfb6ea1
commit
07dbf58b63
|
@ -1506,19 +1506,25 @@
|
||||||
border: 1px solid var(--p-surface-200);
|
border: 1px solid var(--p-surface-200);
|
||||||
background-color: var(--card-background);
|
background-color: var(--card-background);
|
||||||
|
|
||||||
span {
|
&-title {
|
||||||
color: var(--p-surface-900);
|
color: var(--p-surface-900);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
&-pricing {
|
||||||
color: var(--p-surface-900);
|
color: var(--p-surface-900);
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 3rem;
|
line-height: 3rem;
|
||||||
letter-spacing: -0.025rem;
|
letter-spacing: -0.025rem;
|
||||||
margin: 1rem 0 1.25rem;
|
margin: 1rem 0 1.25rem;
|
||||||
|
|
||||||
|
&-discount-active {
|
||||||
|
color: var(--p-surface-600);
|
||||||
|
text-decoration: line-through;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
|
|
@ -4,8 +4,11 @@
|
||||||
<div class="template-license-cards">
|
<div class="template-license-cards">
|
||||||
<template v-for="(detail, index) in license.licenseDetails" :key="index">
|
<template v-for="(detail, index) in license.licenseDetails" :key="index">
|
||||||
<div class="template-license-card">
|
<div class="template-license-card">
|
||||||
<span>{{ detail.title }}</span>
|
<span class="template-license-card-title">{{ detail.title }}</span>
|
||||||
<h2>{{ detail.price }}</h2>
|
<div class="template-license-card-pricing">
|
||||||
|
<span :class="{ 'template-license-card-pricing-discount-active': license.showDiscount }">{{ detail.price }}</span>
|
||||||
|
<span v-if="license.showDiscount">{{ detail.discount }}</span>
|
||||||
|
</div>
|
||||||
<div class="template-license-card-included">
|
<div class="template-license-card-included">
|
||||||
<template v-for="(txt, i) in detail.included" :key="`text_${i}`">
|
<template v-for="(txt, i) in detail.included" :key="`text_${i}`">
|
||||||
<p>{{ txt }}</p>
|
<p>{{ txt }}</p>
|
||||||
|
|
|
@ -220,15 +220,18 @@ export default {
|
||||||
license: {
|
license: {
|
||||||
documentLink: 'https://apollo.primevue.org/documentation/',
|
documentLink: 'https://apollo.primevue.org/documentation/',
|
||||||
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
|
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
|
||||||
|
showDiscount: true,
|
||||||
licenseDetails: [
|
licenseDetails: [
|
||||||
{
|
{
|
||||||
title: 'Basic License',
|
title: 'Basic License',
|
||||||
price: '$59',
|
price: '$59',
|
||||||
|
discount: '$39',
|
||||||
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Extended License',
|
title: 'Extended License',
|
||||||
price: '$590',
|
price: '$590',
|
||||||
|
discount: '$390',
|
||||||
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -208,15 +208,18 @@ export default {
|
||||||
license: {
|
license: {
|
||||||
documentLink: 'https://atlantis.primevue.org/documentation',
|
documentLink: 'https://atlantis.primevue.org/documentation',
|
||||||
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
|
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
|
||||||
|
showDiscount: true,
|
||||||
licenseDetails: [
|
licenseDetails: [
|
||||||
{
|
{
|
||||||
title: 'Basic License',
|
title: 'Basic License',
|
||||||
price: '$59',
|
price: '$59',
|
||||||
|
discount: '$39',
|
||||||
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Extended License',
|
title: 'Extended License',
|
||||||
price: '$590',
|
price: '$590',
|
||||||
|
discount: '$390',
|
||||||
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -207,15 +207,18 @@ export default {
|
||||||
license: {
|
license: {
|
||||||
documentLink: 'https://avalon.primevue.org/documentation',
|
documentLink: 'https://avalon.primevue.org/documentation',
|
||||||
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
|
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
|
||||||
|
showDiscount: true,
|
||||||
licenseDetails: [
|
licenseDetails: [
|
||||||
{
|
{
|
||||||
title: 'Basic License',
|
title: 'Basic License',
|
||||||
price: '$49',
|
price: '$49',
|
||||||
|
discount: '$29',
|
||||||
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Extended License',
|
title: 'Extended License',
|
||||||
price: '$490',
|
price: '$490',
|
||||||
|
discount: '$290',
|
||||||
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -197,15 +197,18 @@ export default {
|
||||||
license: {
|
license: {
|
||||||
documentLink: 'https://diamond.primevue.org/documentation/',
|
documentLink: 'https://diamond.primevue.org/documentation/',
|
||||||
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
|
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
|
||||||
|
showDiscount: true,
|
||||||
licenseDetails: [
|
licenseDetails: [
|
||||||
{
|
{
|
||||||
title: 'Basic License',
|
title: 'Basic License',
|
||||||
price: '$59',
|
price: '$59',
|
||||||
|
discount: '$39',
|
||||||
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Extended License',
|
title: 'Extended License',
|
||||||
price: '$590',
|
price: '$590',
|
||||||
|
discount: '$390',
|
||||||
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -194,15 +194,18 @@ export default {
|
||||||
license: {
|
license: {
|
||||||
documentLink: 'https://freya.primevue.org/documentation',
|
documentLink: 'https://freya.primevue.org/documentation',
|
||||||
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
|
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
|
||||||
|
showDiscount: true,
|
||||||
licenseDetails: [
|
licenseDetails: [
|
||||||
{
|
{
|
||||||
title: 'Basic License',
|
title: 'Basic License',
|
||||||
price: '$59',
|
price: '$59',
|
||||||
|
discount: '$39',
|
||||||
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Extended License',
|
title: 'Extended License',
|
||||||
price: '$590',
|
price: '$590',
|
||||||
|
discount: '$390',
|
||||||
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -172,15 +172,18 @@ export default {
|
||||||
license: {
|
license: {
|
||||||
documentLink: 'https://poseidon.primevue.org/documentation/',
|
documentLink: 'https://poseidon.primevue.org/documentation/',
|
||||||
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
|
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
|
||||||
|
showDiscount: true,
|
||||||
licenseDetails: [
|
licenseDetails: [
|
||||||
{
|
{
|
||||||
title: 'Basic License',
|
title: 'Basic License',
|
||||||
price: '$59',
|
price: '$59',
|
||||||
|
discount: '$39',
|
||||||
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Extended License',
|
title: 'Extended License',
|
||||||
price: '$590',
|
price: '$590',
|
||||||
|
discount: '$390',
|
||||||
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -206,15 +206,18 @@ export default {
|
||||||
license: {
|
license: {
|
||||||
documentLink: 'https://ultima.primevue.org/documentation/',
|
documentLink: 'https://ultima.primevue.org/documentation/',
|
||||||
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
|
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
|
||||||
|
showDiscount: true,
|
||||||
licenseDetails: [
|
licenseDetails: [
|
||||||
{
|
{
|
||||||
title: 'Basic License',
|
title: 'Basic License',
|
||||||
price: '$59',
|
price: '$59',
|
||||||
|
discount: '$39',
|
||||||
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Extended License',
|
title: 'Extended License',
|
||||||
price: '$590',
|
price: '$590',
|
||||||
|
discount: '$390',
|
||||||
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -195,15 +195,18 @@ export default {
|
||||||
license: {
|
license: {
|
||||||
documentLink: 'https://verona.primevue.org/documentation',
|
documentLink: 'https://verona.primevue.org/documentation',
|
||||||
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
|
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
|
||||||
|
showDiscount: true,
|
||||||
licenseDetails: [
|
licenseDetails: [
|
||||||
{
|
{
|
||||||
title: 'Basic License',
|
title: 'Basic License',
|
||||||
price: '$49',
|
price: '$49',
|
||||||
|
discount: '$29',
|
||||||
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Extended License',
|
title: 'Extended License',
|
||||||
price: '$490',
|
price: '$490',
|
||||||
|
discount: '$290',
|
||||||
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -157,7 +157,8 @@
|
||||||
<div class="text-600 font-medium">For individual designers</div>
|
<div class="text-600 font-medium">For individual designers</div>
|
||||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||||
<div class="flex flex-wrap gap-3">
|
<div class="flex flex-wrap gap-3">
|
||||||
<span class="text-2xl font-bold text-900">$99</span>
|
<span class="text-2xl font-bold text-900 line-through text-color-secondary">$99</span>
|
||||||
|
<span class="text-2xl font-bold text-900">$49</span>
|
||||||
</div>
|
</div>
|
||||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||||
<ul class="list-none p-0 m-0 flex-grow-1 text-lg">
|
<ul class="list-none p-0 m-0 flex-grow-1 text-lg">
|
||||||
|
@ -201,7 +202,8 @@
|
||||||
<div class="text-600 font-medium">For small teams</div>
|
<div class="text-600 font-medium">For small teams</div>
|
||||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||||
<div class="flex flex-wrap gap-3">
|
<div class="flex flex-wrap gap-3">
|
||||||
<span class="text-2xl font-bold text-900">$249</span>
|
<span class="text-2xl font-bold text-900 line-through text-color-secondary">$249</span>
|
||||||
|
<span class="text-2xl font-bold text-900">$149</span>
|
||||||
</div>
|
</div>
|
||||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||||
<ul class="list-none p-0 m-0 flex-grow-1 text-lg">
|
<ul class="list-none p-0 m-0 flex-grow-1 text-lg">
|
||||||
|
|
Loading…
Reference in New Issue