| import React from "react"; | |
| import Head from "next/head"; | |
| import Link from "next/link"; | |
| import { Button, Group, Stack, Text } from "@mantine/core"; | |
| import styled from "styled-components"; | |
| import { FaChevronRight } from "react-icons/fa"; | |
| import { Typewriter } from "react-simple-typewriter"; | |
| import Layout from "src/layout/Layout"; | |
| const StyledHeroSection = styled.div` | |
| position: relative; | |
| background-size: 100% 100%; | |
| margin-bottom: -48px; | |
| background-image: radial-gradient(49% 81% at 45% 47%, #21415f 1%, #60006a00 100%), | |
| radial-gradient(113% 91% at 17% -2%, #1b1b1b 1%, #ff000000 99%), | |
| radial-gradient(142% 91% at 83% 7%, #1b1b1b 1%, #ff000000 99%), | |
| radial-gradient(142% 91% at -6% 74%, #1b1b1b 1%, #ff000000 99%), | |
| radial-gradient(142% 91% at 111% 84%, #1b1b1b 0%, #5b004eff 99%); | |
| @media only screen and (max-width: 1240px) { | |
| flex-direction: column; | |
| } | |
| `; | |
| const StyledHeroSectionBody = styled.div` | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 5em 10%; | |
| overflow: hidden; | |
| backdrop-filter: blur(1px); | |
| -webkit-backdrop-filter: blur(1px); | |
| height: calc(100vh - 111px); | |
| text-align: center; | |
| @media only screen and (max-width: 1200px) { | |
| flex-direction: column; | |
| } | |
| `; | |
| const StyledHighlightedText = styled(Text)` | |
| font-size: 40px; | |
| font-weight: 800; | |
| display: inline; | |
| background-color: gray; | |
| background-image: linear-gradient(45deg, gray, slategray); | |
| background-size: 100%; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -moz-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| -moz-text-fill-color: transparent; | |
| @media only screen and (max-width: 992px) { | |
| font-size: 24px; | |
| } | |
| `; | |
| const StyledHeroText = styled.p` | |
| font-size: 18px; | |
| color: #a9aaaa; | |
| font-weight: 600; | |
| max-width: 600px; | |
| text-align: center; | |
| @media only screen and (max-width: 992px) { | |
| max-width: 100%; | |
| font-size: 14px; | |
| } | |
| `; | |
| const StyledHeroTitle = styled.h1` | |
| color: #dacfcf; | |
| font-size: 40px; | |
| font-weight: 800; | |
| text-align: center; | |
| @media only screen and (max-width: 992px) { | |
| font-size: 26px; | |
| } | |
| `; | |
| const HeroSection = () => ( | |
| <StyledHeroSection id="hero-section"> | |
| <StyledHeroSectionBody> | |
| <Stack w="100%" mx="auto" align="center"> | |
| <StyledHeroTitle> | |
| Understand your{" "} | |
| <StyledHighlightedText> | |
| <Typewriter | |
| words={["JSON", "YAML", "XML", "TOML", "CSV"]} | |
| typeSpeed={100} | |
| deleteSpeed={60} | |
| delaySpeed={2000} | |
| loop | |
| /> | |
| </StyledHighlightedText> | |
| <br /> | |
| better by visualizing | |
| </StyledHeroTitle> | |
| <StyledHeroText> | |
| Visualize, analyze, and manipulate data with ease, a versatile and powerful tool for data | |
| representation and exploration. | |
| </StyledHeroText> | |
| <Group gap="xl"> | |
| <Button | |
| color="gray.2" | |
| c="indigo" | |
| component={Link} | |
| href="/editor" | |
| fw="bold" | |
| rightSection={<FaChevronRight />} | |
| size="xl" | |
| visibleFrom="md" | |
| > | |
| GO TO EDITOR | |
| </Button> | |
| <Button | |
| color="gray.2" | |
| c="indigo" | |
| component={Link} | |
| href="/editor" | |
| fw="bold" | |
| rightSection={<FaChevronRight />} | |
| size="md" | |
| hiddenFrom="md" | |
| > | |
| GO TO EDITOR | |
| </Button> | |
| </Group> | |
| </Stack> | |
| </StyledHeroSectionBody> | |
| </StyledHeroSection> | |
| ); | |
| export const HomePage = () => { | |
| return ( | |
| <Layout> | |
| <Head> | |
| <title>JSON Crack | Visualize Instantly Into Graphs</title> | |
| </Head> | |
| <HeroSection /> | |
| </Layout> | |
| ); | |
| }; | |
| export default HomePage; | |