vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity
primevue-mirror/src/views/Home.vue

226 lines
12 KiB
Vue
Executable File
Raw Blame History

<template>
<div class="home">
<div class="introduction">
<span class="introduction-promo">
<img alt="Gold Sponsor" src="../assets/images/home/vue-gold.png" />
<span>Vue.js Gold Sponsor</span>
</span>
<h1>The Ultimate UI Component Library</h1>
<h2>for Vue</h2>
<router-link to="/setup" class="action-button">GET STARTED</router-link>
<img alt="devices" class="introduction-devices" src="../assets/images/home/intro-devices.png" />
</div>
<div class="features">
<h4>Features</h4>
<p class="features-tagline">Congratulations! <span role="img" aria-label="celebrate">🎉</span> Your quest to find the UI library for Vue.js is now complete.</p>
<div class="p-grid">
<div class="p-col-12 p-md-4">
<div class="feature-card">
<img alt="components" src="../assets/images/home/vue-components.png" />
<div class="feature-card-detail">
<span class="feature-name">60+ COMPONENTS</span>
<p>The ultimate set of UI Components to assist you with 60+ impressive Vue Components.</p>
</div>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="feature-card">
<img alt="opensource" src="../assets/images/home/vue-opensource.png" />
<div class="feature-card-detail">
<span class="feature-name">OPEN SOURCE</span>
<p>The complete UI Suite is free to based on the MIT license and the source code is available at GitHub.</p>
</div>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="feature-card">
<img alt="themes" src="../assets/images/home/vue-themes.png" />
<div class="feature-card-detail">
<span class="feature-name">THEMES</span>
<p>Build on a design-agnostic infrastructure, choose from a vast amount of themes such as material, bootstrap, custom or develop your own.</p>
</div>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="feature-card">
<img alt="templates" src="../assets/images/home/vue-templates.png" />
<div class="feature-card-detail">
<span class="feature-name">TEMPLATES</span>
<p>Fascinating Vue-CLI application templates designed by professional designers and crafted by Vue Experts.</p>
</div>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="feature-card">
<img alt="accesibility" src="../assets/images/home/vue-accesibility.png" />
<div class="feature-card-detail">
<span class="feature-name">ACCESSIBILITY</span>
<p>UI Components for everyone with full support for Web Content Accessibility Guidelines (WCAG).</p>
</div>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="feature-card">
<img alt="pro" src="../assets/images/home/vue-pro.png" />
<div class="feature-card-detail">
<span class="feature-name">PRO SUPPORT</span>
<p>Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
</div>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="feature-card">
<img alt="productivity" src="../assets/images/home/vue-productivity.png" />
<div class="feature-card-detail">
<span class="feature-name">PRODUCTIVITY</span>
<p>Boost your productivity by achieving more in less time and accomplish amazing results.</p>
</div>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="feature-card">
<img alt="community" src="../assets/images/home/vue-community.png" />
<div class="feature-card-detail">
<span class="feature-name">COMMUNITY</span>
<p>Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
</div>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="feature-card">
<img alt="mobile" src="../assets/images/home/vue-mobile.png" />
<div class="feature-card-detail">
<span class="feature-name">MOBILE</span>
<p>First class support for responsive design led by touch optimized elements.</p>
</div>
</div>
</div>
</div>
</div>
<div class="whouses">
<h4>Key Users</h4>
<p>The creator of PrimeVue is PrimeTek Informatics, the distinguished component library vendor who built popular open source projects such as PrimeFaces, PrimeNG and PrimeReact over the past years.</p>
<div class="p-grid">
<div class="p-col-6 p-md-2"><img alt="airbus" src="../assets/images/home/airbus.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="amex" src="../assets/images/home/amex.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="bmw" src="../assets/images/home/nvidia.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="ebay" src="../assets/images/home/ebay.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="ford" src="../assets/images/home/ford.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="fox" src="../assets/images/home/fox.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="lufthansa" src="../assets/images/home/lufthansa.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="mercedes" src="../assets/images/home/mercedes.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="sap" src="../assets/images/home/sap.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="unicredit" src="../assets/images/home/unicredit.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="verizon" src="../assets/images/home/verizon.svg"/></div>
<div class="p-col-6 p-md-2"><img alt="viacom" src="../assets/images/home/viacom.svg"/></div>
</div>
</div>
<div class="templates">
<h4>Premium Application Templates</h4>
<p>Gorgeous Vue-CLI application templates designed by professional designers and implemented by Vue Experts to help you reach your goals in no time.</p>
<div class="p-grid">
<div class="p-col-12 p-md-3">
<a href="https://www.primefaces.org/layouts/sapphire-vue">
<img alt="Sapphire" src="../assets/images/layouts/sapphire-vue.jpg">
</a>
</div>
<div class="p-col-12 p-md-3">
<a href="https://www.primefaces.org/layouts/serenity-vue">
<img alt="Serenity" src="../assets/images/layouts/serenity-vue.jpg">
</a>
</div>
<div class="p-col-12 p-md-3">
<a href="https://www.primefaces.org/layouts/avalon-vue">
<img alt="Avalon" src="../assets/images/layouts/avalon-vue.jpg">
</a>
</div>
<div class="p-col-12 p-md-3">
<a href="https://www.primefaces.org/layouts/babylon-vue">
<img alt="Babylon" src="../assets/images/layouts/babylon-vue.jpg">
</a>
</div>
<div class="p-col-12 p-md-3">
<a href="https://www.primefaces.org/layouts/apollo-vue">
<img alt="Apollo" src="../assets/images/layouts/apollo-vue.jpg">
</a>
</div>
<div class="p-col-12 p-md-3">
<a href="https://www.primefaces.org/layouts/roma-vue">
<img alt="Roma" src="../assets/images/layouts/roma-vue.jpg">
</a>
</div>
<div class="p-col-12 p-md-3">
<a href="https://www.primefaces.org/layouts/ultima-vue">
<img alt="Ultima" src="../assets/images/layouts/ultima-vue.jpg">
</a>
</div>
<div class="p-col-12 p-md-3">
<a href="https://www.primefaces.org/layouts/prestige-vue">
<img alt="Prestige" src="../assets/images/layouts/prestige-vue.jpg">
</a>
</div>
<div class="p-col-12 p-md-3"></div>
</div>
</div>
<div class="templates">
<h4>Free Application Template for PrimeVue</h4>
<p>Sigma is a free and open source admin template based on <a href="https://cli.vuejs.org">Vue-CLI</a>.</p>
<div class="p-grid">
<div class="p-col-12">
<a href="https://www.primefaces.org/sigma-vue">
<img alt="Sigma" src="../assets/images/layouts/sigma.jpg" />
</a>
</div>
</div>
</div>
<div class="primevue-designer">
<h4>PrimeVue Designer API</h4>
<div class="p-grid">
<div class="p-col-12">
<img alt="PrimeVue Designer" src="../assets/images/primevue-designer.jpg" />
<p>PrimeVue is a design-agnostic library and the theming system is based on the Theme Designer, the official tool to create themes for the components. Designer includes a SASS enabled infrastructure that has over 500 customizable variables, a live editor
and a Vue-CLI application to test your themes with ease along with built-in theme samples that are embedded in PrimeVue Core.</p>
<p>Visit <a href="https://www.primefaces.org/designer/primevue">Designer API HomePage</a> to learn more about the features and interact with the live editor.</p>
</div>
</div>
</div>
<div class="prosupport">
<div class="p-grid">
<div class="p-col-12 p-md-6">
<h4>PrimeVue PRO Support</h4>
<p>No time to wait for a response at forum or issue tracker? Then PrimeVue PRO Support is definitely for you.</p>
<p>PrimeVUE PRO is an exceptional support service where you'll contact the PrimeTek via a private channel and receive assistance just in a couple of hours. Optionally PrimeVue PRO offers the ability to request changes and new features for the component library.</p>
<a class="action-button" href="mailto:contact@primetek.com.tr">
Get a Quote
</a>
</div>
<div class="p-col-12 p-md-6">
<img alt="PRO" src="../assets/images/home/icon-pro.svg" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
let afId = this.$route.query['af_id'];
if (afId) {
let today = new Date();
let expire = new Date();
expire.setTime(today.getTime() + 3600000*24*7);
document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org';
}
}
}
</script>
View Git Blame Copy Permalink