diff --git a/web/components/pricing-card/index.tsx b/web/components/pricing-card/index.tsx
index 126a6ba9..f0b56615 100644
--- a/web/components/pricing-card/index.tsx
+++ b/web/components/pricing-card/index.tsx
@@ -1,19 +1,23 @@
import styled from "@emotion/styled";
-import BlankArea from "components/blank-area";
-import Icon from "components/icon";
-import LandingpageText from "components/landingpage/text";
import Link from "next/link";
import React, { useCallback } from "react";
import { Button, Flex, Text } from "rebass";
+
+import BlankArea from "components/blank-area";
+import Icon from "components/icon";
+import LandingpageText from "components/landingpage/text";
import { usePopupContext } from "utils/context/PopupContext";
import { LandingpageUrls } from "utils/landingpage/constants";
import { media } from "utils/styled/media";
import { ThemeInterface } from "utils/styled/theme";
-import PricingCTAButton from "components/pricing-cta-button";
function PricingCard(props: {
type: "paid" | "none-paid";
+ title: string;
+ price: string;
+ per?: string;
planList: string[];
+ button: React.ReactChild;
}) {
const { addPopup, removePopup } = usePopupContext();
@@ -51,49 +55,10 @@ function PricingCard(props: {
});
}, []);
- const handleClickPaidPlan = useCallback(() => {
- addPopup({
- title: "",
- element: (
-
- removePopup()}
- />
-
-
- Woopsy.
-
-
-
- Grida paid plans are disabled temporarily. Meanwhile, you can use
- our free plan which basically does the same.
-
-
- Sign up
-
-
- here.
-
-
-
- ),
- });
- }, []);
-
return (
-
- {props.type != "none-paid" ? "For you team" : "For you"}
-
+ {props.title}
{props.type === "none-paid" && (
-
- {props.type != "none-paid" ? "$20" : "$0"}
-
- {props.type != "none-paid" && per seat/mo}
+ {props.price}
+ {props.per && {props.per}}
@@ -120,22 +83,7 @@ function PricingCard(props: {
))}
- {props.type === "none-paid" ? (
-
- Start now
-
- ) : (
- props.type != "none-paid" && handleClickPaidPlan()}
- >
- Start 14 Day Trial
-
- )}
+ {props.button}
);
}
@@ -180,18 +128,6 @@ const Seat = styled(LandingpageText)`
margin-left: 10px;
`;
-const CardCTAButton = styled(Button)`
- margin-top: auto;
- border-radius: 4px;
- ${p => {
- if (p.type === "paid") {
- return {
- backgroundColor: "#D2D2D2",
- };
- }
- }}
-`;
-
const PlanDescription = styled(Flex)`
flex-direction: column;
diff --git a/web/components/pricing-cta-button/index.tsx b/web/components/pricing-cta-button/index.tsx
index 0ffadac9..d7633c5a 100644
--- a/web/components/pricing-cta-button/index.tsx
+++ b/web/components/pricing-cta-button/index.tsx
@@ -1,16 +1,19 @@
-import Button from "components/mdx/button";
import React from "react";
+
+import Button from "components/mdx/button";
import { LandingpageUrls } from "utils/landingpage/constants";
function PricingCTAButton(props) {
const { ...style } = props;
- const handleSignupClick = () => {
- window.location.href = LandingpageUrls.signup_with_return;
+ const movetoDocs = () => {
+ window.location.href = LandingpageUrls.signup_with_custom_return(
+ "https://grida.co/docs/getting-started/intro",
+ );
};
return (
-