<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-3">
                    <img alt="component" src="../assets/images/home/icon-component.svg" />
                    <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 class="p-col-12 p-md-3">
                    <img alt="opensource" src="../assets/images/home/icon-opensource.svg" />
                    <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 class="p-col-12 p-md-3">
                    <img alt="themes" src="../assets/images/home/icon-themes.svg" />
                    <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 flat design.</p>
                </div>
                <div class="p-col-12 p-md-3">
                    <img alt="community" src="../assets/images/home/icon-community.svg" />
                    <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 class="p-col-12 p-md-3">
                    <img alt="productive" src="../assets/images/home/icon-productive.svg" />
                    <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 class="p-col-12 p-md-3">
                    <img alt="mobile" src="../assets/images/home/icon-mobile.svg" />
                    <span class="feature-name">MOBILE</span>
                    <p>Enhanced mobile user experience with  touch optimized responsive design elements.</p>
                </div>
                <div class="p-col-12 p-md-3">
                    <img alt="templates" src="../assets/images/home/icon-templates.svg" />
                    <span class="feature-name">TEMPLATES</span>
                    <p>Professionally designed highly customizable Vue application templates to get started in no time.  (Coming soon...)</p>
                </div>
                <div class="p-col-12 p-md-3">
                    <img alt="templates" src="../assets/images/home/icon-sigma.svg" />
                    <span class="feature-name">FREE ADMIN TEMPLATE</span>
                    <p>An elegant admin template powered by vue-cli.</p>
                </div>
            </div>
        </div>

        <div class="whouses">
            <h3>Key Users</h3>
            <p>Open source products of <a href="http://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">
                    <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/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/avalon-vue">
                        <img alt="Avalon" src="../assets/images/layouts/avalon.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>
