Feature: docs banner update (#16)

* introduced cta-doc component; updated cta component; updated cta in guide and cloud

* decreased heading tag in cta-doc

src/components/blocks/cta/cta.module.scss

@@ -2,6 +2,51 @@
   @include default-section-spacing;
 }
 
+.wrapper-light {
+  overflow: hidden;
+  position: relative;
+  padding: 1px;
+  background-color: #ece8f1;
+  box-shadow: 0px 1px 5px rgba(60, 60, 100, 0.05);
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    width: 340px;
+    height: 340px;
+    background: radial-gradient(
+      #7d64ff,
+      $color-additional-2 77%,
+      $color-additional-2
+    );
+    border-radius: 50%;
+  }
+  &:before {
+    top: 100%;
+    right: 100%;
+    transform: translate(50%, -50%);
+  }
+  &:after {
+    left: 100%;
+    bottom: 100%;
+    transform: translate(-50%, 50%);
+  }
+  .inner {
+    position: relative;
+    z-index: 1;
+    padding-top: 64.5px;
+    padding-bottom: 69.5px;
+    background-color: #fff;
+    color: $color-primary;
+  }
+  .button-wrapper {
+    margin-top: 4px;
+  }
+  .cta-button {
+    border: 0;
+  }
+}
+
 .inner {
   display: flex;
   justify-content: space-between;
@@ -55,6 +100,10 @@
   }
 }
 
+.button-wrapper {
+  position: relative;
+}
+
 .cta-button {
   @include lg-down {
     min-width: 275px;
@@ -64,3 +113,13 @@
     min-width: unset;
   }
 }
+
+.button-bg {
+  position: absolute;
+  top: 48%;
+  left: -28px;
+  transform: translateY(-50%);
+  @include sm-down {
+    left: -30px;
+  }
+}

src/components/blocks/cta/cta.view.js

@@ -1,9 +1,13 @@
 import React from 'react';
+
 import { Heading } from 'components/shared/heading';
 import { Button } from 'components/shared/button';
+import { navigate } from 'gatsby';
 
 import styles from './cta.module.scss';
 
+import ButtonBg from './svg/button-bg.inline.svg';
+
 export const CTA = ({
   title,
   description,
@@ -13,59 +17,65 @@ export const CTA = ({
   buttonTarget,
   openDrift,
   openDriftMessage,
+  themeLight,
 }) => (
   <section className={styles.wrapper}>
     <div className={'container'}>
       <div className={'row'}>
         <div className={'col-xl-10 offset-xl-1'}>
-          <div className={styles.inner}>
-            <div className={styles.content}>
-              <Heading className={styles.title} tag={'h2'}>
-                {title}
-              </Heading>
-              <p className={styles.description}>{description}</p>
-            </div>
+          <div className={themeLight && styles.wrapperLight}>
+            <div className={styles.inner}>
+              <div className={styles.content}>
+                <Heading className={styles.title} tag={'h2'}>
+                  {title}
+                </Heading>
+                <p className={styles.description}>{description}</p>
+              </div>
 
-            {openDrift ? (
-              <Button
-                className={styles.ctaButton}
-                size={'lg'}
-                theme={'gradient-primary'}
-                onClick={() => {
-                  if (typeof window.drift.api !== 'undefined') {
-                    window.drift.api.sidebar.toggle();
-                  } else {
-                    navigate('/contact');
-                  }
-                }}
-                cursor
-              >
-                {buttonText}
-              </Button>
-            ) : buttonRef ? (
-              <Button
-                className={styles.ctaButton}
-                tag={'a'}
-                href={buttonRef}
-                target={buttonTarget}
-                size={'lg'}
-                theme={'gradient-primary'}
-                cursor
-              >
-                {buttonText}
-              </Button>
-            ) : (
-              <Button
-                className={styles.ctaButton}
-                tag={'link'}
-                to={buttonURL}
-                size={'lg'}
-                theme={'gradient-primary'}
-                cursor
-              >
-                {buttonText}
-              </Button>
-            )}
+              <div className={styles.buttonWrapper}>
+                {themeLight && <ButtonBg className={styles.buttonBg} />}
+                {openDrift ? (
+                  <Button
+                    className={styles.ctaButton}
+                    size={'lg'}
+                    theme={!themeLight && 'gradient-primary'}
+                    onClick={() => {
+                      if (typeof window.drift.api !== 'undefined') {
+                        window.drift.api.sidebar.toggle();
+                      } else {
+                        navigate('/contact');
+                      }
+                    }}
+                    cursor
+                  >
+                    {buttonText}
+                  </Button>
+                ) : buttonRef ? (
+                  <Button
+                    className={styles.ctaButton}
+                    tag={'a'}
+                    href={buttonRef}
+                    target={buttonTarget}
+                    size={'lg'}
+                    theme={!themeLight && 'gradient-primary'}
+                    cursor
+                  >
+                    {buttonText}
+                  </Button>
+                ) : (
+                  <Button
+                    className={styles.ctaButton}
+                    tag={'link'}
+                    to={buttonURL}
+                    size={'lg'}
+                    theme={!themeLight && 'gradient-primary'}
+                    cursor
+                  >
+                    {buttonText}
+                  </Button>
+                )}
+              </div>
+            </div>
           </div>
         </div>
       </div>

src/components/pages/doc-welcome/cloud/cloud.module.scss

@@ -1,7 +1,7 @@
 .wrapper {
   border: 1px solid $color-additional-2;
   box-shadow: $light-block-shadow;
-  padding: 20px;
+  padding: 30px;
   @include xs-down {
     max-width: calc(100% - 40px);
   }

src/components/pages/doc-welcome/cloud/cloud.view.js

@@ -1,11 +1,16 @@
 import * as React from 'react';
-import Img from 'gatsby-image';
 import { graphql, useStaticQuery } from 'gatsby';
-import styles from './cloud.module.scss';
-import { Button } from 'components/shared/button';
+import { CtaDoc } from 'components/shared/cta-doc';
 
-export const Cloud = props => {
-  const { title, description, buttonText, href = '/cloud' } = props;
+export const Cloud = (props) => {
+  const {
+    title,
+    description,
+    isExternal,
+    btnText,
+    btnTarget,
+    btnLink = '/cloud',
+  } = props;
   const {
     file: {
       childImageSharp: { fluid },
@@ -22,23 +27,14 @@ export const Cloud = props => {
     }
   `);
   return (
-    <section className={`container ${styles.wrapper}`}>
-      <div className={`row ${styles.inner}`}>
-        <div className={`col-md-6 col-12 ${styles.hook}`}>
-          <div className={styles.imgWrapper}>
-            <Img fluid={fluid} className={styles.img} />
-          </div>
-        </div>
-        <div className={`col-md-6 col-12 ${styles.hook}`}>
-          <div className={styles.cloudText}>
-            <h3>{title}</h3>
-            <p>{description}</p>
-            <Button className={styles.button} tag={'a'} href={href} cursor>
-              {buttonText}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </section>
+    <CtaDoc
+      image={fluid}
+      title={title}
+      description={description}
+      btnText={btnText}
+      btnLink={btnLink}
+      isExternal={isExternal}
+      btnTarget={btnTarget}
+    />
   );
 };

src/components/shared/cta-doc/cta-doc--default/cta-doc--default.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Heading } from 'components/shared/heading';
+import styles from './cta-doc--default.module.scss';
+import ButtonBg from '../svg/button-bg.inline.svg';
+
+export const CtaDocDefault = ({ title, description, Button }) => {
+  return (
+    <div className={'row'}>
+      <div className={'col-xl-12'}>
+        <div className={styles.wrapperLight}>
+          <div className={styles.inner}>
+            <div className={styles.content}>
+              <Heading className={styles.title} tag={'h3'}>
+                {title}
+              </Heading>
+              <p className={styles.description}>{description}</p>
+            </div>
+
+            <div className={styles.buttonWrapper}>
+              <ButtonBg className={styles.buttonBg} />
+              <Button />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};