254 lines
16 KiB
Vue
254 lines
16 KiB
Vue
<template>
|
||
<TemplateContainer :templateData="avalonData">
|
||
<template #separator>
|
||
<AvalonSeparator />
|
||
</template>
|
||
</TemplateContainer>
|
||
</template>
|
||
|
||
<script>
|
||
import TemplateConfiguration from '@/components/template/TemplateConfiguration.vue';
|
||
import TemplateFeatures from '@/components/template/TemplateFeatures.vue';
|
||
import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAnimation.vue';
|
||
import TemplateHero from '@/components/template/TemplateHero.vue';
|
||
import TemplateLicense from '@/components/template/TemplateLicense.vue';
|
||
import AvalonLogo from '@/components/template/logo/AvalonLogo.vue';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
avalonData: {
|
||
components: [
|
||
{
|
||
name: TemplateHero,
|
||
props: {
|
||
templateHeroData: {
|
||
logo: AvalonLogo,
|
||
pattern: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-pattern.png',
|
||
rectangle: false,
|
||
dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-dashboard1.png',
|
||
dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-dashboard2.png',
|
||
description: 'A modern and easy to use premium application template with highly customizable layout features. Based on a bootstrap styling, it is fully responsive, touch optimized, built with SASS, CSS3 and HTML5.',
|
||
liveHref: 'https://avalon.primevue.org/',
|
||
docHref: 'https://avalon.primevue.org/documentation',
|
||
pattern: {
|
||
className: 'select-none absolute md:w-[60rem] h-auto md:bottom-0 bottom-40 -left-32 xl:-left-12 md:-left-32 z-[6] opacity-75',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-pattern.png'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: TemplateLicense,
|
||
props: {
|
||
license: {
|
||
documentLink: 'https://avalon.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']
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: TemplateFeaturesAnimation,
|
||
props: {
|
||
title: 'Features',
|
||
featuresData: [
|
||
{
|
||
id: 1,
|
||
title: 'Light and Dark Modes',
|
||
description: 'Avalon offers you 2 uniquely designed layout modes to choose from; Light and Dark.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/features-animation-darkmode.png'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: 'Component 10 Beautiful Themes',
|
||
description: 'Avalon offers 10 built-in themes and creating your own theme is a matter of defining couple of SaSS variables.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/features-animation-component-themes.png'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '7 Menu Orientations',
|
||
description: 'Avalon has 7 menu layouts to choose from; Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal with Light and Dark options.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/diamond/features-animation-orientations.png',
|
||
type: 'inline-animation',
|
||
inlineFeaturesData: [
|
||
{
|
||
id: 1,
|
||
title: 'Static',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Static.png'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: 'Slim',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Slim.png'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: 'Reveal',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Reveal.png'
|
||
},
|
||
{
|
||
id: 4,
|
||
title: 'Horizontal',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Horizontal.png'
|
||
},
|
||
{
|
||
id: 5,
|
||
title: 'Overlay',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Overlay.png'
|
||
},
|
||
{
|
||
id: 6,
|
||
title: 'Slim+',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Slim+.png'
|
||
},
|
||
{
|
||
id: 7,
|
||
title: 'Drawer',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/Drawer.png'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 4,
|
||
title: 'Topbar Themes',
|
||
description: 'Avalon comes with 11 topbar themes guaranteeing an enviable design.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/features-animation-menu-themes.png'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
name: TemplateConfiguration,
|
||
props: {
|
||
configurationData: {
|
||
title: 'Vue App with No Configuration',
|
||
description: 'Avalon is powered by Vite to get started in no time following the best practices.'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: TemplateFeatures,
|
||
props: {
|
||
featuresData: [
|
||
{
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-features1-feature1.png',
|
||
title: 'Ready to Use Applications',
|
||
description: 'Mail, File System, Tasks, Calendar, Blog and Chat are the sample applications to get started with ease.'
|
||
},
|
||
{
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-features1-feature2.png',
|
||
title: 'E-Commerce Pages',
|
||
description: 'Avalon offers E-commerce pages to kickstart your e-commerce project powered by PrimeBlocks.'
|
||
},
|
||
{
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-features1-feature3.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.'
|
||
}
|
||
],
|
||
displayType: 'horizontal'
|
||
}
|
||
},
|
||
{
|
||
name: TemplateFeaturesAnimation,
|
||
props: {
|
||
featuresData: [
|
||
{
|
||
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: 'Avalon 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/avalon/features-animation-figma.png'
|
||
}
|
||
]
|
||
},
|
||
slots: {
|
||
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.`,
|
||
description4: `
|
||
Avalon 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/LuzEn29BAxr03T2vMQ5A1y/Preview-%7C-Avalon-1.0.0?type=design&mode=design&t=ME7xK2sAYOLoKCrT-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the
|
||
Avalon Figma file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.`
|
||
}
|
||
},
|
||
{
|
||
name: TemplateFeatures,
|
||
props: {
|
||
featuresData: [
|
||
{
|
||
title: 'Fully Responsive',
|
||
description: 'Avalon is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-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: 'Avalon 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: 'Top Notch Quality',
|
||
description: 'Superior standards with 100% compatibility for strict mode and linting tools.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-quality.png',
|
||
darkSrc: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-quality-dark.png'
|
||
},
|
||
{
|
||
title: 'Mobile Experience',
|
||
description: 'Touch optimized enhanced mobile experience with responsive design.',
|
||
src: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-features2-mobile.png'
|
||
}
|
||
],
|
||
displayType: 'vertical'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
};
|
||
}
|
||
};
|
||
</script>
|