update icon

README.md

@@ -1,7 +1,7 @@
 <!-- PROJECT LOGO -->
 <p align="center">
   <a href="https://github.com/AykutSarac/jsoncrack.com">
-   <img src="./public/assets/logo.svg" height="50" alt="Logo">
+   <img src="./public/assets/192.png" height="50" alt="Logo">
   </a>
 
   <h1 align="center">JSON Crack</h1>

public/assets/logo.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="249.07 216.24 530.15 601.4">
-  <path fill="#ffffff" d="M259.286 506.227c31.525-16.358 62.73-32.527 93.914-48.734 6.557-3.407 12.364-3.634 19.026.907 24.082 16.42 48.558 32.26 72.887 48.318 1.103.728 2.353 1.295 2.949 3.041l-150.27 186.393c-6.728-3.874-13.7-7.689-20.455-11.856-3.973-2.451-7.977-4.796-12.11-6.97-9.961-5.238-15.91-12.533-15.812-24.858.361-45.484.073-90.972-.043-136.459-.008-3.344.829-5.723 4.235-6.913 1.87-.653 3.573-1.78 5.679-2.869zM779.167 447c-.016 22.83-.131 45.161.034 67.49.033 4.406-1.374 6.96-5.38 8.985-33.294 16.83-66.504 33.827-99.693 50.864-2.529 1.298-4.443 1.328-6.871-.261-26.065-17.06-52.199-34.012-78.3-51.015-1.505-.98-3.276-1.728-4.19-4.197 5.251-6.655 10.649-13.589 16.144-20.444 40.116-50.049 80.251-100.082 120.382-150.119.416-.52.833-1.04 1.264-1.549 4.866-5.752 4.822-5.678 11.253-1.763 10.247 6.237 20.468 12.525 30.872 18.49 9.968 5.716 14.493 14.317 14.514 25.527.036 19.164-.015 38.328-.029 57.992zM318.03 699.88c33.655-.05 66.816-.224 99.977-.07 13.86.063 24.849-5.57 33.675-15.726 6.88-7.918 13.437-16.13 19.873-24.416 2.596-3.341 4.458-4.178 8.468-1.562 22.043 14.379 44.358 28.34 66.498 42.571 4.21 2.706 8.457 4.055 13.554 4.001 24.824-.258 49.651-.203 74.478-.29 1.559-.005 2.926.264 4.193 1.243 9.888 7.637 19.806 15.235 29.684 22.885.603.467.946 1.271 1.615 2.206-6.63 5.153-13.958 8.76-20.966 12.834-39.448 22.938-79.094 45.538-118.377 68.754-11.96 7.068-22.565 7.136-34.557.07-58.268-34.332-116.788-68.234-175.214-102.297-5.608-3.27-11.19-6.588-16.761-9.92-.912-.546-2.225-.846-2.02-2.97 4.817 3.49 10.15 2.737 15.88 2.687zM416.243 271.203c27.327-16.681 54.446-33.008 81.31-49.744 11.137-6.939 21.417-6.944 32.687-.1 62.223 37.783 124.622 75.275 186.953 112.882 1.246.752 2.804 1.19 3.404 3.066-1.708 1.766-3.984 1-5.976 1.002-36.493.033-72.986.054-109.478-.048-12.647-.036-23.013 4.069-30.544 14.732-3.93 5.565-8.65 10.566-12.84 15.958-2.033 2.617-3.793 2.93-6.681 1.084-18.807-12.022-37.74-23.845-56.583-35.81-3.203-2.033-6.48-3.008-10.323-2.99-24.828.114-49.657-.003-74.485.135-3.802.02-6.63-1.016-9.202-3.85-9.276-10.221-18.72-20.288-28.752-31.115 13.066-9.16 26.947-16.602 40.51-25.202z"/>
-  <path fill="#ffffff" d="M560.677 548.71c3.24-4.045 6.354-7.743 9.228-11.618 1.803-2.43 3.47-3.123 6.226-1.303 26.674 17.612 53.39 35.16 80.134 52.666 2.38 1.558 2.66 3.288 2.008 5.92-7.077 28.578-14.11 57.166-20.942 85.803-.954 3.998-2.644 5.346-6.75 5.315-23.645-.178-47.294-.119-70.941-.057-2.947.008-5.455-.71-7.958-2.304-20.22-12.877-40.456-25.73-60.81-38.39-3.634-2.26-3.954-3.753-1.195-7.18 23.701-29.438 47.207-59.032 71-88.852zM375.117 388.978c-4.419 13.846-8.757 27.3-13 40.784-.995 3.16-2.56 5.523-5.651 7.146-23.726 12.457-47.376 25.057-71.06 37.592-9.268 4.905-18.545 9.795-27.864 14.602-2.167 1.118-4.234 2.665-6.908 2.627-1.613-1.9-1.126-4.161-1.13-6.234-.048-27.64.037-55.279-.079-82.917-.025-5.976-.78-11.917.007-17.929 1.123-8.581 5.496-14.822 12.726-19.265 20.568-12.64 41.144-25.27 61.712-37.912 14.891-9.152 29.813-18.257 44.625-27.537 2.415-1.513 3.693-1.54 5.037 1.109 5.727 11.28 11.563 22.504 17.361 33.748.93 1.804.416 3.545-.152 5.317-5.18 16.16-10.342 32.325-15.624 48.87zM416.091 348.937c23.637-.008 46.787.01 69.937-.056 2.601-.008 4.835.574 7.043 1.978 16.72 10.627 33.435 21.265 50.287 31.68 3.982 2.462 4.33 4.172 1.25 7.955-27.117 33.309-54.055 66.763-80.906 100.286-2.58 3.22-4.316 3.907-8.027 1.446-25.11-16.66-50.366-33.103-75.658-49.486-2.77-1.794-2.737-3.644-1.849-6.303 8.064-24.145 16.064-48.312 24.068-72.477.732-2.21 1.364-4.452 2.053-6.676 2.59-8.36 2.592-8.36 11.802-8.347zM717.313 571.267c20.332-10.649 40.339-21.116 60.146-31.48 2.246 1.888 1.712 3.845 1.713 5.582.007 35.824-.106 71.647-.008 107.47.029 10.507-4.298 18.44-13.23 23.572-29.736 17.087-59.59 33.972-89.701 51.107-5.686-6.682-10.809-14.257-17.447-20.116-8.431-7.441-7.937-15.088-5.146-24.832 7.788-27.185 14.827-54.592 21.692-82.029 1.508-6.026 4.756-9.596 9.849-12.268 10.62-5.572 21.206-11.212 32.132-17.006z"/>
-</svg>

src/layout/JsonCrackLogo.tsx

@@ -15,8 +15,6 @@ const StyledLogoWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: 8px;
-  color: white;
-  mix-blend-mode: difference;
 `;
 
 const StyledTitle = styled.span<{ fontSize: string }>`
@@ -27,6 +25,8 @@ const StyledTitle = styled.span<{ fontSize: string }>`
   white-space: nowrap;
   z-index: 10;
   vertical-align: middle;
+  color: white;
+  mix-blend-mode: difference;
 `;
 
 interface LogoProps extends React.ComponentPropsWithoutRef<"div"> {
@@ -47,11 +47,12 @@ export const JSONCrackLogo = ({ fontSize = "1.2rem", hideText, hideLogo, ...prop
       <StyledLogoWrapper>
         {!hideLogo && (
           <Image
-            src="/assets/logo.svg"
+            src="/assets/192.png"
             loading="eager"
             width={parseFloat(fontSize) * 18}
             height={parseFloat(fontSize) * 18}
             alt="logo"
+            radius={4}
             mb="2"
           />
         )}

src/layout/Landing/HeroSection.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Plus_Jakarta_Sans } from "next/font/google";
-import Link from "next/link";
+import { Stack, Flex, Button } from "@mantine/core";
-import { Stack, Flex, Button, Image } from "@mantine/core";
 import styled from "styled-components";
 import { FaChevronRight } from "react-icons/fa6";
 
@@ -106,18 +105,6 @@ export const HeroSection = () => {
     <StyledHeroSection>
       <StyledHeroSectionBody>
         <Stack flex="1" miw={250} mx="auto" align="center">
-          <Link href="https://todiagram.com?utm_source=jsoncrack&utm_medium=hero" rel="noopener">
-            <Flex justify="center" fz="sm" c="gray.8" gap="8" align="center">
-              built by
-              <Image
-                src="/assets/todiagram_logo.png"
-                alt="Todiagram Logo"
-                h={14}
-                w="fit-content"
-                loading="eager"
-              />
-            </Flex>
-          </Link>
           <StyledHeroTitle>Visualize JSON into interactive graphs</StyledHeroTitle>
           <StyledHeroText>
             The best online JSON viewer to <strong>visualize</strong>, <strong>format</strong> and{" "}
@@ -133,6 +120,7 @@ export const HeroSection = () => {
               radius="md"
               rightSection={<FaChevronRight />}
               fw="500"
+              mt="lg"
             >
               Go to Editor
             </Button>
@@ -146,6 +134,7 @@ export const HeroSection = () => {
               radius="md"
               rightSection={<FaChevronRight />}
               fw="500"
+              mt="lg"
             >
               Go to Editor
             </Button>

src/layout/Landing/LovedBy.tsx

@@ -90,7 +90,7 @@ export const LovedBy = ({ stars }: LovedByProps) => {
           color="#fe5e49"
           leftSection={
             <Image
-              src="https://todiagram.com/logo.svg"
+              src="https://todiagram.com/192.png"
               loading="lazy"
               alt="Todiagram Logo"
               w={14}

src/layout/Landing/Section2.tsx

@@ -124,7 +124,7 @@ export const Section2 = () => {
           </Button>
         </Stack>
         <StyledDottedContainer>
-          <Image className="jc" src="/assets/jsoncrack.svg" alt="json crack" loading="lazy" />
+          <Image className="jc" src="/assets/diagram.svg" alt="diagram" loading="lazy" />
           <JsonInput
             w={273}
             rows={12}

src/store/useFile.ts

@@ -46,7 +46,7 @@ const defaultJson = JSON.stringify(
       twitter: "https://x.com/jsoncrack",
       linkedin: "https://linkedin.com/company/todiagram",
     },
-    images: ["https://jsoncrack.com/assets/logo.svg"],
+    images: ["https://jsoncrack.com/assets/192.png"],
   },
   null,
   2