@lote-design-system/marketing-blocks/main/components/marketing/heros/Hero1.js

marketing blocks

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Hero1 = exports.Image = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _polished = require("polished");

var _core = require("@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
var ContainerModify = (0, _styledComponents["default"])(_core.Container).withConfig({
  displayName: "Hero1__ContainerModify",
  componentId: "sc-7pyack-0"
})(["max-width:", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.maxContainerWidth;
});

var SectionHero = _styledComponents["default"].div.withConfig({
  displayName: "Hero1__SectionHero",
  componentId: "sc-7pyack-1"
})(["position:relative;background-color:", ";padding:96px 0;"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.white;
});

var ColumnLeft = (0, _styledComponents["default"])(_core.Column).withConfig({
  displayName: "Hero1__ColumnLeft",
  componentId: "sc-7pyack-2"
})(["display:flex;justify-content:center;text-align:center;margin-bottom:32px;", "{justify-content:flex-start;text-align:left;}"], function (_ref3) {
  var theme = _ref3.theme;
  return theme.mediaQueries.lg;
});
var ColumnRight = (0, _styledComponents["default"])(_core.Column).withConfig({
  displayName: "Hero1__ColumnRight",
  componentId: "sc-7pyack-3"
})(["display:none;", "{display:flex;}"], function (_ref4) {
  var theme = _ref4.theme;
  return theme.mediaQueries.lg;
});

var JumboTron = _styledComponents["default"].div.withConfig({
  displayName: "Hero1__JumboTron",
  componentId: "sc-7pyack-4"
})([""]); // Heading


var JumboTronH1 = (0, _styledComponents["default"])(_core.Text).withConfig({
  displayName: "Hero1__JumboTronH1",
  componentId: "sc-7pyack-5"
})(["font-weight:700;line-height:1.2;color:", ";margin:0;"], function (_ref5) {
  var theme = _ref5.theme;
  return theme.colors.text.title;
});

var Underline = _styledComponents["default"].span.withConfig({
  displayName: "Hero1__Underline",
  componentId: "sc-7pyack-6"
})(["background-image:linear-gradient( 0deg,", " 0%,", " 100% );background-repeat:no-repeat;background-size:100% ", ";background-position:0 88%;"], function (_ref6) {
  var theme = _ref6.theme;
  return theme.palettes.primary[2];
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.palettes.primary[2];
}, (0, _polished.rem)(12)); // Heading End


var JumboTronP = _styledComponents["default"].p.withConfig({
  displayName: "Hero1__JumboTronP",
  componentId: "sc-7pyack-7"
})(["max-width:560px;font-size:16px;color:", ";margin:16px auto;"], function (_ref8) {
  var theme = _ref8.theme;
  return theme.colors.text.primary;
});

var JumboTronActions = _styledComponents["default"].div.withConfig({
  displayName: "Hero1__JumboTronActions",
  componentId: "sc-7pyack-8"
})(["margin:0 -12px;"]);

var JumboTronButton = (0, _styledComponents["default"])(_core.Button).withConfig({
  displayName: "Hero1__JumboTronButton",
  componentId: "sc-7pyack-9"
})(["padding:16px 64px;font-weight:700;font-size:16px;display:block;width:100%;margin:12px;", "{width:auto;display:inline-block;}"], function (_ref9) {
  var theme = _ref9.theme;
  return theme.mediaQueries.sm;
}); // Base Image

var Image = _styledComponents["default"].img.withConfig({
  displayName: "Hero1__Image",
  componentId: "sc-7pyack-10"
})(["display:block;max-width:100%;height:auto;"]); // <= End Dependent styled-components


exports.Image = Image;
var linkSchema = [{
  id: 1,
  href: '/signin',
  text: 'Signup',
  variation: 'whiteSecondary'
}, {
  id: 2,
  href: '/signup',
  text: 'Signin',
  variation: 'fill'
}];
var linkShape = {
  id: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]).isRequired,
  href: _propTypes["default"].string.isRequired,
  text: _propTypes["default"].string.isRequired,
  variation: _propTypes["default"].string.isRequired,
  color: _propTypes["default"].string
};
var propTypes = {
  /** The Major words for the hero section. */
  majorWords: _propTypes["default"].string.isRequired,

  /** The Minor words for the hero section. */
  minorWords: _propTypes["default"].string.isRequired,

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

  /** The links for the hero section. */
  links: _propTypes["default"].arrayOf(_propTypes["default"].shape(linkShape)).isRequired,

  /** The source for the image.  */
  src: _propTypes["default"].string.isRequired,

  /** The columns will move from left to right. */
  shift: _propTypes["default"].bool
};

var description = /*#__PURE__*/_react["default"].createElement("span", null, "Website building is chaotic. Across ", /*#__PURE__*/_react["default"].createElement("strong", null, "teams"), ", there are design", ' ', /*#__PURE__*/_react["default"].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["default"].createElement("strong", null, "CMS"), ", ", /*#__PURE__*/_react["default"].createElement("strong", null, "IDE"), " and", /*#__PURE__*/_react["default"].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.");

var defaultProps = {
  majorWords: 'Web Design Platform',
  minorWords: 'for All Creatives',
  description: description,
  links: linkSchema,
  src: 'https://i.imgur.com/PeGpFZu.png',
  shift: false
};

var Hero1 = function Hero1(props) {
  var majorWords = props.majorWords,
      minorWords = props.minorWords,
      description = props.description,
      links = props.links,
      src = props.src,
      shift = props.shift,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["majorWords", "minorWords", "description", "links", "src", "shift"]);

  var Column1 = /*#__PURE__*/_react["default"].createElement(ColumnLeft, {
    lg: 6
  }, /*#__PURE__*/_react["default"].createElement(JumboTron, null, /*#__PURE__*/_react["default"].createElement(JumboTronH1, {
    fSize: 48
  }, /*#__PURE__*/_react["default"].createElement(Underline, null, majorWords), /*#__PURE__*/_react["default"].createElement("br", null), minorWords), /*#__PURE__*/_react["default"].createElement(JumboTronP, null, description), Array.isArray(links) && links.length > 0 ? /*#__PURE__*/_react["default"].createElement(JumboTronActions, null, links.map(function (link) {
    return /*#__PURE__*/_react["default"].createElement(JumboTronButton, {
      key: link.id,
      href: link.href,
      color: link.color,
      variation: link.variation
    }, link.text);
  })) : null));

  var Column2 = /*#__PURE__*/_react["default"].createElement(ColumnRight, {
    lg: 6
  }, /*#__PURE__*/_react["default"].createElement(Image, {
    src: src,
    alt: "Hero"
  }));

  return /*#__PURE__*/_react["default"].createElement(SectionHero, attributes, /*#__PURE__*/_react["default"].createElement(ContainerModify, {
    fluid: true
  }, /*#__PURE__*/_react["default"].createElement(_core.Row, null, shift ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, Column2, Column1) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, Column1, Column2))));
};

exports.Hero1 = Hero1;
Hero1.propTypes = propTypes;
Hero1.defaultProps = defaultProps;