| import React from "react"; | |
| import Head from "next/head"; | |
| import { | |
| Flex, | |
| Stack, | |
| Button, | |
| List, | |
| ThemeIcon, | |
| Text, | |
| Paper, | |
| Badge, | |
| SegmentedControl, | |
| Center, | |
| Tooltip, | |
| } from "@mantine/core"; | |
| import { AiOutlineInfoCircle } from "react-icons/ai"; | |
| import { BsCheck, BsX } from "react-icons/bs"; | |
| import { FaBolt } from "react-icons/fa6"; | |
| import { VscArrowRight, VscInfo } from "react-icons/vsc"; | |
| import Layout from "src/layout/Layout"; | |
| import useUser from "src/store/useUser"; | |
| const purchaseLinks = { | |
| monthly: | |
| "https://herowand.lemonsqueezy.com/checkout/buy/ce30521f-c7cc-44f3-9435-995d3260ba22?media=0&enabled=67805%2C82417", | |
| annual: | |
| "https://herowand.lemonsqueezy.com/checkout/buy/577928ea-fb09-4076-9307-3e5931b35ad0?media=0&enabled=67805%2C82417", | |
| }; | |
| const Pricing = () => { | |
| const email = useUser(state => state.user?.email); | |
| const [isMonthly, setIsMonthly] = React.useState(true); | |
| const paymentURL = (url: string) => { | |
| if (email) url += `?checkout[email]=${email}`; | |
| return url; | |
| }; | |
| return ( | |
| <Layout> | |
| <Head> | |
| <title>Pricing - JSON Crack</title> | |
| </Head> | |
| <Center my="lg"> | |
| <SegmentedControl | |
| onChange={v => setIsMonthly(v === "Monthly")} | |
| size="lg" | |
| data={["Monthly", "Yearly"]} | |
| w={200} | |
| radius="xl" | |
| /> | |
| </Center> | |
| <Flex gap="lg" wrap="wrap" justify="center" w="fit-content" p="lg" mx="auto"> | |
| <Paper bg="white" p="xl" radius="lg" withBorder w={325}> | |
| <Flex justify="space-between"> | |
| <Stack gap="0"> | |
| <Text fz="xl" fw="bold" c="black"> | |
| Free | |
| </Text> | |
| <Text fz={32} fw="bold" c="black"> | |
| $0 | |
| </Text> | |
| <Text fz="xs" c="gray.6"> | |
| billed {isMonthly ? "monthly" : "annually"} | |
| </Text> | |
| </Stack> | |
| </Flex> | |
| <Button my="md" size="md" radius="md" color="black" variant="outline" fullWidth> | |
| Free | |
| </Button> | |
| <Flex direction="column" justify="space-between" h={200}> | |
| <List | |
| spacing="xs" | |
| size="sm" | |
| mt="lg" | |
| center | |
| icon={ | |
| <ThemeIcon color="dark.6" size={20} radius="xl"> | |
| <BsCheck size="1rem" /> | |
| </ThemeIcon> | |
| } | |
| > | |
| <List.Item> | |
| <Text c="black" fz="sm"> | |
| Save & share up to 15 files | |
| </Text> | |
| </List.Item> | |
| <List.Item> | |
| <Text c="black" fz="sm"> | |
| Visualize all data formats | |
| </Text> | |
| </List.Item> | |
| <List.Item | |
| icon={ | |
| <ThemeIcon color="gray.5" size={20} radius="xl"> | |
| <BsX size="1rem" /> | |
| </ThemeIcon> | |
| } | |
| > | |
| <Text c="gray.6" fz="sm"> | |
| Maximum Capability | |
| </Text> | |
| </List.Item> | |
| <List.Item | |
| icon={ | |
| <ThemeIcon color="gray.5" size={20} radius="xl"> | |
| <BsX size="1rem" /> | |
| </ThemeIcon> | |
| } | |
| > | |
| <Text c="gray.6" fz="sm"> | |
| JSON Schema | |
| </Text> | |
| </List.Item> | |
| <List.Item | |
| icon={ | |
| <ThemeIcon color="gray.5" size={20} radius="xl"> | |
| <BsX size="1rem" /> | |
| </ThemeIcon> | |
| } | |
| > | |
| <Text c="gray.6" fz="sm"> | |
| Edit data through graph | |
| </Text> | |
| </List.Item> | |
| </List> | |
| </Flex> | |
| </Paper> | |
| <Paper | |
| p="xl" | |
| radius="lg" | |
| bg="white" | |
| withBorder | |
| w={325} | |
| style={{ borderColor: "black", borderWidth: "2px" }} | |
| > | |
| <Flex justify="space-between"> | |
| <Stack gap="0"> | |
| <Flex align="center" gap="xs"> | |
| <Text fz="xl" fw="bold" c="black"> | |
| Premium | |
| </Text> | |
| <Badge size="sm" color="red" leftSection={<FaBolt />}> | |
| Most Popular | |
| </Badge> | |
| </Flex> | |
| <Flex gap="xs" align="center"> | |
| <Text fz={32} fw="bold" c="black"> | |
| ${isMonthly ? "5" : "60"} | |
| </Text> | |
| <Text fz="md" fw="bold" c="dimmed" style={{ textDecoration: "line-through" }}> | |
| ${isMonthly ? "7" : "84"} | |
| </Text> | |
| </Flex> | |
| <Text fz="xs" c="gray.6"> | |
| billed {isMonthly ? "monthly" : "annually"} | |
| </Text> | |
| </Stack> | |
| </Flex> | |
| <Button | |
| component="a" | |
| href={paymentURL(isMonthly ? purchaseLinks.monthly : purchaseLinks.annual)} | |
| target="_blank" | |
| size="md" | |
| radius="md" | |
| color="dark" | |
| fullWidth | |
| my="md" | |
| rightSection={<VscArrowRight />} | |
| > | |
| Upgrade | |
| </Button> | |
| <Flex direction="column" justify="space-between" h={200}> | |
| <List | |
| spacing="xs" | |
| size="sm" | |
| mt="lg" | |
| center | |
| icon={ | |
| <ThemeIcon color="dark.6" size={20} radius="xl"> | |
| <BsCheck size="1rem" /> | |
| </ThemeIcon> | |
| } | |
| > | |
| <List.Item> | |
| <Text c="black" fz="sm"> | |
| Maximum capability | |
| </Text> | |
| </List.Item> | |
| <List.Item> | |
| <Text c="black" fz="sm"> | |
| Save & share up to 200 files | |
| </Text> | |
| </List.Item> | |
| <List.Item> | |
| <Text c="black" fz="sm"> | |
| Visualize all data formats | |
| </Text> | |
| </List.Item> | |
| <List.Item> | |
| <Text c="black" fz="sm"> | |
| JSON Schema | |
| </Text> | |
| </List.Item> | |
| <List.Item> | |
| <Text c="black" fz="sm"> | |
| Edit data through graph | |
| </Text> | |
| </List.Item> | |
| <List.Item> | |
| <Text c="blue" fz="sm"> | |
| Join alpha test of JC AI{" "} | |
| <Tooltip label="You will receive 10 credits per day."> | |
| <ThemeIcon size="xs" variant="transparent" style={{ verticalAlign: "middle" }}> | |
| <VscInfo /> | |
| </ThemeIcon> | |
| </Tooltip> | |
| </Text> | |
| </List.Item> | |
| </List> | |
| </Flex> | |
| </Paper> | |
| <Paper bg="white" p="xl" radius="lg" withBorder w={325}> | |
| <Flex justify="space-between"> | |
| <Stack gap="0"> | |
| <Text fz="xl" fw="bold" c="black"> | |
| Enterprise | |
| </Text> | |
| <Text fz={32} fw="bold" c="black"> | |
| Custom | |
| </Text> | |
| <Text fz="xs" c="gray.6"> | |
| billed {isMonthly ? "monthly" : "annually"} | |
| </Text> | |
| </Stack> | |
| </Flex> | |
| <Button | |
| component="a" | |
| href="mailto:[email protected]?subject=Enterprise%20Plan%20Inquiry&body=Please%20replace%20this%20text%20with%20your%20inquiry%20content." | |
| target="_blank" | |
| size="md" | |
| radius="md" | |
| variant="outline" | |
| color="dark" | |
| fullWidth | |
| my="md" | |
| rightSection={<VscArrowRight />} | |
| > | |
| Contact Us | |
| </Button> | |
| <Flex direction="column" justify="space-between" h={200}> | |
| <List | |
| spacing="xs" | |
| size="sm" | |
| mt="lg" | |
| center | |
| icon={ | |
| <ThemeIcon color="dark.6" size={20} radius="xl"> | |
| <BsCheck size="1rem" /> | |
| </ThemeIcon> | |
| } | |
| c="black" | |
| > | |
| <List.Item>Everything from previous plans</List.Item> | |
| <List.Item | |
| icon={ | |
| <ThemeIcon color="dark.6" size={20} radius="xl"> | |
| <BsCheck size="1rem" /> | |
| </ThemeIcon> | |
| } | |
| c="black" | |
| > | |
| Unlimited premium accounts for work email | |
| </List.Item> | |
| <List.Item | |
| icon={ | |
| <ThemeIcon color="dark.6" size={20} radius="xl"> | |
| <BsCheck size="1rem" /> | |
| </ThemeIcon> | |
| } | |
| c="black" | |
| > | |
| Shared cloud in app | |
| </List.Item> | |
| </List> | |
| </Flex> | |
| </Paper> | |
| </Flex> | |
| <Text pt="sm" size="sm" c="dimmed" style={{ textAlign: "center" }}> | |
| <AiOutlineInfoCircle style={{ marginRight: "4px" }} /> | |
| Payment email must be matching with the account registered to the JSON Crack. | |
| </Text> | |
| </Layout> | |
| ); | |
| }; | |
| export default Pricing; | |