styling

src/containers/Landing/HeroSection.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Plus_Jakarta_Sans } from "next/font/google";
 import Link from "next/link";
-import { Stack, Flex, Text, Button, Badge } from "@mantine/core";
+import { Stack, Flex, Button, Badge } from "@mantine/core";
 import styled from "styled-components";
 import { FaChevronRight, FaFire } from "react-icons/fa6";
 
@@ -148,9 +148,6 @@ export const HeroSection = () => {
               Go to Editor
             </Button>
           </Flex>
-          <Text ta="center" size="xs" c="dimmed">
-            Supports JSON, CSV, XML, YAML, TOML
-          </Text>
         </Stack>
       </StyledHeroSectionBody>
     </StyledHeroSection>

src/containers/Toolbar/index.tsx

@@ -1,12 +1,11 @@
 import React from "react";
-import { Text, Flex, Group, Select } from "@mantine/core";
+import { Text, Flex, Group, Select, Image } from "@mantine/core";
 import toast from "react-hot-toast";
 import { AiOutlineFullscreen } from "react-icons/ai";
 import { FiDownload } from "react-icons/fi";
 import { SearchInput } from "src/containers/Toolbar/SearchInput";
 import { FileFormat } from "src/enums/file.enum";
 import { JSONCrackLogo } from "src/layout/JsonCrackLogo";
-import { gaEvent } from "src/lib/utils/gaEvent";
 import useFile from "src/store/useFile";
 import useModal from "src/store/useModal";
 import useUser from "src/store/useUser";
@@ -80,14 +79,14 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
       <Group gap="xs" justify="right" w="100%" style={{ flexWrap: "nowrap" }}>
         {!isWidget && (
           <Styles.StyledToolElement
-            onClick={() => {
+            onClick={() => window.open("https://todiagram.com?ref=jsoncrack.com")}
-              setVisible("upgrade")(true);
-              gaEvent("Toolbar", "click upgrade premium");
-            }}
           >
-            <Text c="bright" fw={600} fz="xs">
+            <Flex align="center" gap="4">
-              Upgrade Editor
+              <Image src="https://todiagram.com/logo.svg" alt="ToDiagram" width={14} height={14} />
-            </Text>
+              <Text c="bright" fw={600} fz="xs">
+                ToDiagram
+              </Text>
+            </Flex>
           </Styles.StyledToolElement>
         )}
 

src/layout/Navbar.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Link from "next/link";
 import { Button } from "@mantine/core";
 import styled from "styled-components";
 import { JSONCrackLogo } from "./JsonCrackLogo";
@@ -60,15 +59,14 @@ export const Navbar = () => {
         </Left>
         <Center>
           <Button
-            component={Link}
+            component="a"
-            prefetch={false}
+            href="https://todiagram.com"
-            href="/#pricing"
             variant="subtle"
             color="black"
             size="md"
             radius="md"
           >
-            Pricing
+            Upgrade
           </Button>
           <Button
             component="a"
@@ -113,7 +111,7 @@ export const Navbar = () => {
             visibleFrom="sm"
             size="md"
           >
-            Free editor
+            Editor
           </Button>
         </Right>
       </StyledNavbar>