feat(services): services pages changes

feat(services): services pages changes

Author: andsonjosef

libs/common-docs/src/components/contact-modal/contactModal.components.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component, HostListener, OnDestroy } from '@angular/core';
 import { ModalService } from '../../services/modal.service';
 import { Subscription } from 'rxjs';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
@@ -40,6 +40,10 @@ export class ContactModalComponent implements OnDestroy {
         ],
     };
 
+    @HostListener('document:keydown.escape', ['$event']) onKeydownHandler() {
+        this.closeModal();
+    }
+
     constructor(
         private modalService: ModalService<ContactModalComponent>,
         private sendEmailServ: SendEmailService,

libs/common-docs/src/components/services_block/services-block.component.html

@@ -1,5 +1,5 @@
 <div class="flex justify-between flex-col flex-wrap lg:flex-row" *ngIf="preview">
-    <a *ngFor="let serv of servicesInfList" href="javascript:void(0)" [routerLink]="getRouteLink('services')" class="block lg:w-48% bg-grey py-7 px-12 flex justify-between flex-col-reverse md:flex-row font-bold mb-8 w-full items-center cursor-pointer md:border-2 md:border-transparent md:hover:border-pink transition-colors">
+    <a *ngFor="let serv of servicesInfList" href="javascript:void(0)" [routerLink]="serv.path" class="block lg:w-48% bg-grey py-7 px-12 flex justify-between flex-col-reverse md:flex-row font-bold mb-8 w-full items-center cursor-pointer md:border-2 md:border-transparent md:hover:border-pink transition-colors">
         <p class="text-light_title_col md:text-large block md:mr-3.5 flex items-center mt-6 md:mt-0 text-xl md:leading-44 text-center md:text-left">{{serv.title}}</p>
         <img [src]="serv.img" [alt]="serv.title + ' icon'" class="md:max-w-45% max-w-10.5" style="width: 100%; height: 100%">
     </a>
@@ -8,7 +8,7 @@
     <div
             [routerLink]="serv.path"
             *ngFor="let serv of servicesInfList; index as i"
-            class="bg-grey lg:py-14 py-7 lg:px-14 px-7 flex justify-between mb-8 w-full items-center flex-col-reverse lg:h-420"
+            class="bg-grey lg:py-14 py-7 lg:px-14 px-7 flex justify-between mb-8 w-full items-center flex-col-reverse lg:h-420 md:border-2 md:border-transparent md:hover:border-pink transition-colors"
             [ngClass]="{'md:flex-row-reverse': i%2, 'md:flex-row': !(i%2), 'cursor-pointer': serv.path}"
     >
         <div class="md:w-45%">

libs/common-docs/src/components/services_block/services.model.ts

@@ -3,7 +3,7 @@ export const servicesList = [
         title: 'Design',
         description: 'Designing websites and applications that look good is not enough. Let your users experience human-centric solutions with intuitive navigation, high accessibility, and a custom UI that appeals.',
         img: 'assets/img/bg-img/services_img/services_1.svg',
-        path: 'design'
+        path: '/services/design'
     },
     {
         title: 'Software Engineering',
@@ -27,12 +27,12 @@ export const servicesList = [
         title: 'Support & Maintenance',
         description: 'With the comprehensive support in simplifying and optimizing your ecosystems, you’ll shift smoothly from reactive to preemptive engagement models to deliver superior customer experiences.',
         img: 'assets/img/bg-img/services_img/services_5.svg',
-        path: 'support-&-Maintenance'
+        path: '/services/support-&-Maintenance'
     },
     {
         title: 'Product Ownership & Project Management',
         description: 'We’ll accomplish your team with the first-class product owner who will prioritize the backlog for engineers and take care of customer satisfaction by creating user stories. With the help of the project manager, we’ll keep the project requirements clear and up-to-date, so you get exactly the solution you need.',
         img: 'assets/img/bg-img/services_img/services_6.svg',
-        path: 'product-ownership-and-project-management'
+        path: '/services/product-ownership-and-project-management'
     }
 ];

libs/route-pages/services-page/src/components/traits-cards/traits-cards.component.html

@@ -1,7 +1,8 @@
 <ng-container *ngIf="traitCard">
-  <a [href]="traitCard.url" target="_blank" [ngClass]="{'cursor-default': !traitCard.url}">
+  <a [href]="traitCard.url" target="_blank"
+    [ngClass]="{'cursor-default': !traitCard.url, 'pointer-events-none': !traitCard.url}">
     <div class="h-full bg-grey p-4 flex justify-start gap-6  w-full flex-col items-center"
-      [ngClass]="{ 'lg:flex-row lg:p-12' : !verticalCard && !smallCard, ' lg:items-start' : smallCard, 'lg:gap-8 mb-8' : verticalCard }">
+      [ngClass]="{ 'lg:flex-row lg:p-12' : !verticalCard && !smallCard, ' lg:items-start' : smallCard, 'lg:gap-8 mb-8' : verticalCard,  'md:border-2 md:border-transparent md:hover:border-pink transition-colors' : traitCard.url }">
       <img [src]="traitCard.img" [alt]="traitCard.title + ' icon'">
       <div class="flex flex-col justify-start"
         [ngClass]="{ 'items-center justify-center md:text-center' : verticalCard, 'md:text-left': !verticalCard || smallCard }">

libs/route-pages/services-page/src/pages/design/design.component.ts

@@ -205,12 +205,12 @@ export class DesignComponent {
   traitsCard: ITraitsCard[] = [
     {
       title: 'Ahead of design trends',
-      description: `The digital design industry is constantly evolving, and Valor’s design team monitors dynamics and keeps up to the pace. Being passionate about UX and UI, they take courses and participate in dedicated conferences. So when you partner up with Valor, you have the biggest fans of design working for your product and your audience. Visit a post-graduation <a href="https://valor-software.com/articles/designing-aggregator-app-from-a-to-z-part-1" target="_blank"><b><u>case study</u></b></a> of one of the designers to learn more.`,
+      description: `The digital design industry is constantly evolving, and Valor’s design team monitors dynamics and keeps up to the pace. Being passionate about UX and UI, they take courses and participate in dedicated conferences. So when you partner up with Valor, you have the biggest fans of design working for your product and your audience. Visit a post-graduation <a class="pointer-events-auto" href="https://valor-software.com/articles/designing-aggregator-app-from-a-to-z-part-1" target="_blank"><b><u>case study</u></b></a> of one of the designers to learn more.`,
       img: 'assets/img/bg-img/services_img/design/traits/design_trends.png'
     },
     {
       title: 'Mature delivery process',
-      description: `We strive to make our collaboration with the clients transparent and predictable. So we have a particular flow for every stage when we iterate with you on team syncs, give progress updates, and make demos. This way, you always know where your project is now, what's coming next, and control the result. Learn more about the process of building solutions from scratch from the <a href="https://valor-software.com/clients/startups" target="_blank"><b><u>Startups dedicated page</u></b></a>.`,
+      description: `We strive to make our collaboration with the clients transparent and predictable. So we have a particular flow for every stage when we iterate with you on team syncs, give progress updates, and make demos. This way, you always know where your project is now, what's coming next, and control the result. Learn more about the process of building solutions from scratch from the <a class="pointer-events-auto" href="https://valor-software.com/clients/startups" target="_blank"><b><u>Startups dedicated page</u></b></a>.`,
       img: 'assets/img/bg-img/services_img/design/traits/delivery_process.png'
     },
     {

libs/route-pages/services-page/src/pages/devops/devops.component.ts

@@ -221,12 +221,12 @@ export class DevOpsComponent {
     },
     {
       title: 'Strategy & Innovation',
-      description: `Valor’s culture of personal growth and self-improvement drives engineers to constantly sharpen their skills and master <a href="/articles/medusa-the-only-commercial-available-saas-platform-for-federated-applications" target="_blank"><b><u>innovative tools and technologies</u></b></a>. We’ll provide you with a forward-looking DevOps solution that will not just optimize your today's processes but will enable your consistent growth and competitive advantage.`,
+      description: `Valor’s culture of personal growth and self-improvement drives engineers to constantly sharpen their skills and master <a class="pointer-events-auto" href="/articles/medusa-the-only-commercial-available-saas-platform-for-federated-applications" target="_blank"><b><u>innovative tools and technologies</u></b></a>. We’ll provide you with a forward-looking DevOps solution that will not just optimize your today's processes but will enable your consistent growth and competitive advantage.`,
       img: 'assets/img/bg-img/services_img/devops/traits/strategy_innovation.png'
     },
     {
       title: 'Full-cycle Service',
-      description: 'We go beyond a standard set of requirements and specifications – to us partnership is about being a trusted software consultant that can address clients’ needs at every stage of their journey. So rather than implementing a particular task, we deploy, <a href="/services/support-&-Maintenance" target="_blank"><b><u>support, and maintain</u></b></a> your project in a reliable environment powered by DevOps.',
+      description: 'We go beyond a standard set of requirements and specifications – to us partnership is about being a trusted software consultant that can address clients’ needs at every stage of their journey. So rather than implementing a particular task, we deploy, <a class="pointer-events-auto" href="/services/support-&-Maintenance" target="_blank"><b><u>support, and maintain</u></b></a> your project in a reliable environment powered by DevOps.',
       img: 'assets/img/bg-img/services_img/devops/traits/full_cycle.png'
     }
   ];

libs/route-pages/services-page/src/pages/product-owner-and-product-management/product-owner-and-product-management.component.ts

@@ -68,7 +68,7 @@ export class ProductOwnershipAndProjectManagementComponent {
     },
     {
       title: 'Improved sprint velocity',
-      description: `PO oversees sprints, monitors the amount of value delivered, and suggests improvements to the process. On the other hand, the product owner shields the team from business influences and requirements engineering. Learn more about the benefits the PO role brings to the project <a href="/articles/the-4-biggest-lessons-we-learned-while-building-a-startup-product-as-an-outsource-company" target="_blank"><b><u>from the blog</b></u></a>.`,
+      description: `PO oversees sprints, monitors the amount of value delivered, and suggests improvements to the process. On the other hand, the product owner shields the team from business influences and requirements engineering. Learn more about the benefits the PO role brings to the project <a class="pointer-events-auto" href="/articles/the-4-biggest-lessons-we-learned-while-building-a-startup-product-as-an-outsource-company" target="_blank"><b><u>from the blog</b></u></a>.`,
       img: 'assets/img/bg-img/services_img/product-ownership-and-project-management/po-benefits/improved_sprint.png'
     }
   ];
@@ -109,7 +109,7 @@ export class ProductOwnershipAndProjectManagementComponent {
   traitsCard: ITraitsCard[] = [
     {
       title: 'Retention & stability',
-      description: `Valor Software not just cares about clients’ satisfaction but fosters a friendly and discussion-oriented environment for employees. This makes the company a place where experts tend to work in the long run. So, you can obtain true knowledge-keepers for your project. To learn more about the company values and employment conditions, visit <a href="/careers" target="_blank"><b><u>the employees-focused page</u></b></a>.`,
+      description: `Valor Software not just cares about clients’ satisfaction but fosters a friendly and discussion-oriented environment for employees. This makes the company a place where experts tend to work in the long run. So, you can obtain true knowledge-keepers for your project. To learn more about the company values and employment conditions, visit <a class="pointer-events-auto" href="/careers" target="_blank"><b><u>the employees-focused page</u></b></a>.`,
       img: 'assets/img/bg-img/services_img/product-ownership-and-project-management/traits/retention_stability.png'
     },
     {
@@ -119,7 +119,7 @@ export class ProductOwnershipAndProjectManagementComponent {
     },
     {
       title: 'Agility',
-      description: 'Valor’s clients are located globally, so we make it easy for them to communicate with the team and keep track of the project changes no matter what time zone they are in. This agility is important because it allows us to go beyond initial requirements and build products that capture the market. Learn more about the benefits of Agile for your business from <a href="/articles/benefits-of-agile-to-business-and-team" target="_blank"><b><u>the dedicated article on our blog.</u></b></a>',
+      description: 'Valor’s clients are located globally, so we make it easy for them to communicate with the team and keep track of the project changes no matter what time zone they are in. This agility is important because it allows us to go beyond initial requirements and build products that capture the market. Learn more about the benefits of Agile for your business from <a class="pointer-events-auto" href="/articles/benefits-of-agile-to-business-and-team" target="_blank"><b><u>the dedicated article on our blog.</u></b></a>',
       img: 'assets/img/bg-img/services_img/product-ownership-and-project-management/traits/agility.png'
     }
   ];

libs/route-pages/services-page/src/pages/quality-assurance/quality-assurance.component.ts

@@ -100,17 +100,17 @@ export class QualityAssuranceComponent {
   traitsCards: ITraitsCard[] = [
     {
       title: 'The culture of quality',
-      description: 'When it comes to <a href="/services/software-engineering" target="_blank"><b><u>the development of a software product</u></b></a>, the faster you get feedback from users, the better you can iterate and adjust with minimum loss. We strive to embed quality control in every stage of the development cycle and reduce the loop for getting users’ feedback. In this way, you deliver more regularly and cost-effectively to a more loyal audience.',
+      description: 'When it comes to <a class="pointer-events-auto" href="/services/software-engineering" target="_blank"><b><u>the development of a software product</u></b></a>, the faster you get feedback from users, the better you can iterate and adjust with minimum loss. We strive to embed quality control in every stage of the development cycle and reduce the loop for getting users’ feedback. In this way, you deliver more regularly and cost-effectively to a more loyal audience.',
       img: 'assets/img/bg-img/services_img/quality-assurance/traits/quality-culture.png'
     },
     {
       title: 'Innovation',
-      description: 'We believe that staying ahead of the curve in terms of tools and technologies is the only way to progress and build solutions that can serve clients not just today but tomorrow. We constantly monitor the latest industry trends and apply  <a href="/articles/announcing-strategic-partnership-with-zack-jackson-the-module-federation-inventor" target="_blank"><b><u>edge technologies</u></b></a> that help optimize workflows and use automation to the fullest. Find more about automation and the cloud on the <a href="/services/devops" target="_blank"><b><u>DevOps page</u></b></a>.',
+      description: 'We believe that staying ahead of the curve in terms of tools and technologies is the only way to progress and build solutions that can serve clients not just today but tomorrow. We constantly monitor the latest industry trends and apply  <a class="pointer-events-auto" href="/articles/announcing-strategic-partnership-with-zack-jackson-the-module-federation-inventor" target="_blank"><b><u>edge technologies</u></b></a> that help optimize workflows and use automation to the fullest. Find more about automation and the cloud on the <a class="pointer-events-auto" href="/services/devops" target="_blank"><b><u>DevOps page</u></b></a>.',
       img: 'assets/img/bg-img/services_img/quality-assurance/traits/innovation.png'
     },
     {
       title: 'Agility',
-      description: 'Valor’s quality assurance experts follow the principles of Agile and have regular syncs, updates with the client, reviews, and retrospectives. Even though our QA strategy is measured, we are ready to adjust it to the fast-paced business environment and address new market requirements for your solution with prompt reprioritizing. <a href="/services/product-ownership-and-project-management" target="_blank"><b><u>Managers</u></b></a> will help adapt priorities and balance the load between team members.',
+      description: 'Valor’s quality assurance experts follow the principles of Agile and have regular syncs, updates with the client, reviews, and retrospectives. Even though our QA strategy is measured, we are ready to adjust it to the fast-paced business environment and address new market requirements for your solution with prompt reprioritizing. <a class="pointer-events-auto" href="/services/product-ownership-and-project-management" target="_blank"><b><u>Managers</u></b></a> will help adapt priorities and balance the load between team members.',
       img: 'assets/img/bg-img/services_img/quality-assurance/traits/agility.png'
     },
 

libs/route-pages/services-page/src/pages/software-engineering/software-engineering.component.ts

@@ -52,17 +52,17 @@ export class SoftwareEngineeringComponent {
     traitsCards: ITraitsCard[] = [
         {
             title: 'Purpose',
-            description: 'We don’t just build software for the sake of building software. We want to bring ideas to life. We are passionate about the quality and human experiences of every product we interact with, and our company’s mission is to deliver solutions that help humanity in some aspect. Learn more on this topic from <a href="/clients/non-profit" target="_blank"><b><u>the page focused on projects for non-profit organizations.</u></b></a>',
+            description: 'We don’t just build software for the sake of building software. We want to bring ideas to life. We are passionate about the quality and human experiences of every product we interact with, and our company’s mission is to deliver solutions that help humanity in some aspect. Learn more on this topic from <a class="pointer-events-auto" href="/clients/non-profit" target="_blank"><b><u>the page focused on projects for non-profit organizations.</u></b></a>',
             img: 'assets/img/bg-img/services_img/software_engineering/traits/purpose.png'
         },
         {
             title: 'Contribution',
-            description: 'We know technology, and we’re believers in open-source as a movement. Our belief goes beyond a mission statement and is visible in <a href="https://github.com/orgs/valor-software/repositories" target="_blank"><b><u>the multitude of projects we contribute to</u></b></a> (both our own and those created by others in the community). We are also financially giving back through our sponsorships on the open collective.',
+            description: 'We know technology, and we’re believers in open-source as a movement. Our belief goes beyond a mission statement and is visible in <a class="pointer-events-auto" href="https://github.com/orgs/valor-software/repositories" target="_blank"><b><u>the multitude of projects we contribute to</u></b></a> (both our own and those created by others in the community). We are also financially giving back through our sponsorships on the open collective.',
             img: 'assets/img/bg-img/services_img/software_engineering/traits/contribution.png'
         },
         {
             title: 'Commitment',
-            description: 'The vast majority of <a href="/projects" target="_blank"><b><u>our clients</u></b></a> are referrals. We know what the partnership means, and our commitment to trust and transparency has led to our growth.',
+            description: 'The vast majority of <a class="pointer-events-auto" href="/projects" target="_blank"><b><u>our clients</u></b></a> are referrals. We know what the partnership means, and our commitment to trust and transparency has led to our growth.',
             img: 'assets/img/bg-img/services_img/software_engineering/traits/commitment.png'
         },