@lote-design-system/marketing-blocks/module/components/marketing/heros/Hero2.js

marketing blocks

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Container, Row, Column, Button, Input } from '@lote-design-system/core'; // => Dependent styled-components
// Our main component depends upon the following styled-components
// This container is very important component for the Nav aligning

const ContainerModify = styled(Container).withConfig({
  displayName: "Hero2__ContainerModify",
  componentId: "sc-1uplca8-0"
})(["max-width:", ";"], ({
  theme
}) => theme.maxContainerWidth); // Hero

const SectionHero = styled.div.withConfig({
  displayName: "Hero2__SectionHero",
  componentId: "sc-1uplca8-1"
})(["position:relative;padding:96px 0;background-color:", ";"], ({
  theme
}) => theme.colors.white);
const ColumnLeft = styled(Column).withConfig({
  displayName: "Hero2__ColumnLeft",
  componentId: "sc-1uplca8-2"
})(["text-align:center;margin-bottom:32px;", "{text-align:left;}"], ({
  theme
}) => theme.mediaQueries.lg);
const ColumnRight = styled(Column).withConfig({
  displayName: "Hero2__ColumnRight",
  componentId: "sc-1uplca8-3"
})(["display:none;", "{display:flex;}"], ({
  theme
}) => theme.mediaQueries.lg);
const JumboTron = styled.div.withConfig({
  displayName: "Hero2__JumboTron",
  componentId: "sc-1uplca8-4"
})(["position:relative;"]); // Heading

const JumboTronH1 = styled.h1.withConfig({
  displayName: "Hero2__JumboTronH1",
  componentId: "sc-1uplca8-5"
})(["font-size:32px;font-weight:700;line-height:1.2;color:", ";margin-bottom:12px;span{color:", ";}"], ({
  theme
}) => theme.colors.text.title, ({
  theme
}) => theme.colors.primary);
const JumboTronP = styled.p.withConfig({
  displayName: "Hero2__JumboTronP",
  componentId: "sc-1uplca8-6"
})(["font-size:16px;color:", ";margin-bottom:18px;"], ({
  theme
}) => theme.colors.text.title);
const JumboTronH5 = styled.h5.withConfig({
  displayName: "Hero2__JumboTronH5",
  componentId: "sc-1uplca8-7"
})(["font-size:18px;font-weight:500;color:", ";margin-bottom:12px;"], ({
  theme
}) => theme.colors.text.title);
const JumboTronForm = styled.form.withConfig({
  displayName: "Hero2__JumboTronForm",
  componentId: "sc-1uplca8-8"
})(["margin-top:16px;"]); // NewsletterGroup

const NewsletterGroup = styled.div.withConfig({
  displayName: "Hero2__NewsletterGroup",
  componentId: "sc-1uplca8-9"
})(["> input{margin-bottom:12px;}", "{display:flex;flex-wrap:wrap;align-items:stretch;> input{flex:1 1 auto;width:1%;margin-bottom:0;}}"], ({
  theme
}) => theme.mediaQueries.sm);
const GroupAppend = styled.div.withConfig({
  displayName: "Hero2__GroupAppend",
  componentId: "sc-1uplca8-10"
})(["> button{width:100%;}", "{display:flex;margin-left:16px;}"], ({
  theme
}) => theme.mediaQueries.sm);
const NewsletterButton = styled(Button).withConfig({
  displayName: "Hero2__NewsletterButton",
  componentId: "sc-1uplca8-11"
})(["font-weight:700;"]); // -- End --

const JumboTronTextEnd = styled.span.withConfig({
  displayName: "Hero2__JumboTronTextEnd",
  componentId: "sc-1uplca8-12"
})(["display:block;font-size:16px;color:", ";margin-top:12px;a{color:", ";text-decoration:underline;transition:color 0.4s linear;&:hover{color:", ";}}"], ({
  theme
}) => theme.colors.text.primary, ({
  theme
}) => theme.colors.primary, ({
  theme
}) => theme.palettes.primary[6]);
const Illustration = styled.div.withConfig({
  displayName: "Hero2__Illustration",
  componentId: "sc-1uplca8-13"
})(["> svg,> img{display:block;max-width:100%;height:auto;}"]); // <= End Dependent styled-components

const propTypes = {
  /** The Major words for the hero section. */
  majorWords: PropTypes.string.isRequired,

  /** The Minor words for the hero section. */
  minorWords: PropTypes.string.isRequired,

  /** The description for the hero section. */
  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,

  /** The newsletter text for the form. */
  newsletterText: PropTypes.string.isRequired,

  /** The input properties for the Newsletter. */
  input: PropTypes.shape({
    placeholder: PropTypes.string.isRequired
  }).isRequired,

  /** The button properties for the Newsletter. */
  button: PropTypes.shape({
    text: PropTypes.string.isRequired,
    variation: PropTypes.string.isRequired,
    color: PropTypes.string
  }).isRequired,

  /** The policy text for the Newsletter. */
  policyText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,

  /** The illustration for the hero.  */
  illustration: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,

  /** The columns will move from left to right. */
  shift: PropTypes.bool
};
const description = /*#__PURE__*/React.createElement("span", null, "Website building is chaotic. Across ", /*#__PURE__*/React.createElement("strong", null, "teams"), ", there are design", ' ', /*#__PURE__*/React.createElement("strong", null, "apps"), ", coding editors, prototyping tools, tickets, style guides. When you design with our tool, every stroke gets code generated ready to go live. ", /*#__PURE__*/React.createElement("strong", null, "CMS"), ", ", /*#__PURE__*/React.createElement("strong", null, "IDE"), " and", /*#__PURE__*/React.createElement("strong", null, " Analytics"), " are integrated for seamless customizations. Cross-team collaboration is built along every step. Go from all-over-the-place handoffs, to building cozily hands-on.");
const defaultProps = {
  majorWords: 'Turn ideas to live web',
  minorWords: 'experiences',
  description: description,
  input: {
    placeholder: 'Enter your email'
  },
  button: {
    text: 'Notify me',
    variation: 'fill'
  },
  newsletterText: "Sign up to get notification when it's ready.",
  policyText: /*#__PURE__*/React.createElement("span", null, "We care about the protection of your data. Read", ' ', /*#__PURE__*/React.createElement("a", {
    href: "/"
  }, "Privacy Policy"), "."),
  illustration: 'https://i.imgur.com/v4uQCOe.png',
  shift: false
};
/**
 * Returns the JSX or null for the illustration.
 * @param illustration {*} - The illustration will React.element or a path
 * @return {null|*} - Returns the JSX or null
 */

const renderIllustration = illustration => {
  if (React.isValidElement(illustration)) {
    return illustration;
  } else if (typeof illustration === 'string' && illustration.length > 0) {
    return /*#__PURE__*/React.createElement("img", {
      src: illustration,
      alt: "Hero illustration"
    });
  } else {
    return null;
  }
};

export const Hero2 = props => {
  const {
    majorWords,
    minorWords,
    description,
    input,
    button,
    newsletterText,
    policyText,
    illustration,
    shift
  } = props,
        attributes = _objectWithoutProperties(props, ["majorWords", "minorWords", "description", "input", "button", "newsletterText", "policyText", "illustration", "shift"]);

  const {
    placeholder
  } = input,
        inputMore = _objectWithoutProperties(input, ["placeholder"]);

  const {
    variation,
    text,
    color
  } = button,
        buttonMore = _objectWithoutProperties(button, ["variation", "text", "color"]);

  const Column1 = /*#__PURE__*/React.createElement(ColumnLeft, {
    lg: 6
  }, /*#__PURE__*/React.createElement(JumboTron, null, /*#__PURE__*/React.createElement(JumboTronH1, null, majorWords, " ", /*#__PURE__*/React.createElement("span", null, minorWords)), /*#__PURE__*/React.createElement(JumboTronP, null, description), /*#__PURE__*/React.createElement(JumboTronH5, null, newsletterText), /*#__PURE__*/React.createElement(JumboTronForm, {
    method: "post"
  }, /*#__PURE__*/React.createElement(NewsletterGroup, null, /*#__PURE__*/React.createElement(Input, _extends({
    type: "text",
    placeholder: placeholder,
    autoComplete: "off"
  }, inputMore)), /*#__PURE__*/React.createElement(GroupAppend, null, /*#__PURE__*/React.createElement(NewsletterButton, _extends({
    type: "button",
    color: color,
    variation: variation
  }, buttonMore), text)))), /*#__PURE__*/React.createElement(JumboTronTextEnd, null, policyText)));
  const Column2 = /*#__PURE__*/React.createElement(ColumnRight, {
    lg: 6
  }, /*#__PURE__*/React.createElement(Illustration, null, renderIllustration(illustration)));
  return /*#__PURE__*/React.createElement(SectionHero, attributes, /*#__PURE__*/React.createElement(ContainerModify, {
    fluid: true
  }, /*#__PURE__*/React.createElement(Row, null, shift ? /*#__PURE__*/React.createElement(React.Fragment, null, Column2, Column1) : /*#__PURE__*/React.createElement(React.Fragment, null, Column1, Column2))));
};
Hero2.propTypes = propTypes;
Hero2.defaultProps = defaultProps;