text: import React from "react";
  import theme from "theme";
  import { Theme, Link, Image, Button, Section, Text } from "@quarkly/widgets";
  import { Helmet } from "react-helmet";
  import { GlobalQuarklyPageStyles } from "global-page-styles";
  import { Override, StackItem, Stack } from "@quarkly/components";
  import * as Components from "components";
  import { MdMenu } from "react-icons/md";
  export default (() => {
  	return <Theme theme={theme}>
  		<GlobalQuarklyPageStyles pageUrl={"404"} />
  		<Helmet>
  			<title>
  				Quarkly export
  			</title>
  			<meta name={"description"} content={"Web site created using quarkly.io"} />
  			<link rel={"shortcut icon"} href={"https://uploads.quarkly.io/readme/cra/favicon-32x32.ico"} type={"image/x-icon"} />
  		</Helmet>
  		<Section margin="0 0 0 0" padding="16px 0px 16px 0px" box-sizing="border-box" quarkly-title="Header">
  			<Stack>
  				{"    "}
  				<StackItem display="flex" quarkly-title="Logo" md-width="75%" width="25%">
  					<Override slot="StackItemContent" align-items="center" />
  					{"        "}
  					<Link href="/" position="relative" transition="opacity 200ms ease" quarkly-title="Link">
  						<Image src="https://uploads.quarkly.io/5f44d0da669357001e60ed14/images/default-website-logo.svg?v=2020-11-06T17:26:21.226Z" width="120px" z-index="3" />
  					</Link>
  				</StackItem>
  				<StackItem width="50%" display="block" quarkly-title="Menu" md-width="25%">
  					<Override slot="StackItemContent" align-items="center" justify-content="center" md-justify-content="flex-end" />
  					{"        "}
  					<Components.BurgerMenu>
  						<Override
  							slot="menu"
  							lg-transform="translateY(0px) translateX(0px)"
  							lg-transition="transform 400ms ease 0s"
  							md-position="fixed"
  							display="flex"
  							md-left={0}
  							md-top={0}
  							md-width="100%"
  							md-height="100%"
  							padding="0px 0 0px 0"
  						>
  							<Override
  								slot="item"
  								text-transform="uppercase"
  								text-align="center"
  								padding="8px 20px 8px 20px"
  								md-padding="16px 40px 16px 40px"
  							/>
  							<Override slot="item-404" lg-display="none" display="none" />
  							<Override slot="item-index" lg-display="none" display="none" />
  							<Override
  								slot="link"
  								md-color="--dark"
  								md-opacity=".5"
  								md-transition="opacity .15s ease 0s"
  								md-hover-opacity="1"
  								md-active-opacity="1"
  								md-font="16px/24px sans-serif"
  								font="--base"
  								text-decoration-line="initial"
  								color="--dark"
  								opacity=".5"
  								transition="opacity .15s ease 0s"
  								hover-opacity="1"
  								letter-spacing="0.5px"
  								text-transform="initial"
  							/>
  							<Override
  								slot="link-active"
  								md-opacity="1"
  								md-cursor="default"
  								opacity="1"
  								color="--primary"
  								cursor="default"
  							/>
  						</Override>
  						<Override slot="icon,icon-close" category="md" icon={MdMenu} />
  						<Override slot="icon" category="md" icon={MdMenu} size="36px" />
  						<Override
  							slot="menu-open"
  							md-top={0}
  							md-bottom={0}
  							md-display="flex"
  							md-flex-direction="column"
  							md-align-items="center"
  							md-justify-content="center"
  						/>
  						<Override slot="icon-open" md-position="fixed" md-top="24px" md-right="calc(4% + 4px)" />
  					</Components.BurgerMenu>
  					{"    "}
  				</StackItem>
  				<StackItem display="flex" quarkly-title="Side" width="25%" md-display="none">
  					<Override slot="StackItemContent" align-items="center" justify-content="flex-end" />
  					<Button
  						padding="8px 18px 8px 18px"
  						font="--base"
  						letter-spacing="0.5px"
  						z-index="5"
  						background="--color-primary"
  						md-display="none"
  						white-space="nowrap"
  						border-radius="0px"
  						hover-transform="translateY(-4px)"
  						transition="transform --transitionDuration-fast --transitionTimingFunction-easeInOut 0s"
  					>
  						Contact Us
  					</Button>
  					{"   "}
  				</StackItem>
  				{"    "}
  			</Stack>
  		</Section>
  		<Section quarkly-title="Hero" padding="25px 0 75px 0" lg-padding="25px 0 25px 0">
  			<Stack>
  				{"    "}
  				<StackItem width="100%" display="flex">
  					<Override
  						slot="StackItemContent"
  						align-items="center"
  						justify-content="center"
  						height="480px"
  						background="radial-gradient(at center,--color-darkL2 23.3%,rgba(0,0,0,0) 82.4%),linear-gradient(180deg,rgba(155, 108, 252, 0.15) 0%,transparent 100%) 0 0 no-repeat,--color-darkL2"
  						md-height="360px"
  						flex-direction="column"
  					/>
  					{"        "}
  					<Text
  						color="--light"
  						font="--headline1"
  						margin="16px 0px 0px 0px"
  						sm-text-align="center"
  						sm-width="80%"
  						text-align="center"
  						padding="0px 16px 0px 16px"
  					>
  						404
  					</Text>
  					<Text
  						font="--lead"
  						color="--light"
  						margin="10px 0px 35px 0px"
  						sm-text-align="center"
  						sm-width="80%"
  						opacity="0.7"
  						text-align="center"
  						padding="0px 16px 0px 16px"
  					>
  						This is not the page you're looking for. Move along, move along.
  					</Text>
  					<Link
  						href="/"
  						text-decoration-line="initial"
  						color="--darkL2"
  						background="--color-light"
  						padding="12px 24px 12px 24px"
  						font="--base"
  						letter-spacing="0.5px"
  						hover-transform="translateY(-4px)"
  						transition="transform --transitionDuration-fast --transitionTimingFunction-easeInOut 0s"
  					>
  						Home Page
  					</Link>
  					{"    "}
  				</StackItem>
  				{"    "}
  			</Stack>
  		</Section>
  		<Link
  			font={"--capture"}
  			font-size={"10px"}
  			position={"fixed"}
  			bottom={"12px"}
  			right={"12px"}
  			z-index={"4"}
  			border-radius={"4px"}
  			padding={"5px 12px 4px"}
  			background-color={"--dark"}
  			opacity={"0.6"}
  			hover-opacity={"1"}
  			color={"--light"}
  			cursor={"pointer"}
  			transition={"--opacityOut"}
  			quarkly-title={"Badge"}
  			text-decoration-line={"initial"}
  			href={"https://quarkly.io/"}
  			target={"_blank"}
  		>
  			Made on Quarkly
  		</Link>
  	</Theme>;
  });