diff --git a/next.config.js b/next.config.js
index 3e78ee7..1f54ad3 100644
--- a/next.config.js
+++ b/next.config.js
@@ -7,7 +7,7 @@ const nextConfig = {
reactStrictMode: true,
exportPathMap: () => ({
"/": { page: "/" },
- "/editor": { page: "/editor" },
+ "/editor": { page: "/Editor" },
}),
compiler: {
styledComponents: true,
diff --git a/src/containers/Home/index.tsx b/src/containers/Home/index.tsx
new file mode 100644
index 0000000..4531ad1
--- /dev/null
+++ b/src/containers/Home/index.tsx
@@ -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 (
+
+
+ JSON Visio - Directly onto graphs
+
+
+ Editor
+
+ Features
+
+
+ Sponsor
+
+
+ GitHub
+
+
+
+
+
+ JSON Visio
+
+
+ Seamlessly visualize your JSON data
+ instantly
+ into graphs.
+
+
+ Paste - Import - Fetch!
+
+ window.location.replace("/editor")}
+ disabled={isMobile}
+ >
+ {isMobile ? "Incompatible Device" : "GO TO EDITOR"}
+
+
+
+
+
+
+
+
+
+
+
+
+ EASY-TO-USE
+
+ 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.
+
+
+
+
+
+
+
+ SEARCH
+
+ 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!
+
+
+
+
+
+
+
+ DOWNLOAD
+
+ 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?
+
+
+
+
+
+
+
+ LIVE
+
+ 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.
+
+
+
+
+
+
+
+ Open Source Community
+
+ Join the Open Source Community by suggesting new ideas, support by
+ contributing; implementing new features, fixing bugs and doing
+ changes minor to major!
+
+ push("https://github.com/AykutSarac/jsonvisio.com")}
+ status="SECONDARY"
+ >
+ STAR ON GITHUB
+
+
+
+
+
+
+
+ Support JSON Visio at
+
+
+ Product Hunt
+
+
+
+
+
+ Affiliate
+
+
+
+
+
+
+
+
+ © 2022 JSON Visio - {pkg.version}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Home;
diff --git a/src/containers/Home/styles.tsx b/src/containers/Home/styles.tsx
new file mode 100644
index 0000000..1a394fc
--- /dev/null
+++ b/src/containers/Home/styles.tsx
@@ -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;
+`;
diff --git a/src/pages/editor.tsx b/src/pages/Editor/index.tsx
similarity index 100%
rename from src/pages/editor.tsx
rename to src/pages/Editor/index.tsx
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 6c81c43..f89fc88 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -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,
});
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2efa276..bfdfb7d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -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 (
-
-
- JSON Visio - Directly onto graphs
-
-
- Editor
-
- Features
-
-
- Sponsor
-
-
- GitHub
-
-
-
-
-
- JSON Visio
-
-
- Seamlessly visualize your JSON data{" "}
- instantly into graphs.
-
- Paste - Import - Fetch!
- window.location.replace("/editor")}
- disabled={isMobile}
- >
- {isMobile ? "Incompatible Device" : "GO TO EDITOR"}
-
-
-
-
-
-
-
-
-
-
-
-
- EASY-TO-USE
-
- 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.
-
-
-
-
-
-
-
- SEARCH
-
- 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!
-
-
-
-
-
-
-
- DOWNLOAD
-
- 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?
-
-
-
-
-
-
-
- LIVE
-
- 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.
-
-
-
-
-
-
-
- Open Source Community
-
- Join the Open Source Community by suggesting new ideas, support by
- contributing; implementing new features, fixing bugs and doing
- changes minor to major!
-
- push("https://github.com/AykutSarac/jsonvisio.com")}
- status="SECONDARY"
- >
- STAR ON GITHUB
-
-
-
-
-
-
-
- Support JSON Visio at
-
- Product Hunt
-
-
-
-
- Affiliate
-
-
-
-
-
-
-
- © 2022 JSON Visio - {pkg.version}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
+const LandingPage: React.FC = () => {
+ return ;
};
-export default Home;
+export default LandingPage;