From cb53d3cff02eb92b82d466e8997fb3455022ff43 Mon Sep 17 00:00:00 2001
From: ATAKAN TEPE <tepe_atakan@outlook.com>
Date: Fri, 7 Apr 2023 12:29:04 +0300
Subject: [PATCH] landing vertical alignment adjustments & fix fade effect on
 marquee

---
 assets/styles/layout/landing/_header.scss |  10 +-
 assets/styles/layout/landing/_main.scss   |  16 ++-
 pages/landing/FeaturesSection.vue         |  21 +--
 pages/landing/FooterSection.vue           | 158 +++++++++++-----------
 pages/landing/UsersSection.vue            |   4 +-
 5 files changed, 107 insertions(+), 102 deletions(-)

diff --git a/assets/styles/layout/landing/_header.scss b/assets/styles/layout/landing/_header.scss
index 2f5495bc3..38fb58376 100644
--- a/assets/styles/layout/landing/_header.scss
+++ b/assets/styles/layout/landing/_header.scss
@@ -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;
-    }
-}
\ No newline at end of file
diff --git a/assets/styles/layout/landing/_main.scss b/assets/styles/layout/landing/_main.scss
index 9d14412e6..b9cb49fd2 100644
--- a/assets/styles/layout/landing/_main.scss
+++ b/assets/styles/layout/landing/_main.scss
@@ -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;
diff --git a/pages/landing/FeaturesSection.vue b/pages/landing/FeaturesSection.vue
index 2b9829d63..a9189dabf 100644
--- a/pages/landing/FeaturesSection.vue
+++ b/pages/landing/FeaturesSection.vue
@@ -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>
diff --git a/pages/landing/FooterSection.vue b/pages/landing/FooterSection.vue
index ab8bc8e35..d80a901ad 100644
--- a/pages/landing/FooterSection.vue
+++ b/pages/landing/FooterSection.vue
@@ -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>
diff --git a/pages/landing/UsersSection.vue b/pages/landing/UsersSection.vue
index 45b787012..dceb13368 100644
--- a/pages/landing/UsersSection.vue
+++ b/pages/landing/UsersSection.vue
@@ -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>