203 lines
11 KiB
Vue
203 lines
11 KiB
Vue
<template>
|
||
<div class="home">
|
||
<div class="introduction">
|
||
<h1>The Most Complete UI Framework</h1>
|
||
<h2>for VUE</h2>
|
||
|
||
<router-link to="/setup" class="home-button">Get Started</router-link>
|
||
</div>
|
||
|
||
<div class="features">
|
||
<h3>Why PrimeVue?</h3>
|
||
<p class="features-tagline">Congratulations! <span role="img" aria-label="celebrate">🎉</span> Your quest to find the UI library for Vue.js is complete.</p>
|
||
|
||
<p class="features-description">PrimeVue is a collection of rich UI components for Vue. All widgets are open source and free to use under MIT License. PrimeVue is developed by PrimeTek Informatics,
|
||
a vendor with years of expertise in developing open source UI solutions. For project news and updates, please <a href="https://twitter.com/primevue">follow us on twitter</a> and <a href="https://www.primefaces.org/category/primevue/">visit our blog</a>.</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">50+ COMPONENTS</span>
|
||
<p>The most complete set of native widgets featuring 50+ easy to use components for all your UI requirements.</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>Hosted at <a href="https://github.com/primefaces/primevue">GitHub</a>, all widgets are open source and free to use under MIT license. Feel the power of open source.</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>Don’t get tied up in just one look&feel. Choose from a variety of options including material and bootstrap design.</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>Professionally designed highly customizable Vue application templates to get started in no time.</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>Fully accessible and in compliance with Section 508 standards.</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>With the exclusive services of Pro account, you no longer need to post your questions in the community forum and your issues to community issue tracker.</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>Allocate your valuable time on business logic rather than dealing with the complex user interface requirements.</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>Join PrimeVue community to become a part of an active, vibrant and growing open source foundation.</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>Enhanced mobile user experience with touch optimized responsive design elements.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="whouses">
|
||
<h3>Key Users</h3>
|
||
<p>Open source products of <a href="https://www.primetek.com.tr">PrimeTek</a> are used all around the world by 1M+ developers in Fortune 500 companies, corporations, government and educational
|
||
institutions.</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/bmw.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">
|
||
|
||
<h3>Premium Application Templates</h3>
|
||
<p>Powered by <a href="https://cli.vuejs.org">Vue-CLI</a>, create awesome applications in no time using the premium templates of PrimeVue and impress your users.</p>
|
||
|
||
<div class="p-grid">
|
||
<div class="p-col-12 p-md-6">
|
||
<a href="https://www.primefaces.org/layouts/sapphire-vue">
|
||
<img alt="Sapphire" src="../assets/images/layouts/sapphire.jpg">
|
||
</a>
|
||
</div>
|
||
<div class="p-col-12 p-md-6">
|
||
<a href="https://www.primefaces.org/layouts/serenity-vue">
|
||
<img alt="Serenity" src="../assets/images/layouts/serenity.jpg">
|
||
</a>
|
||
</div>
|
||
<div class="p-col-12 p-md-6">
|
||
<a href="https://www.primefaces.org/layouts/avalon-vue">
|
||
<img alt="Avalon" src="../assets/images/layouts/avalon.jpg">
|
||
</a>
|
||
</div>
|
||
<div class="p-col-12 p-md-6">
|
||
<a href="https://www.primefaces.org/layouts/babylon-vue">
|
||
<img alt="Babylon" src="../assets/images/layouts/babylon.jpg">
|
||
</a>
|
||
</div>
|
||
<div class="p-col-12 p-md-6">
|
||
<a href="https://www.primefaces.org/layouts/apollo-vue">
|
||
<img alt="Apollo" src="../assets/images/layouts/apollo.jpg">
|
||
</a>
|
||
</div>
|
||
<div class="p-col-12 p-md-6">
|
||
<a href="https://www.primefaces.org/layouts/roma-vue">
|
||
<img alt="Roma" src="../assets/images/layouts/roma.jpg">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="templates">
|
||
<h3>Free Application Template for PrimeVue</h3>
|
||
<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="prosupport">
|
||
<div class="p-grid">
|
||
<div class="p-col-12 p-md-6">
|
||
<h3>PrimeVue PRO Support</h3>
|
||
<p>With PrimeVue PRO, it is easy to support, tune and add features to PrimeVue as if it were an in-house framework.</p>
|
||
<p>PrimeVue PRO is a term based commercial support service. With the exclusive services of Pro account, you no longer need to post your questions in the community forum and your issues to community issue tracker.</p>
|
||
<a class="home-button2" 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>
|