responsive pages

src/components/Container/index.tsx

@@ -11,9 +11,13 @@ const StyledContainer = styled.div<{ reverse: boolean }>`
   gap: 50px;
   align-items: center;
   width: 75%;
-  margin: 40px auto;
+  margin: 120px auto;
   flex-direction: ${({ reverse }) => reverse && 'row-reverse'};
   line-height: 1.2;
+
+  @media only screen and (max-width: 768px) {
+    flex-direction: column;
+  }
 `;
 
 export const Container: React.FC<ContainerProps> = ({ children, reverse = false }) => {

src/components/Navbar/index.tsx

@@ -11,6 +11,10 @@ const StyledNavbar = styled.div`
   justify-content: space-between;
   width: 75%;
   margin: 0 auto 80px;
+
+  @media only screen and (max-width: 768px) {
+    width: 100%;
+  }
 `;
 
 const StyledLogo = styled.div`

src/pages/editor/index.tsx

@@ -1,4 +1,6 @@
+import { useRouter } from "next/router";
 import React from "react";
+import { Button } from "src/components/Button";
 import { Sidebar } from "src/components/Sidebar";
 import styled from "styled-components";
 import { JsonEditor } from "./JsonEditor";
@@ -8,8 +10,42 @@ const StyledPageWrapper = styled.div`
   display: flex;
 `;
 
+const StyledIncompatible = styled.div`
+  display: none;
+
+  @media only screen and (max-width: 768px) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    background: ${({ theme }) => theme.BLACK_LIGHT};
+    content: "This app is not compatible with your device!";
+    color: ${({ theme }) => theme.SILVER};
+    width: 100%;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+
+    button {
+      margin-top: 60px;
+    }
+
+    &::before {
+      content: 'Uh, oh!';
+      font-weight: 700;
+      font-size: 60px;
+      opacity: 0.6;
+    }
+  }
+`;
+
 const StyledEditorWrapper = styled.div`
   width: 100%;
+
+  @media only screen and (max-width: 768px) {
+    display: none;
+  }
 `;
 
 const StyledTools = styled.div`
@@ -28,8 +64,9 @@ const StyledEditor = styled.div`
   height: calc(100vh - 46px);
 `;
 
-
 const Editor: React.FC = () => {
+  const route = useRouter();
+
   return (
     <StyledPageWrapper>
       <Sidebar />
@@ -40,6 +77,12 @@ const Editor: React.FC = () => {
           <LiveEditor />
         </StyledEditor>
       </StyledEditorWrapper>
+      <StyledIncompatible>
+        This app is not compatible with your device!
+        <Button className="incompatible" onClick={() => route.push("/")}>
+          Go Back
+        </Button>
+      </StyledIncompatible>
     </StyledPageWrapper>
   );
 };

src/pages/index.tsx

@@ -5,6 +5,7 @@ import { Button } from "src/components/Button";
 import { Container } from "src/components/Container";
 import { Navbar } from "src/components/Navbar";
 import styled from "styled-components";
+import { AiFillGithub } from "react-icons/ai";
 
 const StyledHome = styled.div`
   padding: 24px;
@@ -15,9 +16,19 @@ const StyledContent = styled.div`
   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.h1`
+const StyledHeader = styled.h2`
   font-size: 54px;
   color: ${({ theme }) => theme.FULL_WHITE};
 `;
@@ -26,6 +37,10 @@ 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 route = useRouter();
 
@@ -34,24 +49,67 @@ const Home: React.FC = () => {
       <Navbar />
       <Container>
         <StyledContent>
-          <StyledHeader>
+          <StyledHeader as="h1">
             Visualize your JSON into interactive graphs.
           </StyledHeader>
           <StyledSubContent>
             Simple visualization tool for your JSON data. No forced structure,
-            simply paste your JSON data and view it instantly.
+            paste your JSON data and view it instantly.
           </StyledSubContent>
-          <Button onClick={() => route.push("/editor")}>
+          <Button onClick={() => route.push("/editor")} status="SECONDARY">
             Start Generating
           </Button>
         </StyledContent>
-        <Image
-          src="/graphs.svg"
-          width={500}
-          height={400}
-          layout="fixed"
-          alt="graphs"
-        />
+        <Image src="/graphs.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 into graphs. We&apos;ve done it at our side, so you can just
+            paste your JSON.
+          </StyledSubContent>
+          <Button onClick={() => route.push("/editor")} status="SUCCESS">
+            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 onClick={() => route.push("/editor")} status="SUCCESS">
+            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={() =>
+              route.push("https://github.com/AykutSarac/jsonvisio.com")
+            }
+          >
+            <AiFillGithub size={20} />
+            Check GitHub
+          </Button>
+        </StyledContent>
+        <Image src="/graphs5.svg" width={500} height={400} alt="preview" />
       </Container>
     </StyledHome>
   );