234 lines
17 KiB
Vue
234 lines
17 KiB
Vue
<template>
|
||
<div className="verona template">
|
||
<TemplateHero :templateHeroData="templateHeroData">
|
||
<template #logo>
|
||
<svg width="142" height="40" viewBox="0 0 142 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g clipPath="url(#clip0_2008_66426)">
|
||
<circle cx="20" cy="20" r="19" stroke="var(--p-surface-0)" strokeOpacity="0.87" strokeWidth="2" />
|
||
<path d="M35.8259 10.0575H3.62061V10.3007H35.8259V10.0575Z" :fill="fillColor" fillOpacity="0.5" />
|
||
<path d="M38.196 16.2153H1.51099V16.4585H38.196V16.2153Z" :fill="fillColor" fillOpacity="0.5" />
|
||
<path d="M38.2203 22.5198H1.46021V22.7647H38.2203V22.5198Z" :fill="fillColor" fillOpacity="0.5" />
|
||
<path d="M36.4897 28.7495H3.15845V28.9948H36.4897V28.7495Z" :fill="fillColor" fillOpacity="0.5" />
|
||
<path d="M18.258 0.745136L18.0569 0.625L2.89163 28.5555L3.09275 28.6757L18.258 0.745136Z" :fill="fillColor" fillOpacity="0.5" />
|
||
<path d="M24.7927 1.33747L24.5918 1.21704L6.70444 34.051L6.90537 34.1715L24.7927 1.33747Z" :fill="fillColor" fillOpacity="0.5" />
|
||
<path d="M30.2568 3.89703L30.0564 3.77563L11.481 37.5142L11.6814 37.6356L30.2568 3.89703Z" :fill="fillColor" fillOpacity="0.5" />
|
||
<path d="M34.8568 8.36101L34.6572 8.23804L17.2043 39.3938L17.4039 39.5168L34.8568 8.36101Z" :fill="fillColor" fillOpacity="0.5" />
|
||
<path d="M37.8638 15.1027L37.6636 14.981L24.3961 38.994L24.5964 39.1157L37.8638 15.1027Z" :fill="fillColor" fillOpacity="0.5" />
|
||
<path fillRule="evenodd" clipRule="evenodd" d="M34.9999 7.8125L38.1249 14.375L26.6701 35.1446L9.72192 3.87728L15.3124 0.9375L26.7489 22.6438L34.9999 7.8125Z" :fill="fillColor" fillOpacity="0.87" />
|
||
<path
|
||
d="M26.6697 35.2349L26.6328 35.1669L9.64893 3.83334L16.5629 3.71368L16.5752 3.73693L26.7493 22.5538L33.6907 10.1564L37.0868 16.3689L37.0745 16.3913L26.6697 35.2349ZM9.79501 3.92071L26.6705 35.0541L36.9879 16.3685L33.6903 10.3359L26.7481 22.7338L26.7116 22.6657L16.5132 3.8045L9.79501 3.92071Z"
|
||
:fill="fillColor"
|
||
fillOpacity="0.87"
|
||
/>
|
||
<path
|
||
d="M68.7 13.317L62.568 28.5H60.0165L53.8845 13.317H56.1525C56.3975 13.317 56.597 13.3765 56.751 13.4955C56.905 13.6145 57.0205 13.7685 57.0975 13.9575L60.678 23.2185C60.797 23.5195 60.909 23.852 61.014 24.216C61.126 24.573 61.231 24.9475 61.329 25.3395C61.413 24.9475 61.504 24.573 61.602 24.216C61.7 23.852 61.8085 23.5195 61.9275 23.2185L65.487 13.9575C65.543 13.7965 65.6515 13.6495 65.8125 13.5165C65.9805 13.3835 66.1835 13.317 66.4215 13.317H68.7ZM73.1066 15.564V19.7745H78.4196V21.948H73.1066V26.2425H79.8476V28.5H70.2716V13.317H79.8476V15.564H73.1066ZM86.9392 20.541C87.4712 20.541 87.9332 20.4745 88.3252 20.3415C88.7242 20.2085 89.0497 20.0265 89.3017 19.7955C89.5607 19.5575 89.7532 19.2775 89.8792 18.9555C90.0052 18.6335 90.0682 18.28 90.0682 17.895C90.0682 17.125 89.8127 16.5335 89.3017 16.1205C88.7977 15.7075 88.0242 15.501 86.9812 15.501H85.1752V20.541H86.9392ZM94.2052 28.5H91.6537C91.1707 28.5 90.8207 28.311 90.6037 27.933L87.4117 23.0715C87.2927 22.8895 87.1597 22.76 87.0127 22.683C86.8727 22.606 86.6627 22.5675 86.3827 22.5675H85.1752V28.5H82.3507V13.317H86.9812C88.0102 13.317 88.8922 13.4255 89.6272 13.6425C90.3692 13.8525 90.9747 14.15 91.4437 14.535C91.9197 14.92 92.2697 15.382 92.4937 15.921C92.7177 16.453 92.8297 17.041 92.8297 17.685C92.8297 18.196 92.7527 18.679 92.5987 19.134C92.4517 19.589 92.2347 20.002 91.9477 20.373C91.6677 20.744 91.3177 21.0695 90.8977 21.3495C90.4847 21.6295 90.0122 21.85 89.4802 22.011C89.6622 22.116 89.8302 22.242 89.9842 22.389C90.1382 22.529 90.2782 22.697 90.4042 22.893L94.2052 28.5ZM110.119 20.9085C110.119 22.0215 109.934 23.054 109.563 24.006C109.199 24.951 108.681 25.77 108.009 26.463C107.337 27.156 106.528 27.6985 105.583 28.0905C104.638 28.4755 103.588 28.668 102.433 28.668C101.285 28.668 100.239 28.4755 99.2937 28.0905C98.3487 27.6985 97.5367 27.156 96.8577 26.463C96.1857 25.77 95.6642 24.951 95.2932 24.006C94.9222 23.054 94.7367 22.0215 94.7367 20.9085C94.7367 19.7955 94.9222 18.7665 95.2932 17.8215C95.6642 16.8695 96.1857 16.047 96.8577 15.354C97.5367 14.661 98.3487 14.122 99.2937 13.737C100.239 13.345 101.285 13.149 102.433 13.149C103.203 13.149 103.928 13.24 104.607 13.422C105.286 13.597 105.909 13.849 106.476 14.178C107.043 14.5 107.55 14.8955 107.998 15.3645C108.453 15.8265 108.838 16.3445 109.153 16.9185C109.468 17.4925 109.706 18.1155 109.867 18.7875C110.035 19.4595 110.119 20.1665 110.119 20.9085ZM107.232 20.9085C107.232 20.0755 107.12 19.33 106.896 18.672C106.672 18.007 106.353 17.4435 105.94 16.9815C105.527 16.5195 105.023 16.166 104.428 15.921C103.84 15.676 103.175 15.5535 102.433 15.5535C101.691 15.5535 101.023 15.676 100.428 15.921C99.8397 16.166 99.3357 16.5195 98.9157 16.9815C98.5027 17.4435 98.1842 18.007 97.9602 18.672C97.7362 19.33 97.6242 20.0755 97.6242 20.9085C97.6242 21.7415 97.7362 22.4905 97.9602 23.1555C98.1842 23.8135 98.5027 24.3735 98.9157 24.8355C99.3357 25.2905 99.8397 25.6405 100.428 25.8855C101.023 26.1305 101.691 26.253 102.433 26.253C103.175 26.253 103.84 26.1305 104.428 25.8855C105.023 25.6405 105.527 25.2905 105.94 24.8355C106.353 24.3735 106.672 23.8135 106.896 23.1555C107.12 22.4905 107.232 21.7415 107.232 20.9085ZM125.399 13.317V28.5H123.95C123.726 28.5 123.537 28.465 123.383 28.395C123.236 28.318 123.093 28.192 122.953 28.017L115.025 17.895C115.067 18.357 115.088 18.784 115.088 19.176V28.5H112.6V13.317H114.08C114.199 13.317 114.301 13.324 114.385 13.338C114.476 13.345 114.553 13.366 114.616 13.401C114.686 13.429 114.752 13.4745 114.815 13.5375C114.878 13.5935 114.948 13.6705 115.025 13.7685L122.984 23.9325C122.963 23.6875 122.946 23.446 122.932 23.208C122.918 22.97 122.911 22.7495 122.911 22.5465V13.317H125.399ZM136.802 22.767L134.954 17.7165C134.863 17.4925 134.769 17.2265 134.671 16.9185C134.573 16.6105 134.475 16.278 134.377 15.921C134.286 16.278 134.191 16.614 134.093 16.929C133.995 17.237 133.901 17.5065 133.81 17.7375L131.972 22.767H136.802ZM141.79 28.5H139.606C139.361 28.5 139.161 28.4405 139.007 28.3215C138.853 28.1955 138.738 28.0415 138.661 27.8595L137.527 24.762H131.237L130.103 27.8595C130.047 28.0205 129.939 28.1675 129.778 28.3005C129.617 28.4335 129.417 28.5 129.179 28.5H126.974L132.949 13.317H135.826L141.79 28.5Z"
|
||
:fill="fillColor"
|
||
fillOpacity="0.87"
|
||
/>
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0_2008_66426">
|
||
<rect width="142" height="40" :fill="fillColor" />
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
</template>
|
||
</TemplateHero>
|
||
<VeronaSeparator />
|
||
<TemplateLicense :license="license" />
|
||
<VeronaSeparator />
|
||
<div class="hidden">
|
||
<TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/verona/verona-youtube-screen.png" />
|
||
<VeronaSeparator />
|
||
</div>
|
||
<TemplateFeaturesAnimation :featuresData="animationFeaturesData2" title="Features" :animationSeconds="4000" />
|
||
<VeronaSeparator />
|
||
<TemplateConfiguration title="Vue based on Vite" description="Verona is powered by Vite to get started in no time following the best practices." />
|
||
<VeronaSeparator />
|
||
<TemplateFeaturesAnimation :featuresData="animationFeaturesData1">
|
||
<template #description2>
|
||
Fully compatible with <a href="https://blocks.primevue.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that <a href="https://blocks.primevue.org/">PrimeBlocks</a> is not included in the
|
||
template and requires a separate purchase.
|
||
</template>
|
||
<template #description4>
|
||
Verona uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
|
||
<a href="https://www.figma.com/file/PgQXX4HXMPeCkT74tGajod/Preview-%7C-Verona-2022?node-id=1303%3A750">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Verona Figma file as they
|
||
are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.
|
||
</template>
|
||
</TemplateFeaturesAnimation>
|
||
<VeronaSeparator />
|
||
<TemplateFeatures :featuresData="features2Data" displayType="vertical" />
|
||
<VeronaSeparator />
|
||
<TemplateRelated :relatedData="relatedData" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import VeronaSeparator from '@/doc/templates/VeronaSeparator.vue';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
features2Data: [
|
||
{
|
||
title: 'Fully Responsive',
|
||
description: 'Verona is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-features2-responsive.png'
|
||
},
|
||
{
|
||
title: 'Cross Browser Compatible',
|
||
description: 'First class support for Firefox, Safari, Chrome and Edge.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible.png',
|
||
darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-compatible-dark.png'
|
||
},
|
||
{
|
||
title: 'Lifetime Support',
|
||
description: 'Verona has a dedicated forum where lifetime support is delivered by engineers at PrimeTek in a timely manner.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-lifetime.png'
|
||
},
|
||
{
|
||
title: 'Customizable Design',
|
||
description: 'Fully customizable with a mixture of Sass and CSS variables.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable.png',
|
||
darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-customizable-dark.png'
|
||
},
|
||
{
|
||
title: 'Ready to Use Pages',
|
||
description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-features2-ready.png'
|
||
},
|
||
{
|
||
title: 'Mobile Experience',
|
||
description: 'Touch optimized enhanced mobile experience with responsive design.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-features2-mobile.png'
|
||
}
|
||
],
|
||
relatedData: [
|
||
{
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/freya-vue.png',
|
||
href: '/templates/freya'
|
||
},
|
||
{
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo-vue.jpg',
|
||
href: '/templates/apollo'
|
||
},
|
||
{
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis-vue.jpg',
|
||
href: '/templates/atlantis'
|
||
}
|
||
],
|
||
animationFeaturesData1: [
|
||
{
|
||
id: 1,
|
||
title: 'PrimeFlex CSS Utilities',
|
||
description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: 'PrimeBlocks',
|
||
slotType: 'description2',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-blocks.png'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: 'PrimeIcons',
|
||
description: 'Verona ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-icons.png'
|
||
},
|
||
{
|
||
id: 4,
|
||
title: 'Figma File',
|
||
slotType: 'description4',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/verona/features-animation-figma.png'
|
||
}
|
||
],
|
||
animationFeaturesData2: [
|
||
{
|
||
id: 1,
|
||
title: 'Light and Dark Modes',
|
||
description: 'The stunning dark and light modes will impress your users.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/verona/features-animation-darkmode.png'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: 'Component Themes',
|
||
description: 'Verona offers 10 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/verona/features-animation-component-themes.png'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '4 Menu Orientations',
|
||
description: 'Choose from Static, Overlay, Slim and Slim+ menu orientations.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/verona/features-animation-orientations.png',
|
||
type: 'inline-animation',
|
||
inlineFeaturesData: [
|
||
{
|
||
id: 1,
|
||
title: 'Static',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/verona/Static.png'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: 'Slim',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/verona/Slim.png'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: 'Slim+',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/verona/Slim+.png'
|
||
},
|
||
{
|
||
id: 4,
|
||
title: 'Overlay',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/verona/Overlay.png'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 4,
|
||
title: 'Menu Themes',
|
||
description: 'Verona offers 10 special layout themes featuring gorgeous gradients.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/verona/features-animation-orientations.png'
|
||
}
|
||
],
|
||
license: {
|
||
documentLink: 'https://verona.primevue.org/documentation',
|
||
description: 'The download package is a Vite-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
|
||
showDiscount: false,
|
||
licenseDetails: [
|
||
{
|
||
title: 'Basic License',
|
||
price: '$49',
|
||
discount: '',
|
||
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
||
},
|
||
{
|
||
title: 'Extended License',
|
||
price: '$490',
|
||
discount: '',
|
||
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
||
}
|
||
]
|
||
},
|
||
templateHeroData: {
|
||
pattern: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-hero-pattern.png',
|
||
description: 'Prepare to be amazed by the remastered Verona for PrimeVue featuring a new gorgeous dark mode for the entire layout, 2 menu modes, reusable css widgets, utilities, modern icons and many more.',
|
||
dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-hero-dashboard1.png',
|
||
dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/verona/verona-hero-dashboard2.png',
|
||
liveHref: 'https://verona.primevue.org/',
|
||
docHref: 'https://verona.primevue.org/documentation'
|
||
}
|
||
};
|
||
},
|
||
computed: {
|
||
fillColor() {
|
||
return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
|
||
}
|
||
},
|
||
components: {
|
||
VeronaSeparator
|
||
}
|
||
};
|
||
</script>
|