diff --git a/packages/console/app/src/component/header.tsx b/packages/console/app/src/component/header.tsx index 06e710a18..088c737ab 100644 --- a/packages/console/app/src/component/header.tsx +++ b/packages/console/app/src/component/header.tsx @@ -34,7 +34,7 @@ const fetchSvgContent = async (svgPath: string): Promise => { } } -export function Header(props: { zen?: boolean }) { +export function Header(props: { zen?: boolean; hideGetStarted?: boolean }) { const navigate = useNavigate() const githubData = createAsync(() => github()) const starCount = createMemo(() => @@ -169,6 +169,13 @@ export function Header(props: { zen?: boolean }) { + +
  • + + Get started + +
  • +
    diff --git a/packages/console/app/src/routes/brand/index.css b/packages/console/app/src/routes/brand/index.css index 1fc6c17d3..cfec326b2 100644 --- a/packages/console/app/src/routes/brand/index.css +++ b/packages/console/app/src/routes/brand/index.css @@ -84,6 +84,7 @@ ul { display: flex; justify-content: space-between; + align-items: center; gap: 48px; li { display: inline-block; @@ -98,6 +99,18 @@ text-underline-offset: 2px; text-decoration-thickness: 1px; } + [data-slot="cta-button"] { + background: var(--color-background-strong); + color: var(--color-text-inverted); + padding: 8px 16px; + border-radius: 4px; + font-weight: 500; + text-decoration: none; + } + [data-slot="cta-button"]:hover { + background: var(--color-background-strong-hover); + text-decoration: none; + } } } diff --git a/packages/console/app/src/routes/download/index.css b/packages/console/app/src/routes/download/index.css index 7894e018b..eb12295c2 100644 --- a/packages/console/app/src/routes/download/index.css +++ b/packages/console/app/src/routes/download/index.css @@ -84,6 +84,7 @@ ul { display: flex; justify-content: space-between; + align-items: center; gap: 48px; li { display: inline-block; @@ -98,6 +99,18 @@ text-underline-offset: 2px; text-decoration-thickness: 1px; } + [data-slot="cta-button"] { + background: var(--color-background-strong); + color: var(--color-text-inverted); + padding: 8px 16px; + border-radius: 4px; + font-weight: 500; + text-decoration: none; + } + [data-slot="cta-button"]:hover { + background: var(--color-background-strong-hover); + text-decoration: none; + } } } diff --git a/packages/console/app/src/routes/download/index.tsx b/packages/console/app/src/routes/download/index.tsx index 98cc14fb2..2af4df46a 100644 --- a/packages/console/app/src/routes/download/index.tsx +++ b/packages/console/app/src/routes/download/index.tsx @@ -31,7 +31,7 @@ export default function Download() {
    -
    +
    diff --git a/packages/console/app/src/routes/enterprise/index.css b/packages/console/app/src/routes/enterprise/index.css index d3c47f08e..c4a9ca29c 100644 --- a/packages/console/app/src/routes/enterprise/index.css +++ b/packages/console/app/src/routes/enterprise/index.css @@ -84,6 +84,7 @@ ul { display: flex; justify-content: space-between; + align-items: center; gap: 48px; li { display: inline-block; @@ -98,6 +99,18 @@ text-underline-offset: 2px; text-decoration-thickness: 1px; } + [data-slot="cta-button"] { + background: var(--color-background-strong); + color: var(--color-text-inverted); + padding: 8px 16px; + border-radius: 4px; + font-weight: 500; + text-decoration: none; + } + [data-slot="cta-button"]:hover { + background: var(--color-background-strong-hover); + text-decoration: none; + } } } diff --git a/packages/console/app/src/routes/index.css b/packages/console/app/src/routes/index.css index 6f658771f..4d91e5d1e 100644 --- a/packages/console/app/src/routes/index.css +++ b/packages/console/app/src/routes/index.css @@ -225,6 +225,7 @@ body { ul { display: flex; justify-content: space-between; + align-items: center; gap: 48px; li { display: inline-block; @@ -239,6 +240,18 @@ body { text-underline-offset: var(--space-1); text-decoration-thickness: 1px; } + [data-slot="cta-button"] { + background: var(--color-background-strong); + color: var(--color-text-inverted); + padding: 8px 16px; + border-radius: 4px; + font-weight: 500; + text-decoration: none; + } + [data-slot="cta-button"]:hover { + background: var(--color-background-strong-hover); + text-decoration: none; + } } } @@ -436,7 +449,7 @@ body { cursor: pointer; align-items: center; color: var(--color-text); - gap: var(--space-1); + gap: 16px; color: var(--color-text); padding: 8px 16px 8px 8px; border-radius: 4px; diff --git a/packages/console/app/src/routes/zen/index.css b/packages/console/app/src/routes/zen/index.css index 6a9f5706d..a8d0b7352 100644 --- a/packages/console/app/src/routes/zen/index.css +++ b/packages/console/app/src/routes/zen/index.css @@ -147,6 +147,7 @@ body { ul { display: flex; justify-content: space-between; + align-items: center; gap: 48px; li { display: inline-block; @@ -161,6 +162,18 @@ body { text-underline-offset: var(--space-1); text-decoration-thickness: 1px; } + [data-slot="cta-button"] { + background: var(--color-background-strong); + color: var(--color-text-inverted); + padding: 8px 16px; + border-radius: 4px; + font-weight: 500; + text-decoration: none; + } + [data-slot="cta-button"]:hover { + background: var(--color-background-strong-hover); + text-decoration: none; + } } } diff --git a/packages/console/app/src/routes/zen/index.tsx b/packages/console/app/src/routes/zen/index.tsx index 7fd393962..6b163315c 100644 --- a/packages/console/app/src/routes/zen/index.tsx +++ b/packages/console/app/src/routes/zen/index.tsx @@ -38,7 +38,7 @@ export default function Home() {
    -
    +