Skip to content
This repository was archived by the owner on Feb 5, 2022. It is now read-only.

Commit e03a4c7

Browse files
luiskcs89luiskcs89
committed
feat: changes to our process carrousel
1 parent d23cd90 commit e03a4c7

File tree

3 files changed

+78
-17
lines changed

3 files changed

+78
-17
lines changed

‎src/assets/i18n/en.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export const translations = {
99
},
1010
process: {
1111
title: 'Our Process',
12+
buttonText: 'LEARN MORE',
1213
discovery: {
1314
title: 'Discovery',
1415
text: `We'll help you evaluate your business needs and challenge your assumptions before entering into the Design and Development processs. Make sure that the technology you're building makes sense for your business.`,

‎src/pages/app-home/app-home.scss‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -363,8 +363,19 @@
363363

364364
.carousel-item {
365365
.row {
366-
height: 500px;
366+
h2 {
367+
color: #292a2d;
368+
font-family: Muli;
369+
font-size: 24px;
370+
font-weight: 600;
371+
}
372+
}
373+
.row-main {
374+
height: 400px;
367375
margin: 0;
376+
padding: 0 40px 0 40px;
377+
margin-bottom: 25px;
378+
368379
@include media-breakpoint-down(sm) {
369380
height: auto;
370381
}
@@ -373,7 +384,7 @@
373384

374385
.carousel-image {
375386
img {
376-
height: 448px;
387+
height: 392px;
377388
@include media-breakpoint-down(sm) {
378389
height: 200px;
379390
}
@@ -401,6 +412,7 @@
401412

402413
.carousel-text {
403414
max-width: 425px;
415+
text-align: center;
404416

405417
h2 {
406418
color: $orange-dark;
@@ -420,6 +432,19 @@
420432
text-align: center;
421433
}
422434
}
435+
436+
.button {
437+
background-color: #0095aa;
438+
border-radius: 16px;
439+
box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5);
440+
text-align: center;
441+
color: #ffffff;
442+
font-family: Muli;
443+
font-size: 11px;
444+
font-weight: 700;
445+
letter-spacing: 1.25px;
446+
margin: auto;
447+
}
423448
}
424449
}
425450
}

‎src/pages/app-home/app-home.tsx‎

Lines changed: 50 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -240,90 +240,125 @@ export class AppHome {
240240
<div class="carousel-inner">
241241
<div class="carousel-item active">
242242
<div class="row">
243+
<div class="col-12 text-center">
244+
<h2>
245+
<app-translate keyword="home.process.discovery.title" />
246+
</h2>
247+
</div>
248+
</div>
249+
<div class="row row-main">
243250
<div class="col-lg-6 col-md-6 col-sm-12 align-self-center text-center">
244251
<app-img class="carousel-image-h" src="/assets/svg/home-graphic-process-discovery.svg" alt="discovery" />
245252
</div>
246253
<div class="col-lg-6 col-md-6 col-sm-12 carousel-panel align-self-center">
247254
<div class="carousel-text">
248-
<h2>
249-
<app-translate keyword="home.process.discovery.title" />
250-
</h2>
251255
<app-carousel-indicators class="carousel-mobile-indicators" activeIndex="0" />
252256
<p>
253257
<app-translate keyword="home.process.discovery.text" />
254258
</p>
259+
<stencil-route-link url="/services" class="align-self-center">
260+
<button class="btn button">{translate('home.process.buttonText')}</button>
261+
</stencil-route-link>
255262
</div>
256263
</div>
257264
</div>
258265
</div>
259266
<div class="carousel-item">
260267
<div class="row">
268+
<div class="col-12 text-center">
269+
<h2>
270+
<app-translate keyword="home.process.design.title" />
271+
</h2>
272+
</div>
273+
</div>
274+
<div class="row row-main">
261275
<div class="col-lg-6 col-md-6 col-sm-12 align-self-center text-center">
262276
<app-img class="carousel-image-h" src="/assets/svg/home-graphic-process-design.svg" alt="design" />
263277
</div>
264278
<div class="col-lg-6 col-md-6 col-sm-12 carousel-panel align-self-center">
265279
<div class="carousel-text">
266-
<h2>
267-
<app-translate keyword="home.process.design.title" />
268-
</h2>
269280
<app-carousel-indicators class="carousel-mobile-indicators" activeIndex="1" />
270281
<p>
271282
<app-translate keyword="home.process.design.text" />
272283
</p>
284+
<stencil-route-link url="/services" class="align-self-center">
285+
<button class="btn button">{translate('home.process.buttonText')}</button>
286+
</stencil-route-link>
273287
</div>
274288
</div>
275289
</div>
276290
</div>
277291
<div class="carousel-item">
278292
<div class="row">
293+
<div class="col-12 text-center">
294+
<h2>
295+
<app-translate keyword="home.process.development.title" />
296+
</h2>
297+
</div>
298+
</div>
299+
<div class="row row-main">
279300
<div class="col-lg-6 col-md-6 col-sm-12 align-self-center text-center">
280301
<app-img class="carousel-image" src="/assets/svg/home-graphic-process-development.svg" alt="development" />
281302
</div>
282303
<div class="col-lg-6 col-md-6 col-sm-12 carousel-panel align-self-center">
283304
<div class="carousel-text">
284-
<h2>
285-
<app-translate keyword="home.process.development.title" />
286-
</h2>
287305
<app-carousel-indicators class="carousel-mobile-indicators" activeIndex="2" />
288306
<p>
289307
<app-translate keyword="home.process.development.text" />
290308
</p>
309+
<stencil-route-link url="/services" class="align-self-center">
310+
<button class="btn button">{translate('home.process.buttonText')}</button>
311+
</stencil-route-link>
291312
</div>
292313
</div>
293314
</div>
294315
</div>
295316
<div class="carousel-item">
296317
<div class="row">
318+
<div class="col-12 text-center">
319+
<h2>
320+
<app-translate keyword="home.process.deployment.title" />
321+
</h2>
322+
</div>
323+
</div>
324+
<div class="row row-main">
297325
<div class="col-lg-6 col-md-6 col-sm-12 align-self-center text-center">
298326
<app-img class="carousel-image" src="/assets/svg/home-graphic-process-deployment.svg" alt="deployment" />
299327
</div>
300328
<div class="col-lg-6 col-md-6 col-sm-12 carousel-panel align-self-center">
301329
<div class="carousel-text">
302-
<h2>
303-
<app-translate keyword="home.process.deployment.title" />
304-
</h2>
305330
<app-carousel-indicators class="carousel-mobile-indicators" activeIndex="3" />
306331
<p>
307332
<app-translate keyword="home.process.deployment.text" />
308333
</p>
334+
<stencil-route-link url="/services" class="align-self-center">
335+
<button class="btn button">{translate('home.process.buttonText')}</button>
336+
</stencil-route-link>
309337
</div>
310338
</div>
311339
</div>
312340
</div>
313341
<div class="carousel-item">
314342
<div class="row">
343+
<div class="col-12 text-center">
344+
<h2>
345+
<app-translate keyword="home.process.userfeedback.title" />
346+
</h2>
347+
</div>
348+
</div>
349+
<div class="row row-main">
315350
<div class="col-lg-6 col-md-6 col-sm-12 align-self-center text-center ">
316351
<app-img class="carousel-image-userfeedback" src="/assets/svg/home-graphic-process-userfeedback.svg" alt="user feedback" />
317352
</div>
318353
<div class="col-lg-6 col-md-6 col-sm-12 carousel-panel align-self-center">
319354
<div class="carousel-text">
320-
<h2>
321-
<app-translate keyword="home.process.userfeedback.title" />
322-
</h2>
323355
<app-carousel-indicators class="carousel-mobile-indicators" activeIndex="4" />
324356
<p>
325357
<app-translate keyword="home.process.userfeedback.text" />
326358
</p>
359+
<stencil-route-link url="/services" class="align-self-center">
360+
<button class="btn button">{translate('home.process.buttonText')}</button>
361+
</stencil-route-link>
327362
</div>
328363
</div>
329364
</div>

0 commit comments

Comments
 (0)