From 1a7c5a53218c9e5857f0ff798ea81ef241168953 Mon Sep 17 00:00:00 2001 From: AykutSarac Date: Fri, 12 May 2023 13:16:31 +0300 Subject: [PATCH] feat: update premium view & features --- public/assets/undraw_to_the_stars_re_wq2x.svg | 1 - src/components/Graph/PremiumView.tsx | 204 +++++++++++++++--- src/containers/Modals/PremiumModal/index.tsx | 21 +- 3 files changed, 199 insertions(+), 27 deletions(-) delete mode 100644 public/assets/undraw_to_the_stars_re_wq2x.svg diff --git a/public/assets/undraw_to_the_stars_re_wq2x.svg b/public/assets/undraw_to_the_stars_re_wq2x.svg deleted file mode 100644 index a7f9eff..0000000 --- a/public/assets/undraw_to_the_stars_re_wq2x.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Graph/PremiumView.tsx b/src/components/Graph/PremiumView.tsx index b6ec59e..f74a52b 100644 --- a/src/components/Graph/PremiumView.tsx +++ b/src/components/Graph/PremiumView.tsx @@ -1,27 +1,121 @@ import React from "react"; import styled from "styled-components"; -import { Button } from "@mantine/core"; +import { Badge, Button, Image, List, ThemeIcon, Title } from "@mantine/core"; +import { BsCheck } from "react-icons/bs"; const StyledPremiumView = styled.div` + position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; + background: #020015; img { filter: drop-shadow(2px 4px 6px black); } -`; -const StyledTitle = styled.h2` - font-size: 48px; - margin-bottom: 0; - background: linear-gradient(to right, #cf0642 0%, #9344cf 100%); - -webkit-text-fill-color: transparent; - -webkit-text-stroke: 3px black; - -webkit-background-clip: text; + .glowing { + position: relative; + min-width: 700px; + height: 550px; + margin: -150px; + transform-origin: right; + animation: colorChange 5s linear infinite; + } + + .glowing:nth-child(even) { + transform-origin: left; + } + + @keyframes colorChange { + 0% { + filter: hue-rotate(0deg); + transform: rotate(0deg); + } + 100% { + filter: hue-rotate(360deg); + transform: rotate(360deg); + } + } + + .glowing span { + --i: 1; + position: absolute; + top: calc(80px * var(--i)); + left: calc(80px * var(--i)); + bottom: calc(80px * var(--i)); + right: calc(80px * var(--i)); + } + + .glowing span::before { + content: ""; + position: absolute; + top: 50%; + left: -8px; + width: 15px; + height: 15px; + background: #f00; + border-radius: 50%; + } + + .glowing span:nth-child(3n + 1)::before { + background: rgba(134, 255, 0, 1); + box-shadow: 0 0 20px rgba(134, 255, 0, 1), 0 0 40px rgba(134, 255, 0, 1), + 0 0 60px rgba(134, 255, 0, 1), 0 0 80px rgba(134, 255, 0, 1), 0 0 0 8px rgba(134, 255, 0, 0.1); + } + + .glowing span:nth-child(3n + 2)::before { + background: rgba(255, 214, 0, 1); + box-shadow: 0 0 20px rgba(255, 214, 0, 1), 0 0 40px rgba(255, 214, 0, 1), + 0 0 60px rgba(255, 214, 0, 1), 0 0 80px rgba(255, 214, 0, 1), 0 0 0 8px rgba(255, 214, 0, 0.1); + } + + .glowing span:nth-child(3n + 3)::before { + background: rgba(0, 226, 255, 1); + box-shadow: 0 0 20px rgba(0, 226, 255, 1), 0 0 40px rgba(0, 226, 255, 1), + 0 0 60px rgba(0, 226, 255, 1), 0 0 80px rgba(0, 226, 255, 1), 0 0 0 8px rgba(0, 226, 255, 0.1); + } + + .glowing span:nth-child(3n + 1) { + animation: animate 10s alternate infinite; + } + + .glowing span:nth-child(3n + 2) { + animation: animate-reverse 3s alternate infinite; + } + + .glowing span:nth-child(3n + 3) { + animation: animate 8s alternate infinite; + } + + @keyframes animate { + 0% { + transform: rotate(180deg); + } + 50% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + + @keyframes animate-reverse { + 0% { + transform: rotate(360deg); + } + + 50% { + transform: rotate(180deg); + } + + 100% { + transform: rotate(0deg); + } + } `; const StyledInfo = styled.p` @@ -32,23 +126,83 @@ const StyledInfo = styled.p` color: ${({ theme }) => theme.TEXT_NORMAL}; `; +const StyledContent = styled.div` + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + background: rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); +`; + export const PremiumView = () => ( - PLAY BIG! - - Upgrade JSON Crack to premium and explore & unlock full potantial of your data! - - - oops + + + <Image width="300" src="assets/icon.png" alt="JSON Crack" /> + + + Upgrade JSON Crack to premium and explore full potantial of your data! + + + + + + } + > + JSON Schema support + Visualize data at full capability + Save & share up to 200 files + + + + } + > + Edit directly on graph Soon + + + + + } + > + Gerenate links from API Soon + + + + + + +
+ + + +
); diff --git a/src/containers/Modals/PremiumModal/index.tsx b/src/containers/Modals/PremiumModal/index.tsx index 59052cb..2e81fd3 100644 --- a/src/containers/Modals/PremiumModal/index.tsx +++ b/src/containers/Modals/PremiumModal/index.tsx @@ -10,6 +10,7 @@ import { ThemeIcon, Divider, Text, + Badge, } from "@mantine/core"; import { BsCheck } from "react-icons/bs"; @@ -51,7 +52,7 @@ export const PremiumModal: React.FC = ({ opened, onClose }) => {