GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-27 15:22:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: update landing

Browse Source
This commit is contained in:
AykutSarac 2024-07-27 13:05:56 +03:00
parent 035f6b8baa
commit 80c82e25c9
No known key found for this signature in database
9 changed files with 187 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/containers/Landing/FAQ.tsx
View File

@ -30,6 +30,11 @@ const Questions = [
title: "Can I export the generated graphs?",
content: "Yes, you can export the generated graphs as PNG, JPEG, or SVG files.",
},
{
title: "How to use VS Code extension?",
content:
"You can use the VS Code extension to visualize JSON data directly in your editor. Install the extension from the VS Code marketplace and follow the instructions at extension's page.",
},
];
export const FAQ = () => {

12
src/containers/Landing/Features.tsx
View File

@ -58,7 +58,7 @@ export const Features = () => {
<Paper h="100%" p="lg" radius="md" bg="gray.0" withBorder>
<Flex align="center" gap={8} mb={16}>
<FaBolt color="orange" size={24} />
<Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
<Text c="gray.9" fz={{ base: 16, md: 18, lg: 24, xl: 26 }} fw={500}>
Real-time Visualization
</Text>
</Flex>
@ -77,7 +77,7 @@ export const Features = () => {
<Paper h="100%" p="lg" radius="md" bg="gray.0" withBorder>
<Flex align="center" gap={8} mb={16}>
<FaHeart color="#ff5555" size={26} />
<Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
<Text c="gray.9" fz={{ base: 16, md: 18, lg: 24, xl: 26 }} fw={500}>
Simple
</Text>
</Flex>
@ -96,7 +96,7 @@ export const Features = () => {
<Paper h="100%" p="lg" radius="md" bg="gray.0" withBorder>
<Flex align="center" gap={8} mb={16}>
<FaMagic color="#8c0075" size={24} />
<Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
<Text c="gray.9" fz={{ base: 16, md: 18, lg: 24, xl: 26 }} fw={500}>
Generate
</Text>
</Flex>
@ -116,7 +116,7 @@ export const Features = () => {
<Paper h="100%" p="lg" radius="md" bg="gray.0" withBorder>
<Flex align="center" gap={8} mb={16}>
<FaPalette color="#4890fd" size={24} />
<Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
<Text c="gray.9" fz={{ base: 16, md: 18, lg: 24, xl: 26 }} fw={500}>
Customizable
</Text>
</Flex>
@ -136,7 +136,7 @@ export const Features = () => {
<Paper h="100%" p="lg" radius="md" bg="gray.0" withBorder>
<Flex align="center" gap={8} mb={16}>
<FaShieldHalved color="black" size={24} />
<Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
<Text c="gray.9" fz={{ base: 16, md: 18, lg: 24, xl: 26 }} fw={500}>
Privacy First
</Text>
</Flex>
@ -156,7 +156,7 @@ export const Features = () => {
<Paper h="100%" p="lg" radius="md" bg="gray.0" withBorder>
<Flex align="center" gap={8} mb={16}>
<FaShapes color="#00a571" size={24} />
<Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
<Text c="gray.9" fz={{ base: 16, md: 18, lg: 24, xl: 26 }} fw={500}>
Advanced Features
</Text>
</Flex>

5
src/containers/Landing/HeroPreview.tsx
View File

@ -5,6 +5,7 @@ import styled from "styled-components";
const StyledPreviewWrapper = styled.div`
margin: 0 auto;
position: relative;
padding: 5rem 0;
`;
export const HeroPreview = () => {
@ -54,13 +55,13 @@ export const HeroPreview = () => {
onChange={setSelectedFeature}
orientation="vertical"
withItemsBorders={false}
color="grape"
bg="transparent"
color="orange.7"
size="lg"
visibleFrom="sm"
styles={{
control: {
background: "#8f8f8f52",
background: "rgba(168, 168, 168, 0.2)",
borderRadius: "4px",
},
root: {

121
src/containers/Landing/HeroSection.tsx
View File

@ -1,11 +1,42 @@
import React from "react";
import { Stack, Flex, Badge, Button } from "@mantine/core";
import { Manrope } from "next/font/google";
import { Stack, Flex, Badge, Button, Text } from "@mantine/core";
import styled from "styled-components";
import { MdChevronRight } from "react-icons/md";
const manrope = Manrope({
subsets: ["latin-ext"],
});
const StyledHeroSection = styled.main`
position: relative;
&:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
image-rendering: pixelated;
-webkit-mask-image: linear-gradient(to bottom, transparent, 20%, white, 80%, transparent);
mask-image: linear-gradient(to bottom, transparent, 20%, white, 80%, transparent);
--line-color-1: #f5f5f5;
--line-color-2: #f8f8f8;
background-image: linear-gradient(var(--line-color-1) 1.5px, transparent 1.5px),
linear-gradient(90deg, var(--line-color-1) 1.5px, transparent 1.5px),
linear-gradient(var(--line-color-2) 1px, transparent 1px),
linear-gradient(90deg, var(--line-color-2) 1px, transparent 1px);
background-position:
-1.5px -1.5px,
-1.5px -1.5px,
-1px -1px,
-1px -1px;
background-size:
100px 100px,
100px 100px,
20px 20px,
20px 20px;
}
@media only screen and (max-width: 1240px) {
flex-direction: column;
}
@ -13,23 +44,15 @@ const StyledHeroSection = styled.main`
const StyledHeroTitle = styled.h1`
position: relative;
font-size: 2rem;
font-weight: 600;
font-size: 2.2rem;
font-weight: 800;
display: inline;
color: #272727;
width: fit-content;
line-height: 1.2;
letter-spacing: -1px;
line-height: 1.12;
letter-spacing: -0.02em;
max-width: 30rem;
span {
display: inline-block;
white-space: nowrap;
padding: 0 0.5rem;
color: white;
background: black;
transform: rotate(-1.5deg);
}
font-family: ${manrope.style.fontFamily};
@media only screen and (min-width: 576px) {
font-size: 3.2rem;
@ -42,32 +65,31 @@ const StyledHeroTitle = styled.h1`
}
@media only screen and (min-width: 1400px) {
font-size: 4rem;
max-width: 48rem;
font-size: 4.2rem;
max-width: 50rem;
}
`;
const StyledHeroText = styled.p`
font-size: 1.2rem;
font-size: 1rem;
color: #626262;
font-weight: 500;
max-width: 100%;
min-width: 400px;
max-width: 75%;
margin-top: 1rem;
text-align: center;
strong {
font-weight: 500;
color: #0073ff;
color: #be7d1c;
}
@media only screen and (min-width: 576px) {
font-size: 1.3rem;
font-size: 1.15rem;
max-width: 80%;
}
@media only screen and (min-width: 1400px) {
font-size: 1.2rem;
font-size: 1.3rem;
max-width: 60%;
}
`;
@ -78,7 +100,7 @@ const StyledHeroSectionBody = styled.div`
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 9rem 10%;
padding: 7rem 10%;
overflow: hidden;
text-align: center;
gap: 60px;
@ -95,10 +117,7 @@ export const HeroSection = () => {
<StyledHeroSection id="hero-section">
<StyledHeroSectionBody>
<Stack flex="1" miw={250} mx="auto" align="center">
<StyledHeroTitle>
Convert any JSON into
<span>interactive graphs</span>
</StyledHeroTitle>
<StyledHeroTitle>Visualize JSON into interactive graphs</StyledHeroTitle>
<StyledHeroText>
The best JSON viewer tool to <strong>visualize</strong>, <strong>format</strong> and{" "}
<strong>modify</strong>.
@ -120,23 +139,37 @@ export const HeroSection = () => {
TOML
</Badge>
</Flex>
<Button
component="a"
variant="gradient"
gradient={{
from: "#4466ff",
to: "#003ba9",
}}
href="/#pricing"
size="xl"
radius="md"
fw={600}
rightSection={<MdChevronRight size={30} />}
mt="lg"
>
Start Typing
</Button>
<Flex gap="md" wrap="wrap" justify="center">
<Button
component="a"
color="gray.2"
href="/#preview"
size="lg"
radius="sm"
fw={500}
fz="md"
mt="lg"
visibleFrom="xs"
>
Learn more
</Button>
<Button
component="a"
color="orange"
href="/#pricing"
size="lg"
radius="sm"
fw={500}
fz="md"
rightSection={<MdChevronRight size={30} />}
mt="lg"
>
Start using free
</Button>
</Flex>
<Text c="gray.6" size="xs" mt="-10">
No registration needed.
</Text>
</Stack>
</StyledHeroSectionBody>
</StyledHeroSection>

13
src/containers/Landing/PremiumVsFree.tsx
View File

@ -45,10 +45,10 @@ export const PremiumVsFree = () => {
}}
radius="xl"
mx="auto"
mb="-16.5rem"
mb="-18rem"
style={{
textAlign: "center",
background: "linear-gradient(rgb(33, 148, 87) 40%, rgb(255, 255, 255) 90%)",
background: "linear-gradient(rgb(207, 116, 3) 40%, rgb(255, 255, 255) 90%)",
}}
>
<Title
@ -71,15 +71,14 @@ export const PremiumVsFree = () => {
xs: 16,
}}
maw={{
base: "80%",
sm: "70%",
base: "60%",
sm: "50%",
}}
c="gray.2"
mb={60}
>
Designed to help you navigate through your data with ease. <br />
The editor provides a clean and intuitive interface that allows you to focus on what
matters most: your data.
Designed to help you navigate through your data with ease. <br /> Smaller, faster, and
more efficient than ever before.
</Text>
</Paper>

5
src/layout/Layout.tsx
View File

@ -10,8 +10,9 @@ const inter = Inter({
});
const StyledLayoutWrapper = styled.div`
background-image: radial-gradient(#ededed 2px, #ffffff 2px);
background-size: 40px 40px;
background: #fff;
/* background-image: radial-gradient(#ededed 2px, #ffffff 2px); */
/* background-size: 40px 40px; */
font-family: ${inter.style.fontFamily};
`;

27
src/layout/Navbar.tsx
View File

@ -6,6 +6,7 @@ import { JSONCrackLogo } from "./JsonCrackLogo";
const StyledNavbarWrapper = styled.div`
z-index: 3;
padding-top: 1rem;
transition: background 0.2s ease-in-out;
`;
@ -14,7 +15,7 @@ const StyledNavbar = styled.nav`
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1157px;
max-width: 1200px;
margin: 0 auto;
padding: 12px 24px;
background: rgba(255, 255, 255, 0.1);
@ -53,10 +54,10 @@ export const Navbar = () => {
href="/#pricing"
variant="subtle"
color="black"
radius="md"
radius="sm"
size="sm"
ml={50}
fw={400}
fw={500}
>
Pricing
</Button>
@ -66,9 +67,9 @@ export const Navbar = () => {
target="_blank"
variant="subtle"
color="black"
radius="md"
radius="sm"
size="sm"
fw={400}
fw={500}
>
VS Code
</Button>
@ -78,9 +79,9 @@ export const Navbar = () => {
href="/docs"
variant="subtle"
color="black"
radius="md"
radius="sm"
size="sm"
fw={400}
fw={500}
>
Docs
</Button>
@ -90,9 +91,9 @@ export const Navbar = () => {
href="/#faq"
variant="subtle"
color="black"
radius="md"
radius="sm"
size="sm"
fw={400}
fw={500}
>
FAQ
</Button>
@ -102,21 +103,19 @@ export const Navbar = () => {
variant="default"
component="a"
href="https://app.jsoncrack.com/sign-in"
radius="md"
radius="sm"
visibleFrom="sm"
size="md"
fw={600}
>
Sign in
</Button>
<Button
component="a"
color="brightBlue"
color="orange"
href="/editor"
radius="md"
radius="sm"
visibleFrom="sm"
size="md"
fw={600}
>
Editor
</Button>

62
src/modules/GraphView/index.tsx
View File

@ -198,36 +198,38 @@ export const GraphView = ({ isWidget = false }: GraphProps) => {
>
<GraphCanvas isWidget={isWidget} />
</Space>
<Dialog
opened={!isDialogClosed}
size="lg"
radius="md"
withBorder
position={{
right: 15,
bottom: 40,
}}
onClose={() => setDialogClosed(true)}
>
<Text size="sm" fw={500}>
Try the powerful Premium editor for larger graphs and advanced features with money-back
guarantee.
</Text>
<Group justify="right" mt="sm">
<Button variant="default" onClick={() => setDialogClosed(true)}>
Close
</Button>
<Button
color="green"
onClick={() => {
setVisible("upgrade")(true);
setDialogClosed(true);
}}
>
Explore
</Button>
</Group>
</Dialog>
{!isWidget && (
<Dialog
opened={!isDialogClosed}
size="lg"
radius="md"
withBorder
position={{
right: 15,
bottom: 40,
}}
onClose={() => setDialogClosed(true)}
>
<Text size="sm" fw={500}>
Try the powerful Premium editor for larger graphs and advanced features with
money-back guarantee.
</Text>
<Group justify="right" mt="sm">
<Button variant="default" onClick={() => setDialogClosed(true)}>
Close
</Button>
<Button
color="green"
onClick={() => {
setVisible("upgrade")(true);
setDialogClosed(true);
}}
>
Explore
</Button>
</Group>
</Dialog>
)}
</StyledEditorWrapper>
</>
);

237
src/pages/pricing.tsx
View File

@ -10,14 +10,13 @@ import {
Paper,
SegmentedControl,
Center,
Badge, // ThemeIcon,
Badge,
Tooltip,
Anchor,
} from "@mantine/core";
import styled from "styled-components";
import { AiOutlineInfoCircle } from "react-icons/ai";
import { IoIosCheckmarkCircle } from "react-icons/io";
import { IoCheckmarkCircle, IoCloseCircle } from "react-icons/io5";
import { FaCheck, FaXmark } from "react-icons/fa6";
import { VscArrowRight, VscLinkExternal } from "react-icons/vsc";
import Layout from "src/layout/Layout";
import { gaEvent } from "src/lib/utils/gaEvent";
@ -35,30 +34,13 @@ export const purchaseLinks = {
"https://jsoncrack.lemonsqueezy.com/checkout/buy/577928ea-fb09-4076-9307-3e5931b35ad0?desc=0&enabled=82417",
};
const StyledPaper = styled(Paper)<{ $highlight?: boolean } & any>`
const StyledPaper = styled(Paper)`
padding: 1.5em;
width: 350px;
border-radius: 4px;
border: 2px solid #e9e9e9;
${({ $highlight }) => $highlight && "border: 3px solid #28c417;"}
background: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
${({ $highlight }) =>
$highlight &&
`
&::before {
content: "Recommended";
background: #28c417;
position: absolute;
transform: translate(-27px, -61px);
font-weight: 500;
color: white;
padding: 6px 8px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
`}
`;
export const PricingCards = () => {
@ -83,8 +65,8 @@ export const PricingCards = () => {
label: (
<Flex align="center" gap="xs">
Annual{" "}
<Badge radius="sm" variant="light" color="green">
{PRICING.getAnnualSave()}% OFF
<Badge radius="sm" variant="light" color="orange">
Save {PRICING.getAnnualSave()}%
</Badge>
</Flex>
),
@ -109,125 +91,7 @@ export const PricingCards = () => {
}}
mx="auto"
>
{/* <StyledPaper>
<Flex justify="space-between">
<Stack gap="0">
<Text fw={500} size="xl" c="black">
Partner
</Text>
<ThemeIcon variant="transparent" size={59}>
<PiChats color="black" size={50} />
</ThemeIcon>
<Text fz="xs" c="gray.7">
Contact us for custom pricing
</Text>
</Stack>
</Flex>
<Button
component="a"
color="green"
onClick={() => gaEvent("Pricing", "click partner plan")}
href="mailto:contact@jsoncrack.com"
target="_blank"
size="lg"
radius="md"
fullWidth
my="md"
rightSection={<VscArrowRight />}
>
Contact Us
</Button>
<Text mt="xs" fz="xs" c="dimmed">
Integrate JSON Crack into your applications and websites.
</Text>
<Flex direction="column" justify="space-between">
<List
spacing="md"
size="sm"
mt="xs"
c="black"
center
icon={<IoIosCheckmarkCircle color="green" size="20" />}
>
<List.Item>
<Tooltip
color="blue"
label="Integrate premium graph visualization into your own website/apps using iframe"
maw={350}
multiline
withArrow
>
<Text
c="gray.7"
fw={600}
fz="sm"
style={{ textDecoration: "underline", textDecorationStyle: "dashed" }}
>
JSON Crack Premium Widget
</Text>
</Tooltip>
</List.Item>
<List.Item>
<Text c="gray.7" fw={600} fz="sm">
1 Domain / Plan
</Text>
</List.Item>
<List.Item>
<Tooltip
color="blue"
label="Listen for events like node click, hover, center etc. Display your own UI"
maw={350}
multiline
withArrow
>
<Text
c="gray.7"
fw={600}
fz="sm"
style={{ textDecoration: "underline", textDecorationStyle: "dashed" }}
>
Events API
</Text>
</Tooltip>
</List.Item>
<List.Item>
<Tooltip
color="blue"
label="Customize the look and feel of the editor matching with your own branding"
maw={350}
multiline
withArrow
>
<Text
c="gray.7"
fw={600}
fz="sm"
style={{ textDecoration: "underline", textDecorationStyle: "dashed" }}
>
Custom Theming
</Text>
</Tooltip>
</List.Item>
<List.Item>
<Text c="gray.7" fw={600} fz="sm">
White Labeling
</Text>
</List.Item>
<List.Item>
<Text c="gray.7" fw={600} fz="sm">
Onboarding and engineering support
</Text>
</List.Item>
<List.Item>
<Text c="gray.7" fw={600} fz="sm">
High-priority customer support
</Text>
</List.Item>
</List>
</Flex>
</StyledPaper> */}
<StyledPaper $highlight>
<StyledPaper>
<Flex justify="space-between">
<Stack gap="0">
<Flex align="center">
@ -236,12 +100,12 @@ export const PricingCards = () => {
</Text>
{!isMonthly && (
<Badge
fw={500}
size="lg"
fw={600}
size="md"
variant="light"
c="#41B619"
radius="md"
color="green"
c="orange"
radius="sm"
color="orange"
ml="sm"
>
SAVE {PRICING.getAnnualSave()}%
@ -264,7 +128,7 @@ export const PricingCards = () => {
</Flex>
<Button
component="a"
color="#2ba80f"
color="orange"
onClick={() => gaEvent("Pricing", "click upgrade premium")}
href={isMonthly ? purchaseLinks.monthly : purchaseLinks.annual}
target="_blank"
@ -274,19 +138,19 @@ export const PricingCards = () => {
my="md"
rightSection={<VscArrowRight />}
>
Get Started
Upgrade
</Button>
<Text mt="xs" fz="xs" c="dimmed">
Advanced features, better performance and optimized user interface.
Remake version with advanced features, better performance and smooth user interface.
</Text>
<Flex direction="column" justify="space-between">
<List
spacing="md"
spacing="sm"
size="sm"
mt="xs"
c="black"
center
icon={<IoCheckmarkCircle color="green" size="20" />}
icon={<FaCheck size="18" color="#E8580C" />}
>
<List.Item>
<Tooltip
@ -306,7 +170,7 @@ export const PricingCards = () => {
textUnderlineOffset: "2px",
}}
>
Large data support
Larger data support
</Text>
</Tooltip>
</List.Item>
@ -328,36 +192,19 @@ export const PricingCards = () => {
textUnderlineOffset: "2px",
}}
>
Compact Graphs & High Performance
Compact and Fast Visualization
</Text>
</Tooltip>
</List.Item>
<List.Item>
<Text c="black" fw={500} fz="sm">
Compare Data Differences
Compare data
</Text>
</List.Item>
<List.Item>
<Tooltip
color="blue"
label="Click on a node at graph to update data on editor."
maw={350}
multiline
withArrow
>
<Text
c="black"
fw={500}
fz="sm"
style={{
textDecoration: "underline",
textDecorationStyle: "dashed",
textUnderlineOffset: "2px",
}}
>
Edit Data on Graph
</Text>
</Tooltip>
<Text c="black" fw={500} fz="sm">
Edit data on graph
</Text>
</List.Item>
<List.Item>
<Text c="black" fw={500} fz="sm">
@ -411,16 +258,16 @@ export const PricingCards = () => {
Go to Editor
</Button>
<Text mt="xs" fz="xs" c="dimmed">
Basic version of the editor with limited features.
Basic version of the editor with limited features, open-source.
</Text>
<Flex direction="column" justify="space-between">
<List
spacing="md"
spacing="sm"
size="sm"
mt="lg"
c="black"
center
icon={<IoIosCheckmarkCircle color="green" size="20" />}
icon={<FaCheck size="18" color="#E8580C" />}
>
<List.Item>
<Tooltip
@ -478,28 +325,28 @@ export const PricingCards = () => {
Store 25 documents
</Text>
</List.Item>
<List.Item icon={<IoCloseCircle color="gray" size={20} />}>
<Text c="gray.7" fw={500} fz="sm">
Compact Visualization
<List.Item icon={<FaXmark color="gray" size={20} />}>
<Text c="gray.6" fw={500} fz="sm">
Edit data on graph
</Text>
</List.Item>
<List.Item icon={<IoCloseCircle color="gray" size={20} />}>
<Text c="gray.7" fw={500} fz="sm">
Compare Data
</Text>
</List.Item>
<List.Item icon={<IoCloseCircle color="gray" size={20} />}>
<Text c="gray.7" fw={500} fz="sm">
Edit Data on Graph
</Text>
</List.Item>
<List.Item icon={<IoCloseCircle color="gray" size={20} />}>
<Text c="gray.7" fw={500} fz="sm">
<List.Item icon={<FaXmark color="gray" size={20} />}>
<Text c="gray.6" fw={500} fz="sm">
AI-powered data filter
</Text>
</List.Item>
<List.Item icon={<IoCloseCircle color="gray" size={20} />}>
<Text c="gray.7" fw={500} fz="sm">
<List.Item icon={<FaXmark color="gray" size={20} />}>
<Text c="gray.6" fw={500} fz="sm">
Compact visualization
</Text>
</List.Item>
<List.Item icon={<FaXmark color="gray" size={20} />}>
<Text c="gray.6" fw={500} fz="sm">
Compare data
</Text>
</List.Item>
<List.Item icon={<FaXmark color="gray" size={20} />}>
<Text c="gray.6" fw={500} fz="sm">
Customize graph colors
</Text>
</List.Item>