<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>
