Update flex links, add discount

pull/4016/head
Cagatay Civici 2023-06-01 14:08:18 +03:00
parent 1f03dcda6f
commit 8e9eb52639
5 changed files with 17 additions and 17 deletions

View File

@ -1,8 +1,8 @@
{ {
"id": 37, "id": 38,
"content": "Unstyled mode preview featuring Tailwind.", "content": "Summer Sale - Up to 50% Off at PrimeStore.",
"linkText": "Learn More", "linkText": "Buy Now",
"linkHref": "https://youtu.be/JpYIX3V96gs", "linkHref": "https://www.primefaces.org/store",
"backgroundStyle": "background-color:#4f8ff7", "backgroundStyle": "background-color:#4f8ff7",
"textStyle": "color:#ffffff;font-weight:500", "textStyle": "color:#ffffff;font-weight:500",
"linkStyle": "color:#ffffff;font-weight:700;text-decoration: underline;" "linkStyle": "color:#ffffff;font-weight:700;text-decoration: underline;"

View File

@ -481,7 +481,7 @@
{ {
"name": "PrimeFlex CSS", "name": "PrimeFlex CSS",
"icon": "pi pi-table", "icon": "pi pi-table",
"href": "https://www.primefaces.org/primeflex" "href": "https://primeflex.org"
}, },
{ {
"name": "Support", "name": "Support",

View File

@ -1,9 +1,9 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p> <p>
<a href="https://www.primefaces.org/primeflex/">PrimeFlex</a> is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well. PrimeVue can be used with any CSS utility library like bootstrap <a href="https://primeflex.org/">PrimeFlex</a> is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well. PrimeVue can be used with any CSS utility library like bootstrap and tailwind
and tailwind however PrimeFlex has benefits like integration with PrimeVue themes using CSS variables so that colors classes e.g. <i>bg-blue-500</i> receive the color code from the PrimeVue theme being used. PrimeVue follows the CSS however PrimeFlex has benefits like integration with PrimeVue themes using CSS variables so that colors classes e.g. <i>bg-blue-500</i> receive the color code from the PrimeVue theme being used. PrimeVue follows the CSS utility approach
utility approach of PrimeFlex and currently does not provide an extended style property like <i>sx</i>. Same approach is also utilized in <a href="https://blocks.primevue.org">PrimeBlocks for PrimeVue</a> project as well. of PrimeFlex and currently does not provide an extended style property like <i>sx</i>. Same approach is also utilized in <a href="https://blocks.primevue.org">PrimeBlocks for PrimeVue</a> project as well.
</p> </p>
<p>Here is an example to demonstrate how to align 3 buttons horizontally on bigger screens and display them as stacked on smaller ones.</p> <p>Here is an example to demonstrate how to align 3 buttons horizontally on bigger screens and display them as stacked on smaller ones.</p>

View File

@ -42,7 +42,7 @@
</div> </div>
</div> </div>
</router-link> </router-link>
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/primeflex')"> <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 align-items-center justify-content-center" @click="navigateTo('https://primeflex.org')">
<div class="flex flex-column align-items-center"> <div class="flex flex-column align-items-center">
<img src="https://primefaces.org/cdn/primevue/images/landing/css-icon.svg" alt="primevue icons" /> <img src="https://primefaces.org/cdn/primevue/images/landing/css-icon.svg" alt="primevue icons" />
<div class="name"> <div class="name">

View File

@ -127,9 +127,9 @@
<div class="text-900 font-medium text-xl mb-2">Single Designer</div> <div class="text-900 font-medium text-xl mb-2">Single Designer</div>
<div class="text-600 font-medium">For individual designers</div> <div class="text-600 font-medium">For individual designers</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" /> <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div v-if="pricing && pricing.single" class="flex flex-wrap gap-3"> <div class="flex flex-wrap gap-3">
<span v-if="pricing.single.old" :class="pricing.single.old.class ? pricing.single.old.class : ''">{{ pricing.single.old.value || '' }}</span> <span class="text-2xl text-600 line-through">$49</span>
<span v-if="pricing.single.new" :class="pricing.single.new.class ? pricing.single.new.class : ''">{{ pricing.single.new.value || '' }}</span> <span class="text-2xl font-bold text-900">$99</span>
</div> </div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" /> <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1 text-lg"> <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
@ -168,9 +168,9 @@
<div class="text-900 font-medium text-xl mb-2">Team</div> <div class="text-900 font-medium text-xl mb-2">Team</div>
<div class="text-600 font-medium">For small teams</div> <div class="text-600 font-medium">For small teams</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" /> <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div v-if="pricing && pricing.team" class="flex flex-wrap gap-3"> <div class="flex flex-wrap gap-3">
<span v-if="pricing.team.old" :class="pricing.team.old.class ? pricing.team.old.class : ''">{{ pricing.team.old.value || '' }}</span> <span class="text-2xl text-600 line-through">$249</span>
<span v-if="pricing.team.new" :class="pricing.team.new.class ? pricing.team.new.class : ''">{{ pricing.team.new.value || '' }}</span> <span class="text-2xl font-bold text-900">$149</span>
</div> </div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" /> <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1 text-lg"> <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
@ -209,8 +209,8 @@
<div class="text-900 font-medium text-xl mb-2">Enterprise</div> <div class="text-900 font-medium text-xl mb-2">Enterprise</div>
<div class="text-600 font-medium">For large teams</div> <div class="text-600 font-medium">For large teams</div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" /> <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<div v-if="pricing && pricing.enterprise" class="flex flex-wrap gap-3"> <div class="flex gap-3 flex-wrap">
<span v-if="pricing.enterprise.new" :class="pricing.enterprise.new.class ? pricing.enterprise.new.class : ''">{{ pricing.enterprise.new.value || '' }}</span> <span class="text-2xl font-bold text-900">EXCLUSIVE DEALS</span>
</div> </div>
<hr class="my-3 mx-0 border-top-1 border-none surface-border" /> <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
<ul class="list-none p-0 m-0 flex-grow-1 text-lg"> <ul class="list-none p-0 m-0 flex-grow-1 text-lg">