Template page updates
tugcekucukoglu
parent
ccd26159fb
commit
59c6d2e76f
|
|
@ -17,3 +17,9 @@
|
|||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mobile {
|
||||
@media (max-width: 900px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,3 +15,13 @@
|
|||
@import './_responsive';
|
||||
@import './_animation';
|
||||
@import './landing/_landing';
|
||||
@import './templates/_templates';
|
||||
@import './templates/_apollo';
|
||||
@import './templates/_atlantis';
|
||||
@import './templates/_avalon';
|
||||
@import './templates/_diamond';
|
||||
@import './templates/_freya';
|
||||
@import './templates/_poseidon';
|
||||
@import './templates/_sakai';
|
||||
@import './templates/_ultima';
|
||||
@import './templates/_verona';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
.apollo {
|
||||
.template {
|
||||
&-hero {
|
||||
&-pattern {
|
||||
width: 96rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 6;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.apollo {
|
||||
.template {
|
||||
&-hero {
|
||||
&-pattern {
|
||||
width: 90rem;
|
||||
bottom: 20rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
.atlantis {
|
||||
.template {
|
||||
&-hero {
|
||||
&-pattern {
|
||||
width: 50rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: -7rem;
|
||||
left: -7rem;
|
||||
z-index: 6;
|
||||
}
|
||||
&-dashboard1,
|
||||
&-dashboard2{
|
||||
border-radius: 1.12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.atlantis {
|
||||
.template{
|
||||
&-hero {
|
||||
&-pattern {
|
||||
width: 45rem;
|
||||
bottom: -5.75rem;
|
||||
left: -9.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.atlantis {
|
||||
.template{
|
||||
&-hero {
|
||||
&-pattern {
|
||||
width: 50rem;
|
||||
bottom: 16.75rem;
|
||||
left: -10.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
.avalon {
|
||||
.template {
|
||||
&-hero {
|
||||
&-pattern {
|
||||
width: 56rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: -3.06;
|
||||
z-index: 6;
|
||||
|
||||
|
||||
}
|
||||
&-rectangle{
|
||||
opacity: 0.5;
|
||||
}
|
||||
&-light{
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
&-separator {
|
||||
&-icon {
|
||||
width: 7rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 99px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.avalon {
|
||||
.template{
|
||||
&-hero {
|
||||
&-pattern {
|
||||
width: 68rem;
|
||||
height: auto;
|
||||
bottom: -8rem;
|
||||
left: -12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.avalon {
|
||||
.template{
|
||||
&-hero {
|
||||
&-pattern {
|
||||
width: 88rem;
|
||||
height: auto;
|
||||
bottom: 0rem;
|
||||
left: -16rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
.diamond {
|
||||
.template {
|
||||
&-hero {
|
||||
&-pattern {
|
||||
width: 62.3125rem;
|
||||
height: 44.8125rem;
|
||||
position: absolute;
|
||||
top: -3.62;
|
||||
left: -3.06;
|
||||
z-index: 6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.diamond {
|
||||
.template{
|
||||
&-hero {
|
||||
&-pattern {
|
||||
width: 60rem;
|
||||
height: auto;
|
||||
bottom: -8rem;
|
||||
left: -8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.diamond {
|
||||
.template{
|
||||
&-hero {
|
||||
&-pattern {
|
||||
width: 64rem;
|
||||
height: auto;
|
||||
bottom: 2rem;
|
||||
left: -8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
.freya {
|
||||
.template {
|
||||
&-hero {
|
||||
|
||||
&-pattern {
|
||||
height: auto;
|
||||
width: 45rem;
|
||||
position: absolute;
|
||||
bottom: -9rem;
|
||||
left: 0rem;
|
||||
z-index: 6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.freya {
|
||||
.template {
|
||||
&-hero {
|
||||
|
||||
&-pattern {
|
||||
width: 55rem;
|
||||
height: auto;
|
||||
bottom: -2rem;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
.poseidon {
|
||||
.template {
|
||||
&-hero {
|
||||
&-pattern {
|
||||
width: 102.3125rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 0rem;
|
||||
left: -26rem;
|
||||
z-index: 6;
|
||||
}
|
||||
&-dashboard1,
|
||||
&-dashboard2{
|
||||
width: 45rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.poseidon {
|
||||
.template{
|
||||
&-hero {
|
||||
&-pattern {
|
||||
height: auto;
|
||||
bottom: 0rem;
|
||||
left: -34rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.poseidon {
|
||||
.template{
|
||||
&-hero {
|
||||
&-pattern {
|
||||
height: auto;
|
||||
bottom: 21rem;
|
||||
left: -35rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
.sakai {
|
||||
.template {
|
||||
&-hero {
|
||||
&-pattern {
|
||||
width: 72.3125rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: -1rem;
|
||||
left: -1rem;
|
||||
z-index: 6;
|
||||
}
|
||||
&-dashboard1,
|
||||
&-dashboard2{
|
||||
width: 42rem;
|
||||
}
|
||||
}
|
||||
&-features-horizontal-card{
|
||||
width: 30rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.sakai {
|
||||
.template {
|
||||
&-hero {
|
||||
&-pattern {
|
||||
width: 72.3125rem;
|
||||
height: auto;
|
||||
bottom: -1rem;
|
||||
left: -2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.sakai {
|
||||
.template {
|
||||
&-hero {
|
||||
&-pattern {
|
||||
width: 64.3125rem;
|
||||
height: auto;
|
||||
bottom: 20rem;
|
||||
left: -2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,39 @@
|
|||
.ultima {
|
||||
.template {
|
||||
&-hero {
|
||||
|
||||
&-pattern {
|
||||
width: 80rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: -26rem;
|
||||
left: -22.5rem;
|
||||
z-index: 6;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
&-dashboard1,
|
||||
&-dashboard2{
|
||||
border-radius: 0.42857rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.ultima {
|
||||
.template {
|
||||
&-hero {
|
||||
|
||||
&-pattern {
|
||||
width: 90rem;
|
||||
left: -25rem;
|
||||
bottom: -10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
.verona {
|
||||
.template {
|
||||
&-hero {
|
||||
|
||||
&-pattern {
|
||||
width: 110rem;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: -2rem;
|
||||
left: -1rem;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.verona {
|
||||
.template {
|
||||
&-hero {
|
||||
&-pattern {
|
||||
width: 120rem;
|
||||
left: -7.5rem;
|
||||
bottom: -10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.verona {
|
||||
.template {
|
||||
&-hero {
|
||||
|
||||
&-pattern {
|
||||
width: 124rem;
|
||||
left: -8.5rem;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div class="template-configuration-wrapper">
|
||||
<div class="template-configuration">
|
||||
<div class="template-configuration-screen">
|
||||
<div class="template-configuration-screen-top">
|
||||
<div class="template-configuration-screen-top-close template-configuration-screen-top-circle" />
|
||||
<div class="template-configuration-screen-top-minimize template-configuration-screen-top-circle" />
|
||||
<div class="template-configuration-screen-top-zoom template-configuration-screen-top-circle" />
|
||||
</div>
|
||||
<div class="template-configuration-screen-bottom">
|
||||
<p>> npm install <span class="text-gray-500">or yarn</span></p>
|
||||
<p>> npm run dev <span class="text-gray-500">or yarn dev</span></p>
|
||||
<br />
|
||||
<br />
|
||||
<img class="template-configuration-screen-bottom-logo" src="https://primefaces.org/cdn/primevue/images/templates/vue-3d-logo.png" alt="Vue 3D Logo" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="template-configuration-title">{{ title }}</h3>
|
||||
<p class="template-configuration-description">{{ description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<div ref="animationInlineRef" class="template-features-animation-right-inline">
|
||||
<div class="template-features-animation-right-inline-tabs">
|
||||
<template v-for="(data, index) in inlineFeaturesData" :key="index">
|
||||
<button @click="handleBtnClick(data.id)" @mouseenter="enterCardArea(data.id)" @mouseleave="leaveCardArea" :class="`${!!(data.id === selectedID) && 'template-features-animation-right-inline-tabs-btnActive'}`">
|
||||
{{ data.title }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<div class="template-features-animation-right-inline-image">
|
||||
<img :src="inlineFeaturesData[selectedID - 1].src" alt="Animation Inline Feature Image" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
inlineFeaturesData: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
parentHandleClick: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
parentHandleHover: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
parentID: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
inlineSeconds: {
|
||||
type: Number,
|
||||
default: 1000
|
||||
}
|
||||
},
|
||||
observer: null,
|
||||
timeout: null,
|
||||
data() {
|
||||
return {
|
||||
selectedID: 1,
|
||||
hoveredID: null,
|
||||
intervalId: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.observer = new IntersectionObserver(([entry]) => {
|
||||
clearTimeout(this.timeout);
|
||||
|
||||
if (entry.isIntersecting) {
|
||||
this.timeout = setTimeout(
|
||||
() => {
|
||||
this.startInterval();
|
||||
this.observer.unobserve(this.$el);
|
||||
},
|
||||
{ threshold: 0.2 }
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
this.observer.observe(this.$el);
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.$el && this.observer?.unobserve(this.$el);
|
||||
clearInterval(this.intervalId);
|
||||
},
|
||||
methods: {
|
||||
handleClick(id) {
|
||||
this.selectedID = id;
|
||||
},
|
||||
handleBtnClick(id) {
|
||||
this.handleClick(id);
|
||||
this.parentHandleClick(this.parentID);
|
||||
clearInterval(this.intervalId);
|
||||
},
|
||||
startInterval() {
|
||||
this.intervalId = setInterval(() => {
|
||||
this.selectedID = this.selectedID === this.inlineFeaturesData.length ? 1 : this.selectedID + 1;
|
||||
}, this.inlineSeconds);
|
||||
},
|
||||
enterCardArea(id) {
|
||||
this.hoveredID = id;
|
||||
this.parentHandleHover(this.parentID, 'onMouseEnter');
|
||||
},
|
||||
leaveCardArea() {
|
||||
this.hoveredID = null;
|
||||
this.parentHandleHover(this.parentID, 'onMouseLeave');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<template>
|
||||
<div class="template-features-animation-wrapper">
|
||||
<div v-if="title" class="template-features-animation-title">
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div ref="animationRef" class="template-features-animation">
|
||||
<div class="template-features-animation-left">
|
||||
<template v-for="(data, index) in featuresData" :key="index">
|
||||
<div
|
||||
@click="handleClick(data.id)"
|
||||
@mouseenter="enterCardArea(data.id)"
|
||||
@mouseleave="leaveCardArea(data.id)"
|
||||
:class="`template-features-animation-left-card ${selectedID === data.id ? 'template-features-animation-left-card-active' : ''}`"
|
||||
>
|
||||
<div class="template-features-animation-left-card-order">
|
||||
<div>{{ orderNumber(index) }}</div>
|
||||
<div>{{ orderNumber(index) }}</div>
|
||||
<div>{{ orderNumber(index) }}</div>
|
||||
</div>
|
||||
<div class="template-features-animation-left-card-content">
|
||||
<h5>{{ data.title }}</h5>
|
||||
<p>
|
||||
<template v-if="data.slotType">
|
||||
<slot :name="data.slotType" />
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ data.description }}
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="template-features-animation-right">
|
||||
<TemplateFeaturesAnimationInline
|
||||
v-if="featuresData[selectedID - 1]?.type === 'inline-animation'"
|
||||
:inlineFeaturesData="featuresData[selectedID - 1]?.inlineFeaturesData"
|
||||
:parentHandleClick="handleClick"
|
||||
:parentHandleHover="handleHover"
|
||||
:parentID="selectedID"
|
||||
:inlineSeconds="animationSeconds / featuresData[selectedID - 1]?.inlineFeaturesData.length"
|
||||
/>
|
||||
<img v-else :src="featuresData[selectedID - 1]?.src" alt="Animation Feature Image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
featuresData: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
title: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
observer: null,
|
||||
timeout: null,
|
||||
data() {
|
||||
return {
|
||||
selectedID: 1,
|
||||
intervalIds: [],
|
||||
cancelInterval: false,
|
||||
hoveredID: null,
|
||||
visible: false,
|
||||
animationSeconds: 5000
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.observer = new IntersectionObserver(([entry]) => {
|
||||
clearTimeout(this.timeout);
|
||||
|
||||
if (entry.isIntersecting) {
|
||||
this.timeout = setTimeout(
|
||||
() => {
|
||||
this.visible = entry.isIntersecting;
|
||||
this.createInterval();
|
||||
this.observer.unobserve(this.$el);
|
||||
},
|
||||
{ threshold: 0.2 }
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
this.observer.observe(this.$el);
|
||||
},
|
||||
beforeUnmount() {
|
||||
!this.visible && this.$el && this.observer?.unobserve(this.$el);
|
||||
this.intervalIds = [];
|
||||
},
|
||||
methods: {
|
||||
enterCardArea(id) {
|
||||
this.hoveredID = id;
|
||||
this.handleHover(id, 'onMouseEnter');
|
||||
},
|
||||
leaveCardArea(id) {
|
||||
this.hoveredID = null;
|
||||
this.handleHover(id, 'onMouseLeave');
|
||||
},
|
||||
orderNumber(index) {
|
||||
return (index + 1).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false });
|
||||
},
|
||||
clearAllIntervals() {
|
||||
if (this.intervalIds.length <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.intervalIds.forEach((intervalId) => clearInterval(intervalId));
|
||||
this.intervalIds = [];
|
||||
},
|
||||
createInterval() {
|
||||
const interval = setInterval(() => {
|
||||
this.selectedID = this.selectedID === this.featuresData.length ? 1 : this.selectedID + 1;
|
||||
}, 4000);
|
||||
|
||||
this.intervalIds = [...this.intervalIds, interval];
|
||||
},
|
||||
handleClick(cardId) {
|
||||
this.clearAllIntervals();
|
||||
this.selectedID = cardId;
|
||||
this.cancelInterval = true;
|
||||
},
|
||||
handleHover(cardId, type) {
|
||||
if (this.cancelInterval || cardId !== this.selectedID) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.clearAllIntervals();
|
||||
|
||||
if (type === 'onMouseLeave') {
|
||||
this.selectedID = cardId;
|
||||
this.createInterval();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<div class="template-features">
|
||||
<div v-if="displayType === 'vertical'" class="template-features-vertical-wrapper">
|
||||
<div class="template-features-vertical">
|
||||
<div class="template-features-vertical-col">
|
||||
<template v-for="(data, j) of featuresData.slice(0, Math.ceil(featuresData.length / 2))" :key="j">
|
||||
<div class="template-features-vertical-card">
|
||||
<div class="template-features-vertical-card-image">
|
||||
<img :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
|
||||
</div>
|
||||
<h2>{{ data.title }}</h2>
|
||||
<p>{{ data.description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="template-features-vertical-col">
|
||||
<template v-for="(data, j) of featuresData.slice(Math.ceil(featuresData.length / 2))" :key="j">
|
||||
<div class="template-features-vertical-card">
|
||||
<div class="template-features-vertical-card-image">
|
||||
<img :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
|
||||
</div>
|
||||
<h2>{{ data.title }}</h2>
|
||||
<p>{{ data.description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="template-features-horizontal-wrapper">
|
||||
<div class="template-features-horizontal">
|
||||
<template v-for="(data, index) in featuresData" :key="index">
|
||||
<div class="template-features-horizontal-card">
|
||||
<div class="template-features-horizontal-card-top">
|
||||
<img :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
|
||||
</div>
|
||||
<div class="template-features-horizontal-card-bottom">
|
||||
<h5 class="template-features-horizontal-card-bottom-title">{{ data.title }}</h5>
|
||||
<p class="template-features-horizontal-card-bottom-description">{{ data.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
featuresData: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
displayType: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<svg width="490" height="143" viewBox="0 0 490 143" fill="none" xmlns="http://www.w3.org/2000/svg" class="template-hero-light">
|
||||
<g filter="url(#filter0_f_1970_42395)">
|
||||
<g filter="url(#filter1_f_1970_42395)">
|
||||
<rect x="43" y="43" width="404" height="10" rx="5" fill="var(--primary-100)" />
|
||||
<rect x="38.5" y="38.5" width="413" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
|
||||
</g>
|
||||
<g filter="url(#filter2_f_1970_42395)">
|
||||
<rect x="98" y="52" width="294" height="10" rx="5" fill="var(--primary-100)" />
|
||||
<rect x="93.5" y="47.5" width="303" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
|
||||
</g>
|
||||
<g filter="url(#filter3_f_1970_42395)">
|
||||
<rect x="144" y="60" width="202" height="10" rx="5" fill="var(--primary-100)" />
|
||||
<rect x="139.5" y="55.5" width="211" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
|
||||
</g>
|
||||
<g filter="url(#filter4_f_1970_42395)">
|
||||
<rect x="182" y="75" width="126" height="10" rx="5" fill="var(--primary-100)" />
|
||||
<rect x="177.5" y="70.5" width="135" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
|
||||
</g>
|
||||
<g filter="url(#filter5_f_1970_42395)">
|
||||
<rect x="212" y="90" width="66" height="10" rx="5" fill="var(--primary-100)" />
|
||||
<rect x="207.5" y="85.5" width="75" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_1970_42395" x="0" y="0" width="490" height="143" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="17" result="effect1_foregroundBlur_1970_42395" />
|
||||
</filter>
|
||||
<filter id="filter1_f_1970_42395" x="14" y="14" width="462" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
|
||||
</filter>
|
||||
<filter id="filter2_f_1970_42395" x="69" y="23" width="352" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
|
||||
</filter>
|
||||
<filter id="filter3_f_1970_42395" x="115" y="31" width="260" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
|
||||
</filter>
|
||||
<filter id="filter4_f_1970_42395" x="153" y="46" width="184" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
|
||||
</filter>
|
||||
<filter id="filter5_f_1970_42395" x="183" y="61" width="124" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<svg width="1152" height="457" viewBox="0 0 1152 457" fill="none" xmlns="http://www.w3.org/2000/svg" class="template-hero-rectangle">
|
||||
<g :style="{ mixBlendMode: 'overlay' }" filter="url(#filter0_f_956_37561)">
|
||||
<path d="M264.08 -96H547.881L952 470H-163L264.08 -96Z" fill="url(#paint0_linear_956_37561)" />
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_956_37561" x="-363" y="-296" width="1515" height="966" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||
<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_956_37561" />
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_956_37561" x1="394.5" y1="-96" x2="394.5" y2="470" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="var(--primary-50)" />
|
||||
<stop offset="1" stopColor="var(--primary-50)" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div class="template-hero">
|
||||
<img v-if="!!templateHeroData.pattern" class="template-hero-pattern" :src="templateHeroData.pattern" alt="Template Hero Pattern" />
|
||||
<TemplateHeroLight v-if="!!templateHeroData.light" />
|
||||
<TemplateHeroRectangle v-if="!!templateHeroData.rectangle" />
|
||||
<div class="template-hero-card">
|
||||
<div class="template-hero-card-logo">
|
||||
<slot name="logo" />
|
||||
</div>
|
||||
<p>{{ templateHeroData.description }}</p>
|
||||
<div class="template-hero-card-buttons">
|
||||
<a :href="templateHeroData.liveHref" target="_blank" class="template-hero-card-buttons-btn1 p-button"> Live Demo </a>
|
||||
<a :href="templateHeroData.storeHref ?? 'https://www.primefaces.org/store/'" target="_blank" class="template-hero-card-buttons-btn2 p-button">
|
||||
{{ templateHeroData.free ? 'Source Code' : 'Buy Now' }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="template-hero-card-links">
|
||||
<a :href="templateHeroData.supportHref ?? 'https://github.com/orgs/primefaces/discussions/categories/primevue-templates'" target="_blank">
|
||||
<i class="pi pi-github" />
|
||||
<span>{{ templateHeroData.free ? 'Open Issues' : 'Get Support' }}</span>
|
||||
</a>
|
||||
<a :href="templateHeroData.docHref" target="_blank">
|
||||
<i class="pi pi-book" />
|
||||
<span>Read Doc</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<img v-if="!!templateHeroData.dashboard1" class="template-hero-dashboard1" :src="templateHeroData.dashboard1" alt="Template Dashboard Image 1" />
|
||||
<img v-if="!!templateHeroData.dashboard2" class="template-hero-dashboard2" :src="templateHeroData.dashboard2" alt="Template Dashboard Image 2" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
templateHeroData: {
|
||||
type: null,
|
||||
templateHeroData: null
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div class="template-license-wrapper">
|
||||
<div class="template-license">
|
||||
<div class="template-license-cards">
|
||||
<template v-for="(detail, index) in license.licenseDetails" :key="index">
|
||||
<div class="template-license-card">
|
||||
<span>{{ detail.title }}</span>
|
||||
<h2>{{ detail.price }}</h2>
|
||||
<div class="template-license-card-included">
|
||||
<template v-for="(txt, i) in detail.included" :key="`text_${i}`">
|
||||
<p>{{ txt }}</p>
|
||||
</template>
|
||||
</div>
|
||||
<a href="https://www.primefaces.org/layouts/licenses" target="_blank">
|
||||
<button>License Details</button>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<p class="template-license-description">{{ license.description }}</p>
|
||||
<p class="template-license-visit">
|
||||
Visit the
|
||||
<a :href="license.documentLink" target="_blank"> official documentation </a> for more information.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
license: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<div class="template-related-wrapper">
|
||||
<div class="template-related">
|
||||
<h2 class="template-related-title">Related Layouts</h2>
|
||||
<div class="template-related-slide">
|
||||
<template v-for="(data, index) in relatedData" :key="index">
|
||||
<a :href="data.href" target="_blank" class="template-related-slide-card">
|
||||
<img :src="data.src" :alt="'Related Image ' + index" />
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
relatedData: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<div class="template-separator">
|
||||
<div class="template-separator-icon">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<div class="template-youtube-wrapper">
|
||||
<div class="template-youtube">
|
||||
<div class="template-youtube-title">
|
||||
<template v-for="(data, index) in title" :key="index">
|
||||
<h2>{{ data }}</h2>
|
||||
</template>
|
||||
</div>
|
||||
<div class="template-youtube-description">{{ description }}</div>
|
||||
<div class="template-youtube-screen" @click="youtubeVideoVisible = true">
|
||||
<div class="template-youtube-screen-blur">
|
||||
<div class="template-youtube-screen-play">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180" fill="none">
|
||||
<g filter="url(#filter0_d_918_49700)">
|
||||
<rect x="50" y="46" width="80" height="80" rx="40" fill="white" />
|
||||
<rect x="50.5" y="46.5" width="79" height="79" rx="39.5" stroke="#DFE7EF" />
|
||||
<path
|
||||
d="M103.062 84.7896C104.085 85.5904 104.085 87.1386 103.062 87.9394L85.3123 101.834C83.9995 102.862 82.0795 101.926 82.0795 100.259L82.0795 72.47C82.0795 70.8028 83.9995 69.8674 85.3123 70.8951L103.062 84.7896Z"
|
||||
fill="var(--primary-400)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_918_49700" x="0" y="0" width="180" height="180" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dy="4" />
|
||||
<feGaussianBlur stdDeviation="25" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_918_49700" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_918_49700" result="shape" />
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<img :src="imgSrc" alt="Template Youtube Screen" />
|
||||
</div>
|
||||
<Dialog v-model:visible="youtubeVideoVisible" header="Video Content" :style="{ width: '70vw' }">
|
||||
<div class="template-youtube-video">
|
||||
<iframe :src="youtubeLink" title="PrimeNG 2023 Roadmap" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
imgSrc: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: ['Integration with', 'Existing Vite Applications'],
|
||||
description: "Only the folders that are related to the layout needs to move in to your project. We've already created a short tutorial with details for Sakai Vue. The both templates have the same implementation.",
|
||||
youtubeLink: 'https://www.youtube.com/embed/Y07edRJd5QM',
|
||||
youtubeVideoVisible: false
|
||||
};
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<TemplateSeparator>
|
||||
<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.3576 34.2499L19.6471 28.2974L17.2754 34.2499H22.3576Z" :fill="fillColor" />
|
||||
<path d="M27.8454 28.2974L30.5559 34.2499H25.4736L27.8454 28.2974Z" :fill="fillColor" />
|
||||
<path d="M24.0043 10.25L12.001 34.187H16.0501L24.0048 17.1962L31.7995 34.187H36.009L24.0043 10.25Z" :fill="fillColor" />
|
||||
</svg>
|
||||
</TemplateSeparator>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
fillColor() {
|
||||
return this.$appState.darkTheme ? 'var(--p-surface-0)' : 'var(--p-surface-900)';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<TemplateSeparator>
|
||||
<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M17.736 16.7144C18.5426 24.1391 29.4206 24.1338 30.2244 16.7144C27.4389 16.4579 25.0833 14.6946 23.9802 12.25C22.8772 14.6946 20.5216 16.4579 17.736 16.7144ZM23.2804 23.6609C23.0374 26.3486 20.8981 28.6944 18.2461 29.186C14.6619 29.9314 11.1098 27.2517 10.792 23.6609C13.5776 23.4044 15.9332 21.6411 17.0362 19.1965C18.1312 21.6598 20.591 23.4338 23.2804 23.6609ZM30.2244 30.6073C29.904 33.7706 27.2252 36.25 23.9802 36.25C20.7353 36.25 18.0565 33.7706 17.736 30.6073C20.4255 30.3802 22.8852 28.6062 23.9802 26.1429C25.0752 28.6062 27.535 30.3802 30.2244 30.6073ZM37.1683 23.6609C36.8478 27.0219 33.7737 29.6108 30.3525 29.2768C27.436 29.0551 24.9362 26.5757 24.6798 23.6609C27.3693 23.4338 29.829 21.6598 30.924 19.1965C32.0271 21.6411 34.3827 23.4044 37.1683 23.6609Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
</svg>
|
||||
</TemplateSeparator>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
fillColor() {
|
||||
return this.$appState.darkTheme ? 'var(--p-surface-0)' : 'var(--p-surface-900)';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<TemplateSeparator>
|
||||
<svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clipPath="url(#clip0_1004_106792)">
|
||||
<path
|
||||
d="M37.7352 20.6899C37.7352 20.6516 37.7352 20.6516 37.773 20.6133C37.8109 20.575 37.8109 20.4985 37.8109 20.4602C37.8109 20.3836 37.8109 20.3071 37.773 20.2305L37.7352 20.1922C37.7352 20.154 37.6974 20.154 37.6974 20.1157L32.0217 12.4594C31.9839 12.4211 31.946 12.3829 31.9082 12.3446C31.8703 12.3063 31.8325 12.3063 31.7568 12.268H31.719C31.6812 12.268 31.6055 12.2297 31.5676 12.2297H16.4325C16.3947 12.2297 16.319 12.2297 16.2812 12.268H16.2433C16.2055 12.268 16.1676 12.3063 16.092 12.3446C16.0541 12.3829 16.0163 12.4211 15.9785 12.4594L10.3028 20.1157C10.3028 20.154 10.2649 20.154 10.2649 20.1922L10.2271 20.2305C10.2271 20.2688 10.1893 20.3071 10.1893 20.3071C10.1514 20.4219 10.1514 20.4985 10.1893 20.6133C10.1893 20.6516 10.1893 20.6516 10.2271 20.6899C10.2271 20.7282 10.2649 20.7282 10.2649 20.7665L10.3028 20.8047L23.546 36.1172H23.6217C23.6595 36.1555 23.6595 36.1555 23.6974 36.1938L23.7352 36.2321L23.8109 36.2704H23.8487C23.9244 36.3086 24.0379 36.3086 24.1514 36.2704H24.1893L24.2649 36.2321L24.3028 36.1938C24.3406 36.1555 24.3785 36.1555 24.3785 36.1172L24.4163 36.079L37.6595 20.7665L37.6974 20.7282C37.7352 20.7282 37.7352 20.6899 37.7352 20.6899ZM17.3406 20.9961H30.6217L24.0001 34.4711L17.3406 20.9961ZM24.0001 13.5696L30.2055 19.8477H17.7947L24.0001 13.5696ZM36.1082 19.8477H32.1352V14.4883L36.1082 19.8477ZM31.0001 13.3399V19.0438L25.3622 13.3399H31.0001ZM17.0001 19.0438V13.3399H22.6379L17.0001 19.0438ZM15.8649 14.4883V19.8477H11.892L15.8649 14.4883ZM16.092 20.9961L21.5406 31.9829L12.0055 20.9961H16.092ZM26.4974 31.9829L31.946 20.9961H36.0325L26.4974 31.9829Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1004_106792">
|
||||
<rect width="28" height="24.5" fill="white" transform="translate(10 12)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</TemplateSeparator>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
fillColor() {
|
||||
return this.$appState.darkTheme ? 'var(--p-surface-0)' : 'var(--p-surface-900)';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<TemplateSeparator>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="49" viewBox="0 0 48 49" fill="none">
|
||||
<path d="M14 12H21.1333V16.5881L34.2105 14V20L21.1333 22.5881V24.5881L34.2105 22V28L21.1333 30.5881V36H14V12Z" :fill="fillColor" />
|
||||
</svg>
|
||||
</TemplateSeparator>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
fillColor() {
|
||||
return this.$appState.darkTheme ? 'var(--p-surface-0)' : 'var(--p-surface-900)';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<TemplateSeparator>
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" fill="white" />
|
||||
<rect x="0.5" y="0.5" width="47" height="47" rx="23.5" stroke="#DFE7EF" />
|
||||
<path
|
||||
d="M24.0876 12L26.9043 14.1136L25.6009 15.8507L25.0386 15.4293L25.0363 25.583L29.231 27.1112L32.1018 13.3479L35.1539 16.382L34.3935 18.1408L33.4104 17.7119L30.8451 30.0106L25.0363 27.8953L25.0345 36H23.134L23.1358 27.886L17.3024 30.0106L14.7434 17.7119L13.4501 18.1408L13 16.382L16.0532 13.3469L18.9176 27.1112L23.1358 25.5737L23.1382 15.4262L22.5732 15.8507L21.2698 14.1136L24.0876 12Z"
|
||||
fill="url(#paint0_linear_1894_9042)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_1894_9042" x1="1120.7" y1="12" x2="1120.7" y2="2412" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#5CACF4" />
|
||||
<stop offset="1" stop-color="#1B74C5" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</TemplateSeparator>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<TemplateSeparator>
|
||||
<svg width="33" height="24" viewBox="0 0 33 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clipPath="url(#clip0_2130_100567)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10.2923 11.548C10.288 11.642 10.2858 11.7366 10.2858 11.8317C10.2858 15.2102 13.0246 17.949 16.4032 17.949C19.7817 17.949 22.5205 15.2102 22.5205 11.8317C22.5205 11.7343 22.5183 11.6375 22.5138 11.5413C23.1235 11.448 23.7317 11.3408 24.3378 11.2196L24.4013 11.2069C24.4172 11.4131 24.4253 11.6214 24.4253 11.8317C24.4253 16.2621 20.8337 19.8538 16.4032 19.8538C11.9727 19.8538 8.38106 16.2621 8.38106 11.8317C8.38106 11.6244 8.3889 11.4189 8.40437 11.2156L8.42433 11.2196C9.04498 11.3437 9.6678 11.4532 10.2923 11.548ZM19.9854 6.87227C18.9785 6.14373 17.741 5.71429 16.4032 5.71429C15.063 5.71429 13.8234 6.14526 12.8156 6.87619C11.9977 6.7939 11.182 6.68324 10.37 6.54423C11.8403 4.86785 13.9982 3.80952 16.4032 3.80952C18.805 3.80952 20.9604 4.86507 22.4305 6.5376C21.6187 6.67752 20.8031 6.7891 19.9854 6.87227ZM26.2803 10.8311C26.3132 11.1602 26.33 11.4939 26.33 11.8317C26.33 17.3141 21.8856 21.7585 16.4032 21.7585C10.9207 21.7585 6.4763 17.3141 6.4763 11.8317C6.4763 11.4969 6.49287 11.166 6.52521 10.8398L4.64967 10.4646C4.59805 10.9132 4.57153 11.3693 4.57153 11.8317C4.57153 18.3661 9.86875 23.6633 16.4032 23.6633C22.9376 23.6633 28.2348 18.3661 28.2348 11.8317C28.2348 11.3663 28.208 10.9073 28.1557 10.456L26.2803 10.8311ZM26.5412 5.72846L24.5307 6.13055C22.7348 3.57493 19.764 1.90476 16.4032 1.90476C13.0389 1.90476 10.0656 3.57831 8.27016 6.13832L6.26033 5.73634C8.33039 2.29907 12.0983 0 16.4032 0C20.7048 0 24.4702 2.29555 26.5412 5.72846Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
<path d="M16.1905 11.0192C6.30316 11.5167 0 5.33337 0 5.33337C0 5.33337 9.90476 8.75196 16.1905 8.75196C22.4762 8.75196 32.381 5.33337 32.381 5.33337C32.381 5.33337 26.0778 10.5217 16.1905 11.0192Z" :fill="fillColor" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2130_100567">
|
||||
<rect width="32.381" height="24" :fill="fillColor" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</TemplateSeparator>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
fillColor() {
|
||||
return this.$appState.darkTheme ? 'var(--p-surface-0)' : 'var(--p-surface-900)';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<TemplateSeparator>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="49" viewBox="0 0 48 49" fill="none">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M36.9818 19.6064C36.9445 19.5171 36.8573 19.4593 36.7606 19.4593H35.4433L36.1606 18.594C36.22 18.5228 36.2319 18.424 36.1927 18.3404C36.1534 18.2568 36.0691 18.2034 35.9762 18.2034H21.5204L17.421 14.3157C17.3415 14.2408 17.2208 14.2283 17.1289 14.2866L14.829 15.7264L14.8271 15.7283L14.8247 15.7292L12.1082 17.5124C12.1015 17.5167 12.0982 17.5233 12.0919 17.5286C12.0785 17.5391 12.067 17.5506 12.0565 17.5635C12.0469 17.5749 12.0393 17.5864 12.0321 17.5993C12.0244 17.6131 12.0192 17.627 12.0144 17.6418C12.0096 17.6571 12.0067 17.6723 12.0048 17.6886C12.0043 17.6967 12 17.7034 12 17.712C12 17.7196 12.0034 17.7253 12.0043 17.733C12.0057 17.7487 12.0091 17.7636 12.0139 17.7793C12.0187 17.7951 12.0239 17.8099 12.0321 17.8247C12.0354 17.8309 12.0359 17.8376 12.0397 17.8438C12.0431 17.849 12.0493 17.8509 12.0532 17.8557C12.0699 17.8772 12.0895 17.8949 12.1125 17.9092C12.1211 17.9144 12.1279 17.9211 12.1365 17.9254C12.1681 17.9407 12.2026 17.9507 12.2399 17.9507H15.5109L16.2493 19.7878L16.2502 19.7893V19.7907L21.054 31.2682L18.2183 33.8346C18.145 33.9009 18.1201 34.005 18.156 34.0972C18.1915 34.1894 18.2806 34.25 18.3792 34.25H22.4618C22.4934 34.25 22.5246 34.2433 22.5538 34.2314C22.5829 34.2194 22.6093 34.2017 22.6313 34.1798L24.7775 32.0314C24.7804 32.0347 24.7813 32.039 24.7847 32.0424L26.8169 34.1755C26.8624 34.2238 26.9223 34.2371 26.9917 34.25C30.6812 34.2294 36.2789 34.2108 36.5423 34.2381C36.5671 34.2462 36.5925 34.25 36.6179 34.25C36.6998 34.25 36.7797 34.2084 36.8243 34.1364C36.9627 33.9119 36.9617 33.9095 29.8916 26.9127L36.9296 19.8681C36.9986 19.7983 37.0187 19.6957 36.9818 19.6064ZM35.4677 18.6804L34.8227 19.4593H22.8449L22.0237 18.6804H35.4677ZM17.2261 14.789L22.1506 19.4593H16.6333L15.2528 16.0244L17.2261 14.789ZM13.0386 17.4727L14.8429 16.2884L15.3189 17.4727H13.0386ZM25.1314 31.7129C25.1251 31.7062 25.1165 31.7033 25.1098 31.6981L26.8251 29.9813V33.4903L25.1314 31.7129ZM36.0653 33.7581C35.1613 33.7448 32.915 33.7391 27.3039 33.7701V29.6571C27.3039 29.6131 27.2886 29.5739 27.268 29.5381L29.554 27.2498C31.8084 29.4813 34.9999 32.6574 36.0653 33.7581ZM22.5451 33.5891L16.8306 19.9368H34.8754C34.8926 19.9406 34.9099 19.9459 34.9271 19.9459C34.941 19.9459 34.9539 19.9392 34.9678 19.9368H36.1841L22.5451 33.5891Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
</svg>
|
||||
</TemplateSeparator>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
fillColor() {
|
||||
return this.$appState.darkTheme ? 'var(--p-surface-0)' : 'var(--p-surface-900)';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<TemplateSeparator>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="49" viewBox="0 0 48 49" fill="none">
|
||||
<g clipPath="url(#clip0_987_15401)">
|
||||
<path d="M33.5642 18.0857H14.8584V18.2232H33.5642V18.0857Z" :fill="fillColor" fillOpacity="0.5" />
|
||||
<path d="M35.077 21.7993H12.9326V21.9369H35.077V21.7993Z" :fill="fillColor" fillOpacity="0.5" />
|
||||
<path d="M34.9394 25.5129H13.3452V25.6505H34.9394V25.5129Z" :fill="fillColor" />
|
||||
<path d="M33.9768 29.2266H14.4458V29.3641H33.9768V29.2266Z" :fill="fillColor" />
|
||||
<path d="M22.9547 12.4471L22.834 12.375L14.0757 28.5054L14.1964 28.5775L22.9547 12.4471Z" :fill="fillColor" fillOpacity="0.5" />
|
||||
<path d="M26.8757 12.8025L26.7551 12.7302L16.4265 31.7024L16.5214 31.7932L26.8757 12.8025Z" :fill="fillColor" />
|
||||
<path d="M30.1539 14.3382L30.0337 14.2654L19.3041 33.7536L19.4244 33.8264L30.1539 14.3382Z" :fill="fillColor" />
|
||||
<path d="M32.6656 17.4603L32.5459 17.3865L22.8027 34.7793L22.9225 34.8531L32.6656 17.4603Z" :fill="fillColor" />
|
||||
<path d="M34.541 21.3825L34.4209 21.3094L27.2179 34.3463L27.338 34.4193L34.541 21.3825Z" :fill="fillColor" />
|
||||
<path d="M28.4863 25.8294L32.9655 17.778L34.3133 20.6083L28.0059 32.0445L18.5141 14.5333L20.9781 13.2376L27.6071 25.8194L28.0375 26.6363L28.4863 25.8294Z" :fill="fillColor" stroke="var(--p-surface-900)" />
|
||||
<path
|
||||
d="M28.0018 33.1409L27.9796 33.1001L17.7893 14.2999L21.9377 14.2281L21.9451 14.2421L28.0495 25.5322L32.2144 18.0938L34.252 21.8213L34.2446 21.8347L28.0018 33.1409ZM17.877 14.3524L28.0023 33.0324L34.1927 21.821L32.2141 18.2015L28.0488 25.6402L28.0269 25.5994L21.9079 14.2826L17.877 14.3524Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
<g filter="url(#filter1_dd_987_15401)">
|
||||
<mask id="path-15-inside-1_987_15401" fill="white">
|
||||
<path
|
||||
d="M36 24C36 30.6274 30.6274 36 24 36C17.3726 36 12 30.6274 12 24C12 17.3726 17.3726 12 24 12C30.6274 12 36 17.3726 36 24ZM13.2 24C13.2 29.9647 18.0353 34.8 24 34.8C29.9647 34.8 34.8 29.9647 34.8 24C34.8 18.0353 29.9647 13.2 24 13.2C18.0353 13.2 13.2 18.0353 13.2 24Z"
|
||||
/>
|
||||
</mask>
|
||||
<path
|
||||
d="M36 24C36 30.6274 30.6274 36 24 36C17.3726 36 12 30.6274 12 24C12 17.3726 17.3726 12 24 12C30.6274 12 36 17.3726 36 24ZM13.2 24C13.2 29.9647 18.0353 34.8 24 34.8C29.9647 34.8 34.8 29.9647 34.8 24C34.8 18.0353 29.9647 13.2 24 13.2C18.0353 13.2 13.2 18.0353 13.2 24Z"
|
||||
stroke="var(--p-surface-900)"
|
||||
strokeWidth="2"
|
||||
mask="url(#path-15-inside-1_987_15401)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</TemplateSeparator>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
fillColor() {
|
||||
return this.$appState.darkTheme ? 'var(--p-surface-0)' : 'var(--p-surface-900)';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
<template>
|
||||
<div class="apollo template">
|
||||
<TemplateHero :templateHeroData="templateHeroData">
|
||||
<template #logo>
|
||||
<svg width="235" height="40" viewBox="0 0 235 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20.0055 0L0 39.8951H6.7486L20.0064 11.5771L32.9975 39.8951H40.0134L20.0055 0Z" :fill="fillColor" />
|
||||
<path d="M26.4066 30.0791L30.9241 40.0001H22.4536L26.4066 30.0791Z" :fill="fillColor" />
|
||||
<path d="M17.2595 40.0001L12.7419 30.0791L8.78906 40.0001H17.2595Z" :fill="fillColor" />
|
||||
<path d="M78.0429 27.6582H66.3425L63.2979 34.2844H58.855L72.3786 5.28833L85.4243 34.2844H80.9104L78.0429 27.6582ZM76.3613 23.7886L72.3078 14.512L68.0595 23.7886H76.3613Z" :fill="fillColor" />
|
||||
<path
|
||||
d="M100.155 23.2053V34.2843H96.0303V7.0022H100.703C102.993 7.0022 104.721 7.16123 105.89 7.47928C107.07 7.79734 108.108 8.39811 109.005 9.2816C110.575 10.813 111.359 12.7449 111.359 15.0773C111.359 17.5746 110.521 19.5536 108.846 21.0143C107.17 22.4751 104.91 23.2053 102.066 23.2053H100.155ZM100.155 19.3887H101.695C105.483 19.3887 107.377 17.9339 107.377 15.0243C107.377 12.2089 105.423 10.8012 101.517 10.8012H100.155V19.3887Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
<path
|
||||
d="M121.418 20.5197C121.418 16.6795 122.829 13.3811 125.649 10.6246C128.458 7.86811 131.833 6.48987 135.774 6.48987C139.668 6.48987 143.008 7.8799 145.793 10.6599C148.59 13.44 149.988 16.7796 149.988 20.6788C149.988 24.6013 148.584 27.9292 145.775 30.6622C142.955 33.4069 139.55 34.7792 135.562 34.7792C132.033 34.7792 128.865 33.5601 126.056 31.1216C122.964 28.4239 121.418 24.89 121.418 20.5197ZM125.578 20.5727C125.578 23.5882 126.593 26.0681 128.623 28.0117C130.641 29.9554 132.972 30.9271 135.615 30.9271C138.482 30.9271 140.902 29.9377 142.872 27.9586C144.843 25.9561 145.828 23.5176 145.828 20.6433C145.828 17.7337 144.855 15.2953 142.908 13.3281C140.972 11.3491 138.577 10.3596 135.721 10.3596C132.877 10.3596 130.475 11.3491 128.517 13.3281C126.558 15.2835 125.578 17.6984 125.578 20.5727Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
<path d="M166.47 7.0022V30.4147H174.507V34.2843H162.346V7.0022H166.47Z" :fill="fillColor" />
|
||||
<path d="M189.715 7.0022V30.4147H197.752V34.2843H185.591V7.0022H189.715Z" :fill="fillColor" />
|
||||
<path
|
||||
d="M206.34 20.5197C206.34 16.6795 207.75 13.3811 210.57 10.6246C213.379 7.86811 216.754 6.48987 220.696 6.48987C224.59 6.48987 227.929 7.8799 230.715 10.6599C233.512 13.44 234.911 16.7796 234.911 20.6788C234.911 24.6013 233.506 27.9292 230.698 30.6622C227.876 33.4069 224.472 34.7792 220.484 34.7792C216.954 34.7792 213.787 33.5601 210.979 31.1216C207.886 28.4239 206.34 24.89 206.34 20.5197ZM210.5 20.5727C210.5 23.5882 211.515 26.0681 213.545 28.0117C215.564 29.9554 217.893 30.9271 220.536 30.9271C223.403 30.9271 225.823 29.9377 227.794 27.9586C229.765 25.9561 230.751 23.5176 230.751 20.6433C230.751 17.7337 229.776 15.2953 227.83 13.3281C225.893 11.3491 223.499 10.3596 220.643 10.3596C217.8 10.3596 215.398 11.3491 213.438 13.3281C211.48 15.2835 210.5 17.6984 210.5 20.5727Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
</TemplateHero>
|
||||
<ApolloSeparator />
|
||||
<div class="hidden">
|
||||
<TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-youtube-screen.png" />
|
||||
<ApolloSeparator />
|
||||
</div>
|
||||
<TemplateLicense :license="license" />
|
||||
<ApolloSeparator />
|
||||
<TemplateFeaturesAnimation :featuresData="animationFeaturesData2" title="Features" />
|
||||
<ApolloSeparator />
|
||||
<TemplateFeatures :featuresData="apolloFeatures1Data" displayType="horizontal" />
|
||||
<ApolloSeparator />
|
||||
<TemplateConfiguration title="Vue based on Vite and Nuxt" description="Apollo is powered by Vite and Nuxt to get started in no time following the best practices." />
|
||||
<ApolloSeparator />
|
||||
<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>
|
||||
Apollo 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/zQOW0XBXdCTqODzEOqwBtt/Preview-%7C-Apollo-2022?node-id=335%3A21768&t=urYI89V3PLNAZEJG-1/">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the
|
||||
Apollo Figma file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.
|
||||
</template>
|
||||
</TemplateFeaturesAnimation>
|
||||
<ApolloSeparator />
|
||||
<TemplateFeatures :featuresData="apolloFeatures2Data" displayType="vertical" />
|
||||
<ApolloSeparator />
|
||||
<TemplateRelated :relatedData="apolloRelatedData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ApolloSeparator from '@/doc/templates/ApolloSeparator.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
apolloRelatedData: [
|
||||
{
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/diamond-vue.jpg',
|
||||
href: '/templates/diamond'
|
||||
},
|
||||
{
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/avalon-vue.jpg',
|
||||
href: '/templates/avalon'
|
||||
},
|
||||
{
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/freya-vue.png',
|
||||
href: '/templates/freya'
|
||||
}
|
||||
],
|
||||
apolloFeatures1Data: [
|
||||
{
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-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/apollo/apollo-features1-feature2.png',
|
||||
title: 'E-Commerce Pages',
|
||||
description: 'Apollo offers E-commerce pages to kickstart your e-commerce project powered by PrimeBlocks.'
|
||||
},
|
||||
{
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-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.'
|
||||
}
|
||||
],
|
||||
apolloFeatures2Data: [
|
||||
{
|
||||
title: 'Fully Responsive',
|
||||
description: 'Apollo is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-responsive.png'
|
||||
},
|
||||
{
|
||||
title: 'Lifetime Support',
|
||||
description: 'Apollo 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: '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: '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: '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: 'Mobile Experience',
|
||||
description: 'Touch optimized enhanced mobile experience with responsive design.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-features2-mobile.png'
|
||||
}
|
||||
],
|
||||
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: 'Apollo 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/apollo/features-animation-figma.png'
|
||||
}
|
||||
],
|
||||
animationFeaturesData2: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Light / Dark / Dim Modes',
|
||||
description: 'Apollo has 3 display modes to choose from; Light, Dim and Dark.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-darkmode.png'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Component Themes',
|
||||
description: 'Apollo offers 24 built-in component themes and creating your own theme is a matter of defining couple of sass variables.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/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/apollo/features-animation-orientations.png',
|
||||
type: 'inline-animation',
|
||||
inlineFeaturesData: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Static',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Static.png'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Slim',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Slim.png'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Reveal',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Reveal.png'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Horizontal',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Horizontal.png'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Overlay',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Overlay.png'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Slim+',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Slim+.png'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Drawer',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/Drawer.png'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Menu Themes',
|
||||
description: 'Stunning theming for the main menu with 3 alternatives; Color Scheme, Primary Color and Transparent.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-menu-themes.png'
|
||||
}
|
||||
],
|
||||
license: {
|
||||
documentLink: 'https://apollo.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.',
|
||||
licenseDetails: [
|
||||
{
|
||||
title: 'Basic License',
|
||||
price: '$59',
|
||||
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
||||
},
|
||||
{
|
||||
title: 'Extended License',
|
||||
price: '$590',
|
||||
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
||||
}
|
||||
]
|
||||
},
|
||||
templateHeroData: {
|
||||
pattern: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-hero-pattern.png',
|
||||
dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-hero-dashboard1.png',
|
||||
dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-hero-dashboard2.png',
|
||||
description: 'Application template for Vue based on Vite with light-dim-dark modes, four menu layouts, various menu themes, sample apps, ready to use template pages and 24 PrimeVue themes.',
|
||||
liveHref: 'https://apollo.primevue.org',
|
||||
docHref: 'https://apollo.primevue.org/documentation'
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
fillColor() {
|
||||
return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ApolloSeparator
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,243 @@
|
|||
<template>
|
||||
<div class="atlantis template">
|
||||
<TemplateHero :templateHeroData="templateHeroData">
|
||||
<template #logo>
|
||||
<svg width="149" height="40" viewBox="0 0 149 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M69.3651 24.0154H61.2671L59.6707 27.7636H56.5703L63.8585 11.5677H66.82L74.1313 27.7636H70.9847L69.3651 24.0154ZM68.3702 21.6555L65.3161 14.5755L62.2852 21.6555H68.3702Z" :fill="fillColor" />
|
||||
<path
|
||||
d="M83.2274 27.0927C82.8881 27.3703 82.4716 27.5785 81.978 27.7174C81.4998 27.8562 80.9908 27.9256 80.451 27.9256C79.0936 27.9256 78.0447 27.5708 77.3043 26.8613C76.5639 26.1518 76.1938 25.1183 76.1938 23.7609V17.8147H74.1577V15.501H76.1938V12.6783H79.0859V15.501H82.3945V17.8147H79.0859V23.6915C79.0859 24.2931 79.2324 24.7558 79.5255 25.0797C79.8186 25.3882 80.2427 25.5425 80.798 25.5425C81.4459 25.5425 81.9857 25.3728 82.4176 25.0335L83.2274 27.0927Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
<path d="M85.6065 10.596H88.4987V27.7636H85.6065V10.596Z" :fill="fillColor" />
|
||||
<path
|
||||
d="M97.0145 15.2696C98.8346 15.2696 100.223 15.7092 101.179 16.5885C102.151 17.4522 102.637 18.7633 102.637 20.5217V27.7636H99.9067V26.2597C99.5519 26.7996 99.0429 27.2161 98.3796 27.5091C97.7318 27.7868 96.9451 27.9256 96.0196 27.9256C95.0942 27.9256 94.2844 27.7713 93.5903 27.4628C92.8961 27.1389 92.3563 26.6993 91.9707 26.144C91.6005 25.5733 91.4154 24.9332 91.4154 24.2237C91.4154 23.1131 91.8241 22.2262 92.6416 21.5629C93.4746 20.8842 94.778 20.5449 96.5518 20.5449H99.7447V20.3598C99.7447 19.496 99.4825 18.8327 98.958 18.37C98.449 17.9073 97.6855 17.6759 96.6675 17.6759C95.9734 17.6759 95.287 17.7839 94.6083 17.9998C93.945 18.2158 93.382 18.5165 92.9193 18.9022L91.7856 16.7967C92.4334 16.3031 93.2123 15.9252 94.1224 15.663C95.0325 15.4008 95.9965 15.2696 97.0145 15.2696ZM96.6212 25.8201C97.3462 25.8201 97.9863 25.6582 98.5416 25.3342C99.1123 24.9949 99.5133 24.5167 99.7447 23.8997V22.4653H96.76C95.0942 22.4653 94.2612 23.0128 94.2612 24.108C94.2612 24.6324 94.4695 25.0489 94.8859 25.3574C95.3024 25.6659 95.8808 25.8201 96.6212 25.8201Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
<path
|
||||
d="M113.359 15.2696C114.917 15.2696 116.166 15.7247 117.107 16.6347C118.048 17.5448 118.519 18.8944 118.519 20.6837V27.7636H115.626V21.0539C115.626 19.9742 115.372 19.1644 114.863 18.6245C114.354 18.0692 113.629 17.7916 112.688 17.7916C111.624 17.7916 110.783 18.1155 110.166 18.7633C109.549 19.3957 109.241 20.3135 109.241 21.5166V27.7636H106.349V15.4085H109.102V17.0049C109.58 16.4342 110.182 16.0023 110.907 15.7092C111.631 15.4162 112.449 15.2696 113.359 15.2696Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
<path
|
||||
d="M129.614 27.0927C129.275 27.3703 128.859 27.5785 128.365 27.7174C127.887 27.8562 127.378 27.9256 126.838 27.9256C125.481 27.9256 124.432 27.5708 123.691 26.8613C122.951 26.1518 122.581 25.1183 122.581 23.7609V17.8147H120.545V15.501H122.581V12.6783H125.473V15.501H128.781V17.8147H125.473V23.6915C125.473 24.2931 125.619 24.7558 125.912 25.0797C126.206 25.3882 126.63 25.5425 127.185 25.5425C127.833 25.5425 128.373 25.3728 128.805 25.0335L129.614 27.0927Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
<path
|
||||
d="M131.994 15.4085H134.886V27.7636H131.994V15.4085ZM133.451 13.3724C132.927 13.3724 132.487 13.2104 132.132 12.8865C131.778 12.5472 131.6 12.1307 131.6 11.6371C131.6 11.1435 131.778 10.7348 132.132 10.4109C132.487 10.0715 132.927 9.90186 133.451 9.90186C133.976 9.90186 134.415 10.0638 134.77 10.3877C135.125 10.6962 135.302 11.0896 135.302 11.5677C135.302 12.0767 135.125 12.5086 134.77 12.8634C134.431 13.2027 133.991 13.3724 133.451 13.3724Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
<path
|
||||
d="M142.499 27.9256C141.497 27.9256 140.517 27.7945 139.561 27.5323C138.604 27.27 137.841 26.9384 137.27 26.5374L138.381 24.3394C138.936 24.7095 139.599 25.0103 140.371 25.2417C141.157 25.4576 141.928 25.5656 142.684 25.5656C144.412 25.5656 145.276 25.1106 145.276 24.2005C145.276 23.7686 145.052 23.4679 144.605 23.2982C144.173 23.1285 143.471 22.9666 142.499 22.8123C141.481 22.6581 140.648 22.4807 140 22.2802C139.368 22.0796 138.813 21.7326 138.335 21.239C137.872 20.73 137.64 20.0282 137.64 19.1335C137.64 17.9612 138.126 17.0281 139.098 16.3339C140.085 15.6244 141.412 15.2696 143.078 15.2696C143.926 15.2696 144.774 15.3699 145.623 15.5704C146.471 15.7555 147.165 16.01 147.705 16.3339L146.594 18.532C145.546 17.915 144.366 17.6065 143.054 17.6065C142.206 17.6065 141.558 17.7376 141.111 17.9998C140.679 18.2466 140.463 18.5782 140.463 18.9947C140.463 19.4574 140.694 19.7891 141.157 19.9896C141.635 20.1747 142.368 20.3521 143.355 20.5217C144.342 20.676 145.152 20.8534 145.785 21.0539C146.417 21.2544 146.957 21.5938 147.404 22.0719C147.867 22.5501 148.098 23.2288 148.098 24.108C148.098 25.2648 147.597 26.1903 146.594 26.8844C145.592 27.5785 144.227 27.9256 142.499 27.9256Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M11.5733 7.44072C12.9176 19.8152 31.0475 19.8063 32.3873 7.44072C27.7447 7.01325 23.8187 4.07436 21.9803 0C20.142 4.07436 16.216 7.01325 11.5733 7.44072ZM20.814 19.0181C20.4089 23.4977 16.8435 27.4073 12.4234 28.2266C6.44984 29.469 0.529697 25.0028 0 19.0181C4.64264 18.5907 8.56863 15.6518 10.407 11.5774C12.232 15.683 16.3316 18.6397 20.814 19.0181ZM32.3873 30.5956C31.8532 35.8677 27.3886 40 21.9803 40C16.5721 40 12.1075 35.8677 11.5733 30.5956C16.0557 30.2171 20.1553 27.2604 21.9803 23.1548C23.8053 27.2604 27.9049 30.2171 32.3873 30.5956ZM43.9603 19.0181C43.4261 24.6198 38.3028 28.9346 32.6007 28.378C27.74 28.0085 23.5736 23.8762 23.1463 19.0181C27.6287 18.6397 31.7283 15.683 33.5533 11.5774C35.3917 15.6518 39.3177 18.5907 43.9603 19.0181Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
</TemplateHero>
|
||||
<AtlantisSeparator />
|
||||
<TemplateLicense :license="license" />
|
||||
<AtlantisSeparator />
|
||||
<div class="hidden">
|
||||
<TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-youtube-screen.png" />
|
||||
<AtlantisSeparator />
|
||||
</div>
|
||||
<TemplateFeaturesAnimation :featuresData="animationFeaturesData2" title="Features" />
|
||||
<AtlantisSeparator />
|
||||
<TemplateConfiguration 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." />
|
||||
<AtlantisSeparator />
|
||||
<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>
|
||||
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.
|
||||
</template>
|
||||
</TemplateFeaturesAnimation>
|
||||
<AtlantisSeparator />
|
||||
<TemplateFeatures :featuresData="features2Data" displayType="vertical" />
|
||||
<AtlantisSeparator />
|
||||
<TemplateRelated :relatedData="relatedData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AtlantisSeparator from '@/doc/templates/ApolloSeparator.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
features2Data: [
|
||||
{
|
||||
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'
|
||||
}
|
||||
],
|
||||
relatedData: [
|
||||
{
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/freya-vue.png',
|
||||
href: '/templates/freya'
|
||||
},
|
||||
{
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/ultima-vue.jpg',
|
||||
href: '/templates/ultima'
|
||||
},
|
||||
{
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo-vue.jpg',
|
||||
href: '/templates/apollo'
|
||||
}
|
||||
],
|
||||
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: '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'
|
||||
}
|
||||
],
|
||||
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/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'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
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.',
|
||||
licenseDetails: [
|
||||
{
|
||||
title: 'Basic License',
|
||||
price: '$59',
|
||||
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
||||
},
|
||||
{
|
||||
title: 'Extended License',
|
||||
price: '$590',
|
||||
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
||||
}
|
||||
]
|
||||
},
|
||||
templateHeroData: {
|
||||
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/'
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
fillColor() {
|
||||
return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
|
||||
}
|
||||
},
|
||||
components: {
|
||||
AtlantisSeparator
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,243 @@
|
|||
<template>
|
||||
<div class="avalon template">
|
||||
<TemplateHero :templateHeroData="templateHeroData">
|
||||
<template #logo>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="40" viewBox="0 0 125 40" fill="none">
|
||||
<path d="M6.33333 0.555555H14.6111L20.9444 39.4444H14.8333L13.7222 31.7222V31.8333H6.77778L5.66667 39.4444H0L6.33333 0.555555ZM13 26.5556L10.2778 7.33334H10.1667L7.5 26.5556H13Z" :fill="fillColor" />
|
||||
<path d="M20.7248 0.555555H26.8915L30.8915 30.7222H31.0026L35.0026 0.555555H40.6137L34.7248 39.4444H26.6137L20.7248 0.555555Z" :fill="fillColor" />
|
||||
<path d="M46.6978 0.555555H54.9756L61.3091 39.4444H55.1978L54.0867 31.7222V31.8333H47.1423L46.0311 39.4444H40.3645L46.6978 0.555555ZM53.3645 26.5556L50.6422 7.33334H50.5311L47.8645 26.5556H53.3645Z" :fill="fillColor" />
|
||||
<path d="M64.2738 0.555555H70.3849V33.8889H80.4404V39.4444H64.2738V0.555555Z" :fill="fillColor" />
|
||||
<path
|
||||
d="M91.9875 40C88.9875 40 86.691 39.1482 85.0986 37.4444C83.5059 35.7407 82.7097 33.3333 82.7097 30.2222V9.77779C82.7097 6.66667 83.5059 4.25925 85.0986 2.55556C86.691 0.851853 88.9875 0 91.9875 0C94.9875 0 97.2837 0.851853 98.8764 2.55556C100.469 4.25925 101.265 6.66667 101.265 9.77779V30.2222C101.265 33.3333 100.469 35.7407 98.8764 37.4444C97.2837 39.1482 94.9875 40 91.9875 40ZM91.9875 34.4444C94.0986 34.4444 95.1541 33.1667 95.1541 30.6111V9.3889C95.1541 6.83334 94.0986 5.55556 91.9875 5.55556C89.8764 5.55556 88.8208 6.83334 88.8208 9.3889V30.6111C88.8208 33.1667 89.8764 34.4444 91.9875 34.4444Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
<path d="M105.398 0.555555H113.065L119.009 23.8333H119.12V0.555555H124.565V39.4444H118.287L110.954 11.0556H110.842V39.4444H105.398V0.555555Z" :fill="fillColor" />
|
||||
</svg>
|
||||
</template>
|
||||
</TemplateHero>
|
||||
<AvalonSeparator />
|
||||
<TemplateLicense :license="license" />
|
||||
<AvalonSeparator />
|
||||
<TemplateFeaturesAnimation :featuresData="animationFeaturesData2" title="Features" />
|
||||
<AvalonSeparator />
|
||||
<TemplateConfiguration title="Vue App with No Configuration" description="Avalon is powered by Vite to get started in no time following the best practices." />
|
||||
<AvalonSeparator />
|
||||
<TemplateFeatures :featuresData="features1Data" displayType="horizontal" />
|
||||
<AvalonSeparator />
|
||||
<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>
|
||||
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.
|
||||
</template>
|
||||
</TemplateFeaturesAnimation>
|
||||
<AvalonSeparator />
|
||||
<TemplateFeatures :featuresData="features2Data" displayType="vertical" />
|
||||
<AvalonSeparator />
|
||||
<TemplateRelated :relatedData="relatedData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AvalonSeparator from '@/doc/templates/AvalonSeparator.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
features2Data: [
|
||||
{
|
||||
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'
|
||||
}
|
||||
],
|
||||
relatedData: [
|
||||
{
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/atlantis-vue.jpg',
|
||||
href: '/templates/atlantis'
|
||||
},
|
||||
{
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo-vue.jpg',
|
||||
href: '/templates/apollo'
|
||||
},
|
||||
{
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/freya-vue.png',
|
||||
href: '/templates/freya'
|
||||
}
|
||||
],
|
||||
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: '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'
|
||||
}
|
||||
],
|
||||
animationFeaturesData2: [
|
||||
{
|
||||
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'
|
||||
}
|
||||
],
|
||||
features1Data: [
|
||||
{
|
||||
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.'
|
||||
}
|
||||
],
|
||||
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.',
|
||||
licenseDetails: [
|
||||
{
|
||||
title: 'Basic License',
|
||||
price: '$49',
|
||||
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
||||
},
|
||||
{
|
||||
title: 'Extended License',
|
||||
price: '$490',
|
||||
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
||||
}
|
||||
]
|
||||
},
|
||||
templateHeroData: {
|
||||
pattern: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-pattern.png',
|
||||
rectangle: true,
|
||||
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'
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
fillColor() {
|
||||
return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
|
||||
}
|
||||
},
|
||||
components: {
|
||||
AvalonSeparator
|
||||
}
|
||||
};
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,229 @@
|
|||
<template>
|
||||
<div class="freya template">
|
||||
<TemplateHero :templateHeroData="templateHeroData">
|
||||
<template #logo>
|
||||
<svg width="139" height="40" viewBox="0 0 139 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0H10.5065V6.75772L29.7675 2.94574V11.7829L10.5065 15.5949V18.5407L29.7675 14.7287V23.5659L10.5065 27.3779V35.3488H0V0Z" :fill="fillColor" />
|
||||
<path
|
||||
d="M56.124 14.0885H51.6603V12.8153C51.6603 11.825 52.2227 11.2591 53.2068 11.2591H56.0889V6.20166H51.5197C47.5129 6.20166 45.4041 8.42978 45.4041 12.2848V14.0885H42.1705L42.2057 19.2521H45.3338V32.8683H51.8712V19.2521H56.124V14.0885Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
<path d="M69.8662 13.6433C67.611 13.6433 65.9902 14.2818 64.6512 15.8425L63.6294 13.7143H59.2249V32.8681H65.7788V23.1493C65.7788 20.7019 66.7654 19.6732 69.0557 19.6732H71.628V13.6433H69.8662Z" :fill="fillColor" />
|
||||
<path
|
||||
d="M94.2636 22.9079C94.2636 17.3697 90.0799 13.0232 84.0136 13.0232C78.0867 13.0232 73.7985 17.2996 73.7985 23.0832C73.7985 28.8668 78.1216 33.1782 84.0136 33.1782C88.7202 33.1782 92.5553 30.4792 93.8801 26.1678H87.3954C86.8027 27.2895 85.5127 27.9554 84.0136 27.9554C81.9566 27.9554 80.5969 26.8338 80.1786 24.6605H94.159C94.2287 24.0646 94.2636 23.5038 94.2636 22.9079ZM84.0136 18.1408C85.966 18.1408 87.3257 19.1573 87.8835 21.0502H80.2832C80.8061 19.1573 82.1309 18.1408 84.0136 18.1408Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
<path
|
||||
d="M109.533 13.6433L105.758 24.2429L101.701 13.6433H94.5737L102.441 31.2855C101.559 33.6686 100.819 34.3444 98.3135 34.3444H96.4789V39.9999H98.7369C103.676 39.9999 106.005 37.9013 108.58 31.9969L116.589 13.6433H109.533Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
<path
|
||||
d="M133.387 13.585L132.716 15.0598C131.163 13.7606 129.15 13.0232 126.891 13.0232C121.065 13.0232 116.899 17.2017 116.899 23.0656C116.899 28.9646 121.065 33.1782 126.891 33.1782C129.115 33.1782 131.092 32.476 132.646 31.2119L133.211 32.5462H138.295V13.585H133.387ZM127.774 27.4196C125.302 27.4196 123.501 25.5586 123.501 23.0656C123.501 20.6077 125.302 18.7818 127.774 18.7818C130.245 18.7818 132.046 20.6077 132.046 23.0656C132.046 25.5586 130.245 27.4196 127.774 27.4196Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
</TemplateHero>
|
||||
<FreyaSeparator />
|
||||
<TemplateLicense :license="license" />
|
||||
<FreyaSeparator />
|
||||
<div class="hidden">
|
||||
<TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/freya/freya-youtube-screen.png" />
|
||||
<FreyaSeparator />
|
||||
</div>
|
||||
<TemplateFeaturesAnimation :featuresData="animationFeaturesData2" title="Features" />
|
||||
<FreyaSeparator />
|
||||
<TemplateConfiguration title="Vue based on Vite" description="Freya is powered by Vite to get started in no time following the best practices." />
|
||||
<FreyaSeparator />
|
||||
<TemplateFeatures :featuresData="features2Data" displayType="vertical" />
|
||||
<FreyaSeparator />
|
||||
<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>
|
||||
Freya 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/eYBoRNff6GPTlrgYZaMStp/Preview-%7C-Freya-2022?node-id=0%3A1&t=MGAABDlOnz4QBcEk-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Freya Figma
|
||||
file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.
|
||||
</template>
|
||||
</TemplateFeaturesAnimation>
|
||||
<FreyaSeparator />
|
||||
<TemplateRelated :relatedData="relatedData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FreyaSeparator from '@/doc/templates/FreyaSeparator.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
features2Data: [
|
||||
{
|
||||
title: 'Fully Responsive',
|
||||
description: 'Freya is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-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: 'Freya 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/freya/freya-features2-ready.png'
|
||||
},
|
||||
{
|
||||
title: 'Mobile Experience',
|
||||
description: 'Touch optimized enhanced mobile experience with responsive design.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-features2-mobile.png'
|
||||
}
|
||||
],
|
||||
relatedData: [
|
||||
{
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/diamond-vue.jpg',
|
||||
href: '/templates/diamond'
|
||||
},
|
||||
{
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/freya-vue.png',
|
||||
href: '/templates/freya'
|
||||
},
|
||||
{
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/ultima-vue.jpg',
|
||||
href: '/templates/ultima'
|
||||
}
|
||||
],
|
||||
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: 'Freya 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/freya/features-animation-figma.png'
|
||||
}
|
||||
],
|
||||
animationFeaturesData2: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Light and Dark Modes',
|
||||
description: 'Impress your users with the Light and Dark modes.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/freya/features-animation-darkmode.png'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Component Themes',
|
||||
description: 'Freya offers 16 built-in component themes with dark and light options. Also if you wanna create your own theme you can do it by just defining couple SASS variables.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/freya/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/freya/features-animation-orientations.png',
|
||||
type: 'inline-animation',
|
||||
inlineFeaturesData: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Static',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Static.png'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Slim',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Slim.png'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Reveal',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Reveal.png'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Horizontal',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Horizontal.png'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Overlay',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Overlay.png'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Slim+',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Slim+.png'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Drawer',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/freya/Drawer.png'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
license: {
|
||||
documentLink: 'https://freya.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.',
|
||||
licenseDetails: [
|
||||
{
|
||||
title: 'Basic License',
|
||||
price: '$59',
|
||||
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
||||
},
|
||||
{
|
||||
title: 'Extended License',
|
||||
price: '$590',
|
||||
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
||||
}
|
||||
]
|
||||
},
|
||||
templateHeroData: {
|
||||
pattern: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-hero-pattern.png',
|
||||
dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-hero-dashboard1.png',
|
||||
dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/freya/freya-hero-dashboard2.png',
|
||||
description: 'Freya is a modern admin template for developers and IT professionals. It comes with a huge collection of reusable UI components and dozens of built-in layouts for various purposes.',
|
||||
liveHref: 'https://www.primefaces.org/freya-vue/',
|
||||
docHref: 'https://freya.primevue.org/documentation'
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
fillColor() {
|
||||
return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
|
||||
}
|
||||
},
|
||||
components: {
|
||||
FreyaSeparator
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -15,9 +15,9 @@
|
|||
<a href="https://apollo.primevue.org" 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">
|
||||
<PrimeVueNuxtLink to="/templates/apollo" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
</a>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -30,9 +30,9 @@
|
|||
<a href="https://sakai.primevue.org" 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>
|
||||
<PrimeVueNuxtLink to="/templates/sakai" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -45,9 +45,9 @@
|
|||
<a href="https://atlantis.primevue.org" 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">
|
||||
<PrimeVueNuxtLink to="/templates/atlantis" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
</a>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -60,9 +60,9 @@
|
|||
<a href="https://ultima.primevue.org" 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">
|
||||
<PrimeVueNuxtLink to="/templates/ultima" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
</a>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -75,9 +75,9 @@
|
|||
<a href="https://freya.primevue.org" 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">
|
||||
<PrimeVueNuxtLink to="/templates/freya" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
</a>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -90,9 +90,9 @@
|
|||
<a href="https://diamond.primevue.org" 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">
|
||||
<PrimeVueNuxtLink to="/templates/diamond" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
</a>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -105,9 +105,9 @@
|
|||
<a href="https://verona.primevue.org" 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">
|
||||
<PrimeVueNuxtLink to="/templates/verona" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
</a>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -120,9 +120,9 @@
|
|||
<a href="https://poseidon.primevue.org" 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">
|
||||
<PrimeVueNuxtLink to="/templates/poseidon" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
</a>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -135,9 +135,9 @@
|
|||
<a href="https://avalon.primevue.org" 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">
|
||||
<PrimeVueNuxtLink to="/templates/avalon" class="flex-1 p-button p-component p-button-outlined">
|
||||
<span class="p-button-label white-space-nowrap">Learn More</span>
|
||||
</a>
|
||||
</PrimeVueNuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,233 @@
|
|||
<template>
|
||||
<div class="ultima template">
|
||||
<TemplateHero :templateHeroData="templateHeroData">
|
||||
<template #logo>
|
||||
<svg width="209" height="40" viewBox="0 0 209 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clipPath="url(#clip0_957_53077)">
|
||||
<path
|
||||
d="M95.6837 6.5625V25.9765C95.6707 27.8906 95.2474 29.5573 94.4141 30.9765C93.5808 32.3959 92.4024 33.4896 90.8789 34.2578C89.3686 35.013 87.6303 35.3906 85.6641 35.3906C82.6693 35.3906 80.2669 34.5769 78.4571 32.9492C76.6602 31.3086 75.7292 29.043 75.6641 26.1524V6.5625H78.0469V25.8008C78.0469 28.1966 78.7306 30.0586 80.0977 31.3867C81.4649 32.7019 83.3203 33.3594 85.6641 33.3594C88.0078 33.3594 89.8568 32.6952 91.2111 31.3672C92.5782 30.039 93.2618 28.1901 93.2618 25.8203V6.5625H95.6837Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
<path d="M104.805 32.9688H118.848V35H102.383V6.5625H104.805V32.9688Z" :fill="fillColor" />
|
||||
<path d="M137.383 8.61328H127.636V35H125.235V8.61328H115.508V6.5625H137.383V8.61328Z" :fill="fillColor" />
|
||||
<path d="M144.923 35H142.52V6.5625H144.923V35Z" :fill="fillColor" />
|
||||
<path d="M155.84 6.5625L166.327 31.6601L176.855 6.5625H180.059V35H177.656V22.6172L177.851 9.92188L167.265 35H165.41L154.864 10.0195L155.059 22.539V35H152.656V6.5625H155.84Z" :fill="fillColor" />
|
||||
<path d="M202.969 27.0312H190.059L187.129 35H184.61L195.371 6.5625H197.656L208.418 35H205.918L202.969 27.0312ZM190.801 24.9805H202.208L196.504 9.49219L190.801 24.9805Z" :fill="fillColor" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M49.9636 10.7127C49.889 10.5341 49.7146 10.4185 49.5213 10.4185H46.8866L48.3213 8.68796C48.44 8.54566 48.4639 8.34796 48.3854 8.18083C48.3069 8.01369 48.1382 7.90671 47.9525 7.90671H19.0408L10.842 0.131475C10.683 -0.0184707 10.4417 -0.0433026 10.2578 0.0732162L5.65804 2.95276L5.6542 2.95657L5.64941 2.95849L0.216438 6.52472C0.20303 6.53333 0.196326 6.54669 0.183876 6.5572C0.157061 6.57821 0.134076 6.60114 0.113007 6.62692C0.0938536 6.64984 0.0785306 6.67276 0.0641652 6.69855C0.0488423 6.72625 0.0383076 6.75395 0.0287308 6.78355C0.0191537 6.81411 0.0134076 6.84468 0.0095769 6.87715C0.00861921 6.89339 0 6.90675 0 6.92395C0 6.93922 0.00670382 6.95069 0.00861921 6.96598C0.0114923 6.99749 0.0181961 7.0271 0.027773 7.05861C0.0373499 7.09013 0.0478845 7.11974 0.0641652 7.14935C0.070869 7.16176 0.0718267 7.17514 0.0794882 7.18755C0.0861921 7.19805 0.0986421 7.20187 0.106304 7.21142C0.139822 7.2544 0.179088 7.28974 0.225058 7.31839C0.242295 7.3289 0.255704 7.34228 0.272941 7.35086C0.336149 7.38142 0.405102 7.40149 0.479802 7.40149H7.02179L8.49854 11.0757L8.50045 11.0785V11.0814L18.108 34.0365L12.4366 39.1691C12.29 39.3019 12.2402 39.51 12.3121 39.6944C12.3829 39.8788 12.5611 40 12.7584 40H20.9236C20.9869 40 21.0491 39.9866 21.1075 39.9627C21.1659 39.9389 21.2186 39.9035 21.2626 39.8596L25.555 35.5627C25.5608 35.5694 25.5626 35.578 25.5694 35.5848L29.6338 39.851C29.7248 39.9475 29.8445 39.9743 29.9834 40C37.3624 39.9589 48.5578 39.9216 49.0845 39.9761C49.1343 39.9924 49.185 40 49.2357 40C49.3996 40 49.5595 39.9169 49.6486 39.7728C49.9254 39.3237 49.9234 39.319 35.7831 25.3254L49.8593 11.2361C49.9971 11.0967 50.0374 10.8913 49.9636 10.7127ZM46.9354 8.86084L45.6454 10.4185H21.6898L20.0474 8.86084H46.9354ZM10.4522 1.07795L20.3011 10.4185H9.26661L6.50559 3.54872L10.4522 1.07795ZM2.07722 6.44545L5.6858 4.07687L6.63775 6.44545H2.07722ZM26.2628 34.9258C26.2502 34.9124 26.233 34.9066 26.2196 34.8961L29.6501 31.4626V38.4805L26.2628 34.9258ZM48.1306 39.0163C46.3225 38.9895 41.83 38.9781 30.6077 39.0401V30.8141C30.6077 30.7262 30.5771 30.6479 30.536 30.5763L35.108 25.9996C39.6167 30.4626 45.9998 36.8149 48.1306 39.0163ZM21.0903 38.6781L9.66117 11.3736H45.7508C45.7853 11.3813 45.8197 11.3918 45.8542 11.3918C45.882 11.3918 45.9079 11.3784 45.9356 11.3736H48.3681L21.0903 38.6781Z"
|
||||
:fill="fillColor"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_957_53077">
|
||||
<rect width="208.75" height="40" :fill="fillColor" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</template>
|
||||
</TemplateHero>
|
||||
<UltimaSeparator />
|
||||
<div class="hidden">
|
||||
<TemplateYoutube imgSrc="https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-youtube-screen.png" />
|
||||
<UltimaSeparator />
|
||||
</div>
|
||||
<TemplateLicense :license="license" />
|
||||
<UltimaSeparator />
|
||||
<TemplateFeaturesAnimation :featuresData="animationFeaturesData2" title="Features" />
|
||||
<UltimaSeparator />
|
||||
<TemplateConfiguration title="Vue based on Vite" description="Apollo is powered by Vite to get started in no time following the best practices." />
|
||||
<UltimaSeparator />
|
||||
<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>
|
||||
Ultima 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/ijQrxq13lxacgkb6XHlLxA/Preview-%7C-Ultima-2022?node-id=354%3A7715&t=gjWHprUDE5RJIg78-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are excluded from the Ultima
|
||||
Figma file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.
|
||||
</template>
|
||||
</TemplateFeaturesAnimation>
|
||||
<UltimaSeparator />
|
||||
<TemplateFeatures :featuresData="features2Data" displayType="vertical" />
|
||||
<UltimaSeparator />
|
||||
<TemplateRelated :relatedData="relatedData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UltimaSeparator from '@/doc/templates/UltimaSeparator.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
templateHeroData: {
|
||||
pattern: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-hero-pattern.png',
|
||||
description: 'A highly customizable premium application template featuring 4 menu modes, 13 themes, light and dark modes. Based on material design language, it is fully responsive, touch optimized, built with SASS, CSS3 and HTML5.',
|
||||
dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-hero-dashboard1.png',
|
||||
dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-hero-dashboard2.png',
|
||||
liveHref: 'https://ultima.primevue.org',
|
||||
docHref: 'https://ultima.primevue.org/documentation'
|
||||
},
|
||||
features2Data: [
|
||||
{
|
||||
title: 'Fully Responsive',
|
||||
description: 'Ultima is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-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: 'Ultima 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: 'Everything is ready for you to start and build your app in no time. Landing, login, invoice, help, and error pages are provided as template pages.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-features2-ready.png'
|
||||
},
|
||||
{
|
||||
title: 'Mobile Experience',
|
||||
description: 'Touch optimized enhanced mobile experience with responsive design.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-features2-mobile.png'
|
||||
}
|
||||
],
|
||||
relatedData: [
|
||||
{
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/diamond-vue.jpg',
|
||||
href: '/templates/diamond'
|
||||
},
|
||||
{
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/apollo-vue.jpg',
|
||||
href: '/templates/apollo'
|
||||
},
|
||||
{
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/freya-vue.png',
|
||||
href: '/templates/freya'
|
||||
}
|
||||
],
|
||||
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: 'Ultima 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/ultima/features-animation-figma.png'
|
||||
}
|
||||
],
|
||||
animationFeaturesData2: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Light and Dark Modes',
|
||||
description: 'Ultima offers you 2 uniquely designed layout modes to choose from; Light and Dark.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/features-animation-darkmode.png'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Component Themes',
|
||||
description: 'Ultima offers 17 built-in component themes with dark and light options. Also if you wanna create your own theme you can do it by just defining couple SASS variables.',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/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/ultima/Static.png'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Slim',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Slim.png'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Reveal',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Reveal.png'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Horizontal',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Horizontal.png'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Overlay',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Overlay.png'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Slim+',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Slim+.png'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Drawer',
|
||||
src: 'https://primefaces.org/cdn/primevue/images/templates/ultima/Drawer.png'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
license: {
|
||||
documentLink: 'https://ultima.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.',
|
||||
licenseDetails: [
|
||||
{
|
||||
title: 'Basic License',
|
||||
price: '$59',
|
||||
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
||||
},
|
||||
{
|
||||
title: 'Extended License',
|
||||
price: '$590',
|
||||
included: ['Commercial Usage', 'Multiple End Products', 'Lifetime Support', 'Unlimited Updates']
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
fillColor() {
|
||||
return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
|
||||
}
|
||||
},
|
||||
components: {
|
||||
UltimaSeparator
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,230 @@
|
|||
<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.',
|
||||
licenseDetails: [
|
||||
{
|
||||
title: 'Basic License',
|
||||
price: '$49',
|
||||
included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', 'Lifetime Support', 'Unlimited Updates']
|
||||
},
|
||||
{
|
||||
title: 'Extended License',
|
||||
price: '$490',
|
||||
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>
|
||||
Loading…
Reference in New Issue