diff --git a/package.json b/package.json
index 6b54d85bf39..706ed79de28 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
"react-hot-toast": "^2.2.0",
"react-icons": "^4.3.1",
"react-render-if-visible": "^2.1.0",
+ "react-twitter-embed": "^4.0.4",
"react-zoom-pan-pinch": "^2.1.3",
"reaflow": "^5.0.4",
"save-html-as-image": "^1.7.1",
diff --git a/public/jsonvisio-screenshot.png b/public/jsonvisio-screenshot.png
new file mode 100644
index 00000000000..1670c9f985e
Binary files /dev/null and b/public/jsonvisio-screenshot.png differ
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 8a79472892f..bcd04715c69 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -24,6 +24,7 @@ const StyledButton = styled.button<{ status: keyof typeof ButtonType }>`
color: #ffffff;
padding: 8px 16px;
min-width: 60px;
+ width: fit-content;
:disabled {
cursor: not-allowed;
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
deleted file mode 100644
index c182da8b973..00000000000
--- a/src/components/Footer/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import styled from "styled-components";
-import { AiFillGithub, AiOutlineTwitter } from "react-icons/ai";
-
-import pkg from "../../../package.json";
-
-const StyledFooter = styled.footer`
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- width: 100%;
- color: ${({ theme }) => theme.SILVER};
-`;
-
-const StyledVersion = styled.pre`
- margin-top: 0;
-`;
-
-const StyledSocial = styled.div`
- display: flex;
- gap: 14px;
- font-size: 26px;
-`;
-
-export const Footer: React.FC = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
- {pkg.version}
-
- );
-};
diff --git a/src/components/Producthunt/index.tsx b/src/components/Producthunt/index.tsx
index 8463d8c6e6e..6b9239b1894 100644
--- a/src/components/Producthunt/index.tsx
+++ b/src/components/Producthunt/index.tsx
@@ -1,19 +1,9 @@
import React from "react";
import styled from "styled-components";
-const StyledProducthunt = styled.a`
- position: fixed;
- bottom: 12px;
- right: 12px;
-
- @media only screen and (max-width: 768px) {
- display: none;
- }
-`;
-
const StyledImage = styled.img`
- width: 250px;
- height: 54px;
+ object-fit: contain;
+ max-width: 300px;
@media only screen and (max-width: 768px) {
width: 200px;
@@ -23,15 +13,17 @@ const StyledImage = styled.img`
export const Producthunt = () => {
return (
-
-
+
);
};
diff --git a/src/constants/globalStyle.ts b/src/constants/globalStyle.ts
index 3e38c296a1c..8dc65a6e2b4 100644
--- a/src/constants/globalStyle.ts
+++ b/src/constants/globalStyle.ts
@@ -6,10 +6,15 @@ const GlobalStyle = createGlobalStyle`
padding: 0;
box-sizing: border-box;
color: ${({ theme }) => theme.FULL_WHITE};
- background: ${({ theme }) => theme.BLACK_PRIMARY};
font-family: 'Catamaran', sans-serif;
font-weight: 400;
font-size: 16px;
+ scroll-behavior: smooth;
+
+ background-color: #000000;
+ opacity: 1;
+ background-image: radial-gradient(#414141 0.5px, #000000 0.5px);
+ background-size: 10px 10px;
}
a {
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 2f41940220d..38acd721c6c 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -52,7 +52,7 @@ class MyDocument extends Document {
crossOrigin="anonymous"
/>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 091cf6109b6..0216aeb2534 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,138 +1,506 @@
-import React from "react";
-import { Button } from "src/components/Button";
-import { Container } from "src/components/Container";
-import { Navbar } from "src/components/Navbar";
-import { Image } from "src/components/Image";
-import { AiFillGithub } from "react-icons/ai";
-import { Footer } from "src/components/Footer";
-import Head from "next/head";
-import { Producthunt } from "src/components/Producthunt";
-import { useRouter } from "next/router";
-import styled from "styled-components";
-
-const StyledHome = styled.div`
- padding: 24px;
-
- ::-webkit-scrollbar {
- width: 8px;
- background: #23272a !important;
- }
-
- ::-webkit-scrollbar-thumb {
- border-radius: 5px;
- background-color: #4d4d4d !important;
- }
-`;
-
-const StyledContent = styled.div`
- font-size: 20px;
- font-weight: 500;
- color: ${({ theme }) => theme.SILVER};
- width: 50%;
-
- @media only screen and (max-width: 768px) {
- width: 100%;
- text-align: center;
-
- button {
- margin-left: auto;
- margin-right: auto;
- }
- }
-`;
-
-const StyledHeader = styled.h2`
- font-size: 3rem;
- color: ${({ theme }) => theme.FULL_WHITE};
-
- @media only screen and (max-width: 768px) {
- font-size: 2.2rem;
- }
-`;
-
-const StyledSubContent = styled.div`
- margin-bottom: 20px;
-`;
-
-const StyledText = styled.span<{ white?: boolean }>`
- color: ${({ theme, white }) => (white ? theme.FULL_WHITE : theme.ORANGE)};
-`;
-
-const Home: React.FC = () => {
- const { push } = useRouter();
-
- return (
-
-
- JSON Visio - Directly onto graphs
-
-
-
-
-
- Visualize your JSON into interactive graphs.
-
-
- Simple visualization tool for your JSON data. No forced structure,
- paste your JSON and view it instantly.
-
-
-
-
-
-
-
-
- No Rules
-
- Be free, you don't have to restructure your json to transform
- it onto graphs. We've done it at our side, so you can just
- paste your JSON.
-
-
-
-
-
-
-
-
- Import File
-
- Have an existing file for your data? No worries, directly import it
- into our editor without having to scroll through all of it!
-
-
-
-
-
-
-
-
- Supported by Open Source
-
- We do our work at open source. Help us improve by contributing to
- JSON
- Visio at GitHub!
-
-
-
-
-
-
-
-
- );
-};
-
-export default Home;
+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 styled from "styled-components";
+import pkg from "../../package.json";
+
+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.5rem;
+ }
+`;
+
+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;
+ }
+
+ @media only screen and (max-width: 768px) {
+ &:first-of-type {
+ pointer-events: none;
+
+ div {
+ content: "Incompatible Device";
+ }
+ }
+ }
+`;
+
+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: 0.875rem 0;
+ 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 StyledProducthuntSection = styled.section`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 3rem;
+
+ max-width: 85%;
+ margin: 0 auto;
+ padding: 60px 3%;
+
+ ${StyledSectionArea} {
+ margin: 0;
+ width: 100%;
+
+ h2 {
+ text-align: right;
+ }
+ }
+
+ @media only screen and (max-width: 768px) {
+ flex-direction: column;
+ max-width: 80%;
+
+ ${StyledSectionArea} {
+ h2 {
+ text-align: center;
+ }
+ }
+ }
+`;
+
+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!
+ push("/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
+
+
+
+
+
+
+ © 2022 JSON Visio - {pkg.version}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Home;
diff --git a/yarn.lock b/yarn.lock
index a03c03afa2e..684c9399509 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5644,6 +5644,13 @@ react-scrolllock@^5.0.1:
dependencies:
exenv "^1.2.2"
+react-twitter-embed@^4.0.4:
+ version "4.0.4"
+ resolved "https://registry.yarnpkg.com/react-twitter-embed/-/react-twitter-embed-4.0.4.tgz#4a6b8354acc266876ff1110b9f648518ea20db6d"
+ integrity sha512-2JIL7qF+U62zRzpsh6SZDXNI3hRNVYf5vOZ1WRcMvwKouw+xC00PuFaD0aEp2wlyGaZ+f4x2VvX+uDadFQ3HVA==
+ dependencies:
+ scriptjs "^2.5.9"
+
react-use-gesture@^8.0.1:
version "8.0.1"
resolved "https://registry.yarnpkg.com/react-use-gesture/-/react-use-gesture-8.0.1.tgz#4360c0f7c9e26baf9fbe58f63fc9de7ef699c17f"
@@ -5945,6 +5952,11 @@ schema-utils@^3.1.1:
ajv "^6.12.5"
ajv-keywords "^3.5.2"
+scriptjs@^2.5.9:
+ version "2.5.9"
+ resolved "https://registry.yarnpkg.com/scriptjs/-/scriptjs-2.5.9.tgz#343915cd2ec2ed9bfdde2b9875cd28f59394b35f"
+ integrity sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg==
+
semver@7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"