vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/styles/layout/landing/_header.scss
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;
}
}

12
assets/styles/layout/landing/_main.scss
View File

@ -75,13 +75,11 @@
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 {
position: relative; position: relative;
@ -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;

21
pages/landing/FeaturesSection.vue
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>
@ -62,5 +63,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
</template> </template>

2
pages/landing/FooterSection.vue
View File

@ -1,5 +1,6 @@
<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="landing-footer-container">
<div class="flex flex-wrap z-1"> <div class="flex flex-wrap z-1">
<div class="w-6 lg:w-3 flex"> <div class="w-6 lg:w-3 flex">
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
@ -83,6 +84,7 @@
</a> </a>
</div> </div>
</div> </div>
</div>
</section> </section>
</template> </template>

4
pages/landing/UsersSection.vue
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>