Skip to content

Commit 9def292

Browse files
AykutSaracAykutSarac
committed
update upgrade modal
1 parent d5f9bfc commit 9def292

File tree

3 files changed

+75
-91
lines changed

3 files changed

+75
-91
lines changed

‎public/diagram.png‎

-228 KB
Binary file not shown.

‎public/diagrams.png‎

-153 KB
Binary file not shown.

‎src/containers/Modals/UpgradeModal/index.tsx‎

Lines changed: 75 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,21 @@ import React from "react";
22
import type { ModalProps } from "@mantine/core";
33
import {
44
Text,
5-
List,
65
Button,
76
Modal,
87
Flex,
9-
Box,
10-
Image,
118
Stack,
129
Title,
13-
CloseButton,
1410
ThemeIcon,
11+
AspectRatio,
12+
Paper,
1513
} from "@mantine/core";
16-
import { LuCrown, LuPuzzle, LuTrendingUp } from "react-icons/lu";
14+
import { LuCrown, LuTrendingUp } from "react-icons/lu";
1715

1816
export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
1917
return (
2018
<Modal
21-
size="auto"
19+
size="550"
2220
opened={opened}
2321
onClose={onClose}
2422
zIndex={1001}
@@ -28,94 +26,80 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
2826
styles={{ body: { padding: 0 } }}
2927
overlayProps={{ blur: 1 }}
3028
>
31-
<Flex w="100%" direction="row" justify="space-between">
32-
<Image
33-
w="100%"
34-
maw="400"
35-
h="auto"
36-
src="/diagram.png"
37-
alt="ToDiagram"
38-
fit="cover"
39-
visibleFrom="md"
40-
style={{ borderRight: "1px solid #f0f0f0" }}
41-
/>
42-
<Box maw="550" w="100%">
43-
<Flex p="20" justify="end">
44-
<CloseButton onClick={onClose} />
45-
</Flex>
46-
<Stack gap="24" px="40" pb="20">
47-
<Title c="bright" fw="500" fz="24">
48-
Upgrade to unlock all features
49-
</Title>
50-
<Title c="gray" order={2} fw="500" fz="16">
51-
Here&apos;s a peak at what you get with ToDiagram:
29+
<Stack gap="24" px="40" py="20">
30+
<Title c="bright" fw="500" fz="24">
31+
Upgrade to unlock all features
32+
</Title>
33+
<Flex gap="20">
34+
<ThemeIcon color="green" variant="light" size="xl" radius="xl">
35+
<LuCrown size="20" />
36+
</ThemeIcon>
37+
<Stack gap="4">
38+
<Title c="gray" order={3} fw="500" fz="16">
39+
Accurate & beautiful diagrams
5240
</Title>
53-
<Flex gap="20">
54-
<ThemeIcon color="green" variant="light" size="xl" radius="xl">
55-
<LuCrown size="20" />
56-
</ThemeIcon>
57-
<Stack gap="4">
58-
<Title c="gray" order={3} fw="500" fz="16">
59-
Accurate & beautiful diagrams
60-
</Title>
61-
<Text fz="14" c="dimmed">
62-
New diagram structure helps you to understand the data, modify from diagrams,
63-
customize colors, preview images.
64-
</Text>
65-
</Stack>
66-
</Flex>
67-
<Flex gap="20">
68-
<ThemeIcon color="green" variant="light" size="xl" radius="xl">
69-
<LuTrendingUp size="20" />
70-
</ThemeIcon>
71-
<Stack gap="4">
72-
<Title c="gray" order={3} fw="500" fz="16">
73-
Larger file support, faster performance
74-
</Title>
75-
<Text fz="14" c="dimmed">
76-
Load up to 4MB without performance issues, open multiple documents, and save work
77-
faster.
78-
</Text>
79-
</Stack>
80-
</Flex>
81-
<Flex gap="20">
82-
<ThemeIcon color="green" variant="light" size="xl" radius="xl">
83-
<LuPuzzle size="20" />
84-
</ThemeIcon>
85-
<Stack gap="4">
86-
<Title c="gray" order={3} fw="500" fz="16">
87-
The tools you need to succeed
88-
</Title>
89-
<Text fz="14" c="dimmed">
90-
Compare data on diagrams, use AI-powered filters, and more. Get the tools you need
91-
to succeed in your work.
92-
</Text>
93-
</Stack>
94-
</Flex>
95-
<Title c="bright" mb="-14" order={2} fw="500" fz="16">
96-
Ready to upgrade?
41+
<Text fz="14" c="dimmed">
42+
New diagram structure helps you to understand the data, modify from diagrams,
43+
customize colors, preview images.
44+
</Text>
45+
</Stack>
46+
</Flex>
47+
<Flex gap="20">
48+
<ThemeIcon color="green" variant="light" size="xl" radius="xl">
49+
<LuTrendingUp size="20" />
50+
</ThemeIcon>
51+
<Stack gap="4">
52+
<Title c="gray" order={3} fw="500" fz="16">
53+
Larger file support, faster performance
9754
</Title>
98-
<List fz="14">
99-
<List.Item>Cancel anytime. No risk, no hassle.</List.Item>
100-
<List.Item>7-day money back guarantee.</List.Item>
101-
</List>
102-
<Button
103-
component="a"
104-
href="https://todiagram.com/sign-up?utm_source=jsoncrack&utm_medium=upgrade_modal"
105-
target="_blank"
106-
mb="-16"
107-
color="green"
108-
size="md"
109-
radius="md"
110-
>
111-
Open ToDiagram Editor
112-
</Button>
113-
<Button size="md" variant="subtle" color="gray" radius="md" onClick={onClose}>
114-
Maybe later
115-
</Button>
55+
<Text fz="14" c="dimmed">
56+
Load up to 4MB without performance issues, open multiple documents, and save work
57+
faster.
58+
</Text>
11659
</Stack>
117-
</Box>
118-
</Flex>
60+
</Flex>
61+
<Paper
62+
p={0}
63+
w="100%"
64+
h="fit-content"
65+
bg="transparent"
66+
style={{
67+
overflow: "hidden",
68+
borderRadius: "12px",
69+
border: "1px solid #e5e5e5",
70+
boxShadow:
71+
"rgba(25, 86, 88, 0.06) 0px 17px 37px 0px, rgba(25, 86, 88, 0.05) 0px 67px 67px 0px",
72+
}}
73+
>
74+
<AspectRatio ratio={1000 / 528} w="100%" h="100%">
75+
<video
76+
autoPlay
77+
muted
78+
loop
79+
preload="auto"
80+
playsInline
81+
poster="https://todiagram.com/videos/diagrams.webp"
82+
style={{ display: "block" }}
83+
>
84+
<source src="https://todiagram.com/videos/diagrams.mp4" type="video/mp4" />
85+
</video>
86+
</AspectRatio>
87+
</Paper>
88+
<Button
89+
component="a"
90+
href="https://todiagram.com/sign-up?utm_source=jsoncrack&utm_medium=upgrade_modal"
91+
target="_blank"
92+
mb="-16"
93+
color="green"
94+
size="md"
95+
radius="md"
96+
>
97+
Upgrade to ToDiagram
98+
</Button>
99+
<Button size="md" variant="subtle" color="gray" radius="md" onClick={onClose}>
100+
Maybe later
101+
</Button>
102+
</Stack>
119103
</Modal>
120104
);
121105
};

0 commit comments

Comments
 (0)