refactor(our-work): translation and color variables

Author: luiskcs89

src/assets/i18n/en.ts

@@ -462,6 +462,7 @@ export const translations = {
         button: 'View Project',
       },
       worked_with: "Who We've Worked With",
+      more_projects: 'More Projects',
     },
 
     cta: {

src/pages/app-our-work-single/app-our-work-single.scss

@@ -41,7 +41,7 @@
       }
 
       h1 {
-        color: #ffffff;
+        color: $white;
         font-family: 'Muli';
         font-size: 48px;
         font-weight: 600;
@@ -61,7 +61,7 @@
       }
 
       p {
-        color: #ffffff;
+        color: $white;
         font-family: 'Muli';
         font-size: 18px;
         font-weight: 400;
@@ -132,7 +132,7 @@
       }
     }
     h2 {
-      color: #333333;
+      color: $gray-dark;
       font-family: 'Muli';
       font-size: 42px;
       font-weight: 600;
@@ -152,7 +152,7 @@
 
     p {
       margin-top: 30px;
-      color: #292a2d;
+      color: $gray-dark;
       font-family: 'Muli';
       font-size: 18px;
       font-weight: 400;
@@ -202,7 +202,7 @@
     margin-top: 80px;
 
     .key-features-text {
-      background-color: #292a2d;
+      background-color: $gray-dark;
       padding-bottom: 36px;
       padding-top: 60px;
 
@@ -282,7 +282,7 @@
     }
 
     h2 {
-      color: #292a2d;
+      color: $gray-dark;
       font-family: 'Muli';
       font-size: 52px;
       font-weight: 600;
@@ -341,7 +341,7 @@
       }
 
       button {
-        background-color: #292a2d;
+        background-color: $gray-dark;
         border-radius: 16px;
         box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5);
         width: 188px;
@@ -358,7 +358,7 @@
 
       .more-project-single {
         p {
-          color: #292a2d;
+          color: $gray-dark;
           font-family: 'Muli';
           font-size: 28px;
           font-weight: 600;

src/pages/app-our-work-single/app-our-work-single.tsx

@@ -286,7 +286,9 @@ export class AppOurWorkSingle {
         </section>
         <section class="more-projects container">
           <h2 class="aside-lines">
-            <span>More Projects</span>
+            <span>
+              <app-translate keyword="ourWork.more_projects" />
+            </span>
           </h2>
           <div class="more-projects-items">{this.getOtherProjects()}</div>
         </section>

src/styles/_variables.scss

@@ -22,6 +22,7 @@ $yellow: #d8aa0c !default;
 $green: #28a745 !default; // TODO
 $primary: $orange !default;
 $info: $blue !default;
+$white: #ffffff;
 
 // Options
 $enable-gradients: true !default;