feat(portfolio): blackout page

angular.json

@@ -485,6 +485,55 @@
         "common-docs"
       ]
     },
+    "route-pages-blackout-page": {
+      "projectType": "library",
+      "root": "libs/route-pages/blackout-page",
+      "sourceRoot": "libs/route-pages/blackout-page/src",
+      "prefix": "valor-software-site-base",
+      "architect": {
+        "build": {
+          "builder": "@nrwl/angular:ng-packagr-lite",
+          "outputs": [
+            "dist/libs/route-pages/blackout-page"
+          ],
+          "options": {
+            "project": "libs/route-pages/blackout-page/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "libs/route-pages/blackout-page/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "libs/route-pages/blackout-page/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "outputs": [
+            "coverage/libs/route-pages/blackout-page"
+          ],
+          "options": {
+            "jestConfig": "libs/route-pages/blackout-page/jest.config.ts",
+            "passWithNoTests": true
+          }
+        },
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/route-pages/blackout-page/src/**/*.ts",
+              "libs/route-pages/blackout-page/src/**/*.html"
+            ]
+          }
+        }
+      },
+      "tags": [],
+      "implicitDependencies": [
+        "common-docs"
+      ]
+    },
     "route-pages-for-clients": {
       "projectType": "library",
       "root": "libs/route-pages/for-clients",

apps/valor-software-site/src/assets/portfolio/clients/blackout.json

@@ -0,0 +1,13 @@
+{
+  "name": "Blackout",
+  "description": "A unique iPad application that helps set up and control lighting at the stage, or film set which is used in actual Hollywood movies!",
+  "link": "https://www.blackout-app.com/",
+  "previewImg": "assets/img/bg-img/blackout_page/bg_header.png",
+  "headerImg": "assets/img/bg-img/blackout_page/bg_header.png",
+  "sortServices": ["web"],
+  "sortTechnologies":  ["angular", "ngrx", "native_script"],
+  "aspects": {
+    "technology_stack": ["angular", "ngrx", "native_script"],
+    "services_provided": ["Frontend"]
+  }
+}

apps/valor-software-site/src/assets/portfolio/portfolio.list.ts

@@ -1,4 +1,5 @@
 export const projectsList = [
+    'Blackout',
     'Booking',
     'Ashes of Creation',
     'Terminus',

apps/valor-software-site/src/index.html

@@ -51,4 +51,4 @@ <h2>Click <a href="https://valor-software.com" title='Valor site' target='blank'
 <valor-software-site-base-root></valor-software-site-base-root>
 <script async src='assets/js/prettify.min.js'></script>
 </body>
-</html>
+</html>

libs/common-docs/src/common-docs.module.ts

@@ -31,6 +31,7 @@ import { UtilService } from './services/utils.service';
 import { TechnologiesCardComponent } from './components/technologies-card/technologies-card.component';
 import { TechnologiesComponent } from './components/technologies/technologies.component';
 import { CookieConsentBannerComponent } from './components/cookie-consent-banner/cookie-consent-banner.component';
+import { DeliverableCardComponent } from './components/deliverable-card.component/deliverable-card.component';
 
 export { PopoverComponent } from './components/popover/popover.component';
 export { TopMenuComponent } from './components/top-menu/top-menu.component';
@@ -65,6 +66,8 @@ export { ITechnologiesCard } from './components/technologies-card/technologies-c
 export { UtilService } from './services/utils.service';
 export { technologiesAndServices } from './components/technologies/technologies-and-services';
 export { CookieConsentBannerComponent } from './components/cookie-consent-banner/cookie-consent-banner.component';
+export { DeliverableCardComponent } from './components/deliverable-card.component/deliverable-card.component';
+export { DeliverableCard } from './components/deliverable-card.component/deliverable-card.component';
 
 @NgModule({
 	declarations: [
@@ -87,7 +90,8 @@ export { CookieConsentBannerComponent } from './components/cookie-consent-banner
 		ChallengeCardComponent,
 		TechnologiesCardComponent,
 		TechnologiesComponent,
-		CookieConsentBannerComponent
+		CookieConsentBannerComponent,
+    DeliverableCardComponent
 	],
 	imports: [
 		CommonModule,
@@ -116,7 +120,8 @@ export { CookieConsentBannerComponent } from './components/cookie-consent-banner
 		ChallengeCardComponent,
 		TechnologiesCardComponent,
 		TechnologiesComponent,
-		CookieConsentBannerComponent
+		CookieConsentBannerComponent,
+    DeliverableCardComponent
 	],
 	providers: [
 		ModalService,

libs/common-docs/src/components/deliverable-card.component/deliverable-card.component.html

@@ -0,0 +1,47 @@
+<ng-container *ngIf="deliverable">
+  <div class="bg-grey lg:p-10 p-4">
+    <div class="lg:mb-10 mb-11">
+      <h2 class="text-light_title_col text-left lg:m-l0 text-32 lg:text-40 font-bold mb-4 ">
+        {{deliverable.title}}</h2>
+
+      <ng-container *ngIf="deliverable.hierarchyList && deliverable.hierarchyList.length > 0">
+
+        <div *ngFor="let item of deliverable.hierarchyList; let i = index" class="pb-0 md:pb-10 ">
+          <ng-container *ngIf="item.descriptions && item.descriptions.length > 0">
+            <p *ngFor="let description of item.descriptions; let i = index"
+              class="text-grey_font_col text-left text-16 tracking-tightest lg:w-[70%]"
+              [style.margin-bottom]=" i !== (item.descriptions.length + 1) ? '16px' : '0'" [innerHtml]="description">
+            </p>
+          </ng-container>
+          <p class="font-bold  text-light_title_col leading-6 md:leading-8 lg:mb-4 lg:text-24 text-16 w-7/12">
+            {{item.title}}</p>
+          <div class="flex flex-col gap-4">
+            <div class="flex flex-row gap-4 items-center ml-2" *ngFor="let subItem of item.subItems;let i = index">
+              <div class="pink-circle bg-transparent"></div>
+              <p class="ml-4 text-grey_font_col tracking-tightest text-2 w-full">{{subItem}}</p>
+            </div>
+          </div>
+
+          <div class="flex flex-column lg:flex-row gap-10">
+            <div *ngFor="let img of item.imgs" class="my-10" [class.w-full]="deliverable.fullWidthImg">
+              <img [src]="img" class="w-full">
+            </div>
+          </div>
+        </div>
+      </ng-container>
+
+      <p *ngFor="let description of deliverable.descriptions; let i = index"
+        class="text-grey_font_col text-left text-16 tracking-tightest lg:w-[70%]"
+        [style.margin-bottom]=" i !== (deliverable.descriptions.length + 1) ? '16px' : '0'" [innerHtml]="description">
+      </p>
+    </div>
+
+    <div class="flex flex-column lg:flex-row gap-10">
+      <div *ngFor="let img of deliverable.imgs" class="my-10" [class.w-full]="deliverable.fullWidthImg">
+        <img [src]="img" class="w-full">
+      </div>
+    </div>
+
+    <impact-card [impactCardList]="deliverable.impact"></impact-card>
+  </div>
+</ng-container>

libs/common-docs/src/components/deliverable-card.component/deliverable-card.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+
+export type DeliverableCard = {
+  title: string;
+  descriptions: string[];
+  imgs: string[];
+  impact: string[][];
+  fullWidthImg?: boolean;
+  hierarchyList?: { descriptions?: string[]; title: string, subItems?: string[], imgs: string[] }[];
+};
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'deliverable-card',
+  templateUrl: './deliverable-card.component.html'
+})
+
+
+export class DeliverableCardComponent {
+  @Input() deliverable?: DeliverableCard;
+
+}

libs/route-pages/blackout-page/.eslintrc.json

@@ -0,0 +1,46 @@
+{
+  "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": {}
+    }
+  ]
+}

libs/route-pages/blackout-page/README.md

@@ -0,0 +1,9 @@
+# route-pages-blackout-page
+
+This library was generated with [Nx](https://nx.dev).
+
+
+## Running unit tests
+
+Run `nx test route-pages-terminus-page` to execute the unit tests.
+

libs/route-pages/blackout-page/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/libs/route-pages/blackout-page",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

libs/route-pages/blackout-page/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@valor-software/blackout-page",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^12.2.0",
+    "@angular/core": "^12.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}