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 = () => (
Understand your{" "}
better by visualizing
Visualize, analyze, and manipulate data with ease, a versatile and powerful tool for data
representation and exploration.
}
size="xl"
visibleFrom="md"
>
GO TO EDITOR
}
size="md"
hiddenFrom="md"
>
GO TO EDITOR
);
export const HomePage = () => {
return (
JSON Crack | Visualize Instantly Into Graphs
);
};
export default HomePage;