landing vertical alignment adjustments & fix fade effect on marquee
parent
e1c479963b
commit
cb53d3cff0
|
@ -10,6 +10,9 @@
|
|||
|
||||
.landing-header-container {
|
||||
width: 100%;
|
||||
max-width: 1250px !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
@ -102,10 +105,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1960px) {
|
||||
.landing-header-container{
|
||||
width: 1650px !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
}
|
|
@ -75,12 +75,10 @@
|
|||
background-color: var(--surface-hover);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1960px) {
|
||||
.landing-footer {
|
||||
width: 1650px !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
.landing-footer-container {
|
||||
max-width: 1250px !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.animated-text {
|
||||
|
@ -140,6 +138,12 @@
|
|||
}
|
||||
|
||||
.landing-users {
|
||||
.fade-right {
|
||||
background: linear-gradient(to left, var(--home-bg), transparent);
|
||||
}
|
||||
.fade-left {
|
||||
background: linear-gradient(to right, var(--home-bg), transparent);
|
||||
}
|
||||
.section-detail {
|
||||
max-width: 1250px !important;
|
||||
margin-left: auto !important;
|
||||
|
|
|
@ -3,57 +3,58 @@
|
|||
<div class="section-header">Features</div>
|
||||
<p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p>
|
||||
<div class="mt-7 px-3 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize: 'cover' }">
|
||||
<div class="features-container grid grid-nogutter">
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
|
||||
<div class="features-container">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||
<div class="box p-4 w-full">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3" />
|
||||
<div class="font-semibold mb-3 text-lg">90+ UI Components</div>
|
||||
<p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 90+ impressive Vue Components.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||
<div class="box p-4 w-full">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-community.svg" alt="components icon" class="block mb-3" />
|
||||
<div class="font-semibold mb-3 text-lg">Community</div>
|
||||
<p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||
<div class="box p-4 w-full">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3" />
|
||||
<div class="font-semibold mb-3 text-lg">Productivity</div>
|
||||
<p class="m-0 text-secondary font-medium">Boost your productivity by achieving more in less time and accomplish amazing results.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||
<div class="box p-4 w-full">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3" />
|
||||
<div class="font-semibold mb-3 text-lg">Accessibility</div>
|
||||
<p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||
<div class="box p-4 w-full">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-support.svg" alt="components icon" class="block mb-3" />
|
||||
<div class="font-semibold mb-3 text-lg">Enterprise Support</div>
|
||||
<p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||
<div class="box p-4 w-full">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-3" />
|
||||
<div class="font-semibold mb-3 text-lg">Mobile</div>
|
||||
<p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||
<div class="box p-4 w-full">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3" />
|
||||
<div class="font-semibold mb-3 text-lg">Themes</div>
|
||||
<p class="m-0 text-secondary font-medium">Built on a design-agnostic api, choose from a vast amount of themes such as material, bootstrap, custom or develop your own.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||
<div class="box p-4 w-full">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-3" />
|
||||
<div class="font-semibold mb-3 text-lg">Typescript</div>
|
||||
|
@ -61,6 +62,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
|
@ -1,86 +1,88 @@
|
|||
<template>
|
||||
<section class="landing-footer pt-8 px-5 lg:px-8">
|
||||
<div class="flex flex-wrap z-1">
|
||||
<div class="w-6 lg:w-3 flex">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mb-5">General</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/installation" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Get Started</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="landing-footer-container">
|
||||
<div class="flex flex-wrap z-1">
|
||||
<div class="w-6 lg:w-3 flex">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mb-5">General</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/installation" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Get Started</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-6 lg:w-3 flex">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mb-5">Support</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://forum.primefaces.org/viewforum.php?f=57" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Forum</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Discord</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/support" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PRO Support</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-6 lg:w-3 flex">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mt-5 lg:mt-0 mb-5">Resources</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeTV</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Store</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Source Code</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Twitter</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Newsletter</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeGear</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Contact Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-6 lg:w-3 flex">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/theming" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</router-link>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://designer.primevue.org" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/colors" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-6 lg:w-3 flex">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mb-5">Support</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://forum.primefaces.org/viewforum.php?f=57" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Forum</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Discord</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/support" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PRO Support</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-6 lg:w-3 flex">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mt-5 lg:mt-0 mb-5">Resources</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeTV</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Store</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Source Code</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Twitter</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Newsletter</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeGear</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Contact Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-6 lg:w-3 flex">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/theming" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</router-link>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://designer.primevue.org" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/colors" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="section-divider mt-8" />
|
||||
<hr class="section-divider mt-8" />
|
||||
|
||||
<div class="flex flex-wrap justify-content-between py-6 gap-5">
|
||||
<span>
|
||||
<img :src="'https://primefaces.org/cdn/primevue/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
|
||||
</span>
|
||||
<div class="flex align-items-center">
|
||||
<a href="https://twitter.com/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
|
||||
<i class="pi pi-twitter"></i>
|
||||
</a>
|
||||
<a href="https://github.com/primefaces/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
|
||||
<i class="pi pi-github"></i>
|
||||
</a>
|
||||
<a href="https://discord.gg/gzKFYnpmCY" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
|
||||
<i class="pi pi-discord"></i>
|
||||
</a>
|
||||
<div class="flex flex-wrap justify-content-between py-6 gap-5">
|
||||
<span>
|
||||
<img :src="'https://primefaces.org/cdn/primevue/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
|
||||
</span>
|
||||
<div class="flex align-items-center">
|
||||
<a href="https://twitter.com/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
|
||||
<i class="pi pi-twitter"></i>
|
||||
</a>
|
||||
<a href="https://github.com/primefaces/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
|
||||
<i class="pi pi-github"></i>
|
||||
</a>
|
||||
<a href="https://discord.gg/gzKFYnpmCY" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
|
||||
<i class="pi pi-discord"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<span class="ml-2"> </span>
|
||||
</div>
|
||||
<div v-for="(x, i) in users" :key="i" class="logo-section relative w-full md:w-8 mt-6 users-container">
|
||||
<div class="fade-left h-6rem w-6rem block absolute top-0 left-0 z-2" style="background: 'linear-gradient(to right, var(--home-bg), transparent)'"></div>
|
||||
<div class="fade-left h-6rem w-6rem block absolute top-0 left-0 z-2"></div>
|
||||
<div class="marquee-wrapper overflow-hidden flex">
|
||||
<div v-for="i of [1, 2, 3]" :key="i" :class="`marquee${x.reverse ? ' marquee-reverse' : ''}`">
|
||||
<template v-for="user of x.slicedUsers" :key="user">
|
||||
|
@ -18,7 +18,7 @@
|
|||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2" style="background: 'linear-gradient(to left, var(--home-bg), transparent)'"></div>
|
||||
<div class="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2"></div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
Loading…
Reference in New Issue