From a51fe5f8263dd3a28aa183a0b563936a582a56a5 Mon Sep 17 00:00:00 2001 From: AykutSarac Date: Fri, 10 May 2024 22:30:07 +0300 Subject: [PATCH] feat: improve landing --- src/constants/landing.ts | 33 +++++++++++ src/layout/Footer/index.tsx | 24 +++++++- src/pages/index.tsx | 115 ++++++++++++------------------------ src/pages/pricing.tsx | 14 +++-- 4 files changed, 102 insertions(+), 84 deletions(-) create mode 100644 src/constants/landing.ts diff --git a/src/constants/landing.ts b/src/constants/landing.ts new file mode 100644 index 0000000..e855ea9 --- /dev/null +++ b/src/constants/landing.ts @@ -0,0 +1,33 @@ +export const metaDescription = + "JSON Crack Editor is a tool for visualizing into graphs, analyzing, editing, formatting, querying, transforming and validating JSON, CSV, YAML, XML, and more."; + +export const images = Object.freeze([ + { + id: 1, + alt: "Preview of JSON Crack Premium Editor highligting the compact visualization style of the graphs.", + }, + { + id: 2, + alt: "Preview JSON Crack Premium Editor highlighting the data compare feature feature, showing the differences with red background color and using symbols to indicate the changes.", + }, + { + id: 3, + alt: "Preview JSON Crack Premium Editor highlighting the data search feature, showing the search results in the data.", + }, + { + id: 4, + alt: "Preview JSON Crack Premium Editor highlighting the data edit feature, showing the data in a table format with the ability to edit the data directly.", + }, + { + id: 5, + alt: "Preview JSON Crack Premium Editor highlighting the data view options, showing the data in a tree view and graph view.", + }, + { + id: 6, + alt: "Preview JSON Crack Premium Editor highlighting type generation feature. TypeScript, Go, JSON Schema, and more are shown.", + }, + { + id: 7, + alt: "Preview JSON Crack Premium Editor highlighting the image download feature, showing the download options for the data.", + }, +]); diff --git a/src/layout/Footer/index.tsx b/src/layout/Footer/index.tsx index c3ec835..c8dab27 100644 --- a/src/layout/Footer/index.tsx +++ b/src/layout/Footer/index.tsx @@ -1,6 +1,17 @@ import React from "react"; import Link from "next/link"; -import { Anchor, Container, Divider, Flex, Stack, Text, ThemeIcon } from "@mantine/core"; +import { + Anchor, + Button, + Center, + Container, + Divider, + Flex, + Stack, + Text, + ThemeIcon, + Title, +} from "@mantine/core"; import dayjs from "dayjs"; import { FaDiscord, FaGithub, FaLinkedin } from "react-icons/fa"; import { FaXTwitter } from "react-icons/fa6"; @@ -8,7 +19,16 @@ import { JSONCrackLogo } from "../JsonCrackLogo"; export const Footer = () => { return ( - + + + Get Started with JSON Crack + + Designed for everyone, save time understanding your data. + + + diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 80334cd..b391b95 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -6,7 +6,6 @@ import { Accordion, Badge, Button, - Center, Container, Flex, Grid, @@ -23,16 +22,11 @@ import { Carousel } from "@mantine/carousel"; import "@mantine/carousel/styles.css"; import styled from "styled-components"; import { BiChevronDown } from "react-icons/bi"; -import { - MdChevronRight, - MdCompare, - MdExtension, - MdOutlineArrowRightAlt, - MdRebaseEdit, - MdSearch, -} from "react-icons/md"; +import { MdChevronRight, MdCompare, MdExtension, MdRebaseEdit, MdSearch } from "react-icons/md"; import useBackgroundCursorPosition from "use-bg-cursor-pos"; +import { images, metaDescription } from "src/constants/landing"; import Layout from "src/layout/Layout"; +import { gaEvent } from "src/lib/utils/gaEvent"; const PricingCards = dynamic(() => import("./pricing").then(mod => mod.PricingCards)); @@ -182,41 +176,7 @@ const StyledCarouselWrapper = styled.section` } `; -const metaDescription = - "JSON Crack Editor is a tool for visualizing into graphs, analyzing, editing, formatting, querying, transforming and validating JSON, CSV, YAML, XML, and more."; - -const images = [ - { - id: 1, - alt: "Preview of JSON Crack Premium Editor highligting the compact visualization style of the graphs.", - }, - { - id: 2, - alt: "Preview JSON Crack Premium Editor highlighting the data compare feature feature, showing the differences with red background color and using symbols to indicate the changes.", - }, - { - id: 3, - alt: "Preview JSON Crack Premium Editor highlighting the data search feature, showing the search results in the data.", - }, - { - id: 4, - alt: "Preview JSON Crack Premium Editor highlighting the data edit feature, showing the data in a table format with the ability to edit the data directly.", - }, - { - id: 5, - alt: "Preview JSON Crack Premium Editor highlighting the data view options, showing the data in a tree view and graph view.", - }, - { - id: 6, - alt: "Preview JSON Crack Premium Editor highlighting type generation feature. TypeScript, Go, JSON Schema, and more are shown.", - }, - { - id: 7, - alt: "Preview JSON Crack Premium Editor highlighting the image download feature, showing the download options for the data.", - }, -]; - -export const FAQ = [ +export const FAQ = Object.freeze([ { title: "What is JSON Crack and what does it do?", content: @@ -249,7 +209,7 @@ export const FAQ = [ content: "No, JSON Crack does not store your data anywhere unless you upload it manually. When you paste your data into the editor, it's processed on your device only to create the visualization. Your data remains completely private.", }, -]; +]); export const HomePage = () => { const [card1, bg1] = useBackgroundCursorPosition("#f2f2f2", "#ffffff", "200px"); @@ -296,30 +256,47 @@ export const HomePage = () => { TOML - + + + + - ); }; diff --git a/src/pages/pricing.tsx b/src/pages/pricing.tsx index 81a8dce..29de5fc 100644 --- a/src/pages/pricing.tsx +++ b/src/pages/pricing.tsx @@ -31,16 +31,18 @@ const StyledPaperFree = styled(Paper)` border-radius: 1em; border: 3px solid #e9e9e9; background: white; + box-shadow: + 12.5px 12.5px 10px rgba(0, 0, 0, 0.005), + 100px 100px 80px rgba(0, 0, 0, 0.01); `; const StyledPaper = styled(Paper)` padding: 1.5em; width: 400px; - background: - linear-gradient(white, white) padding-box, - linear-gradient(#ec85f5, #fb7eb0 28%, #fc9f96 53%, #ffbc88 78%, #ffc86a) border-box; border-radius: 1em; - border: 3px solid transparent; + border: 3px solid #424242; + background: white; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); `; export const PricingCards = () => { @@ -167,12 +169,12 @@ export const PricingCards = () => { target="_blank" size="lg" radius="md" - color="green" + color="dark" fullWidth my="md" rightSection={} > - Start 1 Day Free Trial + Start Free Trial