Add links to v4 beta

assets/data/news.json

@@ -1,8 +1,8 @@
 {
-    "id": 52,
-    "content": "Tailwind Presets for Unstyled PrimeVue",
+    "id": 55,
+    "content": "🎉 v4.0.0-beta.1 is out with the new Styled Mode",
     "linkText": "Learn More",
-    "linkHref": "http://tailwind.primevue.org",
+    "linkHref": "http://v4.primevue.org",
     "backgroundStyle": "background-color:var(--primary-color)",
     "textStyle": "color:var(--primary-color-text);font-weight:500",
     "linkStyle": "color:var(--primary-color-text);font-weight:700;text-decoration: underline;"

doc/theming/ArchitectureDoc.vue

@@ -1,6 +1,8 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p class="notification"><strong>Note</strong>: By the end of Q1 2024, PrimeVue v4 will be introduced with a modern theming architecture based on design tokens and css variables.</p>
+        <p class="notification">
+            <strong>Note</strong>: PrimeVue v4 has a brand new styled mode implementation, visit the <a href="https://v4.primevue.org/theming/styled" target="_blank" rel="noopener noreferrer">v4 documentation</a> for more information.
+        </p>
         <p>
             PrimeVue is a design agnostic library so unlike other UI libraries it does not enforce a certain styling such as material or bootstrap. In order to achieve this, styling has been separated into two parts, core and theme. The core resides
             inside PrimeVue to implement the structure of the components such as positioning whereas theme brings the colors and spacing.

layouts/AppTopBar.vue

@@ -115,7 +115,7 @@
                         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 block white-space-nowrap overflow-hidden"> {{ versions[0].version }}</span>
+                        <span class="text-900 block white-space-nowrap overflow-hidden"> {{ versions[1].version }}</span>
                         <span class="ml-2 pi pi-angle-down text-600"></span>
                     </button>
 
@@ -166,10 +166,15 @@ export default {
     data() {
         return {
             versions: [
+                {
+                    name: 'v4',
+                    version: 'v4-beta.1',
+                    url: 'https://v4.primevue.org'
+                },
                 {
                     name: 'v3',
                     version: pkg.version,
-                    url: 'https://www.primevue.org'
+                    url: 'https://primevue.org'
                 },
                 {
                     name: 'v2',