feat: variant of calculator page with share section (#207)

New calculator page variant located at `/savings-calculator` with a "share kardinal" section and updated Demo CTA ![image](https://github.com/user-attachments/assets/c4456f48-5eea-49de-b31a-89464a68b008)
kurtosis-tech · Sep 11, 2024 · f4242f2 · f4242f2
1 parent b5d2b66
commit f4242f2
Show file tree

Hide file tree

Showing 10 changed files with 332 additions and 34 deletions.
diff --git a/website/app/layout.tsx b/website/app/layout.tsx
@@ -9,7 +9,7 @@ import Main from "@/components/Main";
 import Modal from "@/components/Modal";
 import Nav from "@/components/Nav";
 import SegmentAnalytics from "@/components/SegmentAnalytics";
-import { CalculatorProvider } from "@/context/CalcualtorContext";
+import { CalculatorProvider } from "@/context/CalculatorContext";
 import { ModalProvider } from "@/context/ModalContext";
 import { VotingProvider } from "@/context/VotingContext";
 

diff --git a/website/app/savings-calculator/page.tsx b/website/app/savings-calculator/page.tsx
@@ -0,0 +1,49 @@
+import { Metadata } from "next";
+
+import Calculator from "@/components/Calculator";
+import CTA from "@/components/CTA";
+import CTADemo from "@/components/CTADemo";
+import SavingsGraph from "@/components/SavingsGraph";
+import ShareKardinal from "@/components/ShareKardinal";
+import Spacer from "@/components/Spacer";
+import { TextBase } from "@/components/Text";
+
+export const metadata: Metadata = {
+  title: "Kardinal | Savings Calculator",
+  description: "Calculate exactly how much your team could save with Kardinal",
+};
+
+const Page = () => {
+  return (
+    <>
+      <CTA
+        style={{ maxHeight: 540, minHeight: 540 }}
+        imageUrl={null}
+        buttonText={null}
+        fullHeight
+        heading={
+          <>
+            Save <em>~90%</em> on dev sandbox costs with <em>Kardinal</em>
+          </>
+        }
+      >
+        <TextBase>
+          Check out our calculator below to see <br data-desktop />{" "}
+          <em>exactly how much</em> your team could save.
+        </TextBase>
+      </CTA>
+
+      <Calculator />
+
+      <Spacer height={48} />
+
+      <SavingsGraph />
+
+      <ShareKardinal />
+
+      <CTADemo />
+    </>
+  );
+};
+
+export default Page;
diff --git a/website/components/Button.tsx b/website/components/Button.tsx
@@ -64,6 +64,7 @@ const primaryButtonStyles = css<StyledProps>`
   transform: translateY(0);
   background-size: 100%;
   transition: all 0.2s ease-in-out;
+  flex-shrink: 0;
 
   &:hover:not(:disabled) {
     transform: translateY(-2px);

diff --git a/website/components/CTADemo.tsx b/website/components/CTADemo.tsx
@@ -16,9 +16,10 @@ const CTADemo = () => {
       <S.CTADemo>
         <S.Content>
           <S.TextWrapper>
-            <Heading.H2>Fancy a demo?</Heading.H2>
+            <Heading.H2>Want to see Kardinal in action?</Heading.H2>
             <Text.Base>
-              Schedule some time for a personalized demo of Kardinal.
+              Use the link on the right to see how you can save your team on
+              both cost and maintenance overhead:
             </Text.Base>
           </S.TextWrapper>
           <Button.Primary
@@ -40,20 +41,20 @@ const S = {
   CTADemo: styled.div`
     display: flex;
     width: 100%;
-    padding: 64px 0;
+    padding: 92px 0;
     align-items: center;
     justify-content: center;
+    background: url(/bg-static.svg);
+    background-position-y: -64px;
   `,
 
   Content: styled.div`
-    max-width: 1038px;
     border-radius: 12px;
-    background-color: rgba(252, 160, 97, 0.08);
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 48px;
+    padding: 48px 0;
     gap: 4px;
 
     @media ${mobile} {
@@ -67,6 +68,7 @@ const S = {
     display: flex;
     flex-direction: column;
     gap: 4px;
+    max-width: 675px;
     @media ${mobile} {
       gap: 8px;
     }

diff --git a/website/components/Calculator/CalculatorInputs.tsx b/website/components/Calculator/CalculatorInputs.tsx
@@ -9,7 +9,7 @@ import { ResourceRequirement } from "@/constants/calculator";
 import {
   CostInterval,
   useCalculatorContext,
-} from "@/context/CalcualtorContext";
+} from "@/context/CalculatorContext";
 
 const resourceRequirementsOptions: ResourceRequirement[] = [
   ResourceRequirement.MICRO,

diff --git a/website/components/Calculator/index.tsx b/website/components/Calculator/index.tsx
@@ -1,15 +1,12 @@
 "use client";
 
-import { useState } from "react";
 import styled from "styled-components";
 
 import Section from "@/components/Section";
-import { ResourceRequirement } from "@/constants/calculator";
 import {
   CostInterval,
   useCalculatorContext,
-} from "@/context/CalcualtorContext";
-import analytics from "@/lib/analytics";
+} from "@/context/CalculatorContext";
 
 import Spacer from "../Spacer";
 
@@ -22,15 +19,6 @@ const WORKING_HOURS_PER_COST_INTERVAL: Record<CostInterval, number> = {
   Year: 1920, // 48 working weeks per year
 };
 
-const HOURLY_COST_PER_RESOURCE_REQUIREMENT: Record<
-  ResourceRequirement,
-  number
-> = {
-  [ResourceRequirement.MICRO]: 0.0116,
-  [ResourceRequirement.SMALL]: 0.023,
-  [ResourceRequirement.MEDIUM]: 0.0464,
-};
-
 const currencyFormatter = new Intl.NumberFormat("en-US", {
   style: "currency",
   currency: "USD",
@@ -39,16 +27,9 @@ const currencyFormatter = new Intl.NumberFormat("en-US", {
 });
 
 const Calculator = () => {
-  const { engineers, microservices, resourceRequirement, costInterval } =
+  const { costInterval, costBefore, costAfter, savings, savingsPercent } =
     useCalculatorContext();
 
-  const costPerServiceHour =
-    HOURLY_COST_PER_RESOURCE_REQUIREMENT[resourceRequirement];
-
-  const costBefore = microservices * engineers * costPerServiceHour;
-  const costAfter = (microservices + engineers) * costPerServiceHour;
-  const savings = costBefore - costAfter;
-
   return (
     <Section>
       <S.Title>
@@ -92,7 +73,7 @@ const Calculator = () => {
           values={[
             {
               label: "Percentage of previous cloud costs saved",
-              value: 100 - Math.round((costAfter / costBefore) * 100) + "%",
+              value: `${savingsPercent}%`,
             },
             {
               label: `Cost savings per ${costInterval.toLowerCase()}*`,

diff --git a/website/components/SavingsGraph.tsx b/website/components/SavingsGraph.tsx
@@ -22,12 +22,11 @@ const SavingsGraph = () => {
         />
         <S.Content>
           <Heading.H2>
-            Don&apos;t duplicate - <em>consolidate</em> your pre-production
-            clusters.
+            Savings that <em>scale up</em> alongside your team.
           </Heading.H2>
           <Text.Base>
-            Replace your dev sandboxes with Kardinal and get easier DX and lower
-            costs.
+            Kardinal dev sandboxes improve both your <br data-desktop />
+            team’s DX and your infra savings as you grow.
           </Text.Base>
           <div>
             <ButtonPrimary