From 18c61e4cf60218c0b8f60fa6753ff4bce3f77570 Mon Sep 17 00:00:00 2001
From: Clara <76918665+ClaraLpresta@users.noreply.github.com>
Date: Fri, 30 Aug 2024 10:32:13 +0200
Subject: [PATCH] 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 | 7 ++-
.../assets/images/prestashop-google-logo.svg | 5 +-
.../src/assets/scss/abstracts/_variables.scss | 5 +-
_dev/apps/ui/src/assets/scss/app.scss | 2 -
_dev/apps/ui/src/assets/scss/base/_color.scss | 12 +++++
.../apps/ui/src/assets/scss/base/_common.scss | 49 ++++++++++++++-----
.../ui/src/assets/scss/base/_typography.scss | 7 ++-
.../scss/components/_landingpagecontent.scss | 24 ---------
.../scss/components/_landingpagefooter.scss | 5 --
.../scss/components/_landingpageheader.scss | 10 ++--
.../src/assets/scss/pages/_landingpage.scss | 25 ++++++----
.../landing-page/landing-page-content.vue | 19 ++++---
.../landing-page/landing-page-footer.vue | 8 +--
.../landing-page/landing-page-header.vue | 36 +++++++-------
_dev/apps/ui/src/views/landing-page.vue | 27 +++++-----
.../translations/en/ui.json | 15 +++---
16 files changed, 144 insertions(+), 112 deletions(-)
delete mode 100644 _dev/apps/ui/src/assets/scss/components/_landingpagecontent.scss
delete mode 100644 _dev/apps/ui/src/assets/scss/components/_landingpagefooter.scss
diff --git a/_dev/apps/ui/src/App.vue b/_dev/apps/ui/src/App.vue
index c4f958800c..85aa382226 100644
--- a/_dev/apps/ui/src/App.vue
+++ b/_dev/apps/ui/src/App.vue
@@ -57,16 +57,19 @@
\ No newline at end of file
+
diff --git a/_dev/apps/ui/src/assets/scss/abstracts/_variables.scss b/_dev/apps/ui/src/assets/scss/abstracts/_variables.scss
index ce6b64d594..52402214b0 100644
--- a/_dev/apps/ui/src/assets/scss/abstracts/_variables.scss
+++ b/_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;
diff --git a/_dev/apps/ui/src/assets/scss/app.scss b/_dev/apps/ui/src/assets/scss/app.scss
index c1fbab8904..6f6b1c70ae 100644
--- a/_dev/apps/ui/src/assets/scss/app.scss
+++ b/_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";
diff --git a/_dev/apps/ui/src/assets/scss/base/_color.scss b/_dev/apps/ui/src/assets/scss/base/_color.scss
index e85d0a249b..2c0b9e4685 100644
--- a/_dev/apps/ui/src/assets/scss/base/_color.scss
+++ b/_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;
}
diff --git a/_dev/apps/ui/src/assets/scss/base/_common.scss b/_dev/apps/ui/src/assets/scss/base/_common.scss
index 1157a4d44c..508740c4d7 100644
--- a/_dev/apps/ui/src/assets/scss/base/_common.scss
+++ b/_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;
+}
\ No newline at end of file
diff --git a/_dev/apps/ui/src/assets/scss/base/_typography.scss b/_dev/apps/ui/src/assets/scss/base/_typography.scss
index 0796600ce3..5afd419361 100644
--- a/_dev/apps/ui/src/assets/scss/base/_typography.scss
+++ b/_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;
+}
\ No newline at end of file
diff --git a/_dev/apps/ui/src/assets/scss/components/_landingpagecontent.scss b/_dev/apps/ui/src/assets/scss/components/_landingpagecontent.scss
deleted file mode 100644
index a9228137c2..0000000000
--- a/_dev/apps/ui/src/assets/scss/components/_landingpagecontent.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.ps_gs-landingpage-content {
- & + & {
- margin-top: rem(16);
-
- @include media-breakpoint-up(md) {
- margin-top: rem(50);
- }
- }
-
- &__title {
- font-size: rem(24);
- line-height: rem(32);
- font-weight: 700;
- }
-
- &__text {
- font-size: rem(14);
- }
-
- &__muted {
- font-size: rem(12);
- line-height: 1.4em;
- }
-}
diff --git a/_dev/apps/ui/src/assets/scss/components/_landingpagefooter.scss b/_dev/apps/ui/src/assets/scss/components/_landingpagefooter.scss
deleted file mode 100644
index 51ea70fa62..0000000000
--- a/_dev/apps/ui/src/assets/scss/components/_landingpagefooter.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.ps_gs-landingpage-footer {
- &__text {
- font-size: rem(14);
- }
-}
\ No newline at end of file
diff --git a/_dev/apps/ui/src/assets/scss/components/_landingpageheader.scss b/_dev/apps/ui/src/assets/scss/components/_landingpageheader.scss
index 49542f0f0e..291805a006 100644
--- a/_dev/apps/ui/src/assets/scss/components/_landingpageheader.scss
+++ b/_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 {
diff --git a/_dev/apps/ui/src/assets/scss/pages/_landingpage.scss b/_dev/apps/ui/src/assets/scss/pages/_landingpage.scss
index 31972d22fc..e9c8623887 100644
--- a/_dev/apps/ui/src/assets/scss/pages/_landingpage.scss
+++ b/_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);
}
}
diff --git a/_dev/apps/ui/src/components/landing-page/landing-page-content.vue b/_dev/apps/ui/src/components/landing-page/landing-page-content.vue
index 539b609346..0aa27f12b8 100644
--- a/_dev/apps/ui/src/components/landing-page/landing-page-content.vue
+++ b/_dev/apps/ui/src/components/landing-page/landing-page-content.vue
@@ -1,20 +1,22 @@
-