mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-12 19:02:53 +08:00
lint
This commit is contained in:
AykutSarac
parent
3a08cf4545
commit
08dd82d3af
@ -1,309 +0,0 @@
|
||||
import React from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import Script from "next/script";
|
||||
import { Button } from "@mantine/core";
|
||||
import { AiOutlineRight, AiTwotoneStar } from "react-icons/ai";
|
||||
import {
|
||||
HiCursorClick,
|
||||
HiLightningBolt,
|
||||
HiOutlineDownload,
|
||||
HiOutlineSearchCircle,
|
||||
} from "react-icons/hi";
|
||||
import { IoHeart } from "react-icons/io5";
|
||||
import { SiVisualstudiocode } from "react-icons/si";
|
||||
import vscDarkPlus from "react-syntax-highlighter/dist/cjs/styles/prism/vsc-dark-plus";
|
||||
import { CarbonAds } from "src/components/CarbonAds";
|
||||
import { Sponsors } from "src/components/Sponsors";
|
||||
import { baseURL } from "src/constants/data";
|
||||
import { TABS } from "src/constants/previewSection";
|
||||
import { Footer } from "src/layout/Footer";
|
||||
import { Navbar } from "src/layout/Navbar";
|
||||
import { Producthunt } from "src/layout/Producthunt";
|
||||
import * as Styles from "./styles";
|
||||
|
||||
const SyntaxHighlighter = dynamic(() => import("react-syntax-highlighter/dist/cjs/prism-async"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const HeroSection = () => (
|
||||
<Styles.StyledHeroSection id="main">
|
||||
<Styles.StyledTitle>
|
||||
<Styles.StyledGradientText>JSON</Styles.StyledGradientText> CRACK
|
||||
</Styles.StyledTitle>
|
||||
<Styles.StyledSubTitle>
|
||||
Seamlessly visualize your JSON data{" "}
|
||||
<Styles.StyledHighlightedText>instantly</Styles.StyledHighlightedText> into graphs.
|
||||
</Styles.StyledSubTitle>
|
||||
<Link href="/editor">
|
||||
<Button color="grape" size="lg">
|
||||
GO TO EDITOR
|
||||
<AiOutlineRight strokeWidth="80" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Styles.StyledButtonWrapper>
|
||||
<Link href="https://github.com/sponsors/AykutSarac" target="_blank" rel="noreferrer">
|
||||
<Button color="red" size="md" variant="outline" rightIcon={<IoHeart />}>
|
||||
SPONSOR
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode">
|
||||
<Button color="blue" size="md" variant="outline" rightIcon={<SiVisualstudiocode />}>
|
||||
GET IT ON VS CODE
|
||||
</Button>
|
||||
</Link>
|
||||
</Styles.StyledButtonWrapper>
|
||||
</Styles.StyledHeroSection>
|
||||
);
|
||||
|
||||
const PreviewSection = () => {
|
||||
const [currentTab, setCurrentTab] = React.useState(0);
|
||||
const [loaded, setLoaded] = React.useState(false);
|
||||
const widgetRef = React.useRef<HTMLIFrameElement>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
const eventFn = (event: MessageEvent) => {
|
||||
if (event.source === widgetRef.current?.contentWindow) {
|
||||
setLoaded(true);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("message", eventFn, false);
|
||||
return () => window.removeEventListener("message", eventFn);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (loaded && widgetRef.current) {
|
||||
const message = { json: TABS[currentTab].json };
|
||||
widgetRef.current.contentWindow?.postMessage(message, "*");
|
||||
}
|
||||
}, [currentTab, loaded]);
|
||||
|
||||
return (
|
||||
<Styles.StyledPreviewSection>
|
||||
<Styles.StyledHighlightWrapper>
|
||||
<Styles.StyledTabsWrapper>
|
||||
{TABS.map(tab => (
|
||||
<Styles.StyledTab
|
||||
active={tab.id === currentTab}
|
||||
onClick={() => setCurrentTab(tab.id)}
|
||||
key={tab.id}
|
||||
>
|
||||
{tab.name}
|
||||
</Styles.StyledTab>
|
||||
))}
|
||||
</Styles.StyledTabsWrapper>
|
||||
<SyntaxHighlighter
|
||||
style={vscDarkPlus}
|
||||
customStyle={{
|
||||
fontSize: "16px",
|
||||
width: "100%",
|
||||
height: "440px",
|
||||
margin: "0",
|
||||
borderTop: "2px solid #4D4D4D",
|
||||
}}
|
||||
language="json"
|
||||
showLineNumbers
|
||||
>
|
||||
{TABS[currentTab].json}
|
||||
</SyntaxHighlighter>
|
||||
</Styles.StyledHighlightWrapper>
|
||||
|
||||
<Styles.StyledPreviewFrame
|
||||
ref={widgetRef}
|
||||
title="Preview Embed"
|
||||
id="jcPreview"
|
||||
src={`${baseURL}/widget`}
|
||||
loading="eager"
|
||||
/>
|
||||
</Styles.StyledPreviewSection>
|
||||
);
|
||||
};
|
||||
|
||||
const FeaturesSection = () => (
|
||||
<Styles.StyledFeaturesSection id="features">
|
||||
<Styles.StyledSectionCard>
|
||||
<Styles.StyledCardIcon>
|
||||
<HiCursorClick size={50} color="#3BA55D" />
|
||||
</Styles.StyledCardIcon>
|
||||
<Styles.StyledCardTitle>EASY-TO-USE</Styles.StyledCardTitle>
|
||||
<Styles.StyledCardDescription>
|
||||
We believe that powerful software doesn't have to be difficult to use. That's why
|
||||
we've designed our app to be as intuitive and easy-to-use as possible. You can quickly
|
||||
and easily load your JSON data and start exploring and analyzing it right away!
|
||||
</Styles.StyledCardDescription>
|
||||
</Styles.StyledSectionCard>
|
||||
|
||||
<Styles.StyledSectionCard>
|
||||
<Styles.StyledCardIcon>
|
||||
<HiOutlineSearchCircle size={50} color="#5865F2" />
|
||||
</Styles.StyledCardIcon>
|
||||
<Styles.StyledCardTitle>SEARCH</Styles.StyledCardTitle>
|
||||
<Styles.StyledCardDescription>
|
||||
Have a huge file of values, keys or arrays? Worry no more, type in the keyword you are
|
||||
looking for into search input and it will take you to each node with matching result
|
||||
highlighting the line to understand better!
|
||||
</Styles.StyledCardDescription>
|
||||
</Styles.StyledSectionCard>
|
||||
|
||||
<Styles.StyledSectionCard>
|
||||
<Styles.StyledCardIcon>
|
||||
<HiOutlineDownload size={50} color="#DA2877" />
|
||||
</Styles.StyledCardIcon>
|
||||
<Styles.StyledCardTitle>DOWNLOAD</Styles.StyledCardTitle>
|
||||
<Styles.StyledCardDescription>
|
||||
Download the graph to your local machine and use it wherever you want, to your blogs,
|
||||
website or make it a poster and paste to the wall. Who wouldn't want to see a JSON
|
||||
Crack graph onto their wall, eh?
|
||||
</Styles.StyledCardDescription>
|
||||
</Styles.StyledSectionCard>
|
||||
|
||||
<Styles.StyledSectionCard>
|
||||
<Styles.StyledCardIcon>
|
||||
<HiLightningBolt size={50} color="#F5E027" />
|
||||
</Styles.StyledCardIcon>
|
||||
<Styles.StyledCardTitle>LIVE</Styles.StyledCardTitle>
|
||||
<Styles.StyledCardDescription>
|
||||
With Microsoft's Monaco Editor which is also used by VS Code, easily edit your JSON and
|
||||
directly view through the graphs. Also there's a JSON validator above of it to make
|
||||
sure there is no type error.
|
||||
</Styles.StyledCardDescription>
|
||||
</Styles.StyledSectionCard>
|
||||
</Styles.StyledFeaturesSection>
|
||||
);
|
||||
|
||||
const GitHubSection = () => (
|
||||
<Styles.StyledSection id="github" reverse>
|
||||
<Styles.StyledTwitterQuote>
|
||||
<blockquote className="twitter-tweet" data-lang="en" data-dnt="true" data-theme="light">
|
||||
<p lang="en" dir="ltr">
|
||||
Looking to understand or explore some JSON? Just paste or upload to visualize it as a
|
||||
graph with <a href="https://t.co/HlKSrhKryJ">https://t.co/HlKSrhKryJ</a> 😍 <br />
|
||||
<br />
|
||||
Thanks to <a href="https://twitter.com/aykutsarach?ref_src=twsrc%5Etfw">
|
||||
@aykutsarach
|
||||
</a>! <a href="https://t.co/0LyPUL8Ezz">pic.twitter.com/0LyPUL8Ezz</a>
|
||||
</p>
|
||||
— GitHub (@github){" "}
|
||||
<a href="https://twitter.com/github/status/1519363257794015233?ref_src=twsrc%5Etfw">
|
||||
April 27, 2022
|
||||
</a>
|
||||
</blockquote>{" "}
|
||||
<Script strategy="lazyOnload" src="https://platform.twitter.com/widgets.js"></Script>
|
||||
</Styles.StyledTwitterQuote>
|
||||
<Styles.StyledSectionArea>
|
||||
<Styles.StyledSubTitle>Open Source Community</Styles.StyledSubTitle>
|
||||
<Styles.StyledMinorTitle>
|
||||
At JSON Crack, we believe in the power of open source software and the communities that
|
||||
support it. That's why we're proud to be part of the open source community and to
|
||||
contribute to the development and growth of open source tools and technologies.
|
||||
<br />
|
||||
<br /> As part of our commitment to the open source community, we've made our app
|
||||
freely available to anyone who wants to use it, and we welcome contributions from anyone
|
||||
who's interested in helping to improve it. Whether you're a developer, a data
|
||||
scientist, or just someone who's passionate about open source, we'd love to have
|
||||
you join our community and help us make JSON Crack the best it can be.
|
||||
<br />
|
||||
<br /> So why not join us and become part of the JSON Crack open source community today? We
|
||||
can't wait to see what we can accomplish together!
|
||||
</Styles.StyledMinorTitle>
|
||||
<Button
|
||||
w="fit-content"
|
||||
color="grape"
|
||||
size="md"
|
||||
component="a"
|
||||
href="https://github.com/AykutSarac/jsoncrack.com"
|
||||
leftIcon={<AiTwotoneStar />}
|
||||
>
|
||||
STAR ON GITHUB
|
||||
</Button>
|
||||
</Styles.StyledSectionArea>
|
||||
</Styles.StyledSection>
|
||||
);
|
||||
|
||||
const EmbedSection = () => (
|
||||
<Styles.StyledSection id="embed">
|
||||
<Styles.StyledSectionArea>
|
||||
<Styles.StyledSubTitle>Embed Into Your Website</Styles.StyledSubTitle>
|
||||
<Styles.StyledMinorTitle>
|
||||
JSON Crack provides users with the necessary code to embed the app into a website easily
|
||||
using an iframe. This code can be easily copied and pasted into the desired location on the
|
||||
website, allowing users to quickly and easily integrate JSON Crack into existing workflows.
|
||||
<br />
|
||||
<br /> Once the app is embedded, users can use it to view and analyze JSON data directly on
|
||||
the website. This can be useful for a variety of purposes, such as quickly checking the
|
||||
structure of a JSON file or verifying the data contained within it. JSON Crack's
|
||||
intuitive interface makes it easy to navigate and understand even complex JSON data, making
|
||||
it a valuable tool for anyone working with JSON.
|
||||
</Styles.StyledMinorTitle>
|
||||
<Button w="fit-content" size="md" component="a" href="/docs">
|
||||
LEARN TO EMBED
|
||||
</Button>
|
||||
</Styles.StyledSectionArea>
|
||||
<div>
|
||||
<Styles.StyledFrame
|
||||
title="Example Embed"
|
||||
src={`${baseURL}/widget?json=63c313d32ffa98f29b462315`}
|
||||
loading="lazy"
|
||||
></Styles.StyledFrame>
|
||||
</div>
|
||||
</Styles.StyledSection>
|
||||
);
|
||||
|
||||
const SupportSection = () => (
|
||||
<Styles.StyledPaidSection>
|
||||
<Styles.StyledProducthunt>
|
||||
<Styles.StyledSubTitle>
|
||||
Support JSON Crack at
|
||||
<br />
|
||||
<Styles.StyledHighlightedText>Product Hunt</Styles.StyledHighlightedText>
|
||||
</Styles.StyledSubTitle>
|
||||
<Producthunt />
|
||||
</Styles.StyledProducthunt>
|
||||
<Styles.StyledAffiliate>
|
||||
<Styles.StyledSubTitle>Affiliate</Styles.StyledSubTitle>
|
||||
<CarbonAds />
|
||||
</Styles.StyledAffiliate>
|
||||
</Styles.StyledPaidSection>
|
||||
);
|
||||
|
||||
const SponsorSection = () => (
|
||||
<Styles.StyledSponsorSection id="sponsor">
|
||||
<Styles.StyledSubTitle>Sponsors</Styles.StyledSubTitle>
|
||||
<Styles.StyledMinorTitle>
|
||||
Your supports make JSON Crack possible to continue and accessible for everyone!
|
||||
</Styles.StyledMinorTitle>
|
||||
<Button
|
||||
size="md"
|
||||
component="a"
|
||||
color="green"
|
||||
href="https://github.com/sponsors/AykutSarac"
|
||||
rel="external"
|
||||
>
|
||||
Become A Sponsor!
|
||||
</Button>
|
||||
<Sponsors />
|
||||
</Styles.StyledSponsorSection>
|
||||
);
|
||||
|
||||
const Home: React.FC = () => {
|
||||
return (
|
||||
<Styles.StyledHome>
|
||||
<Head>
|
||||
<title>JSON Crack - Crack your data into pieces</title>
|
||||
</Head>
|
||||
<Navbar />
|
||||
<HeroSection />
|
||||
<PreviewSection />
|
||||
<FeaturesSection />
|
||||
<SupportSection />
|
||||
<GitHubSection />
|
||||
<EmbedSection />
|
||||
<SponsorSection />
|
||||
<Footer />
|
||||
</Styles.StyledHome>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
@ -1,136 +0,0 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { Button } from "@mantine/core";
|
||||
|
||||
const StyledSectionBody = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
gap: 50px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(181, 116, 214, 0.23);
|
||||
width: 80%;
|
||||
margin: 5% auto 0;
|
||||
border-radius: 6px;
|
||||
padding: 50px;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
padding: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledPricingCard = styled.div<{ premium?: boolean }>`
|
||||
padding: 6px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
${({ premium }) =>
|
||||
premium
|
||||
? `
|
||||
background: rgba(255, 5, 214, 0.19);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
border: 1px solid rgba(255, 5, 214, 0.74);`
|
||||
: `background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);`};
|
||||
`;
|
||||
|
||||
const StyledPricingCardTitle = styled.h2`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
font-size: 24px;
|
||||
gap: 6px;
|
||||
|
||||
img {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledPricingCardPrice = styled.h3`
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
color: ${({ theme }) => theme.SILVER};
|
||||
`;
|
||||
|
||||
const StyledPricingCardDetails = styled.ul`
|
||||
color: ${({ theme }) => theme.FULL_WHITE};
|
||||
line-height: 2.3;
|
||||
padding: 20px;
|
||||
`;
|
||||
|
||||
const StyledPricingCardDetailsItem = styled.li`
|
||||
font-weight: 500;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledPricingSection = styled.section`
|
||||
margin: 0 auto;
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const PricingCards = () => {
|
||||
return (
|
||||
<StyledPricingSection>
|
||||
<h1>Unlock Full Potential of JSON Crack</h1>
|
||||
<StyledSectionBody>
|
||||
<StyledPricingCard>
|
||||
<StyledPricingCardTitle>Free</StyledPricingCardTitle>
|
||||
<StyledPricingCardDetails>
|
||||
<StyledPricingCardDetailsItem>Store up to 15 files</StyledPricingCardDetailsItem>
|
||||
<StyledPricingCardDetailsItem>
|
||||
Create short-links for saved JSON files
|
||||
</StyledPricingCardDetailsItem>
|
||||
<StyledPricingCardDetailsItem>Embed saved JSON instantly</StyledPricingCardDetailsItem>
|
||||
</StyledPricingCardDetails>
|
||||
</StyledPricingCard>
|
||||
<StyledPricingCard premium>
|
||||
<StyledPricingCardTitle>Premium</StyledPricingCardTitle>
|
||||
<StyledPricingCardPrice>$5/mo</StyledPricingCardPrice>
|
||||
<StyledPricingCardDetails>
|
||||
<StyledPricingCardDetailsItem>
|
||||
Create and share up to 200 files
|
||||
</StyledPricingCardDetailsItem>
|
||||
<StyledPricingCardDetailsItem>
|
||||
Get access to JSON Crack API to generate JSON remotely
|
||||
</StyledPricingCardDetailsItem>
|
||||
<StyledPricingCardDetailsItem>Everything in previous tier</StyledPricingCardDetailsItem>
|
||||
</StyledPricingCardDetails>
|
||||
<Button
|
||||
size="md"
|
||||
variant="gradient"
|
||||
gradient={{ from: "pink", to: "red", deg: 105 }}
|
||||
component="a"
|
||||
href="https://www.patreon.com/herowand"
|
||||
target="_blank"
|
||||
fullWidth
|
||||
style={{
|
||||
border: "2px solid black",
|
||||
}}
|
||||
>
|
||||
GET PREMIUM
|
||||
</Button>
|
||||
</StyledPricingCard>
|
||||
</StyledSectionBody>
|
||||
</StyledPricingSection>
|
||||
);
|
||||
};
|
||||
@ -1,12 +1,311 @@
|
||||
import React from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import Script from "next/script";
|
||||
import { ThemeProvider } from "styled-components";
|
||||
import { Button } from "@mantine/core";
|
||||
import { AiOutlineRight, AiTwotoneStar } from "react-icons/ai";
|
||||
import {
|
||||
HiCursorClick,
|
||||
HiLightningBolt,
|
||||
HiOutlineDownload,
|
||||
HiOutlineSearchCircle,
|
||||
} from "react-icons/hi";
|
||||
import { IoHeart } from "react-icons/io5";
|
||||
import { SiVisualstudiocode } from "react-icons/si";
|
||||
import vscDarkPlus from "react-syntax-highlighter/dist/cjs/styles/prism/vsc-dark-plus";
|
||||
import { CarbonAds } from "src/components/CarbonAds";
|
||||
import { Sponsors } from "src/components/Sponsors";
|
||||
import { baseURL } from "src/constants/data";
|
||||
import { TABS } from "src/constants/previewSection";
|
||||
import { darkTheme } from "src/constants/theme";
|
||||
import Home from "src/containers/Home";
|
||||
import * as Styles from "src/containers/Home/styles";
|
||||
import { Footer } from "src/layout/Footer";
|
||||
import { Navbar } from "src/layout/Navbar";
|
||||
import { Producthunt } from "src/layout/Producthunt";
|
||||
|
||||
const SyntaxHighlighter = dynamic(() => import("react-syntax-highlighter/dist/cjs/prism-async"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const HeroSection = () => (
|
||||
<Styles.StyledHeroSection id="main">
|
||||
<Styles.StyledTitle>
|
||||
<Styles.StyledGradientText>JSON</Styles.StyledGradientText> CRACK
|
||||
</Styles.StyledTitle>
|
||||
<Styles.StyledSubTitle>
|
||||
Seamlessly visualize your JSON data{" "}
|
||||
<Styles.StyledHighlightedText>instantly</Styles.StyledHighlightedText> into graphs.
|
||||
</Styles.StyledSubTitle>
|
||||
<Link href="/editor">
|
||||
<Button color="grape" size="lg">
|
||||
GO TO EDITOR
|
||||
<AiOutlineRight strokeWidth="80" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Styles.StyledButtonWrapper>
|
||||
<Link href="https://github.com/sponsors/AykutSarac" target="_blank" rel="noreferrer">
|
||||
<Button color="red" size="md" variant="outline" rightIcon={<IoHeart />}>
|
||||
SPONSOR
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode">
|
||||
<Button color="blue" size="md" variant="outline" rightIcon={<SiVisualstudiocode />}>
|
||||
GET IT ON VS CODE
|
||||
</Button>
|
||||
</Link>
|
||||
</Styles.StyledButtonWrapper>
|
||||
</Styles.StyledHeroSection>
|
||||
);
|
||||
|
||||
const PreviewSection = () => {
|
||||
const [currentTab, setCurrentTab] = React.useState(0);
|
||||
const [loaded, setLoaded] = React.useState(false);
|
||||
const widgetRef = React.useRef<HTMLIFrameElement>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
const eventFn = (event: MessageEvent) => {
|
||||
if (event.source === widgetRef.current?.contentWindow) {
|
||||
setLoaded(true);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("message", eventFn, false);
|
||||
return () => window.removeEventListener("message", eventFn);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (loaded && widgetRef.current) {
|
||||
const message = { json: TABS[currentTab].json };
|
||||
widgetRef.current.contentWindow?.postMessage(message, "*");
|
||||
}
|
||||
}, [currentTab, loaded]);
|
||||
|
||||
return (
|
||||
<Styles.StyledPreviewSection>
|
||||
<Styles.StyledHighlightWrapper>
|
||||
<Styles.StyledTabsWrapper>
|
||||
{TABS.map(tab => (
|
||||
<Styles.StyledTab
|
||||
active={tab.id === currentTab}
|
||||
onClick={() => setCurrentTab(tab.id)}
|
||||
key={tab.id}
|
||||
>
|
||||
{tab.name}
|
||||
</Styles.StyledTab>
|
||||
))}
|
||||
</Styles.StyledTabsWrapper>
|
||||
<SyntaxHighlighter
|
||||
style={vscDarkPlus}
|
||||
customStyle={{
|
||||
fontSize: "16px",
|
||||
width: "100%",
|
||||
height: "440px",
|
||||
margin: "0",
|
||||
borderTop: "2px solid #4D4D4D",
|
||||
}}
|
||||
language="json"
|
||||
showLineNumbers
|
||||
>
|
||||
{TABS[currentTab].json}
|
||||
</SyntaxHighlighter>
|
||||
</Styles.StyledHighlightWrapper>
|
||||
|
||||
<Styles.StyledPreviewFrame
|
||||
ref={widgetRef}
|
||||
title="Preview Embed"
|
||||
id="jcPreview"
|
||||
src={`${baseURL}/widget`}
|
||||
loading="eager"
|
||||
/>
|
||||
</Styles.StyledPreviewSection>
|
||||
);
|
||||
};
|
||||
|
||||
const FeaturesSection = () => (
|
||||
<Styles.StyledFeaturesSection id="features">
|
||||
<Styles.StyledSectionCard>
|
||||
<Styles.StyledCardIcon>
|
||||
<HiCursorClick size={50} color="#3BA55D" />
|
||||
</Styles.StyledCardIcon>
|
||||
<Styles.StyledCardTitle>EASY-TO-USE</Styles.StyledCardTitle>
|
||||
<Styles.StyledCardDescription>
|
||||
We believe that powerful software doesn't have to be difficult to use. That's why
|
||||
we've designed our app to be as intuitive and easy-to-use as possible. You can quickly
|
||||
and easily load your JSON data and start exploring and analyzing it right away!
|
||||
</Styles.StyledCardDescription>
|
||||
</Styles.StyledSectionCard>
|
||||
|
||||
<Styles.StyledSectionCard>
|
||||
<Styles.StyledCardIcon>
|
||||
<HiOutlineSearchCircle size={50} color="#5865F2" />
|
||||
</Styles.StyledCardIcon>
|
||||
<Styles.StyledCardTitle>SEARCH</Styles.StyledCardTitle>
|
||||
<Styles.StyledCardDescription>
|
||||
Have a huge file of values, keys or arrays? Worry no more, type in the keyword you are
|
||||
looking for into search input and it will take you to each node with matching result
|
||||
highlighting the line to understand better!
|
||||
</Styles.StyledCardDescription>
|
||||
</Styles.StyledSectionCard>
|
||||
|
||||
<Styles.StyledSectionCard>
|
||||
<Styles.StyledCardIcon>
|
||||
<HiOutlineDownload size={50} color="#DA2877" />
|
||||
</Styles.StyledCardIcon>
|
||||
<Styles.StyledCardTitle>DOWNLOAD</Styles.StyledCardTitle>
|
||||
<Styles.StyledCardDescription>
|
||||
Download the graph to your local machine and use it wherever you want, to your blogs,
|
||||
website or make it a poster and paste to the wall. Who wouldn't want to see a JSON
|
||||
Crack graph onto their wall, eh?
|
||||
</Styles.StyledCardDescription>
|
||||
</Styles.StyledSectionCard>
|
||||
|
||||
<Styles.StyledSectionCard>
|
||||
<Styles.StyledCardIcon>
|
||||
<HiLightningBolt size={50} color="#F5E027" />
|
||||
</Styles.StyledCardIcon>
|
||||
<Styles.StyledCardTitle>LIVE</Styles.StyledCardTitle>
|
||||
<Styles.StyledCardDescription>
|
||||
With Microsoft's Monaco Editor which is also used by VS Code, easily edit your JSON and
|
||||
directly view through the graphs. Also there's a JSON validator above of it to make
|
||||
sure there is no type error.
|
||||
</Styles.StyledCardDescription>
|
||||
</Styles.StyledSectionCard>
|
||||
</Styles.StyledFeaturesSection>
|
||||
);
|
||||
|
||||
const GitHubSection = () => (
|
||||
<Styles.StyledSection id="github" reverse>
|
||||
<Styles.StyledTwitterQuote>
|
||||
<blockquote className="twitter-tweet" data-lang="en" data-dnt="true" data-theme="light">
|
||||
<p lang="en" dir="ltr">
|
||||
Looking to understand or explore some JSON? Just paste or upload to visualize it as a
|
||||
graph with <a href="https://t.co/HlKSrhKryJ">https://t.co/HlKSrhKryJ</a> 😍 <br />
|
||||
<br />
|
||||
Thanks to <a href="https://twitter.com/aykutsarach?ref_src=twsrc%5Etfw">
|
||||
@aykutsarach
|
||||
</a>! <a href="https://t.co/0LyPUL8Ezz">pic.twitter.com/0LyPUL8Ezz</a>
|
||||
</p>
|
||||
— GitHub (@github){" "}
|
||||
<a href="https://twitter.com/github/status/1519363257794015233?ref_src=twsrc%5Etfw">
|
||||
April 27, 2022
|
||||
</a>
|
||||
</blockquote>{" "}
|
||||
<Script strategy="lazyOnload" src="https://platform.twitter.com/widgets.js"></Script>
|
||||
</Styles.StyledTwitterQuote>
|
||||
<Styles.StyledSectionArea>
|
||||
<Styles.StyledSubTitle>Open Source Community</Styles.StyledSubTitle>
|
||||
<Styles.StyledMinorTitle>
|
||||
At JSON Crack, we believe in the power of open source software and the communities that
|
||||
support it. That's why we're proud to be part of the open source community and to
|
||||
contribute to the development and growth of open source tools and technologies.
|
||||
<br />
|
||||
<br /> As part of our commitment to the open source community, we've made our app
|
||||
freely available to anyone who wants to use it, and we welcome contributions from anyone
|
||||
who's interested in helping to improve it. Whether you're a developer, a data
|
||||
scientist, or just someone who's passionate about open source, we'd love to have
|
||||
you join our community and help us make JSON Crack the best it can be.
|
||||
<br />
|
||||
<br /> So why not join us and become part of the JSON Crack open source community today? We
|
||||
can't wait to see what we can accomplish together!
|
||||
</Styles.StyledMinorTitle>
|
||||
<Button
|
||||
w="fit-content"
|
||||
color="grape"
|
||||
size="md"
|
||||
component="a"
|
||||
href="https://github.com/AykutSarac/jsoncrack.com"
|
||||
leftIcon={<AiTwotoneStar />}
|
||||
>
|
||||
STAR ON GITHUB
|
||||
</Button>
|
||||
</Styles.StyledSectionArea>
|
||||
</Styles.StyledSection>
|
||||
);
|
||||
|
||||
const EmbedSection = () => (
|
||||
<Styles.StyledSection id="embed">
|
||||
<Styles.StyledSectionArea>
|
||||
<Styles.StyledSubTitle>Embed Into Your Website</Styles.StyledSubTitle>
|
||||
<Styles.StyledMinorTitle>
|
||||
JSON Crack provides users with the necessary code to embed the app into a website easily
|
||||
using an iframe. This code can be easily copied and pasted into the desired location on the
|
||||
website, allowing users to quickly and easily integrate JSON Crack into existing workflows.
|
||||
<br />
|
||||
<br /> Once the app is embedded, users can use it to view and analyze JSON data directly on
|
||||
the website. This can be useful for a variety of purposes, such as quickly checking the
|
||||
structure of a JSON file or verifying the data contained within it. JSON Crack's
|
||||
intuitive interface makes it easy to navigate and understand even complex JSON data, making
|
||||
it a valuable tool for anyone working with JSON.
|
||||
</Styles.StyledMinorTitle>
|
||||
<Button w="fit-content" size="md" component="a" href="/docs">
|
||||
LEARN TO EMBED
|
||||
</Button>
|
||||
</Styles.StyledSectionArea>
|
||||
<div>
|
||||
<Styles.StyledFrame
|
||||
title="Example Embed"
|
||||
src={`${baseURL}/widget?json=63c313d32ffa98f29b462315`}
|
||||
loading="lazy"
|
||||
></Styles.StyledFrame>
|
||||
</div>
|
||||
</Styles.StyledSection>
|
||||
);
|
||||
|
||||
const SupportSection = () => (
|
||||
<Styles.StyledPaidSection>
|
||||
<Styles.StyledProducthunt>
|
||||
<Styles.StyledSubTitle>
|
||||
Support JSON Crack at
|
||||
<br />
|
||||
<Styles.StyledHighlightedText>Product Hunt</Styles.StyledHighlightedText>
|
||||
</Styles.StyledSubTitle>
|
||||
<Producthunt />
|
||||
</Styles.StyledProducthunt>
|
||||
<Styles.StyledAffiliate>
|
||||
<Styles.StyledSubTitle>Affiliate</Styles.StyledSubTitle>
|
||||
<CarbonAds />
|
||||
</Styles.StyledAffiliate>
|
||||
</Styles.StyledPaidSection>
|
||||
);
|
||||
|
||||
const SponsorSection = () => (
|
||||
<Styles.StyledSponsorSection id="sponsor">
|
||||
<Styles.StyledSubTitle>Sponsors</Styles.StyledSubTitle>
|
||||
<Styles.StyledMinorTitle>
|
||||
Your supports make JSON Crack possible to continue and accessible for everyone!
|
||||
</Styles.StyledMinorTitle>
|
||||
<Button
|
||||
size="md"
|
||||
component="a"
|
||||
color="green"
|
||||
href="https://github.com/sponsors/AykutSarac"
|
||||
rel="external"
|
||||
>
|
||||
Become A Sponsor!
|
||||
</Button>
|
||||
<Sponsors />
|
||||
</Styles.StyledSponsorSection>
|
||||
);
|
||||
|
||||
const HomePage = () => {
|
||||
return (
|
||||
<ThemeProvider theme={darkTheme}>
|
||||
<Home />
|
||||
<Styles.StyledHome>
|
||||
<Head>
|
||||
<title>JSON Crack - Crack your data into pieces</title>
|
||||
</Head>
|
||||
<Navbar />
|
||||
<HeroSection />
|
||||
<PreviewSection />
|
||||
<FeaturesSection />
|
||||
<SupportSection />
|
||||
<GitHubSection />
|
||||
<EmbedSection />
|
||||
<SponsorSection />
|
||||
<Footer />
|
||||
</Styles.StyledHome>{" "}
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,35 +0,0 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import { Button } from "@mantine/core";
|
||||
import { PricingCards } from "src/containers/PricingCards";
|
||||
import { Footer } from "src/layout/Footer";
|
||||
|
||||
const StyledPageWrapper = styled.div`
|
||||
padding: 5%;
|
||||
`;
|
||||
|
||||
const StyledHeroSection = styled.section`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
`;
|
||||
const Pricing = () => {
|
||||
return (
|
||||
<>
|
||||
<StyledPageWrapper>
|
||||
<Button component="a" href="/">
|
||||
< Go Back
|
||||
</Button>
|
||||
<StyledHeroSection>
|
||||
<img src="assets/icon.png" alt="json crack" width="400" />
|
||||
<h1>Premium</h1>
|
||||
</StyledHeroSection>
|
||||
<PricingCards />
|
||||
</StyledPageWrapper>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pricing;
|
||||
Loading…
x
Reference in New Issue
Block a user