@lote-design-system/marketing-blocks/module/components/marketing/heros/Hero5.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, { css } from 'styled-components';
import { Container, Row, Column, Button, Text } from '@lote-design-system/core';
import { Hero4PolygonSvg } from '../svg'; // => Dependent styled-components
// Our main component depends upon the following styled-components

const Hero = styled.div.withConfig({
  displayName: "Hero5__Hero",
  componentId: "sc-12ts3q3-0"
})([""]);
const ColumnFirst = styled((_ref) => {
  let {
    simple
  } = _ref,
      rest = _objectWithoutProperties(_ref, ["simple"]);

  return /*#__PURE__*/React.createElement(Column, _extends({}, rest, {
    lg: 6
  }));
}).withConfig({
  displayName: "Hero5__ColumnFirst",
  componentId: "sc-12ts3q3-1"
})(["margin-bottom:32px;", "{", " margin-bottom:0;}"], ({
  theme
}) => theme.mediaQueries.lg, ({
  simple
}) => {
  if (!simple) {
    return css(["padding-right:0;"]);
  }
});
const ColumnSecond = styled((_ref2) => {
  let {
    simple
  } = _ref2,
      rest = _objectWithoutProperties(_ref2, ["simple"]);

  return /*#__PURE__*/React.createElement(Column, _extends({}, rest, {
    lg: 6
  }));
}).withConfig({
  displayName: "Hero5__ColumnSecond",
  componentId: "sc-12ts3q3-2"
})(["margin-bottom:32px;", "{padding-right:0;", " margin-bottom:0;}"], ({
  theme
}) => theme.mediaQueries.lg, ({
  simple
}) => {
  if (!simple) {
    return css(["padding-left:0;"]);
  }
});
const JumboTron = styled.div.withConfig({
  displayName: "Hero5__JumboTron",
  componentId: "sc-12ts3q3-3"
})(["position:relative;", " z-index:10;padding-top:128px;", "{text-align:center;}", "{text-align:left;padding-top:196px;padding-bottom:196px;max-width:690px;margin-left:auto;}"], ''
/* It should be greater than svg */
, ({
  theme
}) => theme.mediaQueries.sm, ({
  theme
}) => theme.mediaQueries.lg);
const JumboTronTitle = styled(Text).withConfig({
  displayName: "Hero5__JumboTronTitle",
  componentId: "sc-12ts3q3-4"
})(["max-width:620px;margin-top:0;margin-bottom:16px;color:", ";font-weight:700;line-height:1.2;span{color:", ";}", "{margin-left:auto;margin-right:auto;}", "{margin-left:0;margin-right:0;}"], ({
  theme: {
    colors
  }
}) => colors.secondary, ({
  theme: {
    colors
  }
}) => colors.primary, ({
  theme
}) => theme.mediaQueries.sm, ({
  theme
}) => theme.mediaQueries.lg);
const JumboTronDescription = styled.p.withConfig({
  displayName: "Hero5__JumboTronDescription",
  componentId: "sc-12ts3q3-5"
})(["max-width:560px;margin-top:0;margin-bottom:32px;color:", ";font-weight:400;font-size:18px;", "{margin-left:auto;margin-right:auto;}", "{margin-left:0;margin-right:0;}"], ({
  theme: {
    colors
  }
}) => colors.text.primary, ({
  theme
}) => theme.mediaQueries.sm, ({
  theme
}) => theme.mediaQueries.lg);
const JumboTronLink = styled(Button).withConfig({
  displayName: "Hero5__JumboTronLink",
  componentId: "sc-12ts3q3-6"
})(["padding:12px 30px;font-size:20px;margin-bottom:16px;display:block;width:100%;", "{display:inline-block;width:auto;:first-child{margin-right:16px;}}"], ({
  theme
}) => theme.mediaQueries.sm);
const JumboTronSvgWrapper = styled.div.withConfig({
  displayName: "Hero5__JumboTronSvgWrapper",
  componentId: "sc-12ts3q3-7"
})(["> svg{display:none;}", "{> svg{display:block;position:absolute;z-index:-10;top:0;bottom:0;right:0;width:196px;transform:translateX(50%);color:#fff;}}"], ({
  theme
}) => theme.mediaQueries.lg);
const BackgroundImage = styled.div.withConfig({
  displayName: "Hero5__BackgroundImage",
  componentId: "sc-12ts3q3-8"
})(["", ";background-position:center center;background-repeat:no-repeat;background-size:cover;background-color:#f7f7f7;height:300px;", "{height:100%;}"], ({
  bgSrc
}) => {
  if (bgSrc) {
    return css(["background-image:url('", "');"], bgSrc);
  }
}, ({
  theme
}) => theme.mediaQueries.lg); // <= End Dependent styled-components

const linkSchema = [{
  id: 1,
  href: '/signin',
  text: 'Get Started',
  variation: 'fill'
}, {
  id: 2,
  href: '/signup',
  text: 'Signup',
  variation: 'primarySubtle'
}];
const linkShape = {
  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
  href: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired,
  variation: PropTypes.string.isRequired,
  color: PropTypes.string
};
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,

  /** Place the image url on the `img` element. */
  src: PropTypes.string.isRequired,

  /** The link below the description. */
  links: PropTypes.arrayOf(PropTypes.shape(linkShape)).isRequired,

  /** It will remove the slanted polygon. */
  simple: 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: 'Web Design Platform',
  minorWords: 'for All Creatives',
  description: description,
  src: 'https://i.imgur.com/crDFOzg.jpg',
  links: linkSchema,
  simple: false
};
export const Hero5 = props => {
  const {
    majorWords,
    minorWords,
    description,
    src,
    links,
    simple
  } = props,
        attributes = _objectWithoutProperties(props, ["majorWords", "minorWords", "description", "src", "links", "simple"]);

  return /*#__PURE__*/React.createElement(Hero, attributes, /*#__PURE__*/React.createElement(Container, {
    fluid: true
  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(ColumnFirst, {
    simple: simple
  }, /*#__PURE__*/React.createElement(JumboTron, null, /*#__PURE__*/React.createElement(JumboTronTitle, {
    fSize: 60
  }, majorWords, " ", /*#__PURE__*/React.createElement("span", null, minorWords)), /*#__PURE__*/React.createElement(JumboTronDescription, null, description), Array.isArray(links) && links.length > 0 ? /*#__PURE__*/React.createElement("div", null, links.map(link => {
    return /*#__PURE__*/React.createElement(JumboTronLink, {
      key: link.id,
      href: link.href,
      color: link.color,
      variation: link.variation
    }, link.text);
  })) : null, !simple && /*#__PURE__*/React.createElement(JumboTronSvgWrapper, null, /*#__PURE__*/React.createElement(Hero4PolygonSvg, null)))), /*#__PURE__*/React.createElement(ColumnSecond, {
    simple: simple
  }, /*#__PURE__*/React.createElement(BackgroundImage, {
    bgSrc: src
  })))));
};
Hero5.propTypes = propTypes;
Hero5.defaultProps = defaultProps;