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

Commit ef5a7b7

Browse files
Fdom92Fdom92
committed
feat(home): update styles for new designs
1 parent 9931b62 commit ef5a7b7

File tree

3 files changed

+61
-49
lines changed

3 files changed

+61
-49
lines changed

‎src/assets/i18n/en.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,13 +43,13 @@ export const translations = {
4343
'We specialize in mobile application design, development, and App Store Optimization (ASO). Our team has been the top trusted partner of Ionic Framework since 2014 with experience in technologies such as Angular, React, Vue.js, Strapi, and VoIP.',
4444
example: 'Mobile Measures',
4545
},
46-
digitalExperience: {
46+
mobileTechnology: {
4747
title: 'Mobile Technology',
4848
text:
4949
'With our combined expertise in design and marketing, you can rely on us to develop comprehensive strategies and graphics that will define your brand and inspire trust in your target audience.',
5050
example: 'The Voyage by New Ocean',
5151
},
52-
mobileTechnology: {
52+
digitalExperience: {
5353
title: 'Design & User Experience',
5454
text:
5555
'By combining the psychology of design with the capabilities of the digital age, we are able to develop solutions that think outside the box. We go beyond the norms of basic menus and navigation layouts and truly immerse your users in a beautiful and intuitive interface that keeps them coming back for more.',

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

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -274,13 +274,14 @@
274274
line-height: 1.78;
275275

276276
@include media-breakpoint-down(sm) {
277-
text-align: left;
277+
text-align: center;
278+
margin-bottom: 0;
278279
}
279280
}
280281
}
281282

282283
@include media-breakpoint-down(sm) {
283-
height: 95vh;
284+
height: 60vh;
284285
}
285286
}
286287

@@ -423,6 +424,7 @@
423424

424425
@include media-breakpoint-down(sm) {
425426
margin: 5rem 0;
427+
font-size: 36px;
426428
}
427429
}
428430

@@ -444,6 +446,7 @@
444446
bottom: 0;
445447
@include media-breakpoint-down(sm) {
446448
position: initial;
449+
margin-bottom: 0;
447450
}
448451
}
449452

@@ -550,4 +553,26 @@
550553
}
551554
}
552555
}
556+
557+
.learn-more-container {
558+
display: flex;
559+
justify-content: center;
560+
561+
@include media-breakpoint-down(sm) {
562+
margin-bottom: 1rem;
563+
}
564+
565+
.carousel-btn {
566+
background-color: #0095aa;
567+
border-radius: 16px;
568+
box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5);
569+
text-align: center;
570+
color: #ffffff;
571+
font-family: Muli;
572+
font-size: 11px;
573+
font-weight: 700;
574+
letter-spacing: 1.25px;
575+
margin: auto;
576+
}
577+
}
553578
}

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

Lines changed: 32 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -91,21 +91,6 @@ export class AppHome {
9191
return <app-blog-featured-home blogPost={featuredPost} blogPost1={featuredPost1} />;
9292
}
9393

94-
renderSubTxt() {
95-
return (
96-
<div class="sub-txt">
97-
<p>
98-
<app-translate keyword="home.hero.text" />
99-
</p>
100-
<stencil-route-link url="/services" class="align-self-center">
101-
<button class="btn btn-primary button-hero">
102-
<app-translate keyword="home.hero.buttonText" />
103-
</button>
104-
</stencil-route-link>
105-
</div>
106-
);
107-
}
108-
10994
render() {
11095
const featuredPost = this.renderFeaturedPost(this.featuredPost, this.featuredPost1, this.featuredIsLoading, this.featuredIsError);
11196
return (
@@ -121,14 +106,24 @@ export class AppHome {
121106
<h2>
122107
<app-translate keyword="home.hero.subTitle" />
123108
</h2>
124-
{this.renderSubTxt()}
109+
<div class="sub-txt">
110+
<p>
111+
<app-translate keyword="home.hero.text" />
112+
</p>
113+
</div>
125114
</div>
126115
<div class="col-lg-8 col-md-7 col-sm-12 flex-column">
127116
<div class="svg-header-desktop" aria-label="header" />
128117
<div class="svg-header-mobile" aria-label="header" />
129118
</div>
130119
</div>
131-
<div class="row align-items-center mobile">{this.renderSubTxt()}</div>
120+
<div class="row align-items-center mobile">
121+
<div class="sub-txt">
122+
<p>
123+
<app-translate keyword="home.hero.text" />
124+
</p>
125+
</div>
126+
</div>
132127
</div>
133128
</header>
134129

@@ -146,9 +141,6 @@ export class AppHome {
146141
<h3>{translate('home.work.experts')}</h3>
147142
<h2>{translate('home.work.mobileWebApplications.title')}</h2>
148143
<p>{translate('home.work.mobileWebApplications.text')}</p>
149-
<stencil-route-link url="/services" class="align-self-center d-none d-md-block">
150-
<button class="btn btn-primary button-work">{translate('home.work.buttonText')}</button>
151-
</stencil-route-link>
152144
</div>
153145
</div>
154146
<div class="content-panel-image">
@@ -168,9 +160,6 @@ export class AppHome {
168160
<img src="/assets/graphic-google-googleplaystore.png" alt="Download link on Google Play Store" />
169161
</a>
170162
</div>
171-
<stencil-route-link url="/services" class="align-self-center d-sm-block d-md-none">
172-
<button class="btn btn-primary button-work">{translate('home.work.buttonText')}</button>
173-
</stencil-route-link>
174163
</div>
175164
</div>
176165
<div class="content-panel loudcloud">
@@ -179,9 +168,6 @@ export class AppHome {
179168
<h3>{translate('home.work.experts')}</h3>
180169
<h2>{translate('home.work.mobileTechnology.title')}</h2>
181170
<p>{translate('home.work.mobileTechnology.text')}</p>
182-
<stencil-route-link url="/services" class="align-self-center d-none d-md-block">
183-
<button class="btn btn-primary button-work">{translate('home.work.buttonText')}</button>
184-
</stencil-route-link>
185171
</div>
186172
</div>
187173
<div class="content-panel-image">
@@ -201,9 +187,6 @@ export class AppHome {
201187
<img src="/assets/graphic-google-googleplaystore.png" alt="download on play store" />
202188
</a>
203189
</div>
204-
<stencil-route-link url="/services" class="align-self-center d-sm-block d-md-none">
205-
<button class="btn btn-primary button-work">{translate('home.work.buttonText')}</button>
206-
</stencil-route-link>
207190
</div>
208191
</div>
209192
<div class="content-panel voyage">
@@ -212,9 +195,6 @@ export class AppHome {
212195
<h3>{translate('home.work.experts')}</h3>
213196
<h2>{translate('home.work.digitalExperience.title')}</h2>
214197
<p>{translate('home.work.digitalExperience.text')}</p>
215-
<stencil-route-link url="/services" class="align-self-center d-none d-md-block">
216-
<button class="btn btn-primary button-work">{translate('home.work.buttonText')}</button>
217-
</stencil-route-link>
218198
</div>
219199
</div>
220200
<div class="content-panel-image">
@@ -234,9 +214,6 @@ export class AppHome {
234214
<img src="/assets/graphic-google-googleplaystore.png" alt="download on play store" />
235215
</a>
236216
</div>
237-
<stencil-route-link url="/services" class="align-self-center d-sm-block d-md-none">
238-
<button class="btn btn-primary button-work">{translate('home.work.buttonText')}</button>
239-
</stencil-route-link>
240217
</div>
241218
</div>
242219
<div class="content-panel last-panel" />
@@ -270,11 +247,12 @@ export class AppHome {
270247
</div>
271248
<div class="col-lg-6 col-md-6 col-sm-12 carousel-panel align-self-center">
272249
<div class="carousel-text">
273-
<app-carousel-indicators class="carousel-mobile-indicators" activeIndex="0" />
250+
<app-carousel-indicators class="carousel-mobile-indicators d-none d-lg-block" activeIndex="0" />
274251
<p>
275252
<app-translate keyword="home.process.discovery.text" />
276253
</p>
277-
<stencil-route-link url="/services" class="align-self-center">
254+
<app-carousel-indicators class="carousel-mobile-indicators d-lg-none" activeIndex="0" />
255+
<stencil-route-link url="/services" class="align-self-center d-none d-lg-block">
278256
<button class="btn button">{translate('home.process.buttonText')}</button>
279257
</stencil-route-link>
280258
</div>
@@ -295,11 +273,12 @@ export class AppHome {
295273
</div>
296274
<div class="col-lg-6 col-md-6 col-sm-12 carousel-panel align-self-center">
297275
<div class="carousel-text">
298-
<app-carousel-indicators class="carousel-mobile-indicators" activeIndex="1" />
276+
<app-carousel-indicators class="carousel-mobile-indicators d-none d-lg-block" activeIndex="1" />
299277
<p>
300278
<app-translate keyword="home.process.design.text" />
301279
</p>
302-
<stencil-route-link url="/services" class="align-self-center">
280+
<app-carousel-indicators class="carousel-mobile-indicators d-lg-none" activeIndex="1" />
281+
<stencil-route-link url="/services" class="align-self-center d-none d-lg-block">
303282
<button class="btn button">{translate('home.process.buttonText')}</button>
304283
</stencil-route-link>
305284
</div>
@@ -320,11 +299,12 @@ export class AppHome {
320299
</div>
321300
<div class="col-lg-6 col-md-6 col-sm-12 carousel-panel align-self-center">
322301
<div class="carousel-text">
323-
<app-carousel-indicators class="carousel-mobile-indicators" activeIndex="2" />
302+
<app-carousel-indicators class="carousel-mobile-indicators d-none d-lg-block" activeIndex="2" />
324303
<p>
325304
<app-translate keyword="home.process.development.text" />
326305
</p>
327-
<stencil-route-link url="/services" class="align-self-center">
306+
<app-carousel-indicators class="carousel-mobile-indicators d-lg-none" activeIndex="2" />
307+
<stencil-route-link url="/services" class="align-self-center d-none d-lg-block">
328308
<button class="btn button">{translate('home.process.buttonText')}</button>
329309
</stencil-route-link>
330310
</div>
@@ -345,11 +325,12 @@ export class AppHome {
345325
</div>
346326
<div class="col-lg-6 col-md-6 col-sm-12 carousel-panel align-self-center">
347327
<div class="carousel-text">
348-
<app-carousel-indicators class="carousel-mobile-indicators" activeIndex="3" />
328+
<app-carousel-indicators class="carousel-mobile-indicators d-none d-lg-block" activeIndex="3" />
349329
<p>
350330
<app-translate keyword="home.process.deployment.text" />
351331
</p>
352-
<stencil-route-link url="/services" class="align-self-center">
332+
<app-carousel-indicators class="carousel-mobile-indicators d-lg-none" activeIndex="3" />
333+
<stencil-route-link url="/services" class="align-self-center d-none d-lg-block">
353334
<button class="btn button">{translate('home.process.buttonText')}</button>
354335
</stencil-route-link>
355336
</div>
@@ -370,11 +351,12 @@ export class AppHome {
370351
</div>
371352
<div class="col-lg-6 col-md-6 col-sm-12 carousel-panel align-self-center">
372353
<div class="carousel-text">
373-
<app-carousel-indicators class="carousel-mobile-indicators" activeIndex="4" />
354+
<app-carousel-indicators class="carousel-mobile-indicators d-none d-lg-block" activeIndex="4" />
374355
<p>
375356
<app-translate keyword="home.process.userfeedback.text" />
376357
</p>
377-
<stencil-route-link url="/services" class="align-self-center">
358+
<app-carousel-indicators class="carousel-mobile-indicators d-lg-none" activeIndex="4" />
359+
<stencil-route-link url="/services" class="align-self-center d-none d-lg-block">
378360
<button class="btn button">{translate('home.process.buttonText')}</button>
379361
</stencil-route-link>
380362
</div>
@@ -391,6 +373,11 @@ export class AppHome {
391373
<span class="sr-only">Next</span>
392374
</a>
393375
</div>
376+
<div class="learn-more-container d-lg-none">
377+
<stencil-route-link url="/services" class="align-self-center">
378+
<button class="btn button carousel-btn">{translate('home.process.buttonText')}</button>
379+
</stencil-route-link>
380+
</div>
394381
</section>
395382

396383
{/* aside - cta */}

0 commit comments

Comments
 (0)