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

Update UI Kit page content

pull/6711/head^2
Onur Senture 2024-11-05 10:33:53 +03:00
parent 6819236a21
commit 5484499323
1 changed files with 14 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
apps/showcase/pages/uikit/index.vue
View File

@ -18,7 +18,7 @@
<div class="w-full md:w-6/12"> <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-5xl font-bold mb-4">Best Features of Figma</div> <div class="text-5xl font-bold mb-4">Best Features of Figma</div>
<p class="mb-4 text-lg">PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles and interactive components. It'll always follow the best practices.</p> <p class="mb-4 text-lg">PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles, variables 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 items-center w-6/12 p-4"> <li class="flex items-center w-6/12 p-4">
@ -31,7 +31,7 @@
</li> </li>
<li class="flex items-center w-6/12 p-4"> <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">Variables and Styles</span>
</li> </li>
<li class="flex items-center w-6/12 p-4"> <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>
@ -84,16 +84,16 @@
<div class="w-full md:w-6/12"> <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-5xl font-bold mb-4">Two Themes</div> <div class="text-5xl font-bold mb-4">Two Themes</div>
<p class="mb-4 text-lg">PrimeOne is designed based on Lara Blue Light and Lara Blue Dark themes. Easily change the themes of your designs using Figma's Swap Library feature.</p> <p class="mb-4 text-lg">PrimeOne is designed based on Aura Light and Aura Dark themes. Easily change the themes of your designs using Figma's Swap Library feature or Tokens Studio Sets.</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 items-center w-6/12 p-4"> <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">Aura Light</span>
</li> </li>
<li class="flex items-center w-6/12 p-4"> <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">Aura Dark</span>
</li> </li>
</ul> </ul>
</div> </div>
@ -113,10 +113,14 @@
<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 items-center w-full p-4"> <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">Well Documented</span> <span class="font-bold">Well Documented</span>
</li> </li>
<li class="flex items-center w-6/12 p-4">
<i class="pi pi-check-circle text-green-600 mr-2"></i>
<span class="font-bold">Primitive, Semantic and Component Tokens</span>
</li>
</ul> </ul>
</div> </div>
<div class="w-full md:w-6/12"> <div class="w-full md:w-6/12">
@ -125,23 +129,15 @@
</div> </div>
</div> </div>
<div class="flex flex-col md:flex-row gap-6 md:gap-20 mb-8"> <div class="flex flex-col md:flex-row 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/design/zSNx4gzCQBanAoT3fMRlhH/Preview-%7C-PrimeOne-%7C-3.0?node-id=806-36648&t=guCqX6GemTXw9rhG-1"
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" class="p-8 w-full 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-8">Preview Light</span> <span class="text-gray-900 text-4xl font-bold mb-8">Preview</span>
<img alt="Figma Light" src="https://primefaces.org/cdn/primevue/images/uikit/logo-figma-light.svg" class="w-16" /> <img alt="Figma Light" src="https://primefaces.org/cdn/primevue/images/uikit/logo-figma-light.svg" class="w-16" />
</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"
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"
>
<span class="text-white text-4xl font-bold mb-8">Preview Dark</span>
<img alt="Figma Dark" src="https://primefaces.org/cdn/primevue/images/uikit/logo-figma-dark.svg" class="w-16" />
</a>
</div> </div>
<div class="card mb-8" style="border-radius: 50px"> <div class="card mb-8" style="border-radius: 50px">