mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-27 15:22:56 +08:00
feat: update landing
This commit is contained in:
AykutSarac
parent
04db6a4250
commit
7b0dccd596
@ -38,6 +38,7 @@
|
||||
"next": "14.2.3",
|
||||
"react": "^18.3.1",
|
||||
"react-compare-slider": "^3.1.0",
|
||||
"react-countup": "^6.5.3",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-ga4": "^2.1.0",
|
||||
"react-hot-toast": "^2.4.1",
|
||||
|
||||
18
pnpm-lock.yaml
generated
18
pnpm-lock.yaml
generated
@ -83,6 +83,9 @@ importers:
|
||||
react-compare-slider:
|
||||
specifier: ^3.1.0
|
||||
version: 3.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
react-countup:
|
||||
specifier: ^6.5.3
|
||||
version: 6.5.3(react@18.3.1)
|
||||
react-dom:
|
||||
specifier: ^18.3.1
|
||||
version: 18.3.1(react@18.3.1)
|
||||
@ -1014,6 +1017,9 @@ packages:
|
||||
concat-map@0.0.1:
|
||||
resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
|
||||
|
||||
countup.js@2.8.0:
|
||||
resolution: {integrity: sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ==}
|
||||
|
||||
create-require@1.1.1:
|
||||
resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
|
||||
|
||||
@ -2158,6 +2164,11 @@ packages:
|
||||
peerDependencies:
|
||||
react: '>= 16.8.0'
|
||||
|
||||
react-countup@6.5.3:
|
||||
resolution: {integrity: sha512-udnqVQitxC7QWADSPDOxVWULkLvKUWrDapn5i53HE4DPRVgs+Y5rr4bo25qEl8jSh+0l2cToJgGMx+clxPM3+w==}
|
||||
peerDependencies:
|
||||
react: '>= 16.3.0'
|
||||
|
||||
react-dom@18.3.1:
|
||||
resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
|
||||
peerDependencies:
|
||||
@ -3738,6 +3749,8 @@ snapshots:
|
||||
|
||||
concat-map@0.0.1: {}
|
||||
|
||||
countup.js@2.8.0: {}
|
||||
|
||||
create-require@1.1.1: {}
|
||||
|
||||
cross-spawn@7.0.3:
|
||||
@ -4977,6 +4990,11 @@ snapshots:
|
||||
dependencies:
|
||||
react: 18.3.1
|
||||
|
||||
react-countup@6.5.3(react@18.3.1):
|
||||
dependencies:
|
||||
countup.js: 2.8.0
|
||||
react: 18.3.1
|
||||
|
||||
react-dom@18.3.1(react@18.3.1):
|
||||
dependencies:
|
||||
loose-envify: 1.4.0
|
||||
|
||||
@ -40,17 +40,16 @@ const Questions = [
|
||||
|
||||
export const FAQ = () => {
|
||||
return (
|
||||
<Container id="faq" component="section">
|
||||
<Container id="faq" component="section" mt={150}>
|
||||
<Title
|
||||
c="black"
|
||||
order={2}
|
||||
fz={{
|
||||
base: 26,
|
||||
xs: 32,
|
||||
sm: 42,
|
||||
base: 24,
|
||||
xs: 30,
|
||||
sm: 36,
|
||||
}}
|
||||
fw={600}
|
||||
mt={150}
|
||||
mb={60}
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
|
||||
@ -1,29 +1,7 @@
|
||||
import React from "react";
|
||||
import { Text, Title, Grid, Paper, Badge, Image, Container, rem } from "@mantine/core";
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledPaper = styled.div`
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0.4;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 20px 20px;
|
||||
background-image: linear-gradient(to right, #dcdcdc 1px, transparent 1px),
|
||||
linear-gradient(to bottom, #dcdcdc 1px, transparent 1px);
|
||||
background-position: top center;
|
||||
image-rendering: pixelated;
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent, 20%, white, 90%, transparent);
|
||||
mask-image: linear-gradient(to bottom, transparent, 20%, white, 90%, transparent);
|
||||
}
|
||||
`;
|
||||
import { Container, Grid, Flex, rem, Title, Text, Paper } from "@mantine/core";
|
||||
import { FaBolt, FaHeart, FaMagic, FaPalette, FaShapes } from "react-icons/fa";
|
||||
import { FaShieldHalved } from "react-icons/fa6";
|
||||
|
||||
export const Features = () => {
|
||||
return (
|
||||
@ -39,6 +17,7 @@ export const Features = () => {
|
||||
maw={rem(1700)}
|
||||
fluid
|
||||
my={150}
|
||||
mt={120}
|
||||
>
|
||||
<Title
|
||||
c="black"
|
||||
@ -50,14 +29,13 @@ export const Features = () => {
|
||||
sm: 42,
|
||||
}}
|
||||
fw={600}
|
||||
mt={120}
|
||||
mb={15}
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
Intuitive and User-Friendly
|
||||
Explore Your Data Visually
|
||||
</Title>
|
||||
<Text
|
||||
c="gray.6"
|
||||
c="gray.7"
|
||||
fz={{
|
||||
sm: 14,
|
||||
md: 16,
|
||||
@ -71,190 +49,127 @@ export const Features = () => {
|
||||
ta="center"
|
||||
mb={50}
|
||||
>
|
||||
All-in-one tool for JSON, YAML, CSV, XML, and TOML. Formatter, validator, visualizer, and
|
||||
All in one tool for JSON, YAML, CSV, XML, and TOML. Formatter, validator, visualizer, and
|
||||
editor. Make smarter decisions faster.
|
||||
</Text>
|
||||
|
||||
<Grid gutter={24} mt={50} mb={150} mx="auto">
|
||||
<Grid.Col span={{ base: 12, xs: 6 }}>
|
||||
<Paper
|
||||
pos="relative"
|
||||
p={30}
|
||||
shadow="sm"
|
||||
radius="md"
|
||||
w="100%"
|
||||
mah={{ sm: 300, md: 370 }}
|
||||
h="100%"
|
||||
withBorder
|
||||
style={{ overflow: "hidden", borderColor: "#ececec" }}
|
||||
bg="white"
|
||||
>
|
||||
<StyledPaper>
|
||||
<Title c="black" order={3} fw={500} fz={{ sm: 20, md: 28 }}>
|
||||
Graphs
|
||||
</Title>
|
||||
<Text fz={{ sm: 14, md: 18 }} c="dark.5" mt={10}>
|
||||
Visualize your data in a graph format to understand and analyze it better.
|
||||
<Grid px={{ base: 0, xs: "xl", md: 0 }} mt={100} mx="auto" gutter={30}>
|
||||
<Grid.Col span={{ base: 12, xs: 6, md: 4 }}>
|
||||
<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}>
|
||||
Real-time Visualization
|
||||
</Text>
|
||||
<Image
|
||||
loading="lazy"
|
||||
src="./assets/features/compare.webp"
|
||||
alt="Compare"
|
||||
w={{ sm: 350, md: 400 }}
|
||||
mt={20}
|
||||
style={{
|
||||
filter: "drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))",
|
||||
}}
|
||||
/>
|
||||
</StyledPaper>
|
||||
</Flex>
|
||||
<Text
|
||||
c="gray.7"
|
||||
fz={{
|
||||
base: 14,
|
||||
xs: 16,
|
||||
}}
|
||||
>
|
||||
Transform into graphs as you type. Update your data from the graphs directly.
|
||||
</Text>
|
||||
</Paper>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, xs: 6 }}>
|
||||
<Paper
|
||||
p={30}
|
||||
shadow="sm"
|
||||
radius="md"
|
||||
w="100%"
|
||||
mah={{ sm: 300, md: 370 }}
|
||||
h="100%"
|
||||
bg="white"
|
||||
withBorder
|
||||
style={{ overflow: "hidden", borderColor: "#ececec" }}
|
||||
>
|
||||
<StyledPaper>
|
||||
<Title c="black" order={3} fw={500} fz={{ sm: 20, md: 28 }}>
|
||||
Generate Types
|
||||
</Title>
|
||||
<Text fz={{ sm: 14, md: 18 }} c="dark.5" my={10}>
|
||||
Generate types for your data with a single click: TypeScript, Go, Rust & more.
|
||||
<Grid.Col span={{ base: 12, xs: 6, md: 4 }}>
|
||||
<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}>
|
||||
Simple
|
||||
</Text>
|
||||
<Paper
|
||||
withBorder
|
||||
shadow="sm"
|
||||
radius={5}
|
||||
w="fit-content"
|
||||
mx="auto"
|
||||
style={{ borderColor: "lightgray" }}
|
||||
>
|
||||
<Image
|
||||
loading="lazy"
|
||||
radius="sm"
|
||||
src="./assets/features/edit.webp"
|
||||
alt="Edit"
|
||||
w={340}
|
||||
/>
|
||||
</Paper>
|
||||
</StyledPaper>
|
||||
</Flex>
|
||||
<Text
|
||||
c="gray.7"
|
||||
fz={{
|
||||
base: 14,
|
||||
xs: 16,
|
||||
}}
|
||||
>
|
||||
Designed for everyone. Clean, focused, and easy to use. No learning curve.
|
||||
</Text>
|
||||
</Paper>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, xs: 6 }}>
|
||||
<Paper
|
||||
p={30}
|
||||
shadow="sm"
|
||||
radius="md"
|
||||
w="100%"
|
||||
mah={{ sm: 300, md: 370 }}
|
||||
h="100%"
|
||||
withBorder
|
||||
style={{ overflow: "hidden", borderColor: "#ececec" }}
|
||||
bg="white"
|
||||
>
|
||||
<StyledPaper>
|
||||
<Title c="black" order={3} fw={500} fz={{ sm: 20, md: 28 }}>
|
||||
Choose Your Format
|
||||
</Title>
|
||||
<Text fz={{ sm: 14, md: 18 }} c="dark.5" mt={10}>
|
||||
Visualize and edit your data in multiple formats. JSON, YAML, CSV, XML, and TOML are
|
||||
supported.
|
||||
<Grid.Col span={{ base: 12, xs: 6, md: 4 }} visibleFrom="xs">
|
||||
<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}>
|
||||
Generate
|
||||
</Text>
|
||||
<Grid gutter="lg" mt={50}>
|
||||
<Grid.Col span={6}>
|
||||
<Badge
|
||||
w="100%"
|
||||
mih={{ sm: 10, md: 40 }}
|
||||
variant="light"
|
||||
c="indigo"
|
||||
color="indigo"
|
||||
radius="sm"
|
||||
size="xl"
|
||||
>
|
||||
JSON
|
||||
</Badge>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<Badge
|
||||
w="100%"
|
||||
mih={{ sm: 10, md: 40 }}
|
||||
variant="light"
|
||||
color="cyan"
|
||||
radius="sm"
|
||||
size="xl"
|
||||
c="cyan"
|
||||
>
|
||||
YAML
|
||||
</Badge>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<Badge
|
||||
w="100%"
|
||||
mih={{ sm: 10, md: 40 }}
|
||||
variant="light"
|
||||
color="grape"
|
||||
radius="sm"
|
||||
c="grape"
|
||||
size="xl"
|
||||
>
|
||||
CSV
|
||||
</Badge>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={6}>
|
||||
<Badge
|
||||
w="100%"
|
||||
mih={{ sm: 10, md: 40 }}
|
||||
variant="light"
|
||||
color="red"
|
||||
radius="sm"
|
||||
size="xl"
|
||||
c="red"
|
||||
>
|
||||
XML
|
||||
</Badge>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</StyledPaper>
|
||||
</Flex>
|
||||
<Text
|
||||
c="gray.7"
|
||||
fz={{
|
||||
base: 14,
|
||||
xs: 16,
|
||||
}}
|
||||
>
|
||||
Generate JSON Schema and mock data, TypeScript interfaces, Golang structs, and more
|
||||
from your data with a single click.
|
||||
</Text>
|
||||
</Paper>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, xs: 6 }}>
|
||||
<Paper
|
||||
p={30}
|
||||
shadow="sm"
|
||||
radius="md"
|
||||
w="100%"
|
||||
mah={{ sm: 300, md: 370 }}
|
||||
h="100%"
|
||||
withBorder
|
||||
style={{ overflow: "hidden", borderColor: "#ececec" }}
|
||||
bg="white"
|
||||
>
|
||||
<StyledPaper>
|
||||
<Title c="black" order={3} fw={500} fz={{ sm: 20, md: 28 }}>
|
||||
Search
|
||||
</Title>
|
||||
<Text fz={{ sm: 14, md: 18 }} c="dark.5" mt={10}>
|
||||
Highlight and search what you need in your data, without any hassle.
|
||||
<Grid.Col span={{ base: 12, xs: 6, md: 4 }}>
|
||||
<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}>
|
||||
Customizable
|
||||
</Text>
|
||||
<Image
|
||||
loading="lazy"
|
||||
src="./assets/features/search.webp"
|
||||
alt="Search"
|
||||
w={{ sm: 400, md: 500 }}
|
||||
mx="auto"
|
||||
mt={20}
|
||||
style={{
|
||||
filter: "drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))",
|
||||
}}
|
||||
/>
|
||||
</StyledPaper>
|
||||
</Flex>
|
||||
<Text
|
||||
c="gray.7"
|
||||
fz={{
|
||||
base: 14,
|
||||
xs: 16,
|
||||
}}
|
||||
>
|
||||
Besides the default light and dark themes, customize the editor's theme to your
|
||||
liking, matching your brand or personal preference.
|
||||
</Text>
|
||||
</Paper>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, xs: 6, md: 4 }}>
|
||||
<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}>
|
||||
Privacy First
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text
|
||||
c="gray.7"
|
||||
fz={{
|
||||
base: 14,
|
||||
xs: 16,
|
||||
}}
|
||||
>
|
||||
JSON Crack does not store your data unless you upload it manually. Your data remains
|
||||
completely private.
|
||||
</Text>
|
||||
</Paper>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, xs: 6, md: 4 }} visibleFrom="xs">
|
||||
<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}>
|
||||
Advanced Features
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text
|
||||
c="gray.7"
|
||||
fz={{
|
||||
base: 14,
|
||||
xs: 16,
|
||||
}}
|
||||
>
|
||||
Unlock advanced features like JSON Path, AI data filter, Compare Data, Search on
|
||||
graph, Download as Image and many more!
|
||||
</Text>
|
||||
</Paper>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
@ -97,6 +97,7 @@ const StyledHeroSectionBody = styled.div`
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
padding: 6em 16px;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
145
src/containers/Landing/LovedBy.tsx
Normal file
145
src/containers/Landing/LovedBy.tsx
Normal file
@ -0,0 +1,145 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { Avatar, Container, Flex, Paper, Stack, Text, Title } from "@mantine/core";
|
||||
import styled from "styled-components";
|
||||
import CountUp from "react-countup";
|
||||
import { FaGithub, FaHackerNews, FaHeart, FaProductHunt, FaTwitter } from "react-icons/fa6";
|
||||
import { VscVerifiedFilled } from "react-icons/vsc";
|
||||
|
||||
interface LovedByProps {
|
||||
stars: number;
|
||||
}
|
||||
|
||||
interface TweetCardProps {
|
||||
username: string;
|
||||
handle: string;
|
||||
profileImage: string;
|
||||
tweet: string;
|
||||
tweetId: string;
|
||||
verified?: "company" | "individual";
|
||||
}
|
||||
|
||||
const StyledFeaturedItem = styled.a`
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
filter: grayscale(1) contrast(0.2);
|
||||
transition: filter 0.2s;
|
||||
|
||||
&:hover {
|
||||
filter: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const Featured = ({ stars }: LovedByProps) => {
|
||||
return (
|
||||
<Flex align="center" justify="center" gap="lg" mb="lg" wrap="wrap">
|
||||
<StyledFeaturedItem
|
||||
href="https://github.com/AykutSarac/jsoncrack.com"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<FaGithub color="black" size={30} />
|
||||
<Text fz="md" fw={600} c="gray.8">
|
||||
<CountUp startVal={0} end={stars} enableScrollSpy scrollSpyOnce scrollSpyDelay={200} />{" "}
|
||||
Stars
|
||||
</Text>
|
||||
</StyledFeaturedItem>
|
||||
<StyledFeaturedItem
|
||||
href="https://news.ycombinator.com/item?id=32626873"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<FaHackerNews color="#FF6600" size={30} />
|
||||
<Text fz="md" fw={600} c="gray.8">
|
||||
Hacker News
|
||||
</Text>
|
||||
</StyledFeaturedItem>
|
||||
<StyledFeaturedItem
|
||||
href="https://www.producthunt.com/products/JSON-Crack"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<FaProductHunt color="#DA552F" size={30} />
|
||||
<Text fz="md" fw={600} c="gray.8">
|
||||
Product Hunt
|
||||
</Text>
|
||||
</StyledFeaturedItem>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
const TweetCard = ({
|
||||
profileImage,
|
||||
handle,
|
||||
tweetId,
|
||||
tweet,
|
||||
username,
|
||||
verified,
|
||||
}: TweetCardProps) => {
|
||||
return (
|
||||
<Paper p="sm" w="fit-content" withBorder radius="md" bg="gray.0" miw={300} maw={450}>
|
||||
<Flex justify="space-between">
|
||||
<Link href={`https://twitter.com/${handle}`} target="_blank">
|
||||
<Flex align="flex-start" gap="sm" direction="row">
|
||||
<Avatar src={profileImage} w={40} h={40} />
|
||||
<Stack gap={0}>
|
||||
<Flex align="center" gap={2}>
|
||||
<Text c="dark" fz="sm" fw={500}>
|
||||
{username}
|
||||
</Text>
|
||||
{verified && (
|
||||
<VscVerifiedFilled color={verified === "company" ? "#ECCC4B" : "#1D9BF0"} />
|
||||
)}
|
||||
</Flex>
|
||||
<Text fz="xs" c="gray.6">
|
||||
@{handle}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Link>
|
||||
<Link target="_blank" href={`https://x.com/${handle}/status/${tweetId}`}>
|
||||
<FaTwitter color="#1EA1F1" size={20} />
|
||||
</Link>
|
||||
</Flex>
|
||||
<Text fz="sm" c="gray.8" mt="lg">
|
||||
{tweet}
|
||||
</Text>
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
export const LovedBy = ({ stars }: LovedByProps) => {
|
||||
return (
|
||||
<Container pos="relative" mx="auto" p={30} my={100} mt={150} fluid>
|
||||
<Title
|
||||
c="black"
|
||||
order={2}
|
||||
px="lg"
|
||||
fz={{
|
||||
base: 24,
|
||||
xs: 30,
|
||||
sm: 36,
|
||||
}}
|
||||
fw={700}
|
||||
mb={30}
|
||||
ta="center"
|
||||
style={{ textAlign: "center" }}
|
||||
>
|
||||
People <FaHeart color="red" /> JSON Crack
|
||||
</Title>
|
||||
<Featured stars={stars} />
|
||||
<Flex justify="center" wrap="wrap" gap="md">
|
||||
<TweetCard
|
||||
username="GitHub"
|
||||
handle="github"
|
||||
profileImage="https://pbs.twimg.com/profile_images/1633247750010830848/8zfRrYjA_400x400.png"
|
||||
tweetId="1519363257794015233"
|
||||
tweet="Looking to understand or explore some JSON? Just paste or upload to visualize it as a graph with JSON Crack 😍"
|
||||
verified="company"
|
||||
/>
|
||||
</Flex>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
@ -1,9 +1,7 @@
|
||||
import React from "react";
|
||||
import { Title, Overlay, Paper, rem, Grid, Flex, Image, Text, Container } from "@mantine/core";
|
||||
import { Title, Overlay, Paper, rem, Image, Text, Container } from "@mantine/core";
|
||||
import styled from "styled-components";
|
||||
import { ReactCompareSlider, ReactCompareSliderHandle } from "react-compare-slider";
|
||||
import { FaBolt, FaExpand, FaLifeRing, FaParachuteBox, FaShapes } from "react-icons/fa";
|
||||
import { FaShieldHalved } from "react-icons/fa6";
|
||||
|
||||
const StyledImageWrapper = styled.div`
|
||||
max-width: 85%;
|
||||
@ -50,16 +48,16 @@ export const PremiumVsFree = () => {
|
||||
mb="-16.5rem"
|
||||
style={{
|
||||
textAlign: "center",
|
||||
background: "linear-gradient(rgb(7, 5, 90) 40%, rgb(255, 255, 255) 90%)",
|
||||
background: "linear-gradient(rgb(33, 148, 87) 40%, rgb(255, 255, 255) 90%)",
|
||||
}}
|
||||
>
|
||||
<Title
|
||||
c="white"
|
||||
order={2}
|
||||
fz={{
|
||||
base: 26,
|
||||
xs: 32,
|
||||
sm: 42,
|
||||
base: 24,
|
||||
xs: 30,
|
||||
sm: 36,
|
||||
}}
|
||||
fw={700}
|
||||
mb="md"
|
||||
@ -76,11 +74,12 @@ export const PremiumVsFree = () => {
|
||||
base: "80%",
|
||||
sm: "70%",
|
||||
}}
|
||||
c="gray.4"
|
||||
c="gray.2"
|
||||
mb={60}
|
||||
>
|
||||
Designed to help you navigate through your data with ease. 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 />
|
||||
The editor provides a clean and intuitive interface that allows you to focus on what
|
||||
matters most: your data.
|
||||
</Text>
|
||||
</Paper>
|
||||
|
||||
@ -130,87 +129,6 @@ export const PremiumVsFree = () => {
|
||||
}
|
||||
/>
|
||||
</StyledImageWrapper>
|
||||
|
||||
<Grid
|
||||
w={{ sm: "100%", md: "80%" }}
|
||||
px="xl"
|
||||
mt={100}
|
||||
mx="auto"
|
||||
gutter={{ base: 30, xs: 30, sm: 50 }}
|
||||
>
|
||||
<Grid.Col span={{ base: 12, xs: 6, md: 4 }}>
|
||||
<Flex align="center" gap={8} mb={16}>
|
||||
<FaBolt color="orange" size={28} />
|
||||
<Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
|
||||
High Performance
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text c="gray.7" fz={14}>
|
||||
Designed to handle large datasets with ease. It's optimized for performance and
|
||||
speed; currently supporting up to 4MB of data.
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, xs: 6, md: 4 }}>
|
||||
<Flex align="center" gap={8} mb={16}>
|
||||
<FaExpand color="blue" size={28} />
|
||||
<Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
|
||||
Clean & Focused
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text c="gray.7" fz={14}>
|
||||
Compared to the free version, the premium version creates 50% less nodes on the graph
|
||||
and helps you to focus on what matters most.
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, xs: 6, md: 4 }} visibleFrom="xs">
|
||||
<Flex align="center" gap={8} mb={16}>
|
||||
<FaLifeRing color="#FF6B00" size={28} />
|
||||
<Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
|
||||
Quick Support
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text c="gray.7" fz={14}>
|
||||
Get quick support from our team. We're here to help you with any issues or
|
||||
questions you may have. Usual response time is within 24 hours.
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, xs: 6, md: 4 }} visibleFrom="xs">
|
||||
<Flex align="center" gap={8} mb={16}>
|
||||
<FaParachuteBox color="#00848C" size={28} />
|
||||
<Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
|
||||
Always Improving
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text c="gray.7" fz={14}>
|
||||
Have an idea? We're always looking to improve JSON Crack. We take your feedback
|
||||
seriously and are constantly working on new features.
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, xs: 6, md: 4 }}>
|
||||
<Flex align="center" gap={8} mb={16}>
|
||||
<FaShapes color="#A854A5" size={28} />
|
||||
<Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
|
||||
Advanced Features
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text c="gray.7" fz={14}>
|
||||
Unlock advanced features such as data comparison, direct editing on the graph,
|
||||
customized themes and compact visualization style.
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, xs: 6, md: 4 }}>
|
||||
<Flex align="center" gap={8} mb={16}>
|
||||
<FaShieldHalved color="black" size={28} />
|
||||
<Text c="gray.9" fz={{ base: 16, md: 20, lg: 26, xl: 28 }} fw={600}>
|
||||
Privacy First
|
||||
</Text>
|
||||
</Flex>
|
||||
<Text c="gray.7" fz={14}>
|
||||
JSON Crack does not store your data unless you upload it manually. Your data remains
|
||||
completely private.
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
@ -9,9 +9,9 @@ export const Pricing = () => {
|
||||
c="black"
|
||||
order={2}
|
||||
fz={{
|
||||
base: 26,
|
||||
xs: 32,
|
||||
sm: 42,
|
||||
base: 24,
|
||||
xs: 30,
|
||||
sm: 36,
|
||||
}}
|
||||
fw={600}
|
||||
mb={15}
|
||||
|
||||
@ -6,6 +6,8 @@ import { Navbar } from "./Navbar";
|
||||
|
||||
const StyledLayoutWrapper = styled.div`
|
||||
padding-bottom: 48px;
|
||||
background-image: radial-gradient(#e6e6e6 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
`;
|
||||
|
||||
const Layout = ({ children }: React.PropsWithChildren) => {
|
||||
|
||||
@ -28,6 +28,12 @@ const StyledNavbar = styled.nav`
|
||||
|
||||
const Left = styled.div`
|
||||
width: 100%;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
& > *:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Right = styled.div`
|
||||
@ -49,7 +55,6 @@ export const Navbar = () => {
|
||||
variant="subtle"
|
||||
color="black"
|
||||
radius="md"
|
||||
visibleFrom="sm"
|
||||
size="md"
|
||||
>
|
||||
VS Code
|
||||
@ -61,7 +66,6 @@ export const Navbar = () => {
|
||||
variant="subtle"
|
||||
color="black"
|
||||
radius="md"
|
||||
visibleFrom="sm"
|
||||
size="md"
|
||||
>
|
||||
Pricing
|
||||
@ -73,7 +77,6 @@ export const Navbar = () => {
|
||||
variant="subtle"
|
||||
color="black"
|
||||
radius="md"
|
||||
visibleFrom="sm"
|
||||
size="md"
|
||||
>
|
||||
Docs
|
||||
@ -85,7 +88,6 @@ export const Navbar = () => {
|
||||
variant="subtle"
|
||||
color="black"
|
||||
radius="md"
|
||||
visibleFrom="sm"
|
||||
size="md"
|
||||
>
|
||||
FAQ
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React from "react";
|
||||
import type { AppProps } from "next/app";
|
||||
import dynamic from "next/dynamic";
|
||||
import { DM_Sans } from "next/font/google";
|
||||
import Head from "next/head";
|
||||
import { useRouter } from "next/router";
|
||||
import { MantineProvider, createTheme } from "@mantine/core";
|
||||
@ -15,16 +14,13 @@ import { Loading } from "src/layout/Loading";
|
||||
import { supabase } from "src/lib/api/supabase";
|
||||
import useUser from "src/store/useUser";
|
||||
|
||||
const dmSans = DM_Sans({
|
||||
subsets: ["latin-ext"],
|
||||
});
|
||||
|
||||
const theme = createTheme({
|
||||
autoContrast: true,
|
||||
fontSmoothing: false,
|
||||
respectReducedMotion: true,
|
||||
cursorType: "pointer",
|
||||
fontFamily: dmSans.style.fontFamily,
|
||||
fontFamily:
|
||||
'system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
|
||||
defaultGradient: {
|
||||
from: "#388cdb",
|
||||
to: "#0f037f",
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import type { GetStaticProps, InferGetStaticPropsType } from "next";
|
||||
import Head from "next/head";
|
||||
import "@mantine/carousel/styles.css";
|
||||
import styled from "styled-components";
|
||||
@ -7,6 +8,7 @@ import { FAQ } from "src/containers/Landing/FAQ";
|
||||
import { Features } from "src/containers/Landing/Features";
|
||||
import { HeroPreview } from "src/containers/Landing/HeroPreview";
|
||||
import { HeroSection } from "src/containers/Landing/HeroSection";
|
||||
import { LovedBy } from "src/containers/Landing/LovedBy";
|
||||
import { PremiumVsFree } from "src/containers/Landing/PremiumVsFree";
|
||||
import { Pricing } from "src/containers/Landing/Pricing";
|
||||
import Layout from "src/layout/Layout";
|
||||
@ -24,7 +26,7 @@ const StyledSectionWrapper = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
export const HomePage = () => {
|
||||
export const HomePage = ({ stars }: InferGetStaticPropsType<typeof getStaticProps>) => {
|
||||
return (
|
||||
<Layout>
|
||||
<Head>
|
||||
@ -39,6 +41,7 @@ export const HomePage = () => {
|
||||
</StyledSectionWrapper>
|
||||
<Features />
|
||||
<PremiumVsFree />
|
||||
<LovedBy stars={stars} />
|
||||
<Pricing />
|
||||
<FAQ />
|
||||
</Layout>
|
||||
@ -46,3 +49,12 @@ export const HomePage = () => {
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
|
||||
export const getStaticProps = (async () => {
|
||||
const res = await fetch("https://api.github.com/repos/AykutSarac/jsoncrack.com");
|
||||
const repo = await res.json();
|
||||
const stars = repo.stargazers_count;
|
||||
return { props: { stars } };
|
||||
}) satisfies GetStaticProps<{
|
||||
stars: number;
|
||||
}>;
|
||||
|
||||
@ -17,7 +17,7 @@ import {
|
||||
import styled from "styled-components";
|
||||
import { AiOutlineInfoCircle } from "react-icons/ai";
|
||||
import { IoIosCheckmarkCircle } from "react-icons/io";
|
||||
import { IoCheckmarkCircle } from "react-icons/io5";
|
||||
import { IoCheckmarkCircle, IoCloseCircle } from "react-icons/io5";
|
||||
// import { PiChats } from "react-icons/pi";
|
||||
import { VscArrowRight, VscLinkExternal } from "react-icons/vsc";
|
||||
import Layout from "src/layout/Layout";
|
||||
@ -274,7 +274,7 @@ export const PricingCards = () => {
|
||||
<List.Item>
|
||||
<Tooltip
|
||||
color="blue"
|
||||
label="Visualize up to ~4 MB or above depending on your hardware"
|
||||
label="Visualize up to 4 MB of data"
|
||||
maw={350}
|
||||
multiline
|
||||
withArrow
|
||||
@ -338,7 +338,7 @@ export const PricingCards = () => {
|
||||
textUnderlineOffset: "2px",
|
||||
}}
|
||||
>
|
||||
Update Data on Graphs
|
||||
Edit Data on Graph
|
||||
</Text>
|
||||
</Tooltip>
|
||||
</List.Item>
|
||||
@ -354,7 +354,12 @@ export const PricingCards = () => {
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<Text c="black" fw={500} fz="sm">
|
||||
AI powered data filter
|
||||
AI-powered data filter
|
||||
</Text>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<Text c="black" fw={500} fz="sm">
|
||||
Customize graph colors
|
||||
</Text>
|
||||
</List.Item>
|
||||
</List>
|
||||
@ -456,6 +461,31 @@ 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
|
||||
</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">
|
||||
AI-powered data filter
|
||||
</Text>
|
||||
</List.Item>
|
||||
<List.Item icon={<IoCloseCircle color="gray" size={20} />}>
|
||||
<Text c="gray.7" fw={500} fz="sm">
|
||||
Customize graph colors
|
||||
</Text>
|
||||
</List.Item>
|
||||
</List>
|
||||
</Flex>
|
||||
</StyledPaper>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user