Find the right plan for your site

HTML:

          
            <!-- Hero Section -->
            <div class="position-relative u-gradient-half-primary-v1">
              <div class="container u-space-4">
                <div class="w-md-80 w-lg-60 text-center mx-auto">
                  <div class="mb-6">
                    <h1 class="text-white">Find the <span class="font-weight-bold">right plan</span> for your site</h1>
                  </div>
                </div>
              </div>

              <!-- SVG Background Shapes - Top Left -->
              <figure class="w-75 w-sm-50 w-lg-30 position-absolute-top-left-0 z-index-minus-1">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 603.8 550.5" style="enable-background:new 0 0 603.8 550.5;" xml:space="preserve">
                  <path class="u-fill-white" opacity=".025" d="M0,276.4l278,257.4c25.3,23.5,65.3,21.9,88.8-3.4l220.4-238c23.5-25.3,21.9-65.3-3.4-88.8L363.8,0H0V276.4z"/>
                </svg>
              </figure>
              <!-- End SVG Background Shapes - Top Left -->

              <!-- SVG Background Shapes - Bottom Right -->
              <figure class="w-50 w-sm-35 w-lg-25 position-absolute-bottom-right-0 z-index-minus-1">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 440.8 727.4" style="enable-background:new 0 0 440.8 727.4;" xml:space="preserve">
                  <path class="u-fill-white" opacity=".1" d="M440.8,123.1l-115-106.5c-25.3-23.5-65.3-21.9-88.8,3.4L16.7,258c-23.5,25.3-21.9,65.3,3.4,88.8l395.7,366.5c7.4,6.8,16,11.5,25,14.1V123.1z"/>
                </svg>
              </figure>
              <!-- End SVG Background Shapes - Bottom Right -->

              <!-- SVG Background -->
              <figure class="position-absolute-bottom-0">
                <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="140px" viewBox="20 -20 300 100">
                  <path class="u-fill-white" opacity="0.4" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
              c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" />
                  <path class="u-fill-white" opacity="0.4" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
              c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" />
                  <path class="u-fill-white" opacity="0" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
              H42.401L43.415,98.342z" />
                  <path class="u-fill-white" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
              c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" />
                </svg>
              </figure>
              <!-- End SVG Background Section -->
            </div>
            <!-- End Hero Section -->