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

const VideoContainer = styled.div.withConfig({
  displayName: "Hero4__VideoContainer",
  componentId: "sc-1u61a83-0"
})(["position:relative;", ";"], ({
  overlay
}) => {
  if (overlay && overlay.show) {
    return css(["&:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;background-color:", ";}"], overlay.backgroundColor);
  }
});
const Video = styled.video.withConfig({
  displayName: "Hero4__Video",
  componentId: "sc-1u61a83-1"
})(["position:absolute;object-fit:cover;top:0;left:0;width:100%;height:100%;"]);
const HeroBody = styled.div.withConfig({
  displayName: "Hero4__HeroBody",
  componentId: "sc-1u61a83-2"
})(["z-index:2;position:relative;padding:", " 0;flex-grow:1;flex-shrink:0;align-items:center;display:flex;"], rem(192));
const ContainerModify = styled(Container).withConfig({
  displayName: "Hero4__ContainerModify",
  componentId: "sc-1u61a83-3"
})(["max-width:", ";text-align:center;flex-grow:1;flex-shrink:1;margin:0 auto;position:relative;width:auto;"], ({
  theme
}) => theme.maxContainerWidth);
/**
 * A function that returns the inverted color for the text
 * @param mode {boolean} - Associated mode
 * @return {string[]} - Returns the inverted styles
 */

const invertedTextStyles = mode => {
  if (mode) {
    return css(["color:#fff;"]);
  } else {
    return css(["color:rgba(0,0,0,0.85);"]);
  }
};

const Titles = styled.div.withConfig({
  displayName: "Hero4__Titles",
  componentId: "sc-1u61a83-4"
})(["", ";"], ({
  inverted
}) => invertedTextStyles(inverted));
const HeroTitle = styled(Text).withConfig({
  displayName: "Hero4__HeroTitle",
  componentId: "sc-1u61a83-5"
})(["max-width:992px;margin:0 auto ", ";font-weight:700;line-height:1.2;span{display:block;&:last-child{color:", ";}}"], rem(16), ({
  theme: {
    colors
  }
}) => colors.primary);
const HeroDescription = styled.p.withConfig({
  displayName: "Hero4__HeroDescription",
  componentId: "sc-1u61a83-6"
})(["", ";max-width:660px;margin:0 auto ", ";font-size:20px;"], ({
  inverted
}) => invertedTextStyles(inverted), rem(16));
const HeroLinkWrapper = styled.div.withConfig({
  displayName: "Hero4__HeroLinkWrapper",
  componentId: "sc-1u61a83-7"
})(["display:flex;align-items:center;justify-content:center;flex-wrap:wrap;"]);
const HeroLink = styled(Button).withConfig({
  displayName: "Hero4__HeroLink",
  componentId: "sc-1u61a83-8"
})(["&{padding:", " ", ";font-weight:500;display:block;width:100%;margin:8px;}", "{width:auto;display:inline-block;}"], rem(16), rem(48), ({
  theme
}) => theme.mediaQueries.sm); // <= End Dependent styled-components

const linkSchema = [{
  id: 1,
  href: '/signin',
  text: 'Signup',
  variation: 'whiteSecondary'
}, {
  id: 2,
  href: '/signup',
  text: 'Signin',
  variation: 'fill'
}];
const videoSchema = {
  src: 'https://static.videezy.com/system/resources/previews/000/018/159/original/herbst-version2.mp4',
  muted: true,
  // fixes autoplay in chrome
  autoPlay: true,
  loop: true,
  // not working https://github.com/facebook/react/issues/10389
  playsInline: true // fixes autoplay in webkit (ie. mobile safari)

};
const videoShape = PropTypes.shape({
  src: PropTypes.string.isRequired,
  muted: PropTypes.bool,
  autoPlay: PropTypes.bool,
  loop: PropTypes.bool,
  playsInline: PropTypes.bool
});
const overlayShape = {
  show: PropTypes.bool.isRequired,
  backgroundColor: PropTypes.string
};
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.string.isRequired,

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

  /** It will render the the video element on the hero. */
  video: videoShape,

  /** This will darken or lighten your major text. */
  invertedText: PropTypes.bool,

  /** Add overlay on the top of the video. */
  overlay: PropTypes.shape(overlayShape)
};
const defaultProps = {
  majorWords: 'Web Design Platform',
  minorWords: 'for All Creatives',
  description: 'When you design with us, every stroke gets code generated ready to go live. CMS, IDE and Analytics are integrated for seamless customizations. Cross-team collaboration is built along every step.',
  links: linkSchema,
  video: videoSchema,
  invertedText: true,
  overlay: {
    show: false,
    backgroundColor: 'rgba(0, 0, 0, .85)'
  }
};
export const Hero4 = props => {
  const {
    majorWords,
    minorWords,
    description,
    links,
    video,
    invertedText,
    overlay
  } = props,
        attributes = _objectWithoutProperties(props, ["majorWords", "minorWords", "description", "links", "video", "invertedText", "overlay"]); // Video properties from the video object


  const {
    src
  } = video,
        videoAttr = _objectWithoutProperties(video, ["src"]);

  return /*#__PURE__*/React.createElement(VideoContainer, _extends({
    overlay: overlay
  }, attributes), /*#__PURE__*/React.createElement(Video, videoAttr, /*#__PURE__*/React.createElement("source", {
    src: src,
    type: "video/mp4"
  })), /*#__PURE__*/React.createElement(HeroBody, null, /*#__PURE__*/React.createElement(ContainerModify, {
    fluid: true
  }, /*#__PURE__*/React.createElement(HeroTitle, {
    fSize: 64
  }, /*#__PURE__*/React.createElement(Titles, {
    inverted: invertedText
  }, /*#__PURE__*/React.createElement("span", null, majorWords), /*#__PURE__*/React.createElement("span", null, minorWords))), /*#__PURE__*/React.createElement(HeroDescription, {
    inverted: invertedText
  }, description), Array.isArray(links) && links.length > 0 ? /*#__PURE__*/React.createElement(HeroLinkWrapper, null, links.map(link => {
    return /*#__PURE__*/React.createElement(HeroLink, {
      key: link.id,
      href: link.href,
      color: link.color,
      variation: link.variation
    }, link.text);
  })) : null)));
};
Hero4.propTypes = propTypes;
Hero4.defaultProps = defaultProps;