diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index d9fddb964..de8d03fcd 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -24,6 +24,16 @@
"and": "and",
"build": "Build"
},
+ "LANDING": {
+ "quick_access_toolbar": "Quick access to layers inspection, zooming functionalities and 3D mode, with the addition of the codegen editor (see below for more details).",
+ "quick_access_preview_download": "Quick access and download the original design as it was exported by SketchApp.",
+ "design_editor_info": "A fully fledged design viewer with both 2D and 3D inspection mode allowing you to access all the layers of your design.",
+ "sketch_layer_list": "Quickly access and inspect the layers hierarchy of the Sketch design.",
+ "property_panel": "Complementary property inspector of each layer including size and dimensions, style information and much more.",
+ "code_editor_options": "Additional export options to external editors and IDEs, and a handy archive download feature for local development.",
+ "code_editor_tech_list": "Many ouput Web technologies including but not limited to Angular, Vue.js, React, Web Components, etc...",
+ "code_editor_content": "A code editor to quickly view the generated code of the current design for the selected technology."
+ },
"DROPZONE": {
"text": "Drop Your Design File Here"
},
diff --git a/src/assets/i18n/nl.json b/src/assets/i18n/nl.json
index 8f54a4fcb..032b00370 100644
--- a/src/assets/i18n/nl.json
+++ b/src/assets/i18n/nl.json
@@ -24,6 +24,16 @@
"and": "en",
"build": "Versie"
},
+ "LANDING": {
+ "quick_access_toolbar": "Snelle toegang om de verschillende lagen te kunnen bekijken, zoomfuncties, 3D-modues en de codegen-editor",
+ "quick_access_preview_download": "Eenvoudig het orginele ontwerp, zoals het werd geƫxporteerd door de SkechtApp downloaden",
+ "design_editor_info": "Een editor met zowel 2D- als 3D modus waarmee u toegang heeft tot alle ontwerp lagen.",
+ "sketch_layer_list": "Krijg snel toegang tot de verschillende lagen van het schetsontwerp en inspecteer deze.",
+ "property_panel": "De eigenschappen van elke laag, inclusief groote en afmetingen, stijlinformatie en nog veel meer",
+ "code_editor_options": "Extra exportopties voor externe editors, IDE's en een handige download functie voor lokale ontwikkeling.",
+ "code_editor_tech_list": "De mogelijkheid om naar een aantal verschillende frameworks te kunnen exporteren",
+ "code_editor_content": "Een code-editor om snel de gegenereerde code van het huidige ontwerp voor de geselecteerde technologie te bekijken."
+ },
"DROPZONE": {
"text": "Sleep je sketch bestanden hierin"
},
diff --git a/src/home/interactive-bg/interactive-bg.component.html b/src/home/interactive-bg/interactive-bg.component.html
index 9cfa6ac86..fa630a009 100644
--- a/src/home/interactive-bg/interactive-bg.component.html
+++ b/src/home/interactive-bg/interactive-bg.component.html
@@ -14,7 +14,7 @@
- {{ uiSection.description }}
+ {{ uiSection.description | translate }}
diff --git a/src/home/interactive-bg/interactive-bg.component.spec.ts b/src/home/interactive-bg/interactive-bg.component.spec.ts
index 38edfc682..2a604c7cd 100644
--- a/src/home/interactive-bg/interactive-bg.component.spec.ts
+++ b/src/home/interactive-bg/interactive-bg.component.spec.ts
@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { InteractiveBgComponent } from './interactive-bg.component';
import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
describe('InteractiveBgComponent', () => {
let component: InteractiveBgComponent;
@@ -10,7 +11,8 @@ describe('InteractiveBgComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
schemas: [NO_ERRORS_SCHEMA],
- declarations: [InteractiveBgComponent]
+ declarations: [InteractiveBgComponent],
+ imports: [TranslateModule.forRoot()]
}).compileComponents();
}));
diff --git a/src/home/landing/landing.component.ts b/src/home/landing/landing.component.ts
index 5b849ee9d..a68c36db3 100644
--- a/src/home/landing/landing.component.ts
+++ b/src/home/landing/landing.component.ts
@@ -27,7 +27,7 @@ export class LandingComponent implements OnInit {
left: '414px'
},
description:
- 'Quick access to layers inspection, zooming functionalities and 3D mode, with the addition of the codegen editor (see below for more details).'
+ 'LANDING.quick_access_toolbar'
},
{
frame: {
@@ -46,7 +46,7 @@ export class LandingComponent implements OnInit {
left: '100px'
},
description:
- 'Quickly access and inspect the layers hierarchy of the Sketch design.'
+ 'LANDING.sketch_layer_list'
},
{
frame: {
@@ -65,7 +65,7 @@ export class LandingComponent implements OnInit {
left: '592px'
},
description:
- 'A fully fledged design viewer with both 2D and 3D inspection mode allowing you to access all the layers of your design.'
+ 'LANDING.design_editor_info'
},
{
frame: {
@@ -84,7 +84,7 @@ export class LandingComponent implements OnInit {
left: '995px'
},
description:
- 'Quick access and download the original design as it was exported by SketchApp.'
+ 'LANDING.quick_access_preview_download'
},
{
frame: {
@@ -103,7 +103,7 @@ export class LandingComponent implements OnInit {
left: '1000px'
},
description:
- 'Complementary property inspector of each layer including size and dimensions, style information and much more. '
+ 'LANDING.property_panel'
}
];
@@ -124,7 +124,7 @@ export class LandingComponent implements OnInit {
left: '472px'
},
description:
- 'Additional export options to external editors and IDEs, and a handy archive download feature for local development.'
+ 'LANDING.code_editor_options'
}, {
frame: {
width: '1046px',
@@ -142,7 +142,7 @@ export class LandingComponent implements OnInit {
left: '520px'
},
description:
- 'A code editor to quickly view the generated code of the current design for the selected technology.'
+ 'LANDING.code_editor_content'
}, {
frame: {
width: '140px',
@@ -160,7 +160,7 @@ export class LandingComponent implements OnInit {
left: '1042px'
},
description:
- 'Many ouput Web technologies including but not limited to Angular, Vue.js, React, Web Components, etc...'
+ 'LANDING.code_editor_tech_list'
}];
constructor() {}