update modals

Author: AykutSarac

src/features/modals/NodeModal/index.tsx

@@ -3,7 +3,6 @@ import type { ModalProps } from "@mantine/core";
 import { Modal, Stack, Text, ScrollArea, Button } from "@mantine/core";
 import { CodeHighlight } from "@mantine/code-highlight";
 import { event as gaEvent } from "nextjs-google-analytics";
-import { VscLock } from "react-icons/vsc";
 import useGraph from "src/features/editor/views/GraphView/stores/useGraph";
 import useModal from "src/store/useModal";
 
@@ -38,7 +37,6 @@ export const NodeModal = ({ opened, onClose }: ModalProps) => {
             setVisible("UpgradeModal", true);
             gaEvent("click_node_edit");
           }}
-          rightSection={<VscLock strokeWidth={0.5} />}
         >
           Edit
         </Button>

src/features/modals/UpgradeModal/index.tsx

@@ -10,28 +10,24 @@ import {
   ThemeIcon,
   CloseButton,
   FocusTrap,
-  Image,
-  Divider,
 } from "@mantine/core";
 import { LuCrown, LuTrendingUp } from "react-icons/lu";
 
 export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
   return (
     <Modal
-      size="800"
+      size="430"
       opened={opened}
       onClose={onClose}
       zIndex={1001}
       centered
       radius="lg"
       withCloseButton={false}
       styles={{ body: { padding: 0 } }}
-      overlayProps={{ blur: 1 }}
+      overlayProps={{ blur: 2 }}
     >
       <FocusTrap.InitialFocus />
       <Flex>
-        <Image src="./assets/todiagram_img.webp" alt="todiagram" w="350" fit="contain" px="lg" />
-        <Divider orientation="vertical" />
         <Stack gap="24" px="40" py="20">
           <Flex justify="space-between">
             <Title c="bright" fw="500" fz="24">
@@ -45,11 +41,10 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
             </ThemeIcon>
             <Stack gap="4">
               <Title c="gray" order={3} fw="500" fz="16">
-                Accurate & beautiful diagrams
+                New diagram structure
               </Title>
               <Text fz="14" c="dimmed">
-                New diagram structure helps you to understand the data, modify from diagrams,
-                customize colors, preview images.
+                50% less size, faster & customizable!
               </Text>
             </Stack>
           </Flex>
@@ -59,11 +54,10 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
             </ThemeIcon>
             <Stack gap="4">
               <Title c="gray" order={3} fw="500" fz="16">
-                Larger file support, faster performance
+                Powerful
               </Title>
               <Text fz="14" c="dimmed">
-                Load up to 4MB without performance issues, open multiple documents, and save work
-                faster.
+                Modify data, preview images, inspect nodes, and more!
               </Text>
             </Stack>
           </Flex>
@@ -77,7 +71,7 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
             radius="md"
             leftSection={<LuCrown />}
           >
-            Try premium for free
+            Try premium for free, no registration
           </Button>
           <Button size="md" variant="subtle" color="gray" radius="md" onClick={onClose}>
             Maybe later

src/layout/Landing/HeroSection.tsx

@@ -136,6 +136,18 @@ export const HeroSection = () => {
             >
               Go to Editor
             </Button>
+            <Button
+              component="a"
+              color="#202842"
+              href="https://todiagram.com/editor?utm_source=jsoncrack.com&utm_medium=cta&utm_campaign=hero"
+              target="_blank"
+              size="md"
+              variant="light"
+              radius="md"
+              fw="500"
+            >
+              Try Premium for Free
+            </Button>
           </Flex>
           <Flex gap="lg" wrap="wrap" justify="center" visibleFrom="xs">
             <Button
@@ -149,6 +161,18 @@ export const HeroSection = () => {
             >
               Go to Editor
             </Button>
+            <Button
+              component="a"
+              color="#202842"
+              href="https://todiagram.com/editor?utm_source=jsoncrack.com&utm_medium=cta&utm_campaign=hero"
+              target="_blank"
+              size="lg"
+              variant="light"
+              radius="md"
+              fw="500"
+            >
+              Try Premium for Free
+            </Button>
           </Flex>
         </Stack>
       </StyledHeroSectionBody>