refactor wave

src/components/BottomWave.vue → src/components/Wave.vue

 <template>
-  <div class="wave-container">
+  <div class="wave-container dark" :class="{ bottom }">
     <div class="bg">
       <div class="bg-mask"></div>
-      <div class="wave-divider">
+      <div v-if="top" class="wave-divider">
+        <svg viewBox="0 70 500 60" preserveAspectRatio="none">
+          <rect x="0" y="0" width="500" height="500" />
+          <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" />
+        </svg>
+      </div>
+      <div v-if="bottom" class="wave-divider bottom">
         <svg viewBox="0 70 500 60" preserveAspectRatio="none">
           <rect x="0" y="0" width="500" height="500" />
           <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" />
         </svg>
       </div>
     </div>
-
     <slot></slot>
   </div>
 </template>
+<script>
+export default {
+  name: "Wave",
+  props: {
+    top: {
+      type: Boolean,
+      default: true
+    },
+    bottom: {
+      type: Boolean,
+      default: true
+    }
+  }
+};
+</script>
 <style lang="scss" scoped>
 .wave-container {
   position: relative;
   padding-top: 10rem;
+  padding-bottom: 3rem;
   z-index: 1;
 
+  &.bottom {
+    padding-bottom: 10rem;
+  }
+
   .bg {
     position: absolute;
     overflow: auto;
     background-image: url(~@/assets/images/tech-bg.jpg);
     background-attachment: fixed;
-    background-position-y: 150px;
+    background-position-y: 100px;
     background-size: cover;
     background-repeat: no-repeat;
 
@@ -42,20 +67,25 @@
       background-image: linear-gradient(
         to bottom,
         $gradient-alpha -20%,
-        $bottom-bg 90%
+        $bottom-bg 150%
       );
     }
 
     .wave-divider {
-      --divider-height: 4rem;
+      $divider-height: 4rem;
 
       position: relative;
-      height: var(--divider-height);
+      height: $divider-height;
       width: 100%;
       float: left;
       z-index: 0;
       position: relative;
 
+      &.bottom {
+        top: calc(100% - 2 *#{$divider-height});
+        transform: scale(-1);
+      }
+
       svg {
         width: 100%;
         height: 100%;

src/components/WhoWeServe.vue

@@ -65,8 +65,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .who-we-serve {
-  padding-bottom: 3rem;
-
   .container {
     max-width: 1080px;
   }

src/views/Home.vue

@@ -7,9 +7,9 @@
     <IntroVideo />
     <ProductsSummary />
     <ServicesSummary />
-    <BottomWave>
+    <Wave :bottom="false">
       <WhoWeServe />
-    </BottomWave>
+    </Wave>
   </div>
 </template>
 
@@ -19,7 +19,7 @@ import IntroVideo from "@/components/IntroVideo";
 import ServicesSummary from "@/components/ServicesSummary";
 import ProductsSummary from "@/components/ProductsSummary";
 import WhoWeServe from "@/components/WhoWeServe";
-import BottomWave from "@/components/BottomWave";
+import Wave from "@/components/Wave";
 
 export default {
   name: "Home",
@@ -28,7 +28,7 @@ export default {
     IntroVideo,
     ServicesSummary,
     ProductsSummary,
-    BottomWave,
+    Wave,
     WhoWeServe
   }
 };

src/views/WhoWeAre.vue

@@ -37,7 +37,7 @@
         </div>
       </div>
     </div>
-    <BottomWave class="values-container dark">
+    <Wave class="values-container dark">
       <h2>VALUE STATEMENTS</h2>
       <p class="section-description mx-auto px-5">
         Our values were determined through a working session that was
@@ -85,7 +85,7 @@
           </div>
         </div>
       </div>
-    </BottomWave>
+    </Wave>
     <div class="container principles-container">
       <h2>CORE PRINCIPLES</h2>
       <div class="row">
@@ -106,11 +106,11 @@
 <script>
 import PageHeader from "@/components/PageHeader";
 import QuotesLogo from "@/assets/images/icons/Quotes.svg";
-import BottomWave from "@/components/BottomWave";
+import Wave from "@/components/Wave";
 
 export default {
   name: "WhoWeAre",
-  components: { PageHeader, QuotesLogo, BottomWave },
+  components: { PageHeader, QuotesLogo, Wave },
   data: function() {
     return {
       principles: [