diff --git a/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.css b/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.css index 3c2103b8..22c27fbf 100644 --- a/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.css +++ b/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.css @@ -82,6 +82,45 @@ color: #0b1528; } +.procure-steps-cta { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + width: 100%; + margin-top: 32px; + text-align: center; +} + +.procure-steps-cta__button { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 48px; + padding: 12px 28px; + border-radius: 6px; + background: #2d58a7; + color: #ffffff; + font-weight: 600; + font-size: 16px; + line-height: 24px; + letter-spacing: 0.5px; + text-decoration: none; + transition: background-color 0.2s ease, color 0.2s ease; +} + +.procure-steps-cta__button:hover { + background: #18b5d9; + color: #ffffff; +} + +@media (min-width: 1024px) { + .procure-steps-cta { + margin-top: 48px; + gap: 24px; + } +} + .procure-step-connector { display: none; width: 56px; diff --git a/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.html b/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.html index 137f9f15..62533802 100644 --- a/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.html +++ b/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.html @@ -34,5 +34,11 @@

} } + +
+ + {{ 'LANDINGPAGE.customers.procureSteps._ctaButton' | translate }} + +
diff --git a/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.ts b/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.ts index 8f894883..add0b1dc 100644 --- a/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.ts +++ b/src/app/pages/landing-pages/customers/landing-customers-procure-steps/landing-customers-procure-steps.component.ts @@ -1,4 +1,4 @@ -import { Component } from "@angular/core"; +import { Component, input } from "@angular/core"; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { faBagShopping, faHandshake, faMagnifyingGlass, faUser } from '@fortawesome/pro-solid-svg-icons'; import { TranslateModule } from '@ngx-translate/core'; @@ -17,6 +17,8 @@ type ProcureStep = { styleUrl: "./landing-customers-procure-steps.component.css" }) export class LandingCustomersProcureStepsComponent { + url = input.required(); + steps: ProcureStep[] = [ { key: 'step1', icon: faUser }, { key: 'step2', icon: faMagnifyingGlass }, diff --git a/src/app/pages/landing-pages/customers/landing-page-customers.component.html b/src/app/pages/landing-pages/customers/landing-page-customers.component.html index 65c60249..4643be9c 100644 --- a/src/app/pages/landing-pages/customers/landing-page-customers.component.html +++ b/src/app/pages/landing-pages/customers/landing-page-customers.component.html @@ -3,6 +3,6 @@ - + diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 7370816a..a6a3ca09 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -531,7 +531,8 @@ "step4": { "_title": "Engage providers and complete procurement" } - } + }, + "_ctaButton": "Start your onboarding journey" }, "buyOptions": { "_title": "Choose how you buy", diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json index 7370816a..a6a3ca09 100644 --- a/src/assets/i18n/es.json +++ b/src/assets/i18n/es.json @@ -531,7 +531,8 @@ "step4": { "_title": "Engage providers and complete procurement" } - } + }, + "_ctaButton": "Start your onboarding journey" }, "buyOptions": { "_title": "Choose how you buy",