<template>
    <div>
        <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="templates-page grid grid-cols-12 gap-4">
            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                <div class="card mb-0">
                    <a href="https://apollo.primevue.org" 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-4 mt-4">
                        <a href="https://apollo.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                        </a>
                        <PrimeVueNuxtLink to="/templates/apollo" class="templates-page-button templates-page-button-outlined">
                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                        </PrimeVueNuxtLink>
                    </div>
                </div>
            </div>
            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                <div class="card mb-0">
                    <a href="https://sakai.primevue.org" 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-4 mt-4">
                        <a href="https://sakai.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                        </a>
                        <PrimeVueNuxtLink to="/templates/sakai" class="templates-page-button templates-page-button-outlined">
                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                        </PrimeVueNuxtLink>
                    </div>
                </div>
            </div>
            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                <div class="card mb-0">
                    <a href="https://atlantis.primevue.org" 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-4 mt-4">
                        <a href="https://atlantis.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                        </a>
                        <PrimeVueNuxtLink to="/templates/atlantis" class="templates-page-button templates-page-button-outlined">
                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                        </PrimeVueNuxtLink>
                    </div>
                </div>
            </div>
            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                <div class="card mb-0">
                    <a href="https://ultima.primevue.org" 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-4 mt-4">
                        <a href="https://ultima.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                        </a>
                        <PrimeVueNuxtLink to="/templates/ultima" class="templates-page-button templates-page-button-outlined">
                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                        </PrimeVueNuxtLink>
                    </div>
                </div>
            </div>
            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                <div class="card mb-0">
                    <a href="https://freya.primevue.org" 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-4 mt-4">
                        <a href="https://freya.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                        </a>
                        <PrimeVueNuxtLink to="/templates/freya" class="templates-page-button templates-page-button-outlined">
                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                        </PrimeVueNuxtLink>
                    </div>
                </div>
            </div>
            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                <div class="card mb-0">
                    <a href="https://diamond.primevue.org" 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-4 mt-4">
                        <a href="https://diamond.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                        </a>
                        <PrimeVueNuxtLink to="/templates/diamond" class="templates-page-button templates-page-button-outlined">
                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                        </PrimeVueNuxtLink>
                    </div>
                </div>
            </div>
            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                <div class="card mb-0">
                    <a href="https://verona.primevue.org" 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-4 mt-4">
                        <a href="https://verona.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                        </a>
                        <PrimeVueNuxtLink to="/templates/verona" class="templates-page-button templates-page-button-outlined">
                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                        </PrimeVueNuxtLink>
                    </div>
                </div>
            </div>
            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                <div class="card mb-0">
                    <a href="https://poseidon.primevue.org" 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-4 mt-4">
                        <a href="https://poseidon.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                        </a>
                        <PrimeVueNuxtLink to="/templates/poseidon" class="templates-page-button templates-page-button-outlined">
                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                        </PrimeVueNuxtLink>
                    </div>
                </div>
            </div>
            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                <div class="card mb-0">
                    <a href="https://avalon.primevue.org" 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-4 mt-4">
                        <a href="https://avalon.primevue.org" class="templates-page-button" rel="noopener noreferrer" target="_blank">
                            <span class="templates-page-button-label whitespace-nowrap">Preview</span>
                        </a>
                        <PrimeVueNuxtLink to="/templates/avalon" class="templates-page-button templates-page-button-outlined">
                            <span class="templates-page-button-label whitespace-nowrap">Learn More</span>
                        </PrimeVueNuxtLink>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>