|
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; |
|
|