@rocketsofawesome/mirage
Version:
[Live Demo of the Pattern Library](https://rocketsofawesome.github.io/mirage/)
250 lines (229 loc) • 41.8 kB
JavaScript
import React from 'react'
import styled from 'styled-components'
import PropTypes from 'prop-types'
import {
H1,
P,
FlexCol
} from 'SRC'
const LightningSvg = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72" style={{ margin: 'auto' }}>
<g fill="none" fillRule="nonzero">
<path fill="#F0FF02" d="M12.524 34.448L22.94 50.56l2.827-20.69"/>
<path fill="#F0FF02" d="M25.766 29.87L22.94 50.56l-9.796 3.31 22.612 17.997-13.112-16.31L35.11 52.26zM51.11 1.915L70.545.83l-9.128 19.247 10.323-.564L57.423 44.62l6.123-20.013-12.802 1.566z"/>
<path fill="#0073D1" d="M66.955 0c.18.17.544.42.51.5-.608 1.408.424.731 1.265.591-.23 1.012-.323 1.846-.621 2.6-1.301 3.261-2.638 6.508-4.01 9.741-.647 1.525-1.413 3-2.078 4.518-.23.54-.335 1.146-.61 2.127l6.15-2.008c.754-.246 1.5-.628 2.268-.688.575.01 1.123.25 1.522.665.312.335.548 1.084.383 1.463-.929 2.146-1.977 4.244-3.006 6.347-1.53 3.125-3.036 6.262-4.637 9.353-.949 1.834-2.102 3.563-3.079 5.382-.766 1.424-1.39 2.92-2.103 4.372-1.28 2.605-2.584 5.199-3.866 7.796-.614 1.246-1.222 1.408-2.98.8.593-6.328 1.187-12.634 1.797-19.127-2.751.61-5.274 1.146-7.778 1.73-2.646.613-5.274 1.3-7.931 1.867-.672.145-1.147-.117-1.802-.777-1.438-1.445-.89-2.864-.755-4.368.154-1.702.317-3.4.477-5.1.287-3.027.56-6.058.867-9.082.289-2.855.644-5.7.917-8.556.165-1.765.147-3.55.367-5.305.064-.505.624-1.298 1.034-1.351 2.72-.35 5.464-.488 8.188-.803 1.239-.142 2.435-.63 3.67-.782C55.657 1.351 60.211.881 64.76.358A7.902 7.902 0 0 0 66.038 0h.917zM40.102 6.48c-.062 1.605-.137 3.226-.316 4.827-.459 4.107-.986 8.206-1.475 12.309-.42 3.533-.837 7.067-1.222 10.602a19.77 19.77 0 0 0-.011 2.149l18.025-4.036c.24.817.706 1.605.644 2.33-.229 2.91-.646 5.803-.986 8.713-.055.459-.114.917-.126 1.376 0 .392.048.787.101 1.534 2.213-6.698 4.304-13.029 6.42-19.426-.305-.055-.51-.154-.687-.117-2.867.556-5.73 1.124-8.59 1.704-1.103.229-2.194.522-3.307.687-.277.042-.802-.201-.882-.43-.266-.762-.629-1.606-.507-2.36.385-2.378 1.027-4.712 1.463-7.08.436-2.37.688-4.763 1.126-7.13.206-1.128.793-2.192.942-3.32.204-1.548.156-3.13.23-4.87-1.016.084-2.358.174-3.695.318l-7.147 2.22zm11.587 4.664l-.388 2.311c3.32-.438 6.42-.944 9.534-1.215 1.236-.108 2.112-.298 2.367-1.633.085-.44.197-.876.344-1.515l-11.857 2.052zm.387-1.672c2.236-.493 4.022-.928 5.827-1.268a46.763 46.763 0 0 1 5.06-.754c1.764-.133 2.135-.372 2.383-2.385l-12.908 1.89c-.084.577-.21 1.465-.362 2.517zm17.594 9.83c-.917.255-1.582.42-2.228.62-1.493.458-2.981.917-4.465 1.419-1.376.477-2.674 1.282-4.166.287-.262-.175-.764-.028-1.147.032-2.185.341-4.356.853-6.56.997-1.426.096-1.605.787-1.72 1.95l19.553-3.44.733-1.865zM50.72 17.468c1.288-.282 2.435-.647 3.604-.766 1.922-.197 3.864-.215 5.79-.367a1.18 1.18 0 0 0 .865-.545c.247-.58.32-1.232.518-2.064-2.653.433-5.12.873-7.601 1.217-.897.127-1.823.021-2.874.021l-.302 2.513v-.009zM67.022 1.924L52.53 3.529c.113.763.23 1.504.296 1.99 4.389-1.387 8.98-1.387 13.627-2.451l.569-1.144zM50.112 20.98c2.925-.4 5.858-.74 8.756-1.254.477-.085.931-.885 1.183-1.447.19-.42.04-.993.04-1.573-.46.527-.712 1.066-1.033 1.119-2.185.36-4.39.864-6.58.834-1.819-.025-2.52.516-2.367 2.32zm9 3.73l.066.202c.951.115 2.063-.04 2.8.422.657.422.884 1.518 1.375 2.472.862-.286 2.094-.34 2.692-.979.894-.956 1.341-2.33 2.075-3.703l-9.009 1.587zm1.822 8.657l1.922.229 1.804-4.343-2.706.624c-.355 1.22-.653 2.238-1.02 3.49zm-2.71 7.583l.438.183 2.98-5.483c-.447 0-1.19-.14-1.263.021-.761 1.731-1.45 3.51-2.155 5.279zm-7.48-14.779c.044.202.085.404.128.606l7.719-1.463c-.037-.209-.074-.415-.108-.624l-7.74 1.481zM21.653 57.449c1.506 1.71 2.949 3.315 4.37 4.95 2.082 2.39 4.194 4.756 6.173 7.228.266.335-.174 1.231-.34 2.167-1.497-.755-2.751-1.335-3.964-2.011-1.862-1.046-3.669-2.174-5.53-3.24-2.502-1.44-5.045-2.814-7.52-4.29-2.538-1.512-5.01-3.135-7.539-4.667-.857-.52-1.86-.814-2.678-1.376-.608-.421-1.027-1.12-1.53-1.696.805-.564.716-1.88 2.264-1.956 2.405-.115 4.787-.762 7.17-1.181-2.394-2.752-4.675-5.4-7-8.026-1.227-1.375-2.523-2.682-3.795-4.028a7.604 7.604 0 0 1-.879-1.062c-1.146-1.786-.733-2.621 1.3-3.155 3.018-.796 6.001-1.72 9.007-2.566 1.897-.532 3.82-.968 5.705-1.541 1.578-.482 3.098-1.147 4.676-1.633.715-.229 1.605-.44 2.23-.206.46.17.634 1.094.95 1.672 1.337 2.43 2.69 4.854 4.017 7.287 2.115 3.868 4.206 7.748 6.322 11.616.794 1.447.207 3.006-1.403 3.534C30.109 54.43 26.55 55.562 23 56.73c-.422.135-.796.42-1.348.718zm2.868-7.232l-11.024-16.51-11.264 3.375-.346.51c.688.506 1.509.917 2.078 1.54 2.178 2.408 4.207 4.955 6.431 7.317 1.752 1.86 3.807 3.458 4.375 6.122l-9.703 1.963 17.078 9.805c-.129-.674-.085-1.084-.25-1.206-.743-.537-1.582-.94-2.316-1.488a182.487 182.487 0 0 1-5.645-4.37c-.8-.647-.434-3 .458-3.332 3.245-1.204 6.49-2.394 10.128-3.726zm-4.95-10.486c.743.986 1.447 1.917 1.898 2.522l6.191-2.467-1.242-1.984-6.847 1.929zm-4.112-6.57l-.073.65c.642.43 1.45 1.357 1.899 1.208 2.169-.72 4.244-1.73 6.553-2.722-1.591-.557.053-1.099.011-1.676l-8.39 2.54zm3.231 5.251l6.71-2.235-.57-2.257-7.153 2.727c.438.777.766 1.334 1.013 1.765zm13.563 10.73l.477.687-3.036 2.848 4.293-1.215-2.43-4.387c-.393.459-.636.945-1.026 1.133-.99.477-2.089.738-3.059 1.247-.396.209-.573.835-.85 1.273.458.057.97.277 1.357.14 1.447-.512 2.853-1.142 4.274-1.727zm-2.008-4.523l-6.125 1.585 1.523 2.064 5.643-2.227c-.459-.64-.84-1.146-1.041-1.422zm-2.981-3.898c.314 1.743-1.218 1.305-2.025 1.74-.876.473-1.853.76-2.967 1.198l.802 1.004 6.389-1.543c-1.055-.507-.16-2.385-2.19-2.387l-.01-.012zM17.02 57.461l4.762 3.517.184-.31-2.956-3.95-1.99.742zm4.618-4.358l-6.923 2.582-.064.326 1.686.557c1.22-2.336 3.969-1.676 5.31-3.467l-.009.002z"/>
</g>
</svg>
)
}
const CloudsSvg = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="117" height="49" viewBox="0 0 117 49" style={{ margin: 'auto' }}>
<g fill="none" fillRule="nonzero">
<path fill="#F0FF02" d="M59.85 9.083l7.772 14.14h8.401l6.46 3.488 4.06 5.059h27.815s.731-3.287-.634-5.264c0 0-.788-1.835-2.543-2.067l-5.629-.731s-1.855-7.645-2.842-8.31c-.987-.666-3.491-2.658-6.565-2.658-3.074 0-7.204 3.837-7.204 3.837-1.482-3.327-1.799-6.699-4.446-9.98-2.648-3.282-6.99-6.37-10.542-6.37-.629-.127-6.56-1.22-10.848 2.876a11.553 11.553 0 0 0-3.254 5.98z"/>
<path fill="#0073D1" d="M.895 48.832c-1.1-1.05-1.063-2.214-.546-3.567 1.267-3.322 2.3-6.74 3.676-10.017 1.519-3.625 3.876-6.74 7.574-8.303 1.646-.695 3.684-.458 5.91-.682.2-.763.458-2.053.87-3.29 1.065-3.212.687-6.825 2.608-9.782 3.233-4.983 7.314-8.988 13.137-10.834 1.895-.6 3.774-1.299 5.712-1.706.992-.207 2.116.049 3.152.244 2.414.47 4.876.816 7.19 1.63 1.82.644 3.412 1.922 5.119 2.897 1.158.66 2.338 1.282 3.683 2.018.244-.324.5-.87.924-1.219 1.35-1.116 2.76-2.16 4.145-3.23 1.872-1.445 4.188-1.543 6.365-2.013.887-.193 1.882-.044 2.803.102.873.139.805-.31.732-.863h.611v1.002c.449-.117.783-.324.976-.244 1.574.751 3.198 1.446 4.65 2.396.766.5 1.074 1.722 1.846 2.195 1.695 1.006 2.682 2.437 3.564 4.144.644 1.258 1.687 2.226 1.873 3.815.131 1.126 1.006 2.162 1.462 3.076.897-.487 1.773-.843 2.497-1.394 2.328-1.767 5.07-1.653 7.464-.897 3.676 1.16 4.342 4.993 5.607 8.081.273.673.441 1.136 1.048 1.329.92.26 1.873.382 2.828.36 1.202.02 2.63.91 3.516 1.844.885.933 2.437 1.587 2.381 3.474-.017.558.57 2.291 2.168 2.03v.307c-.63.408-1.231 1.112-1.89 1.168-1.799.151-3.622 0-5.434.025-4.32.073-8.637.19-12.957.275-.426 0-.858-.141-1.284-.124-1.729.07-3.455.175-5.183.273-.651.039-1.3.097-1.884.141.075 1.114.078 2.011.212 2.891.117.754.243 1.278 1.443 1.114 2.513-.348 5.205-.909 7.206 1.497.056.068.285-.031.414 0 .451.142 1.03.18 1.314.488 1.973 2.104 3.543 4.439 3.733 7.477-.975 1.53-2.709 1.009-4.079 1.087-3.474.195-6.967.056-10.453.039-4.144-.022-8.289-.083-12.433-.078-3.293 0-6.582.105-9.88.112-3.004 0-6.007-.083-9.02-.068-2.504.012-5.005.156-7.506.16-1.921 0-3.842-.177-5.763-.168-3.842.022-7.684.18-11.526.166-3.396-.012-6.792-.244-10.19-.263-2.27-.022-4.544.214-6.814.192-4.156-.043-8.31-.212-12.465-.243-.273 0-.55.626-.826.963l-.28-.027zm40.109-16.465c.183-1.029.275-1.707.431-2.382.759-3.262 1.775-6.406 4.408-8.708 1.936-1.687 4.322-2.165 6.76-1.98 1.811.137 2.843-.34 2.796-2.193-.073-2.853 1.127-5.261 2.316-7.72-.212-.245-.365-.55-.612-.7-2.289-1.388-4.632-2.682-6.884-4.145-2.904-1.872-6.197-1.996-9.442-2.194-3.827-.224-7.07 1.59-10.2 3.513-3.437 2.104-5.923 5.197-8.468 8.225-.12.144-.337.203-.63.37l1 .425c-.717.975-.897 2.223-1.543 4.354-.883 2.925-1.28 5.85-1.502 8.866-.034.461-.85.866-1.506 1.487l-.293-1.306a8.669 8.669 0 0 1-1.363-.098 7.033 7.033 0 0 0-5.202.848c-2.438 1.463-4.269 3.762-5.444 6.363-1.543 3.413-2.813 6.95-4.163 10.449-.098.258.114.633.126.69 1.422-.064 2.682-.171 3.947-.171 5.008 0 10.017.046 15.024.02 3.104-.015 6.207-.188 9.31-.19 5.242 0 10.483.072 15.722.119 2.745.024 5.487.097 8.23.075 3.657-.027 7.313-.141 10.97-.185a957.22 957.22 0 0 1 10.585-.059c2.617 0 5.233.018 7.85.054 1.978.021 3.954.063 5.929.124 1.026.032 2.052.188 3.076.161 2.267-.056 4.53-.19 7.165-.31.058-.526.305-1.325.197-2.076-.346-2.423-2.437-3.17-4.239-4.188-2.48-1.388-4.976-1.117-7.557-.213-.63.222-1.475-.165-1.81-.214.223-1.685.515-2.945.513-4.205 0-1.024-.563-1.858-1.797-1.826-1.801.041-3.6.144-5.402.153-1.57 0-3.142-.104-4.715-.11-2.681 0-5.387-.029-8.076.062-3.245.107-6.485.404-9.727.487-2.465.054-4.934-.146-7.401-.18-2.558-.034-5.12 0-7.677 0-.39-1.687 1.007-1.677 1.733-1.707 1.887-.075 3.764.04 5.673-.112 3.04-.244 6.114-.034 9.174-.027h8.583c1.521 0 3.045.027 4.564 0 3.376-.083 6.752-.192 10.129-.3 1.029-.034 2.055-.1 3.284-.16-1.768-3.413-4.313-5.866-7.63-6.692-3.801-.949-7.933-1.724-11.52 1.562-.326-.51-.777-.884-.79-1.275-.094-3-1.004-5.802-2.237-8.466-.975-2.082-1.982-4.22-4.086-5.695-2.153 3.17-1.414 6.88-2.29 10.188-2.437 0-4.953-.602-6.976.134-3.398 1.236-5.12 4.317-6.007 7.823-.28 1.175-.392 2.589-2.306 3.235zm72.227-1.066a5.69 5.69 0 0 1-.385-.743c-.95-2.972-4.022-6.129-8.02-4.503-.244.098-1.002-.526-1.2-.96-1.138-2.516-1.984-5.185-3.327-7.577-.763-1.353-2.27-2.194-4.113-2.111-2.116.097-3.873.702-5.402 2.272-1.219 1.248-3.096 1.246-3.579-.383-1.287-4.376-3.588-8.113-6.757-11.414-2.058-2.142-4.569-3.169-7.333-3.452-1.587-.156-3.274.442-4.876.84-3.471.855-6.423 2.522-8.369 5.813.897 1.114 2.043 2.15 2.704 3.438 1.158 2.257 2.045 4.656 2.984 7.02.265.67.27 1.439.487 2.131.259.807.87 2.036 1.59 1.558 1.32-.88 2.567-.368 3.84-.47 1.218-.1 2.474-.444 3.644-.244 1.68.31 3.322.8 4.897 1.462.615.244.939 1.205 1.55 1.463 1.951.82 3.224 2.223 4.172 4.074.417.816 1.058 1.896 1.796 2.086 1.288.334 2.728.093 4.106.054 3.734-.105 7.47-.27 11.214-.334 3.369-.066 6.757-.02 10.377-.02z"/>
</g>
</svg>
)
}
const StarSvg = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="76" viewBox="0 0 80 76" style={{ margin: 'auto' }}>
<g fill="none" fillRule="nonzero">
<path fill="#F0FF02" d="M31.176 21.173L38.936 0l8.714 23.496 21.187 3.106-14.29 16.201 7.336 23.804-22.948-16.445L17.11 65.603l7.414-26.46L9.79 27.518"/>
<path fill="#0073D1" d="M0 51.198c1.713-3.106 5.063-3.445 7.903-4.613.682-.28 1.517-.189 2.653-.307-.387.83-.519 1.777-.951 1.941-3.168 1.208-6.397 2.26-9.605 3.363v-.384zM20.952 65.091c-.37-1.845-1.055-3.695-1.037-5.536.027-2.707.6-5.408.858-8.118.24-2.549.368-5.111.566-7.664.035-.316.095-.63.182-.935L6.694 27.674c.724-.096 1.284-.16 1.284-.17-.285-2.913 2.419-2.178 3.659-2.595 4.143-1.39 8.455-2.275 12.71-3.335.567-.142 1.181-.091 1.77-.153 4.779-.503 4.866-5.095 6.8-7.996 1.592-2.387 2.514-5.208 3.845-7.78 1.165-2.25 3.732-2.264 5.109-.166 2.819 4.305 5.686 8.558 8.521 12.836.102.157.255.335.25.498-.05 1.9 1.418 2.019 2.708 2.296 4.699 1.008 9.405 1.991 14.108 2.988.671.143 1.365.228 2.005.471 1.99.79 2.255 2.569.748 4.096-3.998 4.046-7.939 8.15-11.939 12.194-.696.703-1.58 1.222-2.312 1.777.253.269.785.567.865.958.821 3.987 1.556 7.991 2.339 11.987.455 2.364 1.154 4.703 1.379 7.088.105 1.092-.665 2.276-1.215 3.941L38.705 54.11 21.77 65.28l-.817-.189zm1.639-3.256c1.329-.762 2.896-1.554 4.35-2.516 2.783-1.837 5.643-3.6 8.192-5.719 2.244-1.856 4.683-1.322 6.556-.348 4.38 2.276 8.444 5.166 12.646 7.791 1.068.665 2.171 1.272 3.259 1.905l.455-.344-3.504-19.796c.325-.343.624-.71.892-1.099.564-.947.91-2.091 1.634-2.87 3.151-3.344 6.416-6.582 9.63-9.87.657-.683 1.267-1.4 2.134-2.362-5.14-.983-9.992-1.834-14.79-2.885-1.22-.267-2.6-.91-3.384-1.82-2.114-2.467-3.998-5.136-5.88-7.794-1.925-2.73-3.739-5.523-5.616-8.308-.6 1.229-1.074 2.253-1.593 3.252-1.536 2.937-3.6 5.718-4.498 8.838-1.013 3.515-3.511 4.778-6.349 5.688-3.013.97-6.196 1.409-9.297 2.116-2.503.57-4.974 1.193-7.632 1.82 3.452 3.605 6.612 7.146 10.041 10.406 2.503 2.39 3.928 4.931 3.3 8.486a40.53 40.53 0 0 0-.521 5.966c-.09 3.056-.025 6.107-.025 9.463zM58.593 10.717l7.978-8.956c.992 1.534 1.158 2.303-.262 3.272-1.195.817-1.846 2.399-2.822 3.573-1.137 1.365-2.337 2.73-4.334 2.653l-.56-.542zM69.993 46.192l.798-1.752c2.754 1.137 5.462 2.22 8.108 3.426.414.19.896 1.15.746 1.445-.227.442-1.153.988-1.492.838-2.72-1.227-5.37-2.592-8.16-3.957zM15.566 3.937c2.444-.501 2.556 1.499 3.35 2.776 1.072 1.722 2.198 3.413 3.301 5.113l-.416.534c-.632-.095-1.395 0-1.873-.323-1.349-.91-4.373-6.708-4.362-8.1z"/>
<path fill="#0073D1" d="M39.331 75.964c-1.804-1.352-1.975-7.837-.27-10.36 1.456 1.786 1.63 8.448.27 10.36z"/>
</g>
</svg>
)
}
const ShirtsSvg = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="153" height="57" viewBox="0 0 153 57" style={{ margin: 'auto' }}>
<g fill="none" fillRule="nonzero">
<path fill="#F0FF02" d="M90.113 12.395l20.336-9.592c7.691 14.97 14.77 13.262 21.412-.256l19.02 9.56-5.16 6.786-8.577.66-3.025 32.259h-25.79l.645-31.633-12.703 1.147-6.158-8.931z"/>
<path fill="#F0FF02" d="M137.74 51.812h-6.086l5.49-32.26z"/>
<path fill="#0073D1" d="M33.965 37.961c.505-1.85 1.156-3.555 1.375-5.301.204-1.604.426-3.494-1.295-4.537-2.301-1.394-4.7-2.621-7.094-3.889-1.458-.777-3.617.062-3.66 1.44-.065 2.16-1.542 3.143-3.245 3.701-2.18.719-3.7-.172-5.243-3.016-.354-.657-1.03-1.14-1.542-1.705-.327-.83-.283-1.592-1.85-.697-2.467 1.415-5.086 2.587-7.645 3.858-.667.33-1.345.635-2.005.947 1.187 1.702 2.264 1.187 3.479.592 2.328-1.141 4.728-2.159 7.167-3.232.37 3.368 4.447 6.223 7.531 5.776 2.73-.395 3.945-2.393 5.243-4.336.617-.925 1.19-1.144 2.193-.54 1.496.904 3.056 1.712 4.626 2.49 1.2.597 1.829 1.331 1.261 2.747-.31.91-.57 1.837-.777 2.776l-2.843-1.367c-.617 1.027-1.607 1.931-1.629 2.862-.148 5.65-.074 11.307-.074 17.367-6.168 0-11.852.03-17.536-.065-.394 0-1.11-.925-1.113-1.425 0-4.842.099-9.687.185-14.529.022-1.196.265-2.501-1.344-2.88-2.06-.49-3.498.148-4.571 2.384-.45-2.671-.814-4.84-1.234-7.26L0 31.932c.7 2.205 1.283 4.336 2.097 6.378.179.453 1.339.974 1.749.793 1.064-.472 1.964-1.32 3.084-2.128.132.348.227.71.284 1.079.015 4.78.027 9.56 0 14.335 0 2.596 1.097 3.784 3.673 3.762 1.495 0 2.994-.09 4.49-.17 4.839-.25 9.764.571 14.893-1.233V36.894l3.695 1.067zM112.389.308c.369.28.715.59 1.036.926.515.616 1.267 1.233 1.394 1.949.518 2.896 2.304 4.675 4.589 6.319 1.61 1.16 3.084 1.425 4.718.537.996-.534 2.16-1.135 2.711-2.039 1.323-2.202 2.32-4.598 3.504-7.035 4.123-.91 7.574 1.875 11.315 3.701 3.044 1.471 5.986 3.149 9.008 4.67 1.78.894 2.776 2.38 2.16 4.184a94.452 94.452 0 0 1-3.865 9.897c-.268.58-2.131.867-3.05.59-1.653-.494-3.146-1.524-4.712-2.31a9.286 9.286 0 0 0-1.182-.392c-.11 1.754-.25 3.333-.308 4.915-.086 2.428-.173 4.86-.148 7.291.034 3.482.197 6.96.247 10.443.046 3.29.16 6.593-.087 9.869-.052.7-1.505 1.81-2.35 1.85-4.66.185-9.329.111-13.998.099-5.243 0-10.504-.065-15.757-.084-1.017 0-1.656-.222-2.232-1.307-1.42-2.668-.981-5.505-1.135-8.278-.148-2.704-.087-5.421-.056-8.132.025-2.366.173-4.734.194-7.094 0-.703-.286-1.406-.33-2.118-.13-2.224-.206-4.45-.308-7.057-1.881.642-3.337 1.148-4.799 1.626-.67.235-1.355.424-2.05.564-1.657.308-1.678.26-1.506-1.234-.65-.456-1.486-.721-1.68-1.233-1.234-3.167-2.298-6.387-3.575-10.026l1.305.629.154-1.696c2.005-.994 3.784-1.888 5.576-2.758 4.376-2.125 8.765-4.23 13.132-6.377.36-.176.617-.59.903-.892l1.182.003zM96.555 22.02c.666-.433 1.36-.822 2.076-1.166.752-.308 1.61-.376 2.356-.7 2.877-1.255 5.011.074 5.06 3.146.062 3.531.18 7.06.272 10.59.157 5.922.37 11.843.429 17.768 0 1.366.644 1.505 1.662 1.542 3.562.108 7.124.308 10.686.333 6.06.055 12.12.015 18.643.015V19.121l1.573 1.37c.336-.617.617-1.114.9-1.66l6.897 3.46c.724-1.757 1.468-3.392 2.078-5.091.617-1.749 1.132-3.547 1.69-5.323a22.239 22.239 0 0 0-2.159-1.302c-1.76-.81-3.608-1.446-5.332-2.328-3.593-1.85-7.124-3.818-10.701-5.7a1.209 1.209 0 0 0-1.068.031c-.212.164-.262.676-.225 1.012.041.29.128.57.256.833-.826 1.15-1.699 1.893-1.958 2.81-.722 2.562-2.81 4.625-5.33 5.078-6.257 1.148-11.5-4.585-12.16-9.514l-19.463 9.351c1.29 3.328 2.526 6.526 3.818 9.872zM48.968 29.508c-1.304.706-2.606 1.419-3.913 2.116-1.453.777-2.868.339-3.451-1.194-.83-2.159-1.783-4.351-2.178-6.615-.17-.965.645-2.71 1.5-3.152 4.258-2.183 8.675-4.065 13.05-6.023 1.117-.5 2.283-.888 3.307-1.283.595 1.542 1.212 3.223 1.9 4.873.182.334.474.596.826.74 2.208.993 4.28.965 6.662.052 1.795-.684.87-2.081 1.566-2.985.617-.83.593-2.159.941-3.652l1.394 1.08c1.194-.114 2.079-.487 2.643-.207 3.7 1.832 7.272 3.886 10.967 5.712 3.241 1.6 2.933 2.316 2.467 6.492-.123 1.076-.54 2.119-.826 3.176-.78 2.9-3.744 3.572-6.372 1.505-.598-.468-1.379-.709-2.384-1.205.345 9.045.666 17.501.987 25.955-2.18.231-4.22.54-6.267.641-3.7.188-7.402.198-11.08.398-1.423.077-2.829.463-4.241.71H49.76c-.731-3.331-1.101-6.653-.265-10.051.243-.984-.142-2.113-.133-3.174.03-4.231.12-8.466.133-12.697 0-.416-.377-.836-.577-1.252.456-.247.98-.768 1.357-.679a2.51 2.51 0 0 1 1.49 1.108c.268.49.17 1.215.135 1.832-.216 4.286-.52 8.57-.669 12.86-.108 3.143-.022 6.291-.022 9.527l24.244-.944V47.79c-.015-2.701 0-5.406-.074-8.105-.086-3.485-.278-6.963-.34-10.445-.02-1.36 1.561-2.53 2.906-2.128 1.7.502 3.337 1.2 5.206 1.89.552-1.872 1.212-3.654 1.542-5.499.108-.598-.484-1.653-1.055-1.986-2.776-1.613-5.678-3.053-8.53-4.558l-4.605-2.44c-.287 1.29-.38 2.209-.7 3.035-.722 1.85-1.218 3.982-3.7 4.318-1.9.256-3.581.524-5.66-.4-2.193-.979-3.725-1.82-4.259-4.21-.056-.26-1.19-.571-1.65-.398-1.733.647-3.41 1.449-5.08 2.257-2.689 1.301-5.353 2.655-7.99 3.966l2.328 6.366 5.752-2.045c-.271.965-.426 1.539-.577 2.1z"/>
<path fill="#0073D1" d="M33.965 37.961l-3.701-1.067v17.848c-5.13 1.81-10.054.99-14.893 1.233-1.496.08-2.995.158-4.49.17-2.576.021-3.683-1.166-3.674-3.763.019-4.777 0-9.56 0-14.334a5.308 5.308 0 0 0-.283-1.08c-1.114.808-2.014 1.656-3.084 2.128-.41.182-1.57-.339-1.749-.792C1.283 36.268.701 34.137 0 31.932l2.353-1.816c.407 2.42.771 4.589 1.234 7.26 1.073-2.236 2.51-2.875 4.57-2.385 1.61.38 1.367 1.684 1.345 2.881-.086 4.842-.191 9.687-.185 14.529 0 .496.718 1.419 1.113 1.425 5.684.095 11.371.064 17.536.064 0-6.06-.074-11.719.074-17.366.022-.925 1.018-1.85 1.628-2.862l2.844 1.367c.207-.94.467-1.866.777-2.776.568-1.416-.062-2.159-1.261-2.748-1.567-.777-3.127-1.585-4.626-2.489-1.003-.617-1.567-.385-2.193.54-1.314 1.943-2.529 3.941-5.243 4.336-3.084.447-7.161-2.409-7.531-5.776-2.464 1.094-4.864 2.097-7.192 3.238-1.215.595-2.292 1.11-3.479-.592.66-.309 1.339-.617 2.005-.947 2.56-1.27 5.175-2.443 7.642-3.858 1.567-.895 1.523-.133 1.85.697.525.564 1.2 1.048 1.542 1.705 1.542 2.844 3.063 3.735 5.243 3.016 1.696-.558 3.18-1.542 3.245-3.7.043-1.379 2.202-2.218 3.66-1.44 2.378 1.267 4.778 2.494 7.094 3.888 1.72 1.043 1.499 2.933 1.295 4.537-.219 1.746-.87 3.439-1.375 5.301z"/>
</g>
</svg>
)
}
const WashingMachineSvg = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="66" height="72" viewBox="0 0 66 72" style={{ margin: 'auto' }}>
<g fill="none" fillRule="nonzero">
<path fill="#F0FF02" d="M3.148 2.374L35.446 17.18l-33.23 1.81M16.228 46.79c-.06 2.877 10.355.37 9.43-4.243-.444-2.194 6.873 8.54 6.873 8.54s4.108-5.94 4.441-3.448c.145 1.081 13.479 2.382 13.982.9-3.388 5.261-7.106 9.893-12.057 12.177 0 0-10.883 1.592-11.968 1.467-6.455-.743-11.397-12.623-12.529-12.62"/>
<path fill="#0073D1" d="M65.354 68.208l-.597 1.226c-2.067-2.317-1.342-5.069-1.348-7.758 0-3.849-.332-7.694-.45-11.543-.05-1.595.143-3.197.112-4.792-.04-2.014-.228-4.028-.297-6.043-.097-2.749-.134-5.497-.206-8.246-.035-1.217-.132-2.434-.128-3.65 0-.59.165-1.18.125-1.687-.2-2.427-.404-4.851-.57-6.869H2.34v50.071h9.165c1.748 0 3.496-.028 5.244-.034 4.434-.023 8.871-.023 13.309-.067 2.798-.028 5.6-.154 8.399-.167 2.1 0 4.205.133 6.307.145 1.563 0 3.127-.113 4.69-.129 4.31-.05 8.615-.104 12.92-.082.548 0 1.52.4 1.564.71.154 1.197-1.078 1.26-1.726 1.26-4.234.12-8.474.092-12.71.101H39.302c-4.515 0-9.03-.047-13.543-.022-.77 0-1.535.271-2.305.42H7.192c-1.191-.105-2.38-.262-3.571-.297-2.051-.057-2.64-.495-2.714-2.522A412.18 412.18 0 0 1 .65 56.885C.591 51.154.591 45.42.563 39.689c-.016-3.247-.047-6.494-.056-9.74 0-2.69.028-5.36 0-8.064-.028-4.6-.079-9.2-.154-13.8 0-.452-.231-.9-.353-1.347v-.946c.155-.408.271-.83.347-1.26C.453 3.305.497 2.07.56.903 1.607.74 2.423.484 3.236.484c2.158 0 4.316.17 6.47.132C14.1.541 18.49.27 22.88.257 28.39.244 33.896.43 39.4.484 42.02.509 44.64.43 47.26.377c2.77-.054 5.5-.155 8.25-.208 1.781-.029 3.567.016 5.35 0 .819 0 1.366.157.812 1.283 1.251-.457 1.742 0 1.73 1.2 0 1.315.053 2.63.115 3.944.247 4.975.538 9.952.745 14.93.106 2.56.056 5.125.087 7.688.044 3.297.092 6.597.144 9.898.087 5.428.166 10.857.288 16.285 0 .274.372.542.572.816v11.995zm-3.612-66.12c-.603-.04-1.22-.132-1.835-.122-3.515.05-7.033.154-10.548.186-3.992.031-7.986.031-11.982 0-3.096-.023-6.192-.158-9.29-.145-4.172 0-8.34.141-12.508.182-4 .038-8 0-11.995.082-.498.01-1.395.555-1.395.886-.106 2.333-.028 4.675-.022 7.014v6.869h59.747c.404-2.57-.419-5.274.41-8.013-.654-.385-.5-.41-.582-6.938z"/>
<path fill="#FFF" d="M0 6.805c.131.447.374.894.38 1.345.081 4.597.14 9.194.176 13.791.02 2.686 0 5.353 0 8.054 0 3.244.043 6.487.06 9.73.03 5.724.03 11.452.094 17.176.04 3.778.133 7.557.276 11.335.081 2.022.714 2.46 2.923 2.52 1.283.034 2.562.191 3.845.295H0V6.805z"/>
<path fill="#0073D1" d="M25.67 27.482c1.445-1.577 3.465-1.473 5.26-1.7a13.87 13.87 0 0 1 5.267.243c1.667.457 3.074 1.845 4.737 2.353 1.583.482 2.61 1.476 3.654 2.56.899.947 1.851 1.865 2.56 2.943a25.897 25.897 0 0 1 3.65 8.753c.145.77.19 1.556.13 2.337-.087 1.672.026 3.429-.457 4.987-.61 1.978-1.453 4.006-2.688 5.633-2.776 3.659-6.097 6.85-10.69 8.037-2.193.568-4.652 1.022-6.826.63a25.27 25.27 0 0 1-8.4-3.106c-2.118-1.287-4.327-2.773-5.593-5.293-.817-1.627-2.033-3.1-2.212-4.949-.131-1.387-1.137-2.583-.626-4.147.313-.9-.11-2.01-.05-3.015.09-1.578.031-3.233.535-4.681 1.204-3.47 3.03-6.665 5.81-9.071 1.418-1.227 3.317-1.893 5.03-2.767.226-.116.64.168.91.253zM37.36 42.77c.025.362-.05.75.084 1.037 1.376 2.905 6.417 4.785 9.4 3.533 2.462-1.04 2.421-1.328 1.958-3.996-.555-3.189-1.567-6.097-3.519-8.687-.379-.504-.46-1.24-.846-1.734-1.356-1.754-3.246-2.82-5.213-3.684-1.726-.754-3.519-1.48-5.354-1.83-1.32-.255-2.764.092-4.145.234-.981.1-2.003.167-2.911.504-1.128.423-2.105 1.262-3.243 1.644-2.362.753-4.041 2.479-5.207 4.365-1.45 2.343-3.152 4.731-3.08 7.79.041 1.789-.116 3.58-.084 5.363 0 .365.379.977.683 1.047 1.566.356 3.195.946 4.7.722a4.249 4.249 0 0 0 3.107-2.372c.403-.83.94-1.586 1.589-2.24.495-.507 1.21-.794 1.826-1.182.263.577.567 1.135.774 1.731.113.316-.04.77.11 1.063.329.631.651 1.555 1.197 1.764 1.798.684 5.326-1.483 5.674-3.442.275-1.498 1.074-1.905 2.5-1.63zM16.393 50.78c.677 6.498 9.575 13.528 19.369 11.292 6.748-1.546 12.964-8.832 12.266-13.13-.921.09-1.84.217-2.76.264-.987.054-2.05.272-2.949 0a28.26 28.26 0 0 1-4.552-2.012c-.627-.315-1.125-.946-1.457-1.224-1.172.994-2.108 1.669-2.904 2.482-2.29 2.353-5.452 1.596-6.432-1.17h-1.567c-.172.199-.595.653-.98 1.136-.386.482-.793 1.053-1.188 1.577a1.947 1.947 0 0 0-1.275.202c-.802.35-1.567.946-2.41 1.006-.996.085-2.02-.25-3.16-.423zM51.954 6.836c1.397-.178 2.263.412 2.321 1.594.068 1.43-1.65 2.913-2.992 2.8-1.343-.114-2.607-1.109-2.542-1.977.126-1.664 1.257-2.512 3.213-2.417z"/>
</g>
</svg>
)
}
const CashSvg = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="72" viewBox="0 0 80 72" style={{ margin: 'auto' }}>
<g fill="none" fillRule="nonzero">
<path fill="#F0FF02" d="M62.446 29.381l-3.735-9.705c.394.164-6.8 3.822-7.878 6.302-1.24 2.86.807 6.574.807 6.574l1.353.168 9.453-3.339zM75.645 72l1.324-10.316c.268.323-7.8.133-9.925 1.805-2.45 1.937-2.415 6.167-2.415 6.167l1.114.791L75.645 72zM79.64 42.974l-10.11-2.45c.358-.23-.723 7.768.704 10.063 1.647 2.648 5.866 3.077 5.866 3.077l.908-1.017 2.631-9.673zM55.773.52l-9.651 3.874c.161-.397 3.93 6.739 6.425 7.778 2.88 1.198 6.56-.907 6.56-.907l.15-1.356-3.484-9.39zM9.702 45.425L19.905 43.4c-.23.359-2.606-7.352-4.869-8.837-2.606-1.711-6.616-.323-6.616-.323l-.393 1.292 1.675 9.893zM17.186 61.69l10.235 1.86c-.345.252.272-7.794-1.291-10.008-1.795-2.548-6.035-2.732-6.035-2.732l-.845 1.072-2.064 9.809zM24.173 30.605l-2.26 10.15c-.236-.351 7.778.585 10.051-.884 2.615-1.695 2.967-5.921 2.967-5.921l-1.03-.888-9.728-2.457zM0 14.755l2.525 10.106c-.368-.213 7.216-2.967 8.585-5.298 1.582-2.687 0-6.626 0-6.626l-1.32-.322L0 14.755z"/>
<path fill="#0073D1" d="M63.702 28.487c.246 2.153-1.743 1.872-2.783 2.26-2.86 1.069-5.85 1.808-8.795 2.647-2.04.585-4.097 1.118-6.564 1.786 1.857.436 3.29.833 4.746 1.1 2.483.46 4.979.853 7.475 1.247 3.2.5 6.409.969 9.608 1.47 1.692.274 3.368.664 5.057.968 1.688.303 3.338.432 4.969.813.52.123.91.808 1.359 1.234l-.294.416 1.443-.394c-.093 1.008-.126 1.821-.252 2.622-.42 2.612-.868 5.218-1.32 7.823-.82 4.766-1.645 9.53-2.473 14.294-.094.526-.168 1.056-.259 1.582-.49 2.906-1.488 3.606-4.43 3.138-4.746-.759-9.495-1.469-14.235-2.26-3.68-.604-7.345-1.291-11.02-1.937-3.674-.646-7.322-1.205-10.977-1.873-2.173-.397-4.336-1.356-6.473-1.291-2.441.09-4.614-.82-6.942-1.004-1-.127-1.99-.316-2.967-.565.245-1.347.49-2.406.62-3.481.322-2.803.555-5.621.946-8.417.28-2.008.82-3.984 1.123-5.993.12-.788-.093-1.614-.155-2.444-.816.105-1.626.252-2.428.44-3.05.861-6.086 1.769-9.04 2.63L1.117 16.997l1.34-2.396c2.26-.626 4.788-1.34 7.32-2.027 5.66-1.544 11.332-3.045 16.982-4.624 3.058-.852 6.067-1.863 9.118-2.735 1.757-.5 3.552-.807 5.328-1.291 3.467-.969 6.916-2.008 10.37-3.019.73-.197 1.47-.54 2.209-.581.465-.026.968.394 1.753.762l.752-.681c.565 1.488 1.127 2.757 1.53 4.074.666 2.18 1.24 4.385 1.834 6.587.646 2.389 1.282 4.78 1.909 7.174.79 3.01 1.591 6.015 2.337 9.04.09.372-.145.824-.236 1.24-1.178-.407-1.672-1.165-1.75-2.467-.064-1.075-.645-2.111-.968-3.177-.3-1.007-1.017-1.01-1.766-.684-2.838 1.227-4.24 3.955-3.723 6.984.171 1.004.785 1.017 1.501.858 2.254-.5 4.498-1.03 6.745-1.546zM24.154 39.713a9.89 9.89 0 0 0-.504 1.492c-.387 2.321-.73 4.649-1.088 6.974-.261 1.698-.52 3.396-.794 5.166.568 0 1.094-.165 1.346.029 1.44 1.097 3.006 2.124 4.146 3.496.784.946.859 2.454 1.42 3.63.495 1.042.527 2.46 2.419 2.411 1.795-.048 3.613.413 5.408.72 2.002.346 3.971.882 5.983 1.124 1.792.216 3.5.788 5.285 1.023 2.137.284 4.249.746 6.377 1.098 2.324.384 4.675.646 6.977 1.117 2.302.472 3.287.3 4.52-1.378.2-.268.233-.646.407-.97.484-.832.865-1.781 1.53-2.44 2.06-2.037 4.843-1.97 7.559-2.425.397-3.09 1.46-6.221 1.078-9.292-.646-.1-1.182 0-1.443-.242a46.574 46.574 0 0 1-3.952-3.697c-1.372-1.508-2.49-3.196-2.583-5.366-.058-1.324-1.275-1.204-2.102-1.514-.361-.14-.833.032-1.217-.075-1.072-.297-2.102-.81-3.187-.968-1.856-.281-3.764-.24-5.618-.546-5.408-.894-10.797-1.918-16.201-2.848-2.238-.384-4.498-.645-6.542-.94-.384 1.163-.51 2.477-1.181 3.391-1.502 2.047-3.72 2.78-6.258 2.8-1.4 0-2.027-.427-1.856-1.841a15.42 15.42 0 0 1 1.679-.08c3.203.187 5.411-1.444 5.68-4.52l-4.547-1.431c-.452 1.45-1.291-.068-2.17-.2l.627 1.172-.86-.065-.338 5.195zM8.498 35.461c.62-.24 1.078-.598 1.46-.53 1.824.323 3.838.081 5.327 1.573.775.778 1.51 1.614 2.353 2.299.76.63 1.58 1.317 2.49 1.578.571.168 1.359-.4 1.876-.578.352-2.418.684-4.69 1.02-6.974.623.123 1.136.375 1.291.233 1.837-1.673 3.807-.646 5.715-.323 2.664.458 5.292 1.114 7.965 1.488 1.343.18 2.706.124 4.03-.164 2.906-.646 5.78-1.405 8.627-2.26 1.036-.307 2.26-.753 2.857-1.537.504-.646.23-1.889.323-2.864.087-.865.045-1.795.355-2.583 1.053-2.68 3.552-3.842 5.896-5.408l-2.806-8.976c-.662.352-1 .7-1.272.646-3.839-.668-7.426-1.876-9.854-5.185-.646-.888-1.291-1.176-2.28-.895-3.131.895-6.26 1.799-9.401 2.66a765.597 765.597 0 0 1-10.097 2.703c-1.546.404-3.135.668-4.662 1.137-2.864.878-5.695 1.86-8.543 2.796.823 3.09.898 3.8-.058 5.243a12.553 12.553 0 0 1-2.393 2.77c-1.688 1.398-2.84 1.37-4.126-.022.733 2.305 1.42 4.365 2.04 6.457.643 2.167 1.218 4.359 1.867 6.716zm69.717 7.358c-2.505-.462-4.823-.936-7.167-1.256-.304-.042-1.098.872-1.014 1.085.523 1.32.997 2.796 1.937 3.787 1.392 1.466 3.164 2.583 4.962 3.975.482-2.832.879-5.25 1.282-7.591zM57.087 8.969c-.646-2.34-1.337-4.772-1.98-7.07-2.524.684-4.784 1.207-7 1.872-.968.297-1.007 1.033-.296 1.702.71.668 1.446 1.514 2.334 1.937a29.103 29.103 0 0 0 4.633 1.543c.65.162 1.401.016 2.309.016zm15.717 60.735c.084-.061.759-.297.856-.68.387-1.538.6-3.117.868-4.682.162-.97-.404-1.395-1.24-1.453a6.196 6.196 0 0 0-6.39 4.843c-.077.358.417 1.165.756 1.24 1.508.332 3.055.461 5.15.732zM5.166 15.472l-1.937.969c.064.796.183 1.587.358 2.366.287 1.04.746 2.037 1.256 3.397 1.466-1.033 2.815-1.899 4.062-2.89 1.11-.878 1.291-2.993.516-4.559l-4.255.717zm16.421 38.954c-.287 2.448-.53 4.488-.79 6.716 2.017.365 3.767.704 5.53.968.28-.03.535-.17.713-.387-.352-1.36-.452-2.938-1.243-3.994-.913-1.21-2.447-1.97-4.21-3.303zm-4.63-13.099c-1.356-3.429-3.955-4.242-6.916-4.52-.907-.08-1.094.3-.862.988.562 1.656 1.198 3.287 1.88 5.14l5.898-1.608z"/>
<path fill="#0073D1" d="M50.662 45.28c.926.726 1.533 1.12 2.008 1.636.135.146-.036.717-.226.969a.852.852 0 0 1-.817.18c-1.902-1.4-3.752-1.045-5.605.204-.08 1.853.917 2.741 2.76 3.474 3.32 1.324 4.74 3.49 2.583 6.822-1.633-.8-1.827 1.027-2.744 1.537-.488.275-.836.807-1.246 1.22l-.72-2.095a21.665 21.665 0 0 1-2.131-1.265c-.236-.172-.223-.682-.323-1.037a3.552 3.552 0 0 1 1.065-.184c1.137.168 2.26.588 3.39.556.533-.017 1.292-.753 1.489-1.324.161-.436-.23-1.27-.63-1.666-.539-.54-1.323-.837-2.008-1.23-.733-.42-1.614-.695-2.183-1.27-1.953-1.966-.946-5.556 1.815-6.185 1.308-.298 2.083-.595 1.937-2.083-.035-.323.259-.668.394-.988 2.04.39.966 2.121 1.192 2.728zM33.578 30.198c-.7-.068-1.614-.103-2.528-.268-.268-.048-.468-.452-.7-.694.284-.246.533-.617.862-.717.988-.297 2.115-.3 2.98-.784.594-.323 1.088-1.26 1.143-1.96.032-.4-.84-1.146-1.405-1.27-1.23-.267-2.524-.222-3.787-.322a3.506 3.506 0 0 1-1.21-.252c-2.383-1.156-2.864-4.594-.727-6.244 1.075-.83 1.595-1.447.856-2.706-.14-.236-.02-.623-.02-1.017 1.937-.494 1.753 1.418 2.49 2.134.665.039 1.333-.051 1.888.162.366.246.576.667.552 1.107-.067.281-.671.5-1.075.623-1.085.323-2.26.446-3.26.91-.556.253-.87 1.03-1.337 1.615.723 1.698 2.027 2.131 3.997 2.025 3.035-.159 4.843.432 5.353 3.551.106.646.523 1.366-.798 1.614-.5.09-.762 1.57-1.117 2.419-.226.545-.426 1.104-.645 1.656l-1.512-1.582z"/>
</g>
</svg>
)
}
const FounderSvg = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="81" height="72" viewBox="0 0 81 72" style={{ margin: 'auto' }}>
<g fill="none" fillRule="nonzero">
<path fill="#F0FF02" d="M36.745 13.2c-1.874-2.05-7.284-7.4-15.408-8.224a18.32 18.32 0 0 0-7.845.728c-5.827 1.913-8.847 6.343-9.595 7.497a17.966 17.966 0 0 0-1.936 4.101c-1.81 5.57-.364 10.646.462 12.924a69.395 69.395 0 0 0 6.164 11.257 69.736 69.736 0 0 0 8.214 10.04l3.09 2.92 5.14-4.09 25-1.73 7.096 8.66s13.94-7.306 18.3-13.974c1.14-1.745 5.835-9.942 4.359-20.81-.43-3.171-1.945-14.344-11.156-19.714A21.292 21.292 0 0 0 56.757.045 20.897 20.897 0 0 0 46.17 3.88"/>
<path fill="#FFF" d="M44.618 48.145c.26 1.868.624 2.017 2.123 1.12a2.384 2.384 0 0 1 1.71-.112c1.257.376 2.742.62 3.641 1.454 1.902 1.777 4.449 3.194 4.648 6.273a.639.639 0 0 0 .095.263c-2.552 1.81-5.065 3.606-7.595 5.382-2.673 1.874-5.36 3.729-8.043 5.603-.034.023-.11 0-.135.017-.697.678-1.274 1.815-2.417 1.4-.818-.299-1.424-1.145-2.177-1.68-1.936-1.356-3.922-2.648-5.853-4.015-1.157-.818-2.224-1.765-3.378-2.591-1.093-.785-2.242-1.49-3.362-2.222-.866-.56-1.78-1.056-2.586-1.68-.263-.208-.468-.87-.333-1.141.644-1.305 1.173-2.824 2.21-3.737 1.12-.992 2.706-1.617 4.202-1.998 1.777-.46 3.665-.482 5.503-.717.283-.075.557-.183.815-.322l3.72 4.219 2.088.56c.647-.63 1.594-1.549 2.52-2.47.281-.28.528-.656.864-.866.98-.611 1.434-1.401.905-2.695h.888l-.053-.045z"/>
<path fill="#FFF" d="M39.297 52.633c-1.493-1.322-2.619-2.297-3.723-3.3-.966-.88-1.622-1.844-.454-3.205 2.345.675 4.844 1.193 7.284-.255 1.494 1.68 1.454 1.734-.112 3.362-1.148 1.168-2.174 2.45-2.995 3.398z"/>
<path fill="#0071CE" d="M15.21 7.864l.319 1.014-2.723 2.889-.535-.225c-.681 1.275-1.342 2.485-1.961 3.715-.289.55-.53 1.122-.723 1.712a97.846 97.846 0 0 0-1.098 3.945 1.698 1.698 0 0 0 0 .812c.395 1.516.358 1.56-1.522 1.334.085-.883.073-1.796.28-2.66.527-2.277.609-4.689 2.424-6.558.782-.804.997-2.134 1.7-3.042.841-1.081 1.906-1.992 2.925-2.92.163-.145.594 0 .902.023l.012-.039z"/>
<path fill="#0071CE" d="M15.182 7.903l1.134-1.008c.205.238.56.473.56.708 0 .395-.23.793-.414 1.337-.476-.41-.871-.745-1.266-1.079.014.003-.014.042-.014.042z"/>
<path fill="#FFF" d="M30.778 30.77l5.875-1.92 9.55 5.559 2.045 1.782-4.33 8.78-8.798 1.157-4.342-4.948z"/>
<path fill="#0071CE" d="M39.06 10.68c.96-1.418 1.68-2.78 2.68-3.883A22.821 22.821 0 0 1 45.5 3.55a15.781 15.781 0 0 1 5.138-2.415 18.465 18.465 0 0 1 6.57-.64c1.543.138 3.098.15 4.648.217h.109c.776 1.454 2.418.53 3.516 1.297 1.146.801 2.62 1.12 3.782 1.908a20.028 20.028 0 0 1 6.471 7.21c.522.965 1.144 1.895 1.525 2.914.336.894.428 1.886.577 2.841.096.62.144 1.245.143 1.872 0 1.515-.04 3.03-.107 4.544-.095 2.193-.14 4.393-.375 6.57-.196 1.834-.46 3.661-1.368 5.364-1.12 2.118-1.93 4.416-3.095 6.511a42.099 42.099 0 0 1-4.037 6.164 79.912 79.912 0 0 1-6.648 7.191c-1.524 1.46-3.387 2.566-5.116 3.808a580.426 580.426 0 0 1-7.166 5.076c-2.491 1.729-5.043 3.362-7.503 5.14-1.252.897-2.373 1.976-3.362 2.802l-6.034-4.443c-2.595-1.925-5.152-3.886-7.808-5.723-1.961-1.348-4.22-2.315-6.105-3.763a55.19 55.19 0 0 1-6.331-5.749c-1.824-1.916-3.281-4.177-5.057-6.14a16.154 16.154 0 0 1-3.628-6.54c-.28-.963-1.104-1.759-1.58-2.684A16.448 16.448 0 0 1 .7 29.136c.017-2.277.28-4.7-.4-6.8-.782-2.445.21-4.63.224-6.927 0-1.578 1.224-3.205 2.093-4.701a18.916 18.916 0 0 1 2.801-3.813c1.824-1.844 3.693-3.693 6.365-4.368.818-.207 1.56-.7 2.362-.995.26-.095.6.028 1.143.07a3.188 3.188 0 0 1 1.664-.736C18.69.622 20.41.703 22.132.51c2.634-.3 5.155.3 7.536 1.289 1.544.641 2.948 1.68 4.312 2.67a14.305 14.305 0 0 1 2.69 2.546c.87 1.09 1.546 2.348 2.39 3.665zm5.628 37.507H43.8c.529 1.302.075 2.084-.905 2.695-.337.21-.56.58-.863.866-.942.921-1.888 1.84-2.536 2.47l-2.084-.56-3.723-4.219c-.258.14-.532.248-.816.322-1.837.236-3.723.258-5.502.717-1.485.381-3.082 1.006-4.202 1.998-1.037.913-1.563 2.432-2.21 3.737-.135.28.07.933.333 1.14.807.636 1.72 1.121 2.586 1.681 1.12.732 2.28 1.438 3.362 2.222 1.154.826 2.221 1.773 3.381 2.591 1.93 1.368 3.922 2.66 5.85 4.015.753.527 1.358 1.373 2.176 1.681 1.144.417 1.72-.72 2.418-1.4.025-.026.101 0 .135-.018 2.684-1.863 5.37-3.717 8.043-5.603 2.521-1.776 5.043-3.572 7.595-5.381a.737.737 0 0 1-.095-.264c-.2-3.082-2.746-4.482-4.648-6.272-.891-.841-2.376-1.08-3.642-1.454a2.384 2.384 0 0 0-1.709.112c-1.499.885-1.863.736-2.124-1.121h6.256a2.09 2.09 0 0 0 .16-.616c.115-3.606.246-7.214.3-10.823.028-1.916.17-3.883-.182-5.74a13.492 13.492 0 0 0-5.769-8.848 5.062 5.062 0 0 0-1.4-.616c-1.295-.4-2.662-1.165-3.892-.997-.863.117-1.527.526-2.286-.16-.076-.07-.32-.028-.445.04-1.718.935-3.533 1.75-5.16 2.87-1.75 1.183-3.643 2.31-4.203 4.64-.152.645-.56 1.227-.717 1.872-.255.972-.603 1.98-.56 2.958.109 2.734.422 5.458.604 8.19.166 2.495.26 4.994.395 7.633l6.03-.613c-.53-1.379-.743-2.592-1.401-3.488-1.614-2.241-2.738-4.443-2.41-7.374.213-2.065.06-4.151-.45-6.163-.281-1.163.487-1.572.84-1.589 2.132-.087 3.857-.941 5.418-2.445l-.703-1.631.608-1.518c.37.56.792 1.039 1.008 1.59.84 2.144 1.76 4.203 4.085 5.184.472.166.92.394 1.333.678 1.435 1.12 3.023 1.339 4.788 1.098.4-.053.886.538 1.334.84-1.054 1.015 0 2.099.045 3.082.168 3.003-.656 5.444-2.724 7.61-.56.585-.706 1.624-.882 2.484-.123.602.022 1.26.048 1.897zM17.93 2.24c-2.947.33-5.802 1.19-8.262 2.841-4.05 2.723-6.46 6.665-7.6 11.369-.362 1.496-.981 3.208-.56 4.541.59 1.92.56 3.86.63 5.715.14 3.309.54 6.522 1.924 9.48 1.365 2.914 3.051 5.682 4.72 8.439 1.122 1.84 2.265 3.729 3.75 5.25 1.12 1.149 1.843 2.71 3.602 3.362 1.157.431 2.003 1.68 3.132 2.717 1.466-3.286 3.02-5.992 6.788-6.698 0-.297.017-.77 0-1.241a336.92 336.92 0 0 0-.193-4.104c-.148-2.743-.342-5.486-.445-8.231-.045-1.16.092-2.326.145-3.488.082-.359-.196-.774-.12-1.101.361-1.558.588-3.205 1.291-4.606 1.373-2.729 3.841-4.483 6.394-5.993 2.207-1.31 4.673-1.512 7.236-1.384 2.205.115 4.354.35 6.189 1.572 1.084.723 1.96 1.804 2.801 2.838 2.006 2.488 3.328 5.29 3.413 8.55.061 2.379.12 4.763.061 7.136-.084 3.309-.28 6.617-.426 9.943 2.74 1.608 5.385 3.336 5.75 7.04 3.058-1.855 5.602-3.838 7.589-6.402a75.297 75.297 0 0 0 4.941-7.09c2.628-4.345 5.06-8.808 5.31-14.07.041-.84.053-1.706.114-2.555.073-1.017.407-2.076.213-3.031-.18-.88.115-1.68.13-2.49a17.93 17.93 0 0 0-2.802-9.983c-1.258-2.045-2.746-3.807-4.68-5.163-3.294-2.303-7.084-3.163-10.973-3.34-3.95-.179-7.844.214-11.315 2.455-.412.28-.729.79-1.166.902-1.655.431-2.583 1.524-3.21 3.031-.2.474-.675.84-1.017 1.247a1.4 1.4 0 0 0-.317.445c-.213.746-.258 1.583-.633 2.228-.233.395-.964.706-1.451.68-.398-.022-.944-.529-1.12-.946-.404-1.037-.536-2.135-1.497-2.953-.532-.454-.56-1.48-1.1-1.961-1.121-1.003-2.441-1.802-3.67-2.696-.561-.417-1.068-1.098-1.699-1.249a42.52 42.52 0 0 0-6.09-1.059l-5.777.053zm12.848 28.523c.182.524.585 1.216.639 1.933.112 1.532 0 3.082.056 4.617.056 1.927.23 3.844 1.476 5.446 1.42 1.824 5.463 3.082 7.674 2.424 3.28-.978 5.507-3.029 6.006-6.486a8.88 8.88 0 0 0-.426-4.295c-.218-.56-1.77-.608-2.714-.885a2.079 2.079 0 0 1-.28-.045c-2.522-1.165-5.438-1.762-6.562-4.628l-5.87 1.919zm8.55 21.852c.821-.947 1.846-2.241 2.981-3.407 1.569-1.619 1.605-1.664.112-3.362-2.426 1.449-4.925.93-7.27.255-1.168 1.362-.513 2.326.454 3.205 1.095 1.029 2.23 2.004 3.723 3.326v-.017z"/>
</g>
</svg>
)
}
const SvgMap = {
'LightningSvg': LightningSvg,
'CloudsSvg': CloudsSvg,
'StarSvg': StarSvg,
'ShirtsSvg': ShirtsSvg,
'WashingMachineSvg': WashingMachineSvg,
'CashSvg': CashSvg,
'FounderSvg': FounderSvg
}
const BaseValuePropSection = ({
className,
evergreenPromoItemCount,
evergreenPromoPercent,
footer,
...props
}) => {
const valueProps = {
"header": "What makes us awesome",
"sections": [
{
"title": "Bold, Bright, Unique Styles",
"body": "Magical kids' clothes you can't find anywhere else – designed by us",
"svg": "LightningSvg"
},
{
"title": "Soft & Stretchy Everything",
"body": "Comfy clothes = happy people",
"svg": "CloudsSvg"
},
{
"title": "Next-level Details",
"body": "Itch-free tags, soft lining, minimal seams. We could go on…",
"svg": "StarSvg"
},
{
"title": "Focus on Fit",
"body": "We design single sizes 0 months to 14 years",
"svg": "ShirtsSvg"
},
{
"title": "100% Washer Friendly",
"body": "Including the sequins",
"svg": "WashingMachineSvg"
},
{
"title": `${evergreenPromoPercent}% off ${evergreenPromoItemCount}+ Items`,
"body": "Automatic savings every single day",
"svg": "CashSvg"
},
{
"title": "Female Founder",
"body": "(Trust her, she’s a mom!)",
"svg": "FounderSvg"
}
]
}
return (
<section className={className}>
<FlexCol mobile={{width: 4}} desktop={{width: 6, span: 3}}>
<H1>{valueProps.header}</H1>
</FlexCol>
<FlexCol className='flexDiv' mobile={{width: 4}} desktop={{width: 10, span: 1}}>
{valueProps.sections.map((section, i) => {
const SvgTag = SvgMap[section.svg]
return (
<FlexCol className='innerFlexDiv' mobile={{width: 4}} tablet={{width: 5}} desktop={{width: 3}} key={`value-prop-${i}`}>
<div>
<div className='image'>
<SvgTag />
</div>
<P className='textTitle'>{section.title}</P>
<P>{section.body}</P>
</div>
</FlexCol>
)
})}
</FlexCol>
</section>
)
}
const ValuePropSection = styled(BaseValuePropSection)`
${H1} {
text-align: center;
text-transform: uppercase;
@media (max-width: 958px) { font-size: 3.4rem; }
}
${H1} {
font-size: 24px;
${props => props.theme.breakpointsVerbose.aboveTablet`
font-size: 32px;
`}
margin: 0 auto;
margin-bottom: 40px;
}
${P} {
text-align: center;
max-width: 275px;
margin: 0 auto;
font-size: 16px;
}
.image {
display: flex;
margin: auto;
min-height: 76px;
text-align: center;
}
.flexDiv {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.innerFlexDiv {
margin-bottom: 60px;
/* Remove margin-bottom for last section above phone */
&:last-child {
margin-bottom: 0;
}
/* Remove margin-bottom for last 3 sections above tablet */
${props => props.theme.breakpointsVerbose.aboveTabletMax`
&:nth-last-child(-n + 3) {
margin-bottom: 0;
}
`}
}
.textTitle {
font-weight: bold;
}
`
ValuePropSection.defaultProps = {
padding: true,
constrained: true
}
ValuePropSection.propTypes = {
evergreenPromoItemCount: PropTypes.string.isRequired,
evergreenPromoPercent: PropTypes.string.isRequired
}
/** @component */
export default ValuePropSection