Update uikit and template pages

pull/6101/head
Cagatay Civici 2024-07-23 11:48:52 +03:00
parent 46daca0f48
commit 350cb5805a
14 changed files with 104 additions and 92 deletions

View File

@ -19,6 +19,9 @@
}
}
.template-features a {
@include doc-link();
}
@keyframes p-features-order-animation {
0% {

View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="template-features">
<div v-if="displayType === 'vertical'" class="px-6 py-6 sm:px-10 sm:py-10 lg:py-20 rounded-3xl bg-surface-0 dark:bg-surface-900">
<div class="mx-auto max-w-3xl flex sm:flex-row flex-col items-start gap-6">
<div
@ -16,7 +16,7 @@
<img class="w-full h-auto rounded-lg" :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
</div>
<h2 class="mt-5 mb-0 text-lg text-surface-900 dark:text-surface-0 font-semibold">{{ data.title }}</h2>
<p class="mt-2 mb-0 text-muted-color text-sm">{{ data.description }}</p>
<p class="mt-2 mb-0 text-muted-color" v-html="data.description"></p>
</div>
</template>
</div>
@ -31,7 +31,7 @@
</div>
<div>
<h5 class="text-surface-900 dark:text-surface-0 font-semibold mb-2 text-lg">{{ data.title }}</h5>
<p class="m-0 text-muted-color text-sm">{{ data.description }}</p>
<p class="m-0 text-muted-color" v-html="data.description"></p>
</div>
</div>
</template>

View File

@ -1,5 +1,5 @@
<template>
<div class="px-6 py-6 sm:px-10 sm:py-5 lg:py-20 lg:px-8 rounded-2xl lg:rounded-3xl bg-surface-0 dark:bg-surface-900">
<div class="template-features px-6 py-6 sm:px-10 sm:py-5 lg:py-20 lg:px-8 rounded-2xl lg:rounded-3xl bg-surface-0 dark:bg-surface-900">
<h2 v-if="title" class="text-center text-surface-900 dark:text-surface-0 text-3xl lg:text-5xl font-semibold lg:pt-0 pt-6 mb-12">{{ title }}</h2>
<div
ref="animationRef"

View File

@ -25,11 +25,11 @@
<div class="flex items-center gap-4 mt-6">
<a class="flex items-center gap-2 text-primary-contrast lg:text-base text-sm" :href="templateHeroData.supportHref ?? 'https://github.com/orgs/primefaces/discussions/categories/primevue-templates'" target="_blank">
<i class="pi pi-github" />
<span class="hover:underline">{{ templateHeroData.free ? 'Open Issues' : 'Get Support' }}</span>
<span class="hover:underline">{{ templateHeroData.free ? 'Open Issues' : 'Community' }}</span>
</a>
<a class="flex items-center gap-2 text-primary-contrast lg:text-base text-sm" :href="templateHeroData.docHref" target="_blank">
<i class="pi pi-book" />
<span class="hover:underline">Read Doc</span>
<span class="hover:underline">Documentation</span>
</a>
</div>
</div>

View File

@ -7,12 +7,13 @@
</template>
<script>
import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '../../../components/template/TemplateHero.vue';
import TemplateLicense from '../../../components/template/TemplateLicense.vue';
import ApolloLogo from '../../../components/template/logo/ApolloLogo.vue';
import TemplateConfiguration from '@/components/template/TemplateConfiguration.vue';
import TemplateFeatures from '@/components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '@/components/template/TemplateHero.vue';
import TemplateLicense from '@/components/template/TemplateLicense.vue';
import ApolloLogo from '@/components/template/logo/ApolloLogo.vue';
export default {
data() {
return {
@ -48,13 +49,13 @@ export default {
title: 'Basic License',
price: '$59',
discount: '',
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', '1 Year Free Updates']
},
{
title: 'Extended License',
price: '$590',
discount: '',
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
included: ['Commercial Usage', 'Multiple End Products', '1 Year Free Updates']
}
]
}
@ -213,8 +214,10 @@ export default {
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-responsive.png'
},
{
title: 'Lifetime Support',
description: 'Apollo has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
title: 'Support',
description: `PrimeTek offers assistance with account management and licensing issues, with the expectation that users have the necessary technical knowledge to use our products, as we do not offer technical support or consulting. Users
can seek assistance in our community via our public <a href="https://discord.com/invite/gzKFYnpmCY">Discord</a> and
<a href="https://github.com/orgs/primefaces/discussions/categories/figma-ui-kit" class="doc-link">Forum</a>.`,
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
},
{

View File

@ -7,12 +7,12 @@
</template>
<script>
import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '../../../components/template/TemplateHero.vue';
import TemplateLicense from '../../../components/template/TemplateLicense.vue';
import AtlantisLogo from '../../../components/template/logo/AtlantisLogo.vue';
import TemplateConfiguration from '@/components/template/TemplateConfiguration.vue';
import TemplateFeatures from '@/components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '@/components/template/TemplateHero.vue';
import TemplateLicense from '@/components/template/TemplateLicense.vue';
import AtlantisLogo from '@/components/template/logo/AtlantisLogo.vue';
export default {
data() {
return {

View File

@ -7,12 +7,12 @@
</template>
<script>
import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '../../../components/template/TemplateHero.vue';
import TemplateLicense from '../../../components/template/TemplateLicense.vue';
import AvalonLogo from '../../../components/template/logo/AvalonLogo.vue';
import TemplateConfiguration from '@/components/template/TemplateConfiguration.vue';
import TemplateFeatures from '@/components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '@/components/template/TemplateHero.vue';
import TemplateLicense from '@/components/template/TemplateLicense.vue';
import AvalonLogo from '@/components/template/logo/AvalonLogo.vue';
export default {
data() {

View File

@ -7,12 +7,12 @@
</template>
<script>
import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '../../../components/template/TemplateHero.vue';
import TemplateLicense from '../../../components/template/TemplateLicense.vue';
import DiamondLogo from '../../../components/template/logo/DiamondLogo.vue';
import TemplateConfiguration from '@/components/template/TemplateConfiguration.vue';
import TemplateFeatures from '@/components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '@/components/template/TemplateHero.vue';
import TemplateLicense from '@/components/template/TemplateLicense.vue';
import DiamondLogo from '@/components/template/logo/DiamondLogo.vue';
export default {
data() {

View File

@ -7,12 +7,12 @@
</template>
<script>
import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '../../../components/template/TemplateHero.vue';
import TemplateLicense from '../../../components/template/TemplateLicense.vue';
import FreyaLogo from '../../../components/template/logo/FreyaLogo.vue';
import TemplateConfiguration from '@/components/template/TemplateConfiguration.vue';
import TemplateFeatures from '@/components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '@/components/template/TemplateHero.vue';
import TemplateLicense from '@/components/template/TemplateLicense.vue';
import FreyaLogo from '@/components/template/logo/FreyaLogo.vue';
export default {
data() {

View File

@ -7,12 +7,12 @@
</template>
<script>
import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '../../../components/template/TemplateHero.vue';
import TemplateLicense from '../../../components/template/TemplateLicense.vue';
import PoseidonLogo from '../../../components/template/logo/PoseidonLogo.vue';
import TemplateConfiguration from '@/components/template/TemplateConfiguration.vue';
import TemplateFeatures from '@/components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '@/components/template/TemplateHero.vue';
import TemplateLicense from '@/components/template/TemplateLicense.vue';
import PoseidonLogo from '@/components/template/logo/PoseidonLogo.vue';
export default {
data() {

View File

@ -7,11 +7,11 @@
</template>
<script>
import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '../../../components/template/TemplateHero.vue';
import SakaiLogo from '../../../components/template/logo/SakaiLogo.vue';
import TemplateConfiguration from '@/components/template/TemplateConfiguration.vue';
import TemplateFeatures from '@/components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '@/components/template/TemplateHero.vue';
import SakaiLogo from '@/components/template/logo/SakaiLogo.vue';
export default {
data() {

View File

@ -7,12 +7,12 @@
</template>
<script>
import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '../../../components/template/TemplateHero.vue';
import TemplateLicense from '../../../components/template/TemplateLicense.vue';
import UltimaLogo from '../../../components/template/logo/UltimaLogo.vue';
import TemplateConfiguration from '@/components/template/TemplateConfiguration.vue';
import TemplateFeatures from '@/components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '@/components/template/TemplateHero.vue';
import TemplateLicense from '@/components/template/TemplateLicense.vue';
import UltimaLogo from '@/components/template/logo/UltimaLogo.vue';
export default {
data() {

View File

@ -7,12 +7,12 @@
</template>
<script>
import TemplateConfiguration from '../../../components/template/TemplateConfiguration.vue';
import TemplateFeatures from '../../../components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '../../../components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '../../../components/template/TemplateHero.vue';
import TemplateLicense from '../../../components/template/TemplateLicense.vue';
import VeronaLogo from '../../../components/template/logo/VeronaLogo.vue';
import TemplateConfiguration from '@/components/template/TemplateConfiguration.vue';
import TemplateFeatures from '@/components/template/TemplateFeatures.vue';
import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAnimation.vue';
import TemplateHero from '@/components/template/TemplateHero.vue';
import TemplateLicense from '@/components/template/TemplateLicense.vue';
import VeronaLogo from '@/components/template/logo/VeronaLogo.vue';
export default {
data() {

View File

@ -147,7 +147,9 @@
<div class="card mb-8" style="border-radius: 50px">
<div class="font-bold text-5xl mb-6 text-center">Pricing</div>
<div class="mb-2 text-center leading-normal text-lg">Choose the right plan for your business. Whether you are an individual or a member of a team, UI Kit is available for affordable prices.</div>
<a href="https://www.primefaces.org/uikit/licenses" class="mb-12 doc-link text-center block">View License Details</a>
<div class="text-center mb-8">
<a href="https://www.primefaces.org/uikit/licenses" class="doc-link">View License Details</a>
</div>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 lg:col-span-4">
@ -179,7 +181,7 @@
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Lifetime Support</span>
<span>1 Year Free Updates</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
@ -221,7 +223,7 @@
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Lifetime Support</span>
<span>1 Year Free Updates</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
@ -247,7 +249,7 @@
<ul class="list-none p-0 m-0 grow text-lg">
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span class="font-bold">Unlimited Designers</span>
<span class="font-bold">Custom Team Size</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
@ -263,7 +265,7 @@
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Lifetime Support</span>
<span>1 Year Free Updates</span>
</li>
<li class="flex items-center mb-4">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
@ -282,43 +284,47 @@
<span class="block font-bold text-5xl mb-8 text-center">Frequently Asked Questions</span>
<div class="grid grid-cols-12 gap-4 text-lg">
<div class="col-span-12 lg:col-span-4 px-2 lg:px-8">
<div class="leading-normal mb-2 font-medium">What do I get when I purchase a license?</div>
<div class="leading-normal mb-2 font-bold">What do I get when I purchase a license?</div>
<p class="mt-0 mb-12 p-0 leading-normal">You'll be able to download two Figma files for light and dark themes.</p>
<div class="leading-normal mb-2 font-medium">Is there a recurring fee or is the license perpetual?</div>
<p class="mt-0 mb-12 p-0 leading-normal">UI Kit license is perpetual so requires one time payment, not subscription based.</p>
<div class="leading-normal mb-2 font-bold">Is there a recurring fee or is the license perpetual?</div>
<p class="mt-0 mb-12 p-0 leading-normal">UI Kit license is perpetual so requires one time payment with 1 year free updates, not subscription based.</p>
<div class="leading-normal mb-2 font-medium">Can I use UI Kit license for commercial projects?</div>
<div class="leading-normal mb-2 font-bold">Can I use UI Kit license for commercial projects?</div>
<p class="mt-0 mb-12 p-0 leading-normal">Yes, your license allows you to sell your projects that utilize the UI Kit implementations.</p>
<div class="leading-normal mb-2 font-medium">Can I create multiple projects for multiple clients?</div>
<div class="leading-normal mb-2 font-bold">Can I create multiple projects for multiple clients?</div>
<p class="mt-0 mb-12 p-0 leading-normal">There is no limit, you are able to use UI Kit in multiple projects for multiple clients.</p>
</div>
<div class="col-span-12 lg:col-span-4 px-2 lg:px-8">
<div class="leading-normal mb-2">We're a reseller, are we able to purchase a license on behalf of our client?</div>
<p class="mt-0 mb-12 p-0 leading-normal">Yes, after the purchase, please <a href="mailto:contact@primetek.com.tr" class="doc-link">contact us</a> so we can transfer the license to your client.</p>
<div class="leading-normal mb-2 font-medium">Does the enterprise license include contractors within the organization?</div>
<p class="mt-0 mb-12 p-0 leading-normal">Yes, contractors are also able to use the UI Kit within your company.</p>
<div class="leading-normal mb-2 font-medium">Can subsidiary company of a larger organization share the enterprise license?</div>
<p class="mt-0 mb-12 p-0 leading-normal">No, enterprise license is per company so each subsidiary company needs to purchase a separate license.</p>
<div class="leading-normal mb-2 font-medium">What does "free updates" mean?</div>
<p class="mt-0 mb-12 p-0 leading-normal">All updates will be totally free of charge for existing customers for an unlimited period.</p>
</div>
<div class="col-span-12 lg:col-span-4 px-2 lg:px-8">
<div class="leading-normal mb-2 font-medium">How can I get support?</div>
<div class="leading-normal mb-2 font-bold">What Does "Free Updates" Mean?</div>
<p class="mt-0 mb-12 p-0 leading-normal">
Support is provided by PrimeTek via
<a href="https://github.com/orgs/primefaces/discussions/categories/figma-ui-kit" class="doc-link">a dedicated forum channel monitored</a> by PrimeTek support staff.
All updates are completely free for the first year after your purchase. After this one-year period, you will no longer have access to newer versions. However, all versions released within the first year from your purchase
date will remain accessible to you indefinitely.
</p>
<div class="leading-normal mb-2 font-medium">What does lifetime support mean?</div>
<p class="mt-0 mb-12 p-0 leading-normal">Support service at the forum does not have a time limit.</p>
<div class="leading-normal mb-2 font-bold">How Can I Extend My Access to Updates After One Year?</div>
<p class="mt-0 mb-12 p-0 leading-normal">At PrimeStore, you have the option to purchase an additional update term. This will grant you access to all existing versions and updates for another year.</p>
<div class="leading-normal mb-2 font-medium">Can I include UI Kit in an open source project?</div>
<div class="leading-normal mb-2 font-bold">How can I get support?</div>
<p class="mt-0 mb-12 p-0 leading-normal">
PrimeTek offers assistance with account management and licensing issues, with the expectation that users have the necessary technical knowledge to use our products, as we do not offer technical support or consulting. Users
can seek assistance in our community via our public <a href="https://discord.com/invite/gzKFYnpmCY" class="doc-link">Discord</a> and
<a href="https://github.com/orgs/primefaces/discussions/categories/figma-ui-kit" class="doc-link">Forum</a>.
</p>
</div>
<div class="col-span-12 lg:col-span-4 px-2 lg:px-8">
<div class="leading-normal mb-2 font-bold">Does the enterprise license include contractors within the organization?</div>
<p class="mt-0 mb-12 p-0 leading-normal">Yes, contractors are also able to use the UI Kit within your company within the custom team limit.</p>
<div class="leading-normal mb-2 font-bold">Can subsidiary company of a larger organization share the enterprise license?</div>
<p class="mt-0 mb-12 p-0 leading-normal">No, enterprise license is per company so each subsidiary company needs to purchase a separate license.</p>
<div class="leading-normal mb-2 font-bold">Can I include UI Kit in an open source project?</div>
<p class="mt-0 mb-12 p-0 leading-normal">Due to the license, it is not possible to use the UI Kit in an open source project where the design files are publicly available.</p>
<div class="leading-normal mb-2 font-bold">We're a reseller, are we able to purchase a license on behalf of our client?</div>
<p class="mt-0 mb-12 p-0 leading-normal">Yes, after the purchase, please <a href="mailto:contact@primetek.com.tr" class="doc-link">contact us</a> so we can transfer the license to your client.</p>
</div>
</div>
</div>