From c97dd2ad0e2df55b6ea35436fd560c1efe8f6303 Mon Sep 17 00:00:00 2001
From: SvetlanaMuravlova <svetlana.muravlova@valor-software.com>
Date: Fri, 17 Jun 2022 12:54:17 +0300
Subject: [PATCH 1/4] feat(links): updated links with opportunity to open link
 in next tabs

---
 .../components/popover/popover.component.html | 40 +++++-----
 .../services-block.component.html             |  4 +-
 .../services-block.component.ts               |  4 +-
 .../src/services/articlesRoute.service.ts     | 22 ++++--
 libs/portfolio/src/projectsRoute.service.ts   | 11 ++-
 .../blog-portfolio/src/blog.component.html    |  8 +-
 .../blog-portfolio/src/blog.component.ts      |  4 +-
 .../src/general-page.component.html           | 74 ++++++++++++-------
 .../src/genral-page.component.ts              |  8 +-
 .../blog-portfolio/src/project.component.html | 23 +++---
 .../blog-portfolio/src/project.component.ts   |  4 +-
 .../src/projects-block.component.html         |  8 +-
 .../src/projects-block.component.ts           |  4 +-
 .../src/services/route.service.ts             | 26 ++++---
 .../home-page/src/main-page.component.html    | 14 ++--
 .../home-page/src/main-page.component.ts      |  2 +-
 .../src/services-page.component.html          |  2 +-
 17 files changed, 159 insertions(+), 99 deletions(-)

diff --git a/libs/common-docs/src/components/popover/popover.component.html b/libs/common-docs/src/components/popover/popover.component.html
index 1024ba926..cd737c4c3 100644
--- a/libs/common-docs/src/components/popover/popover.component.html
+++ b/libs/common-docs/src/components/popover/popover.component.html
@@ -2,16 +2,18 @@
     <div class="popover pt-10 px-10 z-20" [class.popover_show]="show">
         <div class="arrow"></div>
         <div class="flex justify-between flex-wrap">
-            <div class="w-45% cursor-pointer text-light_font_col mb-12" *ngFor="let item of popover_str" changeSrcOnHover [defaultSrc]="item.icon" [activeSrc]="item.activeIcon" [routerLink]="item.route" (click)="changeShow(false)">
-                <div class="flex mb-2.5">
-                    <div class="flex items-center">
-                        <img [src]="item.icon">
-                        <h3 class="ml-2.5">{{item.title}}</h3>
+            <div class="w-45% cursor-pointer text-light_font_col mb-12" *ngFor="let item of popover_str" changeSrcOnHover [defaultSrc]="item.icon" [activeSrc]="item.activeIcon" (click)="changeShow(false)">
+                <a href="javaScript:void(0)" [routerLink]="item.route">
+                    <div class="flex mb-2.5">
+                        <div class="flex items-center">
+                            <img [src]="item.icon">
+                            <h3 class="ml-2.5">{{item.title}}</h3>
+                        </div>
+                        <div *ngIf="!item.route" class="bg-yellow_bg_col rounded-2xl text-dark_font_col text-xs ml-5 self-center px-1.5" >
+                            Coming soon
+                        </div>
                     </div>
-                    <div *ngIf="!item.route" class="bg-yellow_bg_col rounded-2xl text-dark_font_col text-xs ml-5 self-center px-1.5" >
-                        Coming soon
-                    </div>
-                </div>
+                </a>
                 <div>
                     <p class="text-grey_font_col text-sm">{{item.description}}</p>
                 </div>
@@ -23,16 +25,18 @@ <h3 class="ml-2.5">{{item.title}}</h3>
 
 <!--ADAPTIVE MENU-->
 <div class="adaptive-popover" [class.show]="show">
-    <div class="" *ngFor="let item of popover_str; index as i" [routerLink]="item.route" (click)="changeShow(false)">
-        <div class="flex" [class.mb-7]="i !== popover_str.length-1">
-            <div class="flex items-center">
-                <img [src]="item.icon">
-                <h3 class="ml-2.5 text-xl">{{item.title}}</h3>
-            </div>
-            <div *ngIf="!item.route" class="bg-yellow_bg_col rounded-2xl px-2 text-dark_font_col text-xs ml-5 self-center">
-                Coming soon
+    <div class="" *ngFor="let item of popover_str; index as i" (click)="changeShow(false)">
+        <a href="javaScript:void(0)" [routerLink]="item.route">
+            <div class="flex" [class.mb-7]="i !== popover_str.length-1">
+                <div class="flex items-center">
+                    <img [src]="item.icon">
+                    <h3 class="ml-2.5 text-xl">{{item.title}}</h3>
+                </div>
+                <div *ngIf="!item.route" class="bg-yellow_bg_col rounded-2xl px-2 text-dark_font_col text-xs ml-5 self-center">
+                    Coming soon
+                </div>
             </div>
-        </div>
+        </a>
     </div>
 </div>
 
diff --git a/libs/common-docs/src/components/services_block/services-block.component.html b/libs/common-docs/src/components/services_block/services-block.component.html
index 9f4894d3f..5423deeb8 100644
--- a/libs/common-docs/src/components/services_block/services-block.component.html
+++ b/libs/common-docs/src/components/services_block/services-block.component.html
@@ -1,8 +1,8 @@
 <div class="flex justify-between flex-col flex-wrap lg:flex-row" *ngIf="preview">
-    <div *ngFor="let serv of servicesInfList" class="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" (click)="routeLink('services')">
+    <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">
         <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">
-    </div>
+    </a>
 </div>
 <ng-container *ngIf="!preview">
     <div
diff --git a/libs/common-docs/src/components/services_block/services-block.component.ts b/libs/common-docs/src/components/services_block/services-block.component.ts
index 78380165c..45cb1ae38 100644
--- a/libs/common-docs/src/components/services_block/services-block.component.ts
+++ b/libs/common-docs/src/components/services_block/services-block.component.ts
@@ -15,7 +15,7 @@ export class ServicesBlockComponent {
         private router: Router
     ) {}
 
-    routeLink(link: string) {
-        this.router.navigate([`/${link}`]);
+    getRouteLink(link: string) {
+        return [`/${link}`];
     }
 }
\ No newline at end of file
diff --git a/libs/common-docs/src/services/articlesRoute.service.ts b/libs/common-docs/src/services/articlesRoute.service.ts
index 01196eeb0..b2ca90ff3 100644
--- a/libs/common-docs/src/services/articlesRoute.service.ts
+++ b/libs/common-docs/src/services/articlesRoute.service.ts
@@ -9,13 +9,23 @@ export class ArticlesRouteService {
     ){}
 
     route(title: string) {
+        this.router.navigate(['blog', this.getRefactoredLink(title)]);
+    }
+
+    getRouteLink(title: string): string {
+        return this.getRefactoredLink(title);
+    }
+
+    getRefactoredLink(title: string): string {
         let link = title;
-        while(link.match(' '|| ':' || '–' || '—')) {
-            link = link.replace(' ','_');
-            link = link.replace(':','');
-            link = link.replace('–','_');
-            link = link.replace('—','_');
+        while (link.match(' ' || ':' || '–' || '—' || '&')) {
+            link = link.replace(' ', '_');
+            link = link.replace(':', '');
+            link = link.replace('–', '_');
+            link = link.replace('—', '_');
+            link = link.replace('&', '_');
         }
-        this.router.navigate(['blog', link]);
+
+        return link;
     }
 }
diff --git a/libs/portfolio/src/projectsRoute.service.ts b/libs/portfolio/src/projectsRoute.service.ts
index 2a334e590..35c26d2e1 100644
--- a/libs/portfolio/src/projectsRoute.service.ts
+++ b/libs/portfolio/src/projectsRoute.service.ts
@@ -9,6 +9,14 @@ export class ProjectsRouteService {
     ){}
 
     route(title: string) {
+        this.router.navigate(['portfolio', this.getRefactoredLink(title)]);
+    }
+
+    getRouteLink(title: string): string {
+        return this.getRefactoredLink(title);
+    }
+
+    getRefactoredLink(title: string): string {
         let link = title;
         while(link.match(' '|| ':' || '–' || '—' || '&')) {
             link = link.replace(' ','_');
@@ -17,6 +25,7 @@ export class ProjectsRouteService {
             link = link.replace('—','_');
             link = link.replace('&','_');
         }
-        this.router.navigate(['portfolio', link]);
+
+        return link;
     }
 }
diff --git a/libs/route-pages/blog-portfolio/src/blog.component.html b/libs/route-pages/blog-portfolio/src/blog.component.html
index 7cbfb5af0..6f9d371ff 100644
--- a/libs/route-pages/blog-portfolio/src/blog.component.html
+++ b/libs/route-pages/blog-portfolio/src/blog.component.html
@@ -54,12 +54,16 @@ <h3 class="text-placeholder_col text-24 font-bold mb-6">Language</h3>
         <div class="w-full flex flex-wrap justify-between">
             <ng-container *ngIf="!showAll && checkLength()">
                 <ng-container *ngFor="let art of sortArticles | slice:0:8">
-                    <blog-portfolio-item class="w-full lg:w-45% cursor-pointer" [article]="art" (click)="route(art.title)"></blog-portfolio-item>
+                    <a href="javascript:void(0)" [routerLink]="getRouteLink(art.title)" class="w-full lg:w-45% cursor-pointer">
+                        <blog-portfolio-item [article]="art"></blog-portfolio-item>
+                    </a>
                 </ng-container>
             </ng-container>
             <ng-container *ngIf="showAll || !checkLength()">
                 <ng-container *ngFor="let art of sortArticles">
-                    <blog-portfolio-item class="w-full lg:w-45% cursor-pointer" [article]="art" (click)="route(art.title)"></blog-portfolio-item>
+                    <a href="javascript:void(0)" [routerLink]="getRouteLink(art.title)" class="w-full lg:w-45% cursor-pointer">
+                        <blog-portfolio-item [article]="art"></blog-portfolio-item>
+                    </a>
                 </ng-container>
             </ng-container>
         </div>
diff --git a/libs/route-pages/blog-portfolio/src/blog.component.ts b/libs/route-pages/blog-portfolio/src/blog.component.ts
index b201d60c5..b0a971213 100644
--- a/libs/route-pages/blog-portfolio/src/blog.component.ts
+++ b/libs/route-pages/blog-portfolio/src/blog.component.ts
@@ -100,8 +100,8 @@ export class BlogComponent implements OnDestroy {
         this.activeIndex = [lang];
     }
 
-    route(title: string) {
-        this.routeArticle.route(title);
+    getRouteLink(link: string): any {
+        return this.routeArticle.getRouteLink(link);
     }
 
     checkLength(): boolean {
diff --git a/libs/route-pages/blog-portfolio/src/general-page.component.html b/libs/route-pages/blog-portfolio/src/general-page.component.html
index 436d941f1..21416d9f5 100644
--- a/libs/route-pages/blog-portfolio/src/general-page.component.html
+++ b/libs/route-pages/blog-portfolio/src/general-page.component.html
@@ -12,16 +12,23 @@ <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 m
                         <ng-template #blogPageDescription>{{activeArticle?.seoDescription | customSlice: 300}}</ng-template>
                     </p>
                     <ng-container *ngIf="!isBlogPage(); else blogPageButton">
-                        <button class="btn-pink w-full md:w-auto flex justify-center" (click)="route(activeProject?.name)">
-                            Visit this project<img src="assets/img/icons/arrow.svg" class="ml-2" alt="">
+                        <button class="btn-pink w-full md:w-auto flex justify-center">
+                            <ng-container *ngIf="activeProject && activeProject.name">
+                                <a href="javascript:void(0)" [routerLink]="[getRouteLink(activeProject.name)]" class="flex justify-center">
+                                    Visit this project<img src="assets/img/icons/arrow.svg" class="ml-2" alt="">
+                                </a>
+                            </ng-container>
                         </button>
                     </ng-container>
                     <ng-template #blogPageButton>
-                        <button class="btn-pink w-full md:w-auto flex justify-center" (click)="route(activeArticle?.title)">
-                            Check this article<img src="assets/img/icons/arrow.svg" class="ml-2" alt="">
+                        <button class="btn-pink w-full md:w-auto flex justify-center">
+                            <ng-container *ngIf="activeArticle && activeArticle.title">
+                                <a href="javascript:void(0)" [routerLink]="[getRouteLink(activeArticle.title)]" class="flex justify-center">
+                                    Check this article<img src="assets/img/icons/arrow.svg" class="ml-2" alt="">
+                                </a>
+                            </ng-container>
                         </button>
                     </ng-template>
-
                 </div>
                 <div class="hidden lg:block ml-6">
                     <ng-container *ngIf="!isBlogPage(); else blogPageImage">
@@ -38,21 +45,26 @@ <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 m
             <div class="hidden lg:flex w-full justify-between" style="max-height: 100%;">
                 <ng-container *ngIf="!isBlogPage(); else blogPageArticlesList">
                     <ng-container *ngFor="let project of firstProjects">
-                        <blog-portfolio-item class="w-full lg:max-w-380 lg:w-31% cursor-pointer smaller-project-item"
-                            *ngIf="project?.name !== activeProject?.name"
-                            [project]="project"
-                            (click)="route(project?.name)"
-                        ></blog-portfolio-item>
+                        <ng-container *ngIf="project && project.name">
+                            <a href="javascript:void(0)" [routerLink]="[getRouteLink(project.name)]" class="block w-full lg:max-w-380 lg:w-31% cursor-pointer smaller-project-item">
+                                <blog-portfolio-item
+                                     *ngIf="project?.name !== activeProject?.name"
+                                     [project]="project"
+                                ></blog-portfolio-item>
+                            </a>
+                        </ng-container>
                     </ng-container>
                 </ng-container>
                 <ng-template #blogPageArticlesList>
                     <ng-container *ngFor="let article of firstArticles">
-                        <blog-portfolio-item
-                                class="lg:max-w-380 lg:w-31% cursor-pointer smaller-article-item"
-                                *ngIf="article?.title !== activeArticle?.title"
-                                [article]="article"
-                                (click)="route(article?.title)"
-                        ></blog-portfolio-item>
+                        <ng-container *ngIf="article && article.title">
+                            <a href="javascript:void(0)" [routerLink]="[getRouteLink(article.title)]" class="lg:max-w-380 lg:w-31% cursor-pointer smaller-article-item">
+                                <blog-portfolio-item
+                                    *ngIf="article?.title !== activeArticle?.title"
+                                    [article]="article"
+                                ></blog-portfolio-item>
+                            </a>
+                        </ng-container>
                     </ng-container>
                 </ng-template>
             </div>
@@ -64,22 +76,28 @@ <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 m
                 >
                     <ng-container *ngIf="isBlogPage()">
                         <ng-template swiperSlide *ngFor="let article of firstArticles">
-                            <blog-portfolio-item
-                                    class="w-full lg:max-w-380 lg:w-31% cursor-pointer smaller-article-item"
-                                    *ngIf="article?.title !== activeArticle?.title"
-                                    [article]="article"
-                                    (click)="route(article?.title)"
-                            ></blog-portfolio-item>
+                            <ng-container *ngIf="article && article.title">
+                                <a href="javascript:void(0)" [routerLink]="[getRouteLink(article.title)]" class="w-full lg:max-w-380 lg:w-31% cursor-pointer smaller-article-item">
+                                    <blog-portfolio-item
+                                            class="w-full lg:max-w-380 lg:w-31% cursor-pointer smaller-article-item"
+                                            *ngIf="article?.title !== activeArticle?.title"
+                                            [article]="article"
+                                    ></blog-portfolio-item>
+                                </a>
+                            </ng-container>
                         </ng-template>
                     </ng-container>
                     <ng-container *ngIf="!isBlogPage()">
                         <ng-template swiperSlide *ngFor="let project of firstProjects">
-                            <blog-portfolio-item
-                                    class="w-full lg:max-w-380 lg:w-31% cursor-pointer smaller-project-item"
-                                                 *ngIf="project?.name !== activeProject?.name"
-                                                 [project]="project"
-                                                 (click)="route(project?.name)"
-                            ></blog-portfolio-item>
+                            <ng-container *ngIf="project && project.name">
+                                <a href="javascript:void(0)" [routerLink]="[getRouteLink(project.name)]" class="w-full lg:max-w-380 lg:w-31% cursor-pointer smaller-article-item">
+                                    <blog-portfolio-item
+                                            class="w-full lg:max-w-380 lg:w-31% cursor-pointer smaller-project-item"
+                                            *ngIf="project?.name !== activeProject?.name"
+                                            [project]="project"
+                                    ></blog-portfolio-item>
+                                </a>
+                            </ng-container>
                         </ng-template>
                     </ng-container>
                 </swiper>
diff --git a/libs/route-pages/blog-portfolio/src/genral-page.component.ts b/libs/route-pages/blog-portfolio/src/genral-page.component.ts
index bc45c4067..bdcefea13 100644
--- a/libs/route-pages/blog-portfolio/src/genral-page.component.ts
+++ b/libs/route-pages/blog-portfolio/src/genral-page.component.ts
@@ -81,12 +81,8 @@ export class GeneralPageComponent implements OnDestroy{
         return value.slice(0,4);
     }
 
-    route(link?: string) {
-        if (!link) {
-            return;
-        }
-
-        this.routeServ.route(link, this.isBlogPage());
+    getRouteLink(link: string): any {
+        return this.routeServ.getRouteLink(link);
     }
 
     filterFirstItems() {
diff --git a/libs/route-pages/blog-portfolio/src/project.component.html b/libs/route-pages/blog-portfolio/src/project.component.html
index 107af5b93..5eb5c2ff6 100644
--- a/libs/route-pages/blog-portfolio/src/project.component.html
+++ b/libs/route-pages/blog-portfolio/src/project.component.html
@@ -130,17 +130,22 @@ <h1 class="main-title">Aspects</h1>
         <h1 class="main-title">Next Project</h1>
         <div class="container">
             <div class="w-full max-w-80% mx-auto">
-                <div class="mb-10 zoom-img-scale cursor-pointer" (click)="route(nextProject.name)">
-                    <img [src]="nextProject.previewImg" [alt]="nextProject.name+' image'" class="w-full h-full object-cover">
-                </div>
+                <a class="mb-10 zoom-img-scale cursor-pointer" href="javascript:void(0)" [routerLink]="['/portfolio', getRouteLink(nextProject.name)]">
+                    <div>
+                        <img [src]="nextProject.previewImg" [alt]="nextProject.name+' image'" class="w-full h-full object-cover">
+                    </div>
+                </a>
                 <div class="flex flex-col">
-                    <div class="mb-12 cursor-pointer" (click)="route(nextProject.name)">
-                        <p *ngIf="nextProject.sortServices.includes('web')" class="text-header_font_col text-sm md:text-20">Website</p>
-                        <div class="flex">
-                            <p class="text-light_title_col font-bold text-24 lg:text-56 mr-4">{{nextProject.name}}</p>
-                            <img src="assets/img/icons/arrow.svg" class="ml-2 w-35" alt="">
+                    <a class="mb-12 cursor-pointer" href="javascript:void(0)" [routerLink]="['/portfolio', getRouteLink(nextProject.name)]">
+                        <div>
+                            <p *ngIf="nextProject.sortServices.includes('web')" class="text-header_font_col text-sm md:text-20">Website</p>
+                            <div class="flex">
+                                <p class="text-light_title_col font-bold text-24 lg:text-56 mr-4">{{nextProject.name}}</p>
+                                <img src="assets/img/icons/arrow.svg" class="ml-2 w-35" alt="">
+                            </div>
                         </div>
-                    </div>
+                    </a>
+
                     <button class="btn-pink w-full md:w-auto flex items-center self-end">
                         <a class="flex justify-center items-center mx-auto" [routerLink]="'/portfolio'">Visit all projects<img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
                     </button>
diff --git a/libs/route-pages/blog-portfolio/src/project.component.ts b/libs/route-pages/blog-portfolio/src/project.component.ts
index 6e7073c82..cf52f32cd 100644
--- a/libs/route-pages/blog-portfolio/src/project.component.ts
+++ b/libs/route-pages/blog-portfolio/src/project.component.ts
@@ -84,8 +84,8 @@ export class ProjectComponent implements OnDestroy{
         });
     }
 
-    route(link: string) {
-        this.projectRoute.route(link, false);
+    getRouteLink(link: string): any {
+        return this.projectRoute.getRouteLink(link);
     }
 
     getRespSrc(link: string): string {
diff --git a/libs/route-pages/blog-portfolio/src/projects-block.component.html b/libs/route-pages/blog-portfolio/src/projects-block.component.html
index 82945e8bf..b267e2342 100644
--- a/libs/route-pages/blog-portfolio/src/projects-block.component.html
+++ b/libs/route-pages/blog-portfolio/src/projects-block.component.html
@@ -24,12 +24,16 @@
         <div class="w-full flex flex-wrap justify-between">
             <ng-container *ngIf="!showAll && checkLength()">
                 <ng-container *ngFor="let art of sortProjects | slice:0:8">
-                    <blog-portfolio-item class="w-full lg:w-45% cursor-pointer" [project]="art" (click)="route(art.name)"></blog-portfolio-item>
+                    <a href="javascript:void(0)" [routerLink]="getRouteLink(art.name)" class="w-full lg:w-45% cursor-pointer">
+                        <blog-portfolio-item [project]="art"></blog-portfolio-item>
+                    </a>
                 </ng-container>
             </ng-container>
             <ng-container *ngIf="showAll || !checkLength()">
                 <ng-container *ngFor="let art of sortProjects">
-                    <blog-portfolio-item class="w-full lg:w-45% cursor-pointer" [project]="art" (click)="route(art.name)"></blog-portfolio-item>
+                    <a href="javascript:void(0)" [routerLink]="getRouteLink(art.name)" class="w-full lg:w-45% cursor-pointer">
+                        <blog-portfolio-item [project]="art"></blog-portfolio-item>
+                    </a>
                 </ng-container>
             </ng-container>
         </div>
diff --git a/libs/route-pages/blog-portfolio/src/projects-block.component.ts b/libs/route-pages/blog-portfolio/src/projects-block.component.ts
index 7db1705bd..d70f163d6 100644
--- a/libs/route-pages/blog-portfolio/src/projects-block.component.ts
+++ b/libs/route-pages/blog-portfolio/src/projects-block.component.ts
@@ -75,8 +75,8 @@ export class ProjectsBlockComponent {
         return !!(this.sortProjects?.length && this.sortProjects?.length > 8);
     }
 
-    route(title: string) {
-        this.routeProjectServ.route(title, false);
+    getRouteLink(link: string): any {
+        return this.routeProjectServ.getRouteLink(link);
     }
 
     updateProjects(projects: IPortfolio[]) {
diff --git a/libs/route-pages/blog-portfolio/src/services/route.service.ts b/libs/route-pages/blog-portfolio/src/services/route.service.ts
index 7a9728f5e..394eeacf9 100644
--- a/libs/route-pages/blog-portfolio/src/services/route.service.ts
+++ b/libs/route-pages/blog-portfolio/src/services/route.service.ts
@@ -6,18 +6,26 @@ export class BlogPortfolioRouteService {
 
     constructor(
         private router: Router
-    ){}
+    ) {}
 
     route(title: string, isBlogPage: boolean) {
+        this.router.navigate([isBlogPage ? 'blog' : 'portfolio', this.getRefactoredLink(title)]);
+    }
+
+    getRouteLink(title: string): string {
+        return this.getRefactoredLink(title);
+    }
+
+    getRefactoredLink(title: string): string {
         let link = title;
-        while(link.match(' '|| ':' || '–' || '—' || '&')) {
-            link = link.replace(' ','_');
-            link = link.replace(':','');
-            link = link.replace('–','_');
-            link = link.replace('—','_');
-            link = link.replace('&','_');
+        while (link.match(' ' || ':' || '–' || '—' || '&')) {
+            link = link.replace(' ', '_');
+            link = link.replace(':', '');
+            link = link.replace('–', '_');
+            link = link.replace('—', '_');
+            link = link.replace('&', '_');
         }
 
-        this.router.navigate([isBlogPage ? 'blog' : 'portfolio', link]);
+        return link;
     }
-}
\ No newline at end of file
+}
diff --git a/libs/route-pages/home-page/src/main-page.component.html b/libs/route-pages/home-page/src/main-page.component.html
index b7146fd4a..d618206ae 100644
--- a/libs/route-pages/home-page/src/main-page.component.html
+++ b/libs/route-pages/home-page/src/main-page.component.html
@@ -81,13 +81,15 @@ <h1 class="main-title">Technology</h1>
         <div class="lg:max-w-735 w-full flex flex-col justify-between max-w-455 mx-auto">
             <div class="flex flex-wrap justify-between">
                 <div *ngFor="let project of sortProjects"  class="lg:w-48% w-full relative  mb-8 cursor-pointer lg:h-300 border-grey_bg border-2 hover:border-pink" (click)="projectRoute(project.name)">
-                    <img [src]="project.previewImg" [alt]="project.name" class="w-full h-full object-cover">
-                    <div class="absolute inset-0 flex flex-col justify-end p-6 w-full h-full" [style.background]="'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%)'">
-                        <p class="font-bold text-light_title_col text-xl mb-2 text-center lg:text-left">{{project.name}}</p>
-                        <div class="hidden lg:flex flex-wrap">
-                            <span *ngFor="let item of project.aspects.technology_stack | slice:0:3" class="text-light_title_col text-sm px-3.5 py-1 border border-light_title_col rounded-20 mr-2 hover:text-grey_bg hover:bg-light_title_col transition-colors">{{item}}</span>
+                    <a href="javaScript:void(0)">
+                        <img [src]="project.previewImg" [alt]="project.name" class="w-full h-full object-cover">
+                        <div class="absolute inset-0 flex flex-col justify-end p-6 w-full h-full" [style.background]="'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%)'">
+                            <p class="font-bold text-light_title_col text-xl mb-2 text-center lg:text-left">{{project.name}}</p>
+                            <div class="hidden lg:flex flex-wrap">
+                                <span *ngFor="let item of project.aspects.technology_stack | slice:0:3" class="text-light_title_col text-sm px-3.5 py-1 border border-light_title_col rounded-20 mr-2 hover:text-grey_bg hover:bg-light_title_col transition-colors">{{item}}</span>
+                            </div>
                         </div>
-                    </div>
+                    </a>
                 </div>
             </div>
 
diff --git a/libs/route-pages/home-page/src/main-page.component.ts b/libs/route-pages/home-page/src/main-page.component.ts
index 365d4d593..e2d2f8efc 100644
--- a/libs/route-pages/home-page/src/main-page.component.ts
+++ b/libs/route-pages/home-page/src/main-page.component.ts
@@ -332,7 +332,7 @@ export class MainPageComponent {
     }
 
     projectRoute(name: string) {
-        this.projectRouteServ.route(name);
+        this.projectRouteServ.getRouteLink(name);
     }
 
     checkIndex(index: number): boolean {
diff --git a/libs/route-pages/services-page/src/services-page.component.html b/libs/route-pages/services-page/src/services-page.component.html
index f8fdf55cc..31cef2e07 100644
--- a/libs/route-pages/services-page/src/services-page.component.html
+++ b/libs/route-pages/services-page/src/services-page.component.html
@@ -18,7 +18,7 @@ <h1 class="main-title">Services</h1>
         <services-block [preview]="false"></services-block>
     </div>
 </section>
-<section class="landing-section !pb-0">
+<section class="landing-section">
     <div class="container">
         <h2 class="text-feedback_font_col text-left lg:text-center leading-56 text-32 lg:text-56 font-bold mb-4">Wondering what special offerings<br> can we provide?</h2>
         <p class="text-dar_grey_font_col text-left text-24 lg:text-large lg:text-center mb-14">Check out our exclusive packages!</p>

From 4f82ca46f4c9333a6a565e2bdaa5e3b3e298be3b Mon Sep 17 00:00:00 2001
From: SvetlanaMuravlova <svetlana.muravlova@valor-software.com>
Date: Fri, 17 Jun 2022 18:48:16 +0300
Subject: [PATCH 2/4] refactored same services, deleted extra module portfolio

---
 angular.json                                  | 49 +------------------
 .../valor-software-site/src/app/app.module.ts |  3 +-
 libs/common-docs/src/common-docs.module.ts    | 13 +++--
 .../blog-portfolio-item.component.ts          |  2 +-
 .../blog-preview/blog-preview.component.html  |  6 ++-
 .../blog-preview/blog-preview.component.ts    |  8 +--
 ...ervice.ts => blogArticlesRoute.service.ts} | 11 +----
 .../src/services}/getPortfolio.service.ts     |  4 +-
 libs/common-docs/src/services/seo.service.ts  | 12 ++---
 .../src/tokens}/portfolioList.token.ts        |  0
 libs/portfolio/.eslintrc.json                 | 46 -----------------
 libs/portfolio/README.md                      |  9 ----
 libs/portfolio/jest.config.js                 | 20 --------
 libs/portfolio/ng-package.json                |  7 ---
 libs/portfolio/package.json                   | 11 -----
 libs/portfolio/src/index.ts                   |  3 --
 libs/portfolio/src/portfolio.interface.ts     | 25 ----------
 libs/portfolio/src/portfolio.module.ts        | 15 ------
 libs/portfolio/src/projectsRoute.service.ts   | 31 ------------
 libs/portfolio/src/test-setup.ts              |  1 -
 libs/portfolio/tsconfig.json                  | 24 ---------
 libs/portfolio/tsconfig.lib.json              | 23 ---------
 libs/portfolio/tsconfig.lib.prod.json         | 10 ----
 libs/portfolio/tsconfig.spec.json             | 14 ------
 .../src/blog-portfolio.module.ts              |  5 +-
 .../blog-portfolio/src/blog.component.ts      |  5 +-
 .../src/directives/sort.directive.ts          |  3 +-
 .../src/general-page.component.html           | 12 ++++-
 .../src/genral-page.component.ts              |  7 ++-
 .../blog-portfolio/src/project.component.html |  4 +-
 .../blog-portfolio/src/project.component.ts   |  9 ++--
 .../src/projects-block.component.ts           |  5 +-
 .../src/services/route.service.ts             | 31 ------------
 .../home-page/src/main-page.component.html    |  4 +-
 .../home-page/src/main-page.component.ts      | 10 ++--
 .../home-page/src/main-page.module.ts         |  6 +--
 tsconfig.base.json                            |  3 --
 37 files changed, 64 insertions(+), 387 deletions(-)
 rename libs/common-docs/src/services/{articlesRoute.service.ts => blogArticlesRoute.service.ts} (70%)
 rename libs/{portfolio/src => common-docs/src/services}/getPortfolio.service.ts (87%)
 rename libs/{portfolio/src => common-docs/src/tokens}/portfolioList.token.ts (100%)
 delete mode 100644 libs/portfolio/.eslintrc.json
 delete mode 100644 libs/portfolio/README.md
 delete mode 100644 libs/portfolio/jest.config.js
 delete mode 100644 libs/portfolio/ng-package.json
 delete mode 100644 libs/portfolio/package.json
 delete mode 100644 libs/portfolio/src/index.ts
 delete mode 100644 libs/portfolio/src/portfolio.interface.ts
 delete mode 100644 libs/portfolio/src/portfolio.module.ts
 delete mode 100644 libs/portfolio/src/projectsRoute.service.ts
 delete mode 100644 libs/portfolio/src/test-setup.ts
 delete mode 100644 libs/portfolio/tsconfig.json
 delete mode 100644 libs/portfolio/tsconfig.lib.json
 delete mode 100644 libs/portfolio/tsconfig.lib.prod.json
 delete mode 100644 libs/portfolio/tsconfig.spec.json
 delete mode 100644 libs/route-pages/blog-portfolio/src/services/route.service.ts

diff --git a/angular.json b/angular.json
index 0342ce83f..7d434c2e3 100644
--- a/angular.json
+++ b/angular.json
@@ -47,8 +47,7 @@
       },
       "tags": [],
       "implicitDependencies": [
-        "file-uploader",
-        "portfolio"
+        "file-uploader"
       ]
     },
     "feedback": {
@@ -143,52 +142,6 @@
       },
       "tags": []
     },
-    "portfolio": {
-      "projectType": "library",
-      "root": "libs/portfolio",
-      "sourceRoot": "libs/portfolio/src",
-      "prefix": "valor-software-site-base",
-      "architect": {
-        "build": {
-          "builder": "@nrwl/angular:ng-packagr-lite",
-          "outputs": [
-            "dist/libs/portfolio"
-          ],
-          "options": {
-            "project": "libs/portfolio/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "libs/portfolio/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "libs/portfolio/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@nrwl/jest:jest",
-          "outputs": [
-            "coverage/libs/portfolio"
-          ],
-          "options": {
-            "jestConfig": "libs/portfolio/jest.config.js",
-            "passWithNoTests": true
-          }
-        },
-        "lint": {
-          "builder": "@nrwl/linter:eslint",
-          "options": {
-            "lintFilePatterns": [
-              "libs/portfolio/src/**/*.ts",
-              "libs/portfolio/src/**/*.html"
-            ]
-          }
-        }
-      },
-      "tags": []
-    },
     "route-pages-blog-portfolio": {
       "projectType": "library",
       "root": "libs/route-pages/blog-portfolio",
diff --git a/apps/valor-software-site/src/app/app.module.ts b/apps/valor-software-site/src/app/app.module.ts
index 687afd3c1..c89397160 100644
--- a/apps/valor-software-site/src/app/app.module.ts
+++ b/apps/valor-software-site/src/app/app.module.ts
@@ -3,11 +3,10 @@ import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 import { routes } from './app.routing';
 import { AppComponent } from './app.component';
-import {CommonDocsModule, ARTICLES_LIST, SeoService} from '@valor-software/common-docs';
+import { CommonDocsModule, ARTICLES_LIST, SeoService, PORTFOLIO_LIST } from '@valor-software/common-docs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ScullyLibModule } from '@scullyio/ng-lib';
 import { articlesList } from "../assets/blog/articles.list";
-import { PORTFOLIO_LIST } from "@valor-software/portfolio";
 import { portfolioList } from "../assets/portfolio/portfolio.list";
 import { NotFoundComponent } from './404.component';
 
diff --git a/libs/common-docs/src/common-docs.module.ts b/libs/common-docs/src/common-docs.module.ts
index 5fde7d393..f328d8fed 100644
--- a/libs/common-docs/src/common-docs.module.ts
+++ b/libs/common-docs/src/common-docs.module.ts
@@ -19,9 +19,9 @@ import { SwiperModule } from "swiper/angular";
 import { BlogPreviewComponent } from './components/blog-preview/blog-preview.component';
 import { BlogPortfolioItemComponent } from './components/blog-preview/blog-portfolio-item.component';
 import { GetArticlesService } from './services/getArticles.service';
-import { ArticlesRouteService } from './services/articlesRoute.service';
+import { BlogArticlesRouteService } from './services/blogArticlesRoute.service';
 import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from 'ng-recaptcha';
-import { GetPortfolioService } from "@valor-software/portfolio";
+import { GetPortfolioService } from "./services/getPortfolio.service";
 import { CustomSlicePipe } from './pipes/customSlice.pipe';
 
 export { PopoverComponent } from './components/popover/popover.component';
@@ -34,13 +34,16 @@ export { ModalService } from './services/modal.service';
 export { BreadCrumbsComponent } from './components/breadCrumbs/breadCrumbs.component';
 export { ShowHideDirective } from './directives/showHide.directive';
 export { GetArticlesService } from './services/getArticles.service';
-export { ArticlesRouteService } from './services/articlesRoute.service';
+export { BlogArticlesRouteService } from './services/blogArticlesRoute.service';
 export { IArticle } from './models/article.interface';
 export { BlogPreviewComponent } from './components/blog-preview/blog-preview.component';
 export { BlogPortfolioItemComponent } from './components/blog-preview/blog-portfolio-item.component';
 export { ARTICLES_LIST } from './tokens/articlesList.token';
 export { SeoService } from './services/seo.service';
 export { CustomSlicePipe } from './pipes/customSlice.pipe';
+export { PORTFOLIO_LIST } from './tokens/portfolioList.token';
+export { IPortfolio } from './models/portfolio.interface';
+export { GetPortfolioService } from './services/getPortfolio.service';
 
 @NgModule({
   declarations: [
@@ -68,9 +71,9 @@ export { CustomSlicePipe } from './pipes/customSlice.pipe';
     ShowHideDirective,
     BlogPreviewComponent,
     BlogPortfolioItemComponent,
-    CustomSlicePipe
+    CustomSlicePipe,
   ],
-  providers: [ModalService, SendEmailService, ArticlesRouteService, GetArticlesService, GetPortfolioService,
+  providers: [ModalService, SendEmailService, BlogArticlesRouteService, GetArticlesService, GetPortfolioService,
     {
       provide: RECAPTCHA_V3_SITE_KEY,
       useValue: '6LctnKQdAAAAABGStzrEdBnCWVYwkqAafI7pcUz3',
diff --git a/libs/common-docs/src/components/blog-preview/blog-portfolio-item.component.ts b/libs/common-docs/src/components/blog-preview/blog-portfolio-item.component.ts
index 88b8fc60c..a45e77206 100644
--- a/libs/common-docs/src/components/blog-preview/blog-portfolio-item.component.ts
+++ b/libs/common-docs/src/components/blog-preview/blog-portfolio-item.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { IArticle } from "../../models/article.interface";
-import { IPortfolio } from "@valor-software/portfolio";
+import { IPortfolio } from "../../models/portfolio.interface";
 
 
 @Component({
diff --git a/libs/common-docs/src/components/blog-preview/blog-preview.component.html b/libs/common-docs/src/components/blog-preview/blog-preview.component.html
index c6deb7e51..5e6085ccc 100644
--- a/libs/common-docs/src/components/blog-preview/blog-preview.component.html
+++ b/libs/common-docs/src/components/blog-preview/blog-preview.component.html
@@ -4,7 +4,11 @@
             class="article_swiper"
     >
         <ng-template swiperSlide *ngFor="let article of articles">
-            <blog-portfolio-item class="w-full cursor-pointer" [article]="article" (click)="route(article.title)"></blog-portfolio-item>
+            <ng-container *ngIf="article && article.title">
+                <a class="block w-full cursor-pointer" href="javascript:void(0)" [routerLink]="['/blog', getRouteLink(article.title)]">
+                    <blog-portfolio-item [article]="article"></blog-portfolio-item>
+                </a>
+            </ng-container>
         </ng-template>
     </swiper>
 </ng-container>
\ No newline at end of file
diff --git a/libs/common-docs/src/components/blog-preview/blog-preview.component.ts b/libs/common-docs/src/components/blog-preview/blog-preview.component.ts
index 4c6df250d..103a74137 100644
--- a/libs/common-docs/src/components/blog-preview/blog-preview.component.ts
+++ b/libs/common-docs/src/components/blog-preview/blog-preview.component.ts
@@ -2,7 +2,7 @@ import {Component, OnDestroy, Input, OnInit} from '@angular/core';
 import { GetArticlesService } from "../../services/getArticles.service";
 import { IArticle } from "../../models/article.interface";
 import { forkJoin, Subscription } from "rxjs";
-import { ArticlesRouteService } from "../../services/articlesRoute.service";
+import { BlogArticlesRouteService } from "../../services/blogArticlesRoute.service";
 import SwiperCore, { Pagination, SwiperOptions  } from "swiper";
 SwiperCore.use([Pagination]);
 
@@ -37,7 +37,7 @@ export class BlogPreviewComponent implements OnDestroy, OnInit{
 
     constructor(
         private getArticles: GetArticlesService,
-        private articleRoute: ArticlesRouteService
+        private articleRoute: BlogArticlesRouteService
     ) {}
 
     ngOnInit() {
@@ -58,7 +58,7 @@ export class BlogPreviewComponent implements OnDestroy, OnInit{
         this.$articles?.unsubscribe();
     }
 
-    route(title: string) {
-        this.articleRoute.route(title);
+    getRouteLink(link: string): string {
+        return this.articleRoute.getRouteLink(link);
     }
 }
\ No newline at end of file
diff --git a/libs/common-docs/src/services/articlesRoute.service.ts b/libs/common-docs/src/services/blogArticlesRoute.service.ts
similarity index 70%
rename from libs/common-docs/src/services/articlesRoute.service.ts
rename to libs/common-docs/src/services/blogArticlesRoute.service.ts
index b2ca90ff3..e82864390 100644
--- a/libs/common-docs/src/services/articlesRoute.service.ts
+++ b/libs/common-docs/src/services/blogArticlesRoute.service.ts
@@ -1,16 +1,7 @@
 import { Injectable } from '@angular/core';
-import { Router } from "@angular/router";
 
 @Injectable({providedIn: 'platform'})
-export class ArticlesRouteService {
-
-    constructor(
-        private router: Router
-    ){}
-
-    route(title: string) {
-        this.router.navigate(['blog', this.getRefactoredLink(title)]);
-    }
+export class BlogArticlesRouteService {
 
     getRouteLink(title: string): string {
         return this.getRefactoredLink(title);
diff --git a/libs/portfolio/src/getPortfolio.service.ts b/libs/common-docs/src/services/getPortfolio.service.ts
similarity index 87%
rename from libs/portfolio/src/getPortfolio.service.ts
rename to libs/common-docs/src/services/getPortfolio.service.ts
index a80c6c034..079d51324 100644
--- a/libs/portfolio/src/getPortfolio.service.ts
+++ b/libs/common-docs/src/services/getPortfolio.service.ts
@@ -1,8 +1,8 @@
 import { Inject, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { IPortfolio } from "./portfolio.interface";
-import { PORTFOLIO_LIST } from "./portfolioList.token";
+import { IPortfolio } from "../models/portfolio.interface";
+import { PORTFOLIO_LIST } from "../tokens/portfolioList.token";
 
 
 @Injectable({providedIn: 'platform'})
diff --git a/libs/common-docs/src/services/seo.service.ts b/libs/common-docs/src/services/seo.service.ts
index 3a2986622..bc89cde84 100644
--- a/libs/common-docs/src/services/seo.service.ts
+++ b/libs/common-docs/src/services/seo.service.ts
@@ -1,10 +1,10 @@
-import { Injectable, Inject } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { Title, Meta } from '@angular/platform-browser';
-import {filter} from "rxjs/operators";
-import {NavigationEnd, Router, UrlSegment} from "@angular/router";
-import {Observable, Subscription} from "rxjs";
-import {GetArticlesService} from "./getArticles.service";
-import { GetPortfolioService } from "@valor-software/portfolio";
+import { filter } from "rxjs/operators";
+import { NavigationEnd, Router, UrlSegment } from "@angular/router";
+import { Observable, Subscription } from "rxjs";
+import { GetArticlesService } from "./getArticles.service";
+import { GetPortfolioService } from "./getPortfolio.service";
 
 const ex: {[key: string] : { nameType: 'meta' | 'title', name: string, nameValue: string, content: string }[]} = {
     '/': [
diff --git a/libs/portfolio/src/portfolioList.token.ts b/libs/common-docs/src/tokens/portfolioList.token.ts
similarity index 100%
rename from libs/portfolio/src/portfolioList.token.ts
rename to libs/common-docs/src/tokens/portfolioList.token.ts
diff --git a/libs/portfolio/.eslintrc.json b/libs/portfolio/.eslintrc.json
deleted file mode 100644
index 17d600b7e..000000000
--- a/libs/portfolio/.eslintrc.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "extends": [
-    "../../.eslintrc.json"
-  ],
-  "ignorePatterns": [
-    "!**/*"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "*.ts"
-      ],
-      "extends": [
-        "plugin:@nrwl/nx/angular",
-        "plugin:@angular-eslint/template/process-inline-templates"
-      ],
-      "rules": {
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "valorSoftwareSiteBase",
-            "style": "camelCase"
-          }
-        ],
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "valor-software-site-base",
-            "style": "kebab-case"
-          }
-        ]
-      }
-    },
-    {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@nrwl/nx/angular-template"
-      ],
-      "rules": {}
-    }
-  ]
-}
diff --git a/libs/portfolio/README.md b/libs/portfolio/README.md
deleted file mode 100644
index 7ad895bb4..000000000
--- a/libs/portfolio/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# portfolio
-
-This library was generated with [Nx](https://nx.dev).
-
-
-## Running unit tests
-
-Run `nx test portfolio` to execute the unit tests.
-
diff --git a/libs/portfolio/jest.config.js b/libs/portfolio/jest.config.js
deleted file mode 100644
index 127dea1ee..000000000
--- a/libs/portfolio/jest.config.js
+++ /dev/null
@@ -1,20 +0,0 @@
-module.exports = {
-  displayName: 'portfolio',
-  preset: '../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-      stringifyContentPathRegex: '\\.(html|svg)$',
-    }
-  },
-  coverageDirectory: '../../coverage/libs/portfolio',
-  transform: {
-    '^.+\\.(ts|js|html)$': 'jest-preset-angular'
-  },
-  snapshotSerializers: [
-    'jest-preset-angular/build/serializers/no-ng-attributes',
-    'jest-preset-angular/build/serializers/ng-snapshot',
-    'jest-preset-angular/build/serializers/html-comment',
-  ]
-};
diff --git a/libs/portfolio/ng-package.json b/libs/portfolio/ng-package.json
deleted file mode 100644
index 356e5da05..000000000
--- a/libs/portfolio/ng-package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/libs/portfolio",
-  "lib": {
-    "entryFile": "src/index.ts"
-  }
-}
diff --git a/libs/portfolio/package.json b/libs/portfolio/package.json
deleted file mode 100644
index ab892ee3a..000000000
--- a/libs/portfolio/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "name": "@valor-software/portfolio",
-  "version": "0.0.1",
-  "peerDependencies": {
-    "@angular/common": "^12.2.0",
-    "@angular/core": "^12.2.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
-}
diff --git a/libs/portfolio/src/index.ts b/libs/portfolio/src/index.ts
deleted file mode 100644
index a6ed102b0..000000000
--- a/libs/portfolio/src/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-
-        export * from './portfolio.module';
-        
\ No newline at end of file
diff --git a/libs/portfolio/src/portfolio.interface.ts b/libs/portfolio/src/portfolio.interface.ts
deleted file mode 100644
index 51526d609..000000000
--- a/libs/portfolio/src/portfolio.interface.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export interface IPortfolio {
-    name: string;
-    link?: string;
-    behanceLink?: string;
-    goalsImg?: string;
-    solutionsImg?: string;
-    webSort?: string[];
-    video?:string;
-    iframe?: string;
-    feedback?: string;
-    sortTechnologies: string[];
-    previewImg: string;
-    description: string;
-    goals: string[];
-    solutions: string[];
-    outcome: string;
-    headerImg: string;
-    sortServices: string[];
-    aspects: {
-        type: string[];
-        country: string[];
-        technology_stack: string[];
-        services_provided: string[];
-    }
-}
\ No newline at end of file
diff --git a/libs/portfolio/src/portfolio.module.ts b/libs/portfolio/src/portfolio.module.ts
deleted file mode 100644
index d69aba435..000000000
--- a/libs/portfolio/src/portfolio.module.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-export { IPortfolio} from './portfolio.interface';
-export { GetPortfolioService } from './getPortfolio.service';
-export { ProjectsRouteService } from './projectsRoute.service';
-export { PORTFOLIO_LIST } from './portfolioList.token';
-
-@NgModule({
-  imports: [
-    CommonModule
-  ]
-})
-export class PortfolioModule { }
-        
\ No newline at end of file
diff --git a/libs/portfolio/src/projectsRoute.service.ts b/libs/portfolio/src/projectsRoute.service.ts
deleted file mode 100644
index 35c26d2e1..000000000
--- a/libs/portfolio/src/projectsRoute.service.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Router } from "@angular/router";
-
-@Injectable({providedIn: 'platform'})
-export class ProjectsRouteService {
-
-    constructor(
-        private router: Router
-    ){}
-
-    route(title: string) {
-        this.router.navigate(['portfolio', this.getRefactoredLink(title)]);
-    }
-
-    getRouteLink(title: string): string {
-        return this.getRefactoredLink(title);
-    }
-
-    getRefactoredLink(title: string): string {
-        let link = title;
-        while(link.match(' '|| ':' || '–' || '—' || '&')) {
-            link = link.replace(' ','_');
-            link = link.replace(':','');
-            link = link.replace('–','_');
-            link = link.replace('—','_');
-            link = link.replace('&','_');
-        }
-
-        return link;
-    }
-}
diff --git a/libs/portfolio/src/test-setup.ts b/libs/portfolio/src/test-setup.ts
deleted file mode 100644
index 1100b3e8a..000000000
--- a/libs/portfolio/src/test-setup.ts
+++ /dev/null
@@ -1 +0,0 @@
-import 'jest-preset-angular/setup-jest';
diff --git a/libs/portfolio/tsconfig.json b/libs/portfolio/tsconfig.json
deleted file mode 100644
index d7a0c7629..000000000
--- a/libs/portfolio/tsconfig.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "files": [],
-  "include": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ],
-  "compilerOptions": {
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "angularCompilerOptions": {
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  }
-}
diff --git a/libs/portfolio/tsconfig.lib.json b/libs/portfolio/tsconfig.lib.json
deleted file mode 100644
index fd887c2a4..000000000
--- a/libs/portfolio/tsconfig.lib.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "target": "es2015",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": [],
-    "lib": [
-      "dom",
-      "es2018"
-    ]
-  },
-  "exclude": [
-    "src/test-setup.ts",
-    "**/*.spec.ts",
-    "**/*.test.ts"
-  ],
-  "include": [
-    "**/*.ts"
-  ]
-}
diff --git a/libs/portfolio/tsconfig.lib.prod.json b/libs/portfolio/tsconfig.lib.prod.json
deleted file mode 100644
index 06de549e1..000000000
--- a/libs/portfolio/tsconfig.lib.prod.json
+++ /dev/null
@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}
diff --git a/libs/portfolio/tsconfig.spec.json b/libs/portfolio/tsconfig.spec.json
deleted file mode 100644
index a66ee4d3a..000000000
--- a/libs/portfolio/tsconfig.spec.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node"]
-  },
-  "files": ["src/test-setup.ts"],
-  "include": [
-    "**/*.test.ts",
-    "**/*.spec.ts",
-    "**/*.d.ts"
-]
-}
diff --git a/libs/route-pages/blog-portfolio/src/blog-portfolio.module.ts b/libs/route-pages/blog-portfolio/src/blog-portfolio.module.ts
index a5a15a974..96997e8a7 100644
--- a/libs/route-pages/blog-portfolio/src/blog-portfolio.module.ts
+++ b/libs/route-pages/blog-portfolio/src/blog-portfolio.module.ts
@@ -3,8 +3,7 @@ import { CommonModule } from '@angular/common';
 import { RouterModule } from "@angular/router";
 import { routes } from './routes';
 import { GeneralPageComponent } from "./genral-page.component";
-import { CommonDocsModule } from "@valor-software/common-docs";
-import { BlogPortfolioRouteService } from "./services/route.service";
+import { CommonDocsModule, BlogArticlesRouteService } from "@valor-software/common-docs";
 import { BlogComponent } from "./blog.component";
 import { ProjectsBlockComponent } from "./projects-block.component";
 import { SortDirective } from './directives/sort.directive';
@@ -31,7 +30,7 @@ import { SwiperModule } from "swiper/angular";
     FeedbackModule,
     SwiperModule
   ],
-  providers: [ BlogPortfolioRouteService ]
+  providers: [ BlogArticlesRouteService ]
 })
 export class BlogPortfolioModule { }
         
\ No newline at end of file
diff --git a/libs/route-pages/blog-portfolio/src/blog.component.ts b/libs/route-pages/blog-portfolio/src/blog.component.ts
index b0a971213..2607c2d32 100644
--- a/libs/route-pages/blog-portfolio/src/blog.component.ts
+++ b/libs/route-pages/blog-portfolio/src/blog.component.ts
@@ -1,9 +1,8 @@
 import {ChangeDetectorRef, Component, Input, OnDestroy} from '@angular/core';
 import { GetArticlesService } from "@valor-software/common-docs";
 import { Subscription } from "rxjs";
-import { IArticle } from "@valor-software/common-docs";
+import { IArticle, BlogArticlesRouteService } from "@valor-software/common-docs";
 import { Router } from "@angular/router";
-import {ArticlesRouteService} from "@valor-software/common-docs";
 
 export const Domains = {
     business_analysis: 'Business Analysis',
@@ -44,7 +43,7 @@ export class BlogComponent implements OnDestroy {
         private router: Router,
         private getArticles: GetArticlesService,
         private cdr: ChangeDetectorRef,
-        private routeArticle: ArticlesRouteService
+        private routeArticle: BlogArticlesRouteService
     ) {
         this.getSortKeys();
     }
diff --git a/libs/route-pages/blog-portfolio/src/directives/sort.directive.ts b/libs/route-pages/blog-portfolio/src/directives/sort.directive.ts
index 434790be0..cf61dfa66 100644
--- a/libs/route-pages/blog-portfolio/src/directives/sort.directive.ts
+++ b/libs/route-pages/blog-portfolio/src/directives/sort.directive.ts
@@ -3,8 +3,7 @@ import {
     Output,
     EventEmitter,  Input
 } from "@angular/core";
-import { IPortfolio } from "@valor-software/portfolio";
-import { IArticle } from "@valor-software/common-docs";
+import { IArticle, IPortfolio } from "@valor-software/common-docs";
 
 
 @Directive({
diff --git a/libs/route-pages/blog-portfolio/src/general-page.component.html b/libs/route-pages/blog-portfolio/src/general-page.component.html
index 21416d9f5..ebf49d0c4 100644
--- a/libs/route-pages/blog-portfolio/src/general-page.component.html
+++ b/libs/route-pages/blog-portfolio/src/general-page.component.html
@@ -32,10 +32,18 @@ <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 m
                 </div>
                 <div class="hidden lg:block ml-6">
                     <ng-container *ngIf="!isBlogPage(); else blogPageImage">
-                        <img [src]="activeProject?.previewImg" [alt]="activeProject?.name + 'image'">
+                        <ng-container *ngIf="activeProject && activeProject.name">
+                            <a href="javascript:void(0)" [routerLink]="[getRouteLink(activeProject.name)]" class="block zoom-img-scale">
+                                <img [src]="activeProject?.previewImg" [alt]="activeProject?.name + 'image'">
+                            </a>
+                        </ng-container>
                     </ng-container>
                     <ng-template #blogPageImage>
-                        <img [src]="activeArticle?.bgImg" [alt]="activeArticle?.title + 'image'">
+                        <ng-container *ngIf="activeArticle && activeArticle.title">
+                            <a href="javascript:void(0)" [routerLink]="[getRouteLink(activeArticle.title)]" class="block zoom-img-scale">
+                                <img [src]="activeArticle?.bgImg" [alt]="activeArticle?.title + 'image'">
+                            </a>
+                        </ng-container>
                     </ng-template>
                 </div>
             </div>
diff --git a/libs/route-pages/blog-portfolio/src/genral-page.component.ts b/libs/route-pages/blog-portfolio/src/genral-page.component.ts
index bdcefea13..179280bc5 100644
--- a/libs/route-pages/blog-portfolio/src/genral-page.component.ts
+++ b/libs/route-pages/blog-portfolio/src/genral-page.component.ts
@@ -2,9 +2,8 @@ import { Component, OnDestroy, Type } from '@angular/core';
 import { NavigationEnd, Router } from "@angular/router";
 import { filter } from "rxjs/operators";
 import { forkJoin, Subscription } from "rxjs";
-import { GetArticlesService, IArticle } from "@valor-software/common-docs";
-import { GetPortfolioService, IPortfolio } from "@valor-software/portfolio";
-import { BlogPortfolioRouteService } from "./services/route.service";
+import { GetArticlesService, IArticle, GetPortfolioService, IPortfolio } from "@valor-software/common-docs";
+import { BlogArticlesRouteService } from "@valor-software/common-docs";
 import SwiperCore, { Pagination, SwiperOptions  } from "swiper";
 SwiperCore.use([Pagination]);
 
@@ -42,7 +41,7 @@ export class GeneralPageComponent implements OnDestroy{
         private router: Router,
         private getArticlesServ: GetArticlesService,
         private getPortfolio: GetPortfolioService,
-        private routeServ: BlogPortfolioRouteService
+        private routeServ: BlogArticlesRouteService
     ) {
         this.router.events
             .pipe(
diff --git a/libs/route-pages/blog-portfolio/src/project.component.html b/libs/route-pages/blog-portfolio/src/project.component.html
index 5eb5c2ff6..f4f712a5a 100644
--- a/libs/route-pages/blog-portfolio/src/project.component.html
+++ b/libs/route-pages/blog-portfolio/src/project.component.html
@@ -130,13 +130,13 @@ <h1 class="main-title">Aspects</h1>
         <h1 class="main-title">Next Project</h1>
         <div class="container">
             <div class="w-full max-w-80% mx-auto">
-                <a class="mb-10 zoom-img-scale cursor-pointer" href="javascript:void(0)" [routerLink]="['/portfolio', getRouteLink(nextProject.name)]">
+                <a class="block mb-10 zoom-img-scale cursor-pointer" href="javascript:void(0)" [routerLink]="['/portfolio', getRouteLink(nextProject.name)]">
                     <div>
                         <img [src]="nextProject.previewImg" [alt]="nextProject.name+' image'" class="w-full h-full object-cover">
                     </div>
                 </a>
                 <div class="flex flex-col">
-                    <a class="mb-12 cursor-pointer" href="javascript:void(0)" [routerLink]="['/portfolio', getRouteLink(nextProject.name)]">
+                    <a class="block mb-12 cursor-pointer" href="javascript:void(0)" [routerLink]="['/portfolio', getRouteLink(nextProject.name)]">
                         <div>
                             <p *ngIf="nextProject.sortServices.includes('web')" class="text-header_font_col text-sm md:text-20">Website</p>
                             <div class="flex">
diff --git a/libs/route-pages/blog-portfolio/src/project.component.ts b/libs/route-pages/blog-portfolio/src/project.component.ts
index cf52f32cd..b27c943d3 100644
--- a/libs/route-pages/blog-portfolio/src/project.component.ts
+++ b/libs/route-pages/blog-portfolio/src/project.component.ts
@@ -1,10 +1,9 @@
-import {ChangeDetectorRef, Component, OnDestroy} from '@angular/core';
-import { IPortfolio, GetPortfolioService } from "@valor-software/portfolio";
+import { ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
 import { Subscription } from "rxjs";
 import { NavigationEnd, Router } from "@angular/router";
 import { filter } from "rxjs/operators";
 import { DomSanitizer } from '@angular/platform-browser';
-import { BlogPortfolioRouteService } from "./services/route.service";
+import { BlogArticlesRouteService, IPortfolio, GetPortfolioService } from "@valor-software/common-docs";
 
 @Component({
     // eslint-disable-next-line @angular-eslint/component-selector
@@ -21,7 +20,7 @@ export class ProjectComponent implements OnDestroy{
         private router: Router,
         private getProjectsServ: GetPortfolioService,
         private sanitizer: DomSanitizer,
-        private projectRoute: BlogPortfolioRouteService,
+        private projectRoute: BlogArticlesRouteService,
         private cdr: ChangeDetectorRef,
 
     ) {
@@ -84,7 +83,7 @@ export class ProjectComponent implements OnDestroy{
         });
     }
 
-    getRouteLink(link: string): any {
+    getRouteLink(link: string): string {
         return this.projectRoute.getRouteLink(link);
     }
 
diff --git a/libs/route-pages/blog-portfolio/src/projects-block.component.ts b/libs/route-pages/blog-portfolio/src/projects-block.component.ts
index d70f163d6..46f98fb69 100644
--- a/libs/route-pages/blog-portfolio/src/projects-block.component.ts
+++ b/libs/route-pages/blog-portfolio/src/projects-block.component.ts
@@ -1,7 +1,6 @@
 import {ChangeDetectorRef, Component, Input } from '@angular/core';
-import { IPortfolio } from "@valor-software/portfolio";
 import { Router } from "@angular/router";
-import { BlogPortfolioRouteService } from './services/route.service';
+import { BlogArticlesRouteService, IPortfolio } from '@valor-software/common-docs';
 
 const SortList = {
     all_projects: 'All Projects',
@@ -32,7 +31,7 @@ export class ProjectsBlockComponent {
     constructor(
         private router: Router,
         private cdr: ChangeDetectorRef,
-        private routeProjectServ: BlogPortfolioRouteService
+        private routeProjectServ: BlogArticlesRouteService
     ) {
         this.getSortKeys();
     }
diff --git a/libs/route-pages/blog-portfolio/src/services/route.service.ts b/libs/route-pages/blog-portfolio/src/services/route.service.ts
deleted file mode 100644
index 394eeacf9..000000000
--- a/libs/route-pages/blog-portfolio/src/services/route.service.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Router } from "@angular/router";
-
-@Injectable({providedIn: 'platform'})
-export class BlogPortfolioRouteService {
-
-    constructor(
-        private router: Router
-    ) {}
-
-    route(title: string, isBlogPage: boolean) {
-        this.router.navigate([isBlogPage ? 'blog' : 'portfolio', this.getRefactoredLink(title)]);
-    }
-
-    getRouteLink(title: string): string {
-        return this.getRefactoredLink(title);
-    }
-
-    getRefactoredLink(title: string): string {
-        let link = title;
-        while (link.match(' ' || ':' || '–' || '—' || '&')) {
-            link = link.replace(' ', '_');
-            link = link.replace(':', '');
-            link = link.replace('–', '_');
-            link = link.replace('—', '_');
-            link = link.replace('&', '_');
-        }
-
-        return link;
-    }
-}
diff --git a/libs/route-pages/home-page/src/main-page.component.html b/libs/route-pages/home-page/src/main-page.component.html
index d618206ae..d37c082ed 100644
--- a/libs/route-pages/home-page/src/main-page.component.html
+++ b/libs/route-pages/home-page/src/main-page.component.html
@@ -80,8 +80,8 @@ <h1 class="main-title">Technology</h1>
         </div>
         <div class="lg:max-w-735 w-full flex flex-col justify-between max-w-455 mx-auto">
             <div class="flex flex-wrap justify-between">
-                <div *ngFor="let project of sortProjects"  class="lg:w-48% w-full relative  mb-8 cursor-pointer lg:h-300 border-grey_bg border-2 hover:border-pink" (click)="projectRoute(project.name)">
-                    <a href="javaScript:void(0)">
+                <div *ngFor="let project of sortProjects"  class="lg:w-48% w-full relative  mb-8 cursor-pointer lg:h-300 border-grey_bg border-2 hover:border-pink">
+                    <a href="javaScript:void(0)" [routerLink]="['portfolio', projectRoute(project.name)]">
                         <img [src]="project.previewImg" [alt]="project.name" class="w-full h-full object-cover">
                         <div class="absolute inset-0 flex flex-col justify-end p-6 w-full h-full" [style.background]="'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%)'">
                             <p class="font-bold text-light_title_col text-xl mb-2 text-center lg:text-left">{{project.name}}</p>
diff --git a/libs/route-pages/home-page/src/main-page.component.ts b/libs/route-pages/home-page/src/main-page.component.ts
index e2d2f8efc..5ad8fd410 100644
--- a/libs/route-pages/home-page/src/main-page.component.ts
+++ b/libs/route-pages/home-page/src/main-page.component.ts
@@ -2,8 +2,8 @@ import {Component, ViewChild, ChangeDetectorRef, HostListener} from '@angular/co
 import { Router } from '@angular/router';
 import { NpmStatisticService } from "./getNpmStatistic.service";
 import SwiperCore, { Pagination, Mousewheel, SwiperOptions  } from "swiper";
-import {forkJoin, Subscription} from "rxjs";
-import {GetPortfolioService, IPortfolio, ProjectsRouteService} from "@valor-software/portfolio";
+import { forkJoin, Subscription } from "rxjs";
+import { GetPortfolioService, IPortfolio, BlogArticlesRouteService } from "@valor-software/common-docs";
 SwiperCore.use([Mousewheel, Pagination]);
 
 const slideModel = [
@@ -279,7 +279,7 @@ export class MainPageComponent {
         private cdr: ChangeDetectorRef,
         protected router: Router,
         private getPortfolio: GetPortfolioService,
-        private projectRouteServ: ProjectsRouteService
+        private projectRouteServ: BlogArticlesRouteService
     ) {
         this.$portfolio = forkJoin(this.getPortfolio.getFullListOfPortfolio()).subscribe((res: IPortfolio[] | undefined) => {
             this.projects = res;
@@ -331,8 +331,8 @@ export class MainPageComponent {
         }
     }
 
-    projectRoute(name: string) {
-        this.projectRouteServ.getRouteLink(name);
+    projectRoute(name: string): string {
+        return this.projectRouteServ.getRouteLink(name);
     }
 
     checkIndex(index: number): boolean {
diff --git a/libs/route-pages/home-page/src/main-page.module.ts b/libs/route-pages/home-page/src/main-page.module.ts
index 12bcdabe1..9aa1502c9 100644
--- a/libs/route-pages/home-page/src/main-page.module.ts
+++ b/libs/route-pages/home-page/src/main-page.module.ts
@@ -3,12 +3,10 @@ import { CommonModule } from '@angular/common';
 import { RouterModule, Routes } from "@angular/router";
 import { routes } from "./routes";
 import { SwiperModule } from "swiper/angular";
-import { CommonDocsModule } from '@valor-software/common-docs';
+import { CommonDocsModule, GetPortfolioService, BlogArticlesRouteService } from '@valor-software/common-docs';
 import { NpmStatisticService } from './getNpmStatistic.service';
 import { MainPageComponent } from "./main-page.component";
 import { FeedbackModule } from "@valor-software/feedback";
-import {GetPortfolioService, ProjectsRouteService} from "@valor-software/portfolio";
-
 
 export { MainPageComponent } from "./main-page.component";
 
@@ -23,7 +21,7 @@ export { MainPageComponent } from "./main-page.component";
         CommonDocsModule,
         FeedbackModule
     ],
-    providers: [NpmStatisticService, GetPortfolioService, ProjectsRouteService]
+    providers: [NpmStatisticService, GetPortfolioService, BlogArticlesRouteService]
 })
 export class MainPageModule {
     static routes: Routes = routes;
diff --git a/tsconfig.base.json b/tsconfig.base.json
index bc9467cc6..b25fda703 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -39,9 +39,6 @@
       "@valor-software/home-page": [
         "libs/route-pages/home-page/src/index.ts"
       ],
-      "@valor-software/portfolio": [
-        "libs/portfolio/src/index.ts"
-      ],
       "@valor-software/services-page": [
         "libs/route-pages/services-page/src/index.ts"
       ],

From d5f0b2117dae0a75d725c0180cbbf99b1535a8e6 Mon Sep 17 00:00:00 2001
From: SvetlanaMuravlova <svetlana.muravlova@valor-software.com>
Date: Mon, 20 Jun 2022 13:42:33 +0300
Subject: [PATCH 3/4] fixed buttons with links, fixed breadcrumbs

---
 .../src/app/404.component.ts                  |  4 +-
 .../breadCrumbs/breadCrumbs.component.ts      | 42 +++++++++++++------
 .../src/general-page.component.html           |  8 ++--
 .../blog-portfolio/src/project.component.html |  8 ++--
 .../careers/src/careers-page.component.html   |  8 ++--
 .../src/enterprises.component.html            |  4 +-
 .../for-clients/src/nonProfit.component.html  |  4 +-
 .../src/smallMediumBusinesses.component.html  |  4 +-
 .../for-clients/src/startups.component.html   |  4 +-
 .../home-page/src/main-page.component.html    | 12 +++---
 .../src/services-page.component.html          |  4 +-
 11 files changed, 60 insertions(+), 42 deletions(-)

diff --git a/apps/valor-software-site/src/app/404.component.ts b/apps/valor-software-site/src/app/404.component.ts
index bb6a4fc60..856753a1e 100644
--- a/apps/valor-software-site/src/app/404.component.ts
+++ b/apps/valor-software-site/src/app/404.component.ts
@@ -10,8 +10,8 @@ import { Component } from '@angular/core';
                     <h1 class="text-light_title_col text-8xl leading-100 md:text-250 md:leading-250 mb-4 font-bold">404</h1>
                     <p class="leading-40 text-grey_font_col text-center lg:text-left text-large font-bold mb-6">Ooops! You weren’t supposed to see this.</p>
                     <p class="text-base leading-6 text-light_title_col text-center lg:text-left">The page you’re looking for no longer exist. Return to the previous page and remember: you haven’t seen anything! </p>
-                    <button class="btn-pink w-full md:w-auto flex justify-center mt-8">
-                        <a [routerLink]="'/'"  class="w-full flex justify-center items-center">Go to the main page <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+                    <button class="w-full md:w-auto flex justify-center mt-8">
+                        <a [routerLink]="'/'"  class="btn-pink w-full flex justify-center items-center">Go to the main page <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
                     </button>
                 </div>
                 <div class="hidden lg:flex items-end">
diff --git a/libs/common-docs/src/components/breadCrumbs/breadCrumbs.component.ts b/libs/common-docs/src/components/breadCrumbs/breadCrumbs.component.ts
index 514ca9bbc..c3081f326 100644
--- a/libs/common-docs/src/components/breadCrumbs/breadCrumbs.component.ts
+++ b/libs/common-docs/src/components/breadCrumbs/breadCrumbs.component.ts
@@ -7,16 +7,17 @@ import { Router, UrlSegment } from "@angular/router";
     template:`
         <div *ngIf="segments && segments?.length && segments.length > 1">
             <div class="flex text-grey_font_col">
-                <p class="underline cursor-pointer" (click)="navigate()">Home</p>
+                <a href="javascript:void(0)" class="underline cursor-pointer" [routerLink]="[getRouteLink()]">Home</a>
                 <ng-container *ngFor="let segment of segments;let i = index">
                     <ng-container *ngIf="segment.title && segment.path">
                         <span>&nbsp;{{'>'}}&nbsp;</span>
-                        <p
-                                (click)="navigate(i)"
+                        <a
+                                href="javascript:void(0)"
+                                [routerLink]="[getRouteLink(i)]"
                                 [ngClass]="{'disabled': checkDisabled(i), 'underline cursor-pointer': !checkDisabled(i)}"
                         >
                             {{segment.title.toString() | titlecase}}
-                        </p>
+                        </a>
                     </ng-container>
                 </ng-container>
             </div>
@@ -63,23 +64,40 @@ export class BreadCrumbsComponent {
     }
 
     navigate(link?: number) {
-        if (!this.segments?.length) {
-            return;
-        }
+        // if (!this.segments?.length) {
+        //     return;
+        // }
+        //
+        // if (!link && link !== 0) {
+        //     this.router.navigate(['/']);
+        //     return;
+        // }
+        //
+        // link++;
+        // if (link >= this.segments.length) {
+        //     return;
+        // }
+        //
+        // const arr = this.segments.slice(0, link);
+        // const url = arr.map(url => url.path);
+        console.log(this.getRouteLink(link));
 
-        if (!link && link !== 0) {
-            this.router.navigate(['/']);
-            return;
+            // this.router.navigate([`/${url.join('/')}`]);
+    }
+
+    getRouteLink(link?: number): string {
+        if (!this.segments?.length || !link && link !== 0) {
+            return '/';
         }
 
         link++;
         if (link >= this.segments.length) {
-            return;
+            return '/';
         }
 
         const arr = this.segments.slice(0, link);
         const url = arr.map(url => url.path);
-        this.router.navigate([`/${url.join('/')}`]);
+        return `/${url.join('/')}`;
     }
 
     checkDisabled(index: number) {
diff --git a/libs/route-pages/blog-portfolio/src/general-page.component.html b/libs/route-pages/blog-portfolio/src/general-page.component.html
index ebf49d0c4..0bcb519c6 100644
--- a/libs/route-pages/blog-portfolio/src/general-page.component.html
+++ b/libs/route-pages/blog-portfolio/src/general-page.component.html
@@ -12,18 +12,18 @@ <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 m
                         <ng-template #blogPageDescription>{{activeArticle?.seoDescription | customSlice: 300}}</ng-template>
                     </p>
                     <ng-container *ngIf="!isBlogPage(); else blogPageButton">
-                        <button class="btn-pink w-full md:w-auto flex justify-center">
+                        <button class="w-full md:w-auto flex justify-center">
                             <ng-container *ngIf="activeProject && activeProject.name">
-                                <a href="javascript:void(0)" [routerLink]="[getRouteLink(activeProject.name)]" class="flex justify-center">
+                                <a href="javascript:void(0)" [routerLink]="[getRouteLink(activeProject.name)]" class="btn-pink flex justify-center">
                                     Visit this project<img src="assets/img/icons/arrow.svg" class="ml-2" alt="">
                                 </a>
                             </ng-container>
                         </button>
                     </ng-container>
                     <ng-template #blogPageButton>
-                        <button class="btn-pink w-full md:w-auto flex justify-center">
+                        <button class="w-full md:w-auto flex justify-center">
                             <ng-container *ngIf="activeArticle && activeArticle.title">
-                                <a href="javascript:void(0)" [routerLink]="[getRouteLink(activeArticle.title)]" class="flex justify-center">
+                                <a href="javascript:void(0)" [routerLink]="[getRouteLink(activeArticle.title)]" class="btn-pink flex justify-center">
                                     Check this article<img src="assets/img/icons/arrow.svg" class="ml-2" alt="">
                                 </a>
                             </ng-container>
diff --git a/libs/route-pages/blog-portfolio/src/project.component.html b/libs/route-pages/blog-portfolio/src/project.component.html
index f4f712a5a..a819c0f9f 100644
--- a/libs/route-pages/blog-portfolio/src/project.component.html
+++ b/libs/route-pages/blog-portfolio/src/project.component.html
@@ -12,8 +12,8 @@
                         <h1 class="text-light_title_col lg:text-center xl:text-left md:text-64 text-large md:leading-66 leading-44 mb-12 font-bold">{{project.name}}</h1>
                         <p class="leading-normal text-grey_font_col lg:mb-8 mb-14">{{project.description}}</p>
                         <div class="flex flex-col xl:flex-row md:items-center xl:items-start mb-5 xl:mb-0" *ngIf="project.link || project.behanceLink">
-                            <button class="btn-pink w-full lg:w-auto flex md:items-center xl:mr-6 mb-5 xl:mb-0 justify-center" *ngIf="project.link">
-                                <a class="flex justify-center items-center" [href]="project.link" target="_blank">Visit the site<img src="assets/img/icons/arrow.svg" class="ml-2 -rotate-45 mb-2" alt=""></a>
+                            <button class="w-full lg:w-auto flex md:items-center xl:mr-6 mb-5 xl:mb-0 justify-center" *ngIf="project.link">
+                                <a class="btn-pink flex justify-center items-center" [href]="project.link" target="_blank">Visit the site<img src="assets/img/icons/arrow.svg" class="ml-2 -rotate-45 mb-2" alt=""></a>
                             </button>
                             <button class="btn-dark-pink w-full lg:w-auto flex md:items-center xl:mr-6 mb-5 xl:mb-0 justify-center" *ngIf="project.behanceLink">
                                 <a class="flex justify-center items-center" [href]="project.behanceLink" target="_blank">
@@ -146,8 +146,8 @@ <h1 class="main-title">Next Project</h1>
                         </div>
                     </a>
 
-                    <button class="btn-pink w-full md:w-auto flex items-center self-end">
-                        <a class="flex justify-center items-center mx-auto" [routerLink]="'/portfolio'">Visit all projects<img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+                    <button class="w-full md:w-auto flex items-center self-end">
+                        <a class="btn-pink flex justify-center items-center mx-auto" [routerLink]="'/portfolio'">Visit all projects<img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
                     </button>
                 </div>
             </div>
diff --git a/libs/route-pages/careers/src/careers-page.component.html b/libs/route-pages/careers/src/careers-page.component.html
index e4d6b03ab..fc5f78d10 100644
--- a/libs/route-pages/careers/src/careers-page.component.html
+++ b/libs/route-pages/careers/src/careers-page.component.html
@@ -3,8 +3,8 @@
         <div class="max-w-600">
             <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 mb-12 font-bold">Who we are</h1>
             <p class="leading-normal text-grey_font_col lg:mb-8 mb-14">Professional and friendly with our clients and co-workers, we treat each other as we would want to be treated. Our working environment emphasizes equality, transparency... and a pet-friendly atmosphere! That's what Valor is all about :)</p>
-            <button class="btn-pink w-full md:w-auto flex">
-                <a href="https://valorsoftware.recruitee.com/" target="_blank" class="w-full flex justify-center items-center">Check the openings<img src="assets/img/icons/arrow.svg" class="ml-2 -rotate-45 mb-2" alt=""></a>
+            <button class="w-full md:w-auto flex">
+                <a href="https://valorsoftware.recruitee.com/" target="_blank" class="btn-pink w-full flex justify-center items-center">Check the openings<img src="assets/img/icons/arrow.svg" class="ml-2 -rotate-45 mb-2" alt=""></a>
             </button>
         </div>
         <div class="hidden lg:block">
@@ -52,8 +52,8 @@ <h2 class="text-feedback_font_col text-left text-32 lg:text-56 font-bold leading
             <div class="block lg:hidden">
                 <img src="assets/img/bg-img/careers/rock_it.svg" alt="">
             </div>
-            <button class="btn-pink w-full md:w-auto flex mt-4 lg:mt-0">
-                <a href="https://valorsoftware.recruitee.com/" target="_blank" class="w-full flex justify-center items-center">Join us<img src="assets/img/icons/arrow.svg" class="ml-2 -rotate-45 mb-2" alt=""></a>
+            <button class="w-full md:w-auto flex mt-4 lg:mt-0">
+                <a href="https://valorsoftware.recruitee.com/" target="_blank" class="btn-pink w-full flex justify-center items-center">Join us<img src="assets/img/icons/arrow.svg" class="ml-2 -rotate-45 mb-2" alt=""></a>
             </button>
         </div>
     </div>
diff --git a/libs/route-pages/for-clients/src/enterprises.component.html b/libs/route-pages/for-clients/src/enterprises.component.html
index d2542ab95..f36bee140 100644
--- a/libs/route-pages/for-clients/src/enterprises.component.html
+++ b/libs/route-pages/for-clients/src/enterprises.component.html
@@ -7,8 +7,8 @@
             <div class="lg:max-w-600">
                 <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 mb-12 font-bold">Accelerating your enterprise technologies</h1>
                 <p class="leading-normal text-grey_font_col lg:mb-8 mb-14">We blend a business-oriented approach with deep technical expertise to help you solve the toughest challenges within your enterprise in a snap of fingers. It doesn’t matter if it’s cloud migration, optimization, implementation of new technologies, or underpinning everything with security — our industry competence will help you on this journey.</p>
-                <button class="btn-pink w-full md:w-auto flex">
-                    <a [routerLink]="'/portfolio'" class=" w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+                <button class="w-full md:w-auto flex">
+                    <a [routerLink]="'/portfolio'" class="btn-pink w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
                 </button>
             </div>
             <div class="hidden lg:block">
diff --git a/libs/route-pages/for-clients/src/nonProfit.component.html b/libs/route-pages/for-clients/src/nonProfit.component.html
index a8213d4f9..779bbcae2 100644
--- a/libs/route-pages/for-clients/src/nonProfit.component.html
+++ b/libs/route-pages/for-clients/src/nonProfit.component.html
@@ -7,8 +7,8 @@
             <div class="lg:max-w-600">
                 <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 mb-12 font-bold">Building reliable software time and budget-wise</h1>
                 <p class="leading-normal text-grey_font_col lg:mb-8 mb-14">A strong desire to change the world for the better and improve people's quality of life is one of the core drivers for Valor Software. That is why we have by now broad expertise in working with non-profit organizations (NPOs), including non-governmental organizations. We know the specifics of approaching projects of this kind, and we know how to deliver the result, setting the priorities right.</p>
-                <button class="btn-pink w-full md:w-auto flex">
-                    <a [routerLink]="'/portfolio'" class=" w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+                <button class="w-full md:w-auto flex">
+                    <a [routerLink]="'/portfolio'" class="btn-pink w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
                 </button>
             </div>
             <div class="hidden lg:block">
diff --git a/libs/route-pages/for-clients/src/smallMediumBusinesses.component.html b/libs/route-pages/for-clients/src/smallMediumBusinesses.component.html
index 7a70b3cfa..d55db655c 100644
--- a/libs/route-pages/for-clients/src/smallMediumBusinesses.component.html
+++ b/libs/route-pages/for-clients/src/smallMediumBusinesses.component.html
@@ -7,8 +7,8 @@
             <div class="max-w-600">
                 <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 mb-12 font-bold">Helping your business to grow</h1>
                 <p class="leading-normal text-grey_font_col lg:mb-8 mb-14">Seeking a reliable partner with transparent processes who is available for long-term business relationships? — Search no more! Valor Software is here to become your trusted software development associate and collaborate on your brilliant idea to boost your business above and beyond!</p>
-                <button class="btn-pink w-full md:w-auto flex">
-                    <a [routerLink]="'/portfolio'" class="w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+                <button class="w-full md:w-auto flex">
+                    <a [routerLink]="'/portfolio'" class="btn-pink w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
                 </button>
             </div>
             <div class="hidden lg:block">
diff --git a/libs/route-pages/for-clients/src/startups.component.html b/libs/route-pages/for-clients/src/startups.component.html
index e088cc30a..d347a7853 100644
--- a/libs/route-pages/for-clients/src/startups.component.html
+++ b/libs/route-pages/for-clients/src/startups.component.html
@@ -7,8 +7,8 @@
             <div class="lg:max-w-600">
                 <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 mb-12 font-bold">Turning your idea into reality</h1>
                 <p class="leading-normal text-grey_font_col lg:mb-8 mb-14">Being startup entrepreneurs ourselves, we are here to support you at all stages: from pre-revenue inception to launch. Valor Software helps startups solidify their vision, develop minimum viable product (MVP) that will show the essence of your solution and its value, and launch to market with a Cloud-First scale.</p>
-                <button class="btn-pink w-full md:w-auto flex">
-                    <a [routerLink]="'/portfolio'" class=" w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+                <button class="w-full md:w-auto flex">
+                    <a [routerLink]="'/portfolio'" class="btn-pink w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
                 </button>
             </div>
             <div class="hidden lg:block">
diff --git a/libs/route-pages/home-page/src/main-page.component.html b/libs/route-pages/home-page/src/main-page.component.html
index d37c082ed..3fbe9cefb 100644
--- a/libs/route-pages/home-page/src/main-page.component.html
+++ b/libs/route-pages/home-page/src/main-page.component.html
@@ -50,8 +50,8 @@ <h3 [innerHTML]="slide.title" class=" swiper-no-swiping md:text-large font-bold
                     <ul class="list-disc text-grey_font_col pl-5 swiper-no-swiping">
                         <li *ngFor="let item of slide.list" class="mb-4 swiper-no-swiping">{{item}}</li>
                     </ul>
-                    <button class="btn-pink flex justify-center md:justify-between mt-10 w-full md:w-auto">
-                        <a [routerLink]="['blog']" class="flex justify-center w-full">Visit blog <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+                    <button class="flex justify-center md:justify-between mt-10 w-full md:w-auto">
+                        <a [routerLink]="['blog']" class="btn-pink flex justify-center w-full">Visit blog <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
                     </button>
                 </div>
                 <div class="max-w-140 md:max-w-full mb-6 md:mb-0">
@@ -93,8 +93,8 @@ <h1 class="main-title">Technology</h1>
                 </div>
             </div>
 
-            <button class="btn-pink mx-auto flex">
-                <a [routerLink]="'/portfolio'" class="flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+            <button class="mx-auto flex">
+                <a [routerLink]="'/portfolio'" class="btn-pink flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
             </button>
         </div>
     </div>
@@ -125,7 +125,7 @@ <h3 class="md:text-large text-32 lg:text-56 text-light_title_col lg:leading-66 l
                                     <li class="leading-4 mb-4" *ngFor="let item of slide.list">{{item}}</li>
                                 </ul>
                             </div>
-                            <button class="btn-pink flex justify-between"><a class="flex justify-between items-center" [href]="slide.link" target="_blank">Visit {{slide.name}}<img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a></button>
+                            <button class="flex justify-between"><a class="btn-pink flex justify-between items-center" [href]="slide.link" target="_blank">Visit {{slide.name}}<img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a></button>
                         </div>
                         <div class="max-w-65% flex flex-col justify-center items-center text-light_title_col">
                             <img [src]="slide.img" [alt]="slide.name + 'icon'">
@@ -165,7 +165,7 @@ <h3 class="md:text-large text-32 lg:text-56 text-light_title_col lg:leading-66 l
                                 <p class="text-large cursor-pointer" *ngIf="slide.npmLink"><a [href]="slide.npmLink" target="_blank">{{slide.downloads | number}}</a></p>
                             </ng-container>
                         </div>
-                        <button class="btn-pink flex justify-center w-full mt-24"><a class="flex justify-between items-center" [href]="slide.link" target="_blank">Visit {{slide.name}}<img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a></button>
+                        <button class="flex justify-center w-full mt-24"><a class="btn-pink flex justify-between items-center" [href]="slide.link" target="_blank">Visit {{slide.name}}<img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a></button>
                     </div>
                 </ng-template>
             </swiper>
diff --git a/libs/route-pages/services-page/src/services-page.component.html b/libs/route-pages/services-page/src/services-page.component.html
index 31cef2e07..f6549c445 100644
--- a/libs/route-pages/services-page/src/services-page.component.html
+++ b/libs/route-pages/services-page/src/services-page.component.html
@@ -3,8 +3,8 @@
         <div class="max-w-600">
             <h1 class="text-light_title_col md:text-64 text-large md:leading-66 leading-44 mb-12 font-bold">Full-cycle software development for your business </h1>
             <p class="leading-normal text-grey_font_col lg:mb-8 mb-14">We can help you cover all aspects of software development, including UX/UI design, custom web and mobile development, QA services, business analysis, and content writing. With the help of our Technical Writers, you’ll have all the documentation ready for smooth product maintenance in the future.</p>
-            <button class="btn-pink w-full md:w-auto flex">
-                <a [routerLink]="'/portfolio'" class="w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
+            <button class="w-full md:w-auto flex">
+                <a [routerLink]="'/portfolio'" class="btn-pink w-full flex justify-center items-center">Visit portfolio <img src="assets/img/icons/arrow.svg" class="ml-2" alt=""></a>
             </button>
         </div>
         <div class="hidden lg:block">

From 42d462afa20b972c153659ec74bb5840cc7623aa Mon Sep 17 00:00:00 2001
From: SvetlanaMuravlova <svetlana.muravlova@valor-software.com>
Date: Tue, 21 Jun 2022 20:56:12 +0300
Subject: [PATCH 4/4] cleaning

---
 .../breadCrumbs/breadCrumbs.component.ts      | 22 -------------------
 1 file changed, 22 deletions(-)

diff --git a/libs/common-docs/src/components/breadCrumbs/breadCrumbs.component.ts b/libs/common-docs/src/components/breadCrumbs/breadCrumbs.component.ts
index c3081f326..2bef3bbf9 100644
--- a/libs/common-docs/src/components/breadCrumbs/breadCrumbs.component.ts
+++ b/libs/common-docs/src/components/breadCrumbs/breadCrumbs.component.ts
@@ -63,28 +63,6 @@ export class BreadCrumbsComponent {
         });
     }
 
-    navigate(link?: number) {
-        // if (!this.segments?.length) {
-        //     return;
-        // }
-        //
-        // if (!link && link !== 0) {
-        //     this.router.navigate(['/']);
-        //     return;
-        // }
-        //
-        // link++;
-        // if (link >= this.segments.length) {
-        //     return;
-        // }
-        //
-        // const arr = this.segments.slice(0, link);
-        // const url = arr.map(url => url.path);
-        console.log(this.getRouteLink(link));
-
-            // this.router.navigate([`/${url.join('/')}`]);
-    }
-
     getRouteLink(link?: number): string {
         if (!this.segments?.length || !link && link !== 0) {
             return '/';