update upgrade modal

src/containers/Modals/UpgradeModal/index.tsx

@@ -1,47 +1,71 @@
 import React from "react";
 import Link from "next/link";
 import type { ModalProps } from "@mantine/core";
-import { Text, Divider, List, Button, Modal } from "@mantine/core";
+import { Text, Divider, List, Button, Modal, Flex, Box, AspectRatio } from "@mantine/core";
 import { IoMdCheckmarkCircleOutline } from "react-icons/io";
 import { MdChevronRight } from "react-icons/md";
 
 export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
   return (
     <Modal
       title={
-        <Text c="bright" fz="h2" fw={600}>
-          Upgrade
+        <Text fz="h2" fw={600}>
+          Try ToDiagram for free
         </Text>
       }
-      size="md"
+      size="1000"
       opened={opened}
       onClose={onClose}
       zIndex={1001}
       centered
     >
-      <Divider mb="xs" fz="md" labelPosition="left" label="Included features" color="dimmed" />
-      <List spacing="6" c="gray" icon={<IoMdCheckmarkCircleOutline size="24" color="#16a34a" />}>
-        <List.Item>Larger data support up to 4 MB</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>Tabs for multiple documents</List.Item>
-        <List.Item>...and more</List.Item>
-      </List>
-      <Link href="https://todiagram.com/#preview" target="_blank" passHref>
-        <Button
-          color="green"
-          fullWidth
-          mt="md"
-          size="md"
-          fw={500}
-          radius="md"
-          rightSection={<MdChevronRight size="24" />}
-        >
-          See more
-        </Button>
-      </Link>
+      <Flex align="center">
+        <Box flex="0.6">
+          <Text fz="sm" mb="sm">
+            More productivity. More power. Try our most-requested features, free for 7 days.
+          </Text>
+          <Text fz="sm" fw={500} mb="sm">
+            Here&apos;s what you get with ToDiagram.
+          </Text>
+          <List spacing="6" fz="sm" icon={<IoMdCheckmarkCircleOutline size="24" color="#16a34a" />}>
+            <List.Item>Larger data support up to 4 MB</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>Tabs for multiple documents</List.Item>
+            <List.Item>...and more</List.Item>
+          </List>
+          <Link href="https://todiagram.com/#pricing" target="_blank" passHref>
+            <Button
+              color="green"
+              fullWidth
+              mt="md"
+              size="md"
+              fw={500}
+              radius="md"
+              rightSection={<MdChevronRight size="24" />}
+            >
+              Start free trial
+            </Button>
+          </Link>
+        </Box>
+        <Divider orientation="vertical" mx="md" />
+        <Box flex="1">
+          <AspectRatio ratio={16 / 9}>
+            <video
+              autoPlay
+              height="auto"
+              muted
+              loop
+              playsInline
+              style={{ display: "block", borderRadius: "8px", border: "2px solid #e9e9e9" }}
+            >
+              <source src="https://todiagram.com/videos/diagrams.mp4" type="video/mp4" />
+            </video>
+          </AspectRatio>
+        </Box>
+      </Flex>
     </Modal>
   );
 };

src/containers/Toolbar/index.tsx

@@ -1,9 +1,10 @@
 import React from "react";
-import { Text, Flex, Group, Select, Image } from "@mantine/core";
+import { Text, Flex, Group, Select } from "@mantine/core";
 import styled from "styled-components";
 import toast from "react-hot-toast";
 import { AiOutlineFullscreen } from "react-icons/ai";
 import { FiDownload } from "react-icons/fi";
+import { LuCrown } from "react-icons/lu";
 import { SearchInput } from "src/containers/Toolbar/SearchInput";
 import { FileFormat } from "src/enums/file.enum";
 import { JSONCrackLogo } from "src/layout/JsonCrackLogo";
@@ -98,11 +99,11 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
       )}
       <Group gap="xs" justify="right" w="100%" style={{ flexWrap: "nowrap" }}>
         {!isWidget && (
-          <StyledToolElement onClick={() => window.open("https://todiagram.com?ref=jsoncrack.com")}>
-            <Flex align="center" gap="4">
-              <Image src="https://todiagram.com/logo.svg" alt="ToDiagram" width={14} height={14} />
+          <StyledToolElement onClick={() => setVisible("upgrade")(true)} $highlight>
+            <Flex align="center" gap="6">
+              <LuCrown size="16" />
               <Text c="bright" fw={600} fz="xs">
-                ToDiagram
+                Try Pro for 7 days
               </Text>
             </Flex>
           </StyledToolElement>

src/containers/Toolbar/styles.ts

@@ -1,12 +1,13 @@
 import styled from "styled-components";
 
-export const StyledToolElement = styled.button<{ $hide?: boolean }>`
+export const StyledToolElement = styled.button<{ $hide?: boolean; $highlight?: boolean }>`
   display: ${({ $hide }) => ($hide ? "none" : "flex")};
   align-items: center;
   gap: 4px;
   place-content: center;
   font-size: 12px;
-  background: none;
+  background: ${({ $highlight }) =>
+    $highlight ? "linear-gradient(rgba(0, 0, 0, 0.1) 0 0)" : "none"};
   color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
   padding: 6px;
   border-radius: 3px;