vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Cosmetics on doc pages

pull/3711/head
Cagatay Civici 2023-03-08 14:32:38 +03:00
parent 3832bd30a4
commit db8b3f19e6
4 changed files with 369 additions and 440 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
pages/roadmap/index.vue
View File

@ -1,25 +1,18 @@
<template> <template>
<div> <div>
<Head> <Head>
<Title>Vue Roadmap</Title> <Title>PrimeVue Roadmap</Title>
<Meta <Meta name="description" content="PrimeVue Roadmap" />
name="description"
content="These are planned to be implemented in parellel to the regular
maintenance work of the PrimeVue library"
/>
</Head> </Head>
<div class="content-section introduction"> <div class="doc-intro">
<div class="feature-intro">
<h1>Roadmap</h1> <h1>Roadmap</h1>
<p> <p>
At <a href="https://www.primetek.com.tr/">PrimeTek</a>, we are passionate about improving PrimeVue and would like to share our ideas for 2023 with the community. These are planned to be implemented in parallel to the regular At <a href="https://www.primetek.com.tr/" class="font-bold hover:underline text-primary">PrimeTek</a>, we are passionate about improving PrimeVue and would like to share our ideas for 2023 with the community. These are planned to be
maintenance work of the library involving review of issue tickets, PRs and PrimeVue PRO support. This page is updated on changes so please visit it to learn more about what is coming up next. implemented in parallel to the regular maintenance work of the library involving review of issue tickets, PRs and PrimeVue PRO support. This page is updated on changes so please visit it to learn more about what is coming up next.
</p> </p>
</div> </div>
</div>
<div class="content-section">
<div class="overflow-auto"> <div class="overflow-auto">
<div style="min-width: 1200px"> <div style="min-width: 1200px">
<div class="flex gap-3 mb-3"> <div class="flex gap-3 mb-3">
@ -41,10 +34,10 @@
</div> </div>
</div> </div>
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid"> <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">Unstyled Mode</h2> <h2 class="text-lg font-bold mt-0 mb-2">Slot Props</h2>
<p class="mt-0 mb-3 line-height-3">Initated the implementation of Unstyled Mode to support libraries like Tailwind.</p> <p class="mt-0 mb-3 line-height-3">Initate the implementation of Slot Props to provide advanced control over component internals.</p>
<div class="surface-200 border-round"> <div class="surface-200 border-round">
<div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-blue-500 border-round" style="width: 25%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
@ -58,7 +51,7 @@
</div> </div>
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid"> <div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">Unstyled Mode</h2> <h2 class="text-lg font-bold mt-0 mb-2">Unstyled Mode</h2>
<p class="mt-0 mb-3 line-height-3">Completed unstyled mode for all components.</p> <p class="mt-0 mb-3 line-height-3">Introduce new unstyled mode to fully support styling with CSS libraries like Tailwind.</p>
<div class="surface-200 border-round"> <div class="surface-200 border-round">
<div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div>
</div> </div>
@ -112,21 +105,21 @@
<h2 class="text-lg font-bold mt-0 mb-2">Nuxt</h2> <h2 class="text-lg font-bold mt-0 mb-2">Nuxt</h2>
<p class="mt-0 mb-3 line-height-3">Migrate showcase application to Nuxt for SSR.</p> <p class="mt-0 mb-3 line-height-3">Migrate showcase application to Nuxt for SSR.</p>
<div class="surface-200 border-round"> <div class="surface-200 border-round">
<div class="bg-teal-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-teal-500 border-round" style="width: 100%; height: 4px"></div>
</div> </div>
</div> </div>
<div class="p-3 surface-card border-round border-teal-500" style="border-left: 6px solid"> <div class="p-3 surface-card border-round border-teal-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">Demos</h2> <h2 class="text-lg font-bold mt-0 mb-2">Demos</h2>
<p class="mt-0 mb-3 line-height-3">Standalone demos for each component feature instead of one demo page that demonstrates multiple features.</p> <p class="mt-0 mb-3 line-height-3">Standalone demos for each component feature instead of one demo page that demonstrates multiple features.</p>
<div class="surface-200 border-round"> <div class="surface-200 border-round">
<div class="bg-teal-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-teal-500 border-round" style="width: 100%; height: 4px"></div>
</div> </div>
</div> </div>
<div class="p-3 surface-card border-round border-teal-500" style="border-left: 6px solid"> <div class="p-3 surface-card border-round border-teal-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">Documentation</h2> <h2 class="text-lg font-bold mt-0 mb-2">Documentation</h2>
<p class="mt-0 mb-3 line-height-3">New component API docs generated by TSDoc.</p> <p class="mt-0 mb-3 line-height-3">New component API docs generated by TSDoc.</p>
<div class="surface-200 border-round"> <div class="surface-200 border-round">
<div class="bg-teal-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-teal-500 border-round" style="width: 100%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
@ -174,11 +167,11 @@
</div> </div>
</div> </div>
<div class="flex gap-3 border-bottom-1 surface-border pb-3"> <div class="flex gap-3 border-bottom-1 surface-border pb-3">
<div class="flex-shrink-0 p-3 bg-pink-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Designer</div> <div class="flex-shrink-0 p-3 bg-pink-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Styling</div>
<div class="flex-1 flex gap-3 flex-column"> <div class="flex-1 flex gap-3 flex-column">
<div class="p-3 surface-card border-round border-pink-500" style="border-left: 6px solid"> <div class="p-3 surface-card border-round border-pink-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">New Free Theme</h2> <h2 class="text-lg font-bold mt-0 mb-2">Open Source Designer</h2>
<p class="mt-0 mb-3 line-height-3">A brand new theme with dark mode alternative.</p> <p class="mt-0 mb-3 line-height-3">Open source the sass based theming api and the visual designer.</p>
<div class="surface-200 border-round"> <div class="surface-200 border-round">
<div class="bg-pink-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-pink-500 border-round" style="width: 0%; height: 4px"></div>
</div> </div>
@ -186,8 +179,15 @@
</div> </div>
<div class="flex-1 flex gap-3 flex-column"> <div class="flex-1 flex gap-3 flex-column">
<div class="p-3 surface-card border-round border-pink-500" style="border-left: 6px solid"> <div class="p-3 surface-card border-round border-pink-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">Figma Plugin Compatibility</h2> <h2 class="text-lg font-bold mt-0 mb-2">CSS Variables</h2>
<p class="mt-0 mb-3 line-height-3">Online service to the Figma UI Kit to generate themes from Figma.</p> <p class="mt-0 mb-3 line-height-3">Migrate to CSS variables for a dynamic approach.</p>
<div class="surface-200 border-round">
<div class="bg-pink-500 border-round" style="width: 0%; height: 4px"></div>
</div>
</div>
<div class="p-3 surface-card border-round border-pink-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">New UI Based Theme Editor</h2>
<p class="mt-0 mb-3 line-height-3">Advanced Theme Editor with full control over the Theming API.</p>
<div class="surface-200 border-round"> <div class="surface-200 border-round">
<div class="bg-pink-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-pink-500 border-round" style="width: 0%; height: 4px"></div>
</div> </div>
@ -203,21 +203,21 @@
<h2 class="text-lg font-bold mt-0 mb-2">Apollo</h2> <h2 class="text-lg font-bold mt-0 mb-2">Apollo</h2>
<p class="mt-0 mb-3 line-height-3">Port Apollo from PrimeNG using Vite.</p> <p class="mt-0 mb-3 line-height-3">Port Apollo from PrimeNG using Vite.</p>
<div class="surface-200 border-round"> <div class="surface-200 border-round">
<div class="bg-purple-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-purple-500 border-round" style="width: 100%; height: 4px"></div>
</div> </div>
</div> </div>
<div class="p-3 surface-card border-round border-purple-500" style="border-left: 6px solid"> <div class="p-3 surface-card border-round border-purple-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">Migrate to Vite</h2> <h2 class="text-lg font-bold mt-0 mb-2">Migrate to Vite</h2>
<p class="mt-0 mb-3 line-height-3">Initiate migration of templates to Vite.</p> <p class="mt-0 mb-3 line-height-3">Initiate migration of templates to Vite.</p>
<div class="surface-200 border-round"> <div class="surface-200 border-round">
<div class="bg-purple-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-purple-500 border-round" style="width: 10%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-1 flex gap-3 flex-column"> <div class="flex-1 flex gap-3 flex-column">
<div class="p-3 surface-card border-round border-purple-500" style="border-left: 6px solid"> <div class="p-3 surface-card border-round border-purple-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">Migrate to Vite</h2> <h2 class="text-lg font-bold mt-0 mb-2">Migrate to Vite</h2>
<p class="mt-0 mb-3 line-height-3">Continue migration of templates to Vite.</p> <p class="mt-0 mb-3 line-height-3">Finish migration of templates to Vite.</p>
<div class="surface-200 border-round"> <div class="surface-200 border-round">
<div class="bg-purple-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-purple-500 border-round" style="width: 0%; height: 4px"></div>
</div> </div>
@ -230,5 +230,4 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>

278
pages/support/index.vue
View File

@ -1,215 +1,145 @@
<template> <template>
<div> <div>
<div class="content-section">
<img alt="PRO Support" src="https://primefaces.org/cdn/primevue/images/support/support-header.png" class="w-full block mb-5" style="border-radius: 20px" /> <img alt="PRO Support" src="https://primefaces.org/cdn/primevue/images/support/support-header.png" class="w-full block mb-5" style="border-radius: 20px" />
<div class="flex flex-column xl:flex-row mb-5 gap-5"> <div class="flex flex-column xl:flex-row mb-5 gap-5">
<div class="card xl:w-3 m-0 relative overflow-hidden"> <div class="card xl:w-3 m-0 relative overflow-hidden">
<i class="pi pi-github absolute text-200" style="bottom: -50px; right: -50px; font-size: 200px; transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg)"></i> <i class="pi pi-github absolute text-200" style="bottom: -50px; right: -50px; font-size: 200px; transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg)"></i>
<div class="text-xl text-900 font-semibold mb-3 relative">Community Support</div> <div class="text-xl text-900 font-semibold mb-3 relative">Community Support</div>
<p class="m-0 line-height-3 relative"> <p class="m-0 line-height-3 relative text-lg text-800">
<a href="https://forum.primefaces.org/viewforum.php?f=110" class="font-bold hover:underline text-primary">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="font-bold hover:underline text-primary">Discord</a> are <a href="https://forum.primefaces.org/viewforum.php?f=110" class="font-bold hover:underline text-primary">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="font-bold hover:underline text-primary">Discord</a> are where
where the community users gather to seek support, post topics and discuss the technology. GitHub issue tracker is the channel where community users can create tickets however PrimeTek does not guarantee a response time the community users gather to seek support, post topics and discuss the technology. GitHub issue tracker is the channel where community users can create tickets however PrimeTek does not guarantee a response time although they are
although they are monitored and maintained by our staff. If you need to secure our response within 1 business day, you may consider PRO support instead. monitored and maintained by our staff. If you need to secure our response within 1 business day, you may consider PRO support instead.
</p> </p>
</div> </div>
<div class="card m-0 xl:w-9 text-white bg-cover" style="background-image: url('https://primefaces.org/cdn/primevue/images/support/card-pro.jpg')"> <div class="card m-0 xl:w-9 text-white bg-cover" style="background-image: url('https://primefaces.org/cdn/primevue/images/support/card-pro.jpg')">
<div class="text-xl font-semibold mb-3">PRO Support</div> <div class="text-xl font-semibold mb-3">PRO Support</div>
<p class="m-0 line-height-3"> <p class="m-0 line-height-3 text-lg">
With PRO support, it's easy to support, tune and add features to PrimeVue as if it were an in- house library. PRO is a term based commercial support service. With the exclusive services of PRO account, it is no longer needed With PRO support, it's easy to support, tune and add features to PrimeVue as if it were an in- house library. PRO is a term based commercial support service. With the exclusive services of PRO account, it is no longer needed to
to post questions in community forum and issue reports to community issue tracker at GitHub. A JIRA account will be created to the customer by PrimeTek, this account can be shared between any number of users within your post questions in community forum and issue reports to community issue tracker at GitHub. A JIRA account will be created to the customer by PrimeTek, this account can be shared between any number of users within your organization.
organization.
</p> </p>
</div> </div>
</div> </div>
<div class="grid mb-5">
<div class="col-12 md:col-6 xl:col-3">
<div class="card m-0 flex-1 h-full">
<div class="text-xl text-900 font-semibold mb-3">Free</div>
<p class="m-0 line-height-3 mb-3 text-secondary">Community Support</p>
<a href="https://discord.com/invite/gzKFYnpmCY" class="flex align-items-center justify-content-center border-1 border-indigo-500 border-round block p-3 mb-4 text-indigo-500 font-medium hover:surface-hover">Join Now</a>
<ul class="list-none p-0 m-0">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span>GitHub Issue Tracker</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span>Community Forum</span>
</li>
<li class="flex align-items-center">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span>PrimeLand Discord Server</span>
</li>
</ul>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3">
<div class="card m-0 flex-1 h-full">
<div class="text-xl text-900 font-semibold mb-3">Standard</div>
<p class="m-0 line-height-3 mb-3 text-secondary">1 Year Subscription</p>
<a
href="mailto:primevue@primetek.com.tr"
class="flex align-items-center justify-content-center border-1 bg-indigo-500 border-round block p-3 mb-4 hover:bg-indigo-600 transition-all transition-duration-300 text-white font-medium"
>Get a Quote</a
>
<ul class="list-none p-0 m-0">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span>Access to Private JIRA</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span>Response within 1 business day</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span><strong>10</strong> Issue Tickets</span>
</li>
<li class="flex align-items-center">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span>Access to LTS Releases</span>
</li>
</ul>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3">
<div class="card m-0 flex-1 h-full">
<div class="text-xl text-900 font-semibold mb-3">Premium</div>
<p class="m-0 line-height-3 mb-3 text-secondary">1 Year Subscription</p>
<a
href="mailto:primevue@primetek.com.tr"
class="flex align-items-center justify-content-center border-1 bg-indigo-500 border-round block p-3 mb-4 hover:bg-indigo-600 transition-all transition-duration-300 text-white font-medium"
>Get a Quote</a
>
<ul class="list-none p-0 m-0">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span>Access to Private JIRA</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span>Response within 1 business day</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span><strong>30</strong> Issue Tickets</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span>Access to LTS Releases</span>
</li>
<li class="flex align-items-center">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span>Theme Designer - Extended License</span>
</li>
</ul>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3">
<div class="card m-0 flex-1 border-2 border-indigo-500 h-full">
<div class="text-xl text-900 font-semibold mb-3">Enterprise</div>
<p class="m-0 line-height-3 mb-3 text-secondary">1 Year Subscription</p>
<a
href="mailto:primevue@primetek.com.tr"
class="flex align-items-center justify-content-center border-1 bg-indigo-500 border-round block p-3 mb-4 hover:bg-indigo-600 transition-all transition-duration-300 text-white font-medium"
>Get a Quote</a
>
<ul class="list-none p-0 m-0">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span>Access to Private JIRA</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span>Response within 1 business day</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span><strong>Unlimited</strong> Issue Tickets</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span>Access to LTS Releases</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span>Theme Designer - Extended License</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span>PrimeBlocks - Enterprise License</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span>PrimeBlocks - Enterprise License</span>
</li>
<li class="flex align-items-center">
<i class="pi pi-check-circle mr-2 text-green-500"></i>
<span>Figma UI Kit - Enterprise License</span>
</li>
</ul>
</div>
</div>
</div>
<div class="card mb-5"> <div class="card mb-5">
<div class="text-xl text-900 font-semibold mb-3">Enhancement Credits</div> <div class="flex flex-wrap align-items-center justify-content-between gap-3">
<p class="m-0 line-height-3 mb-5 text-secondary"> <div>
New features and enhancement requests are not available in core services and provided via a credit based model instead named PrimeCredit. When you have a feature request, we offer an initial estimate in terms of credits and once <div class="text-2xl text-900 font-semibold mb-3">Enterprise Support</div>
this estimate is confirmed by you then implementation will be delivered by our team within an estimated timeframe. <p class="m-0 line-height-3 mb-5 text-secondary text-lg text-800">1 Year Subscription</p>
</div>
<a
href="mailto:primereact@primetek.com.tr"
class="flex align-items-center justify-content-center border-1 bg-indigo-500 border-round block p-3 mb-4 hover:bg-indigo-600 transition-all transition-duration-300 text-white font-medium text-lg"
>
Get a Quote
</a>
</div>
<div class="flex flex-wrap -mt-3 gap-3 text-800">
<ul class="flex-auto list-none p-0 m-0 text-lg p-3">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-3 text-green-500"></i>
<span class="line-height-3">Access to Private JIRA</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-3 text-green-500"></i>
<span class="line-height-3">Response within 1 business day</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-3 text-green-500"></i>
<span class="line-height-3">Unlimited Issue Tickets</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-3 text-green-500"></i>
<span class="line-height-3">Conference Calls</span>
</li>
</ul>
<ul class="flex-auto list-none p-0 m-0 text-lg p-3">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-3 text-green-500"></i>
<span class="line-height-3">Maintenance for Any Version</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-3 text-green-500"></i>
<span class="line-height-3">PrimeBlocks - Enterprise License</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-3 text-green-500"></i>
<span class="line-height-3">Figma UI Kit - Enterprise License</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-3 text-green-500"></i>
<span class="line-height-3">1 Premium Template - Extended License</span>
</li>
</ul>
<ul class="flex-auto list-none p-0 m-0 text-lg p-3">
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-3 text-green-500"></i>
<span class="line-height-3">Visual Theme Builder (Soon)</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-3 text-green-500"></i>
<span class="line-height-3">Figma to Theme Generator (Soon)</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle mr-3 text-green-500"></i>
<span class="line-height-3">PrimeIcons PRO - (Soon)</span>
</li>
</ul>
</div>
</div>
<div class="card mb-5">
<div class="text-2xl text-900 font-semibold mb-3">Enhancement Credits</div>
<p class="m-0 line-height-3 mb-5 text-secondary text-lg text-800">
New features and enhancement requests are not available in core services and provided via a credit based model instead named PrimeCredit. When you have a feature request, we offer an initial estimate in terms of credits and once this
estimate is confirmed by you then implementation will be delivered by our team within an estimated timeframe.
</p> </p>
<div class="flex flex-column md:flex-row gap-5"> <div class="flex flex-column md:flex-row gap-5">
<div class="flex-1"> <div class="flex-1">
<div class="text-900 font-semibold mb-2">New Components</div> <div class="text-xl text-900 font-semibold mb-2 text-xl">New Components</div>
<p class="m-0 line-height-3 mb-3 text-secondary">Brand new components you need that are not already available in the existing UI suite.</p> <p class="m-0 line-height-3 mb-3 text-secondary text-lg text-800">Brand new components you need that are not already available in the existing UI suite.</p>
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="text-900 font-semibold mb-2">New Features</div> <div class="text-xl text-900 font-semibold mb-2 text-xl">New Features</div>
<p class="m-0 line-height-3 mb-3 text-secondary">Enhancements to the components you need such as new properties, events and templating.</p> <p class="m-0 line-height-3 mb-3 text-secondary text-lg text-800">Enhancements to the components you need such as new properties, events and templating.</p>
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="text-900 font-semibold mb-2">UX Customization</div> <div class="text-xl text-900 font-semibold mb-2 text-xl">UX Customization</div>
<p class="m-0 line-height-3 mb-3 text-secondary">Behavioral changes to the existing components.</p> <p class="m-0 line-height-3 mb-3 text-secondary text-lg text-800">Behavioral changes to the existing components.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="card m-0"> <div class="card m-0">
<div class="text-xl text-900 font-semibold mb-3">Frequently Asked Questions</div> <div class="text-2xl text-900 font-semibold mb-5">Frequently Asked Questions</div>
<div class="grid"> <div class="flex flex-wrap text-lg -ml-5 -mt-5">
<div class="col-12 lg:col-4"> <div class="w-full lg:w-4 p-5">
<div class="text-900 line-height-3 mb-2 font-medium">What are the conditions for support service to end?</div> <div class="text-xl text-900 line-height-3 mb-2 font-medium">What is the duration of the service?</div>
<p class="mt-0 mb-6 p-0 line-height-3 text-secondary">Support service ends either after 1 year end for all plans or when all tickets are used in Standard or Premium plans.</p> <p class="mt-0 mb-5 p-0 line-height-3 text-800">Support service is for one year.</p>
<div class="text-900 line-height-3 mb-2 font-medium">Is there a plan with no ticket limit?</div> <div class="text-xl text-900 line-height-3 mb-2 font-medium">How many JIRA accounts do we get?</div>
<p class="mt-0 mb-6 p-0 line-height-3 text-secondary">Yes, Enterprise plan has no limitation on the number tickets.</p> <p class="mt-0 mb-5 p-0 line-height-3 text-800">We provide one shared account per organization that any number of members in your organization can use it.</p>
<div class="text-900 line-height-3 mb-2 font-medium">What happens if we extend after 1 year and we have unused tickets?</div> <div class="text-xl text-900 line-height-3 mb-2 font-medium">What happens if we extend after 1 year and we have unused tickets?</div>
<p class="mt-0 mb-6 p-0 line-height-3 text-secondary">Unused tickets expire and cannot be transferred to the new subscription.</p> <p class="mt-0 p-0 line-height-3 text-800">Unused tickets expire and cannot be transferred to the new subscription.</p>
</div> </div>
<div class="col-12 lg:col-4"> <div class="w-full lg:w-4 p-5">
<div class="text-900 line-height-3 mb-2 font-medium">When can we purchase PrimeCredits for feature development?</div> <div class="text-xl text-900 line-height-3 mb-2 font-medium">When can we purchase PrimeCredits for feature development?</div>
<p class="mt-0 mb-6 p-0 line-height-3 text-secondary">PrimeCredits can be purchased anytime during an active subscription.</p> <p class="mt-0 mb-5 p-0 line-height-3 text-800">PrimeCredits can be purchased anytime during an active subscription.</p>
<div class="text-900 line-height-3 mb-2 font-medium">Are all of our requests guaranteed to be implemented with PrimeCredits?</div> <div class="text-xl text-900 line-height-3 mb-2 font-medium">Are all of our requests guaranteed to be implemented with PrimeCredits?</div>
<p class="mt-0 mb-6 p-0 line-height-3 text-secondary">No, PrimeTek does not guarantee the implementation so it is suggested to confirm with us before purchasing credits.</p> <p class="mt-0 mb-5 p-0 line-height-3 text-800">No, PrimeTek does not guarantee the implementation so it is suggested to confirm with us before purchasing credits.</p>
<div class="text-900 line-height-3 mb-2 font-medium">Can we get PrimeCredits without PRO support?</div> <div class="text-900 line-height-3 mb-2 font-medium">Can we get PrimeCredits without PRO support?</div>
<p class="mt-0 mb-6 p-0 line-height-3 text-secondary">No, feature development is exclusive to PRO members.</p> <p class="mt-0 p-0 line-height-3 text-800">No, feature development is exclusive to PRO members.</p>
</div> </div>
<div class="col-12 lg:col-4"> <div class="w-full lg:w-4 p-5">
<div class="text-900 line-height-3 mb-2 font-medium">Is there a limit on developers in our organization who can use the service?</div> <div class="text-xl text-900 line-height-3 mb-2 font-medium">Is there a limit on developers in our organization who can use the service?</div>
<p class="mt-0 mb-6 p-0 line-height-3 text-secondary">PRO is per organization so there is no limit on the number of developers.</p> <p class="mt-0 mb-5 p-0 line-height-3 text-800">PRO is per organization so there is no limit on the number of developers.</p>
<div class="text-900 line-height-3 mb-2 font-medium">How many JIRA accounts do we get?</div> <div class="text-xl text-900 line-height-3 mb-2 font-medium">What is not covered by PRO?</div>
<p class="mt-0 mb-6 p-0 line-height-3 text-secondary">We provide one shared account per organization that any number of members in your organization can use it.</p> <p class="mt-0 p-0 line-height-3 text-800">As PRO support focuses on the library, application consulting and code reviews are out of scope.</p>
<div class="text-900 line-height-3 mb-2 font-medium">What is not covered by PRO?</div>
<p class="mt-0 mb-6 p-0 line-height-3 text-secondary">As PRO support focuses on the library, application consulting and code reviews out of scope.</p>
</div>
</div> </div>
</div> </div>
</div> </div>

2
pages/templates/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="content-section"> <div>
<div class="doc-intro"> <div class="doc-intro">
<h1>Templates</h1> <h1>Templates</h1>
<p>Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.</p> <p>Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.</p>

62
pages/uikit/index.vue
View File

@ -5,7 +5,7 @@
<Meta name="description" content="Design files for PrimeVue Components." /> <Meta name="description" content="Design files for PrimeVue Components." />
</Head> </Head>
<div class="content-section"> <div>
<div style="border-radius: 50px; max-height: 500px" class="overflow-hidden mb-5 flex align-items-center"> <div style="border-radius: 50px; max-height: 500px" class="overflow-hidden mb-5 flex align-items-center">
<img alt="PrimeVue Designer" :src="coverImage" class="w-full" /> <img alt="PrimeVue Designer" :src="coverImage" class="w-full" />
</div> </div>
@ -18,9 +18,9 @@
<div class="w-full md:w-6"> <div class="w-full md:w-6">
<div class="text-primary font-bold mb-2">UP-TO-DATE</div> <div class="text-primary font-bold mb-2">UP-TO-DATE</div>
<div class="text-900 text-5xl font-bold mb-3">Best Features of Figma</div> <div class="text-900 text-5xl font-bold mb-3">Best Features of Figma</div>
<p class="mb-3">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> <p class="mb-3 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>
<ul class="flex flex-wrap m-0 p-0"> <ul class="flex flex-wrap m-0 p-0 text-lg">
<li class="flex align-items-center w-6 p-3"> <li class="flex align-items-center w-6 p-3">
<i class="pi pi-check-circle text-green-600 mr-2"></i> <i class="pi pi-check-circle text-green-600 mr-2"></i>
<span class="font-bold">Auto Layout</span> <span class="font-bold">Auto Layout</span>
@ -48,9 +48,9 @@
<div class="w-full md:w-6"> <div class="w-full md:w-6">
<div class="text-primary font-bold mb-2">ENTERPRISE GRADE</div> <div class="text-primary font-bold mb-2">ENTERPRISE GRADE</div>
<div class="text-900 text-5xl font-bold mb-3">Powerful System</div> <div class="text-900 text-5xl font-bold mb-3">Powerful System</div>
<p class="mb-3">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> <p class="mb-3 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>
<ul class="flex flex-wrap m-0 p-0"> <ul class="flex flex-wrap m-0 p-0 text-lg">
<li class="flex align-items-center w-6 p-3"> <li class="flex align-items-center w-6 p-3">
<i class="pi pi-check-circle text-green-600 mr-2"></i> <i class="pi pi-check-circle text-green-600 mr-2"></i>
<span class="font-bold">Numerous Components</span> <span class="font-bold">Numerous Components</span>
@ -80,9 +80,9 @@
<div class="w-full md:w-6"> <div class="w-full md:w-6">
<div class="text-primary font-bold mb-2">DARK MODE</div> <div class="text-primary font-bold mb-2">DARK MODE</div>
<div class="text-900 text-5xl font-bold mb-3">Two Themes</div> <div class="text-900 text-5xl font-bold mb-3">Two Themes</div>
<p class="mb-3">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> <p class="mb-3 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>
<ul class="flex flex-wrap m-0 p-0"> <ul class="flex flex-wrap m-0 p-0 text-lg">
<li class="flex align-items-center w-6 p-3"> <li class="flex align-items-center w-6 p-3">
<i class="pi pi-check-circle text-green-600 mr-2"></i> <i class="pi pi-check-circle text-green-600 mr-2"></i>
<span class="font-bold">Lara Light</span> <span class="font-bold">Lara Light</span>
@ -117,7 +117,7 @@
<div class="card mb-5" style="border-radius: 50px"> <div class="card mb-5" style="border-radius: 50px">
<div class="text-900 font-bold text-5xl mb-4 text-center">Pricing</div> <div class="text-900 font-bold text-5xl mb-4 text-center">Pricing</div>
<div class="mb-2 text-center line-height-3">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="mb-2 text-center line-height-3 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-6 text-primary-500 no-underline hover:underline text-center block">View Licence Details</a> <a href="https://www.primefaces.org/uikit/licenses" class="mb-6 text-primary-500 no-underline hover:underline text-center block">View Licence Details</a>
<div class="grid"> <div class="grid">
@ -132,7 +132,7 @@
<span v-if="pricing.single.new" :class="pricing.single.new.class ? pricing.single.new.class : ''">{{ pricing.single.new.value || '' }}</span> <span v-if="pricing.single.new" :class="pricing.single.new.class ? pricing.single.new.class : ''">{{ pricing.single.new.value || '' }}</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"> <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
<li class="flex align-items-center mb-3"> <li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i> <i class="pi pi-check-circle text-green-500 mr-2"></i>
<span class="font-bold">1 Designer</span> <span class="font-bold">1 Designer</span>
@ -173,7 +173,7 @@
<span v-if="pricing.team.new" :class="pricing.team.new.class ? pricing.team.new.class : ''">{{ pricing.team.new.value || '' }}</span> <span v-if="pricing.team.new" :class="pricing.team.new.class ? pricing.team.new.class : ''">{{ pricing.team.new.value || '' }}</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"> <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
<li class="flex align-items-center mb-3"> <li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i> <i class="pi pi-check-circle text-green-500 mr-2"></i>
<span class="font-bold">Up to 5 Designers</span> <span class="font-bold">Up to 5 Designers</span>
@ -213,7 +213,7 @@
<span v-if="pricing.enterprise.new" :class="pricing.enterprise.new.class ? pricing.enterprise.new.class : ''">{{ pricing.enterprise.new.value || '' }}</span> <span v-if="pricing.enterprise.new" :class="pricing.enterprise.new.class ? pricing.enterprise.new.class : ''">{{ pricing.enterprise.new.value || '' }}</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"> <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
<li class="flex align-items-center mb-3"> <li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i> <i class="pi pi-check-circle text-green-500 mr-2"></i>
<span class="font-bold">Unlimited Designers</span> <span class="font-bold">Unlimited Designers</span>
@ -247,44 +247,44 @@
<span class="block font-bold text-5xl mb-5 text-center text-900">Frequently Asked Questions</span> <span class="block font-bold text-5xl mb-5 text-center text-900">Frequently Asked Questions</span>
<div class="grid"> <div class="grid">
<div class="col-12 lg:col-4 px-2 lg:px-5"> <div class="col-12 lg:col-4 px-2 lg:px-5">
<div class="text-xl text-900 line-height-3 mb-2 text-900">What do I get when I purchase a license?</div> <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">What do I get when I purchase a license?</div>
<p class="mt-0 mb-6 p-0 line-height-3">You'll be able to download two Figma files for light and dark themes.</p> <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">You'll be able to download two Figma files for light and dark themes.</p>
<div class="text-xl text-900 line-height-3 mb-2 text-900">Is there a recurring fee or is the license perpetual?</div> <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">Is there a recurring fee or is the license perpetual?</div>
<p class="mt-0 mb-6 p-0 line-height-3">UI Kit license is perpetual so requires one time payment, not subscription based.</p> <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">UI Kit license is perpetual so requires one time payment, not subscription based.</p>
<div class="text-xl text-900 line-height-3 mb-2 text-900">Can I use UI Kit license for commercial projects?</div> <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">Can I use UI Kit license for commercial projects?</div>
<p class="mt-0 mb-6 p-0 line-height-3">Yes, your license allows you to sell your projects that utilize the UI Kit implementations.</p> <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">Yes, your license allows you to sell your projects that utilize the UI Kit implementations.</p>
<div class="text-xl text-900 line-height-3 mb-2 text-900">Can I create multiple projects for multiple clients?</div> <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">Can I create multiple projects for multiple clients?</div>
<p class="mt-0 mb-6 p-0 line-height-3">There is no limit, you are able to use UI Kit in multiple projects for multiple clients.</p> <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">There is no limit, you are able to use UI Kit in multiple projects for multiple clients.</p>
</div> </div>
<div class="col-12 lg:col-4 px-2 lg:px-5"> <div class="col-12 lg:col-4 px-2 lg:px-5">
<div class="text-xl text-900 line-height-3 mb-2 text-900">We're a reseller, are we able to purchase a license on behalf of our client?</div> <div class="text-xl text-900 line-height-3 mb-2 text-900">We're a reseller, are we able to purchase a license on behalf of our client?</div>
<p class="mt-0 mb-6 p-0 line-height-3"> <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">
Yes, after the purchase, please <a href="mailto:contact@primetek.com.tr" class="text-primary-500 no-underline hover:underline">contact us</a> so we can transfer the license to your client. Yes, after the purchase, please <a href="mailto:contact@primetek.com.tr" class="text-primary-500 no-underline hover:underline">contact us</a> so we can transfer the license to your client.
</p> </p>
<div class="text-xl text-900 line-height-3 mb-2 text-900">Does the enterprise license include contractors within the organization?</div> <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">Does the enterprise license include contractors within the organization?</div>
<p class="mt-0 mb-6 p-0 line-height-3">Yes, contractors are also able to use the UI Kit within your company.</p> <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">Yes, contractors are also able to use the UI Kit within your company.</p>
<div class="text-xl text-900 line-height-3 mb-2 text-900">Can subsidiary company of a larger organization share the enterprise license?</div> <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">Can subsidiary company of a larger organization share the enterprise license?</div>
<p class="mt-0 mb-6 p-0 line-height-3">No, enterprise license is per company so each subsidiary company needs to purchase a separate license.</p> <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">No, enterprise license is per company so each subsidiary company needs to purchase a separate license.</p>
<div class="text-xl text-900 line-height-3 mb-2 text-900">What does "free updates" mean?</div> <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">What does "free updates" mean?</div>
<p class="mt-0 mb-6 p-0 line-height-3">All updates will be totally free of charge for existing customers for an unlimited period.</p> <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">All updates will be totally free of charge for existing customers for an unlimited period.</p>
</div> </div>
<div class="col-12 lg:col-4 px-2 lg:px-5"> <div class="col-12 lg:col-4 px-2 lg:px-5">
<div class="text-xl text-900 line-height-3 mb-2 text-900">How can I get support?</div> <div class="text-xl text-900 line-height-3 mb-2 text-900">How can I get support?</div>
<p class="mt-0 mb-6 p-0 line-height-3"> <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">
Support is provided by PrimeTek via <a href="https://forum.primefaces.org/viewforum.php?f=159" class="text-primary-500 no-underline hover:underline">a dedicated forum channel monitored</a> by PrimeTek support staff. Support is provided by PrimeTek via <a href="https://forum.primefaces.org/viewforum.php?f=159" class="text-primary-500 no-underline hover:underline">a dedicated forum channel monitored</a> by PrimeTek support staff.
</p> </p>
<div class="text-xl text-900 line-height-3 mb-2 text-900">What does lifetime support mean?</div> <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">What does lifetime support mean?</div>
<p class="mt-0 mb-6 p-0 line-height-3">Support service at the forum does not have a time limit.</p> <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-800">Support service at the forum does not have a time limit.</p>
<div class="text-xl text-900 line-height-3 mb-2 text-900">Can I include UI Kit in an open source project?</div> <div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">Can I include UI Kit in an open source project?</div>
<p class="mt-0 mb-6 p-0 line-height-3">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> <p class="mt-0 mb-6 p-0 line-height-3 text-lg text-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>
</div> </div>
</div> </div>
</div> </div>