feat: update premium view & features

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`
+  .glowing {
-  font-size: 48px;
+    position: relative;
-  margin-bottom: 0;
+    min-width: 700px;
-  background: linear-gradient(to right, #cf0642 0%, #9344cf 100%);
+    height: 550px;
-  -webkit-text-fill-color: transparent;
+    margin: -150px;
-  -webkit-text-stroke: 3px black;
+    transform-origin: right;
-  -webkit-background-clip: text;
+    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 = () => (
   <StyledPremiumView>
-    <StyledTitle>PLAY BIG!</StyledTitle>
+    <StyledContent>
+      <Title align="center">
+        <Image width="300" src="assets/icon.png" alt="JSON Crack" />
+      </Title>
       <StyledInfo>
-      Upgrade JSON Crack to premium and explore & unlock full potantial of your data!
+        Upgrade JSON Crack to premium and explore full potantial of your data!
       </StyledInfo>
+
+      <List
+        spacing="xs"
+        size="md"
+        center
+        icon={
+          <ThemeIcon color="teal" size={20} radius="xl">
+            <BsCheck size="1rem" />
+          </ThemeIcon>
+        }
+      >
+        <List.Item>JSON Schema support</List.Item>
+        <List.Item>Visualize data at full capability</List.Item>
+        <List.Item>Save & share up to 200 files</List.Item>
+        <List.Item
+          icon={
+            <ThemeIcon color="dark.4" size={20} radius="xl">
+              <BsCheck size="1rem" />
+            </ThemeIcon>
+          }
+        >
+          Edit directly on graph <Badge>Soon</Badge>
+        </List.Item>
+        <List.Item
+          icon={
+            <ThemeIcon color="dark.4" size={20} radius="xl">
+              <BsCheck size="1rem" />
+            </ThemeIcon>
+          }
+        >
+          Gerenate links from API <Badge>Soon</Badge>
+        </List.Item>
+      </List>
+
       <Button
+        mt="lg"
         size="lg"
         component="a"
         variant="gradient"
-      gradient={{ from: "purple", to: "pink" }}
+        gradient={{ from: "blue", to: "teal" }}
-      href="https://www.patreon.com/herowand"
+        href="https://www.patreon.com/join/herowand/checkout?rid=8549056"
         target="_blank"
-      style={{ border: "2px solid black" }}
       >
-      DO IT!
+        UPGRADE TO PREMIUM $5.00
       </Button>
-    <img src="/assets/undraw_to_the_stars_re_wq2x.svg" width="300" height="300" alt="oops" />
+    </StyledContent>
+
+    <div className="glowing">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
   </StyledPremiumView>
 );

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<ModalProps> = ({ opened, onClose }) => {
           </Title>
           <Button
             component="a"
-            href="https://www.patreon.com/herowand"
+            href="https://www.patreon.com/join/herowand/checkout?rid=8549056"
             variant="filled"
             color="teal"
             size="md"
@@ -72,6 +73,24 @@ export const PremiumModal: React.FC<ModalProps> = ({ opened, onClose }) => {
             <List.Item>JSON Schema support</List.Item>
             <List.Item>Visualize data at full capability</List.Item>
             <List.Item>Save up to 200 files</List.Item>
+            <List.Item
+              icon={
+                <ThemeIcon color="dark.5" size={20} radius="xl">
+                  <BsCheck size="1rem" />
+                </ThemeIcon>
+              }
+            >
+              Edit directly on graph <Badge>Soon</Badge>
+            </List.Item>
+            <List.Item
+              icon={
+                <ThemeIcon color="dark.5" size={20} radius="xl">
+                  <BsCheck size="1rem" />
+                </ThemeIcon>
+              }
+            >
+              Gerenate links from API <Badge>Soon</Badge>
+            </List.Item>
           </List>
         </Stack>
       </Flex>