Jelajahi Sumber

fix: free cta

David Hill 2 bulan lalu
induk
melakukan
11e6a181ad

+ 10 - 3
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>

+ 4 - 1
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;