Ashes page

angular.json

@@ -197,6 +197,52 @@
       },
       "tags": []
     },
+    "route-pages-ashes-page": {
+      "projectType": "library",
+      "root": "libs/route-pages/ashes-page",
+      "sourceRoot": "libs/route-pages/ashes-page/src",
+      "prefix": "ashes",
+      "targets": {
+        "build": {
+          "executor": "@nrwl/angular:ng-packagr-lite",
+          "outputs": [
+            "dist/libs/route-pages/ashes-page"
+          ],
+          "options": {
+            "project": "libs/route-pages/ashes-page/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "libs/route-pages/ashes-page/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "libs/route-pages/ashes-page/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "executor": "@nrwl/jest:jest",
+          "outputs": [
+            "coverage/libs/route-pages/ashes-page"
+          ],
+          "options": {
+            "jestConfig": "libs/route-pages/ashes-page/jest.config.js",
+            "passWithNoTests": true
+          }
+        },
+        "lint": {
+          "executor": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/route-pages/ashes-page/src/**/*.ts",
+              "libs/route-pages/ashes-page/src/**/*.html"
+            ]
+          }
+        }
+      },
+      "tags": []
+    },
     "route-pages-blog-portfolio": {
       "projectType": "library",
       "root": "libs/route-pages/blog-portfolio",

apps/valor-software-site/src/assets/portfolio/clients/ashes-of-creation.json

@@ -0,0 +1,113 @@
+{
+  "name": "Ashes Of Creation",
+  "description": "A web platform and an online shop for the game studio working on the MMORPG Ashes of Creation.",
+  "link": "https://ashesofcreation.com/",
+  "behanceLink": "https://ashesofcreation.com/",
+  "dribbleLink": "https://ashesofcreation.com/",
+  "previewImg": "assets/img/bg-img/ashes_page/sso_bg.svg",
+  "headerImg": "assets/img/bg-img/ashes_page/header_bg.svg",
+  "background": [
+    "Intrepid Studios, authors of the most anticipated MMORPG – Ashes of Creation, inspire unity and bring people together through the game. Avoiding pay-to-win or cash grab elements, they simply create games the way people want them to be, with great respect and devotion to the community.",
+    "“I want to see the players dictate the direction of our story. I want to see the AoC world adapts and reacts to the player’s actions. Most importantly, I want to see a game built by gamers FOR gamers.” – says Steven Sharif, the Creative Director of Ashes of Creation, describing what stands behind the idea of AoC.",
+    "Ashes of Creation hasn’t just offered a beautiful fantasy world with over 100 locations but redefined the MMORPG genre giving the community the power to participate in the direction of the world's development and influence literally every aspect of the game. However the Ashes of Creation universe is more than just the game client, it also needs a great website for people to discover the game, dive deeper into the lore, meet the community and pick up the latest merch. This is the direction where Valor’s team had a big time of success."
+  ],
+  "challenge": [
+    "Ashes of Creation has a huge number of fans, and we wanted to ensure they get incredible experience not just with the game, but the website around Ashes of Creation. The existing solution couldn’t meet the company’s goals for growth and represent the brand properly after it matured. We helped Ashes of Creation address their community’s willingness to connect, purchase merch and cosmetics and launched a new website that can grow together with the brand.",
+    "Also, as AoC has matured, the technologies and services they've been using have naturally evolved. Some are no longer supported, and some became too expensive or irrelevant for the company. From this occurs the second part of our mission – to refactor the codebase, remove expired services, and optimize the number of servers used, correspondingly – the budget associated with maintenance."
+  ],
+  "deliverables": [
+    {
+      "text": "A Brand New UI/UX and a New Web Platform",
+      "description": "We took our in-depth knowledge of the MMORPG’s industry and our knowledge of eCommerce and web development and brought those together to give our customers a new web platform.",
+      "comparisons": [
+        {
+          "beforeImg": "assets/img/bg-img/ashes_page/login_old.png",
+          "afterImg": "assets/img/bg-img/ashes_page/login_new.png"
+        },
+        {
+          "beforeImg": "assets/img/bg-img/ashes_page/items_old.png",
+          "afterImg": "assets/img/bg-img/ashes_page/items_new.png"
+        },
+        {
+          "beforeImg": "assets/img/bg-img/ashes_page/checkout_old.png",
+          "afterImg": "assets/img/bg-img/ashes_page/checkout_new.png"
+        }
+      ],
+      "technologies":  [
+        "javascript",
+        "scully",
+        "g_analytics",
+        "ecommerce_marketing",
+        "tailwind"
+      ],
+      "impact": [
+        "Better reliability for updates",
+        "Performance that matches the latest web standards – 99 Lighthouse score",
+        "Improved UX",
+        "Better Google indexation",
+        "Less complexity and deeper integrations with third-party services, e.g. Discord"
+      ],
+      "centerButton": {
+        "text": "Visit a case study to learn more",
+        "link": "/projects"
+      }
+    },
+    {
+      "text": "Modernization of a Single Sign-On Authentication (SSO)",
+      "description": "As the project has grown remarkably, we had to ensure that their authentication and authorization setup can guarantee the highest security and data protection. Aiming to reduce the number of databases that added complexity to their existing solution, increase app security and eliminate obsolete codebase, we decided to build a new single sign-on (SSO).",
+      "technologies": [
+        "node_js",
+        "aws",
+        "nest_js",
+        "postgre_sql",
+        "mongo_db",
+        "sentry",
+        "azure_play_fab"
+      ],
+      "impact": [
+        "Higher readability and reliability of the platform",
+        "Improved interactions with the database and SSO calls",
+        "Higher platform visibility and improved troubleshooting"
+      ],
+      "bgImg": "assets/img/bg-img/ashes_page/sso_bg.svg"
+    },
+    {
+      "text": "Transition to Nx Monorepo",
+      "description": "Embracing code sharing between applications, simplified deployments, and generally less pain in life, we\"ve introduced Nx. While standardizing code and libraries, Nx eliminates a chance for \"spaghetti\" code and allows to store all the applications of AoC in one shared repository. This and the fact that Nx give engineers exclusive control of builds and dependencies enhanced the team performance. Now, instead of testing the whole platform, they can build and test only the projects affected by the change in Nx Monorepo.",
+      "bgImg": "assets/img/bg-img/ashes_page/nx_bg.svg"
+    },
+    {
+      "text": "Automated content updates",
+      "description": "More importantly, we’ve automated the flow for content updates, allowing Content Managers to push updates from Contentful directly to a new Scully build once they press Publish. Before, it was impossible without engineers who had to manually clear cache and make a deployment.",
+      "technologies": [
+        "contentful",
+        "scully",
+        "github_actions"
+      ],
+      "impact": [
+        "Advanced automation and faster content updates",
+        "Reduced number of repositories",
+        "Code is modular and can be reused",
+        "Code structure and quality meets industry best practices",
+        "Improved code documentation, faster onboarding for new engineers"
+      ],
+      "bgImg": "assets/img/bg-img/ashes_page/automated_bg.svg"
+    },
+    {
+      "text": "Deployment of Payment Systems",
+      "description": "To provide users with more payment options, we integrated PayPal and Stripe payment systems into the AoC web platform.",
+      "impact": [
+        "Saved money for processing charges, as Xsolla, their existing solution, charges 5% of transactions",
+        "With these integrations, we increased the availability of AoC products for users located worldwide",
+        "Also, we increased the security of online purchases as Stripe and PayPal prevent credit card fraud."
+      ],
+      "bgImg": "assets/img/bg-img/ashes_page/payment_bg.svg"
+    }
+  ],
+  "feedback": {
+    "text": "We’ve been working with Valor, and they have been doing some amazing stuff with the website. They have a great dedicated team of professionals who we have had an absolute pleasure working with to help support our platform needs. Those who might be in the enterprise business and need technical support and web development support, I would give a major shout-out to the Valor team. They’re doing a great job!",
+    "img": "assets/img/feedback/ashes_of_creation.jpg",
+    "author": "Steven Sharif",
+    "position": "the Creative Director of Ashes of Creation"
+  }
+}

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

@@ -11,6 +11,7 @@ export const projectsList = [
     'StackBlitz',
     'Renaizant',
     'Cinnabon',
+    'Ashes Of Creation',
     'NgTalks',
     'Qualtrax',
     'ThisDot',

apps/valor-software-site/src/assets/styles/styles.scss

@@ -79,3 +79,8 @@ pre, code {
 
 
 
+.img-comparison-slider {
+  --divider-width: 4px;
+  --divider-color: #989898;
+  --default-handle-opacity: 0;
+}

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

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PopoverComponent } from './components/popover/popover.component';
 import { TopMenuComponent } from './components/top-menu/top-menu.component';
@@ -22,6 +22,8 @@ import { GetArticlesService } from './services/getArticles.service';
 import { RECAPTCHA_V3_SITE_KEY, RecaptchaV3Module } from 'ng-recaptcha';
 import { GetPortfolioService } from "./services/getPortfolio.service";
 import { CustomSlicePipe } from './pipes/customSlice.pipe';
+import { ComparisonSliderComponent } from './components/comparison-slider/comparison-slider.component';
+import { TechnologiesComponent } from './components/technologies/technologies.component';
 
 export { PopoverComponent } from './components/popover/popover.component';
 export { TopMenuComponent } from './components/top-menu/top-menu.component';
@@ -58,7 +60,9 @@ export { OLD_ROUTES_FROM_OLD_SITE } from "./tokens/linksFromOldSite.token";
     ShowHideDirective,
     BlogPreviewComponent,
     BlogPortfolioItemComponent,
-    CustomSlicePipe
+    CustomSlicePipe,
+    ComparisonSliderComponent,
+    TechnologiesComponent,
   ],
   imports: [CommonModule, RouterModule, ReactiveFormsModule, HttpClientModule, FileUploaderModule, SwiperModule, RecaptchaV3Module],
   exports: [
@@ -72,12 +76,15 @@ export { OLD_ROUTES_FROM_OLD_SITE } from "./tokens/linksFromOldSite.token";
     BlogPreviewComponent,
     BlogPortfolioItemComponent,
     CustomSlicePipe,
+    ComparisonSliderComponent,
+    TechnologiesComponent
   ],
   providers: [ModalService, SendEmailService, GetArticlesService, GetPortfolioService,
     {
       provide: RECAPTCHA_V3_SITE_KEY,
       useValue: '6LctnKQdAAAAABGStzrEdBnCWVYwkqAafI7pcUz3',
     }
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class CommonDocsModule {}

libs/common-docs/src/components/comparison-slider/comparison-slider.component.html

@@ -0,0 +1,27 @@
+<div *ngIf="comparisonImg" class="mb-10 md:mb-0">
+  <img-comparison-slider class="img-comparison-slider">
+    <figure slot="first" class="before m-0 ">
+      <img width="100%" [src]="comparisonImg.beforeImg">
+    </figure>
+    <figure slot="second" class="after m-0 ">
+      <img width="100%" [src]="comparisonImg.afterImg">
+    </figure>
+    <img slot="handle" class="self-center left-0 top-0 text-center m-autow-fullh-full "
+         src="assets/img/icons/arrow-circle.svg">
+  </img-comparison-slider>
+  <div class="relative flex justify-between bottom-10n md:bottom-24 px-12">
+    <div
+      class="w-62 h-8 md:w-104 md:h-14 text-center rounded-6 p-2 md:p-4 {{buttonClasses ? buttonClasses : 'bg-light_title_col md:bg-real_dark_grey text-real_dark_grey md:text-white'}}">
+      <p class="text-16 md:text-24 leading-4 md:leading-6">
+        {{comparisonImg.beforeText || 'Before'}}
+      </p>
+    </div>
+
+    <div
+      class="w-62 h-8 md:w-104 md:h-14 text-center rounded-6 p-2 md:p-4 {{buttonClasses ? buttonClasses : 'bg-light_title_col md:bg-real_dark_grey text-real_dark_grey md:text-white'}}">
+      <p class="text-16 md:text-24 leading-4 md:leading-6">
+        {{comparisonImg.afterText || 'After'}}
+      </p>
+    </div>
+  </div>
+</div>

libs/common-docs/src/components/comparison-slider/comparison-slider.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import 'img-comparison-slider';
+
+export interface IComparisonSlider {
+  beforeImg: string;
+  afterImg: string;
+  beforeText?: string;
+  afterText?: string;
+}
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'comparison-slider',
+  templateUrl: './comparison-slider.component.html'
+})
+export class ComparisonSliderComponent {
+  @Input() comparisonImg?: IComparisonSlider;
+  @Input() buttonClasses?: string;
+}