GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-12 19:02:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

landing update

Browse Source
This commit is contained in:
AykutSarac 2024-07-25 12:07:10 +03:00
parent 72adf1d628
commit c3373f3bdc
No known key found for this signature in database
8 changed files with 85 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import React from "react";
import { Container, Title, Accordion, Text, List, Anchor } from "@mantine/core";
import { Container, Title, Accordion } from "@mantine/core";
const Questions = [
{
@ -8,9 +8,8 @@ const Questions = [
"JSON Crack is an online data visualization app capable of visualizing data formats such as JSON, YAML, XML, CSV and more, into interactive graphs. It helps you to understand, analyze and debug your data easily. JSON Crack is designed for developers, data analysts, and anyone who works with structured data formats. It's also helpful for creating documentation and presentations for your teams/customers.",
},
{
title: "Who can benefit from using JSON Crack?",
content:
"JSON Crack is perfect for developers, data analysts, or anyone who works with structured data formats like JSON, YAML, XML, and CSV. It's ideal for visualizing data structures, debugging complex data, and creating clear documentation and presentations for your team or clients.",
title: "What kind of data formats does are supported?",
content: "A wide range of data formats are supported including JSON, YAML, XML, CSV, and TOML.",
},
{
title: "Is my data secure with JSON Crack?",
@ -18,23 +17,18 @@ const Questions = [
"Absolutely! JSON Crack prioritizes your data privacy. When you paste your data into the editor, it's processed only on your device to create the visualization. Your data remains completely private and is never stored anywhere unless you choose to upload it manually.",
},
{
title: "What are the advantages of the JSON Crack premium plan?",
content: (
<>
The key features are:
<List mt="lg">
<List.Item>Expanded support for larger datasets</List.Item>
<List.Item>Compare data on graphs</List.Item>
<List.Item>Compact visualization style: see only what you need to</List.Item>
<List.Item>Searching is faster and smoother</List.Item>
<List.Item>Ask AI to filter your data</List.Item>
<List.Item>Direct data editing on the graphs & tree view</List.Item>
</List>
<Text mt="sm" inherit>
You may visit the <Anchor href="#pricing">pricing page</Anchor> for more details.
</Text>
</>
),
title: "Can I customize the graph colors?",
content:
"Yes, you can customize the colors of the graph to match your brand or personal preferences as part of the premium plan.",
},
{
title: "What size of data can I visualize?",
content:
"You can visualize data up to 300 KB in size with the free plan and up to 4 MB with premium plan. It might vary depending on the complexity of the data and your hardware.",
},
{
title: "Can I export the generated graphs?",
content: "Yes, you can export the generated graphs as PNG, JPEG, or SVG files.",
},
];

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

@ -50,12 +50,12 @@ export const HeroPreview = () => {
onChange={setSelectedFeature}
orientation="vertical"
withItemsBorders={false}
color="green"
color="grape"
bg="transparent"
size="lg"
styles={{
control: {
background: "#67676714",
background: "#8f8f8f52",
borderRadius: "4px",
},
root: {
@ -69,8 +69,13 @@ export const HeroPreview = () => {
w="100%"
p={0}
radius="md"
style={{ overflow: "hidden", border: "1px solid #d5d5d5" }}
shadow="md"
style={{
overflow: "hidden",
border: "1px solid #c1c1c1",
outline: "1px solid #c1c1c1",
outlineOffset: "4px",
}}
shadow="xl"
>
<Image
fit="cover"

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

@ -6,20 +6,6 @@ import { MdChevronRight } from "react-icons/md";
const StyledHeroSection = styled.main`
position: relative;
/* &:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: transparent;
background-image: radial-gradient(#0000002a 1px, transparent 1px);
background-size: 15px 15px;
background-position: top center;
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);
} */
@media only screen and (max-width: 1240px) {
flex-direction: column;
}
@ -27,27 +13,27 @@ const StyledHeroSection = styled.main`
const StyledHeroTitle = styled.h1`
position: relative;
font-size: 2.4rem;
font-weight: 800;
font-size: 2rem;
font-weight: 600;
display: inline;
color: #272727;
width: fit-content;
line-height: 1.2;
letter-spacing: -2px;
letter-spacing: -1px;
max-width: 30rem;
@keyframes textShine {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
span {
display: block;
white-space: nowrap;
padding: 0 0.5rem;
color: white;
background: black;
transform: rotate(-1deg);
}
@media only screen and (min-width: 576px) {
font-size: 3.2rem;
max-width: 32rem;
max-width: 34rem;
}
@media only screen and (min-width: 992px) {
@ -62,20 +48,26 @@ const StyledHeroTitle = styled.h1`
`;
const StyledHeroText = styled.p`
font-size: 1rem;
color: #696969;
font-weight: 400;
font-size: 1.2rem;
color: #626262;
font-weight: 500;
max-width: 100%;
min-width: 400px;
margin-top: 1rem;
text-align: center;
strong {
font-weight: 500;
color: #8c00ff;
}
@media only screen and (min-width: 576px) {
font-size: 1.2rem;
font-size: 1.3rem;
max-width: 80%;
}
@media only screen and (min-width: 1400px) {
font-size: 1.25rem;
font-size: 1.2rem;
max-width: 60%;
}
`;
@ -88,8 +80,6 @@ const StyledHeroSectionBody = styled.div`
justify-content: center;
padding: 9rem 10%;
overflow: hidden;
backdrop-filter: blur(1.2px);
-webkit-backdrop-filter: blur(1.2px);
text-align: center;
gap: 60px;
min-height: 40vh;
@ -105,8 +95,14 @@ export const HeroSection = () => {
<StyledHeroSection id="hero-section">
<StyledHeroSectionBody>
<Stack flex="1" miw={250} mx="auto" align="center">
<StyledHeroTitle>Transform data into interactive graphs</StyledHeroTitle>
<StyledHeroText>Powerful editor to explore data visually.</StyledHeroText>
<StyledHeroTitle>
Convert any JSON into
<span>interactive graphs</span>
</StyledHeroTitle>
<StyledHeroText>
The best JSON viewer tool to <strong>visualize</strong>, <strong>format</strong> and{" "}
<strong>modify</strong>.
</StyledHeroText>
<Flex gap="md">
<Badge size="sm" color="dark" autoContrast radius="sm" variant="light">
JSON
@ -124,9 +120,14 @@ export const HeroSection = () => {
TOML
</Badge>
</Flex>
<Button
component="a"
color="brightBlue"
variant="gradient"
gradient={{
from: "#9f19ff",
to: "#550091",
}}
href="/#pricing"
size="xl"
radius="md"
@ -134,7 +135,7 @@ export const HeroSection = () => {
rightSection={<MdChevronRight size={30} />}
mt="lg"
>
Get Started
Start Typing
</Button>
</Stack>
</StyledHeroSectionBody>

4
src/layout/Footer.tsx
View File

@ -8,8 +8,8 @@ import { JSONCrackLogo } from "./JsonCrackLogo";
export const Footer = () => {
return (
<Container mt={100}>
<Divider my={60} color="gray.3" />
<Container mt={150} px={60} pb="xl" bg="white" fluid>
<Divider color="gray.3" mb="xl" mx={-60} />
<Flex justify="space-between">
<Stack gap={4} visibleFrom="sm">
<JSONCrackLogo />

11
src/layout/Layout.tsx
View File

@ -1,13 +1,18 @@
import React from "react";
import { Inter } from "next/font/google";
import styled, { ThemeProvider } from "styled-components";
import { lightTheme } from "src/constants/theme";
import { Footer } from "./Footer";
import { Navbar } from "./Navbar";
const inter = Inter({
subsets: ["latin-ext"],
});
const StyledLayoutWrapper = styled.div`
padding-bottom: 48px;
background-image: radial-gradient(#e6e6e6 1px, transparent 1px);
background-size: 20px 20px;
background-image: radial-gradient(#ededed 2px, #ffffff 2px);
background-size: 40px 40px;
font-family: ${inter.style.fontFamily};
`;
const Layout = ({ children }: React.PropsWithChildren) => {

19
src/layout/Navbar.tsx
View File

@ -14,6 +14,7 @@ const StyledNavbar = styled.nav`
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1157px;
margin: 0 auto;
padding: 12px 24px;
background: rgba(255, 255, 255, 0.1);
@ -53,8 +54,9 @@ export const Navbar = () => {
variant="subtle"
color="black"
radius="md"
size="md"
ml="lg"
size="sm"
ml={50}
fw={400}
>
Pricing
</Button>
@ -65,7 +67,8 @@ export const Navbar = () => {
variant="subtle"
color="black"
radius="md"
size="md"
size="sm"
fw={400}
>
VS Code
</Button>
@ -76,7 +79,8 @@ export const Navbar = () => {
variant="subtle"
color="black"
radius="md"
size="md"
size="sm"
fw={400}
>
Docs
</Button>
@ -87,7 +91,8 @@ export const Navbar = () => {
variant="subtle"
color="black"
radius="md"
size="md"
size="sm"
fw={400}
>
FAQ
</Button>
@ -106,14 +111,14 @@ export const Navbar = () => {
</Button>
<Button
component="a"
color="brightBlue"
color="green"
href="/editor"
radius="md"
visibleFrom="sm"
size="md"
fw={600}
>
Start for free
Editor
</Button>
</Right>
</StyledNavbar>

7
src/pages/_app.tsx
View File

@ -44,13 +44,6 @@ const theme = createTheme({
radius: {
lg: "12px",
},
components: {
Button: {
defaultProps: {
fw: 500,
},
},
},
});
const Toaster = dynamic(() => import("react-hot-toast").then(c => c.Toaster));

20
src/pages/index.tsx
View File

@ -1,7 +1,6 @@
import React from "react";
import type { GetStaticProps, InferGetStaticPropsType } from "next";
import Head from "next/head";
import styled from "styled-components";
import { metaDescription } from "src/constants/landing";
import { FAQ } from "src/containers/Landing/FAQ";
import { Features } from "src/containers/Landing/Features";
@ -12,19 +11,6 @@ import { PremiumVsFree } from "src/containers/Landing/PremiumVsFree";
import { Pricing } from "src/containers/Landing/Pricing";
import Layout from "src/layout/Layout";
const StyledSectionWrapper = styled.div`
&:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: #ffffff;
-webkit-mask-image: linear-gradient(to bottom, transparent, 20%, white, 95%, transparent);
mask-image: linear-gradient(to bottom, transparent, 20%, white, 95%, transparent);
background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
}
`;
export const HomePage = ({ stars }: InferGetStaticPropsType<typeof getStaticProps>) => {
return (
<Layout>
@ -35,10 +21,8 @@ export const HomePage = ({ stars }: InferGetStaticPropsType<typeof getStaticProp
<meta name="twitter:description" content={metaDescription} key="twdescription" />
<link rel="canonical" href="https://jsoncrack.com" />
</Head>
<StyledSectionWrapper>
<HeroSection />
<HeroPreview />
</StyledSectionWrapper>
<HeroSection />
<HeroPreview />
<Features />
<PremiumVsFree />
<LovedBy stars={stars} />