update landing

src/data/faq.json

@@ -1,7 +1,11 @@
 [
   {
     "title": "What is JSON Crack and what does it do?",
-    "content": "JSON Crack is a versatile online tool designed to visualize and analyze various data formats, including JSON, YAML, CSV, XML and more. It transforms complex data into intuitive graphs and tree views, making it ideal for developers, data analysts, and anyone working with structured data."
+    "content": "JSON Crack is an online JSON viewer tool designed to visualize and analyze various data formats, including JSON, YAML, CSV, XML and more. It transforms complex data into intuitive graphs and tree views, making it ideal for developers, data analysts, and anyone working with structured data."
+  },
+  {
+    "title": "How is it different than traditional JSON viewers?",
+    "content": "While traditional JSON Viewers and JSON formatters only allow you to work with raw data on text editors, JSON Crack offers a unique visual representation of your data, making it easier to understand and analyze complex data structures. It provides a tree view and graph view to help you visualize your data in different ways."
   },
   {
     "title": "Is JSON Crack free?",

src/layout/Landing/Features.tsx

@@ -25,36 +25,36 @@ interface FeatureItem {
 
 const features: FeatureItem[] = [
   {
-    title: "Visualizer",
+    title: "JSON Visualizer",
     description:
       "Transform your data into interactive graphs or trees as you type. Supports JSON, YAML, CSV, XML, and TOML.",
     icon: <FaBolt size={20} />,
     color: "yellow",
   },
   {
-    title: "Convert",
+    title: "Convert Data",
     description:
       "Convert JSON to CSV, YAML to JSON, XML to JSON, and more. Our JSON converter supports multiple formats for easy data exchange.",
     icon: <TbTransformFilled size={20} />,
     color: "orange",
   },
   {
-    title: "Format & Validate",
+    title: "JSON Formatter and JSON Validator",
     description:
       "Format and beautify your JSON data to make it more readable. Validate JSON, YAML, and CSV.",
     icon: <MdOutlineFormatIndentIncrease size={20} />,
     color: "green",
   },
   {
-    title: "Generate Code",
-    description: "Generate TypeScript interface, Golang structs, JSON Schema and more.",
+    title: "Generate Code/Types",
+    description: "Generate TypeScript interface, Golang structs, Rust serde, JSON Schema and more.",
     icon: <MdOutlineGeneratingTokens size={20} />,
     color: "grape",
   },
   {
-    title: "JSON Schema",
+    title: "JSON Schema Generator",
     description:
-      "Generate JSON Schema, create mock data, and validate JSON Schema from various data formats like JSON, YAML, XML, and CSV.",
+      "Validate JSON Schema, create mock data, and generate JSON Schema from various data formats like JSON, YAML, XML, and CSV.",
     icon: <VscJson size={20} />,
     color: "cyan",
   },
@@ -65,9 +65,9 @@ const features: FeatureItem[] = [
     color: "teal.5",
   },
   {
-    title: "Download Image",
+    title: "Export Image",
     description:
-      "Export image of the graph as PNG, JPEG, or SVG. Share your data visualization with others.",
+      "Export image of the graphs as PNG, JPEG, or SVG. Share your data visualization with others.",
     icon: <IoImages size={20} />,
     color: "blue.4",
   },
@@ -122,8 +122,7 @@ export const Features = () => {
           fz={{ base: 16, sm: 18 }}
           w={{ base: "100%", xs: "80%", sm: "60%", md: "40%" }}
         >
-          All in one tool for JSON, YAML, CSV, XML, and TOML. Formatter, validator, visualizer, and
-          editor.
+          All in one tool for JSON, YAML, CSV, XML, and TOML.
         </Title>
 
         <SimpleGrid

src/layout/Landing/HeroSection.tsx

@@ -120,8 +120,8 @@ export const HeroSection = () => {
           </Link>
           <StyledHeroTitle>Visualize JSON into interactive graphs</StyledHeroTitle>
           <StyledHeroText>
-            The best online JSON viewer tool to <strong>visualize</strong>, <strong>format</strong>{" "}
-            and <strong>explore</strong>.
+            The best online JSON viewer to <strong>visualize</strong>, <strong>format</strong> and{" "}
+            <strong>explore</strong>.
           </StyledHeroText>
 
           <Flex gap="xs" wrap="wrap" justify="center" hiddenFrom="xs">

src/layout/Landing/LovedBy.tsx

@@ -61,7 +61,7 @@ const Featured = ({ stars }: LovedByProps) => {
 
 export const LovedBy = ({ stars }: LovedByProps) => {
   return (
-    <Container pos="relative" mx="auto" py={80}>
+    <Container pos="relative" mx="auto" pb="20" pt={60}>
       <Featured stars={stars} />
       <Flex wrap="wrap" justify="center" gap="md" mt="md">
         <Button

src/layout/Landing/Section1.tsx

@@ -1,42 +1,20 @@
 import React from "react";
-import Link from "next/link";
-import {
-  Button,
-  Container,
-  Flex,
-  Image,
-  JsonInput,
-  List,
-  SimpleGrid,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
+import { Container, Image, SimpleGrid, Stack, Text, Title } from "@mantine/core";
 import styled from "styled-components";
-import { LuBadgeCheck } from "react-icons/lu";
 
-const StyledDottedContainer = styled.div`
+const StyledImageWrapper = styled.div`
   position: relative;
-  background-color: #f3f3f3;
-  background-image: radial-gradient(#e0e0e0 3px, transparent 0);
-  background-size: 40px 40px;
-  border: 1px solid #e0e0e0;
 
-  width: 100%;
-  min-width: 300px;
-  max-width: 500px;
-  border-radius: 15px;
-  height: 460px;
-
-  .jc {
+  &::after {
+    content: "";
     position: absolute;
+    width: 100%;
+    height: 100%;
     top: 0;
     left: 0;
     padding: 12px;
     border-radius: 15px;
-    transform: translate(-80px, 10%);
-    border: 1px solid #000;
-    box-shadow: 0px 4px 0px 0px #000;
+    border: 1px solid #e0e0e0;
     background: #f3f3f3;
     --line-color-1: #e3e3e3;
     --line-color-2: #e5e5e5;
@@ -56,111 +34,113 @@ const StyledDottedContainer = styled.div`
       20px 20px;
   }
 
-  .jcode {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(80%, 80%);
-    width: 273px;
-    border-radius: 15px;
-    border: 1px solid #000;
-    box-shadow: 0px 4px 0px 0px #000;
-    overflow: hidden;
-  }
-
-  @media only screen and (max-width: 1085px) {
-    display: none;
+  img {
+    z-index: 1;
   }
 `;
 
 export const Section1 = () => {
   return (
     <Container size="xl" py="80">
-      <Flex justify="center" align="center">
-        <Stack maw={634}>
-          <Title
-            lh="1.1"
-            fz={{
-              base: 26,
-              xs: 32,
-              sm: 42,
-            }}
-            maw={500}
-            order={2}
-            c="gray.9"
-          >
-            Don&apos;t waste time with JSON formatters
+      <Title
+        lh="1.1"
+        fz={{
+          base: 26,
+          xs: 46,
+          sm: 52,
+        }}
+        maw="16ch"
+        ta="center"
+        order={2}
+        c="gray.9"
+        mx="auto"
+        mb="15"
+      >
+        Make working with JSON easy
+      </Title>
+      <Title
+        order={3}
+        fw={400}
+        c="gray.7"
+        px="lg"
+        mx="auto"
+        ta="center"
+        mb={50}
+        fz={{ base: 16, sm: 18 }}
+        w={{ base: "100%", md: "600" }}
+      >
+        JSON Crack eliminates the chaos of raw, messy data, making the complex appear simple and
+        easy to understand.
+      </Title>
+      <SimpleGrid
+        cols={{
+          base: 1,
+          sm: 3,
+        }}
+      >
+        <Stack
+          p="lg"
+          m="lg"
+          maw="360"
+          mx="auto"
+          style={{
+            borderRadius: "17px",
+            border: "1px solid #e0e0e0",
+          }}
+        >
+          <StyledImageWrapper>
+            <Image src="/assets/step1-visual.png" pos="relative" w="100%" alt="upload" />
+          </StyledImageWrapper>
+          <Title ta="center" order={3}>
+            Upload your data
+          </Title>
+          <Text ta="center" c="gray.7">
+            Upload your JSON file, URL, or type your data directly into our easy-to-use text editor.
+          </Text>
+        </Stack>
+        <Stack
+          p="lg"
+          m="lg"
+          maw="360"
+          mx="auto"
+          style={{
+            borderRadius: "17px",
+            border: "1px solid #e0e0e0",
+          }}
+        >
+          <StyledImageWrapper>
+            <Image src="/assets/step2-visual.png" pos="relative" w="100%" alt="visualize" />
+          </StyledImageWrapper>
+          <Title ta="center" order={3}>
+            Visualize your JSON
+          </Title>
+          <Text ta="center" c="gray.7">
+            Your data will automatically be turned into a visual tree graph so you can quickly
+            understand your data at a glance.
+          </Text>
+        </Stack>
+        <Stack
+          p="lg"
+          m="lg"
+          maw="360"
+          mx="auto"
+          style={{
+            borderRadius: "17px",
+            border: "1px solid #e0e0e0",
+          }}
+        >
+          <StyledImageWrapper>
+            <Image src="/assets/step3-visual.png" pos="relative" w="100%" alt="export image" />
+          </StyledImageWrapper>
+          <Title ta="center" order={3}>
+            Export to image
           </Title>
-          <Text my="md" c="gray.6" fz={16} maw={510}>
-            The days of getting lost in lines of code are over. JSON Crack gives you the most
-            optimal view of your data so you can make insights faster than ever.
+          <Text ta="center" c="gray.7">
+            Once you&apos;re satisfied, you can export an image of your graph as PNG, JPEG, or SVG
+            and share with others.
           </Text>
-          <List
-            fz={{
-              base: 16,
-              xs: 18,
-            }}
-            fw={500}
-            component={SimpleGrid}
-            c="gray.8"
-            icon={<LuBadgeCheck size="20" />}
-          >
-            <SimpleGrid w="fit-content" cols={2}>
-              <List.Item>Clear, concise data presentation</List.Item>
-              <List.Item>Fast decision-making</List.Item>
-              <List.Item>Grasp patterns and relationships faster</List.Item>
-              <List.Item>Share insights with teams easier</List.Item>
-            </SimpleGrid>
-          </List>
-          <Link href="/editor" prefetch={false}>
-            <Button color="#202842" size="lg" radius="md" w="fit-content" mt="sm">
-              Use for free
-            </Button>
-          </Link>
         </Stack>
-        <StyledDottedContainer>
-          <Image className="jc" src="/assets/jsoncrack.svg" alt="json crack" loading="lazy" />
-          <JsonInput
-            w={273}
-            rows={12}
-            className="jcode"
-            styles={{
-              input: {
-                border: "none",
-                fontSize: 12,
-              },
-            }}
-            value={JSON.stringify(
-              {
-                squadName: "Super hero squad",
-                homeTown: "Metro City",
-                formed: 2016,
-                secretBase: "Super tower",
-                active: true,
-                members: [
-                  {
-                    name: "Molecule Man",
-                    age: 29,
-                    secretIdentity: "Dan Jukes",
-                  },
-                  {
-                    name: "Madame Uppercut",
-                    age: 39,
-                    secretIdentity: "Jane Wilson",
-                  },
-                  {
-                    name: "Eternal Flame",
-                    age: 1000000,
-                    secretIdentity: "Unknown",
-                  },
-                ],
-              },
-              null,
-              2
-            )}
-          />
-        </StyledDottedContainer>
-      </Flex>
+      </SimpleGrid>
     </Container>
   );
 };