Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: cost calculator #191

Merged
merged 18 commits into from
Sep 7, 2024
Merged

feat: cost calculator #191

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
cd191d9
feat: calculator cards
skylarmb Sep 4, 2024
fd7f45d
Merge remote-tracking branch 'origin/main' into sbrown/calculator
skylarmb Sep 5, 2024
8774222
feat: inputs for calculator section
skylarmb Sep 5, 2024
c7e5b3b
feat: calculator inputs styles
skylarmb Sep 6, 2024
54e5d12
feat: add demo cta to calculator
skylarmb Sep 6, 2024
9d4d097
chore: refactor state management of calculator
skylarmb Sep 6, 2024
9d8fdd0
feat: calculator formulas
skylarmb Sep 6, 2024
cb438ba
Merge remote-tracking branch 'origin/main' into sbrown/calculator
skylarmb Sep 6, 2024
828ae67
chore: fix types imports
skylarmb Sep 6, 2024
95739c2
feat: calculator responsive styles
skylarmb Sep 6, 2024
e1dc903
feat: calculator title line
skylarmb Sep 6, 2024
cdb54dc
feat: calculator savings section
skylarmb Sep 6, 2024
22d96d4
feat: WIP homepage calculator section
skylarmb Sep 6, 2024
af11e17
feat: savings section
skylarmb Sep 7, 2024
a7782af
feat: analytics and mobile styles
skylarmb Sep 7, 2024
4e936db
feat: money emoji and heading size
skylarmb Sep 7, 2024
7652725
fix: add suspense boundary
skylarmb Sep 7, 2024
9e6ec5a
fix: mobile heading size
skylarmb Sep 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion website/.eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@
"simple-import-sort/exports": "error",
"react/react-in-jsx-scope": "off",
"react/jsx-uses-react": "off",
"no-irregular-whitespace": "off"
"no-irregular-whitespace": "off",
"no-unused-vars": "off"
},
"plugins": ["simple-import-sort"],
"ignorePatterns": ["public/", ".next/", "out/"]
Expand Down
56 changes: 56 additions & 0 deletions website/app/calculator/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { FiCalendar } from "react-icons/fi";

import { ButtonPrimary } from "@/components/Button";
import Calculator from "@/components/Calculator";
import CTA from "@/components/CTA";
import CTASmall from "@/components/CTASmall";
import Spacer from "@/components/Spacer";
import { TextBase } from "@/components/Text";

const Page = () => {
return (
<>
<CTA
style={{ maxHeight: 640 }}
imageUrl={null}
buttonText={null}
fullHeight
heading={
<>
Kardinal helps you <em>save money</em> on your infrastructure
</>
}
>
<TextBase>
Replace your dev sandboxes with Kardinal <br data-desktop /> and see
how much money you could save.
</TextBase>
</CTA>

<Calculator />

<Spacer height={48} />

<CTASmall heading={"Want a demo?"}>
<TextBase>
Use the link below to book <br data-desktop /> a personalized demo of
Kardinal.
</TextBase>
<ButtonPrimary
analyticsId="button_calculator_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>

<Spacer height={256} />
</>
);
};

export default Page;
10 changes: 8 additions & 2 deletions website/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,18 @@
--white-90: rgba(255, 255, 255, 0.9);
--white-100: #ffffff;

--gray-600: #4b5563;
--gray-200: #E5E7EB;
--gray-400: #9CA3AF;
--gray-100: #F3F4F6;

--blue: #1F56A5;
--blue-light: #58A6FF;

--gray: #525157;
--gray-light: #aaa;
--gray-lightest: #f2f2f2;
--gray-lighter: #f2f2f2;
--gray-lightest: #fafafa;

--black: #000330;
--white: #ffffff;
Expand All @@ -48,7 +54,7 @@
--foreground-light: var(--gray-light);

--foreground-inverted: var(--gray-light);
--foreground-dark-inverted: var(--gray-lightest);
--foreground-dark-inverted: var(--gray-lighter);

--background: var(--white);
--background-light: var(--gray-bg-light, #212121);
Expand Down
15 changes: 9 additions & 6 deletions website/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,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 { ModalProvider } from "@/context/ModalContext";
import { VotingProvider } from "@/context/VotingContext";

Expand Down Expand Up @@ -54,12 +55,14 @@ export default function RootLayout({
<body className={inter.className}>
<ModalProvider>
<VotingProvider>
<StyledComponentsRegistry>
<Nav />
<Main>{children}</Main>
<Footer />
<Modal />
</StyledComponentsRegistry>
<CalculatorProvider>
<StyledComponentsRegistry>
<Nav />
<Main>{children}</Main>
<Footer />
<Modal />
</StyledComponentsRegistry>
</CalculatorProvider>
</VotingProvider>
</ModalProvider>
</body>
Expand Down
5 changes: 4 additions & 1 deletion website/components/CTA.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";
import Image from "next/image";
import { PropsWithChildren, ReactNode } from "react";
import styled from "styled-components";
import styled, { CSSProperties } from "styled-components";

import Heading from "@/components/Heading";
import Section from "@/components/Section";
Expand All @@ -27,6 +27,7 @@ const CTA = ({
fullHeight,
padTop,
padBottom,
style,
}: PropsWithChildren<{
heading?: ReactNode;
buttonText?: null | string;
Expand All @@ -35,13 +36,15 @@ const CTA = ({
fullHeight?: boolean;
padTop?: boolean;
padBottom?: boolean;
style?: CSSProperties;
}>) => {
return (
<S.CTA
$invert={invert}
$fullHeight={fullHeight}
$padTop={padTop}
$padBottom={padBottom}
style={style}
>
<Section>
<S.Content>
Expand Down
Loading