landing vertical alignment adjustments & fix fade effect on marquee

pull/3853/head
ATAKAN TEPE 2023-04-07 12:29:04 +03:00
parent e1c479963b
commit cb53d3cff0
5 changed files with 107 additions and 102 deletions

View File

@ -10,6 +10,9 @@
.landing-header-container { .landing-header-container {
width: 100%; width: 100%;
max-width: 1250px !important;
margin-left: auto !important;
margin-right: auto !important;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; 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;
}
}

View File

@ -75,12 +75,10 @@
background-color: var(--surface-hover); background-color: var(--surface-hover);
} }
@media screen and (min-width: 1960px) { .landing-footer-container {
.landing-footer { max-width: 1250px !important;
width: 1650px !important; margin-left: auto !important;
margin-left: auto !important; margin-right: auto !important;
margin-right: auto !important;
}
} }
.animated-text { .animated-text {
@ -140,6 +138,12 @@
} }
.landing-users { .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 { .section-detail {
max-width: 1250px !important; max-width: 1250px !important;
margin-left: auto !important; margin-left: auto !important;

View File

@ -3,57 +3,58 @@
<div class="section-header">Features</div> <div class="section-header">Features</div>
<p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p> <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="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="features-container">
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3"> <div class="grid">
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
<div class="box p-4 w-full"> <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" /> <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> <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> <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> </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"> <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" /> <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> <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> <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> </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"> <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" /> <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> <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> <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> </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"> <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" /> <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> <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> <p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
</div> </div>
</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"> <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" /> <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> <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> <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> </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"> <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" /> <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> <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> <p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
</div> </div>
</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"> <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" /> <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> <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> <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> </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"> <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" /> <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> <div class="font-semibold mb-3 text-lg">Typescript</div>
@ -61,6 +62,8 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</section> </section>
</template> </template>

View File

@ -1,86 +1,88 @@
<template> <template>
<section class="landing-footer pt-8 px-5 lg:px-8"> <section class="landing-footer pt-8 px-5 lg:px-8">
<div class="flex flex-wrap z-1"> <div class="landing-footer-container">
<div class="w-6 lg:w-3 flex"> <div class="flex flex-wrap z-1">
<ul class="list-none p-0 m-0"> <div class="w-6 lg:w-3 flex">
<li class="font-bold mb-5">General</li> <ul class="list-none p-0 m-0">
<li class="mb-4"> <li class="font-bold mb-5">General</li>
<router-link to="/installation" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Get Started</router-link> <li class="mb-4">
</li> <router-link to="/installation" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Get Started</router-link>
</ul> </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>
<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"> <div class="flex flex-wrap justify-content-between py-6 gap-5">
<span> <span>
<img :src="'https://primefaces.org/cdn/primevue/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" /> <img :src="'https://primefaces.org/cdn/primevue/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
</span> </span>
<div class="flex align-items-center"> <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"> <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> <i class="pi pi-twitter"></i>
</a> </a>
<a href="https://github.com/primefaces/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3"> <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> <i class="pi pi-github"></i>
</a> </a>
<a href="https://discord.gg/gzKFYnpmCY" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center"> <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> <i class="pi pi-discord"></i>
</a> </a>
</div>
</div> </div>
</div> </div>
</section> </section>

View File

@ -8,7 +8,7 @@
<span class="ml-2"> </span> <span class="ml-2"> </span>
</div> </div>
<div v-for="(x, i) in users" :key="i" class="logo-section relative w-full md:w-8 mt-6 users-container"> <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 class="marquee-wrapper overflow-hidden flex">
<div v-for="i of [1, 2, 3]" :key="i" :class="`marquee${x.reverse ? ' marquee-reverse' : ''}`"> <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"> <template v-for="user of x.slicedUsers" :key="user">
@ -18,7 +18,7 @@
</template> </template>
</div> </div>
</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> </div>
</section> </section>
</template> </template>