diff options
| -rw-r--r-- | packages/console/app/src/component/header.tsx | 13 | ||||
| -rw-r--r-- | packages/console/app/src/routes/index.css | 5 |
2 files changed, 14 insertions, 4 deletions
diff --git a/packages/console/app/src/component/header.tsx b/packages/console/app/src/component/header.tsx index 088c737ab..2bfc7305e 100644 --- a/packages/console/app/src/component/header.tsx +++ b/packages/console/app/src/component/header.tsx @@ -172,7 +172,14 @@ export function Header(props: { zen?: boolean; hideGetStarted?: boolean }) { <Show when={!props.hideGetStarted}> <li> <A href="/download" data-slot="cta-button"> - Get started + <svg width="18" height="18" viewBox="0 0 18 18" fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + d="M12.1875 9.75L9.00001 12.9375L5.8125 9.75M9.00001 2.0625L9 12.375M14.4375 15.9375H3.5625" + stroke="currentColor" stroke-width="1.5" stroke-linecap="square" /> + </svg> + + Free </A> </li> </Show> @@ -187,7 +194,7 @@ export function Header(props: { zen?: boolean; hideGetStarted?: boolean }) { class="nav-toggle" onClick={() => setStore("mobileMenuOpen", !store.mobileMenuOpen)} > - <span class="sr-only">Open menu</span> + <span class="sr-only">Open menu</span> <Switch> <Match when={store.mobileMenuOpen}> <svg @@ -253,7 +260,7 @@ export function Header(props: { zen?: boolean; hideGetStarted?: boolean }) { <Show when={!props.hideGetStarted}> <li> <A href="/download" data-slot="cta-button"> - Get started + Get started for free </A> </li> </Show> diff --git a/packages/console/app/src/routes/index.css b/packages/console/app/src/routes/index.css index 9115b29ff..ae329b98b 100644 --- a/packages/console/app/src/routes/index.css +++ b/packages/console/app/src/routes/index.css @@ -251,10 +251,13 @@ body { [data-slot="cta-button"] { background: var(--color-background-strong); color: var(--color-text-inverted); - padding: 8px 16px; + padding: 8px 16px 8px 10px; border-radius: 4px; font-weight: 500; text-decoration: none; + display: flex; + align-items: center; + gap: 8px; @media (max-width: 55rem) { display: none; |