From 091847ac52f8bbed78a1edd8bd35997f04593ef4 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 12 Oct 2023 12:06:27 +0300
Subject: [PATCH] Showcase cosmetics on colors and content

---
 assets/styles/layout/_sidebar.scss        |  2 +-
 assets/styles/layout/landing/_blocks.scss |  2 +-
 assets/styles/layout/landing/_dark.scss   | 32 +++++++++---------
 assets/styles/layout/landing/_light.scss  | 40 +++++++++++------------
 layouts/AppTopBar.vue                     | 11 ++++---
 package.json                              |  2 +-
 pages/index.vue                           |  2 +-
 pages/landing/FeaturesSection.vue         |  2 +-
 pages/landing/HeroSection.vue             |  6 ++--
 pages/landing/TemplateSection.vue         | 12 +++----
 10 files changed, 56 insertions(+), 55 deletions(-)

diff --git a/assets/styles/layout/_sidebar.scss b/assets/styles/layout/_sidebar.scss
index fd7e49233..ea91fc04a 100644
--- a/assets/styles/layout/_sidebar.scss
+++ b/assets/styles/layout/_sidebar.scss
@@ -65,7 +65,7 @@
                 &:hover {
                     .menu-icon {
                         i {
-                            color: var(--surface-900);
+                            color: var(--primary-color);
                         }
                     }
 
diff --git a/assets/styles/layout/landing/_blocks.scss b/assets/styles/layout/landing/_blocks.scss
index 745e928ae..69a76d68f 100644
--- a/assets/styles/layout/landing/_blocks.scss
+++ b/assets/styles/layout/landing/_blocks.scss
@@ -216,7 +216,7 @@
 
 @keyframes block-animation {
     to {
-        transform: translateY(-10px) scale(1.02);
+        transform: translateY(-10px) translateX(10px) scale(1.02);
         box-shadow: var(--home-blocks-animation-shadow);
     }
 }
\ No newline at end of file
diff --git a/assets/styles/layout/landing/_dark.scss b/assets/styles/layout/landing/_dark.scss
index 70194e679..6f0cb6463 100644
--- a/assets/styles/layout/landing/_dark.scss
+++ b/assets/styles/layout/landing/_dark.scss
@@ -8,15 +8,15 @@
     --home-secondary-text-color:rgba(255,255,255,.6);
     --home-card-shadow:0px 50px 100px rgba(0, 0, 0, 0.25);
     --home-box-bg:#1f2937;
-    --home-linkbox-bg:rgba(255, 255, 255, .1);
-    --home-linkbox-border:1px solid rgba(255, 255, 255, .2);
+    --home-linkbox-bg:rgba(255, 255, 255, .05);
+    --home-linkbox-border:1px solid rgba(255, 255, 255, .1);
     --home-linkbox-text-color:#ffffff;
-    --home-linkbox-hover-bg:rgba(255, 255, 255, .2);
+    --home-linkbox-hover-bg:rgba(255, 255, 255, .1);
     --home-blocks-bg:transparent;
     --home-blocks-block-bg:#111827;
-    --home-blocks-block-shadow:0px 4.787564754486084px 10px 0px #0000001A , 0px 4px 25px rgba(0, 0, 0, 0.288);
-    --home-blocks-border-left:5px solid #424b57;
-    --home-blocks-border-bottom:7px solid #424b57;
+    --home-blocks-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25) , 0px 4px 25px rgba(0, 0, 0, 0.25);
+    --home-blocks-border-left:5px solid #1f2937;
+    --home-blocks-border-bottom:7px solid #1f2937;
     --home-blocks-border:1px solid #424b57;
     --home-blocks-sidebar-bg:#1f2937;
     --home-blocks-list-bg:#28323f;
@@ -24,26 +24,26 @@
     --home-blocks-main-border:1px solid #424b57;
     --home-blocks-item-bg:#1f2937;
     --home-blocks-image-bg:#28323f;
-    --home-blocks-text-color:rgba(255,255,255,.87);
-    --home-blocks-active-shadow:0px 30px 50px 0px #00000049;
+    --home-blocks-text-color:#4b5563;
+    --home-blocks-active-shadow:0px 30px 50px 0px rgba(0, 0, 0, 0.25);
     --home-blocks-active-border-top:1px solid #424b57;
     --home-blocks-active-border-right:1px solid #424b57;
     --home-blocks-active-border-bottom:6px solid #424b57;
     --home-blocks-active-border-left:4px solid #424b57;
-    --home-blocks-animation-shadow:0px 30px 50px 20px #00000059;
-    --home-blocks-tablebar-bg:#424b57;
-    --home-blocks-bar-bg:#0D9488;
-    --home-blocks-bar-button-bg:#0D9488;
-    --home-blocks-circle-bg:#0D9488;
+    --home-blocks-animation-shadow:0px 30px 50px 20px rgba(0, 0, 0, 0.25);
+    --home-blocks-tablebar-bg:#4b5563;
+    --home-blocks-bar-bg:#4b5563;
+    --home-blocks-bar-button-bg:#ffffff;
+    --home-blocks-circle-bg:#4b5563;
     --home-templates-bg:transparent;
-    --home-templates-block-shadow:0px 4.787564754486084px 10px 0px #0000001a;
+    --home-templates-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25);
     --home-templates-block-border-left:5px solid #424b57;
     --home-templates-block-border-bottom:7px solid #424b57;
     --home-templates-line:rgba(255,255,255,.1);
-    --home-templates-block-hover-bg:rgba(255,255,255,.09);
+    --home-templates-block-hover-bg:rgba(255,255,255,.1);
     --home-templates-btn-bg:#1f2937;
     --home-templates-btn-text-color:#ffffff;
-    --home-templates-btn-shadow:0px 10px 15px 0px #00000040;
+    --home-templates-btn-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.25);
     --home-templates-btn-border-top:1px solid #424b57;
     --home-templates-btn-border-right:1px solid #424b57;
     --home-templates-btn-border-bottom:4px solid #424b57;
diff --git a/assets/styles/layout/landing/_light.scss b/assets/styles/layout/landing/_light.scss
index 7857f96c5..b05122dce 100644
--- a/assets/styles/layout/landing/_light.scss
+++ b/assets/styles/layout/landing/_light.scss
@@ -4,13 +4,13 @@
     --home-highlight-fore-color:#ffffff;
     --home-bg:#F9FAFB;
     --home-border-color:rgba(0,0,0,.1);
-    --home-primary-text-color:#191919;
-    --home-secondary-text-color:#73879E;
-    --home-card-shadow:0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01), 0px 111px 44px 0px rgba(0, 0, 0, 0.00), 0px 174px 49px 0px rgba(0, 0, 0, 0.00);
+    --home-primary-text-color:#030712;
+    --home-secondary-text-color:#6b7280;
+    --home-card-shadow:0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01);
     --home-box-bg:#ffffff;
     --home-linkbox-bg:#ffffff;
     --home-linkbox-border:1px solid rgba(0,0,0,.1);
-    --home-linkbox-text-color:#191919;
+    --home-linkbox-text-color:#030712;
     --home-linkbox-hover-bg:#e5e7eb;
     --home-blocks-bg:transparent;
     --home-blocks-block-bg:#ffffff;
@@ -18,27 +18,27 @@
     --home-blocks-border-left:5px solid rgba(0,0,0,.1);
     --home-blocks-border-bottom:7px solid rgba(0,0,0,.1);
     --home-blocks-border:1px solid rgba(0,0,0,.1);
-    --home-blocks-sidebar-bg:#f9fafb;
-    --home-blocks-list-bg:#f2f3f3;
+    --home-blocks-sidebar-bg:#f3f4f6;
+    --home-blocks-list-bg:#f9fafb;
     --home-blocks-main-bg:#ffffff;
     --home-blocks-main-border:1px solid rgba(0,0,0,.1);
-    --home-blocks-item-bg:#f2f3f3;
-    --home-blocks-image-bg:#a1e3db;
-    --home-blocks-text-color:#b3b4b5;
+    --home-blocks-item-bg:#f4f5f7;
+    --home-blocks-image-bg:#e5e7eb;
+    --home-blocks-text-color:#d1d5db;
     --home-blocks-active-shadow:0px 30px 50px 0px rgba(0, 0, 0, .1);
-    --home-blocks-active-border-top:1px solid rgba(0,0,0,.1);
-    --home-blocks-active-border-right:1px solid rgba(0,0,0,.1);
-    --home-blocks-active-border-bottom:6px solid rgba(0,0,0,.1);
-    --home-blocks-active-border-left:4px solid rgba(0,0,0,.1);
+    --home-blocks-active-border-top:1px solid rgba(0,0,0,.07);
+    --home-blocks-active-border-right:1px solid rgba(0,0,0,.07);
+    --home-blocks-active-border-bottom:4px solid rgba(0,0,0,.07);
+    --home-blocks-active-border-left:4px solid rgba(0,0,0,.07);
     --home-blocks-animation-shadow:0px 30px 50px 10px rgba(0, 0, 0, .2);
-    --home-blocks-tablebar-bg:#a1e3db;
-    --home-blocks-bar-bg:#a1e3db;
+    --home-blocks-tablebar-bg:#d1d5db;
+    --home-blocks-bar-bg:#d1d5db;
     --home-blocks-bar-button-bg:#ffffff;
-    --home-blocks-circle-bg:#a1e3db;
+    --home-blocks-circle-bg:#c7cad0;
     --home-templates-bg:transparent;
-    --home-templates-block-shadow:0px 4.787564754486084px 10px 0px rgba(0,0,0,.1);
-    --home-templates-block-border-left:5px solid #edf0f3;
-    --home-templates-block-border-bottom:7px solid#edf0f3;
+    --home-templates-block-shadow:0px 5px 10px 0px rgba(0,0,0,.1);
+    --home-templates-block-border-left:5px solid #d1d5db;
+    --home-templates-block-border-bottom:7px solid #d1d5db;
     --home-templates-line:rgba(0,0,0,.1);
     --home-templates-block-hover-bg:rgba(0, 0, 0, 0.2);
     --home-templates-btn-bg:rgba(0, 0, 0, 0.5);
@@ -48,5 +48,5 @@
     --home-templates-btn-border-right:1px solid rgba(0,0,0,.1);
     --home-templates-btn-border-bottom:4px solid rgba(0,0,0,.1);
     --home-templates-btn-border-left:3px solid rgba(0,0,0,.1);
-    --home-features-card-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01), 0px 111px 44px 0px rgba(0, 0, 0, 0.00), 0px 174px 49px 0px rgba(0, 0, 0, 0.00);
+    --home-features-card-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01);
 }
\ No newline at end of file
diff --git a/layouts/AppTopBar.vue b/layouts/AppTopBar.vue
index e41f298e9..f01bf70ac 100755
--- a/layouts/AppTopBar.vue
+++ b/layouts/AppTopBar.vue
@@ -110,18 +110,19 @@
                     <button
                         v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }"
                         type="button"
-                        class="px-link flex align-items-center surface-card h-2rem px-3 border-1 border-solid surface-border transition-all transition-duration-300 hover:border-primary"
+                        style="max-width: 8rem"
+                        class="px-link flex align-items-center surface-card h-2rem px-2 border-1 border-solid surface-border transition-all transition-duration-300 hover:border-primary"
                     >
-                        <span class="text-900"> {{ versions[0].version }}</span>
+                        <span class="text-900 block white-space-nowrap overflow-hidden"> {{ versions[0].version }}</span>
                         <span class="ml-2 pi pi-angle-down text-600"></span>
                     </button>
 
-                    <div class="p-3 surface-overlay hidden absolute right-0 top-auto border-round shadow-2 origin-top w-12rem">
+                    <div class="p-3 surface-overlay hidden absolute right-0 top-auto border-round shadow-2 origin-top w-8rem">
                         <ul class="list-none m-0 p-0">
                             <li v-for="version in versions" :key="version.version" role="none">
-                                <a :href="version.url" class="block p-2 border-round hover:surface-hover w-full">
+                                <a :href="version.url" class="inline-flex p-2 border-round hover:surface-hover w-full">
                                     <span class="font-bold text-900">{{ version.name }}</span>
-                                    <span class="ml-2 text-700">{{ version.version }}</span>
+                                    <span class="ml-2 text-700 white-space-nowrap block overflow-hidden text-overflow-ellipsis">{{ version.version }}</span>
                                 </a>
                             </li>
                         </ul>
diff --git a/package.json b/package.json
index e500114f2..c6e5a7476 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "primevue",
-    "version": "3.36.1-SNAPSHOT",
+    "version": "3.36.1",
     "homepage": "https://primevue.org/",
     "repository": {
         "type": "git",
diff --git a/pages/index.vue b/pages/index.vue
index c48b869ab..499b1f09f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,11 +3,11 @@
         <AppNews v-if="$appState.newsActive" />
         <AppTopBar :showConfigurator="false" showDarkSwitch @darkswitch-click="onThemeToggle" />
         <HeroSection />
+        <FeaturesSection />
         <UsersSection />
         <ThemeSection :theme="tableTheme" @table-theme-change="onTableThemeChange" />
         <BlockSection />
         <TemplateSection />
-        <FeaturesSection />
         <FooterSection />
     </div>
 </template>
diff --git a/pages/landing/FeaturesSection.vue b/pages/landing/FeaturesSection.vue
index 2b69adc47..d27bd27dd 100644
--- a/pages/landing/FeaturesSection.vue
+++ b/pages/landing/FeaturesSection.vue
@@ -2,7 +2,7 @@
     <section class="landing-features py-8">
         <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-gray' : 'light-alt-gray'}.svg')`, backgroundSize: 'cover' }">
+        <div class="mt-7 px-3 lg:px-8">
             <div class="features-container">
                 <div class="grid">
                     <div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
diff --git a/pages/landing/HeroSection.vue b/pages/landing/HeroSection.vue
index c43633e27..4f5f32c86 100644
--- a/pages/landing/HeroSection.vue
+++ b/pages/landing/HeroSection.vue
@@ -55,14 +55,14 @@
                     <div class="flex flex-column w-6 gap-5 pl-3">
                         <div class="box p-4">
                             <div class="surface-card mb-4 w-full text-center p-5" style="border-radius: '10px'">
-                                <img src="https://primefaces.org/cdn/primevue/images/landing/brown-watch.png" alt="Watch" class="w-14rem" />
+                                <img src="https://primefaces.org/cdn/primevue/images/landing/air-jordan.png" alt="Watch" class="w-14rem" />
                             </div>
                             <div class="flex align-items-center mb-4">
                                 <div class="flex flex-column">
-                                    <span class="block font-semibold mb-1">Brown Watch</span>
+                                    <span class="block font-semibold mb-1">Sneaker</span>
                                     <span class="text-secondary text-sm">Premium Quality</span>
                                 </div>
-                                <span class="font-medium text-xl ml-auto">$12.45</span>
+                                <span class="font-medium text-xl ml-auto">$990</span>
                             </div>
                             <Button label="Add to Cart" icon="pi pi-shopping-cart" outlined class="w-full"></Button>
                         </div>
diff --git a/pages/landing/TemplateSection.vue b/pages/landing/TemplateSection.vue
index b5c1beed3..80116c5a3 100644
--- a/pages/landing/TemplateSection.vue
+++ b/pages/landing/TemplateSection.vue
@@ -10,8 +10,8 @@
         </div>
         <section :class="['templates flex justify-content-center align-items-center flex-column mt-7', { 'templates-animation': setAnimation }]">
             <div class="flex md:flex-row flex-column gap-4 lg:gap-0">
-                <div class="template-block block-1 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('diamond') }">
-                    <a class="templates-btn" target="_blank" href="https://diamond.primevue.org">Diamond Preview</a>
+                <div class="template-block block-5 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('verona') }">
+                    <a class="templates-btn" target="_blank" href="https://verona.primevue.org">Verona Preview</a>
                 </div>
                 <div class="template-block block-2 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('freya') }">
                     <a class="templates-btn" target="_blank" href="https://freya.primevue.org">Freya Preview</a>
@@ -29,8 +29,8 @@
                 </div>
             </div>
             <div class="flex md:flex-row flex-column gap-4 lg:gap-0">
-                <div class="template-block block-5 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('serenity') }">
-                    <a class="templates-btn" target="_blank" href="https://serenity.primevue.org">Serenity Preview</a>
+                <div class="template-block block-1 mr-2 lg:mb-0 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('diamond') }">
+                    <a class="templates-btn" target="_blank" href="https://diamond.primevue.org">Diamond Preview</a>
                 </div>
                 <div class="template-block block-6 ml-2 flex justify-content-center align-items-center" :style="{ backgroundImage: imageBg('ultima') }">
                     <a class="templates-btn" target="_blank" href="https://ultima.primevue.org">Ultima Preview</a>
@@ -111,12 +111,12 @@ export default {
     methods: {
         imageBg(template) {
             const isDark = this.$appState.darkTheme;
-            const url = template === 'templates-text' ? 'png' : 'jpeg';
+            const url = template === 'templates-text' ? 'png' : 'jpg';
 
             return `url('https://primefaces.org/cdn/primevue/images/landing/templates/${template}-${isDark ? 'dark' : 'light'}.${url}')`;
         },
         templateImg() {
-            return `https://primefaces.org/cdn/primevue/images/landing/templates/templates-text-${this.$appState.darkTheme ? 'dark' : 'light'}.png`;
+            return `https://primefaces.org/cdn/primevue/images/landing/templates/templates-text-new-${this.$appState.darkTheme ? 'dark' : 'light'}.png`;
         }
     }
 };