diff --git a/src/app/[lang]/pricing/Card.module.css b/src/app/[lang]/pricing/Card.module.css index 5c5d819..01bb756 100644 --- a/src/app/[lang]/pricing/Card.module.css +++ b/src/app/[lang]/pricing/Card.module.css @@ -2,10 +2,6 @@ padding-top: 24px !important; } -.icon { - margin-right: 16px; -} - .mo { font-size: 1.25rem; } diff --git a/src/app/[lang]/pricing/Card.tsx b/src/app/[lang]/pricing/Card.tsx index f5be8c6..4ef5d54 100644 --- a/src/app/[lang]/pricing/Card.tsx +++ b/src/app/[lang]/pricing/Card.tsx @@ -1,5 +1,4 @@ import { Card as GCard, Divider, Spacer, Text } from "@geist-ui/react"; -import Check from "@geist-ui/react-icons/check"; import React from "react"; import styles from "./Card.module.css"; @@ -7,10 +6,8 @@ import { Dictionary } from "@/dictionaries"; export interface CardProps extends React.HTMLProps { d: Dictionary; - body?: React.ReactElement; cta?: React.ReactElement; - extra?: React.ReactElement; - features?: (string | React.ReactElement)[]; + features?: React.ReactElement[]; header?: string | React.ReactElement; price?: string | React.ReactElement; subtitle?: React.ReactElement; @@ -19,17 +16,7 @@ export interface CardProps extends React.HTMLProps { } export function Card(props: CardProps): React.ReactElement { - const { - cta, - header, - features, - extra, - price, - title, - subtitle, - body, - footer, - } = props; + const { cta, header, features, price, title, subtitle, footer } = props; const d = props.d.pricing; return ( @@ -59,29 +46,8 @@ export function Card(props: CardProps): React.ReactElement { - {extra} + {features} -
- - {d.cards.what_you_get} - - - {features?.map((f, i) => ( -
-
-
- -
- {f} -
- -
- ))} -
- - {body} - - {footer && } {footer &&
{footer}
} ); diff --git a/src/app/[lang]/pricing/Commercial.tsx b/src/app/[lang]/pricing/Commercial.tsx index ba8ecb2..d0b1ea0 100644 --- a/src/app/[lang]/pricing/Commercial.tsx +++ b/src/app/[lang]/pricing/Commercial.tsx @@ -1,10 +1,9 @@ import React from "react"; -import { Check, Info } from "@geist-ui/react-icons"; import { ProductCard, ProductCardProps } from "./ProductCard"; -import { Spacer, Text } from "@geist-ui/react"; -import styles from "./Card.module.css"; +import { Text } from "@geist-ui/react"; import Markdown from "marked-react"; import { SpanRenderer } from "@/components/Markdown"; +import { Features } from "./Features"; export function Commercial( props: Omit @@ -14,52 +13,30 @@ export function Commercial( return ( - - {d.what_need_to_do} - - -
-
- -
- - - {d.purchase_server} - - -
- - - } features={[ - - {d.unlimited_emails} - , - - {d.bulk} - , - d.no_data_reacher, - - {d.support} - , - - {d.terms} - , + , + , + , ]} - footer={ -
-
- -
- - - {d.free_trial} - - -
- } + ctaInFooter header={ {d.overtitle} diff --git a/src/app/[lang]/pricing/Features.module.css b/src/app/[lang]/pricing/Features.module.css new file mode 100644 index 0000000..bf2709e --- /dev/null +++ b/src/app/[lang]/pricing/Features.module.css @@ -0,0 +1,3 @@ +.icon { + margin-right: 16px; +} diff --git a/src/app/[lang]/pricing/Features.tsx b/src/app/[lang]/pricing/Features.tsx new file mode 100644 index 0000000..285a17b --- /dev/null +++ b/src/app/[lang]/pricing/Features.tsx @@ -0,0 +1,38 @@ +import { Spacer, Text } from "@geist-ui/react"; +import React from "react"; + +import styles from "./Features.module.css"; +import { Check } from "@geist-ui/react-icons"; +import Markdown from "marked-react"; +import { SpanRenderer } from "@/components/Markdown"; + +export function Features({ + features, + title, +}: { + features: string[]; + title: string; +}) { + return ( + <> + + {title} + + + {features?.map((f, i) => ( +
+
+
+ +
+ + {f} + +
+ +
+ ))} + + + ); +} diff --git a/src/app/[lang]/pricing/ProductCard.tsx b/src/app/[lang]/pricing/ProductCard.tsx index 7ac1652..829332c 100644 --- a/src/app/[lang]/pricing/ProductCard.tsx +++ b/src/app/[lang]/pricing/ProductCard.tsx @@ -13,6 +13,7 @@ import { DLink } from "@/components/DLink"; export interface ProductCardProps { d: Dictionary; + ctaInFooter?: boolean; currency: string; isLoggedIn: boolean; product: ProductWithPrice; @@ -20,7 +21,7 @@ export interface ProductCardProps { extra?: React.ReactElement; header?: React.ReactElement; footer?: React.ReactElement; - features?: (string | React.ReactElement)[]; + features?: React.ReactElement[]; subtitle?: React.ReactElement; ctaLabel: string; } @@ -31,6 +32,8 @@ export function ProductCard({ product, subscription, ctaLabel, + ctaInFooter, + footer, ...props }: ProductCardProps): React.ReactElement { const [priceIdLoading, setPriceIdLoading] = useState(); @@ -81,7 +84,7 @@ export function ProductCard({ minimumFractionDigits: 0, }).format(price.unit_amount / 100); - const b = ( + const ctaButton = (