Docs for Theme Designer
Cagatay Civici
parent
81a5df370b
commit
acae2c3177
|
|
@ -537,6 +537,21 @@
|
|||
"to": "/uikit",
|
||||
"badge": "NEW"
|
||||
},
|
||||
{
|
||||
"name": "Theme Designer",
|
||||
"icon": "pi pi-sparkles",
|
||||
"badge": "NEW",
|
||||
"children": [
|
||||
{
|
||||
"name": "Overview",
|
||||
"to": "/designer"
|
||||
},
|
||||
{
|
||||
"name": "Guide",
|
||||
"to": "/designer/guide"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Templates",
|
||||
"icon": "pi pi-heart",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Dashboard is the entry point of the designer. The license key can be configured at this view before getting started with the full set of features. In the <b>My Themes</b> section, you're able to create a theme, and manage existing themes.
|
||||
A theme can be renamed, duplicated and downloaded using the <i class="pi pi-ellipsis-h !text-sm"></i> button.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
A license key is required to be able to use all the services provided by the designer. Without a license, the visual editor is still available for trial purposes with various options such as downloads, and cloud storage disabled. The
|
||||
license key can be purchased at
|
||||
<a href="https://primefaces.org/store/designer.xhtml">PrimeStore</a>, it is valid for 1 year and needs to be renewed manually after a year.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Current known technical limitations are listed at this section.</p>
|
||||
<ul class="leading-relaxed list-inside list-disc">
|
||||
<li>The border width token in Figma does not support multiple values, related <a href="https://github.com/tokens-studio/figma-plugin/issues/3237" target="_blank" rel="noopener noreferrer" class="doc-link">issue</a>.</li>
|
||||
</ul>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Prime UI libraries continue to evolve with each version. New tokens are likely to be added with each major release, in order to keep your themes up to date the migration assistant is available featuring automated migration. The
|
||||
<b>Check for Updates</b> option initially scans a theme for any missing tokens. This tool does not override the values of existing tokens, and only adds missing tokens if necessary. Still, it is recommended to duplicate your theme as a
|
||||
backup and run a preview before the migration. Depending on the result, you may choose to proceed with the migration process. In case there are missing tokens, your theme would receive them with placeholder values so it is recommended to
|
||||
take a note of them before migration and then visit the components to replace the placeholder values with actual values of your choice. These types of newly added tokens would be highlighed in Editor.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
The <NuxtLink to="/theming/styled">theming api</NuxtLink> is open and source freely available with an extensive documentation. Theme Designer is a tool build on top of this theming api with important features to make theming easier.
|
||||
Designer consists of 4 key features; The <b>visual editor</b> provides a UI to edit the complete set of tokens. The <b>figma to code</b> generator is extremely useful to automate the design to code process and integrates seamlessly with
|
||||
the Figma UI Kit. The themes are saved in the <b>cloud storage </b>to be accessible from anywhere and any device and finally the <b>migration assistant</b> automatically updates your themes to the latest library version.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
In the new theme section, all of the built-in themes are available to use as the base. These are; <i>Aura</i>, <i>Material</i>, <i>Lara</i> and <i>Nora</i>. Each have their own characteristics, and it is recommended to choose the one that
|
||||
best suits your requirements.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
The <NuxtLink to="uikit">Figma UI Kit</NuxtLink> and the theming api is fully synchorized, meaning the design tokens in Figma map to the CSS variables in the code. The mapping is created via the
|
||||
<a href="https://tokens.studio/" target="_blank" rel="noopener noreferrer">Token Studio</a> at Figma which allows exporting a single json file. The Designer is able to interpret this file and transform it to an actual theme. In case your
|
||||
UI Kit version is older, the transformation process marks the missing tokens and recommends an auto migration via the migration assistant. This is an automated workflow and eliminates the manual design to code during the handoff process.
|
||||
If you have UI designers in your team, the recommended approach is using Figma for the actual design process and utilizing the designer for transformation, preview and download purposes.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Custom tokens allow bringing in your own design tokens to the theme to go beyond the built-in ones. A design token requires a name and a value where the value can be a static value like a color or another token. The name of the token
|
||||
should be a dot seperated lowercase value e.g. <i>accent.color</i>. For example, a custom token name can be defined as <i>accent.color</i> and the value can either be a value like <i>#eab308</i> or another token such as
|
||||
<i>{yellow.50}</i>. Custom tokens can also refer to each other, e.g. <i>selection.background</i> custom token can define <i>{accent.color}</i> as a value.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
The editor is packed with features for improved user experience. The input fields in the editor are capable of displaying a color preview when the value is a color, and beginning the value with a curly brace opens up the autocompletion
|
||||
feature to list the available tokens to choose from. The <i>pi-sort-alt</i> symbol over the input, transfers the token between the common tokens and color scheme specific tokens so that you are able to define tokens based on light and
|
||||
dark mode as well.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
The theming architecture is based on primitive, semantic and components tokens. The visual editor, displays a dedicated section for each set. For basic purposes such as customizing the primary and surface colors, primitive and semantic
|
||||
sections would be more than enough. The component tokens are displayed per route so navigate to the component page first to view the tokens of the specific component.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
The components are not opinionated about the typography. Important properties such as the font family, font size, and line-height do not have design tokens since they can be inherited from the document. For preview purposes, the
|
||||
<i>settings</i> tab displays options to customize the base font and the font family of the document. These values are not available in the generated theme and need to be applied to your application at the document level.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<div>
|
||||
<Head>
|
||||
<Title>Theme Designer - PrimeVue</Title>
|
||||
<Meta name="description" content="Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to code, cloud storage, and migration assistant." />
|
||||
</Head>
|
||||
|
||||
<div class="doc">
|
||||
<div class="doc-main">
|
||||
<div class="doc-intro">
|
||||
<h1>Designer</h1>
|
||||
<p>Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to code, cloud storage, and migration assistant.</p>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
</div>
|
||||
<DocSectionNav :docs="docs" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseDoc from '@/doc/designer/createtheme/BaseDoc.vue';
|
||||
import FigmaDoc from '@/doc/designer/createtheme/FigmaDoc.vue';
|
||||
import DashboardDoc from '@/doc/designer/DashboardDoc.vue';
|
||||
import CustomTokensDoc from '@/doc/designer/editor/CustomTokensDoc.vue';
|
||||
import IntelligentCompletionDoc from '@/doc/designer/editor/IntelligentCompletionDoc.vue';
|
||||
import TokenSetsDoc from '@/doc/designer/editor/TokenSetsDoc.vue';
|
||||
import TypographyDoc from '@/doc/designer/editor/TypographyDoc.vue';
|
||||
import LicenseDoc from '@/doc/designer/LicenseDoc.vue';
|
||||
import LimitationsDoc from '@/doc/designer/LimitationsDoc.vue';
|
||||
import MigrationAssistantDoc from '@/doc/designer/MigrationAssistantDoc.vue';
|
||||
import OverviewDoc from '@/doc/designer/OverviewDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'overview',
|
||||
label: 'Overview',
|
||||
component: OverviewDoc
|
||||
},
|
||||
{
|
||||
id: 'license',
|
||||
label: 'License',
|
||||
component: LicenseDoc
|
||||
},
|
||||
{
|
||||
id: 'dashboard',
|
||||
label: 'Dashboard',
|
||||
component: DashboardDoc
|
||||
},
|
||||
{
|
||||
id: 'create',
|
||||
label: 'Create Theme',
|
||||
description: 'A theme can be initiated from one of the built-in themes or from Figma UI Kit.',
|
||||
children: [
|
||||
{
|
||||
id: 'base',
|
||||
label: 'Base',
|
||||
component: BaseDoc
|
||||
},
|
||||
{
|
||||
id: 'tokensets',
|
||||
label: 'Figma',
|
||||
component: FigmaDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'editor',
|
||||
label: 'Editor',
|
||||
children: [
|
||||
{
|
||||
id: 'tokensets',
|
||||
label: 'Token Sets',
|
||||
component: TokenSetsDoc
|
||||
},
|
||||
{
|
||||
id: 'customtokens',
|
||||
label: 'Custom Tokens',
|
||||
component: CustomTokensDoc
|
||||
},
|
||||
{
|
||||
id: 'autocomplete',
|
||||
label: 'Intelligent Completion',
|
||||
component: IntelligentCompletionDoc
|
||||
},
|
||||
{
|
||||
id: 'typography',
|
||||
label: 'Typography',
|
||||
component: TypographyDoc
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'migration',
|
||||
label: 'Migration Assistant',
|
||||
component: MigrationAssistantDoc
|
||||
},
|
||||
{
|
||||
id: 'limitations',
|
||||
label: 'Limitations',
|
||||
component: LimitationsDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,326 @@
|
|||
<template>
|
||||
<div>
|
||||
<Head>
|
||||
<Title>Theme Designer - PrimeVue</Title>
|
||||
<Meta name="description" content="Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to code, cloud storage, and migration assistant." />
|
||||
</Head>
|
||||
|
||||
<div>
|
||||
<div style="border-radius: 50px; max-height: 500px" class="overflow-hidden mb-8 flex items-center">
|
||||
<img alt="PrimeVue Designer" :src="coverImage" class="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="card !mb-8" style="border-radius: 50px">
|
||||
<div class="flex flex-col md:flex-row items-center gap-6 md:gap-20 mb-20">
|
||||
<div class="w-full md:w-6/12">
|
||||
<img alt="PrimeVue UI Kit" src="https://primefaces.org/cdn/designer/feature-1.png" class="w-full" />
|
||||
</div>
|
||||
<div class="w-full md:w-6/12">
|
||||
<div class="text-primary font-bold mb-2">POWERFUL</div>
|
||||
<div class="text-5xl font-bold mb-4">Visual Editor</div>
|
||||
<p class="mb-4 text-lg">Transform your PrimeVue components with our advanced visual editor. Design, customize, and preview changes in real-time, all within an intuitive interface.</p>
|
||||
|
||||
<ul class="flex flex-wrap m-0 p-0 text-lg">
|
||||
<li class="flex items-center w-6/12 p-4">
|
||||
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
||||
<span class="font-bold">Intelligent Completion</span>
|
||||
</li>
|
||||
<li class="flex items-center w-6/12 p-4">
|
||||
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
||||
<span class="font-bold">Entire Token Set</span>
|
||||
</li>
|
||||
<li class="flex items-center w-6/12 p-4">
|
||||
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
||||
<span class="font-bold">Custom Tokens</span>
|
||||
</li>
|
||||
<li class="flex items-center w-6/12 p-4">
|
||||
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
||||
<span class="font-bold">Light and Dark Modes</span>
|
||||
</li>
|
||||
<li class="flex items-center w-6/12 p-4">
|
||||
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
||||
<span class="font-bold">Real Time Preview</span>
|
||||
</li>
|
||||
<li class="flex items-center w-6/12 p-4">
|
||||
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
||||
<span class="font-bold">Starter Kits</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row items-center gap-6 md:gap-20 mb-20">
|
||||
<div class="w-full md:w-6/12">
|
||||
<div class="text-primary font-bold mb-2">AUTOMATED</div>
|
||||
<div class="text-5xl font-bold mb-4">Figma to Theme</div>
|
||||
<p class="mb-4 text-lg">
|
||||
Bridge the gap between design and development with our powerful Figma sync technology. Fully integrated with the PrimeVue Figma UI Kit, get started in no time by importing your design token file. Save countless hours in
|
||||
your workflow by eliminating manual theme creation from Figma designs.
|
||||
</p>
|
||||
|
||||
<ul class="flex flex-wrap m-0 p-0 text-lg">
|
||||
<li class="flex items-center w-6/12 p-4">
|
||||
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
||||
<span class="font-bold">Automatic Mapping</span>
|
||||
</li>
|
||||
<li class="flex items-center w-6/12 p-4">
|
||||
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
||||
<span class="font-bold">Eliminate Handoff</span>
|
||||
</li>
|
||||
<li class="flex items-center w-6/12 p-4">
|
||||
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
||||
<span class="font-bold">Maintain Perfect Fidelity</span>
|
||||
</li>
|
||||
<li class="flex items-center w-6/12 p-4">
|
||||
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
||||
<span class="font-bold">Verify Synchorization</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-full md:w-6/12">
|
||||
<img alt="PrimeVue Designer" src="https://primefaces.org/cdn/designer/feature-2.png" class="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row items-center gap-6 md:gap-20 mb-20">
|
||||
<div class="w-full md:w-6/12">
|
||||
<img alt="PrimeVue Designer" src="https://primefaces.org/cdn/designer/feature-3.png" class="w-full" />
|
||||
</div>
|
||||
<div class="w-full md:w-6/12">
|
||||
<div class="text-primary font-bold mb-2">INTELLIGENT</div>
|
||||
<div class="text-5xl font-bold mb-4">Migration Assistant</div>
|
||||
<p class="mb-4 text-lg">
|
||||
Update your existing themes and design tokens into the latest version effortlessly. Our intelligent migration assistant handles the heavy lifting, ensuring a smooth transition for your design system.
|
||||
</p>
|
||||
|
||||
<ul class="flex flex-wrap m-0 p-0 text-lg">
|
||||
<li class="flex items-center w-6/12 p-4">
|
||||
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
||||
<span class="font-bold">Automatic Updates</span>
|
||||
</li>
|
||||
<li class="flex items-center w-6/12 p-4">
|
||||
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
||||
<span class="font-bold">Preview Changes</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row items-center gap-6 md:gap-20">
|
||||
<div class="w-full md:w-6/12">
|
||||
<div class="text-primary font-bold mb-2">REMOTE</div>
|
||||
<div class="text-5xl font-bold mb-4">Cloud Storage</div>
|
||||
<p class="mb-4 text-lg">Store and manage your themes securely in the cloud. Access your design system from anywhere with enterprise-grade cloud storage.</p>
|
||||
|
||||
<ul class="flex flex-wrap m-0 p-0 text-lg">
|
||||
<li class="flex items-center w-6/12 p-4">
|
||||
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
||||
<span class="font-bold">Access Anywhere</span>
|
||||
</li>
|
||||
<li class="flex items-center w-6/12 p-4">
|
||||
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
||||
<span class="font-bold">Multiple Themes</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-full md:w-6/12">
|
||||
<img alt="Tokens Support" src="https://primefaces.org/cdn/designer/feature-4.png" class="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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, Designer is available for affordable prices.</div>
|
||||
<div class="text-center mb-8">
|
||||
<a href="https://www.primefaces.org/designer/termsandconditions" 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">
|
||||
<div class="p-4 h-full">
|
||||
<div class="shadow p-8 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
|
||||
<div class="font-medium text-xl mb-2">Basic</div>
|
||||
<div class="text-surface-500 dark:text-surface-400 font-medium">For small teams</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<span class="text-2xl font-bold">$249</span>
|
||||
</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
|
||||
<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>Up to 2 Themes</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>1 Year Service</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Visual Editor</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Migration Assistant</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Use on Unlimited Projects</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700 mt-auto" />
|
||||
<a v-ripple href="https://www.primefaces.org/store/designer.xhtml" class="bg-blue-500 text-white hover:bg-blue-400 p-4 w-full rounded text-center transition-colors duration-300 font-bold p-ripple">Buy Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-4">
|
||||
<div class="p-4 h-full">
|
||||
<div class="shadow p-8 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
|
||||
<div class="font-medium text-xl mb-2">Extended</div>
|
||||
<div class="text-surface-500 dark:text-surface-400 font-medium">For large teams</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<span class="text-2xl font-bold">$1990</span>
|
||||
</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
|
||||
<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">Figma to Code</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Up to 10 Themes</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>1 Year Service</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Visual Editor</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Migration Assistant</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Use on Unlimited Projects</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
|
||||
<a v-ripple href="https://www.primefaces.org/store/designer.xhtml" class="bg-purple-500 text-white hover:bg-purple-400 p-4 w-full rounded text-center transition-colors duration-300 font-bold p-ripple">Buy Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-12 lg:col-span-4">
|
||||
<div class="p-4 h-full">
|
||||
<div class="shadow p-8 flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
|
||||
<div class="font-medium text-xl mb-2">Enterprise</div>
|
||||
<div class="text-surface-500 dark:text-surface-400 font-medium">For custom requirements</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
|
||||
<div class="flex gap-4 flex-wrap">
|
||||
<span class="text-2xl font-bold">EXCLUSIVE DEALS</span>
|
||||
</div>
|
||||
<hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
|
||||
<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">Figma to Code</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Custom Theme Limit</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Multi Year Service</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Visual Editor</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Migration Assistant</span>
|
||||
</li>
|
||||
<li class="flex items-center mb-4">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Use on Unlimited Projects</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
|
||||
<a v-ripple href="mailto:contact@primetek.com.tr" class="bg-gray-500 text-white hover:bg-gray-400 p-4 w-full rounded text-center transition-colors duration-300 font-bold p-ripple">Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="border-radius: 50px">
|
||||
<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-bold">What do I get when I purchase a license?</div>
|
||||
<p class="mt-0 mb-12 p-0 leading-normal">A license key to unlock the features based on your plan.</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">Designer license is annual with no auto renewals.</p>
|
||||
|
||||
<div class="leading-normal mb-2 font-bold">What happens after the 1 year period is concluded?</div>
|
||||
<p class="mt-0 mb-12 p-0 leading-normal">License key will expire and a new license key needs to be purchased to continue using the tool.</p>
|
||||
|
||||
<div class="leading-normal mb-2 font-bold">Can I have trial access to the Designer?</div>
|
||||
<p class="mt-0 mb-12 p-0 leading-normal">Visual Editor is available for trial purposes, various features such as downloads, migration assistant and cloud storage are disabled.</p>
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-4 px-2 lg:px-8">
|
||||
<div class="leading-normal mb-2 font-bold">Can I create multiple themes?</div>
|
||||
<p class="mt-0 mb-12 p-0 leading-normal">Yes, based on the theme limit of your plan.</p>
|
||||
|
||||
<div class="leading-normal mb-2 font-bold">How can I update my theme?</div>
|
||||
<p class="mt-0 mb-12 p-0 leading-normal">Migration Assistant tool automatically scans your theme and adds missing tokens for the latest version.</p>
|
||||
|
||||
<div class="leading-normal mb-2 font-bold">I have purchased the Figma UI Kit, does Designer require a separate purchase?</div>
|
||||
<p class="mt-0 mb-12 p-0 leading-normal">Yes, Figma UI Kit and Designer are different products. The Designer offers Figma to Code generation feature so it is recommended to purchase both for an efficient workflow.</p>
|
||||
|
||||
<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">Is there a limit on the team size within the organization?</div>
|
||||
<p class="mt-0 mb-12 p-0 leading-normal">No, any team member is able to utilize the tool and the generated themes.</p>
|
||||
|
||||
<div class="leading-normal mb-2 font-bold">Can subsidiary company of a larger organization share a license?</div>
|
||||
<p class="mt-0 mb-12 p-0 leading-normal">No, license is per organization so each subsidiary company needs to purchase a separate license.</p>
|
||||
|
||||
<div class="leading-normal mb-2 font-bold">Can I include generated theme in an open source project?</div>
|
||||
<p class="mt-0 mb-12 p-0 leading-normal">Yes, the generated theme is suitable for usage in an open source project.</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, please <a href="mailto:contact@primetek.com.tr" class="doc-link">contact us</a> to initiate the procurement process.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
coverImage() {
|
||||
const image = this.$appState.darkTheme ? 'hero-dark.png' : 'hero.png';
|
||||
|
||||
return 'https://primefaces.org/cdn/designer/' + image;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -7,10 +7,10 @@
|
|||
|
||||
<div>
|
||||
<div style="border-radius: 50px; max-height: 500px" class="overflow-hidden mb-8 flex items-center">
|
||||
<img alt="PrimeVue Designer" :src="coverImage" class="w-full" />
|
||||
<img alt="PrimeVue Figma UI Kit" :src="coverImage" class="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="card mb-8" style="border-radius: 50px">
|
||||
<div class="card !mb-8" style="border-radius: 50px">
|
||||
<div class="flex flex-col md:flex-row items-center gap-6 md:gap-20 mb-20">
|
||||
<div class="w-full md:w-6/12">
|
||||
<img alt="PrimeVue UI Kit" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-figma.png" class="w-full" />
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<div class="card mb-8" style="border-radius: 50px">
|
||||
<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>
|
||||
<div class="text-center mb-8">
|
||||
|
|
@ -342,11 +342,6 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
isDarkTheme() {
|
||||
return this.$appState.darkTheme === true;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
coverImage() {
|
||||
const image = this.$appState.darkTheme ? 'images/uikit/primeone-cover-dark.jpeg' : 'images/uikit/primeone-cover-light.jpeg';
|
||||
|
|
|
|||
Loading…
Reference in New Issue