File size: 3,826 Bytes
f909d7c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
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;
|