update upgrade modal

src/containers/Modals/UpgradeModal/index.tsx

@@ -2,23 +2,21 @@ import React from "react";
 import type { ModalProps } from "@mantine/core";
 import {
   Text,
-  List,
   Button,
   Modal,
   Flex,
-  Box,
-  Image,
   Stack,
   Title,
-  CloseButton,
   ThemeIcon,
+  AspectRatio,
+  Paper,
 } from "@mantine/core";
-import { LuCrown, LuPuzzle, LuTrendingUp } from "react-icons/lu";
+import { LuCrown, LuTrendingUp } from "react-icons/lu";
 
 export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
   return (
     <Modal
-      size="auto"
+      size="550"
       opened={opened}
       onClose={onClose}
       zIndex={1001}
@@ -28,28 +26,10 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
       styles={{ body: { padding: 0 } }}
       overlayProps={{ blur: 1 }}
     >
-      <Flex w="100%" direction="row" justify="space-between">
+      <Stack gap="24" px="40" py="20">
-        <Image
-          w="100%"
-          maw="400"
-          h="auto"
-          src="/diagram.png"
-          alt="ToDiagram"
-          fit="cover"
-          visibleFrom="md"
-          style={{ borderRight: "1px solid #f0f0f0" }}
-        />
-        <Box maw="550" w="100%">
-          <Flex p="20" justify="end">
-            <CloseButton onClick={onClose} />
-          </Flex>
-          <Stack gap="24" px="40" pb="20">
         <Title c="bright" fw="500" fz="24">
           Upgrade to unlock all features
         </Title>
-            <Title c="gray" order={2} fw="500" fz="16">
-              Here&apos;s a peak at what you get with ToDiagram:
-            </Title>
         <Flex gap="20">
           <ThemeIcon color="green" variant="light" size="xl" radius="xl">
             <LuCrown size="20" />
@@ -78,27 +58,33 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
             </Text>
           </Stack>
         </Flex>
-            <Flex gap="20">
+        <Paper
-              <ThemeIcon color="green" variant="light" size="xl" radius="xl">
+          p={0}
-                <LuPuzzle size="20" />
+          w="100%"
-              </ThemeIcon>
+          h="fit-content"
-              <Stack gap="4">
+          bg="transparent"
-                <Title c="gray" order={3} fw="500" fz="16">
+          style={{
-                  The tools you need to succeed
+            overflow: "hidden",
-                </Title>
+            borderRadius: "12px",
-                <Text fz="14" c="dimmed">
+            border: "1px solid #e5e5e5",
-                  Compare data on diagrams, use AI-powered filters, and more. Get the tools you need
+            boxShadow:
-                  to succeed in your work.
+              "rgba(25, 86, 88, 0.06) 0px 17px 37px 0px, rgba(25, 86, 88, 0.05) 0px 67px 67px 0px",
-                </Text>
+          }}
-              </Stack>
+        >
-            </Flex>
+          <AspectRatio ratio={1000 / 528} w="100%" h="100%">
-            <Title c="bright" mb="-14" order={2} fw="500" fz="16">
+            <video
-              Ready to upgrade?
+              autoPlay
-            </Title>
+              muted
-            <List fz="14">
+              loop
-              <List.Item>Cancel anytime. No risk, no hassle.</List.Item>
+              preload="auto"
-              <List.Item>7-day money back guarantee.</List.Item>
+              playsInline
-            </List>
+              poster="https://todiagram.com/videos/diagrams.webp"
+              style={{ display: "block" }}
+            >
+              <source src="https://todiagram.com/videos/diagrams.mp4" type="video/mp4" />
+            </video>
+          </AspectRatio>
+        </Paper>
         <Button
           component="a"
           href="https://todiagram.com/sign-up?utm_source=jsoncrack&utm_medium=upgrade_modal"
@@ -108,14 +94,12 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
           size="md"
           radius="md"
         >
-              Open ToDiagram Editor
+          Upgrade to ToDiagram
         </Button>
         <Button size="md" variant="subtle" color="gray" radius="md" onClick={onClose}>
           Maybe later
         </Button>
       </Stack>
-        </Box>
-      </Flex>
     </Modal>
   );
 };