feat(header-cta): add a cta button in the header

i18n/en/code.json

@@ -5,6 +5,9 @@
   "header.getting_started": {
     "message": "Getting started"
   },
+  "header.actions.free_demo": {
+    "message": "Start free demo"
+  },
   "header.docs": {
     "message": "Docs"
   },

package.json

@@ -20,7 +20,7 @@
     "@docusaurus/preset-classic": "3.2.0",
     "@docusaurus/theme-mermaid": "3.2.0",
     "@mdx-js/react": "^3.0.0",
-    "@teradata-web/react-components": "^1.0.4",
+    "@teradata-web/react-components": "^1.3.0",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",

src/theme/Navbar/index.tsx

@@ -1,11 +1,17 @@
-import React, { useEffect, useState } from 'react';
-import { Header, Language, NavListItem } from '@teradata-web/react-components';
+import React, { ReactElement, useEffect, useState } from 'react';
+import {
+  Button,
+  Header,
+  HeaderAction,
+  Language,
+  NavListItem,
+} from '@teradata-web/react-components';
 import { useThemeConfig } from '@docusaurus/theme-common';
 import { useNavbarSecondaryMenu } from '@docusaurus/theme-common/internal';
 import { translate } from '@docusaurus/Translate';
 import SearchBar from '../SearchBar';
 import { ThemeConfig } from '@docusaurus/types';
-
+import Link from '@docusaurus/Link';
 
 function translateNavItems(navItems: NavListItem[]): NavListItem[] {
   return navItems.map((item) => {
@@ -32,6 +38,22 @@ export default function Navbar() {
   const translatedTitle = translate({ message: title });
   const translatedNavItems = translateNavItems(nestedNavItems);
 
+  const headerActions: HeaderAction[] = [
+    { actionElement: <SearchBar />, type: 'search' },
+    {
+      actionElement: (
+        <Link to="https://www.teradata.com/getting-started/demos/clearscape-analytics">
+          <Button
+            label={translate({ message: 'header.actions.free_demo' })}
+            icon="fa-solid fa-arrow-right-long"
+            trailingIcon={true}
+          />
+        </Link>
+      ),
+      type: 'button',
+    },
+  ];
+
   const secondaryMenuDetails = {
     menuElement: useNavbarSecondaryMenu().content as JSX.Element,
     title: translate({
@@ -92,7 +114,7 @@ export default function Navbar() {
       key={defaultLang}
       navItems={translatedNavItems}
       title={translatedTitle}
-      headerActions={[{ actionElement: <SearchBar />, type: 'search' }]}
+      headerActions={headerActions}
       languages={languages}
       onLanguageChange={handleLanguageChange}
       selectedLanguage={defaultLang}