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

Migrated pages

pull/5806/head
Cagatay Civici 2024-05-20 15:04:10 +03:00
parent ba8aea6797
commit 7ca3bc6844
7 changed files with 386 additions and 386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/introduction/index.vue
View File

@ -6,7 +6,7 @@
<div class="doc"> <div class="doc">
<div class="doc-main"> <div class="doc-main">
<div class="doc-intro"> <div class="doc-intro">
<div style="border-radius: 20px; max-height: 640px" class="overflow-hidden mb-5 flex align-items-center"> <div style="border-radius: 20px; max-height: 640px" class="overflow-hidden mb-8 flex items-center">
<img alt="PrimeVue Designer" :src="introDesktopImg" class="w-full hidden md:block" /> <img alt="PrimeVue Designer" :src="introDesktopImg" class="w-full hidden md:block" />
<img alt="PrimeVue Designer" :src="introMobileImg" class="w-full md:hidden" /> <img alt="PrimeVue Designer" :src="introMobileImg" class="w-full md:hidden" />
</div> </div>

2
pages/playground/index.vue
View File

@ -11,7 +11,7 @@
<h1>Playground</h1> <h1>Playground</h1>
<p>Experience PrimeVue right now with the interactive environment.</p> <p>Experience PrimeVue right now with the interactive environment.</p>
</div> </div>
<section class="py-4"> <section class="py-6">
<iframe class="w-full h-full" style="border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; min-height: 800px" allowfullscreen src="https://stackblitz.com/edit/vitejs-vite-bpqpcf?file=src%2FApp.vue&embed=1"></iframe> <iframe class="w-full h-full" style="border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; min-height: 800px" allowfullscreen src="https://stackblitz.com/edit/vitejs-vite-bpqpcf?file=src%2FApp.vue&embed=1"></iframe>
</section> </section>
</div> </div>

210
pages/roadmap/index.vue
View File

@ -15,177 +15,177 @@
<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-4 mb-4">
<div class="flex-shrink-0 w-14rem"></div> <div class="flex-shrink-0 w-56"></div>
<div class="flex-1 bg-gray-500 text-white font-bold text-center p-3 text-xl border-round">Q1</div> <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q1</div>
<div class="flex-1 bg-gray-500 text-white font-bold text-center p-3 text-xl border-round">Q2</div> <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q2</div>
<div class="flex-1 bg-gray-500 text-white font-bold text-center p-3 text-xl border-round">Q3</div> <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q3</div>
<div class="flex-1 bg-gray-500 text-white font-bold text-center p-3 text-xl border-round">Q4</div> <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q4</div>
</div> </div>
<div class="flex flex-column gap-3"> <div class="flex flex-col gap-4">
<div class="flex gap-3 border-bottom-1 surface-border pb-3"> <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="flex-shrink-0 p-3 bg-blue-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">COMPONENTS</div> <div class="flex-shrink-0 p-4 bg-blue-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">COMPONENTS</div>
<div class="flex-1 flex gap-3 flex-column"> <div class="flex-1 flex gap-4 flex-col">
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">New Styled Mode</h2> <h2 class="text-lg font-bold mt-0 mb-2">New Styled Mode</h2>
<p class="mt-0 mb-3 line-height-3">Move theming into core to replace sass repo.</p> <p class="mt-0 mb-4 leading-normal">Move theming into core to replace sass repo.</p>
<div class="surface-200 border-round"> <div class="bg-surface-200 rounded">
<div class="bg-blue-500 border-round" style="width: 25%; height: 4px"></div> <div class="bg-blue-500 rounded" style="width: 25%; height: 4px"></div>
</div> </div>
</div> </div>
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">CSS Variables</h2> <h2 class="text-lg font-bold mt-0 mb-2">CSS Variables</h2>
<p class="mt-0 mb-3 line-height-3">Implement figma design tokens as CSS variables instead of SCSS.</p> <p class="mt-0 mb-4 leading-normal">Implement figma design tokens as CSS variables instead of SCSS.</p>
<div class="surface-200 border-round"> <div class="bg-surface-200 rounded">
<div class="bg-blue-500 border-round" style="width: 25%; height: 4px"></div> <div class="bg-blue-500 rounded" style="width: 25%; height: 4px"></div>
</div> </div>
</div> </div>
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">Tailwind CSS Presets</h2> <h2 class="text-lg font-bold mt-0 mb-2">Tailwind CSS Presets</h2>
<p class="mt-0 mb-3 line-height-3">Provide presets for the entire UI suite.</p> <p class="mt-0 mb-4 leading-normal">Provide presets for the entire UI suite.</p>
<div class="surface-200 border-round"> <div class="bg-surface-200 rounded">
<div class="bg-blue-500 border-round" style="width: 50%; height: 4px"></div> <div class="bg-blue-500 rounded" style="width: 50%; height: 4px"></div>
</div> </div>
</div> </div>
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">New Components</h2> <h2 class="text-lg font-bold mt-0 mb-2">New Components</h2>
<p class="mt-0 mb-3 line-height-3">Layout components, Typography, Meter, Drawer, Content for Steps...</p> <p class="mt-0 mb-4 leading-normal">Layout components, Typography, Meter, Drawer, Content for Steps...</p>
<div class="surface-200 border-round"> <div class="bg-surface-200 rounded">
<div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
</div> </div>
</div> </div>
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">Form States</h2> <h2 class="text-lg font-bold mt-0 mb-2">Form States</h2>
<p class="mt-0 mb-3 line-height-3">Add filled and invalid props to form components.</p> <p class="mt-0 mb-4 leading-normal">Add filled and invalid props to form components.</p>
<div class="surface-200 border-round"> <div class="bg-surface-200 rounded">
<div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-1 flex gap-3 flex-column"> <div class="flex-1 flex gap-4 flex-col">
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">RTL Mode</h2> <h2 class="text-lg font-bold mt-0 mb-2">RTL Mode</h2>
<p class="mt-0 mb-3 line-height-3">RTL support for the UI components.</p> <p class="mt-0 mb-4 leading-normal">RTL support for the UI components.</p>
<div class="surface-200 border-round"> <div class="bg-surface-200 rounded">
<div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
</div> </div>
</div> </div>
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">Drag Drop Utils</h2> <h2 class="text-lg font-bold mt-0 mb-2">Drag Drop Utils</h2>
<p class="mt-0 mb-3 line-height-3">Drag and Drop utilities.</p> <p class="mt-0 mb-4 leading-normal">Drag and Drop utilities.</p>
<div class="surface-200 border-round"> <div class="bg-surface-200 rounded">
<div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-1 flex gap-3 flex-column"> <div class="flex-1 flex gap-4 flex-col">
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2> <h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
<p class="mt-0 mb-3 line-height-3">Sheet, Event Calendar.</p> <p class="mt-0 mb-4 leading-normal">Sheet, Event Calendar.</p>
<div class="surface-200 border-round"> <div class="bg-surface-200 rounded">
<div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-1 flex gap-3 flex-column"> <div class="flex-1 flex gap-4 flex-col">
<div class="p-3 surface-card border-round border-blue-500" style="border-left: 6px solid"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2> <h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
<p class="mt-0 mb-3 line-height-3">Gantt Chart, Flow Chart.</p> <p class="mt-0 mb-4 leading-normal">Gantt Chart, Flow Chart.</p>
<div class="surface-200 border-round"> <div class="bg-surface-200 rounded">
<div class="bg-blue-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex gap-3 border-bottom-1 surface-border pb-3"> <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="flex-shrink-0 p-3 bg-indigo-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Figma UI Kit</div> <div class="flex-shrink-0 p-4 bg-indigo-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Figma UI Kit</div>
<div class="flex-1 flex gap-3 flex-column"> <div class="flex-1 flex gap-4 flex-col">
<div class="p-3 surface-card border-round border-indigo-500" style="border-left: 6px solid"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens</h2> <h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens</h2>
<p class="mt-0 mb-3 line-height-3">Update tokens to sync with the new styled mode.</p> <p class="mt-0 mb-4 leading-normal">Update tokens to sync with the new styled mode.</p>
<div class="surface-200 border-round"> <div class="bg-surface-200 rounded">
<div class="bg-indigo-500 border-round" style="width: 25%; height: 4px"></div> <div class="bg-indigo-500 rounded" style="width: 25%; height: 4px"></div>
</div> </div>
</div> </div>
<div class="p-3 surface-card border-round border-indigo-500" style="border-left: 6px solid"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">Figma to Theme API</h2> <h2 class="text-lg font-bold mt-0 mb-2">Figma to Theme API</h2>
<p class="mt-0 mb-3 line-height-3">Build the infrastructure to generate themes from Figma.</p> <p class="mt-0 mb-4 leading-normal">Build the infrastructure to generate themes from Figma.</p>
<div class="surface-200 border-round"> <div class="bg-surface-200 rounded">
<div class="bg-indigo-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-indigo-500 rounded" style="width: 0%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-1 flex gap-3 flex-column"></div> <div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-3 flex-column"></div> <div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-3 flex-column"></div> <div class="flex-1 flex gap-4 flex-col"></div>
</div> </div>
<div class="flex gap-3 border-bottom-1 surface-border pb-3"> <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="flex-shrink-0 p-3 bg-teal-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">SHOWCASE</div> <div class="flex-shrink-0 p-4 bg-teal-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">SHOWCASE</div>
<div class="flex-1 flex gap-3 flex-column"> <div class="flex-1 flex gap-4 flex-col">
<div class="p-3 surface-card border-round border-teal-500" style="border-left: 6px solid"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded 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">Add server backed data samples for data driven examples e.g. VirtualScroll, Lazy.</p> <p class="mt-0 mb-4 leading-normal">Add server backed data samples for data driven examples e.g. VirtualScroll, Lazy.</p>
<div class="surface-200 border-round"> <div class="bg-surface-200 rounded">
<div class="bg-teal-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-teal-500 rounded" style="width: 0%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-1 flex gap-3 flex-column"></div> <div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-3 flex-column"></div> <div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-3 flex-column"></div> <div class="flex-1 flex gap-4 flex-col"></div>
</div> </div>
<div class="flex gap-3 border-bottom-1 surface-border pb-3"> <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<div class="flex-shrink-0 p-3 bg-orange-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">PrimeBlocks</div> <div class="flex-shrink-0 p-4 bg-orange-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">PrimeBlocks</div>
<div class="flex-1 flex gap-3 flex-column"> <div class="flex-1 flex gap-4 flex-col">
<div class="p-3 surface-card border-round border-orange-500" style="border-left: 6px solid"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">Blocks Update</h2> <h2 class="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
<p class="mt-0 mb-3 line-height-3">Add 80+ New Blocks.</p> <p class="mt-0 mb-4 leading-normal">Add 80+ New Blocks.</p>
<div class="surface-200 border-round"> <div class="bg-surface-200 rounded">
<div class="bg-orange-500 border-round" style="width: 20%; height: 4px"></div> <div class="bg-orange-500 rounded" style="width: 20%; height: 4px"></div>
</div> </div>
</div> </div>
<div class="p-3 surface-card border-round border-orange-500" style="border-left: 6px solid"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">Tailwind Blocks</h2> <h2 class="text-lg font-bold mt-0 mb-2">Tailwind Blocks</h2>
<p class="mt-0 mb-3 line-height-3">Port the entire Blocks to Tailwind.</p> <p class="mt-0 mb-4 leading-normal">Port the entire Blocks to Tailwind.</p>
<div class="surface-200 border-round"> <div class="bg-surface-200 rounded">
<div class="bg-orange-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-orange-500 rounded" style="width: 0%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-1 flex gap-3 flex-column"> <div class="flex-1 flex gap-4 flex-col">
<div class="p-3 surface-card border-round border-orange-500" style="border-left: 6px solid"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">Online App</h2> <h2 class="text-lg font-bold mt-0 mb-2">Online App</h2>
<p class="mt-0 mb-3 line-height-3">Implement a SaaS app to access the blocks instead of an offline download.</p> <p class="mt-0 mb-4 leading-normal">Implement a SaaS app to access the blocks instead of an offline download.</p>
<div class="surface-200 border-round"> <div class="bg-surface-200 rounded">
<div class="bg-orange-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-orange-500 rounded" style="width: 0%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-1 flex gap-3 flex-column"></div> <div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-3 flex-column"></div> <div class="flex-1 flex gap-4 flex-col"></div>
</div> </div>
<div class="flex gap-3 border-bottom-1 surface-border pb-3"> <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
<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">Design</div> <div class="flex-shrink-0 p-4 bg-pink-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Design</div>
<div class="flex-1 flex gap-3 flex-column"> <div class="flex-1 flex gap-4 flex-col">
<div class="p-3 surface-card border-round border-pink-500" style="border-left: 6px solid"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">New UI Theme</h2> <h2 class="text-lg font-bold mt-0 mb-2">New UI Theme</h2>
<p class="mt-0 mb-3 line-height-3">Brand new default theme with a modern and attractive design.</p> <p class="mt-0 mb-4 leading-normal">Brand new default theme with a modern and attractive design.</p>
<div class="surface-200 border-round"> <div class="bg-surface-200 rounded">
<div class="bg-pink-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-pink-500 rounded" style="width: 0%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-1 flex gap-3 flex-column"> <div class="flex-1 flex gap-4 flex-col">
<div class="p-3 surface-card border-round border-pink-500" style="border-left: 6px solid"> <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500" style="border-left: 6px solid">
<h2 class="text-lg font-bold mt-0 mb-2">New UI Based Theme Editor</h2> <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 App with full control over the new Styled Theming API.</p> <p class="mt-0 mb-4 leading-normal">Advanced Theme Editor App with full control over the new Styled Theming API.</p>
<div class="surface-200 border-round"> <div class="bg-surface-200 rounded">
<div class="bg-pink-500 border-round" style="width: 0%; height: 4px"></div> <div class="bg-pink-500 rounded" style="width: 0%; height: 4px"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-1 flex gap-3 flex-column"></div> <div class="flex-1 flex gap-4 flex-col"></div>
<div class="flex-1 flex gap-3 flex-column"></div> <div class="flex-1 flex gap-4 flex-col"></div>
</div> </div>
</div> </div>
</div> </div>

158
pages/support/index.vue
View File

@ -1,142 +1,142 @@
<template> <template>
<div> <div>
<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-8" style="border-radius: 20px" />
<div class="flex flex-column xl:flex-row mb-5 gap-5"> <div class="flex flex-col xl:flex-row mb-8 gap-8">
<div class="card xl:w-3 m-0 relative overflow-hidden"> <div class="card xl:w-3/12 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-surface-200" style="bottom: -50px; right: -50px; font-size: 200px; transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg)"></i>
<div class="text-2xl text-900 font-semibold mb-3 relative">Community Support</div> <div class="text-2xl text-surface-900 font-semibold mb-4 relative">Community Support</div>
<p class="m-0 line-height-3 relative text-lg text-800"> <p class="m-0 leading-normal relative text-lg text-surface-800">
<a href="https://github.com/orgs/primefaces/discussions" class="doc-link">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="doc-link">Discord</a> are where the community users gather to seek support, post topics and <a href="https://github.com/orgs/primefaces/discussions" class="doc-link">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="doc-link">Discord</a> are 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 although they are monitored and maintained by our staff. If you need to 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 monitored and maintained by our staff. If you need to
secure our response within 1 business day, you may consider PRO support instead. 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/12 text-white bg-cover" style="background-image: url('https://primefaces.org/cdn/primevue/images/support/card-pro.jpg')">
<div class="text-2xl font-semibold mb-3">PRO Support</div> <div class="text-2xl font-semibold mb-4">PRO Support</div>
<p class="m-0 line-height-3 text-lg"> <p class="m-0 leading-normal 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 to 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
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. 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.
</p> </p>
</div> </div>
</div> </div>
<div class="card mb-5"> <div class="card mb-8">
<div class="flex flex-wrap align-items-center justify-content-between gap-3"> <div class="flex flex-wrap items-center justify-between gap-4">
<div> <div>
<div class="text-2xl text-900 font-semibold mb-3">Enterprise Support</div> <div class="text-2xl text-surface-900 font-semibold mb-4">Enterprise Support</div>
<p class="m-0 line-height-3 mb-5 text-secondary text-lg text-800">1 Year Subscription</p> <p class="m-0 leading-normal mb-8 text-secondary text-lg text-surface-800">1 Year Subscription</p>
</div> </div>
<a <a
href="mailto:contact@primetek.com.tr" href="mailto:contact@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" class="flex items-center justify-center border bg-indigo-500 rounded block p-4 mb-6 hover:bg-indigo-600 transition-all duration-300 text-white font-medium text-lg"
> >
Get a Quote Get a Quote
</a> </a>
</div> </div>
<div class="flex flex-wrap -mt-3 gap-3 text-800"> <div class="flex flex-wrap -mt-4 gap-4 text-surface-800">
<ul class="flex-auto list-none p-0 m-0 text-lg p-3"> <ul class="flex-auto list-none p-0 m-0 text-lg p-4">
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<i class="pi pi-check-circle mr-3 text-green-500"></i> <i class="pi pi-check-circle mr-4 text-green-500"></i>
<span class="line-height-3">Access to Private JIRA</span> <span class="leading-normal">Access to Private JIRA</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<i class="pi pi-check-circle mr-3 text-green-500"></i> <i class="pi pi-check-circle mr-4 text-green-500"></i>
<span class="line-height-3">Response within 1 business day</span> <span class="leading-normal">Response within 1 business day</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<i class="pi pi-check-circle mr-3 text-green-500"></i> <i class="pi pi-check-circle mr-4 text-green-500"></i>
<span class="line-height-3">Unlimited Issue Tickets</span> <span class="leading-normal">Unlimited Issue Tickets</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<i class="pi pi-check-circle mr-3 text-green-500"></i> <i class="pi pi-check-circle mr-4 text-green-500"></i>
<span class="line-height-3">Conference Calls</span> <span class="leading-normal">Conference Calls</span>
</li> </li>
</ul> </ul>
<ul class="flex-auto list-none p-0 m-0 text-lg p-3"> <ul class="flex-auto list-none p-0 m-0 text-lg p-4">
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<i class="pi pi-check-circle mr-3 text-green-500"></i> <i class="pi pi-check-circle mr-4 text-green-500"></i>
<span class="line-height-3">Maintenance for Any Version</span> <span class="leading-normal">Maintenance for Any Version</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<i class="pi pi-check-circle mr-3 text-green-500"></i> <i class="pi pi-check-circle mr-4 text-green-500"></i>
<span class="line-height-3">PrimeBlocks - Enterprise License</span> <span class="leading-normal">PrimeBlocks - Enterprise License</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<i class="pi pi-check-circle mr-3 text-green-500"></i> <i class="pi pi-check-circle mr-4 text-green-500"></i>
<span class="line-height-3">Figma UI Kit - Enterprise License</span> <span class="leading-normal">Figma UI Kit - Enterprise License</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<i class="pi pi-check-circle mr-3 text-green-500"></i> <i class="pi pi-check-circle mr-4 text-green-500"></i>
<span class="line-height-3">1 Premium Template - Extended License</span> <span class="leading-normal">1 Premium Template - Extended License</span>
</li> </li>
</ul> </ul>
<ul class="flex-auto list-none p-0 m-0 text-lg p-3"> <ul class="flex-auto list-none p-0 m-0 text-lg p-4">
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<i class="pi pi-check-circle mr-3 text-green-500"></i> <i class="pi pi-check-circle mr-4 text-green-500"></i>
<span class="line-height-3">Visual Theme Builder (Soon)</span> <span class="leading-normal">Visual Theme Builder (Soon)</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<i class="pi pi-check-circle mr-3 text-green-500"></i> <i class="pi pi-check-circle mr-4 text-green-500"></i>
<span class="line-height-3">Figma to Theme Generator (Soon)</span> <span class="leading-normal">Figma to Theme Generator (Soon)</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="card mb-5"> <div class="card mb-8">
<div class="text-2xl text-900 font-semibold mb-3">Enhancement Credits</div> <div class="text-2xl text-surface-900 font-semibold mb-4">Enhancement Credits</div>
<p class="m-0 line-height-3 mb-5 text-secondary text-lg text-800"> <p class="m-0 leading-normal mb-8 text-secondary text-lg text-surface-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 an enhancement request, initially our team will review your requirement to verify New features and enhancement requests are not available in core services and provided via a credit based model instead named PrimeCredit. When you have an enhancement request, initially our team will review your requirement to verify
if it is suitable to be included in the open source core library. We cannot guarantee that all requests can be accepted depending on the project roadmap, workload at the time and type of the requirement. After successful verification, if it is suitable to be included in the open source core library. We cannot guarantee that all requests can be accepted depending on the project roadmap, workload at the time and type of the requirement. After successful verification,
we prepare an initial estimate in terms of credits and once this estimate is confirmed by you, implementation will be delivered by our team within an estimated timeframe. we prepare an initial estimate in terms of credits and once this estimate is confirmed by you, 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-col md:flex-row gap-8">
<div class="flex-1"> <div class="flex-1">
<div class="text-xl text-900 font-semibold mb-2 text-xl">New Components</div> <div class="text-xl text-surface-900 font-semibold mb-2 text-xl">New Components</div>
<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> <p class="m-0 leading-normal mb-4 text-secondary text-lg text-surface-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-xl text-900 font-semibold mb-2 text-xl">New Features</div> <div class="text-xl text-surface-900 font-semibold mb-2 text-xl">New Features</div>
<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> <p class="m-0 leading-normal mb-4 text-secondary text-lg text-surface-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-xl text-900 font-semibold mb-2 text-xl">UX Customization</div> <div class="text-xl text-surface-900 font-semibold mb-2 text-xl">UX Customization</div>
<p class="m-0 line-height-3 mb-3 text-secondary text-lg text-800">Behavioral changes to the existing components.</p> <p class="m-0 leading-normal mb-4 text-secondary text-lg text-surface-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-2xl text-900 font-semibold mb-5">Frequently Asked Questions</div> <div class="text-2xl text-surface-900 font-semibold mb-8">Frequently Asked Questions</div>
<div class="flex flex-wrap text-lg -ml-5 -mt-5"> <div class="flex flex-wrap text-lg -ml-8 -mt-8">
<div class="w-full lg:w-4 p-5"> <div class="w-full lg:w-4/12 p-8">
<div class="text-xl text-900 line-height-3 mb-2 font-medium">What is the duration of the service?</div> <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">What is the duration of the service?</div>
<p class="mt-0 mb-5 p-0 line-height-3 text-800">Support service is for one year.</p> <p class="mt-0 mb-8 p-0 leading-normal text-surface-800">Support service is for one year.</p>
<div class="text-xl text-900 line-height-3 mb-2 font-medium">How many JIRA accounts do we get?</div> <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">How many JIRA accounts do we get?</div>
<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> <p class="mt-0 mb-8 p-0 leading-normal text-surface-800">We provide one shared account per organization that any number of members in your organization can use it.</p>
<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> <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">What happens if we extend after 1 year and we have unused tickets?</div>
<p class="mt-0 p-0 line-height-3 text-800">Unused tickets expire and cannot be transferred to the new subscription.</p> <p class="mt-0 p-0 leading-normal text-surface-800">Unused tickets expire and cannot be transferred to the new subscription.</p>
</div> </div>
<div class="w-full lg:w-4 p-5"> <div class="w-full lg:w-4/12 p-8">
<div class="text-xl text-900 line-height-3 mb-2 font-medium">When can we purchase PrimeCredits for feature development?</div> <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">When can we purchase PrimeCredits for feature development?</div>
<p class="mt-0 mb-5 p-0 line-height-3 text-800">PrimeCredits can be purchased anytime during an active subscription.</p> <p class="mt-0 mb-8 p-0 leading-normal text-surface-800">PrimeCredits can be purchased anytime during an active subscription.</p>
<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> <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">Are all of our requests guaranteed to be implemented with PrimeCredits?</div>
<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> <p class="mt-0 mb-8 p-0 leading-normal text-surface-800">No, PrimeTek does not guarantee the implementation so it is suggested to confirm with us before purchasing credits.</p>
<div class="text-xl text-900 line-height-3 mb-2 font-medium">Can we get PrimeCredits without PRO support?</div> <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">Can we get PrimeCredits without PRO support?</div>
<p class="mt-0 p-0 line-height-3 text-800">No, feature development is exclusive to PRO members.</p> <p class="mt-0 p-0 leading-normal text-surface-800">No, feature development is exclusive to PRO members.</p>
</div> </div>
<div class="w-full lg:w-4 p-5"> <div class="w-full lg:w-4/12 p-8">
<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> <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">Is there a limit on developers in our organization who can use the service?</div>
<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> <p class="mt-0 mb-8 p-0 leading-normal text-surface-800">PRO is per organization so there is no limit on the number of developers.</p>
<div class="text-xl text-900 line-height-3 mb-2 font-medium">What is not covered by PRO?</div> <div class="text-xl text-surface-900 leading-normal mb-2 font-medium">What is not covered by PRO?</div>
<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> <p class="mt-0 p-0 leading-normal text-surface-800">As PRO support focuses on the library, application consulting and code reviews are out of scope.</p>
</div> </div>
</div> </div>
</div> </div>

68
pages/team/index.vue
View File

@ -10,85 +10,85 @@
</p> </p>
</div> </div>
<div class="card p-8"> <div class="card p-20">
<div class="flex flex-wrap gap-8"> <div class="flex flex-wrap gap-20">
<div class="flex flex-column align-items-center flex-auto"> <div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/cagatay.jpg" class="border-circle mb-4" alt="Cagatay Civici" /> <img src="https://primefaces.org/cdn/primevue/images/team/cagatay.jpg" class="rounded-full mb-6" alt="Cagatay Civici" />
<span class="mb-2 text-xl font-bold">Çağatay Çivici</span> <span class="mb-2 text-xl font-bold">Çağatay Çivici</span>
<span>Founder</span> <span>Founder</span>
</div> </div>
<div class="flex flex-column align-items-center flex-auto"> <div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/mert.jpg" class="border-circle mb-4" alt="Mert Sincan" /> <img src="https://primefaces.org/cdn/primevue/images/team/mert.jpg" class="rounded-full mb-6" alt="Mert Sincan" />
<span class="mb-2 text-xl font-bold">Mert Sincan</span> <span class="mb-2 text-xl font-bold">Mert Sincan</span>
<span>CTO</span> <span>CTO</span>
</div> </div>
<div class="flex flex-column align-items-center flex-auto"> <div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/onur.jpg" class="border-circle mb-4" alt="Onur Şentüre" /> <img src="https://primefaces.org/cdn/primevue/images/team/onur.jpg" class="rounded-full mb-6" alt="Onur Şentüre" />
<span class="mb-2 text-xl font-bold">Onur Şentüre</span> <span class="mb-2 text-xl font-bold">Onur Şentüre</span>
<span>Design Lead</span> <span>Design Lead</span>
</div> </div>
<div class="flex flex-column align-items-center flex-auto"> <div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/yigit.jpg" class="border-circle mb-4" alt="Yiğit Fındıklı" /> <img src="https://primefaces.org/cdn/primevue/images/team/yigit.jpg" class="rounded-full mb-6" alt="Yiğit Fındıklı" />
<span class="mb-2 text-xl font-bold">Yiğit Fındıklı</span> <span class="mb-2 text-xl font-bold">Yiğit Fındıklı</span>
<span>Technical Lead</span> <span>Technical Lead</span>
</div> </div>
<div class="flex flex-column align-items-center flex-auto"> <div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/dilara.jpg" class="border-circle mb-4" alt="Dilara Can" /> <img src="https://primefaces.org/cdn/primevue/images/team/dilara.jpg" class="rounded-full mb-6" alt="Dilara Can" />
<span class="mb-2 text-xl font-bold">Dilara Güngenci</span> <span class="mb-2 text-xl font-bold">Dilara Güngenci</span>
<span>Business Administration</span> <span>Business Administration</span>
</div> </div>
<div class="flex flex-column align-items-center flex-auto"> <div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/cetin.jpg" class="border-circle mb-4" alt="Çetin Çakıroğlu" /> <img src="https://primefaces.org/cdn/primevue/images/team/cetin.jpg" class="rounded-full mb-6" alt="Çetin Çakıroğlu" />
<span class="mb-2 text-xl font-bold">Çetin Çakıroğlu</span> <span class="mb-2 text-xl font-bold">Çetin Çakıroğlu</span>
<span>Front-End Developer</span> <span>Front-End Developer</span>
</div> </div>
<div class="flex flex-column align-items-center flex-auto"> <div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/tugce.jpg" class="border-circle mb-4" alt="Tuğçe Küçükoğlu" /> <img src="https://primefaces.org/cdn/primevue/images/team/tugce.jpg" class="rounded-full mb-6" alt="Tuğçe Küçükoğlu" />
<span class="mb-2 text-xl font-bold">Tuğçe Küçükoğlu</span> <span class="mb-2 text-xl font-bold">Tuğçe Küçükoğlu</span>
<span>Front-End Developer</span> <span>Front-End Developer</span>
</div> </div>
<div class="flex flex-column align-items-center flex-auto"> <div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/atakan.jpg" class="border-circle mb-4" alt="Atakan Tepe" /> <img src="https://primefaces.org/cdn/primevue/images/team/atakan.jpg" class="rounded-full mb-6" alt="Atakan Tepe" />
<span class="mb-2 text-xl font-bold">Atakan Tepe</span> <span class="mb-2 text-xl font-bold">Atakan Tepe</span>
<span>Front-End Developer</span> <span>Front-End Developer</span>
</div> </div>
<div class="flex flex-column align-items-center flex-auto"> <div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/kerem.jpg" class="border-circle mb-4" alt="Kerem Yıldan" /> <img src="https://primefaces.org/cdn/primevue/images/team/kerem.jpg" class="rounded-full mb-6" alt="Kerem Yıldan" />
<span class="mb-2 text-xl font-bold">Kerem Yıldan</span> <span class="mb-2 text-xl font-bold">Kerem Yıldan</span>
<span>UI/UX Designer</span> <span>UI/UX Designer</span>
</div> </div>
<div class="flex flex-column align-items-center flex-auto"> <div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/aliriza.jpg" class="border-circle mb-4" alt="Alirıza Gücal" /> <img src="https://primefaces.org/cdn/primevue/images/team/aliriza.jpg" class="rounded-full mb-6" alt="Alirıza Gücal" />
<span class="mb-2 text-xl font-bold">Alirıza Gücal</span> <span class="mb-2 text-xl font-bold">Alirıza Gücal</span>
<span>Front-End Developer</span> <span>Front-End Developer</span>
</div> </div>
<div class="flex flex-column align-items-center flex-auto"> <div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/umit.jpg" class="border-circle mb-4" alt="Ümit Çelik" /> <img src="https://primefaces.org/cdn/primevue/images/team/umit.jpg" class="rounded-full mb-6" alt="Ümit Çelik" />
<span class="mb-2 text-xl font-bold">Ümit Çelik</span> <span class="mb-2 text-xl font-bold">Ümit Çelik</span>
<span>UI/UX Designer</span> <span>UI/UX Designer</span>
</div> </div>
<div class="flex flex-column align-items-center flex-auto"> <div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/toprak.jpg" class="border-circle mb-4" alt="Toprak Koç" /> <img src="https://primefaces.org/cdn/primevue/images/team/toprak.jpg" class="rounded-full mb-6" alt="Toprak Koç" />
<span class="mb-2 text-xl font-bold">Toprak Koç</span> <span class="mb-2 text-xl font-bold">Toprak Koç</span>
<span>Front-End Developer</span> <span>Front-End Developer</span>
</div> </div>
<div class="flex flex-column align-items-center flex-auto"> <div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/mehmet.jpg" class="border-circle mb-4" alt="Mehmet Çetin" /> <img src="https://primefaces.org/cdn/primevue/images/team/mehmet.jpg" class="rounded-full mb-6" alt="Mehmet Çetin" />
<span class="mb-2 text-xl font-bold">Mehmet Çetin</span> <span class="mb-2 text-xl font-bold">Mehmet Çetin</span>
<span>Front-End Developer</span> <span>Front-End Developer</span>
</div> </div>
<div class="flex flex-column align-items-center flex-auto"> <div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/furkan.jpg" class="border-circle mb-4" alt="Furkan Seziş" /> <img src="https://primefaces.org/cdn/primevue/images/team/furkan.jpg" class="rounded-full mb-6" alt="Furkan Seziş" />
<span class="mb-2 text-xl font-bold">Furkan Seziş</span> <span class="mb-2 text-xl font-bold">Furkan Seziş</span>
<span>Front-End Developer</span> <span>Front-End Developer</span>
</div> </div>
<div class="flex flex-column align-items-center flex-auto"> <div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/burak.jpg" class="border-circle mb-4" alt="Burak Sağlam" /> <img src="https://primefaces.org/cdn/primevue/images/team/burak.jpg" class="rounded-full mb-6" alt="Burak Sağlam" />
<span class="mb-2 text-xl font-bold">Burak Sağlam</span> <span class="mb-2 text-xl font-bold">Burak Sağlam</span>
<span>Front-End Developer</span> <span>Front-End Developer</span>
</div> </div>
<div class="flex flex-column align-items-center flex-auto"> <div class="flex flex-col items-center flex-auto">
<img src="https://primefaces.org/cdn/primevue/images/team/taner.jpg" class="border-circle mb-4" alt="Taner Engin" /> <img src="https://primefaces.org/cdn/primevue/images/team/taner.jpg" class="rounded-full mb-6" alt="Taner Engin" />
<span class="mb-2 text-xl font-bold">Taner Engin</span> <span class="mb-2 text-xl font-bold">Taner Engin</span>
<span>Front-End Developer</span> <span>Front-End Developer</span>
</div> </div>

74
pages/templates/index.vue
View File

@ -5,138 +5,138 @@
<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>
</div> </div>
<div class="templates-page grid"> <div class="templates-page grid grid-cols-12 gap-4">
<div class="col-12 lg:col-6 xl:col-4"> <div class="col-span-12 lg:col-span-6 xl:col-span-4">
<div class="card mb-0"> <div class="card mb-0">
<a href="https://apollo.primevue.org" rel="noopener noreferrer" target="_blank"> <a href="https://apollo.primevue.org" rel="noopener noreferrer" target="_blank">
<img alt="Apollo" src="https://primefaces.org/cdn/primevue/images/layouts/apollo-vue.jpg" class="w-full" /> <img alt="Apollo" src="https://primefaces.org/cdn/primevue/images/layouts/apollo-vue.jpg" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <div class="flex gap-4 mt-4">
<a href="https://apollo.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank"> <a href="https://apollo.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="templates-page-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label whitespace-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/apollo" class="templates-page-button templates-page-button-outlined"> <PrimeVueNuxtLink to="/templates/apollo" class="templates-page-button templates-page-button-outlined">
<span class="templates-page-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6 xl:col-4"> <div class="col-span-12 lg:col-span-6 xl:col-span-4">
<div class="card mb-0"> <div class="card mb-0">
<a href="https://sakai.primevue.org" rel="noopener noreferrer" target="_blank"> <a href="https://sakai.primevue.org" rel="noopener noreferrer" target="_blank">
<img alt="Sakai" src="https://primefaces.org/cdn/primevue/images/layouts/sakai-vue.jpg" class="w-full" /> <img alt="Sakai" src="https://primefaces.org/cdn/primevue/images/layouts/sakai-vue.jpg" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <div class="flex gap-4 mt-4">
<a href="https://sakai.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank"> <a href="https://sakai.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="templates-page-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label whitespace-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/sakai" class="templates-page-button templates-page-button-outlined"> <PrimeVueNuxtLink to="/templates/sakai" class="templates-page-button templates-page-button-outlined">
<span class="templates-page-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6 xl:col-4"> <div class="col-span-12 lg:col-span-6 xl:col-span-4">
<div class="card mb-0"> <div class="card mb-0">
<a href="https://atlantis.primevue.org" rel="noopener noreferrer" target="_blank"> <a href="https://atlantis.primevue.org" rel="noopener noreferrer" target="_blank">
<img alt="Atlantis" src="https://primefaces.org/cdn/primevue/images/layouts/atlantis-vue.jpg" class="w-full" /> <img alt="Atlantis" src="https://primefaces.org/cdn/primevue/images/layouts/atlantis-vue.jpg" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <div class="flex gap-4 mt-4">
<a href="https://atlantis.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank"> <a href="https://atlantis.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="templates-page-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label whitespace-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/atlantis" class="templates-page-button templates-page-button-outlined"> <PrimeVueNuxtLink to="/templates/atlantis" class="templates-page-button templates-page-button-outlined">
<span class="templates-page-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6 xl:col-4"> <div class="col-span-12 lg:col-span-6 xl:col-span-4">
<div class="card mb-0"> <div class="card mb-0">
<a href="https://ultima.primevue.org" rel="noopener noreferrer" target="_blank"> <a href="https://ultima.primevue.org" rel="noopener noreferrer" target="_blank">
<img alt="Ultima" src="https://primefaces.org/cdn/primevue/images/layouts/ultima-vue.jpg" class="w-full" /> <img alt="Ultima" src="https://primefaces.org/cdn/primevue/images/layouts/ultima-vue.jpg" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <div class="flex gap-4 mt-4">
<a href="https://ultima.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank"> <a href="https://ultima.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="templates-page-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label whitespace-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/ultima" class="templates-page-button templates-page-button-outlined"> <PrimeVueNuxtLink to="/templates/ultima" class="templates-page-button templates-page-button-outlined">
<span class="templates-page-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6 xl:col-4"> <div class="col-span-12 lg:col-span-6 xl:col-span-4">
<div class="card mb-0"> <div class="card mb-0">
<a href="https://freya.primevue.org" rel="noopener noreferrer" target="_blank"> <a href="https://freya.primevue.org" rel="noopener noreferrer" target="_blank">
<img alt="Freya" src="https://primefaces.org/cdn/primevue/images/layouts/freya-vue.png" class="w-full" /> <img alt="Freya" src="https://primefaces.org/cdn/primevue/images/layouts/freya-vue.png" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <div class="flex gap-4 mt-4">
<a href="https://freya.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank"> <a href="https://freya.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="templates-page-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label whitespace-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/freya" class="templates-page-button templates-page-button-outlined"> <PrimeVueNuxtLink to="/templates/freya" class="templates-page-button templates-page-button-outlined">
<span class="templates-page-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6 xl:col-4"> <div class="col-span-12 lg:col-span-6 xl:col-span-4">
<div class="card mb-0"> <div class="card mb-0">
<a href="https://diamond.primevue.org" rel="noopener noreferrer" target="_blank"> <a href="https://diamond.primevue.org" rel="noopener noreferrer" target="_blank">
<img alt="Diamond" src="https://primefaces.org/cdn/primevue/images/layouts/diamond-vue.jpg" class="w-full" /> <img alt="Diamond" src="https://primefaces.org/cdn/primevue/images/layouts/diamond-vue.jpg" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <div class="flex gap-4 mt-4">
<a href="https://diamond.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank"> <a href="https://diamond.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="templates-page-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label whitespace-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/diamond" class="templates-page-button templates-page-button-outlined"> <PrimeVueNuxtLink to="/templates/diamond" class="templates-page-button templates-page-button-outlined">
<span class="templates-page-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6 xl:col-4"> <div class="col-span-12 lg:col-span-6 xl:col-span-4">
<div class="card mb-0"> <div class="card mb-0">
<a href="https://verona.primevue.org" rel="noopener noreferrer" target="_blank"> <a href="https://verona.primevue.org" rel="noopener noreferrer" target="_blank">
<img alt="Verona" src="https://primefaces.org/cdn/primevue/images/layouts/verona-vue.jpg" class="w-full" /> <img alt="Verona" src="https://primefaces.org/cdn/primevue/images/layouts/verona-vue.jpg" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <div class="flex gap-4 mt-4">
<a href="https://verona.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank"> <a href="https://verona.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="templates-page-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label whitespace-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/verona" class="templates-page-button templates-page-button-outlined"> <PrimeVueNuxtLink to="/templates/verona" class="templates-page-button templates-page-button-outlined">
<span class="templates-page-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6 xl:col-4"> <div class="col-span-12 lg:col-span-6 xl:col-span-4">
<div class="card mb-0"> <div class="card mb-0">
<a href="https://poseidon.primevue.org" rel="noopener noreferrer" target="_blank"> <a href="https://poseidon.primevue.org" rel="noopener noreferrer" target="_blank">
<img alt="Poseidon" src="https://primefaces.org/cdn/primevue/images/layouts/poseidon-vue.jpg" class="w-full" /> <img alt="Poseidon" src="https://primefaces.org/cdn/primevue/images/layouts/poseidon-vue.jpg" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <div class="flex gap-4 mt-4">
<a href="https://poseidon.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank"> <a href="https://poseidon.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="templates-page-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label whitespace-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/poseidon" class="templates-page-button templates-page-button-outlined"> <PrimeVueNuxtLink to="/templates/poseidon" class="templates-page-button templates-page-button-outlined">
<span class="templates-page-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 lg:col-6 xl:col-4"> <div class="col-span-12 lg:col-span-6 xl:col-span-4">
<div class="card mb-0"> <div class="card mb-0">
<a href="https://avalon.primevue.org" rel="noopener noreferrer" target="_blank"> <a href="https://avalon.primevue.org" rel="noopener noreferrer" target="_blank">
<img alt="Avalon" src="https://primefaces.org/cdn/primevue/images/layouts/avalon-vue.jpg" class="w-full" /> <img alt="Avalon" src="https://primefaces.org/cdn/primevue/images/layouts/avalon-vue.jpg" class="w-full" />
</a> </a>
<div class="flex gap-3 mt-3"> <div class="flex gap-4 mt-4">
<a href="https://avalon.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank"> <a href="https://avalon.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
<span class="templates-page-button-label white-space-nowrap">Preview</span> <span class="templates-page-button-label whitespace-nowrap">Preview</span>
</a> </a>
<PrimeVueNuxtLink to="/templates/avalon" class="templates-page-button templates-page-button-outlined"> <PrimeVueNuxtLink to="/templates/avalon" class="templates-page-button templates-page-button-outlined">
<span class="templates-page-button-label white-space-nowrap">Learn More</span> <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
</div> </div>
</div> </div>

258
pages/uikit/index.vue
View File

@ -6,278 +6,278 @@
</Head> </Head>
<div> <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-8 flex items-center">
<img alt="PrimeVue Designer" :src="coverImage" class="w-full" /> <img alt="PrimeVue Designer" :src="coverImage" class="w-full" />
</div> </div>
<div class="card mb-5" style="border-radius: 50px"> <div class="card mb-8" style="border-radius: 50px">
<div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8"> <div class="flex flex-col md:flex-row items-center gap-6 md:gap-20 mb-20">
<div class="w-full md:w-6"> <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" /> <img alt="PrimeVue UI Kit" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-figma.png" class="w-full" />
</div> </div>
<div class="w-full md:w-6"> <div class="w-full md:w-6/12">
<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-surface-900 text-5xl font-bold mb-4">Best Features of Figma</div>
<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> <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>
<ul class="flex flex-wrap m-0 p-0 text-lg"> <ul class="flex flex-wrap m-0 p-0 text-lg">
<li class="flex align-items-center w-6 p-3"> <li class="flex items-center w-6/12 p-4">
<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>
</li> </li>
<li class="flex align-items-center w-6 p-3"> <li class="flex items-center w-6/12 p-4">
<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">Variants</span> <span class="font-bold">Variants</span>
</li> </li>
<li class="flex align-items-center w-6 p-3"> <li class="flex items-center w-6/12 p-4">
<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">Styles</span> <span class="font-bold">Styles</span>
</li> </li>
<li class="flex align-items-center w-6 p-3"> <li class="flex items-center w-6/12 p-4">
<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">Interactive Components</span> <span class="font-bold">Interactive Components</span>
</li> </li>
<li class="flex align-items-center w-6 p-3"> <li class="flex items-center w-6/12 p-4">
<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">Boolean, Instance Swap and Text Properties</span> <span class="font-bold">Boolean, Instance Swap and Text Properties</span>
</li> </li>
<li class="flex align-items-center w-6 p-3"> <li class="flex items-center w-6/12 p-4">
<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">Nested Instances</span> <span class="font-bold">Nested Instances</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8"> <div class="flex flex-col md:flex-row items-center gap-6 md:gap-20 mb-20">
<div class="w-full md:w-6"> <div class="w-full md:w-6/12">
<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-surface-900 text-5xl font-bold mb-4">Powerful System</div>
<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> <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>
<ul class="flex flex-wrap m-0 p-0 text-lg"> <ul class="flex flex-wrap m-0 p-0 text-lg">
<li class="flex align-items-center w-6 p-3"> <li class="flex items-center w-6/12 p-4">
<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>
</li> </li>
<li class="flex align-items-center w-6 p-3"> <li class="flex items-center w-6/12 p-4">
<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">Icon Library</span> <span class="font-bold">Icon Library</span>
</li> </li>
<li class="flex align-items-center w-6 p-3"> <li class="flex items-center w-6/12 p-4">
<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">Easy Customization</span> <span class="font-bold">Easy Customization</span>
</li> </li>
<li class="flex align-items-center w-6 p-3"> <li class="flex items-center w-6/12 p-4">
<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">Atomic Approach</span> <span class="font-bold">Atomic Approach</span>
</li> </li>
</ul> </ul>
</div> </div>
<div class="w-full md:w-6"> <div class="w-full md:w-6/12">
<img alt="PrimeVue Designer" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png" class="w-full" /> <img alt="PrimeVue Designer" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png" class="w-full" />
</div> </div>
</div> </div>
<div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8"> <div class="flex flex-col md:flex-row items-center gap-6 md:gap-20 mb-20">
<div class="w-full md:w-6"> <div class="w-full md:w-6/12">
<img alt="PrimeVue Designer" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-themes.png" class="w-full" /> <img alt="PrimeVue Designer" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-themes.png" class="w-full" />
</div> </div>
<div class="w-full md:w-6"> <div class="w-full md:w-6/12">
<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-surface-900 text-5xl font-bold mb-4">Two Themes</div>
<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> <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>
<ul class="flex flex-wrap m-0 p-0 text-lg"> <ul class="flex flex-wrap m-0 p-0 text-lg">
<li class="flex align-items-center w-6 p-3"> <li class="flex items-center w-6/12 p-4">
<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>
</li> </li>
<li class="flex align-items-center w-6 p-3"> <li class="flex items-center w-6/12 p-4">
<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 Dark</span> <span class="font-bold">Lara Dark</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8"> <div class="flex flex-col md:flex-row items-center gap-6 md:gap-20">
<div class="w-full md:w-6"> <div class="w-full md:w-6/12">
<div class="text-primary font-bold mb-2">TOKENS STUDIO</div> <div class="text-primary font-bold mb-2">TOKENS STUDIO</div>
<div class="text-900 text-5xl font-bold mb-3">Tokens Support</div> <div class="text-surface-900 text-5xl font-bold mb-4">Tokens Support</div>
<p class="mb-3 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> <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>
<ul class="flex flex-wrap m-0 p-0 text-lg"> <ul class="flex flex-wrap m-0 p-0 text-lg">
<li class="flex align-items-center w-6 p-3"> <li class="flex items-center w-6/12 p-4">
<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">Countless Design Tokens</span> <span class="font-bold">Countless Design Tokens</span>
</li> </li>
<li class="flex align-items-center w-6 p-3"> <li class="flex items-center w-6/12 p-4">
<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">Light and Dark Sets</span> <span class="font-bold">Light and Dark Sets</span>
</li> </li>
<li class="flex align-items-center w-12 p-3"> <li class="flex items-center w-full p-4">
<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">Well Documented</span> <span class="font-bold">Well Documented</span>
</li> </li>
</ul> </ul>
</div> </div>
<div class="w-full md:w-6"> <div class="w-full md:w-6/12">
<img alt="Tokens Support" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-tokens.png" class="w-full" /> <img alt="Tokens Support" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-tokens.png" class="w-full" />
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-column md:flex-row gap-4 md:gap-8 mb-5"> <div class="flex flex-col md:flex-row gap-6 md:gap-20 mb-8">
<a <a
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" 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"
class="p-5 w-full md:w-6 bg-white flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300" 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"
style="border-radius: 50px" style="border-radius: 50px"
> >
<span class="text-gray-900 text-4xl font-bold mb-5">Preview Light</span> <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-4rem" /> <img alt="Figma Light" src="https://primefaces.org/cdn/primevue/images/uikit/logo-figma-light.svg" class="w-16" />
</a> </a>
<a <a
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" 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"
class="p-5 w-full md:w-6 bg-gray-900 flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300" 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"
style="border-radius: 50px" style="border-radius: 50px"
> >
<span class="text-white text-4xl font-bold mb-5">Preview Dark</span> <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-4rem" /> <img alt="Figma Dark" src="https://primefaces.org/cdn/primevue/images/uikit/logo-figma-dark.svg" class="w-16" />
</a> </a>
</div> </div>
<div class="card mb-5" style="border-radius: 50px"> <div class="card mb-8" style="border-radius: 50px">
<div class="text-900 font-bold text-5xl mb-4 text-center">Pricing</div> <div class="text-surface-900 font-bold text-5xl mb-6 text-center">Pricing</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> <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-6 doc-link text-center block">View License Details</a> <a href="https://www.primefaces.org/uikit/licenses" class="mb-12 doc-link text-center block">View License Details</a>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12 lg:col-4"> <div class="col-span-12 lg:col-span-4">
<div class="p-3 h-full"> <div class="p-4 h-full">
<div class="shadow-2 p-5 h-full flex flex-column surface-card" style="border-radius: 6px"> <div class="shadow p-8 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Single Designer</div> <div class="text-surface-900 font-medium text-xl mb-2">Single Designer</div>
<div class="text-600 font-medium">For individual designers</div> <div class="text-surface-600 font-medium">For individual designers</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" /> <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
<div class="flex flex-wrap gap-3"> <div class="flex flex-wrap gap-4">
<span class="text-2xl font-bold text-900 line-through text-color-secondary">$99</span> <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-900">$49</span> <span class="text-2xl font-bold text-surface-900">$49</span>
</div> </div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" /> <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 flex-grow-1 text-lg"> <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>Auto Layout & Variants</span> <span>Auto Layout & Variants</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>Interactive Components</span> <span>Interactive Components</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>Tokens Studio Support</span> <span>Tokens Studio Support</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>Lifetime Support</span> <span>Lifetime Support</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>Use on Unlimited Projects</span> <span>Use on Unlimited Projects</span>
</li> </li>
</ul> </ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" /> <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-3 w-full border-round text-center transition-colors transition-duration-300 font-bold p-ripple" <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"
>Buy Now</a >Buy Now</a
> >
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 lg:col-4"> <div class="col-span-12 lg:col-span-4">
<div class="p-3 h-full"> <div class="p-4 h-full">
<div class="shadow-2 p-5 h-full flex flex-column surface-card" style="border-radius: 6px"> <div class="shadow p-8 h-full flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Team</div> <div class="text-surface-900 font-medium text-xl mb-2">Team</div>
<div class="text-600 font-medium">For small teams</div> <div class="text-surface-600 font-medium">For small teams</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" /> <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
<div class="flex flex-wrap gap-3"> <div class="flex flex-wrap gap-4">
<span class="text-2xl font-bold text-900 line-through text-color-secondary">$249</span> <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-900">$149</span> <span class="text-2xl font-bold text-surface-900">$149</span>
</div> </div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" /> <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 flex-grow-1 text-lg"> <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>Auto Layout & Variants</span> <span>Auto Layout & Variants</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>Interactive Components</span> <span>Interactive Components</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>Tokens Studio Support</span> <span>Tokens Studio Support</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>Lifetime Support</span> <span>Lifetime Support</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>Use on Unlimited Projects</span> <span>Use on Unlimited Projects</span>
</li> </li>
</ul> </ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" /> <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-3 w-full border-round text-center transition-colors transition-duration-300 font-bold p-ripple" <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"
>Buy Now</a >Buy Now</a
> >
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 lg:col-4"> <div class="col-span-12 lg:col-span-4">
<div class="p-3 h-full"> <div class="p-4 h-full">
<div class="shadow-2 p-5 flex flex-column surface-card" style="border-radius: 6px"> <div class="shadow p-8 flex flex-col bg-surface-0 dark:bg-surface-900" style="border-radius: 6px">
<div class="text-900 font-medium text-xl mb-2">Enterprise</div> <div class="text-surface-900 font-medium text-xl mb-2">Enterprise</div>
<div class="text-600 font-medium">For large teams</div> <div class="text-surface-600 font-medium">For large teams</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" /> <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
<div class="flex gap-3 flex-wrap"> <div class="flex gap-4 flex-wrap">
<span class="text-2xl font-bold text-900">EXCLUSIVE DEALS</span> <span class="text-2xl font-bold text-surface-900">EXCLUSIVE DEALS</span>
</div> </div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" /> <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 flex-grow-1 text-lg"> <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>Auto Layout & Variants</span> <span>Auto Layout & Variants</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>Interactive Components</span> <span>Interactive Components</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>Tokens Studio Support</span> <span>Tokens Studio Support</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>Lifetime Support</span> <span>Lifetime Support</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<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>Use on Unlimited Projects</span> <span>Use on Unlimited Projects</span>
</li> </li>
</ul> </ul>
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" /> <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-3 w-full border-round text-center transition-colors transition-duration-300 font-bold p-ripple">Contact Us</a> <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>
@ -285,46 +285,46 @@
</div> </div>
<div class="card" style="border-radius: 50px"> <div class="card" style="border-radius: 50px">
<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-8 text-center text-surface-900">Frequently Asked Questions</span>
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12 lg:col-4 px-2 lg:px-5"> <div class="col-span-12 lg:col-span-4 px-2 lg:px-8">
<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> <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-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> <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>
<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> <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-6 p-0 line-height-3 text-lg text-800">UI Kit license is perpetual so requires one time payment, not subscription based.</p> <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>
<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> <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-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> <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>
<div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">Can I create multiple projects for multiple clients?</div> <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-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> <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>
</div> </div>
<div class="col-12 lg:col-4 px-2 lg:px-5"> <div class="col-span-12 lg:col-span-4 px-2 lg:px-8">
<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-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-6 p-0 line-height-3 text-lg text-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> <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>
<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> <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-6 p-0 line-height-3 text-lg text-800">Yes, contractors are also able to use the UI Kit within your company.</p> <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>
<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> <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-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> <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>
<div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">What does "free updates" mean?</div> <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-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> <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>
</div> </div>
<div class="col-12 lg:col-4 px-2 lg:px-5"> <div class="col-span-12 lg:col-span-4 px-2 lg:px-8">
<div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">How can I get support?</div> <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-6 p-0 line-height-3 text-lg text-800"> <p class="mt-0 mb-12 p-0 leading-normal text-lg text-surface-800">
Support is provided by PrimeTek via Support is provided by PrimeTek via
<a href="https://github.com/orgs/primefaces/discussions/categories/figma-ui-kit" class="doc-link">a dedicated forum channel monitored</a> by PrimeTek support staff. <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.
</p> </p>
<div class="text-xl text-900 line-height-3 mb-2 font-medium text-900">What does lifetime support mean?</div> <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-6 p-0 line-height-3 text-lg text-800">Support service at the forum does not have a time limit.</p> <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>
<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> <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-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> <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>
</div> </div>
</div> </div>
</div> </div>