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

PrimeOne version updates for UI Kit page

pull/4224/head
Tuğçe Küçükoğlu 2023-07-31 13:21:32 +03:00
parent 70b6040ec6
commit 616c3c9356
1 changed files with 48 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
pages/uikit/index.vue
View File

@ -37,10 +37,14 @@
<i class="pi pi-check-circle text-green-600 mr-2"></i>
<span class="font-bold">Interactive Components</span>
</li>
<li class="flex align-items-center w-12 p-3">
<li class="flex align-items-center w-6 p-3">
<i class="pi pi-check-circle text-green-600 mr-2"></i>
<span class="font-bold">Boolean, Instance Swap and Text Properties</span>
</li>
<li class="flex align-items-center w-6 p-3">
<i class="pi pi-check-circle text-green-600 mr-2"></i>
<span class="font-bold">Nested Instances</span>
</li>
</ul>
</div>
</div>
@ -73,7 +77,7 @@
<img alt="PrimeVue Designer" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png" class="w-full" />
</div>
</div>
<div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8">
<div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
<div class="w-full md:w-6">
<img alt="PrimeVue Designer" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-themes.png" class="w-full" />
</div>
@ -94,24 +98,49 @@
</ul>
</div>
</div>
<div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8">
<div class="w-full md:w-6">
<div class="text-primary font-bold mb-2">TOKENS STUDIO</div>
<div class="text-900 text-5xl font-bold mb-3">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>
<ul class="flex flex-wrap m-0 p-0 text-lg">
<li class="flex align-items-center w-6 p-3">
<i class="pi pi-check-circle text-green-600 mr-2"></i>
<span class="font-bold">Countless Design Tokens</span>
</li>
<li class="flex align-items-center w-6 p-3">
<i class="pi pi-check-circle text-green-600 mr-2"></i>
<span class="font-bold">Light and Dark Sets</span>
</li>
<li class="flex align-items-center w-12 p-3">
<i class="pi pi-check-circle text-green-600 mr-2"></i>
<span class="font-bold">Well Documented</span>
</li>
</ul>
</div>
<div class="w-full md:w-6">
<img alt="Tokens Support" src="https://primefaces.org/cdn/primevue/images/uikit/uikit-tokens.png" class="w-full" />
</div>
</div>
</div>
<div class="flex flex-column md:flex-row gap-4 md:gap-8 mb-5">
<a
href="https://www.figma.com/file/1rMJ9BAiZovyQYNUG06T0j/Preview-%7C-PrimeOne-%7C-2.0?node-id=806%3A36648&t=MnxlHT9snz8Y6DwL-1"
href="https://www.figma.com/file/OBMr8vZAodP9RsQR2XYPHh/Preview-%7C-PrimeOne-%7C-2.1?type=design&node-id=806%3A36648&mode=design&t=WvG6UHUZIPhmEx0d-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"
style="border-radius: 50px"
>
<span class="text-gray-900 text-4xl font-bold mb-5">Preview Light</span>
<img alt="PrimeVue Designer" 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-4rem" />
</a>
<a
href="https://www.figma.com/file/lwsadx20eWq3UWS4eAxCYo/Preview-%7C-Dark-%7C-PrimeOne-%7C-2.0?node-id=806%3A36648&t=Qw2Pi6W4Q4rtbnZ5-1"
href="https://www.figma.com/file/26zWEQAb8MuS6lGIhJQXE6/Preview-%7C-Dark-%7C-PrimeOne-%7C-2.1?type=design&node-id=806%3A36648&mode=design&t=SPpYKnTpkKLsk0qA-1"
class="p-5 w-6 bg-gray-900 flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300"
style="border-radius: 50px"
>
<span class="text-white text-4xl font-bold mb-5">Preview Dark</span>
<img alt="PrimeVue Designer" 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-4rem" />
</a>
</div>
@ -144,6 +173,10 @@
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Interactive Components</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Tokens Studio Support</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Lifetime Support</span>
@ -184,6 +217,10 @@
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Interactive Components</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Tokens Studio Support</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Lifetime Support</span>
@ -224,6 +261,10 @@
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Interactive Components</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Tokens Studio Support</span>
</li>
<li class="flex align-items-center mb-3">
<i class="pi pi-check-circle text-green-500 mr-2"></i>
<span>Lifetime Support</span>
@ -299,7 +340,7 @@ export default {
},
computed: {
coverImage() {
const image = this.$appState.darkTheme ? 'images/uikit/primeone-cover-dark.jpg' : 'images/uikit/primeone-cover-light.jpg';
const image = this.$appState.darkTheme ? 'images/uikit/primeone-cover-dark.jpeg' : 'images/uikit/primeone-cover-light.jpeg';
return 'https://primefaces.org/cdn/primevue/' + image;
}