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

Revert "Brute migration of landing and doc" 

This reverts commit 72651f4ac7.
pull/5806/head
Cagatay Civici 2024-05-18 11:25:01 +03:00
parent 97c8fb3bd9
commit ad01e1f232
11 changed files with 341 additions and 341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/doc/DocApiTable.vue
View File

@ -6,7 +6,7 @@
</p>
</DocSectionText>
<div v-if="!data[0].data" class="doc-tablewrapper mt-4">
<div v-if="!data[0].data" class="doc-tablewrapper mt-3">
<table class="doc-table">
<thead>
<tr>

14
components/doc/DocSectionCode.vue
View File

@ -1,32 +1,32 @@
<template>
<div v-if="!embedded" class="doc-section-code">
<div class="doc-section-code-buttons animate-scalein animation-duration-300">
<div class="doc-section-code-buttons scalein animation-duration-300">
<template v-if="codeMode !== 'basic' && !hideToggleCode">
<button :class="['py-0 pl-2 pr-2 rounded-md h-2rem', { 'code-active': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
<button :class="['py-0 pl-2 pr-2 rounded-md h-2rem', { 'code-active': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>
<button :class="['py-0 px-2 border-round h-2rem', { 'code-active': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
<button :class="['py-0 px-2 border-round h-2rem', { 'code-active': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>
</template>
<template v-if="!hideToggleCode">
<button v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }" type="button" @click="toggleCodeMode('composition')" class="h-8 w-8 p-0 inline-flex items-center justify-center">
<button v-tooltip.bottom="{ value: 'Toggle Full Code', class: 'doc-section-code-tooltip' }" type="button" @click="toggleCodeMode('composition')" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
<i class="pi pi-code"></i>
</button>
</template>
<template v-if="!hideToggleCode && code.data">
<button v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }" type="button" @click="onToggleData" class="h-8 w-8 p-0 inline-flex items-center justify-center">
<button v-tooltip.bottom="{ value: 'View Data', class: 'doc-section-code-tooltip' }" type="button" @click="onToggleData" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
<i class="pi pi-database"></i>
</button>
</template>
<template v-if="!hideStackBlitz">
<button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-8 w-8 p-0 inline-flex items-center justify-center" @click="showStackblitz">
<button v-tooltip.bottom="{ value: 'Edit in StackBlitz', class: 'doc-section-code-tooltip' }" type="button" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" @click="showStackblitz">
<svg role="img" width="13" height="18" viewBox="0 0 13 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style="display: 'block'">
<path d="M0 10.6533H5.43896L2.26866 18.1733L12.6667 7.463H7.1986L10.3399 0L0 10.6533Z" />
</svg>
</button>
</template>
<button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="h-8 w-8 p-0 inline-flex items-center justify-center">
<button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center">
<i class="pi pi-copy"></i>
</button>
</div>

2
components/doc/DocSections.vue
View File

@ -1,6 +1,6 @@
<template>
<template v-for="(doc, i) of docs" :key="doc.label + '_' + i">
<section class="pt-6 pb-6">
<section class="py-4">
<template v-if="doc.children">
<div :id="doc.id">
<DocSectionText :id="doc.id" :label="doc.label" :badge="doc.badge">

352
components/landing/BlockSection.vue
View File

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

70
components/landing/FeaturesSection.vue
View File

@ -1,63 +1,63 @@
<template>
<section class="landing-features pt-20 pb-20">
<section class="landing-features py-8">
<div class="section-header">Features</div>
<p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p>
<div class="mt-16 pl-8 pr-8 lg:pl-20 lg:pr-20">
<div class="mt-7 px-5 lg:px-8">
<div class="features-container">
<div class="flex flex-wrap -mr-2 -ml-2 -mt-2">
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
<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-4 text-lg">80+ UI Components</div>
<div class="grid">
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 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>
</div>
</div>
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
<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-4 text-lg">Styled or Unstyled</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 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>
</div>
</div>
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
<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-4 text-lg">Community</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-community.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 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>
</div>
</div>
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
<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-4 text-lg">Accessibility</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">Accessibility</div>
<p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
</div>
</div>
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
<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-4 text-lg">Enterprise Support</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-support.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 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>
</div>
</div>
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
<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-4 text-lg">Mobile</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">Mobile</div>
<p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
</div>
</div>
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
<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-4 text-lg">Blocks</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 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>
</div>
</div>
<div class="flex-none p-2 w-full md:flex-none md:p-2 md:w-1/2 xl:flex-none xl:p-2 xl:w-1/4 flex justify-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-6 w-full animation-duration-500">
<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-4 text-lg">Typescript</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-3" />
<div class="font-semibold mb-3 text-lg">Typescript</div>
<p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
</div>
</div>

90
components/landing/FooterSection.vue
View File

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

92
components/landing/HeroSection.vue
View File

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

32
components/landing/TemplateSection.vue
View File

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

12
components/landing/ThemeSection.vue
View File

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

14
components/landing/UsersSection.vue
View File

@ -1,15 +1,15 @@
<template>
<section class="landing-users pt-20 pb-20 pl-4 pr-4 lg:pl-20 lg:pr-20">
<section class="landing-users py-8 px-3 lg:px-8">
<div class="section-header">Who Uses</div>
<p class="section-detail">
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.
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.
</p>
<div class="flex justify-center items-center mt-6">
<div class="flex justify-content-center align-items-center mt-4">
<span class="ml-2"> </span>
</div>
<div v-for="(x, i) in users" :key="i" class="logo-section relative w-full md:w-2/3 mt-12 users-container">
<div class="fade-left h-24 w-24 block absolute -top-0 -left-0 z-20"></div>
<div class="marquee-wrapper line-clamp-1 flex">
<div v-for="(x, i) in users" :key="i" class="logo-section relative w-full md:w-8 mt-6 users-container">
<div class="fade-left h-6rem w-6rem block absolute top-0 left-0 z-2"></div>
<div class="marquee-wrapper overflow-hidden flex">
<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">
<div class="w-full">
@ -18,7 +18,7 @@
</template>
</div>
</div>
<div class="fade-right h-24 w-24 block absolute -top-0 -right-0 z-20"></div>
<div class="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2"></div>
</div>
</section>
</template>

2
tailwind.config.js
View File

@ -1,7 +1,7 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
content: ['./components/doc/**/*.{js,vue,ts}', './components/landing/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './pages/**/*.{js,vue,ts}', './error.vue'],
content: ['./components/doc/**/*.{js,vue,ts}', './components/landing/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
theme: {
extend: {
colors: {