Migration of templates to TW
Cagatay Civici
parent
6d74929580
commit
5be4eb2d91
|
|
@ -0,0 +1,45 @@
|
||||||
|
// TEMPLATE FEATURES ANIMATION
|
||||||
|
.template-features-animation-card {
|
||||||
|
&:hover &-order {
|
||||||
|
div {
|
||||||
|
&:nth-child(3) {
|
||||||
|
animation: p-features-order-animation 2.5s ease-in-out;
|
||||||
|
color: var(--p-primary-400);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-active &-order {
|
||||||
|
div {
|
||||||
|
&:nth-child(3) {
|
||||||
|
animation: p-features-order-animation 2.5s ease-in-out;
|
||||||
|
color: var(--p-primary-400);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes p-features-order-animation {
|
||||||
|
0% {
|
||||||
|
clip-path: polygon(0% 100%, 15% 100%, 32% 100%, 54% 100%, 70% 100%, 84% 100%, 100% 100%,
|
||||||
|
100% 100%, 0% 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%,
|
||||||
|
100% 100%, 0% 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
clip-path: polygon(0 51%, 14% 31%, 33% 42%, 49% 53%, 68% 55%, 85% 50%, 100% 60%, 100% 100%, 0 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
clip-path: polygon(0 0, 18% 0, 39% 0, 53% 0, 62% 0, 87% 0, 100% 0, 100% 100%, 0 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -14,5 +14,5 @@
|
||||||
@import './_docsearch';
|
@import './_docsearch';
|
||||||
@import './_responsive';
|
@import './_responsive';
|
||||||
@import './_animation';
|
@import './_animation';
|
||||||
|
@import './_templates';
|
||||||
@import './landing/_landing';
|
@import './landing/_landing';
|
||||||
@import './templates/_templates';
|
|
||||||
|
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
.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
|
|
@ -1,39 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,22 +1,20 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="template-configuration-wrapper">
|
<div class="px-6 py-6 sm:px-10 sm:py-5 lg:py-20 lg:px-8 rounded-3xl bg-surface-0 dark:bg-surface-900">
|
||||||
<div class="template-configuration">
|
<div class="p-6 md:p-8 rounded-2xl lg:rounded-3xl border border-surface max-w-3xl w-full mx-auto">
|
||||||
<div class="template-configuration-screen">
|
<div class="rounded-lg lg:rounded-xl border border-surface overflow-hidden">
|
||||||
<div class="template-configuration-screen-top">
|
<div class="py-1 px-6 h-14 flex items-center gap-2">
|
||||||
<div class="template-configuration-screen-top-close template-configuration-screen-top-circle" />
|
<div v-for="(c, i) of ['#ED6B5D', '#F4BE50', '#61C554']" :key="i" class="w-3 h-3 rounded-full" :style="{ background: c }" />
|
||||||
<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>
|
||||||
<div class="template-configuration-screen-bottom">
|
<div class="p-6 bg-surface-900 dark:bg-surface-800 flex flex-col gap-4 relative">
|
||||||
<p>> npm install <span class="text-gray-500">or yarn</span></p>
|
<p class="m-0 text-surface-0 text-xs sm:text-sm">> 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>
|
<p class="m-0 text-surface-0 text-xs sm:text-sm">> npm run dev <span class="text-gray-500">or yarn dev</span></p>
|
||||||
<br />
|
<br />
|
||||||
<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" />
|
<img class="w-28 lg:w-32 h-28 lg:h-32 absolute right-6 bottom-4" src="https://primefaces.org/cdn/primevue/images/templates/vue-3d-logo.png" alt="Vue 3D Logo" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="template-configuration-title">{{ title }}</h3>
|
<h3 class="text-lg lg:text-2xl text-surface-900 dark:text-surface-0 font-bold">{{ title }}</h3>
|
||||||
<p class="template-configuration-description">{{ description }}</p>
|
<p class="text-sm lg:text-base text-surface-600 dark:text-surface-400 mt-3 mb-0">{{ description }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,38 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="template-features">
|
<!-- (0 ?featuresData.slice(i===0?(0, Math.ceil(featuresData.length / 2)):(featuresData.length / 2)):featuresData.slice(i===0?(0, Math.ceil(featuresData.length / 2)):(featuresData.length / 2))) -->
|
||||||
<div v-if="displayType === 'vertical'" class="template-features-vertical-wrapper">
|
<div>
|
||||||
<div class="template-features-vertical">
|
<div v-if="displayType === 'vertical'" class="px-6 py-6 sm:px-10 sm:py-10 lg:py-20 rounded-3xl bg-surface-0 dark:bg-surface-900">
|
||||||
<div class="template-features-vertical-col">
|
<div class="mx-auto max-w-3xl flex sm:flex-row flex-col items-start gap-6">
|
||||||
<template v-for="(data, j) of featuresData.slice(0, Math.ceil(featuresData.length / 2))" :key="j">
|
<div
|
||||||
<div class="template-features-vertical-card">
|
v-for="(_, i) of Array(2).fill(null)"
|
||||||
<div class="template-features-vertical-card-image">
|
:key="i"
|
||||||
<img :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
|
class="flex flex-col gap-6 flex-1"
|
||||||
|
:class="{
|
||||||
|
'sm:pt-32': i === 1
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<template v-for="(data, j) of i === 0 ? featuresData.slice(0, Math.ceil(featuresData.length / 2)) : featuresData.slice(featuresData.length / 2)" :key="j">
|
||||||
|
<div class="w-full p-4 md:p-5 rounded-2xl border border-surface">
|
||||||
|
<div class="w-full bg-surface-100 dark:bg-surface-800 rounded-lg overflow-hidden flex">
|
||||||
|
<img class="w-full h-auto rounded-lg" :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
|
||||||
</div>
|
</div>
|
||||||
<h2>{{ data.title }}</h2>
|
<h2 class="mt-5 mb-0 text-lg text-surface-900 dark:text-surface-0 font-semibold">{{ data.title }}</h2>
|
||||||
<p>{{ data.description }}</p>
|
<p class="mt-2 mb-0 text-muted-color text-sm">{{ 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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="template-features-horizontal-wrapper">
|
<div v-else class="px-6 py-6 sm:px-10 sm:py-10 lg:py-20 rounded-3xl bg-surface-0 dark:bg-surface-900">
|
||||||
<div class="template-features-horizontal">
|
<div class="flex flex-wrap justify-center gap-6 mx-auto w-full max-w-5xl">
|
||||||
<template v-for="(data, index) in featuresData" :key="index">
|
<template v-for="(data, index) in featuresData" :key="index">
|
||||||
<div class="template-features-horizontal-card">
|
<div class="p-5 rounded-2xl border border-surface flex-1 min-w-80 max-w-96">
|
||||||
<div class="template-features-horizontal-card-top">
|
<div class="flex w-full mb-5 bg-surface-100 dark:bg-surface-800 overflow-hidden rounded-lg">
|
||||||
<img :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
|
<img class="w-full" :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
|
||||||
</div>
|
</div>
|
||||||
<div class="template-features-horizontal-card-bottom">
|
<div>
|
||||||
<h5 class="template-features-horizontal-card-bottom-title">{{ data.title }}</h5>
|
<h5 class="text-surface-900 dark:text-surface-0 font-semibold mb-2 text-lg">{{ data.title }}</h5>
|
||||||
<p class="template-features-horizontal-card-bottom-description">{{ data.description }}</p>
|
<p class="m-0 text-muted-color text-sm">{{ data.description }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,30 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="template-features-animation-wrapper">
|
<div class="px-6 py-6 sm:px-10 sm:py-5 lg:py-20 lg:px-8 rounded-2xl lg:rounded-3xl bg-surface-0 dark:bg-surface-900">
|
||||||
<div v-if="title" class="template-features-animation-title">
|
<h2 v-if="title" class="text-center text-surface-900 dark:text-surface-0 text-3xl lg:text-5xl font-semibold lg:pt-0 pt-6 mb-12">{{ title }}</h2>
|
||||||
<h2>{{ title }}</h2>
|
<div ref="animationRef" class="flex flex-col-reverse lg:flex-row items-start gap-10 w-full max-w-2xl lg:max-w-6xl mx-auto p-4 lg:p-7 rounded-3xl border border-surface">
|
||||||
</div>
|
<div class="flex flex-col gap-4 flex-1">
|
||||||
<div ref="animationRef" class="template-features-animation">
|
|
||||||
<div class="template-features-animation-left">
|
|
||||||
<template v-for="(data, index) in featuresData" :key="index">
|
<template v-for="(data, index) in featuresData" :key="index">
|
||||||
<div
|
<div
|
||||||
@click="handleClick(data.id)"
|
@click="handleClick(data.id)"
|
||||||
@mouseenter="enterCardArea(data.id)"
|
@mouseenter="enterCardArea(data.id)"
|
||||||
@mouseleave="leaveCardArea(data.id)"
|
@mouseleave="leaveCardArea(data.id)"
|
||||||
:class="`template-features-animation-left-card ${selectedID === data.id ? 'template-features-animation-left-card-active' : ''}`"
|
:class="`template-features-animation-card group template-features-animation-left-card p-4 flex items-start gap-2 md:gap-4 xl:gap-6 cursor-pointer rounded-xl transition-all hover:bg-primary-50 dark:hover:bg-primary/15 ${
|
||||||
|
selectedID === data.id ? 'template-features-animation-card-active rounded-xl bg-primary-50 dark:bg-primary/15 transition-all' : ''
|
||||||
|
}`"
|
||||||
>
|
>
|
||||||
<div class="template-features-animation-left-card-order">
|
<div class="template-features-animation-card-order w-14 h-full -mt-1 relative transition-all">
|
||||||
<div>{{ orderNumber(index) }}</div>
|
<div class="text-[2.5rem] font-bold absolute top-0 left-0 text-primary-400 [-webkit-text-stroke:1.2px_var(--p-primary-400)]">{{ orderNumber(index) }}</div>
|
||||||
<div>{{ orderNumber(index) }}</div>
|
<div
|
||||||
<div>{{ orderNumber(index) }}</div>
|
class="text-[2.5rem] font-bold absolute top-0 left-0 transition-all dark:text-surface-900 group-hover:text-surface-50 dark:group-hover:text-surface-900"
|
||||||
|
:class="selectedID === data.id ? 'text-surface-50' : 'text-surface-0'"
|
||||||
|
>
|
||||||
|
{{ orderNumber(index) }}
|
||||||
</div>
|
</div>
|
||||||
<div class="template-features-animation-left-card-content">
|
<div class="text-[2.5rem] font-bold absolute top-0 left-0 text-transparent">{{ orderNumber(index) }}</div>
|
||||||
<h5>{{ data.title }}</h5>
|
</div>
|
||||||
<p>
|
<div class="flex-1">
|
||||||
|
<h5 class="text-lg lg:text-xl font-semibold m-0">{{ data.title }}</h5>
|
||||||
|
<p class="text-sm lg:text-base text-muted-color mt-1 mb-0 [&>a]:text-primary [&>a]:hover:underline">
|
||||||
<template v-if="data.slotType">
|
<template v-if="data.slotType">
|
||||||
<slot :name="data.slotType" />
|
<slot :name="data.slotType" />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -31,7 +36,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="template-features-animation-right">
|
<div class="flex-1 w-full lg:w-fit rounded-2xl bg-surface-100 dark:bg-surface-800 overflow-hidden flex sm:min-w-[30rem]">
|
||||||
<TemplateFeaturesAnimationInline
|
<TemplateFeaturesAnimationInline
|
||||||
v-if="featuresData[selectedID - 1]?.type === 'inline-animation'"
|
v-if="featuresData[selectedID - 1]?.type === 'inline-animation'"
|
||||||
:inlineFeaturesData="featuresData[selectedID - 1]?.inlineFeaturesData"
|
:inlineFeaturesData="featuresData[selectedID - 1]?.inlineFeaturesData"
|
||||||
|
|
@ -40,7 +45,7 @@
|
||||||
:parentID="selectedID"
|
:parentID="selectedID"
|
||||||
:inlineSeconds="animationSeconds / featuresData[selectedID - 1]?.inlineFeaturesData.length"
|
:inlineSeconds="animationSeconds / featuresData[selectedID - 1]?.inlineFeaturesData.length"
|
||||||
/>
|
/>
|
||||||
<img v-else :src="featuresData[selectedID - 1]?.src" alt="Animation Feature Image" />
|
<img v-else class="w-full h-auto object-cover flex" :src="featuresData[selectedID - 1]?.src" alt="Animation Feature Image" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,21 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="animationInlineRef" class="template-features-animation-right-inline">
|
<div ref="animationInlineRef" class="w-full py-8 rounded-xl bg-surface-50 dark:bg-surface-800 relative flex flex-col items-center justify-center">
|
||||||
<div class="template-features-animation-right-inline-tabs">
|
<div class="hidden sm:flex items-center gap-0.5 xl:gap-1 rounded-full border border-surface p-1 w-[90%] bg-surface-0 dark:bg-surface-900">
|
||||||
<template v-for="(data, index) in inlineFeaturesData" :key="index">
|
<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'}`">
|
<button
|
||||||
|
@click="handleBtnClick(data.id)"
|
||||||
|
@mouseenter="enterCardArea(data.id)"
|
||||||
|
@mouseleave="leaveCardArea"
|
||||||
|
:class="`flex-1 py-1 px-1 lg:px-2 rounded-full text-surface-900 dark:text-surface-0 border-none outline-none text-xs font-medium transition-all hover:bg-surface-200 dark:hover:bg-surface-700 cursor-pointer ${
|
||||||
|
data.id === selectedID ? 'bg-surface-200 dark:bg-surface-700' : 'bg-transparent'
|
||||||
|
}`"
|
||||||
|
>
|
||||||
{{ data.title }}
|
{{ data.title }}
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="template-features-animation-right-inline-image">
|
<div class="w-[90%] h-fit overflow-hidden relative flex mt-5 rounded-lg shadow-[0px_0px_48px_0px_rgba(0,0,0,0.08)]">
|
||||||
<img :src="inlineFeaturesData[selectedID - 1].src" alt="Animation Inline Feature Image" />
|
<img class="max-h-96 w-full h-auto object-cover object-top flex" :src="inlineFeaturesData[selectedID - 1].src" alt="Animation Inline Feature Image" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,49 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="template-hero">
|
<div class="w-full h-[56rem] md:h-[32rem] xl:h-[36.25rem] bg-primary rounded-3xl overflow-hidden relative">
|
||||||
<img v-if="!!templateHeroData.pattern" class="template-hero-pattern" :src="templateHeroData.pattern" alt="Template Hero Pattern" />
|
<slot name="pattern" />
|
||||||
<TemplateHeroLight v-if="!!templateHeroData.light" />
|
<div class="absolute left-1/2 top-20 -translate-x-1/2 md:translate-x-0 md:top-1/2 md:-translate-y-1/2 md:left-10 lg:left-20 xl:left-36 z-20 w-[92%] max-w-lg md:w-[26rem] lg:w-[28rem] xl:w-[29rem] rounded-3xl p-7 lg:px-9 lg:py-7">
|
||||||
<TemplateHeroRectangle v-if="!!templateHeroData.rectangle" />
|
<div
|
||||||
<div class="template-hero-card">
|
class="absolute top-0 left-0 w-full h-full backdrop-blur-[2px] rounded-3xl border border-[rgba(255,255,255,0.24)] [background:linear-gradient(180deg,rgba(170,140,255,0.00)_0%,var(--p-primary-400)/0.8_100%),rgba(255,255,255,0.10)] shadow-[0px_2px_4px_0px_rgba(255,255,255,0.24)_inset,0px_48px_80px_0px_rgba(0,0,0,0.08),0px_-5px_13px_-2px_rgba(255,255,255,0.55)_inset]"
|
||||||
<div class="template-hero-card-logo">
|
/>
|
||||||
|
<div class="z-10 relative">
|
||||||
|
<div class="h-8 lg:h-10 [&>svg]:h-full [&>svg]:w-auto select-none">
|
||||||
<slot name="logo" />
|
<slot name="logo" />
|
||||||
</div>
|
</div>
|
||||||
<p>{{ templateHeroData.description }}</p>
|
<p class="text-primary-contrast mt-4 mb-0 lg:text-base text-sm">{{ templateHeroData.description }}</p>
|
||||||
<div class="template-hero-card-buttons">
|
<div class="flex items-center gap-4 mt-8">
|
||||||
<a :href="templateHeroData.liveHref" target="_blank" class="template-hero-card-buttons-btn1"> Live Demo </a>
|
<a :href="templateHeroData.liveHref" target="_blank" class="flex-1 py-3.5 bg-surface-900 border-surface-900 hover:bg-surface-700 text-surface-0 rounded-full text-center font-semibold transition-all leading-none">Live Demo</a>
|
||||||
<a :href="templateHeroData.storeHref ?? 'https://www.primefaces.org/store/'" target="_blank" class="template-hero-card-buttons-btn2">
|
<a
|
||||||
|
:href="templateHeroData.storeHref ?? 'https://www.primefaces.org/store/'"
|
||||||
|
target="_blank"
|
||||||
|
class="flex-1 rounded-full text-center font-semibold w-full bg-primary-600 border-primary-600 hover:bg-primary-700 text-surface-0 py-3.5 transition-all leading-none"
|
||||||
|
>
|
||||||
{{ templateHeroData.free ? 'Source Code' : 'Buy Now' }}
|
{{ templateHeroData.free ? 'Source Code' : 'Buy Now' }}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="template-hero-card-links">
|
<div class="flex items-center gap-4 mt-6">
|
||||||
<a :href="templateHeroData.supportHref ?? 'https://github.com/orgs/primefaces/discussions/categories/primevue-templates'" target="_blank">
|
<a class="flex items-center gap-2 text-primary-contrast lg:text-base text-sm" :href="templateHeroData.supportHref ?? 'https://github.com/orgs/primefaces/discussions/categories/primevue-templates'" target="_blank">
|
||||||
<i class="pi pi-github" />
|
<i class="pi pi-github" />
|
||||||
<span>{{ templateHeroData.free ? 'Open Issues' : 'Get Support' }}</span>
|
<span class="hover:underline">{{ templateHeroData.free ? 'Open Issues' : 'Get Support' }}</span>
|
||||||
</a>
|
</a>
|
||||||
<a :href="templateHeroData.docHref" target="_blank">
|
<a class="flex items-center gap-2 text-primary-contrast lg:text-base text-sm" :href="templateHeroData.docHref" target="_blank">
|
||||||
<i class="pi pi-book" />
|
<i class="pi pi-book" />
|
||||||
<span>Read Doc</span>
|
<span class="hover:underline">Read Doc</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img v-if="!!templateHeroData.dashboard1" class="template-hero-dashboard1" :src="templateHeroData.dashboard1" alt="Template Dashboard Image 1" />
|
</div>
|
||||||
<img v-if="!!templateHeroData.dashboard2" class="template-hero-dashboard2" :src="templateHeroData.dashboard2" alt="Template Dashboard Image 2" />
|
<img
|
||||||
|
v-if="!!templateHeroData.dashboard1"
|
||||||
|
class="select-none flex z-20 absolute top-[28rem] left-52 md:top-8 md:left-[42rem] lg:left-[50rem] xl:left-[60rem] w-[37.875rem] shadow-[0px_0px_43.64997px_0px_rgba(0,0,0,0.12)] rounded-sm"
|
||||||
|
:src="templateHeroData.dashboard1"
|
||||||
|
alt="Template Dashboard Image 1"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
v-if="!!templateHeroData.dashboard2"
|
||||||
|
class="select-none flex z-10 absolute top-[28rem] left-6 md:top-8 md:left-[32rem] lg:left-[36rem] xl:left-[42rem] w-[37.875rem] shadow-[0px_0px_43.64997px_0px_rgba(0,0,0,0.12)] rounded-sm"
|
||||||
|
:src="templateHeroData.dashboard2"
|
||||||
|
alt="Template Dashboard Image 2"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,29 +1,29 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="template-license-wrapper">
|
<div class="px-6 py-6 sm:px-10 sm:py-10 lg:py-20 lg:px-8 rounded-3xl bg-surface-0 dark:bg-surface-900">
|
||||||
<div class="template-license">
|
<div class="template-license max-w-3xl mx-auto">
|
||||||
<div class="template-license-cards">
|
<div class="flex flex-wrap items-start justify-center gap-6">
|
||||||
<template v-for="(detail, index) in license.licenseDetails" :key="index">
|
<template v-for="(detail, index) in license.licenseDetails" :key="index">
|
||||||
<div class="template-license-card">
|
<div class="flex-1 border border-surface rounded-xl lg:rounded-2xl p-6 min-w-80">
|
||||||
<span class="template-license-card-title">{{ detail.title }}</span>
|
<span class="text-surface-600 dark:text-surface-400 font-semibold">{{ detail.title }}</span>
|
||||||
<div class="template-license-card-pricing">
|
<div class="text-surface-900 dark:text-surface-0 text-4xl font-semibold mt-4 mb-5">
|
||||||
<span :class="{ 'template-license-card-pricing-discount-active': license.showDiscount }">{{ detail.price }}</span>
|
<span :class="{ 'text-surface-600 dark:text-surface-400 line-through mr-4': license.showDiscount }">{{ detail.price }}</span>
|
||||||
<span v-if="license.showDiscount">{{ detail.discount }}</span>
|
<span v-if="license.showDiscount">{{ detail.discount }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="template-license-card-included">
|
<div class="flex flex-col gap-2 mb-5">
|
||||||
<template v-for="(txt, i) in detail.included" :key="`text_${i}`">
|
<template v-for="(txt, i) in detail.included" :key="`text_${i}`">
|
||||||
<p>{{ txt }}</p>
|
<p class="text-muted-color m-0">{{ txt }}</p>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<a href="https://www.primefaces.org/layouts/licenses" target="_blank">
|
<a href="https://www.primefaces.org/layouts/licenses" target="_blank">
|
||||||
<button>License Details</button>
|
<Button label="License Details" severity="contrast" class="w-full" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<p class="template-license-description">{{ license.description }}</p>
|
<p class="text-muted-color text-center mt-6 mb-0">{{ license.description }}</p>
|
||||||
<p class="template-license-visit">
|
<p class="text-muted-color text-center mt-6 mb-0">
|
||||||
Visit the
|
Visit the
|
||||||
<a :href="license.documentLink" target="_blank"> official documentation </a> for more information.
|
<a :href="license.documentLink" target="_blank" class="text-primary cursor-pointer transition-all hover:underline"> official documentation </a> for more information.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="template-related-wrapper">
|
<div class="px-6 py-6 sm:px-10 sm:py-5 lg:py-20 lg:px-8 rounded-2xl lg:rounded-3xl bg-surface-0 dark:bg-surface-900">
|
||||||
<div class="template-related">
|
<h2 class="text-center text-surface-900 dark:text-surface-0 text-3xl lg:text-5xl font-semibold lg:pt-0 pt-6">Related Layouts</h2>
|
||||||
<h2 class="template-related-title">Related Layouts</h2>
|
<div class="flex flex-wrap items-center justify-center w-fit mt-12 mx-auto gap-6 max-w-screen-lg">
|
||||||
<div class="template-related-slide">
|
|
||||||
<template v-for="(data, index) in relatedData" :key="index">
|
<template v-for="(data, index) in relatedData" :key="index">
|
||||||
<a :href="data.href" target="_blank" class="template-related-slide-card">
|
<a :href="data.href" target="_blank" class="flex-1 min-w-60 rounded-2xl border border-surface p-4 xl:p-5 flex ring-0 hover:ring-8 ring-surface-100 dark:ring-surface-800 transition-all">
|
||||||
<img :src="data.src" :alt="'Related Image ' + index" />
|
<img class="w-full h-auto rounded-lg" :src="data.src" :alt="'Related Image ' + index" />
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="template-separator">
|
<div class="flex items-center w-full gap-6">
|
||||||
<div class="template-separator-icon">
|
<Divider class="flex-1" />
|
||||||
|
<div class="w-12 h-12 overflow-hidden flex items-center justify-center border border-surface rounded-full bg-surface-0 dark:bg-surface-900">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
<Divider class="flex-1" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="apollo template">
|
<div class="flex flex-col gap-8">
|
||||||
<TemplateHero :templateHeroData="templateHeroData">
|
<TemplateHero :templateHeroData="templateHeroData">
|
||||||
<template #logo>
|
<template #logo>
|
||||||
<svg width="235" height="40" viewBox="0 0 235 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="235" height="40" viewBox="0 0 235 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
|
@ -23,6 +23,9 @@
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
<template #pattern>
|
||||||
|
<img class="select-none absolute md:bottom-0 bottom-80 left-0 z-[6] md:w-[95rem] h-auto w-[90rem] opacity-60" src="https://primefaces.org/cdn/primevue/images/templates/apollo/apollo-hero-pattern.png" alt="Template Hero Pattern" />
|
||||||
|
</template>
|
||||||
</TemplateHero>
|
</TemplateHero>
|
||||||
<ApolloSeparator />
|
<ApolloSeparator />
|
||||||
<div class="hidden">
|
<div class="hidden">
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="atlantis template">
|
<div class="flex flex-col gap-8">
|
||||||
<TemplateHero :templateHeroData="templateHeroData">
|
<TemplateHero :templateHeroData="templateHeroData">
|
||||||
<template #logo>
|
<template #logo>
|
||||||
<svg width="149" height="40" viewBox="0 0 149 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="149" height="40" viewBox="0 0 149 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
|
@ -37,6 +37,13 @@
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
<template #pattern>
|
||||||
|
<img
|
||||||
|
class="select-none absolute md:-bottom-28 bottom-36 -left-20 md:-left-28 z-[6] md:w-[50rem] h-auto w-[60rem] opacity-75"
|
||||||
|
src="https://primefaces.org/cdn/primevue/images/templates/atlantis/atlantis-hero-pattern.png"
|
||||||
|
alt="Template Hero Pattern"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
</TemplateHero>
|
</TemplateHero>
|
||||||
<AtlantisSeparator />
|
<AtlantisSeparator />
|
||||||
<TemplateLicense :license="license" />
|
<TemplateLicense :license="license" />
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="avalon template">
|
<div class="flex flex-col gap-8">
|
||||||
<TemplateHero :templateHeroData="templateHeroData">
|
<TemplateHero :templateHeroData="templateHeroData">
|
||||||
<template #logo>
|
<template #logo>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="40" viewBox="0 0 125 40" fill="none">
|
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="40" viewBox="0 0 125 40" fill="none">
|
||||||
|
|
@ -14,6 +14,13 @@
|
||||||
<path d="M105.398 0.555555H113.065L119.009 23.8333H119.12V0.555555H124.565V39.4444H118.287L110.954 11.0556H110.842V39.4444H105.398V0.555555Z" :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>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
<template #pattern>
|
||||||
|
<img
|
||||||
|
class="select-none absolute md:w-[60rem] h-auto md:bottom-0 bottom-40 -left-32 xl:-left-12 md:-left-32 z-[6] opacity-75"
|
||||||
|
src="https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-pattern.png"
|
||||||
|
alt="Template Hero Pattern"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
</TemplateHero>
|
</TemplateHero>
|
||||||
<AvalonSeparator />
|
<AvalonSeparator />
|
||||||
<TemplateLicense :license="license" />
|
<TemplateLicense :license="license" />
|
||||||
|
|
@ -225,7 +232,7 @@ export default {
|
||||||
},
|
},
|
||||||
templateHeroData: {
|
templateHeroData: {
|
||||||
pattern: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-pattern.png',
|
pattern: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-pattern.png',
|
||||||
rectangle: true,
|
rectangle: false,
|
||||||
dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-dashboard1.png',
|
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',
|
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.',
|
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.',
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="diamond template">
|
<div class="flex flex-col gap-8">
|
||||||
<TemplateHero :templateHeroData="templateHeroData">
|
<TemplateHero :templateHeroData="templateHeroData">
|
||||||
<template #logo>
|
<template #logo>
|
||||||
<svg width="190" height="40" viewBox="0 0 190 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="190" height="40" viewBox="0 0 190 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
|
@ -20,6 +20,9 @@
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
<template #pattern>
|
||||||
|
<img class="select-none absolute z-[6] w-[62rem] h-[44rem] -top-8 -left-36 md:-left-12" src="https://primefaces.org/cdn/primevue/images/templates/diamond/diamond-hero-pattern.png" alt="Template Hero Pattern" />
|
||||||
|
</template>
|
||||||
</TemplateHero>
|
</TemplateHero>
|
||||||
<DiamondSeparator />
|
<DiamondSeparator />
|
||||||
<TemplateLicense :license="license" />
|
<TemplateLicense :license="license" />
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="freya template">
|
<div class="flex flex-col gap-8">
|
||||||
<TemplateHero :templateHeroData="templateHeroData">
|
<TemplateHero :templateHeroData="templateHeroData">
|
||||||
<template #logo>
|
<template #logo>
|
||||||
<svg width="139" height="40" viewBox="0 0 139 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="139" height="40" viewBox="0 0 139 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
|
@ -23,6 +23,13 @@
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
<template #pattern>
|
||||||
|
<img
|
||||||
|
class="select-none absolute z-[6] w-[58rem] md:w-[50rem] h-auto top-12 md:top-32 -left-24 md:-left-12 opacity-75"
|
||||||
|
src="https://primefaces.org/cdn/primevue/images/templates/freya/freya-hero-pattern.png"
|
||||||
|
alt="Template Hero Pattern"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
</TemplateHero>
|
</TemplateHero>
|
||||||
<FreyaSeparator />
|
<FreyaSeparator />
|
||||||
<TemplateLicense :license="license" />
|
<TemplateLicense :license="license" />
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="sakai template">
|
<div class="flex flex-col gap-8">
|
||||||
<TemplateHero :templateHeroData="templateHeroData">
|
<TemplateHero :templateHeroData="templateHeroData">
|
||||||
<template #logo>
|
<template #logo>
|
||||||
<svg width="140" height="40" viewBox="0 0 140 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="140" height="40" viewBox="0 0 140 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
|
@ -28,6 +28,13 @@
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
<template #pattern>
|
||||||
|
<img
|
||||||
|
class="select-none absolute z-[6] opacity-60 w-[50rem] h-[18rem] md:w-[52rem] md:h-[20rem] lg:w-[64rem] lg:h-[28rem] bottom-[26rem] md:bottom-0 left-0"
|
||||||
|
src="https://primefaces.org/cdn/primevue/images/templates/sakai/sakai-hero-pattern.png"
|
||||||
|
alt="Template Hero Pattern"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
</TemplateHero>
|
</TemplateHero>
|
||||||
<SakaiSeparator />
|
<SakaiSeparator />
|
||||||
<TemplateFeatures :featuresData="features1Data" displayType="horizontal" />
|
<TemplateFeatures :featuresData="features1Data" displayType="horizontal" />
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="ultima template">
|
<div class="flex flex-col gap-8">
|
||||||
<TemplateHero :templateHeroData="templateHeroData">
|
<TemplateHero :templateHeroData="templateHeroData">
|
||||||
<template #logo>
|
<template #logo>
|
||||||
<svg width="209" height="40" viewBox="0 0 209 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="209" height="40" viewBox="0 0 209 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
|
@ -27,6 +27,13 @@
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
<template #pattern>
|
||||||
|
<img
|
||||||
|
class="select-none absolute z-[6] opacity-75 w-[80rem] h-auto bottom-8 -left-64 md:-bottom-[26rem] md:-left-[22rem]"
|
||||||
|
src="https://primefaces.org/cdn/primevue/images/templates/ultima/ultima-hero-pattern.png"
|
||||||
|
alt="Template Hero Pattern"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
</TemplateHero>
|
</TemplateHero>
|
||||||
<UltimaSeparator />
|
<UltimaSeparator />
|
||||||
<div class="hidden">
|
<div class="hidden">
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div className="verona template">
|
<div class="flex flex-col gap-8">
|
||||||
<TemplateHero :templateHeroData="templateHeroData">
|
<TemplateHero :templateHeroData="templateHeroData">
|
||||||
<template #logo>
|
<template #logo>
|
||||||
<svg width="142" height="40" viewBox="0 0 142 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="142" height="40" viewBox="0 0 142 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
|
@ -33,6 +33,9 @@
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
</template>
|
</template>
|
||||||
|
<template #pattern>
|
||||||
|
<img class="select-none absolute z-[6] opacity-90 w-[110rem] h-auto bottom-80 left-0 md:-bottom-8 md:-left-4" src="https://primefaces.org/cdn/primevue/images/templates/verona/verona-hero-pattern.png" alt="Template Hero Pattern" />
|
||||||
|
</template>
|
||||||
</TemplateHero>
|
</TemplateHero>
|
||||||
<VeronaSeparator />
|
<VeronaSeparator />
|
||||||
<TemplateLicense :license="license" />
|
<TemplateLicense :license="license" />
|
||||||
|
|
|
||||||
15982
pnpm-lock.yaml
15982
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue