text: import React from "react";
  import theme from "theme";
  import { Theme, Link, Text, Icon, Box, Button, Input } from "@quarkly/widgets";
  import { Helmet } from "react-helmet";
  import { Section, Override, StackItem, Stack, Formspree, GoogleMap } from "@quarkly/components";
  import { MdHelp } from "react-icons/md";
  export default (() => {
  	return <Theme theme={theme}>
  		<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 color="--dark">
  			<Text as="h2" font="--headline1" md-font="--headline2" margin="20px 0 0 0">
  				Q&A
  			</Text>
  			<Box
  				margin="36px 0 0 0"
  				padding="0 0 0 54px"
  				sm-padding="54px 0 0 0"
  				position="relative"
  				max-width="800px"
  			>
  				<Icon
  					position="absolute"
  					top="0"
  					left="0"
  					size="36px"
  					color="--primary"
  					category="md"
  					icon={MdHelp}
  				/>
  				<Text as="h3" font="--headline3" margin="10px 0">
  					Is there life on Mars?
  				</Text>
  				<Text as="p" font="--lead" margin="10px 0" color="--greyD2">
  					It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
  				</Text>
  			</Box>
  			<Box
  				margin="36px 0 0 0"
  				padding="0 0 0 54px"
  				sm-padding="54px 0 0 0"
  				position="relative"
  				max-width="800px"
  			>
  				<Icon
  					position="absolute"
  					top="0"
  					left="0"
  					size="36px"
  					color="--primary"
  					category="md"
  					icon={MdHelp}
  				/>
  				<Text as="h3" font="--headline3" margin="10px 0">
  					How much salt is in the ocean?
  				</Text>
  				<Text as="p" font="--lead" margin="10px 0" color="--greyD2">
  					It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
  				</Text>
  			</Box>
  			<Box
  				margin="36px 0"
  				padding="0 0 0 54px"
  				sm-padding="54px 0 0 0"
  				position="relative"
  				max-width="800px"
  			>
  				<Icon
  					position="absolute"
  					top="0"
  					left="0"
  					size="36px"
  					color="--primary"
  					category="md"
  					icon={MdHelp}
  				/>
  				<Text as="h3" font="--headline3" margin="10px 0">
  					Why is the sky blue?
  				</Text>
  				<Text as="p" font="--lead" margin="10px 0" color="--greyD2">
  					It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
  				</Text>
  			</Box>
  		</Section>
  		<Section padding="100px 0" sm-padding="40px 0">
  			<Override slot="SectionContent" align-items="center" font="16px roboto" />
  			<Text as="h2" font="--headline1" md-font="--headline2" margin="20px 0 0 0">
  				About Us
  			</Text>
  			<Text as="p" font="--lead" margin="20px 0 0 0">
  				Hi! I'm a paragraph. Click here to add your own text and edit me. It’s a piece of cake. I’m a great space for you to tell a story and let your site visitors know more about you. Talk about your business and what products and services you offer. Share how you came up with the idea for your company and what makes you different from your competitors. Make your business stand out and show your visitors who you are.
  			</Text>
  			<Stack>
  				{"    "}
  				<StackItem width="50%" display="flex">
  					{"        "}
  					<Text font="--lead" margin="0px 0px 0px 0px" display="inline-block">
  						{"            "}First Item{"\n        "}
  					</Text>
  					{"    "}
  				</StackItem>
  				{"    "}
  				<StackItem width="50%" display="flex">
  					{"        "}
  					<Text font="--lead" margin="0px 0px 0px 0px" display="inline-block">
  						{"            "}Second Item{"\n        "}
  					</Text>
  					{"    "}
  				</StackItem>
  			</Stack>
  			<Button font="--lead" margin="20px">
  				Button
  			</Button>
  		</Section>
  		<Formspree errorMessage="Something went wrong" completeText="Success">
  			<Input name="email" placeholder="Email" margin-right="4px" />
  			<Button>
  				Submit
  			</Button>
  		</Formspree>
  		<Formspree errorMessage="Something went wrong" completeText="Success">
  			<Input name="email" placeholder="Email" margin-right="4px" />
  			<Button>
  				Submit
  			</Button>
  		</Formspree>
  		<GoogleMap />
  		<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>;
  });