import React from "react";
import styled from "styled-components";
import { css } from "emotion";
import { ReactComponent as LogoIcon } from "@svgr/webpack!../assets/logo.svg";
import { ReactComponent as EditorMockIcon } from "@svgr/webpack!../assets/editor-mock.svg";
import { Typography } from "@webiny/ui/Typography";
import { ButtonPrimary } from "@webiny/ui/Button";
var SlideContainer = /*#__PURE__*/styled("div", {
  target: "e1onu6n20",
  label: "SlideContainer"
})({
  display: "flex",
  flexDirection: "column",
  width: 800,
  height: 600,
  alignItems: "center",
  justifyContent: "flex-start"
});
var Logo = /*#__PURE__*/styled("div", {
  target: "e1onu6n21",
  label: "Logo"
})({
  width: "100%",
  textAlign: "center",
  marginBottom: 20,
  marginTop: 20
});
var EditorMock = /*#__PURE__*/styled("div", {
  target: "e1onu6n22",
  label: "EditorMock"
})({
  width: "100%",
  textAlign: "center",
  ">svg": {
    width: 650,
    height: "100%"
  }
});
var Text = /*#__PURE__*/styled("div", {
  target: "e1onu6n23",
  label: "Text"
})({
  paddingTop: 20,
  paddingBottom: 20,
  width: "60%",
  textAlign: "center",
  margin: "0 auto",
  h4: {
    paddingBottom: 20
  }
});
var getStartedStyle = /*#__PURE__*/css({
  marginTop: 20
}, "label:getStartedStyle;");

var Slide1 = function Slide1(props) {
  return /*#__PURE__*/React.createElement(SlideContainer, null, /*#__PURE__*/React.createElement(Logo, null, /*#__PURE__*/React.createElement(LogoIcon, null)), /*#__PURE__*/React.createElement(EditorMock, null, /*#__PURE__*/React.createElement(EditorMockIcon, null)), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h4", null, /*#__PURE__*/React.createElement(Typography, {
    use: "headline4"
  }, "Welcome to Webiny Page Editor")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Typography, {
    use: "body2"
  }, "Let\u2019s go through some basics, and learn how to use the page editor, create content, and adapt it so it fit\u2019s your visual style."))), /*#__PURE__*/React.createElement(ButtonPrimary, {
    onClick: props.nextSlide,
    className: getStartedStyle
  }, "Get Started"));
};

export default Slide1;
//# sourceMappingURL=Slide1.js.map