feat: update styling

src/containers/Modals/UpgradeModal/index.tsx

@@ -14,7 +14,8 @@ import {
   List,
   Anchor,
 } from "@mantine/core";
-import { IoIosCheckmarkCircle, IoMdArrowForward } from "react-icons/io";
+import { IoMdArrowForward } from "react-icons/io";
+import { MdCheck } from "react-icons/md";
 import { gaEvent } from "src/lib/utils/gaEvent";
 import { PRICING } from "src/pages/pricing";
 import useUser from "src/store/useUser";
@@ -71,7 +72,14 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
         improve your workflow.
       </Text>
 
-      <Radio.Group value={plan} onChange={setPlan} mt="md" label="Select your plan" size="md">
+      <Radio.Group
+        color="indigo"
+        value={plan}
+        onChange={setPlan}
+        mt="md"
+        label="Select your plan"
+        size="md"
+      >
         <Flex gap="xs" mt="sm" align="center" justify="space-between">
           <Paper
             flex="1"
@@ -100,7 +108,7 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
           >
             <Flex justify="space-between">
               <Radio value="annual" label="Annual" size="xs" />
-              <Badge variant="light" color="blue" size="xs" radius="sm">
+              <Badge variant="light" color="indigo" size="xs" radius="sm">
                 Save 16%
               </Badge>
             </Flex>
@@ -114,9 +122,7 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
       <List
         fz="sm"
         lts={0.2}
-        icon={
+        icon={<MdCheck color="#5199FF" size={20} style={{ verticalAlign: "middle" }} />}
-          <IoIosCheckmarkCircle color="#008736" size={20} style={{ verticalAlign: "middle" }} />
-        }
       >
         <List.Item>Compact Graph Visualization (50% less nodes)</List.Item>
         <List.Item>Improved Performance 4X Faster</List.Item>
@@ -142,8 +148,8 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
             /mo (billed {plan === "monthly" ? "monthly" : "annually"})
           </Text>
         </Flex>
-        <Button onClick={handleSelect} color="blue" rightSection={<IoMdArrowForward />}>
+        <Button onClick={handleSelect} color="indigo" rightSection={<IoMdArrowForward />}>
-          Upgrade to Pro
+          Upgrade
         </Button>
       </Flex>
     </Modal>

src/containers/Toolbar/index.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { Button, Flex, Group, Indicator, Select, Text } from "@mantine/core";
+import { Button, Flex, Group, Select } from "@mantine/core";
-import { useSessionStorage } from "@mantine/hooks";
 import toast from "react-hot-toast";
 import { AiOutlineFullscreen } from "react-icons/ai";
 import { AiFillGift } from "react-icons/ai";
@@ -38,10 +37,6 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
   const setVisible = useModal(state => state.setVisible);
   const setFormat = useFile(state => state.setFormat);
   const format = useFile(state => state.format);
-  const [seenPremium, setSeenPremium] = useSessionStorage({
-    key: "seenPremium",
-    defaultValue: false,
-  });
 
   return (
     <Styles.StyledTools>
@@ -86,7 +81,6 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
             variant="gradient"
             leftSection={<AiFillGift />}
             onClick={() => {
-              setSeenPremium(true);
               setVisible("upgrade")(true);
               gaEvent("Toolbar", "click upgrade premium");
             }}

src/layout/Footer.tsx

@@ -20,14 +20,14 @@ export const Footer = () => {
   return (
     <Container mt={150}>
       <Stack align="center">
-        <Title c="black" order={3}>
+        <Title fz={26} c="gray.7" lts={-1} order={3} ta="center">
-          Get Started with JSON Crack
+          Designed for everyone
+          <br />
+          Save time understanding your data.
         </Title>
-        <Text fz="lg" c="dimmed" ta="center">
+
-          Designed for everyone, save time understanding your data.
-        </Text>
         <Button
-          color="dark"
+          variant="gradient"
           component={Link}
           prefetch={false}
           href="/pricing"
@@ -37,7 +37,7 @@ export const Footer = () => {
           Get Started
         </Button>
       </Stack>
-      <Divider my={60} />
+      <Divider my={60} color="gray.3" />
       <Flex justify="space-between">
         <Stack gap={4} visibleFrom="sm">
           <JSONCrackLogo />

src/pages/docs.tsx

@@ -39,7 +39,7 @@ const Docs = () => {
     <Layout>
       <Head>
         <title>Embed - JSON Crack</title>
-        <meta name="description" content="Embedding JSON Crack tutorial into your websites." />
+        <meta name="description" content="Integrate JSON Crack widgets into your website." />
       </Head>
       <Stack mx="auto" maw="90%">
         <Group mb="lg" mt={40}>

src/pages/editor.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/router";
 import { useMantineColorScheme } from "@mantine/core";
 import styled, { ThemeProvider } from "styled-components";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { metaDescription } from "src/constants/landing";
 import { darkTheme, lightTheme } from "src/constants/theme";
 import { Editor } from "src/containers/Editor";
 import { BottomBar } from "src/containers/Editor/BottomBar";
@@ -57,6 +58,9 @@ const EditorPage = () => {
     <>
       <Head>
         <title>Editor | JSON Crack</title>
+        <meta name="description" content={metaDescription} key="description" />
+        <meta property="og:description" content={metaDescription} key="ogdescription" />
+        <meta name="twitter:description" content={metaDescription} key="twdescription" />{" "}
         <link rel="canonical" href="https://jsoncrack.com/editor" />
       </Head>
       <ThemeProvider theme={darkmodeEnabled ? darkTheme : lightTheme}>

src/pages/index.tsx

@@ -388,12 +388,12 @@ export const HomePage = () => {
               pos="relative"
               ref={card1 as React.RefObject<HTMLDivElement>}
               p={30}
-              withBorder
               shadow="xs"
               radius="md"
               w="100%"
               h={{ sm: 300, md: 370 }}
               style={{
+                border: "1px solid #ffc1c1",
                 overflow: "hidden",
                 background: bg1,
               }}
@@ -433,12 +433,12 @@ export const HomePage = () => {
             <Paper
               ref={card2 as React.RefObject<HTMLDivElement>}
               p={30}
-              withBorder
               shadow="xs"
               radius="md"
               w="100%"
               h={{ sm: 300, md: 370 }}
               style={{
+                border: "1px solid #bfffb5",
                 overflow: "hidden",
                 background: bg2,
               }}
@@ -478,12 +478,12 @@ export const HomePage = () => {
             <Paper
               ref={card3 as React.RefObject<HTMLDivElement>}
               p={30}
-              withBorder
               shadow="xs"
               radius="md"
               w="100%"
               h={{ sm: 300, md: 370 }}
               style={{
+                border: "1px solid #dbb5ff",
                 overflow: "hidden",
                 background: bg3,
               }}
@@ -524,12 +524,12 @@ export const HomePage = () => {
             <Paper
               ref={card4 as React.RefObject<HTMLDivElement>}
               p={30}
-              withBorder
               shadow="xs"
               radius="md"
               w="100%"
               h={{ sm: 300, md: 370 }}
               style={{
+                border: "1px solid #b5f0ff",
                 overflow: "hidden",
                 background: bg4,
               }}

src/pages/pricing.tsx

@@ -15,6 +15,7 @@ import {
 } from "@mantine/core";
 import styled from "styled-components";
 import { AiOutlineInfoCircle } from "react-icons/ai";
+import { MdCheck } from "react-icons/md";
 import { VscArrowRight } from "react-icons/vsc";
 import Layout from "src/layout/Layout";
 import { gaEvent } from "src/lib/utils/gaEvent";
@@ -110,13 +111,25 @@ export const PricingCards = () => {
             Designed for individuals who works with data regularly.
           </Text>
           <Flex direction="column" justify="space-between">
-            <List spacing="xs" size="sm" mt="xs" c="black" center icon="✦">
+            <List
+              spacing="md"
+              size="sm"
+              mt="xs"
+              c="black"
+              center
+              icon={<MdCheck color="blue" size="18" />}
+            >
               <List.Item>
                 <Text c="gray.7" fw={500} fz="sm">
                   Large data support
                 </Text>
                 <Text c="dimmed" fz="xs">
-                  (Up to ~4 MB)
+                  (~4 MB)
+                </Text>
+              </List.Item>
+              <List.Item>
+                <Text c="gray.7" fw={500} fz="sm">
+                  Store 200 documents
                 </Text>
               </List.Item>
               <List.Item>
@@ -124,6 +137,16 @@ export const PricingCards = () => {
                   Compact graph visualizations & fast rendering
                 </Text>
               </List.Item>
+              <List.Item>
+                <Text c="gray.7" fw={500} fz="sm">
+                  Edit directly on visualizations reflecting on data
+                </Text>
+              </List.Item>
+              <List.Item>
+                <Text c="gray.7" fw={500} fz="sm">
+                  Built-in tabs for multiple documents
+                </Text>
+              </List.Item>
               <List.Item>
                 <Text c="gray.7" fw={500} fz="sm">
                   Compare data differences
@@ -134,21 +157,6 @@ export const PricingCards = () => {
                   AI powered data filter
                 </Text>
               </List.Item>
-              <List.Item>
-                <Text c="gray.7" fw={500} fz="sm">
-                  Edit data directly on visualizations
-                </Text>
-              </List.Item>
-              <List.Item>
-                <Text c="gray.7" fw={500} fz="sm">
-                  Built-in tabs for multiple documents
-                </Text>
-              </List.Item>
-              <List.Item>
-                <Text c="gray.7" fw={500} fz="sm">
-                  Store 200 documents
-                </Text>
-              </List.Item>
             </List>
           </Flex>
         </StyledPaper>
@@ -183,7 +191,14 @@ export const PricingCards = () => {
             Get Started
           </Button>
           <Flex direction="column" justify="space-between">
-            <List spacing="xs" size="sm" mt="lg" c="black" center icon="✦">
+            <List
+              spacing="md"
+              size="sm"
+              mt="lg"
+              c="black"
+              center
+              icon={<MdCheck size="18" color="blue" />}
+            >
               <List.Item>
                 <Text c="gray.7" fw={500} fz="sm">
                   Basic data support