QA fixes

assets/data/news.json

@@ -3,7 +3,7 @@
     "content": "Building Design Systems with Tailwind",
     "linkText": "Learn More",
     "linkHref": "https://primevue.org/tailwind",
-    "backgroundStyle": "background-color:#4f8ff7",
+    "backgroundStyle": "background-color:#059669",
     "textStyle": "color:#ffffff;font-weight:500",
     "linkStyle": "color:#ffffff;font-weight:700;text-decoration: underline;"
 }

assets/styles/layout/_doc.scss

@@ -15,11 +15,10 @@
             border: 0 none;
             display: block;
             padding: 1rem 2rem;
-            min-width: 12rem;
             text-align: center;
             color: var(--surface-700);
-            font-size: 1.125rem;
+            font-size: 1rem;
-            letter-spacing: 2px;
+            letter-spacing: 1px;
             cursor: pointer;
             margin: 0;
             transition: all 0.2s;

assets/styles/layout/_docsearch.scss

@@ -1,12 +1,16 @@
 .DocSearch-Button {
     border-radius: var(--border-radius);
-    border: 1px solid var(--surface-border);
+    width: 24rem;
-    width: 14rem;
     margin: 0;
     transition: border-color .3s;
+    border: 1px solid transparent;
     height: 2.5rem;
     padding: 0 .75rem;
 
+    &:hover {
+        border-color: var(--primary-color);
+    }
+
     &:hover {
         border-color: var(--primary-color);
         box-shadow: none;
@@ -139,3 +143,20 @@
     --docsearch-highlight-color: var(--primary-color);
     --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/_footer.scss

@@ -1,5 +1,5 @@
 .layout-footer {
-    padding: 2rem 0;
+    padding: 2rem 4rem;
     margin-top: 4rem;
     display: flex;
     align-items: center;

assets/styles/layout/_responsive.scss

@@ -4,7 +4,8 @@
         margin: 0 auto;
     }
 
-    .layout-topbar-inner {
+    .layout-topbar-inner,
+    .layout-footer {
         max-width: 1478px;
         margin: 0 auto;
     }
@@ -53,6 +54,22 @@
         }
     }
 
+    .layout-light,
+    .layout-dark {
+        .DocSearch-Button {
+            background: var(--surface-card);
+            border-color: var(--surface-border);
+
+            &:hover {
+                border-color: var(--primary-color);
+            }
+
+            .DocSearch-Search-Icon {
+                color: var(--text-700);
+            }
+        }
+    }
+
     .layout-sidebar {
         top: 0;
         left: 0;
@@ -117,6 +134,11 @@
         padding-right: 2rem;
     }
 
+    .layout-footer {
+        padding-left: 2rem;
+        padding-right: 2rem;
+    }
+
     .blocked-scroll {
         overflow: hidden;
         padding-right: var(--scrollbar-width);

assets/styles/layout/_sidebar.scss

@@ -87,7 +87,7 @@
             
             > div {
                 ol {
-                    margin: 0 0 0 1.5rem;
+                    margin: 0 0 0 1rem;
                     padding: .25rem 0;
                     list-style: none;
 

assets/styles/layout/_topbar.scss

@@ -38,10 +38,6 @@
         }
     }
 
-    #docsearch {
-        margin-right: auto;
-    }
-
     .menu-button {
         display: none;
     }

assets/styles/layout/layout.scss

@@ -7,8 +7,8 @@
 @import './_news';
 @import './_footer';
 @import './_config';
-@import './_responsive';
 @import './_code';
 @import './_doc';
 @import './_docsearch';
+@import './_responsive';
 @import './landing/_landing';

pages/landing/FooterSection.vue

@@ -14,7 +14,7 @@
                     <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>
+                            <a href="https://github.com/orgs/primefaces/discussions" 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>

pages/landing/HeroSection.vue

@@ -4,8 +4,12 @@
             <div class="w-full xl:w-6 flex flex-column justify-content-center lg:px-8 align-items-center xl:align-items-stretch">
                 <h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
                 <p class="section-detail xl:text-left text-center px-0 mt-0 mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                <div>
+                <div class="flex align-items-center gap-3">
                     <PrimeVueNuxtLink to="/installation" class="linkbox active font-semibold py-3 px-4"> Get Started <i class="pi pi-arrow-right ml-3"></i> </PrimeVueNuxtLink>
+                    <a href="https://github.com/primefaces/primevue" target="_blank" rel="noopener noreferrer" class="linkbox font-semibold py-3 px-4">
+                        <span>Give a Star</span>
+                        <i class="pi pi-star-fill ml-3 text-yellow-500"></i>
+                    </a>
                 </div>
             </div>
             <div class="w-full xl:w-6 pt-7 xl:pt-0 hidden md:block">
@@ -18,18 +22,14 @@
                                 <InputNumber v-model="value2" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="lg:w-6" />
                             </div>
                             <span class="text-secondary font-medium block mt-5 mb-3">Category</span>
-                            <div class="flex justify-content-between flex-wrap gap-3">
+                            <div class="flex flex-wrap gap-3">
                                 <div class="flex align-items-center">
                                     <RadioButton id="category1" v-model="radioValue" value="C" name="radiovalue" @change="setCategory('C')" />
                                     <label for="category1" class="ml-2 font-medium">Clothing</label>
                                 </div>
                                 <div class="flex align-items-center">
-                                    <RadioButton id="category2" v-model="radioValue" value="F" name="radiovalue" @change="setCategory('F')" />
+                                    <RadioButton id="category2" v-model="radioValue" value="E" name="radiovalue" @change="setCategory('E')" />
-                                    <label for="category2" class="ml-2 font-medium">Fitness</label>
+                                    <label for="category2" class="ml-2 font-medium">Electronics</label>
-                                </div>
-                                <div class="flex align-items-center">
-                                    <RadioButton id="category3" v-model="radioValue" value="E" name="radiovalue" @change="setCategory('E')" />
-                                    <label for="category3" class="ml-2 font-medium">Electronics</label>
                                 </div>
                             </div>
                             <span class="text-secondary font-medium block mt-5 mb-3">Order Date</span>