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 @@