- homepage illustrations part 1

resources/js/Oasis/Homepage/Components/OasisFeatures.vue

@@ -32,6 +32,8 @@
         <router-link :to="{name: 'SignUp'}" class="base-button theme-color cta">
             Vyzkouset OasisDrive
         </router-link>
+
+        <img src="/oasis/wave-background.svg" alt="oasis wave background" class="wave-background">
     </div>
 </template>
 
@@ -96,6 +98,133 @@
     @import '@assets/oasis/_homepage';
     @import '@assets/oasis/_responsive';
 
+    .oasis-features {
+        background: $theme-bg-dark;
+        padding-top: 85px;
+        position: relative;
+
+        .title-wrapper {
+            margin-bottom: 90px;
+        }
+
+        .main-title-sm {
+            color: white;
+            max-width: 690px;
+            margin: 0 auto;
+        }
+
+        .sub-title-sm {
+            margin: 0 auto;
+            color: $text-dark-subtitle;
+        }
+
+        .features-box {
+            margin-bottom: -230px;
+        }
+
+        .cta {
+            top: 300px;
+            position: relative;
+        }
+        
+        .wave-background {
+            transform: translateY(100%);
+            position: absolute;
+            width: 100%;
+            z-index: 0;
+            bottom: 3px;
+            left: 0;
+            right: 0;
+        }
+    }
+
+    .features-box {
+        grid-template-columns: 1fr 1fr 1fr;
+        position: relative;
+        display: grid;
+        z-index: 1;
+        gap: 60px;
+
+        .box {
+            background: $theme-bg-light;
+            box-shadow: 0 22px 34px -20px #232142;
+            border-radius: 12px;
+            text-align: center;
+            padding: 40px 25px 45px;
+            display: block;
+
+            .box-title {
+                color: white;
+                margin-top: 22px;
+                margin-bottom: 25px;
+                @include font-size(32);
+            }
+
+            .box-description {
+                color: $text-dark-secondary;
+                @include font-size(19);
+                line-height: 1.55;
+                margin-bottom: 25px;
+            }
+
+            .box-more-info {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+
+                .icon {
+                    margin-left: 5px;
+
+                    polyline {
+                        color: $theme;
+                        @include transition(150ms);
+                    }
+                }
+
+                span {
+                    @include font-size(17);
+                    color: $theme;
+                    font-weight: 700;
+                    @include transition(150ms);
+                }
+
+                &:hover {
+                    span, polyline {
+                        color: lighten($theme, 10%);
+                    }
+                }
+            }
+
+            &:nth-child(1) {
+
+                .box-icon {
+                    rect, path {
+                        color: $theme;
+                    }
+                }
+            }
+
+            &:nth-child(2) {
+
+                .box-icon {
+                    line, polyline, path {
+                        color: $cyan;
+                    }
+                }
+            }
+
+            &:nth-child(3) {
+
+                .box-icon {
+                    path {
+                        color: $pink;
+                    }
+                }
+            }
+        }
+    }
+
     @media only screen and (max-width: 960px) {
         .features-box {
             grid-template-columns: 1fr;