2022-09-09 20:41:18 +00:00
|
|
|
<template>
|
|
|
|
|
<div>
|
2022-12-19 11:57:07 +00:00
|
|
|
<Head>
|
|
|
|
|
<Title>UI Kit - PrimeVue</Title>
|
|
|
|
|
<Meta name="description" content="Design files for PrimeVue Components." />
|
|
|
|
|
</Head>
|
|
|
|
|
|
2023-03-08 11:32:38 +00:00
|
|
|
<div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div style="border-radius: 50px; max-height: 500px" class="overflow-hidden mb-8 flex items-center">
|
2022-12-08 12:26:57 +00:00
|
|
|
<img alt="PrimeVue Designer" :src="coverImage" class="w-full" />
|
|
|
|
|
</div>
|
2022-09-09 20:41:18 +00:00
|
|
|
|
2024-05-20 12:04:10 +00:00
|
|
|
<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">
|
2023-02-22 08:51:53 +00:00
|
|
|
<img alt="PrimeVue UI Kit" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-figma.png" class="w-full" />
|
2022-09-09 20:41:18 +00:00
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="w-full md:w-6/12">
|
2022-12-08 12:26:57 +00:00
|
|
|
<div class="text-primary font-bold mb-2">UP-TO-DATE</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="text-surface-900 text-5xl font-bold mb-4">Best Features of Figma</div>
|
|
|
|
|
<p class="mb-4 text-lg">PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles and interactive components. It'll always follow the best practices.</p>
|
2022-09-09 20:41:18 +00:00
|
|
|
|
2023-03-08 11:32:38 +00:00
|
|
|
<ul class="flex flex-wrap m-0 p-0 text-lg">
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center w-6/12 p-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
|
|
|
|
<span class="font-bold">Auto Layout</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center w-6/12 p-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
|
|
|
|
<span class="font-bold">Variants</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center w-6/12 p-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
|
|
|
|
<span class="font-bold">Styles</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center w-6/12 p-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
|
|
|
|
<span class="font-bold">Interactive Components</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center w-6/12 p-4">
|
2023-02-22 08:51:53 +00:00
|
|
|
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
|
|
|
|
<span class="font-bold">Boolean, Instance Swap and Text Properties</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center w-6/12 p-4">
|
2023-07-31 10:21:32 +00:00
|
|
|
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
|
|
|
|
<span class="font-bold">Nested Instances</span>
|
|
|
|
|
</li>
|
2022-12-08 12:26:57 +00:00
|
|
|
</ul>
|
2022-09-09 20:41:18 +00:00
|
|
|
</div>
|
2022-12-08 12:26:57 +00:00
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<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">
|
2022-12-08 12:26:57 +00:00
|
|
|
<div class="text-primary font-bold mb-2">ENTERPRISE GRADE</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="text-surface-900 text-5xl font-bold mb-4">Powerful System</div>
|
|
|
|
|
<p class="mb-4 text-lg">Save countless hours on every project with a carefully designed system that uses Prime UI Suite components. Start producing design results in no time.</p>
|
2022-09-09 20:41:18 +00:00
|
|
|
|
2023-03-08 11:32:38 +00:00
|
|
|
<ul class="flex flex-wrap m-0 p-0 text-lg">
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center w-6/12 p-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
|
|
|
|
<span class="font-bold">Numerous Components</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center w-6/12 p-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
|
|
|
|
<span class="font-bold">Icon Library</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center w-6/12 p-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
|
|
|
|
<span class="font-bold">Easy Customization</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center w-6/12 p-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
|
|
|
|
<span class="font-bold">Atomic Approach</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="w-full md:w-6/12">
|
2023-02-06 14:59:12 +00:00
|
|
|
<img alt="PrimeVue Designer" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png" class="w-full" />
|
2022-09-09 20:41:18 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<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">
|
2023-02-06 14:59:12 +00:00
|
|
|
<img alt="PrimeVue Designer" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-themes.png" class="w-full" />
|
2022-12-08 12:26:57 +00:00
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="w-full md:w-6/12">
|
2022-12-08 12:26:57 +00:00
|
|
|
<div class="text-primary font-bold mb-2">DARK MODE</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="text-surface-900 text-5xl font-bold mb-4">Two Themes</div>
|
|
|
|
|
<p class="mb-4 text-lg">PrimeOne is designed based on Lara Blue Light and Lara Blue Dark themes. Easily change the themes of your designs using Figma's Swap Library feature.</p>
|
2022-09-09 20:41:18 +00:00
|
|
|
|
2023-03-08 11:32:38 +00:00
|
|
|
<ul class="flex flex-wrap m-0 p-0 text-lg">
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center w-6/12 p-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
|
|
|
|
<span class="font-bold">Lara Light</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center w-6/12 p-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
|
|
|
|
<span class="font-bold">Lara Dark</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
2022-09-14 14:26:41 +00:00
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="flex flex-col md:flex-row items-center gap-6 md:gap-20">
|
|
|
|
|
<div class="w-full md:w-6/12">
|
2023-07-31 10:21:32 +00:00
|
|
|
<div class="text-primary font-bold mb-2">TOKENS STUDIO</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="text-surface-900 text-5xl font-bold mb-4">Tokens Support</div>
|
|
|
|
|
<p class="mb-4 text-lg">Empower yourself with unprecedented control over your designs. Tokens Studio integration unlocks a whole new level of flexibility, allowing you to create and manage design tokens seamlessly.</p>
|
2023-07-31 10:21:32 +00:00
|
|
|
|
|
|
|
|
<ul class="flex flex-wrap m-0 p-0 text-lg">
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center w-6/12 p-4">
|
2023-07-31 10:21:32 +00:00
|
|
|
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
|
|
|
|
<span class="font-bold">Countless Design Tokens</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center w-6/12 p-4">
|
2023-07-31 10:21:32 +00:00
|
|
|
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
|
|
|
|
<span class="font-bold">Light and Dark Sets</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center w-full p-4">
|
2023-07-31 10:21:32 +00:00
|
|
|
<i class="pi pi-check-circle text-green-600 mr-2"></i>
|
|
|
|
|
<span class="font-bold">Well Documented</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="w-full md:w-6/12">
|
2023-07-31 10:21:32 +00:00
|
|
|
<img alt="Tokens Support" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-tokens.png" class="w-full" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-12-08 12:26:57 +00:00
|
|
|
</div>
|
2022-09-09 20:41:18 +00:00
|
|
|
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="flex flex-col md:flex-row gap-6 md:gap-20 mb-8">
|
2022-12-08 12:26:57 +00:00
|
|
|
<a
|
2023-12-11 09:46:19 +00:00
|
|
|
href="https://www.figma.com/file/96Tql1EywmMtVlSFTkQ2MB/Preview-%7C-PrimeOne-%7C-2.2.0?type=design&node-id=806%3A36648&mode=design&t=CPR8n1g9WLc5D2Hs-1"
|
2024-05-20 12:04:10 +00:00
|
|
|
class="p-8 w-full md:w-6/12 bg-white flex flex-col items-center border-2 border-transparent hover:border-primary transition-colors duration-300"
|
2022-12-08 12:26:57 +00:00
|
|
|
style="border-radius: 50px"
|
|
|
|
|
>
|
2024-05-20 12:04:10 +00:00
|
|
|
<span class="text-gray-900 text-4xl font-bold mb-8">Preview Light</span>
|
|
|
|
|
<img alt="Figma Light" src="https://primefaces.org/cdn/primevue/images/uikit/logo-figma-light.svg" class="w-16" />
|
2022-12-08 12:26:57 +00:00
|
|
|
</a>
|
|
|
|
|
<a
|
2023-12-11 09:46:19 +00:00
|
|
|
href="https://www.figma.com/file/ujRD6FFCWw1bE0h4wIebxl/Preview-%7C-Dark-%7C-PrimeOne-%7C-2.2.0?type=design&node-id=806%3A36648&mode=design&t=bG7aorZhOFIqX1qz-1"
|
2024-05-20 12:04:10 +00:00
|
|
|
class="p-8 w-full md:w-6/12 bg-gray-900 flex flex-col items-center border-2 border-transparent hover:border-primary transition-colors duration-300"
|
2022-12-08 12:26:57 +00:00
|
|
|
style="border-radius: 50px"
|
|
|
|
|
>
|
2024-05-20 12:04:10 +00:00
|
|
|
<span class="text-white text-4xl font-bold mb-8">Preview Dark</span>
|
|
|
|
|
<img alt="Figma Dark" src="https://primefaces.org/cdn/primevue/images/uikit/logo-figma-dark.svg" class="w-16" />
|
2022-12-08 12:26:57 +00:00
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="card mb-8" style="border-radius: 50px">
|
|
|
|
|
<div class="text-surface-900 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>
|
2022-09-09 20:41:18 +00:00
|
|
|
|
2024-05-20 12:04:10 +00:00
|
|
|
<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="text-surface-900 font-medium text-xl mb-2">Single Designer</div>
|
|
|
|
|
<div class="text-surface-600 font-medium">For individual designers</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 text-surface-900 line-through text-surface-500 dark:text-surface-400">$99</span>
|
|
|
|
|
<span class="text-2xl font-bold text-surface-900">$49</span>
|
2022-09-09 20:41:18 +00:00
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
|
2024-05-18 08:24:55 +00:00
|
|
|
<ul class="list-none p-0 m-0 flex-grow-1 text-lg">
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span class="font-bold">1 Designer</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span>Auto Layout & Variants</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span>Interactive Components</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2023-07-31 10:21:32 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span>Tokens Studio Support</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span>Lifetime Support</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span>Use on Unlimited Projects</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
2024-05-20 12:04:10 +00:00
|
|
|
<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/uikit.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"
|
2022-12-08 12:26:57 +00:00
|
|
|
>Buy Now</a
|
|
|
|
|
>
|
2022-09-09 20:41:18 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-12-08 12:26:57 +00:00
|
|
|
</div>
|
2022-09-09 20:41:18 +00:00
|
|
|
|
2024-05-20 12:04:10 +00:00
|
|
|
<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="text-surface-900 font-medium text-xl mb-2">Team</div>
|
|
|
|
|
<div class="text-surface-600 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 text-surface-900 line-through text-surface-500 dark:text-surface-400">$249</span>
|
|
|
|
|
<span class="text-2xl font-bold text-surface-900">$149</span>
|
2022-09-09 20:41:18 +00:00
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
|
2024-05-18 08:24:55 +00:00
|
|
|
<ul class="list-none p-0 m-0 flex-grow-1 text-lg">
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span class="font-bold">Up to 5 Designers</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span>Auto Layout & Variants</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span>Interactive Components</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2023-07-31 10:21:32 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span>Tokens Studio Support</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span>Lifetime Support</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span>Use on Unlimited Projects</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
2024-05-20 12:04:10 +00:00
|
|
|
<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/uikit.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"
|
2022-12-08 12:26:57 +00:00
|
|
|
>Buy Now</a
|
|
|
|
|
>
|
2022-09-09 20:41:18 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-12-08 12:26:57 +00:00
|
|
|
</div>
|
2022-09-09 20:41:18 +00:00
|
|
|
|
2024-05-20 12:04:10 +00:00
|
|
|
<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="text-surface-900 font-medium text-xl mb-2">Enterprise</div>
|
|
|
|
|
<div class="text-surface-600 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 gap-4 flex-wrap">
|
|
|
|
|
<span class="text-2xl font-bold text-surface-900">EXCLUSIVE DEALS</span>
|
2022-09-09 20:41:18 +00:00
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
|
2024-05-18 08:24:55 +00:00
|
|
|
<ul class="list-none p-0 m-0 flex-grow-1 text-lg">
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span class="font-bold">Unlimited Designers</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span>Auto Layout & Variants</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span>Interactive Components</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2023-07-31 10:21:32 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span>Tokens Studio Support</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span>Lifetime Support</span>
|
|
|
|
|
</li>
|
2024-05-20 12:04:10 +00:00
|
|
|
<li class="flex items-center mb-4">
|
2022-12-08 12:26:57 +00:00
|
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
|
|
|
<span>Use on Unlimited Projects</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
2024-05-20 12:04:10 +00:00
|
|
|
<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>
|
2022-09-09 20:41:18 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-12-08 12:26:57 +00:00
|
|
|
</div>
|
2022-09-09 20:41:18 +00:00
|
|
|
|
2022-12-08 12:26:57 +00:00
|
|
|
<div class="card" style="border-radius: 50px">
|
2024-05-20 12:04:10 +00:00
|
|
|
<span class="block font-bold text-5xl mb-8 text-center text-surface-900">Frequently Asked Questions</span>
|
|
|
|
|
<div class="grid grid-cols-12 gap-4">
|
|
|
|
|
<div class="col-span-12 lg:col-span-4 px-2 lg:px-8">
|
|
|
|
|
<div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">What do I get when I purchase a license?</div>
|
|
|
|
|
<p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">You'll be able to download two Figma files for light and dark themes.</p>
|
2022-09-09 20:41:18 +00:00
|
|
|
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">Is there a recurring fee or is the license perpetual?</div>
|
|
|
|
|
<p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">UI Kit license is perpetual so requires one time payment, not subscription based.</p>
|
2022-09-09 20:41:18 +00:00
|
|
|
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">Can I use UI Kit license for commercial projects?</div>
|
|
|
|
|
<p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">Yes, your license allows you to sell your projects that utilize the UI Kit implementations.</p>
|
2022-09-09 20:41:18 +00:00
|
|
|
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">Can I create multiple projects for multiple clients?</div>
|
|
|
|
|
<p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">There is no limit, you are able to use UI Kit in multiple projects for multiple clients.</p>
|
2022-12-08 12:26:57 +00:00
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="col-span-12 lg:col-span-4 px-2 lg:px-8">
|
|
|
|
|
<div class="text-xl text-surface-900 leading-normal mb-2 text-surface-900">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 text-lg text-surface-800">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>
|
2022-09-09 20:41:18 +00:00
|
|
|
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">Does the enterprise license include contractors within the organization?</div>
|
|
|
|
|
<p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">Yes, contractors are also able to use the UI Kit within your company.</p>
|
2022-09-09 20:41:18 +00:00
|
|
|
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">Can subsidiary company of a larger organization share the enterprise license?</div>
|
|
|
|
|
<p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">No, enterprise license is per company so each subsidiary company needs to purchase a separate license.</p>
|
2022-09-09 20:41:18 +00:00
|
|
|
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">What does "free updates" mean?</div>
|
|
|
|
|
<p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">All updates will be totally free of charge for existing customers for an unlimited period.</p>
|
2022-12-08 12:26:57 +00:00
|
|
|
</div>
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="col-span-12 lg:col-span-4 px-2 lg:px-8">
|
|
|
|
|
<div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">How can I get support?</div>
|
|
|
|
|
<p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">
|
2023-11-20 08:29:44 +00:00
|
|
|
Support is provided by PrimeTek via
|
2023-12-31 08:35:02 +00:00
|
|
|
<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.
|
2022-12-08 12:26:57 +00:00
|
|
|
</p>
|
2022-09-09 20:41:18 +00:00
|
|
|
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">What does lifetime support mean?</div>
|
|
|
|
|
<p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">Support service at the forum does not have a time limit.</p>
|
2022-09-09 20:41:18 +00:00
|
|
|
|
2024-05-20 12:04:10 +00:00
|
|
|
<div class="text-xl text-surface-900 leading-normal mb-2 font-medium text-surface-900">Can I include UI Kit in an open source project?</div>
|
|
|
|
|
<p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">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>
|
2022-09-09 20:41:18 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-12-08 12:26:57 +00:00
|
|
|
</div>
|
2022-09-09 20:41:18 +00:00
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
methods: {
|
|
|
|
|
isDarkTheme() {
|
|
|
|
|
return this.$appState.darkTheme === true;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
coverImage() {
|
2023-07-31 10:21:32 +00:00
|
|
|
const image = this.$appState.darkTheme ? 'images/uikit/primeone-cover-dark.jpeg' : 'images/uikit/primeone-cover-light.jpeg';
|
2023-02-28 08:29:30 +00:00
|
|
|
|
2023-02-22 08:51:53 +00:00
|
|
|
return 'https://primefaces.org/cdn/primevue/' + image;
|
2022-09-09 20:41:18 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
