Added OasisFeatures.vue and OasisHeader.vue

2026-05-19 03:35:02 +00:00 · 2021-04-03 10:44:32 +02:00
parent 377c471a6c
commit 4f667f7a94
8 changed files with 586 additions and 48 deletions
@@ -0,0 +1,65 @@
+@import '@assets/vuefilemanager/_mixins';
+@import '@assets/oasis/_variables';
+
+.text-center {
+  text-align: center;
+}
+
+.main-title {
+  @include font-size(62);
+  font-weight: 900;
+  line-height: 1.1;
+  margin-bottom: 16px;
+}
+
+.sub-title {
+  @include font-size(25);
+  font-weight: 600;
+}
+
+.sub-title-sm {
+  @include font-size(23);
+  font-weight: 600;
+  line-height: 1.6;
+}
+
+.theme-button {
+  display: inline-block;
+  @include font-size(22);
+  background: $gradient-theme;
+  border-radius: 50px;
+  color: white;
+  padding: 18px 42px;
+  font-weight: 700;
+  box-shadow: 0 8px 24px -12px #800DF2;
+  @include transition(150ms);
+
+  &:hover {
+    @include transform(scale(1.03));
+  }
+
+  &:active {
+    @include transform(scale(0.97));
+  }
+}
+
+.base-button {
+  padding: 16px 30px;
+  box-shadow: 0 8px 24px -12px #800DF250;
+  border-radius: 50px;
+  @include font-size(17);
+  @include transition(150ms);
+  background: white;
+  display: inline-block;
+  font-weight: 800;
+  color: $theme;
+
+  &:hover {
+    background: $theme;
+    color: white;
+  }
+
+  &:active {
+    @include transform(scale(0.97));
+  }
+}
@@ -0,0 +1,184 @@
+@import '@assets/vuefilemanager/_mixins';
+@import '@assets/oasis/_variables';
+
+.container {
+  width: 960px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.oasis-header {
+  padding-top: 45px;
+  background: linear-gradient(180deg, rgba(149, 189, 230, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
+}
+
+.oasis-features {
+  background: $theme-bg-dark;
+
+  .title-wrapper {
+    margin-bottom: 90px;
+  }
+
+  .main-title {
+    color: white;
+  }
+
+  .sub-title-sm {
+    color: $text-dark-subtitle;
+  }
+
+  .features-box {
+    margin-bottom: -175px;
+  }
+
+  .cta {
+    top: 240px;
+    position: relative;
+  }
+}
+
+.navigation {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+
+  .log-in, .logo {
+    width: 235px;
+  }
+
+  .links {
+    display: block;
+
+    li {
+      display: inline-block;
+
+      a {
+        @include font-size(17);
+        padding: 9px 30px;
+        color: $text-primary;
+        font-weight: 800;
+        @include transition;
+        border-radius: 25px;
+
+        &:hover {
+          background: white;
+          box-shadow: 0 6px 20px -10px rgba($theme, 0.35);
+        }
+      }
+    }
+  }
+
+  .logo img {
+    width: 100%;
+  }
+
+  .log-in {
+    text-align: right;
+  }
+}
+
+.header {
+  display: block;
+  text-align: center;
+
+  .log-in {
+    display: block;
+
+    a {
+      @include transition(150ms);
+      font-weight: 700;
+      text-decoration: underline;
+
+      &:hover {
+        color: $theme;
+      }
+    }
+  }
+}
+
+.features-box {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 60px;
+
+  .box {
+    background: $theme-bg-light;
+    box-shadow: 0 22px 34px -20px #232142;
+    border-radius: 12px;
+    text-align: center;
+    padding: 45px 25px;
+    display: block;
+
+    .box-title {
+      color: white;
+      margin-top: 30px;
+      margin-bottom: 25px;
+      @include font-size(32);
+    }
+
+    .box-description {
+      color: $text-dark-secondary;
+      @include font-size(19);
+      line-height: 1.6;
+      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;
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,5 @@
+@media only screen and (min-width: 1440px) {
+  .container {
+    width: 1700px;
+  }
+}
@@ -0,0 +1,14 @@
+$text-primary: #312E5C;
+$text-secondary: #545E71;
+
+$text-dark-secondary: #BFBCE6;
+$text-dark-subtitle: #9995CD;
+
+$gradient-theme: linear-gradient(135deg, rgba(97,126,231,1) 0%, rgba(201,37,240,1) 100%);
+
+$theme-bg-dark: #312E5C;
+$theme-bg-light: #383469;
+
+$theme: #AE5FEC;
+$cyan: #19BCE0;
+$pink: #E40DF2;