feat: website changes for launch

website/components/Button.tsx

@@ -4,7 +4,6 @@ import { ButtonHTMLAttributes, useEffect, useState } from "react";
 import { BiCheck, BiLogoGithub, BiRightArrowAlt } from "react-icons/bi";
 import styled, { css, keyframes } from "styled-components";
 
-import { mobile } from "@/constants/breakpoints";
 import analytics from "@/lib/analytics";
 
 interface StyledProps {
@@ -103,24 +102,11 @@ const secondaryButtonStyles = css<StyledProps>`
 `;
 
 const tertiaryButtonStyles = css<StyledProps>`
-  color: #419bf9;
-  font-size: 21px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 32px; /* 152.381% */
-  display: flex;
-  align-items: center;
-  transform: translateY(0);
-  transition: all 0.2s ease-in-out;
+  ${secondaryButtonStyles}
+  color: var(--foreground);
 
   &:hover {
-    opacity: 0.8;
-    transform: translateY(-2px);
-  }
-
-  @media ${mobile} {
-    font-size: 16px;
-    line-height: 24px;
+    color: var(--brand-primary);
   }
 `;
 
@@ -231,31 +217,39 @@ const ButtonImpl = ({
   );
 };
 
+export const ButtonPrimary = (props: Props) => (
+  <ButtonImpl
+    {...props}
+    variant="primary"
+    Component={props.href != null ? PrimaryLink : PrimaryButton}
+  />
+);
+
+export const ButtonSecondary = (props: Props) => (
+  <ButtonImpl
+    {...props}
+    variant="secondary"
+    Component={props.href != null ? SecondaryLink : SecondaryButton}
+  />
+);
+
+export const ButtonTertiary = (props: Props) => (
+  <ButtonImpl
+    {...props}
+    variant="tertiary"
+    Component={props.href != null ? TertiaryLink : TertiaryButton}
+  />
+);
+
+export const ButtonCodespaces = (props: Props) => (
+  <ButtonImpl {...props} variant="codespaces" Component={CodespacesLink} />
+);
+
 const Button = {
-  Primary: (props: Props) => (
-    <ButtonImpl
-      {...props}
-      variant="primary"
-      Component={props.href != null ? PrimaryLink : PrimaryButton}
-    />
-  ),
-  Secondary: (props: Props) => (
-    <ButtonImpl
-      {...props}
-      variant="secondary"
-      Component={props.href != null ? SecondaryLink : SecondaryButton}
-    />
-  ),
-  Tertiary: (props: Props) => (
-    <ButtonImpl
-      {...props}
-      variant="tertiary"
-      Component={props.href != null ? TertiaryLink : TertiaryButton}
-    />
-  ),
-  Codespaces: (props: Props) => (
-    <ButtonImpl {...props} variant="codespaces" Component={CodespacesLink} />
-  ),
+  Primary: ButtonPrimary,
+  Secondary: ButtonSecondary,
+  Tertiary: ButtonTertiary,
+  Codespaces: ButtonCodespaces,
 };
 
 export default Button;

website/components/CTAButtons.tsx

@@ -0,0 +1,41 @@
+"use client";
+import styled from "styled-components";
+
+import { ButtonPrimary, ButtonTertiary } from "@/components/Button";
+import { mobile } from "@/constants/breakpoints";
+
+const CTAButtons = () => {
+  return (
+    <S.CTAButtons>
+      <ButtonPrimary
+        analyticsId="button_hero_github"
+        href="https://github.com/kurtosis-tech/kardinal"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        View on GitHub
+      </ButtonPrimary>
+      <ButtonTertiary
+        analyticsId="button_hero_playground"
+        href="https://github.com/kurtosis-tech/kardinal-playground"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Try in playground
+      </ButtonTertiary>
+    </S.CTAButtons>
+  );
+};
+
+namespace S {
+  export const CTAButtons = styled.div`
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    @media ${mobile} {
+      flex-direction: column;
+    }
+  `;
+}
+
+export default CTAButtons;

website/components/DocsLayout.tsx

@@ -37,7 +37,7 @@ namespace S {
     display: flex;
     flex-direction: column;
     gap: 24px;
-    padding: 224px 0 48px 0;
+    padding: 160px 0 48px 0;
     width: 100%;
     max-width: 827px;
     margin: 0 auto;

website/components/DocsNav.tsx

@@ -41,9 +41,7 @@ const navItems: NavItem[] = [
   {
     path: "references",
     title: "References",
-    children: [
-      { path: "comparisons", title: "Comparison to alternatives" },
-    ],
+    children: [{ path: "comparisons", title: "Comparison to alternatives" }],
   },
 ];
 
@@ -102,7 +100,7 @@ const DocsNav = () => {
 
 namespace S {
   export const NavItemsWrapper = styled.div`
-    padding-top: 240px;
+    padding-top: 172px;
     @media ${mobile} {
       padding-top: 0;
     }

website/components/EmailCapture.tsx

@@ -21,9 +21,6 @@ const EmailCapture = ({
     // eslint-disable-next-line no-unused-vars
     subscribe: (d: MailchimpFormData) => void,
   ) => {
-    // if (!email.includes("@")) {
-    //   return;
-    // }
     // log some analytics in segment
     // try catch this because people use adblockers, which will cause this call to fail
     // eslint-disable-next-line no-unused-vars
@@ -44,8 +41,8 @@ const EmailCapture = ({
     // do the actual mailchimp submission
     subscribe({
       EMAIL: email,
-      COMMS: "NOT_COLLECTED", // this form does not have these inputs
-      FEATURES: "NOT_COLLECTED", // this form does not have these inputs
+      COMMS: "DEMO",
+      FEATURES: "DEMO",
       UTM_SOURCE: utmParams.utm_source || "NOT_SET",
       UTM_MEDIUM: utmParams.utm_medium || "NOT_SET",
       UTM_CAMP: utmParams.utm_campaign || "NOT_SET",
@@ -87,8 +84,8 @@ const EmailCapture = ({
                   // @ts-ignore
                   status === "success" && (
                     <S.SuccessMessage>
-                      Success! You’ve been added to our list of beta users. Keep
-                      an eye on your inbox!
+                      Success! We will reach out soon, so keep an eye on your
+                      inbox!
                     </S.SuccessMessage>
                   )
                 }

website/components/EmailInput.tsx

@@ -39,7 +39,7 @@ const EmailInput = ({
         loading={isLoading}
         isSuccess={isSuccess}
       >
-        Join the beta
+        Get a demo
       </S.SubmitButton>
     </S.Fieldset>
   );

website/components/LandingPageTemplate.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from "react";
 
 import Content from "@/components/Content";
 import CTA from "@/components/CTA";
+import CTAButtons from "@/components/CTAButtons";
 import CTASmall from "@/components/CTASmall";
 import EmailCapture from "@/components/EmailCapture";
 import { TextBase } from "@/components/Text";
@@ -39,7 +40,7 @@ const LandingPageTemplate = ({
     <>
       <CTA imageUrl={null} buttonText={null} fullHeight heading={heading}>
         <TextBase>{children}</TextBase>
-        <EmailCapture buttonAnalyticsId="button_hero_join_waitlist" />
+        <CTAButtons />
       </CTA>
       <Content
         negativeTopOffset
@@ -90,11 +91,19 @@ const LandingPageTemplate = ({
         fullWidthImageUrl={architectureDiagram}
         mobileFullWidthImageUrl={architectureDiagramMobile}
       >
-        Kardinal integrates with your existing distributed tracing, and will handle the heavy lifting of configuring a service mesh for traffic routing for you.
+        Kardinal integrates with your existing distributed tracing, and will
+        handle the heavy lifting of configuring a service mesh for traffic
+        routing for you.
       </Content>
 
-      <CTASmall heading={heading} myPrecious={iAmTheLordOfTheRings}>
-        <TextBase>{children}</TextBase>
+      <CTASmall
+        heading={
+          <>
+            Want a demo? Sign up <em>here</em>
+          </>
+        }
+        myPrecious={iAmTheLordOfTheRings}
+      >
         <EmailCapture buttonAnalyticsId="button_footer_join_waitlist" />
       </CTASmall>
     </>

website/components/Nav/index.tsx

@@ -1,35 +1,15 @@
 "use client";
 import Image from "next/image";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { BiBookOpen, BiChat, BiMenu, BiRss, BiX } from "react-icons/bi";
-import { FiGithub } from "react-icons/fi";
-import { TbPrompt, TbSparkles } from "react-icons/tb";
+import { BiMenu, BiX } from "react-icons/bi";
 import styled from "styled-components";
 
-import Banner from "@/components/Banner";
-import Button from "@/components/Button";
-import Responsive from "@/components/Responsive";
 import ResponsiveNav from "@/components/ResponsiveNav";
 import { mobile, tablet } from "@/constants/breakpoints";
 import { useModal } from "@/context/ModalContext";
 import analytics from "@/lib/analytics";
 import kardinalLogo from "@/public/kardinal-orange.png";
 
-const WaitlistButton = () => {
-  const { toggleModal } = useModal();
-  return (
-    <Button.Secondary
-      analyticsId="button_nav_join_waitlist"
-      onClick={toggleModal}
-      style={{ justifyContent: "flex-start" }}
-    >
-      <TbSparkles size={18} />
-      Join the beta
-    </Button.Secondary>
-  );
-};
-
 const NavLinksAndButton = () => {
   return (
     <ResponsiveNav>
@@ -40,7 +20,6 @@ const NavLinksAndButton = () => {
             analytics.track("BUTTON_CLICK", { analyticsId: "link_nav_docs" })
           }
         >
-          <BiBookOpen size={18} />
           Docs
         </S.NavLink>
         <S.NavLink
@@ -52,7 +31,6 @@ const NavLinksAndButton = () => {
             })
           }
         >
-          <TbPrompt size={18} />
           Playground
         </S.NavLink>
         <S.NavLink
@@ -62,7 +40,6 @@ const NavLinksAndButton = () => {
             analytics.track("BUTTON_CLICK", { analyticsId: "link_nav_github" })
           }
         >
-          <FiGithub size={15} style={{ marginRight: "3px" }} />
           Github
         </S.NavLink>
         <S.NavLink
@@ -71,7 +48,6 @@ const NavLinksAndButton = () => {
             analytics.track("BUTTON_CLICK", { analyticsId: "link_nav_forum" })
           }
         >
-          <BiChat size={18} />
           Forum
         </S.NavLink>
         <S.NavLink
@@ -80,22 +56,17 @@ const NavLinksAndButton = () => {
             analytics.track("BUTTON_CLICK", { analyticsId: "link_nav_blog" })
           }
         >
-          <BiRss size={18} />
           Blog
         </S.NavLink>
-        <WaitlistButton />
       </S.NavItemsWrapper>
     </ResponsiveNav>
   );
 };
 
 const Nav = () => {
   const { toggleNav, isNavOpen } = useModal();
-  const pathname = usePathname();
-  const isDocs = pathname.includes("/docs");
   return (
     <S.Nav>
-      {isDocs && <Banner />}
       <S.Container>
         <S.Wordmark href={"/"}>
           <S.LogoImage
@@ -108,9 +79,6 @@ const Nav = () => {
           <S.LogoText>Kardinal</S.LogoText>
         </S.Wordmark>
         <S.NavSpacer />
-        <Responsive.Mobile>
-          <WaitlistButton />
-        </Responsive.Mobile>
         <S.MobileNavButton onClick={toggleNav}>
           {isNavOpen ? <BiX size={24} /> : <BiMenu size={24} />}
         </S.MobileNavButton>