Showcase cosmetics on colors and content

assets/styles/layout/_sidebar.scss

@@ -65,7 +65,7 @@
                 &:hover {
                     .menu-icon {
                         i {
-                            color: var(--surface-900);
+                            color: var(--primary-color);
                         }
                     }
 

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);
     }
 }

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-bg:rgba(255, 255, 255, .05);
-    --home-linkbox-border:1px solid rgba(255, 255, 255, .2);
+    --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-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 #424b57;
+    --home-blocks-border-left:5px solid #1f2937;
-    --home-blocks-border-bottom:7px solid #424b57;
+    --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-text-color:#4b5563;
-    --home-blocks-active-shadow:0px 30px 50px 0px #00000049;
+    --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-animation-shadow:0px 30px 50px 20px rgba(0, 0, 0, 0.25);
-    --home-blocks-tablebar-bg:#424b57;
+    --home-blocks-tablebar-bg:#4b5563;
-    --home-blocks-bar-bg:#0D9488;
+    --home-blocks-bar-bg:#4b5563;
-    --home-blocks-bar-button-bg:#0D9488;
+    --home-blocks-bar-button-bg:#ffffff;
-    --home-blocks-circle-bg:#0D9488;
+    --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;

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-primary-text-color:#030712;
-    --home-secondary-text-color:#73879E;
+    --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), 0px 111px 44px 0px rgba(0, 0, 0, 0.00), 0px 174px 49px 0px rgba(0, 0, 0, 0.00);
+    --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-sidebar-bg:#f3f4f6;
-    --home-blocks-list-bg:#f2f3f3;
+    --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-item-bg:#f4f5f7;
-    --home-blocks-image-bg:#a1e3db;
+    --home-blocks-image-bg:#e5e7eb;
-    --home-blocks-text-color:#b3b4b5;
+    --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-top:1px solid rgba(0,0,0,.07);
-    --home-blocks-active-border-right:1px solid rgba(0,0,0,.1);
+    --home-blocks-active-border-right:1px solid rgba(0,0,0,.07);
-    --home-blocks-active-border-bottom:6px solid rgba(0,0,0,.1);
+    --home-blocks-active-border-bottom:4px solid rgba(0,0,0,.07);
-    --home-blocks-active-border-left:4px solid rgba(0,0,0,.1);
+    --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-tablebar-bg:#d1d5db;
-    --home-blocks-bar-bg:#a1e3db;
+    --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-shadow:0px 5px 10px 0px rgba(0,0,0,.1);
-    --home-templates-block-border-left:5px solid #edf0f3;
+    --home-templates-block-border-left:5px solid #d1d5db;
-    --home-templates-block-border-bottom:7px solid#edf0f3;
+    --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);
 }

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>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "primevue",
-    "version": "3.36.1-SNAPSHOT",
+    "version": "3.36.1",
     "homepage": "https://primevue.org/",
     "repository": {
         "type": "git",

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>

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">

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>

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') }">
+                <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://diamond.primevue.org">Diamond Preview</a>
+                    <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') }">
+                <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://serenity.primevue.org">Serenity Preview</a>
+                    <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`;
         }
     }
 };