diff --git a/public/assets/premium-divider.svg b/public/assets/premium-divider.svg
new file mode 100644
index 0000000..c6d2487
--- /dev/null
+++ b/public/assets/premium-divider.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/containers/Landing/HeroPreview.tsx b/src/containers/Landing/HeroPreview.tsx
index 6475958..c48cc98 100644
--- a/src/containers/Landing/HeroPreview.tsx
+++ b/src/containers/Landing/HeroPreview.tsx
@@ -1,119 +1,22 @@
import React from "react";
-import { AspectRatio, Flex, Paper, SegmentedControl, Stack, Text } from "@mantine/core";
-import styled from "styled-components";
-
-const StyledPreviewWrapper = styled.div`
- margin: 0 auto;
- position: relative;
- padding: 5rem 0;
-`;
-
-const features = [
- {
- label: "Fast & Compact",
- value: "1",
- },
- {
- label: "Search",
- value: "2",
- },
- {
- label: "Edit",
- value: "3",
- },
- {
- label: "Customize",
- value: "5",
- },
- {
- label: "Compare",
- value: "6",
- },
- {
- label: "AI-Powered Assistant",
- value: "7",
- },
-];
+import { Container, Image } from "@mantine/core";
export const HeroPreview = () => {
- const [selectedFeature, setSelectedFeature] = React.useState("1");
-
return (
-
-
+
-
-
-
-
-
-
-
-
-
-
- Previews are from the Premium version of the app
-
-
-
-
+ />
+
);
};
diff --git a/src/containers/Landing/HeroSection.tsx b/src/containers/Landing/HeroSection.tsx
index e693a7b..2919863 100644
--- a/src/containers/Landing/HeroSection.tsx
+++ b/src/containers/Landing/HeroSection.tsx
@@ -1,5 +1,6 @@
import React from "react";
import { Manrope } from "next/font/google";
+import Link from "next/link";
import { Stack, Flex, Badge, Button, Text } from "@mantine/core";
import styled from "styled-components";
import { IoSparkles } from "react-icons/io5";
@@ -166,6 +167,20 @@ export const HeroSection = () => {
>
Start using free
+ }
+ >
+ Explore Premium
+
No registration needed.
diff --git a/src/containers/Landing/PremiumPreview.tsx b/src/containers/Landing/PremiumPreview.tsx
new file mode 100644
index 0000000..d51679b
--- /dev/null
+++ b/src/containers/Landing/PremiumPreview.tsx
@@ -0,0 +1,117 @@
+import React from "react";
+import { AspectRatio, Container, Flex, Paper, SegmentedControl, Stack, Title } from "@mantine/core";
+
+const features = [
+ {
+ label: "Fast & Compact",
+ value: "1",
+ },
+ {
+ label: "Search",
+ value: "2",
+ },
+ {
+ label: "Edit",
+ value: "3",
+ },
+ {
+ label: "Customize",
+ value: "5",
+ },
+ {
+ label: "Compare",
+ value: "6",
+ },
+ {
+ label: "AI-Powered Assistant",
+ value: "7",
+ },
+];
+
+export const PremiumPreview = () => {
+ const [selectedFeature, setSelectedFeature] = React.useState("1");
+
+ return (
+
+
+
+ Discover the features
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/containers/Landing/PremiumVsFree.tsx b/src/containers/Landing/PremiumVsFree.tsx
index a1ada45..7fed88b 100644
--- a/src/containers/Landing/PremiumVsFree.tsx
+++ b/src/containers/Landing/PremiumVsFree.tsx
@@ -1,4 +1,5 @@
import React from "react";
+import Link from "next/link";
import { Title, Overlay, Image, Container, Flex, Box, List, Button } from "@mantine/core";
import styled from "styled-components";
import { ReactCompareSlider, ReactCompareSliderHandle } from "react-compare-slider";
@@ -68,17 +69,17 @@ export const PremiumVsFree = () => {
Beautiful UI and very smooth navigation
diff --git a/src/modules/GraphView/NotSupported.tsx b/src/modules/GraphView/NotSupported.tsx
index d018613..45f3d3b 100644
--- a/src/modules/GraphView/NotSupported.tsx
+++ b/src/modules/GraphView/NotSupported.tsx
@@ -1,10 +1,9 @@
import React from "react";
+import Link from "next/link";
import { Button, Title } from "@mantine/core";
import styled from "styled-components";
import { MdChevronRight } from "react-icons/md";
import { JSONCrackLogo } from "src/layout/JsonCrackLogo";
-import { gaEvent } from "src/lib/utils/gaEvent";
-import useModal from "src/store/useModal";
const StyledNotSupported = styled.div`
position: relative;
@@ -156,13 +155,11 @@ const StyledContent = styled.div`
`;
export const NotSupported = () => {
- const setVisible = useModal(state => state.setVisible);
-
return (
- <JSONCrackLogo fontSize="4rem" />
+ <JSONCrackLogo fontSize="4rem" style={{ color: "black" }} />
Upgrade to premium for larger data size support. The free version is incapable of handling
@@ -170,10 +167,9 @@ export const NotSupported = () => {
+
+
+
+
+
+
+
+ Built for everyone.
+
+
+ Zero technical knowledge required.
+
+
+
+
+
+
+ 4 MB
+
+
+
+ Larger Data
+
+ From 300KB to ~4MB upgraded data size.
+
+
+
+
+
+
+
+
+ Compact Design
+
+
+ 50% less graph size. Get rid of the redundant data and nodes, focus on what's
+ important.
+
+
+
+
+
+
+
+
+
+ Faster
+
+
+ Load data faster. Navigate faster. Search faster. Everything is faster than ever.
+
+
+
+
+
+
+
+
+
+ Compare
+
+
+ Compare two data, highlight the differences directly on the graphs.
+
+
+
+
+
+
+
+
+
+ Edit Directly
+
+
+ Modify your data directly on the graph. No more switching between the editor and
+ the graph.
+
+
+
+
+
+
+
+
+
+ Customize
+
+
+ Customize the graph's colors to align with your brand or personal
+ preferences.
+
+
+
+
+
+
+
+
+
+ Tabs
+
+
+ Open multiple tabs, navigate between them easily. Save up to 200 documents to the
+ cloud.
+
+
+
+
+
+
+
+
+
+ AI-Powered
+
+
+ Ask it to translate your fields, filter out by age or name includes, and more.
+
+
+
+
+
+
+
+
+ Keep your expectations high.
+
+
+
+
+
+
+
+ Monthly
+
+
+
+
+ ${PRICING.MONTHLY}
+
+ /month
+
+
+
+
+
+
+
+ Yearly
+
+
+
+
+ ${PRICING.ANNUAL * 12}
+
+ /year
+
+
+
+
+
+
+
+ Lifetime
+
+ }
+ >
+ Limited
+
+
+
+
+ ${PRICING.LTD}
+
+ /lifetime
+
+
+
+
+ }
+ >
+ Upgrade
+
+
+
+
+
+ Payment email must be matching with the account registered to the JSON Crack.
+
+
+
+
+ );
+};
+
+export default Premium;