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 styled from "styled-components"; import { AiFillGithub } from "react-icons/ai"; import { Footer } from "src/components/Footer"; import Link from "next/link"; import Head from "next/head"; const StyledHome = styled.div` padding: 24px; `; 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: 54px; color: ${({ theme }) => theme.FULL_WHITE}; @media only screen and (max-width: 768px) { font-size: 36px; } `; 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 = () => { return ( JSON Visio Visualize your JSON into interactive graphs. Simple visualization tool for your JSON data. No forced structure, paste your JSON data and view it instantly. graphs No Rules Be free, you don't have to restructure your json to transform it into graphs. We've done it at our side, so you can just paste your JSON. preview 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! preview Supported by Open Source We do our work at open source. Help us improve by contributing to JSON Visio at GitHub! preview