vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity
primevue-mirror/apps/showcase/pages/templates/atlantis/index.vue

222 lines
14 KiB
Vue
Raw Normal View History

Template page updates
2024-04-08 09:33:03 +00:00
<template>
Refactor by Taner
2024-06-27 10:32:45 +00:00
<TemplateContainer :templateData="atlantisData">
<template #separator>
Template page updates
2024-04-08 09:33:03 +00:00
<AtlantisSeparator />
Refactor by Taner
2024-06-27 10:32:45 +00:00
</template>
</TemplateContainer>
Template page updates
2024-04-08 09:33:03 +00:00
</template>
<script>
Refactor by Taner
2024-06-27 10:32:45 +00:00
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 AtlantisLogo from '../../../components/template/logo/AtlantisLogo.vue';
Template page updates
2024-04-08 09:33:03 +00:00
export default {
data() {
return {
Refactor by Taner
2024-06-27 10:32:45 +00:00
atlantisData: {
components: [
{
name: TemplateHero,
props: {
templateHeroData: {
logo: AtlantisLogo,
pattern: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-hero-pattern.png',
dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-hero-dashboard1.png',
dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-hero-dashboard2.png',
description: 'Prepare to be amazed by the remastered Atlantis for PrimeVue featuring a new gorgeous dark mode for the entire layout, 5 menu modes, reusable css widgets, utilities, modern icons and many more.',
liveHref: 'https://www.primefaces.org/atlantis-vue/',
docHref: 'https://www.primefaces.org/atlantis-vue/documentation/',
pattern: {
className: 'select-none absolute md:-bottom-28 bottom-36 -left-20 md:-left-28 z-[6] md:w-[50rem] h-auto w-[60rem] opacity-75',
src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-hero-pattern.png'
}
}
}
},
{
name: TemplateLicense,
props: {
license: {
documentLink: 'https://atlantis.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: '$59',
discount: '',
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
},
{
title: 'Extended License',
price: '$590',
discount: '',
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
}
]
}
Template page updates
2024-04-08 09:33:03 +00:00
}
Refactor by Taner
2024-06-27 10:32:45 +00:00
},
{
name: TemplateFeaturesAnimation,
props: {
title: 'Features',
featuresData: [
{
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/atlantis/features-animation-darkmode.png'
},
{
id: 2,
title: 'Component Themes',
description: 'Atlantis offers 16 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/atlantis/features-animation-component-themes.png'
},
{
id: 3,
title: '7 Menu Orientations',
description: 'Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.',
src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/features-animation-orientations.png',
type: 'inline-animation',
inlineFeaturesData: [
{
id: 1,
title: 'Static',
src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Static.png'
},
{
id: 2,
title: 'Slim',
src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Slim.png'
},
{
id: 3,
title: 'Reveal',
src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Reveal.png'
},
{
id: 4,
title: 'Horizontal',
src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Horizontal.png'
},
{
id: 5,
title: 'Overlay',
src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Overlay.png'
},
{
id: 6,
title: 'Slim+',
src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Slim+.png'
},
{
id: 7,
title: 'Drawer',
src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/Drawer.png'
}
]
}
]
}
},
Template page updates
2024-04-08 09:33:03 +00:00
{
Refactor by Taner
2024-06-27 10:32:45 +00:00
name: TemplateConfiguration,
props: {
configurationData: {
title: 'Vue based on Vite',
description: 'Atlantis is powered by Vite to get started in no time following the best practices. Template is implemented purely in Vue.'
}
}
Template page updates
2024-04-08 09:33:03 +00:00
},
{
Refactor by Taner
2024-06-27 10:32:45 +00:00
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: 'Atlantis 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/atlantis/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: `
Atlantis 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/two0OGwOwHfq0sdjeK34l0/Preview-%7C-Atlantis-2022?node-id=15%3A1427&t=2lNJ5EzW0xuvQWdm-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the
Atlantis Figma file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.`
}
},
{
name: TemplateFeatures,
props: {
featuresData: [
{
title: 'Fully Responsive',
description: 'Atlantis is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-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: 'Atlantis 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: 'Full SaSS Support',
description: 'Sass is utilized for both the application and components to provide simplicity and flexibility.',
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/atlantis/atlantis-features2-ready.png'
},
{
title: 'Mobile Experience',
description: 'Touch optimized enhanced mobile experience with responsive design.',
src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-features2-mobile.png'
}
],
displayType: 'vertical'
}
Template page updates
2024-04-08 09:33:03 +00:00
}
]
}
};
}
};
</script>