mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-12 19:02:53 +08:00
paginate folder structure
This commit is contained in:
AykutSarac
parent
2cf1ecf7af
commit
bd596c995c
@ -7,7 +7,7 @@ const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
exportPathMap: () => ({
|
||||
"/": { page: "/" },
|
||||
"/editor": { page: "/editor" },
|
||||
"/editor": { page: "/Editor" },
|
||||
}),
|
||||
compiler: {
|
||||
styledComponents: true,
|
||||
|
||||
219
src/containers/Home/index.tsx
Normal file
219
src/containers/Home/index.tsx
Normal file
@ -0,0 +1,219 @@
|
||||
import React from "react";
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { TwitterTweetEmbed } from "react-twitter-embed";
|
||||
import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
|
||||
import {
|
||||
HiCursorClick,
|
||||
HiLightningBolt,
|
||||
HiOutlineDownload,
|
||||
HiOutlineSearchCircle,
|
||||
} from "react-icons/hi";
|
||||
import { Producthunt } from "src/components/Producthunt";
|
||||
import { CarbonAds } from "src/components/CarbonAds";
|
||||
import pkg from "../../../package.json";
|
||||
import * as Styles from "./styles";
|
||||
|
||||
const Home: React.FC = () => {
|
||||
const { push } = useRouter();
|
||||
const [isMobile, setIsMobile] = React.useState(false);
|
||||
|
||||
React.useLayoutEffect(() => {
|
||||
setIsMobile(window.screen.width <= 768);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Styles.StyledHome>
|
||||
<Head>
|
||||
<title>JSON Visio - Directly onto graphs</title>
|
||||
</Head>
|
||||
<Styles.StyledNavbar>
|
||||
<Styles.StyledNavLink href="/editor">Editor</Styles.StyledNavLink>
|
||||
<Link href="#features" passHref>
|
||||
<Styles.StyledNavLink>Features</Styles.StyledNavLink>
|
||||
</Link>
|
||||
<Link href="#sponsor" passHref>
|
||||
<Styles.StyledNavLink>Sponsor</Styles.StyledNavLink>
|
||||
</Link>
|
||||
<Styles.StyledNavLink
|
||||
href="https://github.com/AykutSarac/jsonvisio.com"
|
||||
target="_blank"
|
||||
rel="external"
|
||||
>
|
||||
GitHub
|
||||
</Styles.StyledNavLink>
|
||||
</Styles.StyledNavbar>
|
||||
|
||||
<Styles.StyledHeroSection id="main">
|
||||
<Styles.StyledTitle>
|
||||
<Styles.StyledGradientText>JSON</Styles.StyledGradientText> Visio
|
||||
</Styles.StyledTitle>
|
||||
<Styles.StyledSubTitle>
|
||||
Seamlessly visualize your JSON data
|
||||
<Styles.StyledHighlightedText>instantly</Styles.StyledHighlightedText>
|
||||
into graphs.
|
||||
</Styles.StyledSubTitle>
|
||||
<Styles.StyledMinorTitle>
|
||||
Paste - Import - Fetch!
|
||||
</Styles.StyledMinorTitle>
|
||||
<Styles.StyledButton
|
||||
onClick={() => window.location.replace("/editor")}
|
||||
disabled={isMobile}
|
||||
>
|
||||
{isMobile ? "Incompatible Device" : "GO TO EDITOR"}
|
||||
</Styles.StyledButton>
|
||||
</Styles.StyledHeroSection>
|
||||
|
||||
<Styles.StyledPreviewSection>
|
||||
<Styles.StyledImage
|
||||
width="1200"
|
||||
height="auto"
|
||||
src="/jsonvisio-screenshot.png"
|
||||
alt="preview"
|
||||
/>
|
||||
</Styles.StyledPreviewSection>
|
||||
|
||||
<Styles.StyledFeaturesSection id="features">
|
||||
<Styles.StyledSectionCard>
|
||||
<Styles.StyledCardIcon>
|
||||
<HiCursorClick size={50} color="#3BA55D" />
|
||||
</Styles.StyledCardIcon>
|
||||
<Styles.StyledCardTitle>EASY-TO-USE</Styles.StyledCardTitle>
|
||||
<Styles.StyledCardDescription>
|
||||
Don't even bother to update your schema to view your JSON into
|
||||
graphs; directly paste, import or fetch! JSON Visio helps you to
|
||||
visualize without any additional values and save your time.
|
||||
</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 Visio 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>
|
||||
|
||||
<Styles.StyledGitHubSection id="github">
|
||||
<TwitterTweetEmbed
|
||||
tweetId="1519363257794015233"
|
||||
options={{
|
||||
width: "600",
|
||||
align: "center",
|
||||
}}
|
||||
/>
|
||||
<Styles.StyledSectionArea>
|
||||
<Styles.StyledSubTitle>Open Source Community</Styles.StyledSubTitle>
|
||||
<Styles.StyledMinorTitle>
|
||||
Join the Open Source Community by suggesting new ideas, support by
|
||||
contributing; implementing new features, fixing bugs and doing
|
||||
changes minor to major!
|
||||
</Styles.StyledMinorTitle>
|
||||
<Styles.StyledButton
|
||||
onClick={() => push("https://github.com/AykutSarac/jsonvisio.com")}
|
||||
status="SECONDARY"
|
||||
>
|
||||
STAR ON GITHUB
|
||||
</Styles.StyledButton>
|
||||
</Styles.StyledSectionArea>
|
||||
</Styles.StyledGitHubSection>
|
||||
|
||||
<Styles.StyledPaidSection>
|
||||
<Styles.StyledProducthunt>
|
||||
<Styles.StyledSubTitle>
|
||||
Support JSON Visio 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>
|
||||
|
||||
<Styles.StyledSponsorSection id="sponsor">
|
||||
<Styles.StyledSubTitle>Sponsors</Styles.StyledSubTitle>
|
||||
<Styles.StyledMinorTitle>
|
||||
Your supports make JSON Visio possible to continue and accessible for
|
||||
everyone!
|
||||
</Styles.StyledMinorTitle>
|
||||
<Styles.StyledButton
|
||||
status="SUCCESS"
|
||||
onClick={() => push("https://www.patreon.com/aykutsarac")}
|
||||
>
|
||||
Become A Sponsor!
|
||||
</Styles.StyledButton>
|
||||
</Styles.StyledSponsorSection>
|
||||
|
||||
<Styles.StyledFooter>
|
||||
<Styles.StyledFooterText>
|
||||
© 2022 JSON Visio - {pkg.version}
|
||||
</Styles.StyledFooterText>
|
||||
<Styles.StyledIconLinks>
|
||||
<Styles.StyledNavLink
|
||||
href="https://github.com/AykutSarac/jsonvisio.com"
|
||||
target="_blank"
|
||||
aria-label="github"
|
||||
>
|
||||
<FaGithub size={26} />
|
||||
</Styles.StyledNavLink>
|
||||
|
||||
<Styles.StyledNavLink
|
||||
href="https://www.linkedin.com/in/aykutsarac/"
|
||||
target="_blank"
|
||||
aria-label="linkedin"
|
||||
>
|
||||
<FaLinkedin size={26} />
|
||||
</Styles.StyledNavLink>
|
||||
|
||||
<Styles.StyledNavLink
|
||||
href="https://twitter.com/aykutsarach"
|
||||
target="_blank"
|
||||
aria-label="twitter"
|
||||
>
|
||||
<FaTwitter size={26} />
|
||||
</Styles.StyledNavLink>
|
||||
</Styles.StyledIconLinks>
|
||||
</Styles.StyledFooter>
|
||||
</Styles.StyledHome>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
299
src/containers/Home/styles.tsx
Normal file
299
src/containers/Home/styles.tsx
Normal file
@ -0,0 +1,299 @@
|
||||
import { Button } from "src/components/Button";
|
||||
import styled from "styled-components";
|
||||
|
||||
export const StyledHome = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8em;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
gap: 3em;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledGradientText = styled.span`
|
||||
background: #ffb76b;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#ffb76b 0%,
|
||||
#ffa73d 30%,
|
||||
#ff7c00 60%,
|
||||
#ff7f04 100%
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
`;
|
||||
|
||||
export const StyledNavbar = styled.nav`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 16px 16px;
|
||||
gap: 20px;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
a:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledHeroSection = styled.section`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1.5em;
|
||||
min-height: 45vh;
|
||||
padding: 0 3%;
|
||||
`;
|
||||
|
||||
export const StyledNavLink = styled.a`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
font-weight: 500;
|
||||
color: ${({ theme }) => theme.ORANGE};
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledTitle = styled.h1`
|
||||
font-size: 5rem;
|
||||
font-weight: 900;
|
||||
margin: 0;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
font-size: 3rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledSubTitle = styled.h2`
|
||||
color: #dedede;
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
max-width: 40rem;
|
||||
margin: 0;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledMinorTitle = styled.p`
|
||||
color: #b4b4b4;
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
margin: 0;
|
||||
letter-spacing: 1.2px;
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledButton = styled(Button)`
|
||||
background: ${({ status }) => !status && "#a13cc2"};
|
||||
padding: 12px 24px;
|
||||
|
||||
div {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledFeaturesSection = styled.section`
|
||||
display: flex;
|
||||
max-width: 85%;
|
||||
margin: 0 auto;
|
||||
gap: 2rem;
|
||||
padding: 60px 3%;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
max-width: 80%;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledSectionCard = styled.div`
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
`;
|
||||
|
||||
export const StyledCardTitle = styled.div`
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
padding: 1.5rem 0 0.5rem;
|
||||
letter-spacing: 1px;
|
||||
`;
|
||||
|
||||
export const StyledCardIcon = styled.div``;
|
||||
|
||||
export const StyledCardDescription = styled.p`
|
||||
color: #e0e0e0;
|
||||
text-align: left;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
`;
|
||||
|
||||
export const StyledGitHubSection = styled.section`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
max-width: 85%;
|
||||
margin: 0 auto;
|
||||
gap: 4rem;
|
||||
line-height: 1.5;
|
||||
padding: 60px 3%;
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
flex-direction: column-reverse;
|
||||
max-width: 80%;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledSectionArea = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
width: 40%;
|
||||
margin-top: 3rem;
|
||||
|
||||
h2,
|
||||
p {
|
||||
text-align: left;
|
||||
letter-spacing: unset;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
width: 100%;
|
||||
|
||||
h2,
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledSponsorSection = styled.section`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 85%;
|
||||
margin: 0 auto;
|
||||
gap: 2rem;
|
||||
line-height: 1.5;
|
||||
padding: 60px 3%;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
max-width: 80%;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledPreviewSection = styled.section`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
max-width: 85%;
|
||||
margin: 0 auto;
|
||||
padding: 0 3%;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
display: none;
|
||||
max-width: 80%;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledImage = styled.img`
|
||||
max-width: 100%;
|
||||
filter: drop-shadow(0px 0px 12px rgba(255, 255, 255, 0.6));
|
||||
`;
|
||||
|
||||
export const StyledFooter = styled.footer`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
padding: 30px 3%;
|
||||
border-top: 1px solid #b4b4b4;
|
||||
opacity: 0.7;
|
||||
`;
|
||||
|
||||
export const StyledFooterText = styled.p`
|
||||
color: #b4b4b4;
|
||||
`;
|
||||
|
||||
export const StyledIconLinks = styled.div`
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
${StyledNavLink} {
|
||||
color: unset;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledHighlightedText = styled.span`
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dashed;
|
||||
text-decoration-color: #eab308;
|
||||
`;
|
||||
|
||||
export const StyledProducthunt = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 3rem;
|
||||
border-right: 1px solid white;
|
||||
padding-right: 3rem;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid white;
|
||||
padding-bottom: 3rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledPaidSection = styled.section`
|
||||
display: flex;
|
||||
max-width: 85%;
|
||||
margin: 0 auto;
|
||||
gap: 2rem;
|
||||
padding: 60px 3%;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
max-width: 80%;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledAffiliate = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 3rem;
|
||||
`;
|
||||
@ -2,16 +2,15 @@ import React from "react";
|
||||
import type { AppProps } from "next/app";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
import { ThemeProvider } from "styled-components";
|
||||
import * as Sentry from "@sentry/nextjs";
|
||||
import { init } from "@sentry/nextjs";
|
||||
|
||||
import GlobalStyle from "src/constants/globalStyle";
|
||||
import { darkTheme, lightTheme } from "src/constants/theme";
|
||||
import { useConfig, withConfig } from "src/hocs/config";
|
||||
import { GoogleAnalytics } from "src/components/GoogleAnalytics";
|
||||
import Script from "next/script";
|
||||
|
||||
if (process.env.NODE_ENV !== "development") {
|
||||
Sentry.init({
|
||||
init({
|
||||
dsn: "https://d3345591295d4dd1b8c579b62003d939@o1284435.ingest.sentry.io/6495191",
|
||||
tracesSampleRate: 0.5,
|
||||
});
|
||||
|
||||
@ -1,510 +1,8 @@
|
||||
import React from "react";
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
|
||||
import {
|
||||
HiCursorClick,
|
||||
HiLightningBolt,
|
||||
HiOutlineDownload,
|
||||
HiOutlineSearchCircle,
|
||||
} from "react-icons/hi";
|
||||
import { TwitterTweetEmbed } from "react-twitter-embed";
|
||||
import { Button } from "src/components/Button";
|
||||
import { Producthunt } from "src/components/Producthunt";
|
||||
import { CarbonAds } from "src/components/CarbonAds";
|
||||
import styled from "styled-components";
|
||||
import pkg from "../../package.json";
|
||||
import Home from "src/containers/Home";
|
||||
|
||||
const StyledHome = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8em;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
gap: 3em;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledGradientText = styled.span`
|
||||
background: #ffb76b;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#ffb76b 0%,
|
||||
#ffa73d 30%,
|
||||
#ff7c00 60%,
|
||||
#ff7f04 100%
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
`;
|
||||
|
||||
const StyledNavbar = styled.nav`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 16px 16px;
|
||||
gap: 20px;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
a:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledHeroSection = styled.section`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1.5em;
|
||||
min-height: 45vh;
|
||||
padding: 0 3%;
|
||||
`;
|
||||
|
||||
const StyledNavLink = styled.a`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
font-weight: 500;
|
||||
color: ${({ theme }) => theme.ORANGE};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledTitle = styled.h1`
|
||||
font-size: 5rem;
|
||||
font-weight: 900;
|
||||
margin: 0;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
font-size: 3rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledSubTitle = styled.h2`
|
||||
color: #dedede;
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
max-width: 40rem;
|
||||
margin: 0;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledMinorTitle = styled.p`
|
||||
color: #b4b4b4;
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
margin: 0;
|
||||
letter-spacing: 1.2px;
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledButton = styled(Button)`
|
||||
background: ${({ status }) => !status && "#a13cc2"};
|
||||
padding: 12px 24px;
|
||||
|
||||
div {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledFeaturesSection = styled.section`
|
||||
display: flex;
|
||||
max-width: 85%;
|
||||
margin: 0 auto;
|
||||
gap: 2rem;
|
||||
padding: 60px 3%;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
max-width: 80%;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledSectionCard = styled.div`
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
`;
|
||||
|
||||
const StyledCardTitle = styled.div`
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
padding: 1.5rem 0 0.5rem;
|
||||
letter-spacing: 1px;
|
||||
`;
|
||||
|
||||
const StyledCardIcon = styled.div``;
|
||||
|
||||
const StyledCardDescription = styled.p`
|
||||
color: #e0e0e0;
|
||||
text-align: left;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
`;
|
||||
|
||||
const StyledGitHubSection = styled.section`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
max-width: 85%;
|
||||
margin: 0 auto;
|
||||
gap: 4rem;
|
||||
line-height: 1.5;
|
||||
padding: 60px 3%;
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
flex-direction: column-reverse;
|
||||
max-width: 80%;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledSectionArea = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
width: 40%;
|
||||
margin-top: 3rem;
|
||||
|
||||
h2,
|
||||
p {
|
||||
text-align: left;
|
||||
letter-spacing: unset;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
width: 100%;
|
||||
|
||||
h2,
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledSponsorSection = styled.section`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 85%;
|
||||
margin: 0 auto;
|
||||
gap: 2rem;
|
||||
line-height: 1.5;
|
||||
padding: 60px 3%;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
max-width: 80%;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledPreviewSection = styled.section`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
max-width: 85%;
|
||||
margin: 0 auto;
|
||||
padding: 0 3%;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
display: none;
|
||||
max-width: 80%;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledImage = styled.img`
|
||||
max-width: 100%;
|
||||
filter: drop-shadow(0px 0px 12px rgba(255, 255, 255, 0.6));
|
||||
`;
|
||||
|
||||
const StyledFooter = styled.footer`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
padding: 30px 3%;
|
||||
border-top: 1px solid #b4b4b4;
|
||||
opacity: 0.7;
|
||||
`;
|
||||
|
||||
const StyledFooterText = styled.p`
|
||||
color: #b4b4b4;
|
||||
`;
|
||||
|
||||
const StyledIconLinks = styled.div`
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
${StyledNavLink} {
|
||||
color: unset;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledHighlightedText = styled.span`
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dashed;
|
||||
text-decoration-color: #eab308;
|
||||
`;
|
||||
|
||||
const StyledProducthunt = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 3rem;
|
||||
border-right: 1px solid white;
|
||||
padding-right: 3rem;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid white;
|
||||
padding-bottom: 3rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledPaidSection = styled.section`
|
||||
display: flex;
|
||||
max-width: 85%;
|
||||
margin: 0 auto;
|
||||
gap: 2rem;
|
||||
padding: 60px 3%;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
max-width: 80%;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledAffiliate = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 3rem;
|
||||
`;
|
||||
|
||||
const Home: React.FC = () => {
|
||||
const { push } = useRouter();
|
||||
const [isMobile, setIsMobile] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
setIsMobile(window.screen.width <= 768);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<StyledHome>
|
||||
<Head>
|
||||
<title>JSON Visio - Directly onto graphs</title>
|
||||
</Head>
|
||||
<StyledNavbar>
|
||||
<StyledNavLink href="/editor">Editor</StyledNavLink>
|
||||
<Link href="#features" passHref>
|
||||
<StyledNavLink>Features</StyledNavLink>
|
||||
</Link>
|
||||
<Link href="#sponsor" passHref>
|
||||
<StyledNavLink>Sponsor</StyledNavLink>
|
||||
</Link>
|
||||
<StyledNavLink
|
||||
href="https://github.com/AykutSarac/jsonvisio.com"
|
||||
target="_blank"
|
||||
rel="external"
|
||||
>
|
||||
GitHub
|
||||
</StyledNavLink>
|
||||
</StyledNavbar>
|
||||
|
||||
<StyledHeroSection id="main">
|
||||
<StyledTitle>
|
||||
<StyledGradientText>JSON</StyledGradientText> Visio
|
||||
</StyledTitle>
|
||||
<StyledSubTitle>
|
||||
Seamlessly visualize your JSON data{" "}
|
||||
<StyledHighlightedText>instantly</StyledHighlightedText> into graphs.
|
||||
</StyledSubTitle>
|
||||
<StyledMinorTitle>Paste - Import - Fetch!</StyledMinorTitle>
|
||||
<StyledButton
|
||||
onClick={() => window.location.replace("/editor")}
|
||||
disabled={isMobile}
|
||||
>
|
||||
{isMobile ? "Incompatible Device" : "GO TO EDITOR"}
|
||||
</StyledButton>
|
||||
</StyledHeroSection>
|
||||
|
||||
<StyledPreviewSection>
|
||||
<StyledImage
|
||||
width="1200"
|
||||
height="auto"
|
||||
src="/jsonvisio-screenshot.png"
|
||||
alt="preview"
|
||||
/>
|
||||
</StyledPreviewSection>
|
||||
|
||||
<StyledFeaturesSection id="features">
|
||||
<StyledSectionCard>
|
||||
<StyledCardIcon>
|
||||
<HiCursorClick size={50} color="#3BA55D" />
|
||||
</StyledCardIcon>
|
||||
<StyledCardTitle>EASY-TO-USE</StyledCardTitle>
|
||||
<StyledCardDescription>
|
||||
Don't even bother to update your schema to view your JSON into
|
||||
graphs; directly paste, import or fetch! JSON Visio helps you to
|
||||
visualize without any additional values and save your time.
|
||||
</StyledCardDescription>
|
||||
</StyledSectionCard>
|
||||
|
||||
<StyledSectionCard>
|
||||
<StyledCardIcon>
|
||||
<HiOutlineSearchCircle size={50} color="#5865F2" />
|
||||
</StyledCardIcon>
|
||||
<StyledCardTitle>SEARCH</StyledCardTitle>
|
||||
<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!
|
||||
</StyledCardDescription>
|
||||
</StyledSectionCard>
|
||||
|
||||
<StyledSectionCard>
|
||||
<StyledCardIcon>
|
||||
<HiOutlineDownload size={50} color="#DA2877" />
|
||||
</StyledCardIcon>
|
||||
<StyledCardTitle>DOWNLOAD</StyledCardTitle>
|
||||
<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 Visio graph onto their
|
||||
wall, eh?
|
||||
</StyledCardDescription>
|
||||
</StyledSectionCard>
|
||||
|
||||
<StyledSectionCard>
|
||||
<StyledCardIcon>
|
||||
<HiLightningBolt size={50} color="#F5E027" />
|
||||
</StyledCardIcon>
|
||||
<StyledCardTitle>LIVE</StyledCardTitle>
|
||||
<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.
|
||||
</StyledCardDescription>
|
||||
</StyledSectionCard>
|
||||
</StyledFeaturesSection>
|
||||
|
||||
<StyledGitHubSection id="github">
|
||||
<TwitterTweetEmbed
|
||||
tweetId="1519363257794015233"
|
||||
options={{
|
||||
width: "600",
|
||||
align: "center",
|
||||
}}
|
||||
/>
|
||||
<StyledSectionArea>
|
||||
<StyledSubTitle>Open Source Community</StyledSubTitle>
|
||||
<StyledMinorTitle>
|
||||
Join the Open Source Community by suggesting new ideas, support by
|
||||
contributing; implementing new features, fixing bugs and doing
|
||||
changes minor to major!
|
||||
</StyledMinorTitle>
|
||||
<StyledButton
|
||||
onClick={() => push("https://github.com/AykutSarac/jsonvisio.com")}
|
||||
status="SECONDARY"
|
||||
>
|
||||
STAR ON GITHUB
|
||||
</StyledButton>
|
||||
</StyledSectionArea>
|
||||
</StyledGitHubSection>
|
||||
|
||||
<StyledPaidSection>
|
||||
<StyledProducthunt>
|
||||
<StyledSubTitle>
|
||||
Support JSON Visio at
|
||||
<br />
|
||||
<StyledHighlightedText>Product Hunt</StyledHighlightedText>
|
||||
</StyledSubTitle>
|
||||
<Producthunt />
|
||||
</StyledProducthunt>
|
||||
<StyledAffiliate>
|
||||
<StyledSubTitle>Affiliate</StyledSubTitle>
|
||||
<CarbonAds />
|
||||
</StyledAffiliate>
|
||||
</StyledPaidSection>
|
||||
|
||||
<StyledSponsorSection id="sponsor">
|
||||
<StyledSubTitle>Sponsors</StyledSubTitle>
|
||||
<StyledMinorTitle>
|
||||
Your supports make JSON Visio possible to continue and accessible for
|
||||
everyone!
|
||||
</StyledMinorTitle>
|
||||
<StyledButton
|
||||
status="SUCCESS"
|
||||
onClick={() => push("https://www.patreon.com/aykutsarac")}
|
||||
>
|
||||
Become A Sponsor!
|
||||
</StyledButton>
|
||||
</StyledSponsorSection>
|
||||
|
||||
<StyledFooter>
|
||||
<StyledFooterText>© 2022 JSON Visio - {pkg.version}</StyledFooterText>
|
||||
<StyledIconLinks>
|
||||
<StyledNavLink
|
||||
href="https://github.com/AykutSarac/jsonvisio.com"
|
||||
target="_blank"
|
||||
aria-label="github"
|
||||
>
|
||||
<FaGithub size={26} />
|
||||
</StyledNavLink>
|
||||
|
||||
<StyledNavLink
|
||||
href="https://www.linkedin.com/in/aykutsarac/"
|
||||
target="_blank"
|
||||
aria-label="linkedin"
|
||||
>
|
||||
<FaLinkedin size={26} />
|
||||
</StyledNavLink>
|
||||
|
||||
<StyledNavLink
|
||||
href="https://twitter.com/aykutsarach"
|
||||
target="_blank"
|
||||
aria-label="twitter"
|
||||
>
|
||||
<FaTwitter size={26} />
|
||||
</StyledNavLink>
|
||||
</StyledIconLinks>
|
||||
</StyledFooter>
|
||||
</StyledHome>
|
||||
);
|
||||
const LandingPage: React.FC = () => {
|
||||
return <Home />;
|
||||
};
|
||||
|
||||
export default Home;
|
||||
export default LandingPage;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user