@lote-design-system/marketing-blocks
Version:
226 lines (194 loc) • 9.42 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Hero5 = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _core = require("@lote-design-system/core");
var _svg = require("../svg");
// => Dependent styled-components
// Our main component depends upon the following styled-components
var Hero = _styledComponents["default"].div.withConfig({
displayName: "Hero5__Hero",
componentId: "sc-12ts3q3-0"
})([""]);
var ColumnFirst = (0, _styledComponents["default"])(function (_ref) {
var simple = _ref.simple,
rest = (0, _objectWithoutProperties2["default"])(_ref, ["simple"]);
return /*#__PURE__*/_react["default"].createElement(_core.Column, (0, _extends2["default"])({}, rest, {
lg: 6
}));
}).withConfig({
displayName: "Hero5__ColumnFirst",
componentId: "sc-12ts3q3-1"
})(["margin-bottom:32px;", "{", " margin-bottom:0;}"], function (_ref2) {
var theme = _ref2.theme;
return theme.mediaQueries.lg;
}, function (_ref3) {
var simple = _ref3.simple;
if (!simple) {
return (0, _styledComponents.css)(["padding-right:0;"]);
}
});
var ColumnSecond = (0, _styledComponents["default"])(function (_ref4) {
var simple = _ref4.simple,
rest = (0, _objectWithoutProperties2["default"])(_ref4, ["simple"]);
return /*#__PURE__*/_react["default"].createElement(_core.Column, (0, _extends2["default"])({}, rest, {
lg: 6
}));
}).withConfig({
displayName: "Hero5__ColumnSecond",
componentId: "sc-12ts3q3-2"
})(["margin-bottom:32px;", "{padding-right:0;", " margin-bottom:0;}"], function (_ref5) {
var theme = _ref5.theme;
return theme.mediaQueries.lg;
}, function (_ref6) {
var simple = _ref6.simple;
if (!simple) {
return (0, _styledComponents.css)(["padding-left:0;"]);
}
});
var JumboTron = _styledComponents["default"].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 */
, function (_ref7) {
var theme = _ref7.theme;
return theme.mediaQueries.sm;
}, function (_ref8) {
var theme = _ref8.theme;
return theme.mediaQueries.lg;
});
var JumboTronTitle = (0, _styledComponents["default"])(_core.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;}"], function (_ref9) {
var colors = _ref9.theme.colors;
return colors.secondary;
}, function (_ref10) {
var colors = _ref10.theme.colors;
return colors.primary;
}, function (_ref11) {
var theme = _ref11.theme;
return theme.mediaQueries.sm;
}, function (_ref12) {
var theme = _ref12.theme;
return theme.mediaQueries.lg;
});
var JumboTronDescription = _styledComponents["default"].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;}"], function (_ref13) {
var colors = _ref13.theme.colors;
return colors.text.primary;
}, function (_ref14) {
var theme = _ref14.theme;
return theme.mediaQueries.sm;
}, function (_ref15) {
var theme = _ref15.theme;
return theme.mediaQueries.lg;
});
var JumboTronLink = (0, _styledComponents["default"])(_core.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;}}"], function (_ref16) {
var theme = _ref16.theme;
return theme.mediaQueries.sm;
});
var JumboTronSvgWrapper = _styledComponents["default"].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;}}"], function (_ref17) {
var theme = _ref17.theme;
return theme.mediaQueries.lg;
});
var BackgroundImage = _styledComponents["default"].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%;}"], function (_ref18) {
var bgSrc = _ref18.bgSrc;
if (bgSrc) {
return (0, _styledComponents.css)(["background-image:url('", "');"], bgSrc);
}
}, function (_ref19) {
var theme = _ref19.theme;
return theme.mediaQueries.lg;
}); // <= End Dependent styled-components
var linkSchema = [{
id: 1,
href: '/signin',
text: 'Get Started',
variation: 'fill'
}, {
id: 2,
href: '/signup',
text: 'Signup',
variation: 'primarySubtle'
}];
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,
/** Place the image url on the `img` element. */
src: _propTypes["default"].string.isRequired,
/** The link below the description. */
links: _propTypes["default"].arrayOf(_propTypes["default"].shape(linkShape)).isRequired,
/** It will remove the slanted polygon. */
simple: _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,
src: 'https://i.imgur.com/crDFOzg.jpg',
links: linkSchema,
simple: false
};
var Hero5 = function Hero5(props) {
var majorWords = props.majorWords,
minorWords = props.minorWords,
description = props.description,
src = props.src,
links = props.links,
simple = props.simple,
attributes = (0, _objectWithoutProperties2["default"])(props, ["majorWords", "minorWords", "description", "src", "links", "simple"]);
return /*#__PURE__*/_react["default"].createElement(Hero, attributes, /*#__PURE__*/_react["default"].createElement(_core.Container, {
fluid: true
}, /*#__PURE__*/_react["default"].createElement(_core.Row, null, /*#__PURE__*/_react["default"].createElement(ColumnFirst, {
simple: simple
}, /*#__PURE__*/_react["default"].createElement(JumboTron, null, /*#__PURE__*/_react["default"].createElement(JumboTronTitle, {
fSize: 60
}, majorWords, " ", /*#__PURE__*/_react["default"].createElement("span", null, minorWords)), /*#__PURE__*/_react["default"].createElement(JumboTronDescription, null, description), Array.isArray(links) && links.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, links.map(function (link) {
return /*#__PURE__*/_react["default"].createElement(JumboTronLink, {
key: link.id,
href: link.href,
color: link.color,
variation: link.variation
}, link.text);
})) : null, !simple && /*#__PURE__*/_react["default"].createElement(JumboTronSvgWrapper, null, /*#__PURE__*/_react["default"].createElement(_svg.Hero4PolygonSvg, null)))), /*#__PURE__*/_react["default"].createElement(ColumnSecond, {
simple: simple
}, /*#__PURE__*/_react["default"].createElement(BackgroundImage, {
bgSrc: src
})))));
};
exports.Hero5 = Hero5;
Hero5.propTypes = propTypes;
Hero5.defaultProps = defaultProps;