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

marketing blocks

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { rem } from 'polished';
import { Container, Row, Column, Text, Button } 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: "Hero1__ContainerModify",
  componentId: "sc-7pyack-0"
})(["max-width:", ";"], ({
  theme
}) => theme.maxContainerWidth);
const SectionHero = styled.div.withConfig({
  displayName: "Hero1__SectionHero",
  componentId: "sc-7pyack-1"
})(["position:relative;background-color:", ";padding:96px 0;"], ({
  theme
}) => theme.colors.white);
const ColumnLeft = styled(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;}"], ({
  theme
}) => theme.mediaQueries.lg);
const ColumnRight = styled(Column).withConfig({
  displayName: "Hero1__ColumnRight",
  componentId: "sc-7pyack-3"
})(["display:none;", "{display:flex;}"], ({
  theme
}) => theme.mediaQueries.lg);
const JumboTron = styled.div.withConfig({
  displayName: "Hero1__JumboTron",
  componentId: "sc-7pyack-4"
})([""]); // Heading

const JumboTronH1 = styled(Text).withConfig({
  displayName: "Hero1__JumboTronH1",
  componentId: "sc-7pyack-5"
})(["font-weight:700;line-height:1.2;color:", ";margin:0;"], ({
  theme
}) => theme.colors.text.title);
const Underline = styled.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%;"], ({
  theme
}) => theme.palettes.primary[2], ({
  theme
}) => theme.palettes.primary[2], rem(12)); // Heading End

const JumboTronP = styled.p.withConfig({
  displayName: "Hero1__JumboTronP",
  componentId: "sc-7pyack-7"
})(["max-width:560px;font-size:16px;color:", ";margin:16px auto;"], ({
  theme
}) => theme.colors.text.primary);
const JumboTronActions = styled.div.withConfig({
  displayName: "Hero1__JumboTronActions",
  componentId: "sc-7pyack-8"
})(["margin:0 -12px;"]);
const JumboTronButton = styled(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;}"], ({
  theme
}) => theme.mediaQueries.sm); // Base Image

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

const linkSchema = [{
  id: 1,
  href: '/signin',
  text: 'Signup',
  variation: 'whiteSecondary'
}, {
  id: 2,
  href: '/signup',
  text: 'Signin',
  variation: 'fill'
}];
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,

  /** The links for the hero section. */
  links: PropTypes.arrayOf(PropTypes.shape(linkShape)).isRequired,

  /** The source for the image.  */
  src: PropTypes.string.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: 'Web Design Platform',
  minorWords: 'for All Creatives',
  description: description,
  links: linkSchema,
  src: 'https://i.imgur.com/PeGpFZu.png',
  shift: false
};
export const Hero1 = props => {
  const {
    majorWords,
    minorWords,
    description,
    links,
    src,
    shift
  } = props,
        attributes = _objectWithoutProperties(props, ["majorWords", "minorWords", "description", "links", "src", "shift"]);

  const Column1 = /*#__PURE__*/React.createElement(ColumnLeft, {
    lg: 6
  }, /*#__PURE__*/React.createElement(JumboTron, null, /*#__PURE__*/React.createElement(JumboTronH1, {
    fSize: 48
  }, /*#__PURE__*/React.createElement(Underline, null, majorWords), /*#__PURE__*/React.createElement("br", null), minorWords), /*#__PURE__*/React.createElement(JumboTronP, null, description), Array.isArray(links) && links.length > 0 ? /*#__PURE__*/React.createElement(JumboTronActions, null, links.map(link => {
    return /*#__PURE__*/React.createElement(JumboTronButton, {
      key: link.id,
      href: link.href,
      color: link.color,
      variation: link.variation
    }, link.text);
  })) : null));
  const Column2 = /*#__PURE__*/React.createElement(ColumnRight, {
    lg: 6
  }, /*#__PURE__*/React.createElement(Image, {
    src: src,
    alt: "Hero"
  }));
  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))));
};
Hero1.propTypes = propTypes;
Hero1.defaultProps = defaultProps;