chore: add demo to CTA (#177)

shell.nix

@@ -17,6 +17,7 @@
   cli_shell = pkgs.callPackage ./kardinal-cli/shell.nix {inherit pkgs;};
   cli_kontrol_api_shell = pkgs.callPackage ./libs/cli-kontrol-api/shell.nix {inherit pkgs;};
   demo_shell = pkgs.callPackage ./examples/voting-app/shell.nix {inherit pkgs;};
+  website_shell = pkgs.callPackage ./website/shell.nix {inherit pkgs;};
 
   kardinal_shell = with pkgs;
     pkgs.mkShell {
@@ -75,4 +76,5 @@ in
     kardinal_shell
     cli_kontrol_api_shell
     demo_shell
+    website_shell
   ]

website/components/CTAButtons.tsx

@@ -2,14 +2,14 @@
 import { FiGithub } from "react-icons/fi";
 import styled from "styled-components";
 
-import { ButtonPrimary, ButtonTertiary } from "@/components/Button";
-import Sparkles from "@/components/icons/Sparkles";
+import { ButtonTertiary } from "@/components/Button";
+import EmailCapture from "@/components/EmailCapture";
 import { mobile } from "@/constants/breakpoints";
 
 const CTAButtons = () => {
   return (
     <S.CTAButtons>
-      <ButtonPrimary
+      <ButtonTertiary 
         analyticsId="button_hero_github"
         href="https://github.com/kurtosis-tech/kardinal"
         rel="noopener noreferrer"
@@ -18,24 +18,18 @@ const CTAButtons = () => {
         size="lg"
       >
         View on GitHub
-      </ButtonPrimary>
-      <ButtonTertiary
-        analyticsId="button_hero_playground"
-        href="https://github.com/kurtosis-tech/kardinal-playground"
-        rel="noopener noreferrer"
-        target="_blank"
-        iconRight={<Sparkles size={16} />}
-      >
-        Try in Playground
-      </ButtonTertiary>
+      </ButtonTertiary >
+      <EmailCapture buttonAnalyticsId="button_footer_join_waitlist" />
     </S.CTAButtons>
   );
 };
 
 namespace S {
   export const CTAButtons = styled.div`
+    margin-top: 16px;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+    align-items: center;
     gap: 16px;
     @media ${mobile} {
       flex-direction: column;

website/components/Nav/index.tsx

@@ -2,9 +2,10 @@
 import Image from "next/image";
 import Link from "next/link";
 import { BiMenu, BiX } from "react-icons/bi";
-import { FiGithub } from "react-icons/fi";
 import styled from "styled-components";
 
+import { ButtonTertiary } from "@/components/Button";
+import Sparkles from "@/components/icons/Sparkles";
 import ResponsiveNav from "@/components/ResponsiveNav";
 import { mobile, tablet } from "@/constants/breakpoints";
 import { useModal } from "@/context/ModalContext";
@@ -24,15 +25,13 @@ const NavLinksAndButton = () => {
           Docs
         </S.NavLink>
         <S.NavLink
-          href={"https://github.com/kurtosis-tech/kardinal-playground/"}
+          href={"https://github.com/kurtosis-tech/kardinal"}
           target="_blank"
           onClick={() =>
-            analytics.track("BUTTON_CLICK", {
-              analyticsId: "link_nav_playground",
-            })
+            analytics.track("BUTTON_CLICK", { analyticsId: "link_nav_github" })
           }
         >
-          Playground
+          GitHub
         </S.NavLink>
         <S.NavLink
           href={"https://discuss.kardinal.dev"}
@@ -50,19 +49,17 @@ const NavLinksAndButton = () => {
         >
           Blog
         </S.NavLink>
-        <S.NavLink
-          $emphasis
-          href={"https://github.com/kurtosis-tech/kardinal"}
+        <ButtonTertiary
+          analyticsId="button_nav_playground"
+          href="https://github.com/kurtosis-tech/kardinal-playground"
+          rel="noopener noreferrer"
           target="_blank"
-          onClick={() =>
-            analytics.track("BUTTON_CLICK", { analyticsId: "link_nav_github" })
-          }
+          iconRight={<Sparkles size={16} />}
         >
-          <FiGithub size={18} style={{ marginRight: 4 }} />
-          View on Github
-        </S.NavLink>
+          Try in Playground
+        </ButtonTertiary>
       </S.NavItemsWrapper>
-    </ResponsiveNav>
+    </ResponsiveNav >
   );
 };
 
@@ -159,7 +156,7 @@ namespace S {
     }
   `;
 
-  export const NavLink = styled(Link)<{ $emphasis?: boolean }>`
+  export const NavLink = styled(Link) <{ $emphasis?: boolean }>`
     align-items: center;
     display: flex;
     gap: 4px;
@@ -176,7 +173,7 @@ namespace S {
     &:hover {
       transform: translateY(-2px);
       color: ${({ $emphasis }) =>
-        $emphasis ? "var(--brand-secondary)" : "var(--brand-primary)"};
+      $emphasis ? "var(--brand-secondary)" : "var(--brand-primary)"};
     }
   `;
 

website/shell.nix

@@ -1,7 +1,8 @@
-{ pkgs ? import <nixpkgs> {} }:
-
-pkgs.mkShell {
-  buildInputs = [
-    pkgs.bun
-  ];
-}
+{pkgs ? import <nixpkgs> {}}:
+with pkgs;
+  mkShell {
+    buildInputs = [
+      bun
+      nodejs
+    ];
+  }