Merge branch 'main' of https://github.com/AykutSarac/jsoncrack.com

public/robots.txt

@@ -3,4 +3,6 @@ Allow: /
 
 User-agent: *
 Disallow: /forgot-password
+Disallow: /sign-in
+Disallow: /sign-up
 Disallow: /widget

public/sitemap.txt

@@ -1,7 +1,5 @@
 https://jsoncrack.com
 https://jsoncrack.com/pricing
-https://jsoncrack.com/sign-in
-https://jsoncrack.com/sign-up
 https://jsoncrack.com/forgot-password
 https://jsoncrack.com/editor
 https://jsoncrack.com/docs

src/containers/Editor/LiveEditor/index.tsx

@@ -1,13 +1,9 @@
 import React from "react";
-import { Button, ButtonGroup } from "@mantine/core";
 import styled from "styled-components";
-import { MdAdd } from "react-icons/md";
-import { VscLock } from "react-icons/vsc";
 import { ViewMode } from "src/enums/viewMode.enum";
 import { GraphView } from "src/modules/GraphView";
 import { TreeView } from "src/modules/TreeView";
 import useConfig from "src/store/useConfig";
-import useModal from "src/store/useModal";
 
 const StyledLiveEditor = styled.div`
   position: relative;
@@ -41,25 +37,8 @@ const View = () => {
 };
 
 const LiveEditor = () => {
-  const setVisible = useModal(state => state.setVisible);
-
   return (
     <StyledLiveEditor onContextMenuCapture={e => e.preventDefault()}>
-      <ButtonGroup className="tab-group">
-        <Button
-          c="gray"
-          miw={80}
-          size="xs"
-          variant="default"
-          rightSection={<VscLock />}
-          onClick={() => setVisible("upgrade")(true)}
-        >
-          Tab 1
-        </Button>
-        <Button size="xs" variant="default" onClick={() => setVisible("upgrade")(true)}>
-          <MdAdd />
-        </Button>
-      </ButtonGroup>
       <View />
     </StyledLiveEditor>
   );

src/containers/Landing/HeroSection.tsx

@@ -131,13 +131,13 @@ export const HeroSection = () => {
               radius="md"
               fw="500"
             >
-              Premium
+              Explore Premium
             </Button>
           </Flex>
           <Flex gap="lg" wrap="wrap" justify="center" visibleFrom="xs">
             <Button
               component="a"
-              color="indigo"
+              color="#202842"
               href="/editor"
               size="lg"
               radius="md"
@@ -155,10 +155,10 @@ export const HeroSection = () => {
               radius="md"
               fw="500"
             >
-              Premium
+              Explore Premium
             </Button>
           </Flex>
-          <Text ta="center" size="xs" c="gray">
+          <Text ta="center" size="xs" c="dimmed">
             Supports JSON, CSV, XML, YAML, TOML
           </Text>
         </Stack>

src/containers/Landing/PremiumPreview.tsx

@@ -83,7 +83,7 @@ export const PremiumPreview = () => {
                   background: "transparent",
                 },
                 indicator: {
-                  background: "#120F43",
+                  background: "#000000",
                 },
                 label: {
                   color: "white",

src/containers/Landing/PremiumVsFree.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 import Link from "next/link";
-import { Title, Image, Container, Flex, Box, List, Button } from "@mantine/core";
+import { Title, Image, Container, Flex, Box, Button, Text } from "@mantine/core";
 import styled from "styled-components";
 import { FaArrowRightLong } from "react-icons/fa6";
-import { IoMdCheckmark } from "react-icons/io";
 
 const StyledImageWrapper = styled.div`
   flex: 1.8;
@@ -13,7 +12,7 @@ const StyledImageWrapper = styled.div`
 
 export const PremiumVsFree = () => {
   return (
-    <Container p={30} bg="dark" id="premium" fluid component="section" my={120}>
+    <Container p={30} bg="#202842" id="premium" fluid component="section" my={120}>
       <Container size="lg">
         <Flex
           gap="lg"
@@ -36,43 +35,33 @@ export const PremiumVsFree = () => {
               fw={600}
               mb={20}
             >
-              Explore Premium.
-              <Box pos="absolute" mt="-8px" maw="150px" w="100%">
+              Premium
+              <Box pos="absolute" mt="-6px" maw="150px" w="100%">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1418 125" fill="#ffbb55">
                   <path d="M1412.29 72.17c-11.04-5.78-20.07-14.33-85.46-25.24-22.37-3.63-44.69-7.56-67.07-11.04-167.11-22.06-181.65-21.24-304.94-30.56C888.78 1.39 822.57 1.1 756.44 0c-46.63-.11-93.27 1.56-139.89 2.5C365.5 13.55 452.86 7.68 277.94 23.15 202.57 33.32 127.38 45.01 52.07 55.69c-11.23 2.41-22.63 4.17-33.71 7.22C6.1 66.33 5.64 66.19 3.89 67.79c-7.99 5.78-2.98 20.14 8.72 17.5 33.99-9.47 32.28-8.57 178.06-29.66 4.26 4.48 7.29 3.38 18.42 3.11 13.19-.32 26.38-.53 39.56-1.12 53.51-3.81 106.88-9.62 160.36-13.95 18.41-1.3 36.8-3.12 55.21-4.7 23.21-1.16 46.43-2.29 69.65-3.4 120.28-2.16 85.46-3.13 234.65-1.52 23.42.99 1.57-.18 125.72 6.9 96.61 8.88 200.92 27.94 295.42 46.12 40.87 7.91 116.67 23.2 156.31 36.78 3.81 1.05 8.28-.27 10.51-3.58 3.17-3.72 2.66-9.7-.78-13.13-3.25-3.12-8.14-3.44-12.18-5.08-17.89-5.85-44.19-12.09-63.67-16.56l26.16 3.28c23.02 3.13 46.28 3.92 69.34 6.75 10.8.96 25.43 1.81 34.34-4.39 2.26-1.54 4.86-2.75 6.21-5.27 2.76-4.59 1.13-11.06-3.59-13.68ZM925.4 23.77c37.64 1.4 153.99 10.85 196.64 14.94 45.95 5.51 91.89 11.03 137.76 17.19 24.25 4.77 74.13 11.21 101.72 18.14-11.87-1.15-23.77-1.97-35.65-3.06-133.46-15.9-266.8-33.02-400.47-47.21Z"></path>
                 </svg>
               </Box>
             </Title>
-            <List
-              fz="lg"
-              visibleFrom="md"
-              spacing="4"
-              c="gray.3"
-              icon={<IoMdCheckmark color="orange" />}
-            >
-              <List.Item>Refined user interface</List.Item>
-              <List.Item>Supports larger data</List.Item>
-              <List.Item>Customizable color theme</List.Item>
-              <List.Item>Compare data on graphs</List.Item>
-              <List.Item>Edit directly on graphs</List.Item>
-              <List.Item>AI-powered assistant</List.Item>
-              <List.Item>Everything is faster and more...</List.Item>
-            </List>
+            <Text c="gray.5" fz="lg" mb="xl">
+              Upgrade for larger uploads, refined editor, faster experience, advanced tools and
+              more.
+            </Text>
             <Button
               component={Link}
               href="/premium"
               prefetch={false}
               display="block"
               w="fit-content"
               miw={200}
-              color="orange"
+              variant="white"
+              color="gray"
               size="lg"
               mt="xl"
               rightSection={<FaArrowRightLong />}
               radius="xl"
               fz="md"
             >
-              See all features
+              Explore More
             </Button>
           </Box>
 

src/containers/Modals/LoginModal/index.tsx

@@ -1,14 +1,20 @@
 import React from "react";
 import type { ModalProps } from "@mantine/core";
-import { Modal, Stack, Button, Text } from "@mantine/core";
+import { Modal, Stack, Button } from "@mantine/core";
 
 export const LoginModal = ({ opened, onClose }: ModalProps) => {
   return (
     <Modal title="Sign In" opened={opened} onClose={onClose} centered>
       <Stack py="sm">
-        <Text>Login to unlock full potential of JSON Crack!</Text>
-        <Button component="a" href="https://app.jsoncrack.com/sign-in" size="md" fullWidth>
-          Sign In
+        <Button
+          variant="default"
+          component="a"
+          href="https://app.jsoncrack.com/sign-in"
+          rel="noreferrer"
+          size="md"
+          fullWidth
+        >
+          Sign in to continue
         </Button>
       </Stack>
     </Modal>

src/containers/Modals/UpgradeModal/index.tsx

@@ -39,7 +39,7 @@ const StyledRadioCard = styled(Radio.Card)`
 
 export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
   const user = useUser(state => state.user);
-  const [plan, setPlan] = React.useState("ltd");
+  const [plan, setPlan] = React.useState("annual");
 
   const handleUpgrade = () => {
     const link = new URL(purchaseLinks[plan]);
@@ -82,10 +82,10 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
             icon={<IoMdCheckmarkCircleOutline size="24" color="#16a34a" />}
           >
             <List.Item>Larger data support up to 4 MB</List.Item>
-            <List.Item>Compare data differences on graph</List.Item>
+            <List.Item>Edit data directly on visualizations</List.Item>
+            <List.Item>Compare data differences on graphs</List.Item>
             <List.Item>AI-powered data filter</List.Item>
             <List.Item>Customizable graph colors</List.Item>
-            <List.Item>Edit data directly on graph</List.Item>
             <List.Item>Tabs for multiple documents</List.Item>
             <List.Item>
               <Anchor c="inherit" td="underline" href="/premium#preview" target="_blank">
@@ -132,33 +132,35 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
                 </Flex>
               </Group>
             </StyledRadioCard>
-            <StyledRadioCard value="ltd" radius="lg" px="xl" py="md">
-              <Group align="center" justify="space-between">
-                <Flex align="center" gap="xs">
-                  <Text fz="xl" c="gray.7" fw={600}>
-                    Lifetime
-                  </Text>
-                  <Badge
-                    variant="light"
-                    size="md"
-                    radius="lg"
-                    color="#f00"
-                    leftSection={<MdOutlineTimer size="12" />}
-                  >
-                    Limited
-                  </Badge>
-                </Flex>
-                <Flex fw={500} align="baseline" fz="sm" c="gray.5">
-                  <Text fw={600} fz="xl" c="gray.7" mr="2">
-                    ${PRICING.LTD}
-                  </Text>
-                  <Text inherit mr="2">
-                    /
-                  </Text>
-                  lifetime
-                </Flex>
-              </Group>
-            </StyledRadioCard>
+            {PRICING.LTD && (
+              <StyledRadioCard value="ltd" radius="lg" px="xl" py="md">
+                <Group align="center" justify="space-between">
+                  <Flex align="center" gap="xs">
+                    <Text fz="xl" c="gray.7" fw={600}>
+                      Lifetime
+                    </Text>
+                    <Badge
+                      variant="light"
+                      size="md"
+                      radius="lg"
+                      color="#f00"
+                      leftSection={<MdOutlineTimer size="12" />}
+                    >
+                      Limited
+                    </Badge>
+                  </Flex>
+                  <Flex fw={500} align="baseline" fz="sm" c="gray.5">
+                    <Text fw={600} fz="xl" c="gray.7" mr="2">
+                      ${PRICING.LTD}
+                    </Text>
+                    <Text inherit mr="2">
+                      /
+                    </Text>
+                    lifetime
+                  </Flex>
+                </Group>
+              </StyledRadioCard>
+            )}
           </Stack>
           <Button
             color="green"

src/containers/Toolbar/index.tsx

@@ -89,11 +89,11 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
                 gaEvent("Toolbar", "click upgrade premium");
               }}
             >
-              <ThemeIcon size="xs" variant="transparent" color="red">
+              <ThemeIcon size="xs" variant="transparent" color="bright">
                 <FaGift size="12" />
               </ThemeIcon>
-              <Text c="red" fw={600} fz="xs">
-                Limited Offer
+              <Text c="bright" fw={600} fz="xs">
+                Premium
               </Text>
             </Styles.StyledToolElement>
           </Indicator>

src/layout/Navbar.tsx

@@ -64,10 +64,9 @@ export const Navbar = () => {
             prefetch={false}
             href="/#pricing"
             variant="subtle"
-            color="gray"
+            color="dark"
             size="md"
             radius="md"
-            fw={600}
           >
             Pricing
           </Button>
@@ -76,20 +75,18 @@ export const Navbar = () => {
             href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
             target="_blank"
             variant="subtle"
-            color="gray"
+            color="dark"
             size="md"
             radius="md"
-            fw={600}
           >
             VS Code
           </Button>
           <Button
             component={Link}
             prefetch={false}
-            fw={600}
             href="/affiliates"
             variant="subtle"
-            color="gray"
+            color="dark"
             size="md"
             radius="md"
           >
@@ -99,25 +96,24 @@ export const Navbar = () => {
         <Right>
           <Button
             variant="subtle"
-            color="gray"
+            color="dark"
             component="a"
             href="https://app.jsoncrack.com/sign-in"
             visibleFrom="sm"
             size="md"
             radius="md"
-            fw={600}
           >
             Log in
           </Button>
           <Button
             radius="md"
             component="a"
-            color="indigo"
+            color="#202842"
             href="/editor"
             visibleFrom="sm"
             size="md"
           >
-            Editor
+            Free editor
           </Button>
         </Right>
       </StyledNavbar>