Emktg 3491 redesign landing page (#1806)

* Make type of segment method on project root

* fix typescript error on product filter

* refacto of modules update

* refacto of modules update

* module version changed

* fix alignment elements

* fix alignment elements

* fix alignment elements

* new UI of link

* New UI of landing page

_dev/apps/ui/src/App.vue

@@ -57,16 +57,19 @@
       <AlertModuleUpdate
         v-if="modulePsEventbusNeedUpgrade"
         module-name="ps_eventbus"
-        :class-alert="currentlyConfigurationPage ? 'container' : undefined"
+        :class-alert="
+          currentlyConfigurationPage ? 'container' :
+          currentlyOnLandingPage ? 'container-md' : undefined"
       />
       <router-view />
       <div
-        class="ps_gs-landingpage-content__muted text-muted bg-transparent mt-4"
+        class="mt-4 container-md"
         v-if="currentlyOnLandingPage"
       >
         <VueShowdown
           :markdown="$t('landingPage.footer.explanation')"
           :extensions="['extended-link']"
+          class="text-justify-center"
         />
       </div>
       <div

_dev/apps/ui/src/assets/scss/abstracts/_variables.scss

@@ -58,6 +58,8 @@ $light-blue-500: #C8D7E4;
 $light-blue-700: #BBCDDD;
 $light-blue-900: #A7BED1;
 
+$purple-700: #7B4FAC;
+
 $off-white: #FBFEFF;
 
 $primary: $primary-800;
@@ -69,8 +71,7 @@ $warning: $yellow;
 $primary-lighten: $light-blue-050;
 $text-muted: $primary-600;
 
-$link-color: $blue;
-$link-hover-color: $blue-700;
+$link-color: $primary-800;
 
 $nav-pills-link-active-bg: transparent;
 

_dev/apps/ui/src/assets/scss/app.scss

@@ -82,8 +82,6 @@
   @import "components/onboardingcard";
   @import "components/google-issues";
   @import "components/landingpageheader";
-  @import "components/landingpagecontent";
-  @import "components/landingpagefooter";
   @import "components/glass";
   @import "components/badge";
   @import "components/breadcrumb";

_dev/apps/ui/src/assets/scss/base/_color.scss

@@ -42,6 +42,18 @@
   background-color: $ocean-blue-500;
 }
 
+.bg-green-50 {
+  background-color: $green-50;
+}
+
+.bg-red-50 {
+  background-color: $red-50;
+}
+
+.bg-amber-100 {
+  background-color: $amber-100;
+}
+
 .border-450 {
   border-color: $gray-450 !important;
 }

_dev/apps/ui/src/assets/scss/base/_common.scss

@@ -1,16 +1,34 @@
-a[target="_blank"]:not(.external_link-no_icon) {
-
-  &:not(.btn) {
-    text-decoration: underline;
-
-    &::after {
-      content: "\e895"; // "launch" icon
-      font-family: 'Material Icons';
-      -webkit-font-feature-settings: 'liga';
-      display: inline-block;
-      vertical-align: middle;
-      margin-left: 0.18em;
-      text-decoration: none;
+a {
+  text-decoration-color: $primary-500 !important;
+  text-decoration-thickness: auto;
+  text-underline-offset: 2px;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(.4,0,.2,1);
+  transition-duration: .15s;
+
+  &:hover {
+    text-underline-offset: 5px;
+    text-decoration-color: $primary-800 !important;
+  }
+
+  &:visited {
+    color: $purple-700;
+  }
+
+  &[target="_blank"]:not(.external_link-no_icon) {
+
+    &:not(.btn) {
+      text-decoration: underline;
+
+      &::after {
+        content: "\e895"; // "launch" icon
+        font-family: 'Material Icons';
+        -webkit-font-feature-settings: 'liga';
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: 0.18em;
+        text-decoration: none;
+      }
     }
   }
 }
@@ -153,3 +171,8 @@ a.without-hover {
   font-weight: 900!important;
 }
 
+.container-md {
+  max-width: 718px;
+  margin-left: auto;
+  margin-right: auto;
+}

_dev/apps/ui/src/assets/scss/base/_typography.scss

@@ -7,7 +7,7 @@
   font-family: $prestafont-font-family;
 }
 
-h2 {
+h2, h3 {
   font-weight: 600;
 }
 
@@ -110,3 +110,8 @@ h2 {
 .line-height-13 {
   line-height: 1.3;
 }
+
+.text-justify-center {
+  text-align: justify;
+  text-align-last: center;
+}

_dev/apps/ui/src/assets/scss/components/_landingpageheader.scss

@@ -1,8 +1,10 @@
 .ps_gs-landingpage-header {
-  &__text {
-    font-size: rem(14);
-    font-weight: 600;
-    line-height: rem(22.5);
+  &__logo {
+    height: rem(160);
+
+    img {
+      width: rem(230);
+    }
   }
 
   &__benefits {

_dev/apps/ui/src/assets/scss/pages/_landingpage.scss

@@ -6,18 +6,25 @@
   &#{$root}--small-padding {
     padding: rem(16);
   }
+
+  .ps_gs-landingpage-content {
+    margin-bottom: rem(40);
 
-  @include media-breakpoint-up(md) {
-    padding: rem(32);
-
-    .ps_gs-landingpage-content__figure {
-      width: 30%;
+    &__figure {
+      padding: rem(24);
+      height: max-content;
+
+      @include media-breakpoint-down(md) {
+        width: max-content;
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: rem(24);
+      }
     }
+
   }
 
-  &-content + hr {
-    @include media-breakpoint-up(md) {
-      margin-top: rem(50) !important;
-    }
+  @include media-breakpoint-up(md) {
+    padding: rem(40) rem(64);
   }
 }