primevue-mirror/pages/templates/index.vue

222 lines
15 KiB
Vue

<template>
<div class="content-section">
<div class="doc-intro">
<h1>Templates</h1>
<p>Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.</p>
</div>
<div class="grid">
<div class="col-12 lg:col-6 xl:col-4">
<div class="card mb-0">
<a href="https://www.primefaces.org/apollo-vue" rel="noopener noreferrer" target="_blank">
<img alt="Apollo" src="https://primefaces.org/cdn/primevue/images/layouts/apollo-vue.jpg" class="w-full" />
</a>
<div class="flex gap-3 mt-3">
<a href="https://www.primefaces.org/apollo-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span>
</a>
<a href="https://www.primefaces.org/layouts/apollo-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Learn More</span>
</a>
</div>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-4">
<div class="card mb-0">
<a href="https://www.primefaces.org/sakai-vue" rel="noopener noreferrer" target="_blank">
<img alt="Sakai" src="https://primefaces.org/cdn/primevue/images/layouts/sakai-vue.jpg" class="w-full" />
</a>
<div class="flex gap-3 mt-3">
<a href="https://www.primefaces.org/sakai-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span>
</a>
<a href="https://github.com/primefaces/sakai-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Download</span>
</a>
</div>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-4">
<div class="card mb-0">
<a href="https://www.primefaces.org/atlantis-vue" rel="noopener noreferrer" target="_blank">
<img alt="Atlantis" src="https://primefaces.org/cdn/primevue/images/layouts/atlantis-vue.jpg" class="w-full" />
</a>
<div class="flex gap-3 mt-3">
<a href="https://www.primefaces.org/atlantis-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span>
</a>
<a href="https://www.primefaces.org/layouts/atlantis-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Learn More</span>
</a>
</div>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-4">
<div class="card mb-0">
<a href="https://www.primefaces.org/ultima-vue" rel="noopener noreferrer" target="_blank">
<img alt="Ultima" src="https://primefaces.org/cdn/primevue/images/layouts/ultima-vue.jpg" class="w-full" />
</a>
<div class="flex gap-3 mt-3">
<a href="https://www.primefaces.org/ultima-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span>
</a>
<a href="https://www.primefaces.org/layouts/ultima-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Learn More</span>
</a>
</div>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-4">
<div class="card mb-0">
<a href="https://www.primefaces.org/freya-vue" rel="noopener noreferrer" target="_blank">
<img alt="Freya" src="https://primefaces.org/cdn/primevue/images/layouts/freya-vue.png" class="w-full" />
</a>
<div class="flex gap-3 mt-3">
<a href="https://www.primefaces.org/freya-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span>
</a>
<a href="https://www.primefaces.org/layouts/freya-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Learn More</span>
</a>
</div>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-4">
<div class="card mb-0">
<a href="https://www.primefaces.org/diamond-vue" rel="noopener noreferrer" target="_blank">
<img alt="Diamond" src="https://primefaces.org/cdn/primevue/images/layouts/diamond-vue.jpg" class="w-full" />
</a>
<div class="flex gap-3 mt-3">
<a href="https://www.primefaces.org/diamond-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span>
</a>
<a href="https://www.primefaces.org/layouts/diamond-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Learn More</span>
</a>
</div>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-4">
<div class="card mb-0">
<a href="https://www.primefaces.org/verona-vue" rel="noopener noreferrer" target="_blank">
<img alt="Verona" src="https://primefaces.org/cdn/primevue/images/layouts/verona-vue.jpg" class="w-full" />
</a>
<div class="flex gap-3 mt-3">
<a href="https://www.primefaces.org/verona-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span>
</a>
<a href="https://www.primefaces.org/layouts/verona-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Learn More</span>
</a>
</div>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-4">
<div class="card mb-0">
<a href="https://www.primefaces.org/poseidon-vue" rel="noopener noreferrer" target="_blank">
<img alt="Poseidon" src="https://primefaces.org/cdn/primevue/images/layouts/poseidon-vue.jpg" class="w-full" />
</a>
<div class="flex gap-3 mt-3">
<a href="https://www.primefaces.org/poseidon-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span>
</a>
<a href="https://www.primefaces.org/layouts/poseidon-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Learn More</span>
</a>
</div>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-4">
<div class="card mb-0">
<a href="https://www.primefaces.org/sapphire-vue" rel="noopener noreferrer" target="_blank">
<img alt="Sapphire" src="https://primefaces.org/cdn/primevue/images/layouts/sapphire-vue.jpg" class="w-full" />
</a>
<div class="flex gap-3 mt-3">
<a href="https://www.primefaces.org/sapphire-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span>
</a>
<a href="https://www.primefaces.org/layouts/sapphire-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Learn More</span>
</a>
</div>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-4">
<div class="card mb-0">
<a href="https://www.primefaces.org/serenity-vue" rel="noopener noreferrer" target="_blank">
<img alt="Serenity" src="https://primefaces.org/cdn/primevue/images/layouts/serenity-vue.jpg" class="w-full" />
</a>
<div class="flex gap-3 mt-3">
<a href="https://www.primefaces.org/serenity-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span>
</a>
<a href="https://www.primefaces.org/layouts/serenity-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Learn More</span>
</a>
</div>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-4">
<div class="card mb-0">
<a href="https://www.primefaces.org/babylon-vue" rel="noopener noreferrer" target="_blank">
<img alt="Babylon" src="https://primefaces.org/cdn/primevue/images/layouts/babylon-vue.jpg" class="w-full" />
</a>
<div class="flex gap-3 mt-3">
<a href="https://www.primefaces.org/babylon-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span>
</a>
<a href="https://www.primefaces.org/layouts/babylon-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Learn More</span>
</a>
</div>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-4">
<div class="card mb-0">
<a href="https://www.primefaces.org/avalon-vue" rel="noopener noreferrer" target="_blank">
<img alt="Avalon" src="https://primefaces.org/cdn/primevue/images/layouts/avalon-vue.jpg" class="w-full" />
</a>
<div class="flex gap-3 mt-3">
<a href="https://www.primefaces.org/avalon-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span>
</a>
<a href="https://www.primefaces.org/layouts/avalon-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Learn More</span>
</a>
</div>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-4">
<div class="card mb-0">
<a href="https://www.primefaces.org/roma-vue" rel="noopener noreferrer" target="_blank">
<img alt="Roma" src="https://primefaces.org/cdn/primevue/images/layouts/roma-vue.jpg" class="w-full" />
</a>
<div class="flex gap-3 mt-3">
<a href="https://www.primefaces.org/roma-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span>
</a>
<a href="https://www.primefaces.org/layouts/roma-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Learn More</span>
</a>
</div>
</div>
</div>
<div class="col-12 lg:col-6 xl:col-4">
<div class="card mb-0">
<a href="https://www.primefaces.org/prestige-vue" rel="noopener noreferrer" target="_blank">
<img alt="Prestige" src="https://primefaces.org/cdn/primevue/images/layouts/prestige-vue.jpg" class="w-full" />
</a>
<div class="flex gap-3 mt-3">
<a href="https://www.primefaces.org/prestige-vue" class="flex-1 p-button p-component" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Preview</span>
</a>
<a href="https://www.primefaces.org/layouts/prestige-vue" class="flex-1 p-button p-component p-button-outlined" rel="noopener noreferrer" target="_blank">
<span class="p-button-label white-space-nowrap">Learn More</span>
</a>
</div>
</div>
</div>
</div>
</div>
</template>