update landing

AykutSarac · Aug 21, 2024 · 0b36f05 · 0b36f05
1 parent 0fc907d
commit 0b36f05
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 139 deletions.
diff --git a/src/containers/Editor/LiveEditor/index.tsx b/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>
   );

diff --git a/src/containers/Landing/HeroSection.tsx b/src/containers/Landing/HeroSection.tsx
@@ -158,7 +158,7 @@ export const HeroSection = () => {
               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>

diff --git a/src/containers/Modals/LoginModal/index.tsx b/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>

diff --git a/src/containers/Modals/UpgradeModal/index.tsx b/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"

diff --git a/src/containers/Toolbar/index.tsx b/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>

diff --git a/src/layout/Navbar.tsx b/src/layout/Navbar.tsx
@@ -64,7 +64,7 @@ export const Navbar = () => {
             prefetch={false}
             href="/#pricing"
             variant="subtle"
-            color="gray"
+            color="dark"
             size="md"
             radius="md"
           >
@@ -75,7 +75,7 @@ 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"
           >
@@ -86,7 +86,7 @@ export const Navbar = () => {
             prefetch={false}
             href="/affiliates"
             variant="subtle"
-            color="gray"
+            color="dark"
             size="md"
             radius="md"
           >
@@ -96,7 +96,7 @@ export const Navbar = () => {
         <Right>
           <Button
             variant="subtle"
-            color="gray"
+            color="dark"
             component="a"
             href="https://app.jsoncrack.com/sign-in"
             visibleFrom="sm"

diff --git a/src/pages/premium.tsx b/src/pages/premium.tsx
@@ -138,7 +138,7 @@ const features: FeatureItem[] = [
 ];
 
 const Premium = () => {
-  const [plan, setPlan] = React.useState("monthly");
+  const [plan, setPlan] = React.useState("annual");
 
   const getUpgradeLink = () => {
     const link = new URL(purchaseLinks[plan]);
@@ -337,32 +337,34 @@ const Premium = () => {
                   </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="sm"
-                      radius="lg"
-                      color="red"
-                      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">
-                      ${PRICING.LTD}
-                    </Text>
-                    <Text fw={500} fz="sm" c="gray.5" ml="2">
-                      / lifetime
-                    </Text>
-                  </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="sm"
+                        radius="lg"
+                        color="red"
+                        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">
+                        ${PRICING.LTD}
+                      </Text>
+                      <Text fw={500} fz="sm" c="gray.5" ml="2">
+                        / lifetime
+                      </Text>
+                    </Flex>
+                  </Group>
+                </StyledRadioCard>
+              )}
             </Stack>
             <Button
               component="a"
@@ -378,7 +380,7 @@ const Premium = () => {
               Upgrade
             </Button>
           </Radio.Group>
-          <Flex pt="sm" c="dimmed" justify="center" align="center" gap={4}>
+          <Flex mt="sm" c="dimmed" justify="center" align="center" gap={4}>
             <AiOutlineInfoCircle />
             <Text size="xs">
               Payment email must be matching with the account registered to the JSON Crack.