Add glow image

assets/styles/layout/_docsearch.scss

@@ -1,11 +1,11 @@
 .DocSearch-Button {
     border-radius: var(--border-radius);
-    width: 24rem;
+    border: 1px solid var(--surface-border);
+    height: 2rem;
+    background-color: var(--surface-card);
     margin: 0;
     transition: border-color .3s;
-    border: 1px solid transparent;
-    height: 2.5rem;
-    padding: 0 .75rem;
+    padding: 0 .5rem;
 
     &:hover {
         border-color: var(--primary-color);
@@ -17,8 +17,8 @@
     }
 
     .DocSearch-Search-Icon {
-        width: 1.25rem;
-        height: 1.25rem;
+        width: 1rem;
+        height: 1rem;
     }
 
     .DocSearch-Button-Keys {
@@ -26,7 +26,7 @@
         overflow: hidden;
         min-width: auto;
         height: 1.5rem;
-        background: var(--docsearch-key-gradient);
+        background: transparent;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -48,7 +48,7 @@
                 justify-content: end;
                 font-size: 0.8rem;
                 font-weight: 700;
-                line-height: 13.5px;
+                line-height: normal;
                 svg{
                     height: 14.5px;
                 }
@@ -126,6 +126,12 @@
     color: var(--primary-color);
 }
 
+.DocSearch-Button-Placeholder {
+    text-align: center;
+    display: inline-block;
+    font-size: .875rem;
+}
+
 :root {
     --docsearch-searchbox-focus-background: var(--surface-card);
     --docsearch-text-color: var(--text-color);
@@ -144,19 +150,3 @@
     --docsearch-hit-active-color: var(--primary-color-text);
 }
 
-.DocSearch-Button-Placeholder {
-    text-align: center;
-    display: inline-block;
-}
-
-.layout-light {
-    .DocSearch-Button {
-        background: #edf0f3;
-    }
-}
-
-.layout-light {
-    .DocSearch-Dark {
-        background: var(--surface-100);
-    }
-}

assets/styles/layout/_glow.scss

@@ -0,0 +1,15 @@
+.landing, .layout-wrapper {
+    &:before {
+        top: 0;
+        width: 100%;
+        height: 236px;
+        content: "";
+        display: block;
+        z-index: 0;
+        background-image: var(--glow-image);
+        position: fixed;
+        background-position: top;
+        background-repeat: no-repeat;
+        background-size: contain;
+    }
+}

assets/styles/layout/_responsive.scss

@@ -30,7 +30,6 @@
         }
 
         #docsearch {
-            margin-left: auto;
             margin-right: .5rem;
         }
 

assets/styles/layout/_topbar.scss

@@ -5,7 +5,7 @@
     width: calc(100% - var(--scrollbar-width, 0px));
     z-index: 1100;
     transition: background-color 1s;
-    border-bottom: 1px solid var(--surface-border);
+    border-bottom: 1px solid var(--topbar-border);
 
     &.layout-topbar-sticky {
         backdrop-filter: blur(8px);
@@ -37,7 +37,7 @@
             width: 25px;
         }
     }
-
+    
     .menu-button {
         display: none;
     }

assets/styles/layout/landing/_dark.scss

@@ -1,4 +1,6 @@
 .layout-dark {
+    --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/top-pattern-light.png);
+    --topbar-border: var(--surface-border);
     --home-highlight-color:#10b981;
     --home-highlight-darker-color:#059669;
     --home-highlight-fore-color:#ffffff;

assets/styles/layout/landing/_light.scss

@@ -1,4 +1,6 @@
 .layout-light {
+    --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/top-pattern-light.png);
+    --topbar-border: rgba(0,0,0,.05);
     --home-highlight-color:#10b981;
     --home-highlight-darker-color:#059669;
     --home-highlight-fore-color:#ffffff;

assets/styles/layout/layout.scss

@@ -1,6 +1,7 @@
 @charset 'UTF-8';
 
 @import './_core';
+@import './_glow';
 @import './_topbar';
 @import './_sidebar';
 @import './_content';

layouts/AppTopBar.vue

@@ -59,9 +59,11 @@
                     </svg>
                 </PrimeVueNuxtLink>
             </div>
-            <div id="docsearch"></div>
 
             <ul class="flex list-none m-0 p-0 gap-2 align-items-center">
+                <li>
+                    <div id="docsearch"></div>
+                </li>
                 <li>
                     <a
                         href="https://github.com/primefaces/primevue"