mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-12 19:02:53 +08:00
update landing & premium pages
This commit is contained in:
AykutSarac
parent
57bdb21d02
commit
ac263f9928
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="#fff"><path d="M0 0v80l227.5 18c12.1 1 22.5-8.6 22.5-20.7s10.4-21.8 22.5-20.8l205 16.3c12.1 1 22.5-8.6 22.5-20.8s10.4-21.7 22.5-20.8l205 16.3c12.1 1 22.5-8.6 22.5-20.8S760.4 5 772.5 6L1000 24V0H0Z"></path></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="#fff"><path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 77 666.7 77 833.3 28 1000 28V0H0Z" opacity=".5"></path><path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 70 666.7 70 833.3 16 1000 16V0H0Z" opacity=".5"></path><path d="M0 0v100c166.7 0 166.7-66 333.3-66S500 63 666.7 63 833.3 4 1000 4V0H0Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 280 B After Width: | Height: | Size: 375 B |
@ -9,3 +9,4 @@ https://jsoncrack.com/widget
|
||||
https://jsoncrack.com/legal/terms
|
||||
https://jsoncrack.com/legal/privacy
|
||||
https://jsoncrack.com/affiliates
|
||||
https://jsoncrack.com/premium
|
||||
|
||||
@ -3,8 +3,7 @@ import { Manrope } from "next/font/google";
|
||||
import Link from "next/link";
|
||||
import { Stack, Flex, Badge, Button, Text } from "@mantine/core";
|
||||
import styled from "styled-components";
|
||||
import { IoSparkles } from "react-icons/io5";
|
||||
import { MdChevronRight } from "react-icons/md";
|
||||
import { FaArrowRightLong } from "react-icons/fa6";
|
||||
|
||||
const manrope = Manrope({
|
||||
subsets: ["latin-ext"],
|
||||
@ -119,18 +118,6 @@ export const HeroSection = () => {
|
||||
<StyledHeroSection>
|
||||
<StyledHeroSectionBody>
|
||||
<Stack flex="1" miw={250} mx="auto" align="center">
|
||||
<Badge
|
||||
size="lg"
|
||||
fw={500}
|
||||
lts={0.5}
|
||||
variant="light"
|
||||
color="red"
|
||||
leftSection={<IoSparkles />}
|
||||
tt="none"
|
||||
visibleFrom="xs"
|
||||
>
|
||||
Start in 30 seconds — no registration, no payment.
|
||||
</Badge>
|
||||
<StyledHeroTitle>Visualize JSON into interactive graphs</StyledHeroTitle>
|
||||
<StyledHeroText>
|
||||
The best JSON viewer tool to <strong>visualize</strong>, <strong>format</strong> and{" "}
|
||||
@ -159,27 +146,26 @@ export const HeroSection = () => {
|
||||
color="orange"
|
||||
href="/#pricing"
|
||||
size="lg"
|
||||
radius="sm"
|
||||
fw={500}
|
||||
radius="xl"
|
||||
px="xl"
|
||||
fz="md"
|
||||
rightSection={<MdChevronRight size={30} />}
|
||||
rightSection={<FaArrowRightLong />}
|
||||
mt="lg"
|
||||
>
|
||||
Start using free
|
||||
Start for free
|
||||
</Button>
|
||||
<Button
|
||||
component={Link}
|
||||
color="dark"
|
||||
variant="light"
|
||||
color="orange"
|
||||
prefetch={false}
|
||||
href="/premium"
|
||||
size="lg"
|
||||
radius="sm"
|
||||
fw={500}
|
||||
radius="xl"
|
||||
fz="md"
|
||||
mt="lg"
|
||||
leftSection={<IoSparkles />}
|
||||
>
|
||||
Explore Premium
|
||||
Get Premium
|
||||
</Button>
|
||||
</Flex>
|
||||
<Text c="gray.6" size="xs" mt="-10">
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { Title, Overlay, Image, Container, Flex, Box, List, Button } from "@mantine/core";
|
||||
import { Title, Overlay, Image, Container, Flex, Box, List, Button, Paper } from "@mantine/core";
|
||||
import styled from "styled-components";
|
||||
import { ReactCompareSlider, ReactCompareSliderHandle } from "react-compare-slider";
|
||||
import { FaArrowRightLong } from "react-icons/fa6";
|
||||
|
||||
const StyledImageWrapper = styled.div`
|
||||
flex: 2;
|
||||
max-width: 1400px;
|
||||
width: 100%;
|
||||
filter: drop-shadow(0px -4px 10px rgba(70, 70, 70, 0.25));
|
||||
`;
|
||||
@ -29,10 +29,11 @@ export const PremiumVsFree = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<Container id="premium" component="section" w={{ base: "100%", xs: "80%" }} fluid my={120}>
|
||||
<Container size="lg" id="premium" component="section" my={120}>
|
||||
<Paper radius="lg" bg="dark" p="xl">
|
||||
<Title
|
||||
pos="relative"
|
||||
c="black"
|
||||
c="white"
|
||||
order={2}
|
||||
fz={{
|
||||
base: 24,
|
||||
@ -42,42 +43,45 @@ export const PremiumVsFree = () => {
|
||||
fw={600}
|
||||
mb={20}
|
||||
>
|
||||
Premium vs Free
|
||||
Explore Premium.
|
||||
<Box pos="absolute" mt="-8px" maw="150px" w="100%">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1418 125" fill="#000">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1418 125" fill="#ffbb55">
|
||||
<path d="M1412.29 72.17c-11.04-5.78-20.07-14.33-85.46-25.24-22.37-3.63-44.69-7.56-67.07-11.04-167.11-22.06-181.65-21.24-304.94-30.56C888.78 1.39 822.57 1.1 756.44 0c-46.63-.11-93.27 1.56-139.89 2.5C365.5 13.55 452.86 7.68 277.94 23.15 202.57 33.32 127.38 45.01 52.07 55.69c-11.23 2.41-22.63 4.17-33.71 7.22C6.1 66.33 5.64 66.19 3.89 67.79c-7.99 5.78-2.98 20.14 8.72 17.5 33.99-9.47 32.28-8.57 178.06-29.66 4.26 4.48 7.29 3.38 18.42 3.11 13.19-.32 26.38-.53 39.56-1.12 53.51-3.81 106.88-9.62 160.36-13.95 18.41-1.3 36.8-3.12 55.21-4.7 23.21-1.16 46.43-2.29 69.65-3.4 120.28-2.16 85.46-3.13 234.65-1.52 23.42.99 1.57-.18 125.72 6.9 96.61 8.88 200.92 27.94 295.42 46.12 40.87 7.91 116.67 23.2 156.31 36.78 3.81 1.05 8.28-.27 10.51-3.58 3.17-3.72 2.66-9.7-.78-13.13-3.25-3.12-8.14-3.44-12.18-5.08-17.89-5.85-44.19-12.09-63.67-16.56l26.16 3.28c23.02 3.13 46.28 3.92 69.34 6.75 10.8.96 25.43 1.81 34.34-4.39 2.26-1.54 4.86-2.75 6.21-5.27 2.76-4.59 1.13-11.06-3.59-13.68ZM925.4 23.77c37.64 1.4 153.99 10.85 196.64 14.94 45.95 5.51 91.89 11.03 137.76 17.19 24.25 4.77 74.13 11.21 101.72 18.14-11.87-1.15-23.77-1.97-35.65-3.06-133.46-15.9-266.8-33.02-400.47-47.21Z"></path>
|
||||
</svg>
|
||||
</Box>
|
||||
</Title>
|
||||
<Flex
|
||||
gap="xl"
|
||||
gap="lg"
|
||||
direction={{
|
||||
base: "column",
|
||||
md: "row",
|
||||
}}
|
||||
>
|
||||
<Box flex="1.3">
|
||||
We developed an entirely new version of JSON Crack, packed with numerous features and
|
||||
enhancements.
|
||||
<List mt="md" visibleFrom="xs">
|
||||
<List mt="md" fz="lg" visibleFrom="xs" c="gray.3">
|
||||
<List.Item>Refined user interface</List.Item>
|
||||
<List.Item>Supports larger data (~4 MB)</List.Item>
|
||||
<List.Item>Customizable color options</List.Item>
|
||||
<List.Item>Data comparison feature</List.Item>
|
||||
<List.Item>Focus to node from editor cursor</List.Item>
|
||||
<List.Item>Compare data on graphs</List.Item>
|
||||
<List.Item>Edit directly on graphs</List.Item>
|
||||
<List.Item>AI-powered assistant</List.Item>
|
||||
<List.Item>Beautiful UI and very smooth navigation</List.Item>
|
||||
<List.Item>Everything is faster.</List.Item>
|
||||
</List>
|
||||
<Button
|
||||
component={Link}
|
||||
href="/premium"
|
||||
prefetch={false}
|
||||
display="block"
|
||||
w="fit-content"
|
||||
miw={200}
|
||||
variant="filled"
|
||||
color="orange"
|
||||
mt="md"
|
||||
mt="lg"
|
||||
size="lg"
|
||||
rightSection={<FaArrowRightLong />}
|
||||
radius="xl"
|
||||
fw={500}
|
||||
fz="md"
|
||||
>
|
||||
See all features
|
||||
</Button>
|
||||
@ -133,6 +137,7 @@ export const PremiumVsFree = () => {
|
||||
/>
|
||||
</StyledImageWrapper>
|
||||
</Flex>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
@ -48,7 +48,7 @@ export const Navbar = () => {
|
||||
return (
|
||||
<StyledNavbarWrapper className="navbar">
|
||||
<Alert variant="filled" color="orange.4" fw={500} ta="center" p="6" mt="-1rem">
|
||||
<Link href="/#buyonce">
|
||||
<Link href="/#pricing">
|
||||
<ThemeIcon size="sm" variant="transparent" color="black" mr={2}>
|
||||
<FaGift size="12" />
|
||||
</ThemeIcon>
|
||||
@ -62,19 +62,6 @@ export const Navbar = () => {
|
||||
<StyledNavbar>
|
||||
<Left>
|
||||
<JSONCrackLogo />
|
||||
<Button
|
||||
component={Link}
|
||||
prefetch={false}
|
||||
href="/#pricing"
|
||||
variant="subtle"
|
||||
color="black"
|
||||
radius="sm"
|
||||
size="sm"
|
||||
ml={50}
|
||||
fw={500}
|
||||
>
|
||||
Pricing
|
||||
</Button>
|
||||
<Button
|
||||
component="a"
|
||||
href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
|
||||
@ -84,9 +71,35 @@ export const Navbar = () => {
|
||||
radius="sm"
|
||||
size="sm"
|
||||
fw={500}
|
||||
ml={50}
|
||||
>
|
||||
VS Code
|
||||
</Button>
|
||||
<Button
|
||||
component={Link}
|
||||
prefetch={false}
|
||||
href="/premium"
|
||||
variant="subtle"
|
||||
color="black"
|
||||
radius="sm"
|
||||
size="sm"
|
||||
fw={500}
|
||||
>
|
||||
Premium
|
||||
</Button>
|
||||
<Button
|
||||
component={Link}
|
||||
prefetch={false}
|
||||
href="/#pricing"
|
||||
variant="subtle"
|
||||
color="black"
|
||||
radius="sm"
|
||||
size="sm"
|
||||
fw={500}
|
||||
>
|
||||
Pricing
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
component={Link}
|
||||
prefetch={false}
|
||||
@ -121,7 +134,7 @@ export const Navbar = () => {
|
||||
visibleFrom="sm"
|
||||
size="md"
|
||||
>
|
||||
Sign in
|
||||
Log in
|
||||
</Button>
|
||||
<Button
|
||||
component="a"
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { Button, Title } from "@mantine/core";
|
||||
import styled from "styled-components";
|
||||
import { MdChevronRight } from "react-icons/md";
|
||||
@ -167,7 +166,7 @@ export const NotSupported = () => {
|
||||
</StyledInfo>
|
||||
|
||||
<Button
|
||||
component={Link}
|
||||
component="a"
|
||||
href="/premium"
|
||||
target="_blank"
|
||||
mt="lg"
|
||||
|
||||
@ -23,7 +23,7 @@ const Affiliate = () => {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>JSON Crack Affiliate Program</title>
|
||||
<title>Affiliate Program - JSON Crack</title>
|
||||
<link rel="canonical" href="https://jsoncrack.com/affiliates" />
|
||||
<meta
|
||||
name="description"
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import Head from "next/head";
|
||||
import {
|
||||
Container,
|
||||
Box,
|
||||
@ -67,6 +68,23 @@ const Premium = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Premium - JSON Crack</title>
|
||||
<link rel="canonical" href="https://jsoncrack.com/premium" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Rebuilt from the ground up — now faster, more powerful, and more visually stunning."
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Rebuilt from the ground up — now faster, more powerful, and more visually stunning."
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Rebuilt from the ground up — now faster, more powerful, and more visually stunning."
|
||||
/>
|
||||
</Head>
|
||||
<Layout>
|
||||
<Container
|
||||
pos="relative"
|
||||
@ -170,8 +188,8 @@ const Premium = () => {
|
||||
Compact Design
|
||||
</Title>
|
||||
<Text c="gray.3">
|
||||
50% less graph size. Get rid of the redundant data and nodes, focus on what's
|
||||
important.
|
||||
50% less graph size. Get rid of the redundant data and nodes, focus on
|
||||
what's important.
|
||||
</Text>
|
||||
</Flex>
|
||||
</Paper>
|
||||
@ -184,7 +202,8 @@ const Premium = () => {
|
||||
Faster
|
||||
</Title>
|
||||
<Text c="gray.3">
|
||||
Load data faster. Navigate faster. Search faster. Everything is faster than ever.
|
||||
Load data faster. Navigate faster. Search faster. Everything is faster than
|
||||
ever.
|
||||
</Text>
|
||||
</Flex>
|
||||
</Paper>
|
||||
@ -238,8 +257,8 @@ const Premium = () => {
|
||||
Tabs
|
||||
</Title>
|
||||
<Text c="gray.3">
|
||||
Open multiple tabs, navigate between them easily. Save up to 200 documents to the
|
||||
cloud.
|
||||
Open multiple tabs, navigate between them easily. Save up to 200 documents to
|
||||
the cloud.
|
||||
</Text>
|
||||
</Flex>
|
||||
</Paper>
|
||||
@ -353,6 +372,7 @@ const Premium = () => {
|
||||
</Flex>
|
||||
</Container>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -18,8 +18,8 @@ import {
|
||||
} from "@mantine/core";
|
||||
import styled from "styled-components";
|
||||
import { AiOutlineInfoCircle } from "react-icons/ai";
|
||||
import { FaCheck, FaXmark } from "react-icons/fa6";
|
||||
import { VscArrowRight, VscLinkExternal } from "react-icons/vsc";
|
||||
import { FaArrowRightLong, FaCheck, FaXmark } from "react-icons/fa6";
|
||||
import { VscLinkExternal } from "react-icons/vsc";
|
||||
import Layout from "src/layout/Layout";
|
||||
import { gaEvent } from "src/lib/utils/gaEvent";
|
||||
|
||||
@ -41,7 +41,7 @@ export const purchaseLinks = {
|
||||
const StyledPaper = styled(Paper)<PaperProps & any>`
|
||||
padding: 1.5em;
|
||||
width: 350px;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #e9e9e9;
|
||||
background: white;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
@ -63,7 +63,6 @@ export const PricingCards = () => {
|
||||
w={200}
|
||||
radius="md"
|
||||
styles={{ label: { color: "black" } }}
|
||||
mb="xl"
|
||||
/>
|
||||
</Center>
|
||||
<Flex
|
||||
@ -78,6 +77,43 @@ export const PricingCards = () => {
|
||||
}}
|
||||
mx="auto"
|
||||
>
|
||||
<Box w="100%">
|
||||
<StyledPaper
|
||||
withBorder
|
||||
p="sm"
|
||||
w="100%"
|
||||
style={{ borderColor: "orange" }}
|
||||
visibleFrom="sm"
|
||||
>
|
||||
<Flex gap="xs" align="end">
|
||||
<Stack gap="xs">
|
||||
<Text fz="md" fw={500}>
|
||||
Buy once,
|
||||
<Text ml={4} component="span" inherit c="orange">
|
||||
use forever
|
||||
</Text>
|
||||
!
|
||||
</Text>
|
||||
<Text fz="sm" maw={400}>
|
||||
Gain lifetime access to JSON Crack, enjoy all the advantages of our Premium plan
|
||||
with this one-time deal.
|
||||
</Text>
|
||||
</Stack>
|
||||
<Button
|
||||
component="a"
|
||||
href={purchaseLinks.ltd}
|
||||
target="_blank"
|
||||
fw={400}
|
||||
fz="sm"
|
||||
size="md"
|
||||
color="orange"
|
||||
rightSection={<FaArrowRightLong />}
|
||||
>
|
||||
Get Lifetime Access for ${PRICING.LTD}
|
||||
</Button>
|
||||
</Flex>
|
||||
</StyledPaper>
|
||||
</Box>
|
||||
<StyledPaper>
|
||||
<Flex justify="space-between">
|
||||
<Stack gap="0">
|
||||
@ -123,13 +159,13 @@ export const PricingCards = () => {
|
||||
radius="md"
|
||||
fullWidth
|
||||
my="md"
|
||||
rightSection={<VscArrowRight />}
|
||||
rightSection={<FaArrowRightLong />}
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
<Text mt="xs" fz="xs" c="dimmed">
|
||||
Remake version with advanced features, better performance and smooth user interface.
|
||||
</Text>
|
||||
<Anchor component={Link} href="/premium" mt="xs" fz="xs" td="underline" c="dimmed">
|
||||
Click here to see all features
|
||||
</Anchor>
|
||||
<Flex direction="column" justify="space-between">
|
||||
<List
|
||||
spacing="sm"
|
||||
@ -240,7 +276,7 @@ export const PricingCards = () => {
|
||||
color="dark"
|
||||
fullWidth
|
||||
my="md"
|
||||
rightSection={<VscArrowRight />}
|
||||
rightSection={<FaArrowRightLong />}
|
||||
>
|
||||
Start Free
|
||||
</Button>
|
||||
@ -341,36 +377,6 @@ export const PricingCards = () => {
|
||||
</Flex>
|
||||
</StyledPaper>
|
||||
</Flex>
|
||||
<Box id="buyonce" pt="lg">
|
||||
<StyledPaper w="100%" style={{ borderColor: "orange" }} visibleFrom="sm">
|
||||
<Stack px="xl">
|
||||
<Text fz="h2" fw={500} ta="center">
|
||||
Buy once,
|
||||
<Text ml={4} component="span" inherit c="orange">
|
||||
use forever
|
||||
</Text>
|
||||
!
|
||||
</Text>
|
||||
<Text>
|
||||
Gain lifetime access to JSON Crack, enjoy all the advantages of our Premium plan with
|
||||
this one-time deal.
|
||||
</Text>
|
||||
<Button
|
||||
component="a"
|
||||
href={purchaseLinks.ltd}
|
||||
target="_blank"
|
||||
w="fit-content"
|
||||
mx="auto"
|
||||
fw={500}
|
||||
size="md"
|
||||
color="orange"
|
||||
rightSection={<VscArrowRight />}
|
||||
>
|
||||
Get Lifetime Access for ${PRICING.LTD}
|
||||
</Button>
|
||||
</Stack>
|
||||
</StyledPaper>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user