feat: replace email form with demo link

kurtosis-tech · Sep 4, 2024 · ba57bc0 · ba57bc0
1 parent 80992a6
commit ba57bc0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 12 deletions.
diff --git a/website/components/CTAButtons.tsx b/website/components/CTAButtons.tsx
@@ -1,15 +1,24 @@
 "use client";
-import { FiGithub } from "react-icons/fi";
+import { FiCalendar, FiGithub } from "react-icons/fi";
 import styled from "styled-components";
 
-import { ButtonTertiary } from "@/components/Button";
-import EmailCapture from "@/components/EmailCapture";
+import { ButtonPrimary, ButtonTertiary } from "@/components/Button";
 import { mobile } from "@/constants/breakpoints";
 
 const CTAButtons = () => {
   return (
     <S.CTAButtons>
-      <ButtonTertiary 
+      <ButtonPrimary
+        analyticsId="button_hero_get_demo"
+        href="https://calendly.com/d/cqhd-tgj-vmc/45-minute-meeting"
+        rel="noopener noreferrer"
+        target="_blank"
+        iconLeft={<FiCalendar size={18} />}
+        size="lg"
+      >
+        Get a Demo
+      </ButtonPrimary>
+      <ButtonTertiary
         analyticsId="button_hero_github"
         href="https://github.com/kurtosis-tech/kardinal"
         rel="noopener noreferrer"
@@ -18,8 +27,7 @@ const CTAButtons = () => {
         size="lg"
       >
         View on GitHub
-      </ButtonTertiary >
-      <EmailCapture buttonAnalyticsId="button_footer_join_waitlist" />
+      </ButtonTertiary>
     </S.CTAButtons>
   );
 };
@@ -28,7 +36,7 @@ namespace S {
   export const CTAButtons = styled.div`
     margin-top: 16px;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
     gap: 16px;
     @media ${mobile} {

diff --git a/website/components/CTASmall.tsx b/website/components/CTASmall.tsx
@@ -27,7 +27,7 @@ const CTASmall = ({
         )}
         <S.Content>
           <S.CTAHeading>{heading}</S.CTAHeading>
-          {children}
+          <S.ChildrenWrapper>{children}</S.ChildrenWrapper>
         </S.Content>
       </S.CTASmall>
     </Section>
@@ -102,6 +102,13 @@ namespace S {
       }
     }
   `;
+  export const ChildrenWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    align-items: center;
+    justify-content: center;
+  `;
 }
 
 export default CTASmall;
diff --git a/website/components/LandingPageTemplate.tsx b/website/components/LandingPageTemplate.tsx
@@ -1,10 +1,11 @@
 import { ReactNode } from "react";
+import { FiCalendar } from "react-icons/fi";
 
+import { ButtonPrimary } from "@/components/Button";
 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";
 import VideoStepper from "@/components/VideoStepper";
 // assets
@@ -98,10 +99,19 @@ const LandingPageTemplate = ({
 
       <CTASmall heading={"Want a demo?"} myPrecious={iAmTheLordOfTheRings}>
         <TextBase>
-          Sign up below and we’ll contact you to get you <br data-desktop /> a
-          personalized demo of Kardinal.
+          Use the link below to book <br data-desktop /> a personalized demo of
+          Kardinal.
         </TextBase>
-        <EmailCapture buttonAnalyticsId="button_footer_join_waitlist" />
+        <ButtonPrimary
+          analyticsId="button_cta_get_demo"
+          href="https://calendly.com/d/cqhd-tgj-vmc/45-minute-meeting"
+          rel="noopener noreferrer"
+          target="_blank"
+          iconLeft={<FiCalendar size={18} />}
+          size="lg"
+        >
+          Get a Demo
+        </ButtonPrimary>
       </CTASmall>
     </>
   );