Skip to content

Commit

Permalink
update upgrade modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@AykutSarac
AykutSarac committed Nov 27, 2024
1 parent d5f9bfc commit 9def292
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 91 deletions.
Binary file removed public/diagram.png
View file
Binary file not shown.
Binary file removed public/diagrams.png
View file
Binary file not shown.
166 changes: 75 additions & 91 deletions src/containers/Modals/UpgradeModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -28,94 +26,80 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
styles={{ body: { padding: 0 } }}
overlayProps={{ blur: 1 }}
>
<Flex w="100%" direction="row" justify="space-between">
<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:
<Stack gap="24" px="40" py="20">
<Title c="bright" fw="500" fz="24">
Upgrade to unlock all features
</Title>
<Flex gap="20">
<ThemeIcon color="green" variant="light" size="xl" radius="xl">
<LuCrown size="20" />
</ThemeIcon>
<Stack gap="4">
<Title c="gray" order={3} fw="500" fz="16">
Accurate & beautiful diagrams
</Title>
<Flex gap="20">
<ThemeIcon color="green" variant="light" size="xl" radius="xl">
<LuCrown size="20" />
</ThemeIcon>
<Stack gap="4">
<Title c="gray" order={3} fw="500" fz="16">
Accurate & beautiful diagrams
</Title>
<Text fz="14" c="dimmed">
New diagram structure helps you to understand the data, modify from diagrams,
customize colors, preview images.
</Text>
</Stack>
</Flex>
<Flex gap="20">
<ThemeIcon color="green" variant="light" size="xl" radius="xl">
<LuTrendingUp size="20" />
</ThemeIcon>
<Stack gap="4">
<Title c="gray" order={3} fw="500" fz="16">
Larger file support, faster performance
</Title>
<Text fz="14" c="dimmed">
Load up to 4MB without performance issues, open multiple documents, and save work
faster.
</Text>
</Stack>
</Flex>
<Flex gap="20">
<ThemeIcon color="green" variant="light" size="xl" radius="xl">
<LuPuzzle size="20" />
</ThemeIcon>
<Stack gap="4">
<Title c="gray" order={3} fw="500" fz="16">
The tools you need to succeed
</Title>
<Text fz="14" c="dimmed">
Compare data on diagrams, use AI-powered filters, and more. Get the tools you need
to succeed in your work.
</Text>
</Stack>
</Flex>
<Title c="bright" mb="-14" order={2} fw="500" fz="16">
Ready to upgrade?
<Text fz="14" c="dimmed">
New diagram structure helps you to understand the data, modify from diagrams,
customize colors, preview images.
</Text>
</Stack>
</Flex>
<Flex gap="20">
<ThemeIcon color="green" variant="light" size="xl" radius="xl">
<LuTrendingUp size="20" />
</ThemeIcon>
<Stack gap="4">
<Title c="gray" order={3} fw="500" fz="16">
Larger file support, faster performance
</Title>
<List fz="14">
<List.Item>Cancel anytime. No risk, no hassle.</List.Item>
<List.Item>7-day money back guarantee.</List.Item>
</List>
<Button
component="a"
href="https://todiagram.com/sign-up?utm_source=jsoncrack&utm_medium=upgrade_modal"
target="_blank"
mb="-16"
color="green"
size="md"
radius="md"
>
Open ToDiagram Editor
</Button>
<Button size="md" variant="subtle" color="gray" radius="md" onClick={onClose}>
Maybe later
</Button>
<Text fz="14" c="dimmed">
Load up to 4MB without performance issues, open multiple documents, and save work
faster.
</Text>
</Stack>
</Box>
</Flex>
</Flex>
<Paper
p={0}
w="100%"
h="fit-content"
bg="transparent"
style={{
overflow: "hidden",
borderRadius: "12px",
border: "1px solid #e5e5e5",
boxShadow:
"rgba(25, 86, 88, 0.06) 0px 17px 37px 0px, rgba(25, 86, 88, 0.05) 0px 67px 67px 0px",
}}
>
<AspectRatio ratio={1000 / 528} w="100%" h="100%">
<video
autoPlay
muted
loop
preload="auto"
playsInline
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"
target="_blank"
mb="-16"
color="green"
size="md"
radius="md"
>
Upgrade to ToDiagram
</Button>
<Button size="md" variant="subtle" color="gray" radius="md" onClick={onClose}>
Maybe later
</Button>
</Stack>
</Modal>
);
};

0 comments on commit 9def292

Please # to comment.