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

Migrated landing

pull/5806/head
Cagatay Civici 2024-05-20 14:56:52 +03:00
parent 89e378574a
commit ba8aea6797
11 changed files with 332 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/styles/layout/_core.scss
View File

@ -66,7 +66,7 @@ h6 {
} }
p { p {
line-height: 1.75; line-height: 1.625;
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
} }

1
assets/styles/layout/landing/_main.scss
View File

@ -60,7 +60,6 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color: var(--text-color); color: var(--text-color);
padding: 0.5rem 1rem;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
background-color: var(--card-background); background-color: var(--card-background);
border-radius: 10px; border-radius: 10px;

344
components/landing/BlockSection.vue
View File

@ -1,37 +1,37 @@
<template> <template>
<section id="blocks-section" class="landing-blocks pt-8 overflow-hidden"> <section id="blocks-section" class="landing-blocks pt-20 overflow-hidden">
<div class="section-header">Blocks</div> <div class="section-header">Blocks</div>
<p class="section-detail">400+ ready to copy-paste UI blocks to build spectacular applications in no time.</p> <p class="section-detail">400+ ready to copy-paste UI blocks to build spectacular applications in no time.</p>
<div class="flex justify-content-center mt-4"> <div class="flex justify-center mt-6">
<a href="https://blocks.primevue.org" class="font-semibold p-3 border-round flex align-items-center linkbox active z-2"> <a href="https://blocks.primevue.org" class="font-semibold py-4 px-6 rounded flex items-center linkbox active z-20">
<span>Explore All</span> <span>Explore All</span>
<i class="pi pi-arrow-right ml-2"></i> <i class="pi pi-arrow-right ml-2"></i>
</a> </a>
</div> </div>
<section :class="['prime-blocks flex justify-content-center align-items-center flex-column z-1', { 'blocks-animation': setAnimation }]"> <section :class="['prime-blocks flex justify-center items-center flex-col z-1', { 'blocks-animation': setAnimation }]">
<div class="flex"> <div class="flex">
<div class="prime-block flex align-self-stretch p-1"> <div class="prime-block flex self-stretch p-1">
<div class="block-sidebar w-1 p-3"> <div class="block-sidebar w-1/12 p-4">
<div class="logo"> <div class="logo">
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" /> <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" />
</div> </div>
<div class="sidebar-menu mt-5"> <div class="sidebar-menu mt-8">
<div class="bar w-8 my-3"></div> <div class="bar w-8/12 my-4"></div>
<div class="bar w-9 my-3"></div> <div class="bar w-9/12 my-4"></div>
<div class="bar w-7 my-3"></div> <div class="bar w-7/12 my-4"></div>
<div class="bar w-6 my-3"></div> <div class="bar w-6/12 my-4"></div>
<div class="bar w-9 my-3"></div> <div class="bar w-9/12 my-4"></div>
</div> </div>
</div> </div>
<div class="block-content flex-1 p-4 flex flex-column"> <div class="block-content flex-1 p-6 flex flex-col">
<div class="bar w-1"></div> <div class="bar w-1/12"></div>
<div class="block-main mt-4 h-full flex justify-content-center align-items-center flex-column"> <div class="block-main mt-6 h-full flex justify-center items-center flex-col">
<div class="flex justify-content-between"> <div class="flex justify-between">
<div class="block-item w-6rem"> <div class="block-item w-24">
<div class="flex justify-content-between"> <div class="flex justify-between">
<div> <div>
<div class="bar w-2rem mt-2"></div> <div class="bar w-8 mt-2"></div>
<div class="bar w-4rem mt-3"></div> <div class="bar w-16 mt-4"></div>
</div> </div>
<div> <div>
<div class="flex-1"> <div class="flex-1">
@ -40,22 +40,22 @@
</div> </div>
</div> </div>
</div> </div>
<div class="block-item block-item-active animation-1 mx-3 w-6rem"> <div class="block-item block-item-active animation-1 mx-4 w-24">
<div class="flex justify-content-between"> <div class="flex justify-between">
<div> <div>
<div class="bar w-2rem mt-2"></div> <div class="bar w-8 mt-2"></div>
<div class="bar w-4rem mt-3"></div> <div class="bar w-16 mt-4"></div>
</div> </div>
<div> <div>
<div class="circle"></div> <div class="circle"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="block-item w-6rem"> <div class="block-item w-24">
<div class="flex justify-content-between"> <div class="flex justify-between">
<div> <div>
<div class="bar w-2rem mt-2"></div> <div class="bar w-8 mt-2"></div>
<div class="bar w-4rem mt-3"></div> <div class="bar w-16 mt-4"></div>
</div> </div>
<div> <div>
<div class="circle circle-highligh"></div> <div class="circle circle-highligh"></div>
@ -63,34 +63,34 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex justify-content-between mt-3"> <div class="flex justify-between mt-4">
<div class="block-item w-6rem"> <div class="block-item w-24">
<div class="flex justify-content-between"> <div class="flex justify-between">
<div> <div>
<div class="bar w-2rem mt-2"></div> <div class="bar w-8 mt-2"></div>
<div class="bar w-4rem mt-3"></div> <div class="bar w-16 mt-4"></div>
</div> </div>
<div> <div>
<div class="circle circle-highligh"></div> <div class="circle circle-highligh"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="block-item mx-3 w-6rem"> <div class="block-item mx-4 w-24">
<div class="flex justify-content-between"> <div class="flex justify-between">
<div> <div>
<div class="bar w-2rem mt-2"></div> <div class="bar w-8 mt-2"></div>
<div class="bar w-4rem mt-3"></div> <div class="bar w-16 mt-4"></div>
</div> </div>
<div> <div>
<div class="circle circle-highligh"></div> <div class="circle circle-highligh"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="block-item w-6rem"> <div class="block-item w-24">
<div class="flex justify-content-between"> <div class="flex justify-between">
<div> <div>
<div class="bar w-2rem mt-2"></div> <div class="bar w-8 mt-2"></div>
<div class="bar w-4rem mt-3"></div> <div class="bar w-16 mt-4"></div>
</div> </div>
<div> <div>
<div class="circle circle-highligh"></div> <div class="circle circle-highligh"></div>
@ -102,42 +102,42 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex -ml-8"> <div class="flex -ml-20">
<div class="prime-block p-1 flex align-self-stretch flex-column"> <div class="prime-block p-1 flex self-stretch flex-col">
<div class="block-header py-3 px-4 flex justify-content-between align-items-center"> <div class="block-header py-4 px-6 flex justify-between items-center">
<div class="logo pr-5"> <div class="logo pr-8">
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" /> <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" />
</div> </div>
<div class="flex-auto sidebar-menu flex"> <div class="flex-auto sidebar-menu flex">
<div class="bar w-2rem mx-2"></div> <div class="bar w-8 mx-2"></div>
<div class="bar w-2rem mx-2"></div> <div class="bar w-8 mx-2"></div>
<div class="bar w-2rem mx-2"></div> <div class="bar w-8 mx-2"></div>
<div class="bar w-2rem mx-2"></div> <div class="bar w-8 mx-2"></div>
<div class="bar w-2rem mx-2"></div> <div class="bar w-8 mx-2"></div>
</div> </div>
<div class="circle circle-highlight"></div> <div class="circle circle-highlight"></div>
</div> </div>
<div class="block-content flex-1 p-4 flex flex-column"> <div class="block-content flex-1 p-6 flex flex-col">
<div class="bar w-1"></div> <div class="bar w-1/12"></div>
<div class="block-main mt-4 h-full flex justify-content-center align-items-center flex-column"> <div class="block-main mt-6 h-full flex justify-center items-center flex-col">
<div class="flex justify-content-between"> <div class="flex justify-between">
<div class="block-item w-4rem"> <div class="block-item w-16">
<div class="bar w-2rem"></div> <div class="bar w-8"></div>
<span class="text my-2">26 %</span> <span class="text my-2">26 %</span>
<div class="box box-orange"></div> <div class="box box-orange"></div>
</div> </div>
<div class="block-item block-item-active animation-2 ml-3 mr-3 w-4rem"> <div class="block-item block-item-active animation-2 ml-4 mr-4 w-16">
<div class="bar w-1rem"></div> <div class="bar w-4"></div>
<span class="text my-2">6 %</span> <span class="text my-2">6 %</span>
<div class="box box-pink"></div> <div class="box box-pink"></div>
</div> </div>
<div class="block-item mr-3 w-4rem"> <div class="block-item mr-4 w-16">
<div class="bar w-4rem"></div> <div class="bar w-16"></div>
<span class="text my-2">62 %</span> <span class="text my-2">62 %</span>
<div class="box box-green"></div> <div class="box box-green"></div>
</div> </div>
<div class="block-item w-4rem"> <div class="block-item w-16">
<div class="bar w-2rem"></div> <div class="bar w-8"></div>
<span class="text my-2">39 %</span> <span class="text my-2">39 %</span>
<div class="box box-blue"></div> <div class="box box-blue"></div>
</div> </div>
@ -145,96 +145,96 @@
</div> </div>
</div> </div>
</div> </div>
<div class="prime-block flex align-self-stretch p-1"> <div class="prime-block flex self-stretch p-1">
<div class="block-sidebar p-3"> <div class="block-sidebar p-4">
<div class="logo"> <div class="logo">
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-2.svg" alt="block logo" /> <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-2.svg" alt="block logo" />
</div> </div>
<div class="sidebar-menu mt-5"> <div class="sidebar-menu mt-8">
<div class="circle my-3"></div> <div class="circle my-4"></div>
<div class="circle my-3"></div> <div class="circle my-4"></div>
<div class="circle my-3"></div> <div class="circle my-4"></div>
</div> </div>
</div> </div>
<div class="block-sidebar-list px-4"> <div class="block-sidebar-list px-6">
<div class="bar w-2rem my-3"></div> <div class="bar w-8 my-4"></div>
<div class="bar w-3rem my-3"></div> <div class="bar w-12 my-4"></div>
<div class="bar w-2rem my-3"></div> <div class="bar w-8 my-4"></div>
<div class="bar w-2rem my-3"></div> <div class="bar w-8 my-4"></div>
<div class="bar w-1rem my-3"></div> <div class="bar w-4 my-4"></div>
<div class="bar w-3rem my-3"></div> <div class="bar w-12 my-4"></div>
<div class="bar w-3rem my-3"></div> <div class="bar w-12 my-4"></div>
<div class="bar w-2rem my-3"></div> <div class="bar w-8 my-4"></div>
</div> </div>
<div class="block-content flex-1 my-5 mx-4 flex flex-column"> <div class="block-content flex-1 my-8 mx-6 flex flex-col">
<div class="block-main h-full flex justify-content-center align-items-center flex-column px-2"> <div class="block-main h-full flex justify-center items-center flex-col px-2">
<div class="flex justify-content-between"> <div class="flex justify-between">
<div class="block-item w-3 flex justify-content-between flex-column"> <div class="block-item w-3/12 flex justify-between flex-col">
<div class="bar w-full"></div> <div class="bar w-full"></div>
<div class="flex align-items-center mt-3"> <div class="flex items-center mt-4">
<div class="circle circle-small circle-highlight mr-2"></div> <div class="circle circle-small circle-highlight mr-2"></div>
<div class="bar w-2rem"></div> <div class="bar w-8"></div>
</div> </div>
<div class="bar bar-button w-4rem mt-4"></div> <div class="bar bar-button w-16 mt-6"></div>
</div> </div>
<div class="block-item block-item-active animation-3 mx-3 w-3 flex justify-content-between flex-column"> <div class="block-item block-item-active animation-3 mx-4 w-3/12 flex justify-between flex-col">
<div class="bar w-full"></div> <div class="bar w-full"></div>
<div class="flex align-items-center mt-3"> <div class="flex items-center mt-4">
<div class="circle circle-small circle-highlight mr-2"></div> <div class="circle circle-small circle-highlight mr-2"></div>
<div class="bar w-2rem"></div> <div class="bar w-8"></div>
</div> </div>
<div class="flex align-items-center mt-3"> <div class="flex items-center mt-4">
<div class="circle circle-small circle-highlight mr-2"></div> <div class="circle circle-small circle-highlight mr-2"></div>
<div class="bar w-3rem"></div> <div class="bar w-12"></div>
</div> </div>
<div class="bar bar-button w-4rem mt-4"></div> <div class="bar bar-button w-16 mt-6"></div>
</div> </div>
<div class="block-item w-3 flex justify-content-between flex-column"> <div class="block-item w-3/12 flex justify-between flex-col">
<div class="bar w-full"></div> <div class="bar w-full"></div>
<div class="flex align-items-center mt-3"> <div class="flex items-center mt-4">
<div class="circle circle-small circle-highlight mr-2"></div> <div class="circle circle-small circle-highlight mr-2"></div>
<div class="bar w-2rem"></div> <div class="bar w-8"></div>
</div> </div>
<div class="flex align-items-center mt-3"> <div class="flex items-center mt-4">
<div class="circle circle-small circle-highlight mr-2"></div> <div class="circle circle-small circle-highlight mr-2"></div>
<div class="bar w-2rem"></div> <div class="bar w-8"></div>
</div> </div>
<div class="flex align-items-center mt-3"> <div class="flex items-center mt-4">
<div class="circle circle-small circle-highlight mr-2"></div> <div class="circle circle-small circle-highlight mr-2"></div>
<div class="bar w-2rem"></div> <div class="bar w-8"></div>
</div> </div>
<div class="bar bar-button w-4rem mt-4"></div> <div class="bar bar-button w-16 mt-6"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex -mr-8"> <div class="flex -mr-20">
<div class="prime-block flex align-self-stretch p-1"> <div class="prime-block flex self-stretch p-1">
<div class="block-sidebar w-1 p-3"> <div class="block-sidebar w-1/12 p-4">
<div class="logo"> <div class="logo">
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" /> <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" />
</div> </div>
<div class="sidebar-menu mt-5"> <div class="sidebar-menu mt-8">
<div class="bar w-8 my-3"></div> <div class="bar w-8/12 my-4"></div>
<div class="bar w-9 my-3"></div> <div class="bar w-9/12 my-4"></div>
<div class="bar w-7 my-3"></div> <div class="bar w-7/12 my-4"></div>
<div class="bar w-6 my-3"></div> <div class="bar w-6/12 my-4"></div>
<div class="bar w-9 my-3"></div> <div class="bar w-9/12 my-4"></div>
</div> </div>
</div> </div>
<div class="block-content flex-1 p-4 flex flex-column"> <div class="block-content flex-1 p-6 flex flex-col">
<div class="block-main h-full flex justify-content-center align-items-center flex-column"> <div class="block-main h-full flex justify-center items-center flex-col">
<div class="bar w-3 mb-3"></div> <div class="bar w-3/12 mb-4"></div>
<div class="bar w-4 mb-5"></div> <div class="bar w-4/12 mb-8"></div>
<div class="flex justify-content-between"> <div class="flex justify-between">
<div class="block-item w-6rem p-0"> <div class="block-item w-24 p-0">
<div class="block-image"></div> <div class="block-image"></div>
<div class="p-2"> <div class="p-2">
<div> <div>
<div class="bar w-4rem my-2"></div> <div class="bar w-16 my-2"></div>
<div class="bar w-2rem mb-2"></div> <div class="bar w-8 mb-2"></div>
</div> </div>
<div> <div>
<div class="flex-1"> <div class="flex-1">
@ -243,12 +243,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="block-item block-item-active mx-3 animation-1 w-6rem p-0"> <div class="block-item block-item-active mx-4 animation-1 w-24 p-0">
<div class="block-image"></div> <div class="block-image"></div>
<div class="p-2"> <div class="p-2">
<div> <div>
<div class="bar w-4rem my-2"></div> <div class="bar w-16 my-2"></div>
<div class="bar w-2rem mb-2"></div> <div class="bar w-8 mb-2"></div>
</div> </div>
<div> <div>
<div class="flex-1"> <div class="flex-1">
@ -257,12 +257,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="block-item w-6rem p-0"> <div class="block-item w-24 p-0">
<div class="block-image"></div> <div class="block-image"></div>
<div class="p-2"> <div class="p-2">
<div> <div>
<div class="bar w-4rem my-2"></div> <div class="bar w-16 my-2"></div>
<div class="bar w-2rem mb-2"></div> <div class="bar w-8 mb-2"></div>
</div> </div>
<div> <div>
<div class="flex-1"> <div class="flex-1">
@ -275,95 +275,95 @@
</div> </div>
</div> </div>
</div> </div>
<div class="prime-block flex align-self-stretch p-1"> <div class="prime-block flex self-stretch p-1">
<div class="block-sidebar p-3"> <div class="block-sidebar p-4">
<div class="logo"> <div class="logo">
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-2.svg" alt="block logo" /> <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-2.svg" alt="block logo" />
</div> </div>
<div class="sidebar-menu mt-5"> <div class="sidebar-menu mt-8">
<div class="circle my-3"></div> <div class="circle my-4"></div>
<div class="circle my-3"></div> <div class="circle my-4"></div>
<div class="circle my-3"></div> <div class="circle my-4"></div>
</div> </div>
</div> </div>
<div class="block-sidebar-list px-4"> <div class="block-sidebar-list px-6">
<div class="bar w-2rem my-3"></div> <div class="bar w-8 my-4"></div>
<div class="bar w-3rem my-3"></div> <div class="bar w-12 my-4"></div>
<div class="bar w-2rem my-3"></div> <div class="bar w-8 my-4"></div>
<div class="bar w-2rem my-3"></div> <div class="bar w-8 my-4"></div>
<div class="bar w-1rem my-3"></div> <div class="bar w-4 my-4"></div>
<div class="bar w-3rem my-3"></div> <div class="bar w-12 my-4"></div>
<div class="bar w-3rem my-3"></div> <div class="bar w-12 my-4"></div>
<div class="bar w-2rem my-3"></div> <div class="bar w-8 my-4"></div>
</div> </div>
<div class="block-content flex-1 my-5 mx-4 flex flex-column"> <div class="block-content flex-1 my-8 mx-6 flex flex-col">
<div class="block-main h-full flex justify-content-center align-items-center flex-column px-2"> <div class="block-main h-full flex justify-center items-center flex-col px-2">
<div class="flex justify-content-between"> <div class="flex justify-between">
<div class="block-item block-item-table block-item-active animation-1 flex"> <div class="block-item block-item-table block-item-active animation-1 flex">
<div class="bar w-3rem mx-3"></div> <div class="bar w-12 mx-4"></div>
<div class="bar w-3rem mx-3"></div> <div class="bar w-12 mx-4"></div>
<div class="bar w-3rem mx-3"></div> <div class="bar w-12 mx-4"></div>
<div class="bar w-3rem mx-3"></div> <div class="bar w-12 mx-4"></div>
</div> </div>
</div> </div>
<div class="block-item block-item-col flex"> <div class="block-item block-item-col flex">
<div class="flex"> <div class="flex">
<div class="circle circle-small circle-highlight -mr-1"></div> <div class="circle circle-small circle-highlight -mr-1"></div>
<div class="bar w-3rem mx-3"></div> <div class="bar w-12 mx-4"></div>
</div> </div>
<div class="bar w-3rem mx-3"></div> <div class="bar w-12 mx-4"></div>
<div class="bar w-3rem mx-3"></div> <div class="bar w-12 mx-4"></div>
<div class="bar w-3rem mx-3"></div> <div class="bar w-12 mx-4"></div>
</div> </div>
<div class="block-item block-item-col flex"> <div class="block-item block-item-col flex">
<div class="flex"> <div class="flex">
<div class="circle circle-small circle-highlight -mr-1"></div> <div class="circle circle-small circle-highlight -mr-1"></div>
<div class="bar w-3rem mx-3"></div> <div class="bar w-12 mx-4"></div>
</div> </div>
<div class="bar w-3rem mx-3"></div> <div class="bar w-12 mx-4"></div>
<div class="bar w-3rem mx-3"></div> <div class="bar w-12 mx-4"></div>
<div class="bar w-3rem mx-3"></div> <div class="bar w-12 mx-4"></div>
</div> </div>
<div class="block-item block-item-col flex"> <div class="block-item block-item-col flex">
<div class="flex"> <div class="flex">
<div class="circle circle-small circle-highlight -mr-1"></div> <div class="circle circle-small circle-highlight -mr-1"></div>
<div class="bar w-3rem mx-3"></div> <div class="bar w-12 mx-4"></div>
</div> </div>
<div class="bar w-3rem mx-3"></div> <div class="bar w-12 mx-4"></div>
<div class="bar w-3rem mx-3"></div> <div class="bar w-12 mx-4"></div>
<div class="bar w-3rem mx-3"></div> <div class="bar w-12 mx-4"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">
<div class="prime-block p-1 flex align-self-stretch flex-column"> <div class="prime-block p-1 flex self-stretch flex-col">
<div class="block-header py-3 px-4 flex justify-content-between align-items-center"> <div class="block-header py-4 px-6 flex justify-between items-center">
<div class="logo pr-5"> <div class="logo pr-8">
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" /> <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/logo-1.svg" alt="block logo" />
</div> </div>
<div class="flex-auto sidebar-menu flex"> <div class="flex-auto sidebar-menu flex">
<div class="bar w-2rem mx-2"></div> <div class="bar w-8 mx-2"></div>
<div class="bar w-2rem mx-2"></div> <div class="bar w-8 mx-2"></div>
<div class="bar w-2rem mx-2"></div> <div class="bar w-8 mx-2"></div>
<div class="bar w-2rem mx-2"></div> <div class="bar w-8 mx-2"></div>
<div class="bar w-2rem mx-2"></div> <div class="bar w-8 mx-2"></div>
</div> </div>
<div class="circle"></div> <div class="circle"></div>
</div> </div>
<div class="block-content flex-1 p-4 flex flex-column"> <div class="block-content flex-1 p-6 flex flex-col">
<div class="block-main h-full flex justify-content-center align-items-center flex-column"> <div class="block-main h-full flex justify-center items-center flex-col">
<div class="block-item block-item-active animation-2 mx-3 w-8rem text-center flex flex-column align-items-center overflow-visible"> <div class="block-item block-item-active animation-2 mx-4 w-32 text-center flex flex-col items-center overflow-visible">
<div class="-mt-4"> <div class="-mt-6">
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks/question.svg" alt="question mark" /> <img src="https://primefaces.org/cdn/primevue/images/landing/blocks/question.svg" alt="question mark" />
</div> </div>
<div class="bar w-2rem mt-2"></div> <div class="bar w-8 mt-2"></div>
<div class="bar w-6rem mt-2"></div> <div class="bar w-24 mt-2"></div>
<div class="bar w-4rem mt-2"></div> <div class="bar w-16 mt-2"></div>
<div class="flex"> <div class="flex">
<div class="bar bar-highlight bar-button w-4rem mr-2 mt-4"></div> <div class="bar bar-highlight bar-button w-16 mr-2 mt-6"></div>
<div class="bar bar-button w-4rem mr-2 mt-4"></div> <div class="bar bar-button w-16 mr-2 mt-6"></div>
</div> </div>
</div> </div>
</div> </div>

70
components/landing/FeaturesSection.vue
View File

@ -1,63 +1,63 @@
<template> <template>
<section class="landing-features py-8"> <section class="landing-features py-20">
<div class="section-header">Features</div> <div class="section-header">Features</div>
<p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p> <p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p>
<div class="mt-7 px-5 lg:px-8"> <div class="mt-16 px-8 lg:px-20">
<div class="features-container"> <div class="features-container">
<div class="grid"> <div class="grid grid-cols-12 gap-4">
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center"> <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-3 text-lg">80+ UI Components</div> <div class="font-semibold mb-4 text-lg">80+ UI Components</div>
<p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 80+ impressive Vue Components.</p> <p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 80+ impressive Vue Components.</p>
</div> </div>
</div> </div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center"> <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-3 text-lg">Styled or Unstyled</div> <div class="font-semibold mb-4 text-lg">Styled or Unstyled</div>
<p class="m-0 text-secondary font-medium">Choose from a variety of pre-built themes or implement your design systems with the CSS library of your choice like TailwindCSS.</p> <p class="m-0 text-secondary font-medium">Choose from a variety of pre-built themes or implement your design systems with the CSS library of your choice like TailwindCSS.</p>
</div> </div>
</div> </div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center"> <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-community.svg" alt="components icon" class="block mb-3" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-community.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-3 text-lg">Community</div> <div class="font-semibold mb-4 text-lg">Community</div>
<p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p> <p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
</div> </div>
</div> </div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center"> <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-3 text-lg">Accessibility</div> <div class="font-semibold mb-4 text-lg">Accessibility</div>
<p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p> <p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
</div> </div>
</div> </div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center"> <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-support.svg" alt="components icon" class="block mb-3" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-support.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-3 text-lg">Enterprise Support</div> <div class="font-semibold mb-4 text-lg">Enterprise Support</div>
<p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p> <p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
</div> </div>
</div> </div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center"> <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-3" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-3 text-lg">Mobile</div> <div class="font-semibold mb-4 text-lg">Mobile</div>
<p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p> <p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
</div> </div>
</div> </div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center"> <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-3 text-lg">Blocks</div> <div class="font-semibold mb-4 text-lg">Blocks</div>
<p class="m-0 text-secondary font-medium">400+ pre-designed copy paste ready UI blocks to build spectacular apps in no time.</p> <p class="m-0 text-secondary font-medium">400+ pre-designed copy paste ready UI blocks to build spectacular apps in no time.</p>
</div> </div>
</div> </div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center"> <div class="col-span-12 md:col-span-6 xl:col-span-3 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500"> <div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animate-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-3" /> <img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-4" />
<div class="font-semibold mb-3 text-lg">Typescript</div> <div class="font-semibold mb-4 text-lg">Typescript</div>
<p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p> <p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
</div> </div>
</div> </div>

90
components/landing/FooterSection.vue
View File

@ -1,76 +1,76 @@
<template> <template>
<section class="landing-footer pt-8 px-5 lg:px-8"> <section class="landing-footer pt-20 px-8 lg:px-20">
<div class="landing-footer-container"> <div class="landing-footer-container">
<div class="flex flex-wrap z-1"> <div class="flex flex-wrap z-10">
<div class="w-6 lg:w-3 flex"> <div class="w-6/12 lg:w-3/12 flex">
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mb-5">General</li> <li class="font-bold mb-8">General</li>
<li class="mb-4"> <li class="mb-6">
<PrimeVueNuxtLink to="/setup" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Get Started</PrimeVueNuxtLink> <PrimeVueNuxtLink to="/setup" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">Get Started</PrimeVueNuxtLink>
</li> </li>
<li class="mb-4"> <li class="mb-6">
<a href="https://github.com/primefaces/primevue-examples" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Examples</a> <a href="https://github.com/primefaces/primevue-examples" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Examples</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="w-6 lg:w-3 flex"> <div class="w-6/12 lg:w-3/12 flex">
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mb-5">Support</li> <li class="font-bold mb-8">Support</li>
<li class="mb-4"> <li class="mb-6">
<a href="https://github.com/orgs/primefaces/discussions" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Forum</a> <a href="https://github.com/orgs/primefaces/discussions" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Forum</a>
</li> </li>
<li class="mb-4"> <li class="mb-6">
<a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Discord</a> <a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Discord</a>
</li> </li>
<li class="mb-4"> <li class="mb-6">
<PrimeVueNuxtLink to="/support" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">PRO Support</PrimeVueNuxtLink> <PrimeVueNuxtLink to="/support" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">PRO Support</PrimeVueNuxtLink>
</li> </li>
</ul> </ul>
</div> </div>
<div class="w-6 lg:w-3 flex"> <div class="w-6/12 lg:w-3/12 flex">
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li> <li class="font-bold mt-8 lg:mt-0 mb-8">Theming</li>
<li class="mb-4"> <li class="mb-6">
<PrimeVueNuxtLink to="/theming/styled" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Styled Mode</PrimeVueNuxtLink> <PrimeVueNuxtLink to="/theming/styled" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">Styled Mode</PrimeVueNuxtLink>
</li> </li>
<li class="mb-4"> <li class="mb-6">
<PrimeVueNuxtLink to="/theming/unstyled" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Unstyled Mode</PrimeVueNuxtLink> <PrimeVueNuxtLink to="/theming/unstyled" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">Unstyled Mode</PrimeVueNuxtLink>
</li> </li>
</ul> </ul>
</div> </div>
<div class="w-6 lg:w-3 flex"> <div class="w-6/12 lg:w-3/12 flex">
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mt-5 lg:mt-0 mb-5">Resources</li> <li class="font-bold mt-8 lg:mt-0 mb-8">Resources</li>
<li class="mb-4"> <li class="mb-6">
<a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer" <a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer"
>PrimeTV</a >PrimeTV</a
> >
</li> </li>
<li class="mb-4"> <li class="mb-6">
<a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Store</a> <a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Store</a>
</li> </li>
<li class="mb-4"> <li class="mb-6">
<a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Source Code</a> <a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Source Code</a>
</li> </li>
<li class="mb-4"> <li class="mb-6">
<a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Twitter</a> <a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Twitter</a>
</li> </li>
<li class="mb-4"> <li class="mb-6">
<a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">Newsletter</a> <a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">Newsletter</a>
</li> </li>
<li class="mb-4"> <li class="mb-6">
<a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300" target="_blank" rel="noopener noreferrer">PrimeGear</a> <a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300" target="_blank" rel="noopener noreferrer">PrimeGear</a>
</li> </li>
<li class="mb-4"> <li class="mb-6">
<a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Contact Us</a> <a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary rounded transition-all duration-300">Contact Us</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<hr class="section-divider mt-8" /> <hr class="section-divider mt-20" />
<div class="flex flex-wrap justify-content-between py-6 gap-5"> <div class="flex flex-wrap justify-between py-12 gap-8">
<span> <span>
<svg width="165" height="40" viewBox="0 0 165 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 120px"> <svg width="165" height="40" viewBox="0 0 165 40" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 120px">
<path <path
@ -115,17 +115,17 @@
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0297 0L17.1214 13.1536L22.5526 0H12.0297Z" fill="var(--primary-color)" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0297 0L17.1214 13.1536L22.5526 0H12.0297Z" fill="var(--primary-color)" />
</svg> </svg>
</span> </span>
<div class="flex align-items-center gap-2"> <div class="flex items-center gap-2">
<a href="https://twitter.com/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center"> <a href="https://twitter.com/primevue" class="linkbox w-12 h-12 flex items-center justify-center">
<i class="pi pi-twitter"></i> <i class="pi pi-twitter"></i>
</a> </a>
<a href="https://github.com/primefaces/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center"> <a href="https://github.com/primefaces/primevue" class="linkbox w-12 h-12 flex items-center justify-center">
<i class="pi pi-github"></i> <i class="pi pi-github"></i>
</a> </a>
<a href="https://discord.gg/gzKFYnpmCY" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center"> <a href="https://discord.gg/gzKFYnpmCY" class="linkbox w-12 h-12 flex items-center justify-center">
<i class="pi pi-discord"></i> <i class="pi pi-discord"></i>
</a> </a>
<a href="https://github.com/orgs/primefaces/discussions" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center"> <a href="https://github.com/orgs/primefaces/discussions" class="linkbox w-12 h-12 flex items-center justify-center">
<i class="pi pi-comments"></i> <i class="pi pi-comments"></i>
</a> </a>
</div> </div>

92
components/landing/HeroSection.vue
View File

@ -1,36 +1,36 @@
<template> <template>
<section class="landing-hero py-8 px-5 lg:px-8"> <section class="landing-hero py-20 px-8 lg:px-20">
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="w-full xl:w-6 flex flex-column justify-content-center lg:pr-8 align-items-center xl:align-items-stretch"> <div class="w-full xl:w-6/12 flex flex-col justify-center lg:pr-20 items-center xl:items-stretch">
<h1 class="text-6xl font-bold text-center xl:text-left">The Next-Gen UI Suite for <span class="font-bold text-primary">Vue.js</span></h1> <h1 class="text-5xl font-bold text-center xl:text-left leading-tight">The Next-Gen UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
<p class="section-detail xl:text-left text-center px-0 mt-0 mb-5"> <p class="xl:text-left text-center px-0 mt-0 mb-8 text-surface-500 dark:text-surface-400 font-medium text-xl leading-relaxed">
Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier. Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier.
</p> </p>
<div class="flex align-items-center gap-3"> <div class="flex items-center gap-4">
<PrimeVueNuxtLink to="/setup" class="linkbox active font-semibold py-3 px-4"> <PrimeVueNuxtLink to="/setup" class="linkbox active font-semibold py-4 px-6">
<span>Get Started</span> <span>Get Started</span>
<i class="pi pi-arrow-right ml-3"></i> <i class="pi pi-arrow-right ml-4"></i>
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
<a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox font-semibold py-3 px-4"> <a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox font-semibold py-4 px-6">
<span>Give a Star</span> <span>Give a Star</span>
<i class="pi pi-star-fill ml-3 text-yellow-500"></i> <i class="pi pi-star-fill ml-4 text-yellow-500"></i>
</a> </a>
</div> </div>
</div> </div>
<div class="w-full xl:w-6 pt-7 xl:pt-0 hidden md:block"> <div class="w-full xl:w-6/12 pt-16 xl:pt-0 hidden md:block">
<div class="flex"> <div class="flex">
<div class="flex flex-column w-6 gap-5 pt-8 pr-3"> <div class="flex flex-col w-6/12 gap-8 pt-20 pr-4">
<div class="box p-4 fadein animation-duration-500"> <div class="box p-6 animate-fadein animate-duration-500">
<div class="flex gap-2"> <div class="flex gap-2">
<div class="w-6rem flex-shrink-0"> <div class="w-24 flex-shrink-0">
<span class="text-secondary font-medium block mb-3">Amount</span> <span class="text-secondary font-medium block mb-4">Amount</span>
<InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="w-full" /> <InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="w-full" />
</div> </div>
<div class="flex-auto" style="width: 1%"> <div class="flex-auto" style="width: 1%">
<span class="text-secondary font-semibold block mb-3">Beneficiary</span> <span class="text-secondary font-semibold block mb-4">Beneficiary</span>
<Select v-model="user" :options="users" optionLabel="name" placeholder="Select a User" class="w-full"> <Select v-model="user" :options="users" optionLabel="name" placeholder="Select a User" class="w-full">
<template #option="slotProps"> <template #option="slotProps">
<div class="flex align-items-center gap-2"> <div class="flex items-center gap-2">
<img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" width="28" /> <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" width="28" />
<span>{{ slotProps.option.name }}</span> <span>{{ slotProps.option.name }}</span>
</div> </div>
@ -38,44 +38,44 @@
</Select> </Select>
</div> </div>
</div> </div>
<span class="text-secondary font-medium block mt-5 mb-3">Account</span> <span class="text-secondary font-medium block mt-8 mb-4">Account</span>
<div class="flex flex-wrap gap-3"> <div class="flex flex-wrap gap-4">
<div class="flex align-items-center"> <div class="flex items-center">
<RadioButton v-model="radioValue" inputId="category1" value="S" name="radiovalue" @change="setCategory('S')" /> <RadioButton v-model="radioValue" inputId="category1" value="S" name="radiovalue" @change="setCategory('S')" />
<label for="category1" class="ml-2 font-medium">Savings</label> <label for="category1" class="ml-2 font-medium">Savings</label>
</div> </div>
<div class="flex align-items-center"> <div class="flex items-center">
<RadioButton v-model="radioValue" inputId="category2" value="C" name="radiovalue" @change="setCategory('C')" /> <RadioButton v-model="radioValue" inputId="category2" value="C" name="radiovalue" @change="setCategory('C')" />
<label for="category2" class="ml-2 font-medium">Checking</label> <label for="category2" class="ml-2 font-medium">Checking</label>
</div> </div>
</div> </div>
<span class="text-secondary font-medium block mt-5 mb-3">Date</span> <span class="text-secondary font-medium block mt-8 mb-4">Date</span>
<DatePicker v-model="dateValue" :showWeek="true" class="w-full" showIcon iconDisplay="input" /> <DatePicker v-model="dateValue" :showWeek="true" class="w-full" showIcon iconDisplay="input" />
</div> </div>
<div class="box p-4 fadein animation-duration-500"> <div class="box p-6 animate-fadein animate-duration-500">
<Chart type="line" :data="chartData" :options="chartOptions" /> <Chart type="line" :data="chartData" :options="chartOptions" />
</div> </div>
<div class="box p-4 fadein animation-duration-500"> <div class="box p-6 animate-fadein animate-duration-500">
<div class="flex align-items-center"> <div class="flex items-center">
<Chip label="Vue" class="mr-2 font-medium" /> <Chip label="Vue" class="mr-2 font-medium" />
<Chip label="Typescript" class="mr-2 font-medium" /> <Chip label="Typescript" class="mr-2 font-medium" />
<ToggleSwitch v-model="switchValue" class="ml-auto"></ToggleSwitch> <ToggleSwitch v-model="switchValue" class="ml-auto"></ToggleSwitch>
</div> </div>
<div class="mt-5 flex justify-content-center"> <div class="mt-8 flex justify-center">
<SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" /> <SelectButton v-model="selectButtonValue" :options="selectButtonOptions" optionLabel="name" />
</div> </div>
<div class="mt-5 pt-1 pb-2"> <div class="mt-8 pt-1 pb-2">
<Slider v-model="rangeValues" range class="w-full" /> <Slider v-model="rangeValues" range class="w-full" />
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-column w-6 gap-5 pl-3"> <div class="flex flex-col w-6/12 gap-8 pl-4">
<div class="box p-4 fadein animation-duration-500"> <div class="box p-6 animate-fadein animate-duration-500">
<div class="surface-card mb-4 w-full text-center p-5" style="border-radius: '10px'"> <div class="mb-6 w-full text-center p-8" style="border-radius: '10px'">
<img src="https://primefaces.org/cdn/primevue/images/landing/air-jordan-noir.png" alt="Watch" class="w-10rem" /> <img src="https://primefaces.org/cdn/primevue/images/landing/air-jordan-noir.png" alt="Watch" class="w-40" />
</div> </div>
<div class="flex align-items-center mb-4"> <div class="flex items-center mb-6">
<div class="flex flex-column"> <div class="flex flex-col">
<span class="block font-semibold mb-1">Sneaker</span> <span class="block font-semibold mb-1">Sneaker</span>
<span class="text-secondary text-sm">Premium Quality</span> <span class="text-secondary text-sm">Premium Quality</span>
</div> </div>
@ -83,30 +83,30 @@
</div> </div>
<Button label="Add to Cart" icon="pi pi-shopping-cart" severity="secondary" class="w-full"></Button> <Button label="Add to Cart" icon="pi pi-shopping-cart" severity="secondary" class="w-full"></Button>
</div> </div>
<div class="box p-4 fadein animation-duration-500"> <div class="box p-6 animate-fadein animate-duration-500">
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="flex align-items-center mb-3"> <li class="flex items-center mb-4">
<span class="mr-3"> <span class="mr-4">
<Avatar label="AW" class="w-3rem h-3rem" /> <Avatar label="AW" class="w-12 h-12" />
</span> </span>
<div class="flex flex-column"> <div class="flex flex-col">
<span class="font-bold mb-1">Amanda Williams</span> <span class="font-bold mb-1">Amanda Williams</span>
<span class="text-secondary text-sm">Administrator</span> <span class="text-secondary text-sm">Administrator</span>
</div> </div>
</li> </li>
<li class="flex"> <li class="flex">
<a class="flex align-items-center p-3 border-round w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'"> <a class="flex items-center p-4 rounded w-full hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors duration-150 cursor-pointer" style="border-radius: '10px'">
<i class="pi pi-home text-xl mr-3"></i> <i class="pi pi-home text-xl mr-4"></i>
<span class="flex flex-column"> <span class="flex flex-col">
<span class="font-bold mb-1">Dashboard</span> <span class="font-bold mb-1">Dashboard</span>
<span class="m-0 text-secondary text-sm">Control Panel</span> <span class="m-0 text-secondary text-sm">Control Panel</span>
</span> </span>
</a> </a>
</li> </li>
<li class="flex"> <li class="flex">
<a class="flex align-items-center p-3 border-round w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style="border-radius: '10px'"> <a class="flex items-center p-4 rounded w-full hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors duration-150 cursor-pointer" style="border-radius: '10px'">
<i class="pi pi-envelope text-xl mr-3"></i> <i class="pi pi-envelope text-xl mr-4"></i>
<span class="flex flex-column"> <span class="flex flex-col">
<span class="font-bold mb-1">Inbox</span> <span class="font-bold mb-1">Inbox</span>
<span class="m-0 text-secondary text-sm">View Messages</span> <span class="m-0 text-secondary text-sm">View Messages</span>
</span> </span>
@ -115,9 +115,9 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="box p-4 fadein animation-duration-500"> <div class="box p-6 animate-fadein animate-duration-500">
<div class="flex justify-content-between align-items-center mb-5"> <div class="flex justify-between items-center mb-8">
<span class="inline-flex align-items-center"> <span class="inline-flex items-center">
<Checkbox id="cbox" v-model="checked" :binary="true" /> <Checkbox id="cbox" v-model="checked" :binary="true" />
<label for="cbox" class="ml-2">Confirm</label> <label for="cbox" class="ml-2">Confirm</label>
</span> </span>

32
components/landing/TemplateSection.vue
View File

@ -1,38 +1,38 @@
<template> <template>
<section class="landing-templates theme-dark py-8"> <section class="landing-templates theme-dark py-20">
<div class="section-header relative z-3">Templates</div> <div class="section-header relative z-30">Templates</div>
<p class="section-detail relative z-3">Professionally designed highly customizable application templates to get started in style.</p> <p class="section-detail relative z-30">Professionally designed highly customizable application templates to get started in style.</p>
<div class="flex justify-content-center mt-4 relative z-3"> <div class="flex justify-center mt-6 relative z-30">
<a href="https://www.primefaces.org/store" class="font-semibold p-3 border-round flex align-items-center linkbox active"> <a href="https://www.primefaces.org/store" class="font-semibold py-4 px-6 rounded flex items-center linkbox active">
<span>Explore All</span> <span>Explore All</span>
<i class="pi pi-arrow-right ml-2"></i> <i class="pi pi-arrow-right ml-2"></i>
</a> </a>
</div> </div>
<section :class="['templates flex justify-content-center align-items-center flex-column mt-7', { 'templates-animation': setAnimation }]"> <section :class="['templates flex justify-center items-center flex-col mt-7', { 'templates-animation': setAnimation }]">
<div class="flex md:flex-row flex-column gap-4 lg:gap-0"> <div class="flex md:flex-row flex-col gap-6 lg:gap-0">
<div class="template-block block-5 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('verona') }"> <div class="template-block block-5 mr-2 lg:mb-0 flex justify-center items-center" :style="{ backgroundImage: imageBg('verona') }">
<a class="templates-btn" target="_blank" href="https://verona.primevue.org">Verona Preview</a> <a class="templates-btn" target="_blank" href="https://verona.primevue.org">Verona Preview</a>
</div> </div>
<div class="template-block block-2 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('freya') }"> <div class="template-block block-2 ml-2 flex justify-center items-center" :style="{ backgroundImage: imageBg('freya') }">
<a class="templates-btn" target="_blank" href="https://freya.primevue.org">Freya Preview</a> <a class="templates-btn" target="_blank" href="https://freya.primevue.org">Freya Preview</a>
</div> </div>
</div> </div>
<div class="flex my-4 md:flex-row flex-column gap-4 lg:gap-0"> <div class="flex my-6 md:flex-row flex-col gap-6 lg:gap-0">
<div class="template-block block-3 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('atlantis') }"> <div class="template-block block-3 mr-2 lg:mb-0 flex justify-center items-center" :style="{ backgroundImage: imageBg('atlantis') }">
<a class="templates-btn" target="_blank" href="https://atlantis.primevue.org/">Atlantis Preview</a> <a class="templates-btn" target="_blank" href="https://atlantis.primevue.org/">Atlantis Preview</a>
</div> </div>
<div class="template-block block-middle border-none box-shadow-none mr-2 hidden lg:flex justify-content-center align-items-center flex-column"> <div class="template-block block-middle border-0 box-shadow-none mr-2 hidden lg:flex justify-center items-center flex-col">
<img class="img-1" :src="templateImg()" height="110" /> <img class="img-1" :src="templateImg()" height="110" />
</div> </div>
<div class="template-block block-4 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('apollo') }"> <div class="template-block block-4 ml-2 flex justify-center items-center" :style="{ backgroundImage: imageBg('apollo') }">
<a class="templates-btn" target="_blank" href="https://apollo.primevue.org">Apollo Preview</a> <a class="templates-btn" target="_blank" href="https://apollo.primevue.org">Apollo Preview</a>
</div> </div>
</div> </div>
<div class="flex md:flex-row flex-column gap-4 lg:gap-0"> <div class="flex md:flex-row flex-col gap-6 lg:gap-0">
<div class="template-block block-1 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('diamond') }"> <div class="template-block block-1 mr-2 lg:mb-0 flex justify-center items-center" :style="{ backgroundImage: imageBg('diamond') }">
<a class="templates-btn" target="_blank" href="https://diamond.primevue.org">Diamond Preview</a> <a class="templates-btn" target="_blank" href="https://diamond.primevue.org">Diamond Preview</a>
</div> </div>
<div class="template-block block-6 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('ultima') }"> <div class="template-block block-6 ml-2 flex justify-center items-center" :style="{ backgroundImage: imageBg('ultima') }">
<a class="templates-btn" target="_blank" href="https://ultima.primevue.org">Ultima Preview</a> <a class="templates-btn" target="_blank" href="https://ultima.primevue.org">Ultima Preview</a>
</div> </div>
</div> </div>

12
components/landing/ThemeSection.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<section class="landing-themes py-8"> <section class="landing-themes py-20">
<div class="section-header">Components</div> <div class="section-header">Components</div>
<p class="section-detail">The most complete UI component library for Vue.js based on a design-agnostic infrastructure.</p> <p class="section-detail">The most complete UI component library for Vue.js based on a design-agnostic infrastructure.</p>
<div class="themes-main flex mt-7 justify-content-center px-5 lg:px-8"> <div class="themes-main flex mt-16 justify-center px-8 lg:px-20">
<div class="box overflow-hidden z-1 p-5 table-container"> <div class="box overflow-hidden z-10 p-8 table-container">
<DataTable <DataTable
v-model:selection="selectedCustomers" v-model:selection="selectedCustomers"
v-model:filters="filters" v-model:filters="filters"
@ -19,9 +19,9 @@
:globalFilterFields="['name', 'country.name', 'representative.name', 'status']" :globalFilterFields="['name', 'country.name', 'representative.name', 'status']"
> >
<template #header> <template #header>
<div class="flex flex-column sm:flex-row sm:justify-content-between sm:align-items-center"> <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center">
<h5 class="m-0">Customers</h5> <h5 class="m-0">Customers</h5>
<IconField class="mt-3 sm:mt-0 w-full sm:w-auto"> <IconField class="mt-4 sm:mt-0 w-full sm:w-auto">
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
@ -45,7 +45,7 @@
</Column> </Column>
<Column header="Agent" sortable sortField="representative.name" style="min-width: 14rem"> <Column header="Agent" sortable sortField="representative.name" style="min-width: 14rem">
<template #body="{ data }"> <template #body="{ data }">
<div class="flex align-items-center gap-2"> <div class="flex items-center gap-2">
<img :alt="data.representative.name" :src="'https://primefaces.org/cdn/primevue/images/avatar/' + data.representative.image" width="32" /> <img :alt="data.representative.name" :src="'https://primefaces.org/cdn/primevue/images/avatar/' + data.representative.image" width="32" />
<span>{{ data.representative.name }}</span> <span>{{ data.representative.name }}</span>
</div> </div>

12
components/landing/UsersSection.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<section class="landing-users py-8 px-3 lg:px-8"> <section class="landing-users py-20 px-4 lg:px-20">
<div class="section-header">Who Uses</div> <div class="section-header">Who Uses</div>
<p class="section-detail"> <p class="section-detail">
PrimeTek libraries have reached over <span class="font-semibold animated-text relative white-space-nowrap"> <span>150 Million Downloads </span> </span> on npm! Join the PrimeLand community and experience the difference yourself. PrimeTek libraries have reached over <span class="font-semibold animated-text relative whitespace-nowrap"> <span>150 Million Downloads </span> </span> on npm! Join the PrimeLand community and experience the difference yourself.
</p> </p>
<div class="flex justify-content-center align-items-center mt-4"> <div class="flex justify-center items-center mt-6">
<span class="ml-2"> </span> <span class="ml-2"> </span>
</div> </div>
<div v-for="(x, i) in users" :key="i" class="logo-section relative w-full md:w-8 mt-6 users-container"> <div v-for="(x, i) in users" :key="i" class="logo-section relative w-full md:w-8/12 mt-12 users-container">
<div class="fade-left h-6rem w-6rem block absolute top-0 left-0 z-2"></div> <div class="fade-left h-24 w-24 block absolute top-0 left-0 z-20"></div>
<div class="marquee-wrapper overflow-hidden flex"> <div class="marquee-wrapper overflow-hidden flex">
<div v-for="i of [1, 2, 3]" :key="i" :class="`marquee${x.reverse ? ' marquee-reverse' : ''}`"> <div v-for="i of [1, 2, 3]" :key="i" :class="`marquee${x.reverse ? ' marquee-reverse' : ''}`">
<template v-for="user of x.slicedUsers" :key="user"> <template v-for="user of x.slicedUsers" :key="user">
@ -18,7 +18,7 @@
</template> </template>
</div> </div>
</div> </div>
<div class="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2"></div> <div class="fade-right h-24 w-24 block absolute top-0 right-0 z-20"></div>
</div> </div>
</section> </section>
</template> </template>

3
tailwind.config.js
View File

@ -2,6 +2,9 @@
const primeui = require('./tailwindcss-primeui'); const primeui = require('./tailwindcss-primeui');
module.exports = { module.exports = {
corePlugins: {
preflight: false
},
darkMode: 'class', darkMode: 'class',
content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/doc/**/*.{js,vue,ts}', './components/landing/**/*.{js,vue,ts}', './components/template/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'], content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/doc/**/*.{js,vue,ts}', './components/landing/**/*.{js,vue,ts}', './components/template/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
plugins: [primeui] plugins: [primeui]

4
tailwindcss-primeui/theme.js
View File

@ -3,8 +3,8 @@ const { transform } = require('typescript');
module.exports = { module.exports = {
extend: { extend: {
colors: { colors: {
primary: 'var(-p-primary-color)', primary: 'var(--p-primary-color)',
'primary-contrast': 'var(-p-primary-contrast-color)', 'primary-contrast': 'var(--p-primary-contrast-color)',
'primary-50': 'var(--p-primary-50)', 'primary-50': 'var(--p-primary-50)',
'primary-100': 'var(--p-primary-100)', 'primary-100': 'var(--p-primary-100)',
'primary-200': 'var(--p-primary-200)', 'primary-200': 'var(--p-primary-200)',