diff --git a/package.json b/package.json index 4feea8e..08990fa 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "analyze": "ANALYZE=true npm run build" }, "dependencies": { + "@img-comparison-slider/react": "^8.0.2", "@mantine/carousel": "^7.9.2", "@mantine/code-highlight": "^7.9.2", "@mantine/core": "^7.9.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a92d3bf..c923254 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@img-comparison-slider/react': + specifier: ^8.0.2 + version: 8.0.2 '@mantine/carousel': specifier: ^7.9.2 version: 7.9.2(@mantine/core@7.9.2)(@mantine/hooks@7.9.2)(embla-carousel-react@8.1.3)(react-dom@18.3.1)(react@18.3.1) @@ -442,6 +445,12 @@ packages: resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==} dev: true + /@img-comparison-slider/react@8.0.2: + resolution: {integrity: sha512-Him0yhbXpMXdnV6R3XE3LiXcMRhSXFMsbk6I7ct5HxO2YpK/BAGz3ub+7+akJRnK2XI7c3vQqvoIE507N1K4SA==} + dependencies: + img-comparison-slider: 8.0.6 + dev: false + /@isaacs/cliui@8.0.2: resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} @@ -2844,6 +2853,10 @@ packages: engines: {node: '>= 4'} dev: true + /img-comparison-slider@8.0.6: + resolution: {integrity: sha512-ej4de7mWyjcXZvDgHq8K2a/dG8Vv+qYTdUjZa3cVILf316rLtDrHyGbh9fPvixmAFgbs30zTLfmaRDa7abjtzw==} + dev: false + /immediate@3.0.6: resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==} dev: false diff --git a/public/assets/compare/free.webp b/public/assets/compare/free.webp new file mode 100644 index 0000000..981c4df Binary files /dev/null and b/public/assets/compare/free.webp differ diff --git a/public/assets/compare/graph_free.webp b/public/assets/compare/graph_free.webp new file mode 100644 index 0000000..36dc4ab Binary files /dev/null and b/public/assets/compare/graph_free.webp differ diff --git a/public/assets/compare/graph_pro.webp b/public/assets/compare/graph_pro.webp new file mode 100644 index 0000000..1168b21 Binary files /dev/null and b/public/assets/compare/graph_pro.webp differ diff --git a/public/assets/compare/pro.webp b/public/assets/compare/pro.webp new file mode 100644 index 0000000..937e18d Binary files /dev/null and b/public/assets/compare/pro.webp differ diff --git a/src/containers/Modals/UpgradeModal/index.tsx b/src/containers/Modals/UpgradeModal/index.tsx index e99c590..191f36e 100644 --- a/src/containers/Modals/UpgradeModal/index.tsx +++ b/src/containers/Modals/UpgradeModal/index.tsx @@ -13,14 +13,27 @@ import { useMantineColorScheme, List, Anchor, - Alert, + Image, + ScrollArea, } from "@mantine/core"; +import styled from "styled-components"; +import { ImgComparisonSlider } from "@img-comparison-slider/react"; import { IoMdArrowForward } from "react-icons/io"; import { MdCheck } from "react-icons/md"; import { gaEvent } from "src/lib/utils/gaEvent"; import { PRICING } from "src/pages/pricing"; import useUser from "src/store/useUser"; +const StyledImgComparisonSlider = styled(ImgComparisonSlider)` + --divider-width: 2px; + --divider-color: #515151; + --default-handle-opacity: 0.3; + --default-handle-color: #000; + border: 1px solid #999999; + overflow: hidden; + border-radius: 12px; +`; + const overlayLinks = { monthly: "https://herowand.lemonsqueezy.com/buy/ce30521f-c7cc-44f3-9435-995d3260ba22?embed=1&media=0&logo=0&desc=0&discount=0&enabled=67805", @@ -63,21 +76,15 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => { } centered - size="md" + size="lg" opened={opened} onClose={onClose} zIndex={202} > - - We made a new editor for larger data, faster work, and more features. If you use JSON Crack - already, upgrading to this new version will make things much better. - - @@ -117,25 +124,46 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => { - - What You Get - - } - > - 500% Larger data size support (~4 MB) - 400% Better performance - 50% Less Nodes & Compact Graph Visualization - Compare Data on Graphs - Edit on Graphs - - - ...and more - - - + + + What You Get + + } + > + 500% Larger data size support (~4 MB) + 400% Better performance + 50% Less Nodes & Compact Graph Visualization + Compare Data on Graphs + Edit on Graphs + + + ...and more + + + + + + + Premium Editor + Free Editor + + + diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2d733ab..47b471c 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -21,6 +21,7 @@ import { import { Carousel } from "@mantine/carousel"; import "@mantine/carousel/styles.css"; import styled from "styled-components"; +import { ImgComparisonSlider } from "@img-comparison-slider/react"; import { BiChevronDown } from "react-icons/bi"; import { FaGithub } from "react-icons/fa"; import { IoSparklesSharp } from "react-icons/io5"; @@ -172,6 +173,14 @@ const StyledCarouselWrapper = styled.section` } `; +const StyledImgComparisonSlider = styled(ImgComparisonSlider)` + --divider-width: 2px; + --divider-color: #515151; + --default-handle-opacity: 0.3; + --default-handle-color: #000; + overflow: hidden; +`; + const FAQ = [ { title: "What is JSON Crack?", @@ -621,6 +630,31 @@ export const HomePage = () => { Pricing + + + Premium Editor + Free Editor + + { <Text fw={500} size="xl" c="black"> Premium </Text> - <Badge - size="lg" - variant="light" - color="#ff0000" - ml="sm" - leftSection={<FaArrowTrendDown />} - > - %{isMonthly ? 16 : 20} - </Badge> + {!isMonthly && ( + <Badge + size="lg" + variant="light" + color="#ff0000" + ml="sm" + leftSection={<FaArrowTrendDown />} + > + 20% + </Badge> + )} </Flex> <Flex gap="xs" align="baseline"> @@ -96,17 +97,11 @@ export const PricingCards = () => { <Text fz="md" fw={500} c="gray.6"> / mo </Text> - <Text fz="xl" lts={1} c="dark" td="line-through" style={{ alignSelf: "start" }}> - ${isMonthly ? PRICING.MONTHLY + 1 : PRICING.ANNUAL + 1} - </Text> </Flex> <Text fz="xs" c="gray.7"> billed {isMonthly ? "monthly" : "annually"} </Text> </Stack> - <Anchor c="dark" fz="sm" component={Link} h="fit-content" href="/#preview"> - Preview - </Anchor> </Flex> <Button component="a" @@ -155,7 +150,7 @@ export const PricingCards = () => { </List.Item> <List.Item> <Text c="gray.7" fw={500} fz="sm"> - Edit directly on visualizations reflecting on data + Edit Nodes </Text> </List.Item> <List.Item>