[mktg-2855][c] update navbar for April 17 release

Author: ch264

build/navbarDev.json

@@ -28,20 +28,29 @@
           ]
         },
         {
-          "title": "API Platform Features",
+          "title": "Features",
           "subItemsCol": [
             {
-              "title": "AI Agent Builder",
-              "url": "https://www.postman.com/product/ai-agent-builder/"
+              "title": "Platform Overview",
+              "url": "https://www.postman.com/product/platform/"
+            },
+            {
+              "title": "Spec Hub",
+              "url": "https://www.postman.com/product/spec-hub/",
+              "badge": "new"
             },
             {
               "title": "Collections",
-              "url": "https://www.postman.com/collection/"
+              "url": "https://www.postman.com/product/collections/"
             },
             {
               "title": "Workspaces",
               "url": "https://www.postman.com/product/workspaces/"
             },
+            {
+              "title": "API Client",
+              "url": "https://www.postman.com/product/api-client/"
+            },
             {
               "title": "Partner Workspaces",
               "url": "https://www.postman.com/product/partner-workspaces/"
@@ -51,11 +60,11 @@
               "url": "https://www.postman.com/product/postbot/"
             },
             {
-              "title": "API Client",
-              "url": "https://www.postman.com/product/api-client/"
+              "title": "AI Agent Builder",
+              "url": "https://www.postman.com/product/ai-agent-builder/"
             },
             {
-              "title": "Browse API Tools",
+              "title": "More Resources",
               "url": "https://www.postman.com/product/tools/"
             }
           ]

src/components/Header/Header.jsx

@@ -100,7 +100,7 @@ const Header = (props) => {
   const [beta, setBeta] = useState('');
   const [cookie, setCookie] = useState('');
   const [hidden, setHidden] = useState(true);
-  const [data, setData] = useState(navbarData);
+  const [data, setData] = useState(navbarDataLocal);
   const [dataDropdown, setDataDropdown] = useState(navbarData);
   const [visibleHelloBar] = useState();
 
@@ -115,7 +115,7 @@ const Header = (props) => {
     const navtopicsdropdownKeys = ['items', 'type']
 
     if (navbarKeys.every(key => Object.keys(navbarData).includes(key))) {
-      setData(navbarData)
+      setData(navbarDataLocal)
     } else {
       setData(navbarDataLocal)
     }
@@ -334,7 +334,10 @@ const Header = (props) => {
                                     href={link.url}
                                     key={link.title}
                                   >
-                                    {link.title}
+                                    <span>{link.title}</span>
+                                    {link.badge && (
+                                      <span className="dropdown__badge">{link.badge}</span>
+                                    )}
                                   </a>
                                 ))}
                               </div>

src/components/Header/HeaderStyles.jsx

@@ -671,6 +671,16 @@ export const DropdownStyles = styled.div`
     font-weight: 600;
     margin-bottom: 0px;
   }
+
+  .dropdown__badge {
+    margin-left: 0.5rem; /* ml-2 */
+    border-radius: 0.25rem; /* rounded */
+    border: 1px solid #e4d8f6; /* border border-[#e4d8f6] */
+    padding: 0.5rem; /* px-1 */
+    font-size: 10px; /* text-[10px] */
+    text-transform: uppercase; /* uppercase */
+    color: #623497; /* text-[#623497] */
+  }
 `