Merge pull request #55 from AykutSarac/new-homepage

New Landing Page

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",

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;

src/components/Footer/index.tsx

@@ -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 (
-    <StyledFooter>
-      <StyledSocial>
-        <Link href="https://github.com/AykutSarac/jsonvisio.com">
-          <a aria-label="GitHub" rel="me" target="_blank">
-            <AiFillGithub />
-          </a>
-        </Link>
-        <Link href="https://twitter.com/aykutsarach">
-          <a aria-label="Twitter" rel="me" target="_blank">
-            <AiOutlineTwitter />
-          </a>
-        </Link>
-      </StyledSocial>
-      <StyledVersion>{pkg.version}</StyledVersion>
-    </StyledFooter>
-  );
-};

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;
+  object-fit: contain;
-  height: 54px;
+  max-width: 300px;
 
   @media only screen and (max-width: 768px) {
     width: 200px;
@@ -23,15 +13,17 @@ const StyledImage = styled.img`
 
 export const Producthunt = () => {
   return (
-    <StyledProducthunt
+    <a
       href="https://www.producthunt.com/posts/json-visio?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-json-visio"
       target="_blank"
-      rel="me"
+      rel="noreferrer"
     >
       <StyledImage
-        src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=332281&theme=light"
+        width="500"
+        height="200"
+        src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=332281&theme=neutral"
         alt="JSON Visio - Simple visualization tool for your JSON data. | Product Hunt"
       />
-    </StyledProducthunt>
+    </a>
   );
 };

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 {

src/pages/_document.tsx

@@ -52,7 +52,7 @@ class MyDocument extends Document {
             crossOrigin="anonymous"
           />
           <link
-            href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&family=Roboto+Mono:wght@500&family=Catamaran:wght@400;500;600&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;900&family=Roboto+Mono:wght@500&family=Catamaran:wght@400;500;600&display=swap"
             rel="stylesheet"
           />
         </Head>

src/pages/index.tsx

@@ -1,136 +1,504 @@
 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 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`
-  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 8em;
+  font-family: "Roboto", sans-serif;
 
-  ::-webkit-scrollbar {
+  * {
-    width: 8px;
+    box-sizing: border-box;
-    background: #23272a !important;
   }
 
-  ::-webkit-scrollbar-thumb {
+  @media only screen and (max-width: 768px) {
-    border-radius: 5px;
+    gap: 3em;
-    background-color: #4d4d4d !important;
   }
 `;
 
-const StyledContent = styled.div`
+const StyledGradientText = styled.span`
-  font-size: 20px;
+  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.SILVER};
+    color: ${({ theme }) => theme.ORANGE};
-  width: 50%;
+  }
+`;
+
+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 {
-      margin-left: auto;
+      align-self: center;
-      margin-right: auto;
     }
   }
 `;
 
-const StyledHeader = styled.h2`
+const StyledSponsorSection = styled.section`
-  font-size: 3rem;
+  display: flex;
-  color: ${({ theme }) => theme.FULL_WHITE};
+  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) {
-    font-size: 2.2rem;
+    max-width: 80%;
   }
 `;
 
-const StyledSubContent = styled.div`
+const StyledPreviewSection = styled.section`
-  margin-bottom: 20px;
+  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 StyledText = styled.span<{ white?: boolean }>`
+const StyledImage = styled.img`
-  color: ${({ theme, white }) => (white ? theme.FULL_WHITE : theme.ORANGE)};
+  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 (
     <StyledHome>
       <Head>
         <title>JSON Visio - Directly onto graphs</title>
       </Head>
-      <Navbar />
+      <StyledNavbar>
-      <Container>
+        <Link href="/editor" passHref>
-        <StyledContent>
+          <StyledNavLink>Editor</StyledNavLink>
-          <StyledHeader as="h1">
+        </Link>
-            Visualize your JSON into interactive graphs.
+        <Link href="#features" passHref>
-          </StyledHeader>
+          <StyledNavLink>Features</StyledNavLink>
-          <StyledSubContent>
+        </Link>
-            Simple visualization tool for your JSON data. No forced structure,
+        <Link href="#sponsor" passHref>
-            paste your JSON and view it instantly.
+          <StyledNavLink>Sponsor</StyledNavLink>
-          </StyledSubContent>
+        </Link>
-          <Button status="SECONDARY" onClick={() => push("/editor")}>
+        <StyledNavLink
-            Start Generating
+          href="https://github.com/AykutSarac/jsonvisio.com"
-          </Button>
+          target="_blank"
-        </StyledContent>
+          rel="external"
-        <Image src="421.svg" width={500} height={400} alt="graphs" />
-      </Container>
-
-      <Container reverse>
-        <StyledContent>
-          <StyledHeader>No Rules</StyledHeader>
-          <StyledSubContent>
-            Be free, you don&apos;t have to restructure your json to transform
-            it onto graphs. We&apos;ve done it at our side, so you can just
-            paste your JSON.
-          </StyledSubContent>
-          <Button status="SUCCESS" onClick={() => push("/editor")}>
-            Paste It!
-          </Button>
-        </StyledContent>
-        <Image src="graphs3.svg" width={500} height={400} alt="preview" />
-      </Container>
-
-      <Container>
-        <StyledContent>
-          <StyledHeader>Import File</StyledHeader>
-          <StyledSubContent>
-            Have an existing file for your data? No worries, directly import it
-            into our editor without having to scroll through all of it!
-          </StyledSubContent>
-          <Button status="SUCCESS" onClick={() => push("/editor")}>
-            Import JSON
-          </Button>
-        </StyledContent>
-        <Image src="graphs4.svg" width={500} height={400} alt="preview" />
-      </Container>
-
-      <Container reverse>
-        <StyledContent>
-          <StyledHeader>Supported by Open Source</StyledHeader>
-          <StyledSubContent>
-            We do our work at open source. Help us improve by contributing to
-            <StyledText> JSON</StyledText>
-            <StyledText white> Visio</StyledText> at GitHub!
-          </StyledSubContent>
-          <Button
-            onClick={() => push("https://github.com/AykutSarac/jsonvisio.com")}
         >
-            <AiFillGithub size={20} />
+          GitHub
-            Check GitHub
+        </StyledNavLink>
-          </Button>
+      </StyledNavbar>
-        </StyledContent>
+
-        <Image src="graphs5.svg" width={500} height={400} alt="preview" />
+      <StyledHeroSection id="main">
-      </Container>
+        <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={() => push("/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&apos;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&apos;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&apos;s Monaco Editor which is also used by VS Code, easily
+            edit your JSON and directly view through the graphs. Also there&apos;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>
+
+      <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>
+
+      <StyledProducthuntSection>
+        <StyledSectionArea>
+          <StyledSubTitle>
+            Support JSON Visio at
+            <br />
+            <StyledHighlightedText>Product Hunt</StyledHighlightedText>
+          </StyledSubTitle>
+        </StyledSectionArea>
         <Producthunt />
-      <Footer />
+      </StyledProducthuntSection>
+
+      <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>
   );
 };

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"