From b6a455d264aaf23be11deb7777a9cfa9b7bd7ba3 Mon Sep 17 00:00:00 2001
From: Palash Gupta <palashgdev@gmail.com>
Date: Wed, 17 May 2023 16:24:16 +0530
Subject: [PATCH] feat: add signoz cloud button in header (#2694)

* feat: add signoz cloud button in header

* chore: gap is updated

---------

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>
---
 frontend/src/container/Header/index.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/src/container/Header/index.tsx b/frontend/src/container/Header/index.tsx
index a34287e665..d00bbca901 100644
--- a/frontend/src/container/Header/index.tsx
+++ b/frontend/src/container/Header/index.tsx
@@ -3,8 +3,7 @@ import {
 	CaretUpFilled,
 	LogoutOutlined,
 } from '@ant-design/icons';
-import type { MenuProps } from 'antd';
-import { Divider, Dropdown, Space, Typography } from 'antd';
+import { Button, Divider, Dropdown, MenuProps, Space, Typography } from 'antd';
 import { Logout } from 'api/utils';
 import ROUTES from 'constants/routes';
 import Config from 'container/ConfigDropdown';
@@ -91,6 +90,13 @@ function HeaderContainer(): JSX.Element {
 		[onToggleHandler, onLogoutKeyDown],
 	);
 
+	const onClickSignozCloud = (): void => {
+		window.open(
+			'https://signoz.io/pricing/?utm_source=product_navbar&utm_medium=frontend',
+			'_blank',
+		);
+	};
+
 	return (
 		<Header>
 			<Container>
@@ -106,7 +112,11 @@ function HeaderContainer(): JSX.Element {
 					</NavLinkWrapper>
 				</NavLink>
 
-				<Space style={{ height: '100%' }} align="center">
+				<Space size="middle" align="center">
+					<Button onClick={onClickSignozCloud} type="primary">
+						Try Signoz Cloud
+					</Button>
+
 					<Config frontendId="tooltip" />
 
 					<ToggleButton