Skip to content

Commit cae5088

Browse files
AykutSaracAykutSarac
committed
update upgrade modal
1 parent 4662e21 commit cae5088

File tree

2 files changed

+104
-90
lines changed

2 files changed

+104
-90
lines changed

‎public/diagrams.png‎

153 KB
Loading

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

Lines changed: 104 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,120 @@
11
import React from "react";
22
import type { ModalProps } from "@mantine/core";
3-
import { Text, List, Button, Modal, Flex, Box, ThemeIcon, Image, Paper } from "@mantine/core";
4-
import styled from "styled-components";
5-
import { IoMdCheckmarkCircleOutline } from "react-icons/io";
6-
import { MdChevronRight } from "react-icons/md";
7-
8-
const StyledPaper = styled(Paper)<any>`
9-
--bg-color: ${({ theme }) => theme.GRID_BG_COLOR};
10-
--line-color-1: ${({ theme }) => theme.GRID_COLOR_PRIMARY};
11-
--line-color-2: ${({ theme }) => theme.GRID_COLOR_SECONDARY};
12-
13-
background-color: var(--bg-color);
14-
background-image: linear-gradient(var(--line-color-1) 1.5px, transparent 1.5px),
15-
linear-gradient(90deg, var(--line-color-1) 1.5px, transparent 1.5px),
16-
linear-gradient(var(--line-color-2) 1px, transparent 1px),
17-
linear-gradient(90deg, var(--line-color-2) 1px, transparent 1px);
18-
background-position:
19-
-1.5px -1.5px,
20-
-1.5px -1.5px,
21-
-1px -1px,
22-
-1px -1px;
23-
background-size:
24-
100px 100px,
25-
100px 100px,
26-
20px 20px,
27-
20px 20px;
28-
29-
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
30-
align-self: center;
31-
`;
3+
import {
4+
Text,
5+
List,
6+
Button,
7+
Modal,
8+
Flex,
9+
Box,
10+
Image,
11+
Stack,
12+
Title,
13+
CloseButton,
14+
ThemeIcon,
15+
} from "@mantine/core";
16+
import { LuCrown, LuPuzzle, LuTrendingUp } from "react-icons/lu";
3217

3318
export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
3419
return (
3520
<Modal
36-
title={
37-
<Flex align="center" gap="8">
38-
<ThemeIcon variant="transparent">
39-
<Image src="https://todiagram.com/logo.svg" alt="ToDiagram" width={20} height={20} />
40-
</ThemeIcon>
41-
<Text fz="24" fw={600}>
42-
Get more with ToDiagram
43-
</Text>
44-
</Flex>
45-
}
46-
size="1000"
21+
size="auto"
4722
opened={opened}
4823
onClose={onClose}
4924
zIndex={1001}
5025
centered
5126
radius="lg"
27+
withCloseButton={false}
28+
styles={{ body: { padding: 0 } }}
29+
overlayProps={{ blur: 1 }}
5230
>
53-
<Flex align="start">
54-
<Box px="lg" pb="lg">
55-
<Text fz="sm" mb="md">
56-
More productivity. More power. Our most-requested features are now available on a
57-
refined platform.
58-
</Text>
59-
<Text fz="md" fw={500} mb="sm">
60-
Here&apos;s what you get with ToDiagram:
61-
</Text>
62-
<List spacing="6" fz="md" icon={<IoMdCheckmarkCircleOutline size="24" color="#16a34a" />}>
63-
<List.Item>Load up to 4 MB data</List.Item>
64-
<List.Item>Edit data on diagrams</List.Item>
65-
<List.Item>Compare data</List.Item>
66-
<List.Item>AI-Powered filter</List.Item>
67-
<List.Item>Customizable theme</List.Item>
68-
<List.Item>Editor tabs</List.Item>
69-
<List.Item>5X Faster loading</List.Item>
70-
<List.Item>Store 200 Documents</List.Item>
71-
</List>
72-
<Text fz="md" my="sm">
73-
<Text component="span" inherit fw={500}>
74-
Cancel anytime.
75-
</Text>{" "}
76-
Pay monthly or annually.
77-
</Text>
78-
<Button
79-
component="a"
80-
href="https://todiagram.com?utm_source=app&utm_medium=upgrade_modal"
81-
target="_blank"
82-
rel="noopener"
83-
color="green"
84-
fullWidth
85-
mt="md"
86-
size="md"
87-
fw={500}
88-
radius="md"
89-
rightSection={<MdChevronRight size="24" />}
90-
>
91-
Get Started
92-
</Button>
31+
<Flex w="100%" direction="row" justify="space-between">
32+
<Image
33+
w="100%"
34+
maw="320"
35+
h="auto"
36+
src="/diagrams.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:
52+
</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?
97+
</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">
114+
Maybe later
115+
</Button>
116+
</Stack>
93117
</Box>
94-
<StyledPaper ml="md" withBorder p="16">
95-
<Image
96-
miw="420"
97-
mih="420"
98-
mah="500"
99-
src="/assets/todiagram_img.webp"
100-
alt="ToDiagram"
101-
fit="contain"
102-
/>
103-
</StyledPaper>
104118
</Flex>
105119
</Modal>
106120
);

0 commit comments

Comments
 (0)