From 6674c19e87d3a628a2a305f9d5db48e365189b0c Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Sun, 5 May 2024 00:19:48 +0800 Subject: [PATCH] feat: add website pricing page --- package.json | 3 +- packages/react/tsconfig.json | 2 + pnpm-lock.yaml | 9 +- website/docusaurus.config.js | 1 + website/package.json | 4 +- website/src/pages/pricing.tsx | 198 ++++++++++++++++++++++++++++++++++ website/tsconfig.json | 5 +- 7 files changed, 218 insertions(+), 4 deletions(-) create mode 100644 website/src/pages/pricing.tsx diff --git a/package.json b/package.json index c670fa6..609bd10 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "build:openapi": "ts-node --project ./tsconfig.base.json ./scripts/build-openapi-schema.ts && cd packages/client-sdk && pnpm generate:client", "check:type": "pnpm -r check:type", "release": "release-it", - "release:patch": "release-it -i patch" + "release:patch": "release-it -i patch", + "release:packages": "pnpm -r --filter \"./packages/*\" publish --registry=https://registry.npmjs.com/" }, "devDependencies": { "@release-it/conventional-changelog": "^8.0.1", diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json index a7136bf..0f7e22e 100644 --- a/packages/react/tsconfig.json +++ b/packages/react/tsconfig.json @@ -4,6 +4,8 @@ "module": "ESNext", "outDir": "./lib", "baseUrl": ".", + "declaration": true, + "declarationMap": true, "noEmit": false, }, "include": ["./src/**/*"] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 85fb014..54730d9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -659,6 +659,9 @@ importers: react-vertical-timeline-component: specifier: ^3.6.0 version: 3.6.0(react@17.0.2) + tianji-client-sdk: + specifier: workspace:^ + version: link:../packages/client-sdk devDependencies: '@docusaurus/module-type-aliases': specifier: 2.4.3 @@ -666,6 +669,9 @@ importers: '@tsconfig/docusaurus': specifier: ^1.0.5 version: 1.0.5 + '@types/react': + specifier: ^18.2.22 + version: 18.2.78 '@types/react-slick': specifier: ^0.23.11 version: 0.23.11 @@ -20803,7 +20809,7 @@ packages: dependencies: lilconfig: 2.1.0 postcss: 8.4.33 - ts-node: 10.9.1(@types/node@18.17.12)(typescript@5.4.5) + ts-node: 10.9.1(@types/node@18.17.12)(typescript@4.7.4) yaml: 2.3.2 dev: true @@ -26311,6 +26317,7 @@ packages: typescript: 5.4.5 v8-compile-cache-lib: 3.0.1 yn: 3.1.1 + dev: false /ts-pattern@4.3.0: resolution: {integrity: sha512-pefrkcd4lmIVR0LA49Imjf9DYLK8vtWhqBPA3Ya1ir8xCW0O2yjL9dsCVvI7pCodLC5q7smNpEtDR2yVulQxOg==} diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index dd672d3..a55c256 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -84,6 +84,7 @@ const config = { position: 'left', label: 'Docs', }, + { to: '/pricing', label: 'Pricing', position: 'left' }, { to: '/changelog', label: 'Changelog', position: 'left' }, { to: '/api', label: 'API', position: 'left' }, { diff --git a/website/package.json b/website/package.json index e5193c1..2dbbea5 100644 --- a/website/package.json +++ b/website/package.json @@ -27,11 +27,13 @@ "react-icons": "^4.12.0", "react-responsive-carousel": "^3.2.23", "react-slick": "^0.29.0", - "react-vertical-timeline-component": "^3.6.0" + "react-vertical-timeline-component": "^3.6.0", + "tianji-client-sdk": "workspace:^" }, "devDependencies": { "@docusaurus/module-type-aliases": "2.4.3", "@tsconfig/docusaurus": "^1.0.5", + "@types/react": "^18.2.22", "@types/react-slick": "^0.23.11", "@types/react-vertical-timeline-component": "^3.3.6", "autoprefixer": "^10.4.16", diff --git a/website/src/pages/pricing.tsx b/website/src/pages/pricing.tsx new file mode 100644 index 0000000..3e93934 --- /dev/null +++ b/website/src/pages/pricing.tsx @@ -0,0 +1,198 @@ +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import Layout from '@theme/Layout'; +import React, { useState } from 'react'; +import { LuCheck } from 'react-icons/lu'; +import { Button, Input, message } from 'antd'; +import Link from '@docusaurus/Link'; +import { submitSurvey, initOpenapiSDK } from 'tianji-client-sdk'; + +initOpenapiSDK('https://tianji.moonrailgun.com/'); + +export default function Pricing(): JSX.Element { + const { siteConfig } = useDocusaurusContext(); + + return ( + +
+
+
+

+ Pricing +

+

+ Choose the plan that's right for your business. +

+
+
+ + $0 + + / month + + + } + desc="Perfect for personal and enterprises with higher requirements for information control." + features={[ + 'Unlimited users', + 'Unlimited storage', + 'Secure data hosting', + 'Community support', + ]} + button={ + + + + } + /> +
+
+
+
+

+ Cloud Hosting +

+

+ Join the waitlist for our cloud hosting solution. +

+ +
+
+ + + From + + $- + + / month + + + } + desc="Perfect for small to medium-sized businesses which help your business quick start and grow." + features={[ + 'Pay as you need', + 'One click to online', + 'Secure cloud hosting', + 'Email support', + ]} + button={ + + } + /> +
+
+
+ + ); +} + +const emailRegex = + /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/; + +export const Waitlist: React.FC = React.memo(() => { + const [email, setEmail] = useState(''); + const [loading, setLoading] = useState(false); + + const handleSubmit = async () => { + setLoading(true); + if (!emailRegex.test(email)) { + message.warning('Is not a valid email'); + return; + } + + try { + await submitSurvey( + 'clnzoxcy10001vy2ohi4obbi0', + 'clvs1lt2e00dloc4fkg8abb0q', + { + email, + } + ); + message.success( + 'Success, we will contact to you if we publish cloud version' + ); + } catch (err) { + message.error(String(err)); + } + setLoading(false); + }; + + return ( +
+
Email address
+ setEmail(e.target.value)} + /> + +
+ ); +}); +Waitlist.displayName = 'Waitlist'; + +export const PlanBlock: React.FC<{ + title: string; + price: React.ReactNode; + desc: string; + features: string[]; + button: React.ReactNode; +}> = React.memo((props) => { + return ( +
+
+
+

+ {props.title} +

+
+ {props.price} +
+
+

{props.desc}

+
    + {props.features.map((feature, i) => ( +
  • +
    + +
    +

    {feature}

    +
    • + ))} +
+
+
+ {props.button} +
+
+ ); +}); +PlanBlock.displayName = 'PlanBlock'; diff --git a/website/tsconfig.json b/website/tsconfig.json index 5fb7a97..9b77f8a 100644 --- a/website/tsconfig.json +++ b/website/tsconfig.json @@ -3,6 +3,9 @@ "extends": "@tsconfig/docusaurus/tsconfig.json", "compilerOptions": { "baseUrl": ".", - "strict": false + "strict": false, + "paths": { + "@/utils/style": ["../src/client/utils/style"] + } } }