feat: add free trial

src/containers/Views/GraphView/PremiumView.tsx

@@ -161,8 +161,8 @@ export const PremiumView = () => (
         <JSONCrackLogo fontSize="4rem" />
       </Title>
       <StyledInfo>
-        Free version is not optimized to handle data of this size. Check out the premium version for
-        more features and capabilities.
+        Free version is not optimized to handle data of this size. Try the premium version for more
+        features and capabilities.
       </StyledInfo>
 
       <Button
@@ -172,12 +172,12 @@ export const PremiumView = () => (
         mt="lg"
         size="lg"
         fw="bolder"
-        color="indigo"
-        radius="sm"
+        color="green"
+        radius="xl"
         target="_blank"
         rightSection={<MdChevronRight size="24" />}
       >
-        Get Pro Editor
+        Start 3 Days Free Trial
       </Button>
     </StyledContent>
 

src/pages/index.tsx

@@ -238,6 +238,7 @@ export const HomePage = () => {
               visibleFrom="sm"
               radius="xl"
               mt="lg"
+              autoContrast
             >
               Go to Editor
             </Button>
@@ -247,11 +248,12 @@ export const HomePage = () => {
               href="/editor"
               fw="bold"
               size="md"
-              color="indigo"
+              color="orange"
               rightSection={<MdChevronRight size={24} />}
               hiddenFrom="sm"
               radius="xl"
               mt="lg"
+              autoContrast
             >
               Go to Editor
             </Button>

src/pages/pricing.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Head from "next/head";
+import Link from "next/link";
 import {
   Flex,
   Stack,
@@ -28,7 +29,7 @@ const StyledPaperFree = styled(Paper)`
   padding: 1.5em;
   width: 400px;
   border-radius: 1em;
-  border: 2px solid #e9e9e9;
+  border: 3px solid #e9e9e9;
 `;
 
 const StyledPaper = styled(Paper)`
@@ -38,7 +39,7 @@ const StyledPaper = styled(Paper)`
     linear-gradient(white, white) padding-box,
     linear-gradient(#ec85f5, #fb7eb0 28%, #fc9f96 53%, #ffbc88 78%, #ffc86a) border-box;
   border-radius: 1em;
-  border: 2px solid transparent;
+  border: 3px solid transparent;
 `;
 
 export const PricingCards = () => {
@@ -85,16 +86,18 @@ export const PricingCards = () => {
             </Stack>
           </Flex>
           <Button
-            component="a"
-            href="https://app.jsoncrack.com/sign-up"
+            component={Link}
+            prefetch={false}
+            href="/editor"
             size="lg"
-            radius="md"
+            radius="xl"
             variant="outline"
             color="dark"
             fullWidth
             my="md"
+            rightSection={<VscArrowRight />}
           >
-            Sign up
+            Sign Up
           </Button>
           <Flex direction="column" justify="space-between" h={250}>
             <List spacing="xs" size="sm" mt="lg" center icon="✦">
@@ -162,13 +165,13 @@ export const PricingCards = () => {
             href={paymentURL(isMonthly ? purchaseLinks.monthly : purchaseLinks.annual)}
             target="_blank"
             size="lg"
-            radius="md"
-            color="indigo"
+            radius="xl"
+            color="green"
             fullWidth
             my="md"
             rightSection={<VscArrowRight />}
           >
-            Get Started
+            Start 3 Days Free Trial
           </Button>
           <Flex direction="column" justify="space-between" h={250}>
             <List spacing="xs" size="sm" mt="lg" center icon="✦">