From e9a77efa59dd1799160a5b0f12fd63799a668429 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 2 Apr 2024 13:48:54 +0300
Subject: [PATCH] Add links to v4 beta

---
 assets/data/news.json           | 6 +++---
 doc/theming/ArchitectureDoc.vue | 4 +++-
 layouts/AppTopBar.vue           | 9 +++++++--
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/assets/data/news.json b/assets/data/news.json
index f15aeaad0..3961408ed 100644
--- a/assets/data/news.json
+++ b/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;"
diff --git a/doc/theming/ArchitectureDoc.vue b/doc/theming/ArchitectureDoc.vue
index 08b3ff4d7..33922f48b 100644
--- a/doc/theming/ArchitectureDoc.vue
+++ b/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.
diff --git a/layouts/AppTopBar.vue b/layouts/AppTopBar.vue
index 26c38d586..454708fd8 100755
--- a/layouts/AppTopBar.vue
+++ b/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',