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

Commit caaaac2

Browse files
luiskcs89luiskcs89
committed
feat(home): add changes for tablet hero and our work
1 parent 40def20 commit caaaac2

File tree

2 files changed

+124
-42
lines changed

2 files changed

+124
-42
lines changed

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

Lines changed: 105 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@
3333
@include media-breakpoint-up(sm) {
3434
visibility: hidden;
3535
height: 0;
36+
margin: 0;
37+
padding: 0;
3638
}
3739
}
3840

@@ -93,13 +95,16 @@
9395
line-height: 62px;
9496
text-align: left;
9597

96-
@include media-breakpoint-down(sm) {
98+
@include media-breakpoint-down(md) {
9799
height: 0;
98100
margin-bottom: 120px;
99-
text-align: center;
100-
font-size: 43px;
101+
font-size: 42px;
101102
line-height: 50px;
102103
}
104+
105+
@include media-breakpoint-down(sm) {
106+
text-align: center;
107+
}
103108
}
104109

105110
.sub-txt {
@@ -114,12 +119,24 @@
114119
&:hover {
115120
background: #0095aa linear-gradient(180deg, #00b4cc, #0095aa) repeat-x;
116121
}
122+
123+
@include media-breakpoint-down(md) {
124+
font-size: 14px;
125+
}
126+
127+
@include media-breakpoint-down(sm) {
128+
font-size: initial;
129+
}
117130
}
118131

119132
@include media-breakpoint-down(sm) {
120133
text-align: center;
121134
}
122135
}
136+
137+
@include media-breakpoint-down(md) {
138+
margin-top: 60px;
139+
}
123140
}
124141

125142
.featured-blog {
@@ -143,6 +160,17 @@
143160
}
144161
}
145162

163+
button.button-work {
164+
background-color: #292a2d;
165+
border: 0.75px solid #ffffff;
166+
border-radius: 20px;
167+
box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5);
168+
text-transform: none;
169+
&:hover {
170+
background: #292a2d linear-gradient(180deg, #484a50, #0c0d0e) repeat-x;
171+
}
172+
}
173+
146174
.sidebar {
147175
min-height: 100%;
148176
width: 50%;
@@ -162,6 +190,7 @@
162190

163191
@include media-breakpoint-down(md) {
164192
width: 100%;
193+
align-items: center;
165194
}
166195

167196
.content-panel {
@@ -172,7 +201,13 @@
172201
text-align: center;
173202

174203
@include media-breakpoint-down(md) {
175-
display: table;
204+
display: flex;
205+
align-items: center;
206+
}
207+
208+
@include media-breakpoint-down(sm) {
209+
display: flex;
210+
flex-direction: column-reverse;
176211
}
177212
}
178213

@@ -188,11 +223,25 @@
188223
height: 85vh;
189224
justify-content: center;
190225

226+
@include media-breakpoint-down(md) {
227+
display: flex;
228+
width: 100%;
229+
height: auto;
230+
}
231+
232+
@include media-breakpoint-down(sm) {
233+
background-color: #ffffff;
234+
}
235+
191236
.panel-inner-text {
192237
margin: 0 4rem;
193238
text-align: left;
194239

195240
@include media-breakpoint-down(md) {
241+
margin: 0 2rem;
242+
}
243+
244+
@include media-breakpoint-down(sm) {
196245
margin: 0 1rem;
197246
text-align: center;
198247
}
@@ -205,33 +254,28 @@
205254

206255
@include media-breakpoint-down(sm) {
207256
font-size: 30px;
257+
margin-bottom: 35px;
208258
}
209259
}
210260

211261
h3 {
212262
color: $orange-dark;
213263
font-size: 24px;
214264
margin-bottom: 1rem;
265+
266+
@include media-breakpoint-down(sm) {
267+
text-transform: uppercase;
268+
}
215269
}
216270

217271
p {
218272
color: $gray-dark;
219273
font-size: 16px;
220274
line-height: 1.78;
221-
}
222275

223-
.button {
224-
background-color: #292a2d;
225-
border-radius: 16px;
226-
box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5);
227-
width: 195px;
228-
text-align: center;
229-
color: #ffffff;
230-
font-family: Muli;
231-
font-size: 11px;
232-
font-weight: 700;
233-
letter-spacing: 1.25px;
234-
margin: auto;
276+
@include media-breakpoint-down(sm) {
277+
text-align: left;
278+
}
235279
}
236280
}
237281

@@ -242,6 +286,7 @@
242286

243287
.content-panel-image {
244288
position: relative;
289+
max-width: 330px;
245290

246291
h2 {
247292
color: white;
@@ -258,12 +303,10 @@
258303
top: 30px;
259304

260305
@include media-breakpoint-down(md) {
261-
left: 0;
262-
margin-left: auto;
263-
margin-right: auto;
306+
left: 60px;
264307
}
265308

266-
@include media-breakpoint-down(xs) {
309+
@include media-breakpoint-down(sm) {
267310
display: none;
268311
}
269312
}
@@ -276,11 +319,9 @@
276319

277320
@include media-breakpoint-down(md) {
278321
right: 0;
279-
margin-left: auto;
280-
margin-right: auto;
281322
}
282323

283-
@include media-breakpoint-down(xs) {
324+
@include media-breakpoint-down(sm) {
284325
display: none;
285326
}
286327
}
@@ -294,7 +335,7 @@
294335
margin-right: auto;
295336
z-index: 1;
296337

297-
@include media-breakpoint-down(xs) {
338+
@include media-breakpoint-down(sm) {
298339
position: relative;
299340
}
300341
}
@@ -309,6 +350,15 @@
309350
margin: 0 10px;
310351
}
311352
}
353+
354+
button.button-work {
355+
margin: 0 0 3rem;
356+
}
357+
358+
@include media-breakpoint-down(md) {
359+
width: 100%;
360+
max-width: initial;
361+
}
312362
}
313363

314364
.description {
@@ -320,18 +370,42 @@
320370
}
321371

322372
.loudcloud {
323-
background-image: url('/assets/home-graphic-loudcloud-pattern.jpg');
324-
background-size: cover;
373+
@include media-breakpoint-up(lg) {
374+
background-image: url('/assets/home-graphic-loudcloud-pattern.jpg');
375+
background-size: cover;
376+
}
377+
.content-panel-image {
378+
@include media-breakpoint-down(md) {
379+
background-image: url('/assets/home-graphic-loudcloud-pattern.jpg');
380+
background-size: cover;
381+
}
382+
}
325383
}
326384

327385
.voyage {
328-
background-image: url('/assets/home-graphic-voyage-pattern.jpg');
329-
background-size: cover;
386+
@include media-breakpoint-up(lg) {
387+
background-image: url('/assets/home-graphic-voyage-pattern.jpg');
388+
background-size: cover;
389+
}
390+
.content-panel-image {
391+
@include media-breakpoint-down(md) {
392+
background-image: url('/assets/home-graphic-voyage-pattern.jpg');
393+
background-size: cover;
394+
}
395+
}
330396
}
331397

332398
.mobilemeasures {
333-
background-image: url('/assets/home-graphic-mobilemeasures-pattern.jpg');
334-
background-size: cover;
399+
@include media-breakpoint-up(lg) {
400+
background-image: url('/assets/home-graphic-mobilemeasures-pattern.jpg');
401+
background-size: cover;
402+
}
403+
.content-panel-image {
404+
@include media-breakpoint-down(md) {
405+
background-image: url('/assets/home-graphic-mobilemeasures-pattern.jpg');
406+
background-size: cover;
407+
}
408+
}
335409
}
336410
}
337411

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

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -108,28 +108,27 @@ export class AppHome {
108108

109109
render() {
110110
const featuredPost = this.renderFeaturedPost(this.featuredPost, this.featuredPost1, this.featuredIsLoading, this.featuredIsError);
111-
const subTxt = this.renderSubTxt();
112111
return (
113112
<div class="home">
114113
{/* header - hero */}
115114
<header class="hero">
116115
<div class="container">
117116
<div class="row align-items-center">
118-
<div class="col-lg-4 col-md-6 col-sm-12 flex-column text">
117+
<div class="col-lg-4 col-md-5 col-sm-12 flex-column text">
119118
<h1>
120119
<app-translate keyword="home.hero.title" />
121120
</h1>
122121
<h2>
123122
<app-translate keyword="home.hero.subTitle" />
124123
</h2>
125-
{subTxt}
124+
{this.renderSubTxt()}
126125
</div>
127-
<div class="col-lg-8 col-md-6 col-sm-12 flex-column">
126+
<div class="col-lg-8 col-md-7 col-sm-12 flex-column">
128127
<div class="svg-header-desktop" aria-label="header" />
129128
<div class="svg-header-mobile" aria-label="header" />
130129
</div>
131130
</div>
132-
<div class="row align-items-center mobile">{subTxt}</div>
131+
<div class="row align-items-center mobile">{this.renderSubTxt()}</div>
133132
</div>
134133
</header>
135134

@@ -147,8 +146,8 @@ export class AppHome {
147146
<h3>{translate('home.work.experts')}</h3>
148147
<h2>{translate('home.work.mobileWebApplications.title')}</h2>
149148
<p>{translate('home.work.mobileWebApplications.text')}</p>
150-
<stencil-route-link url="/services" class="align-self-center">
151-
<button class="btn button">{translate('home.work.buttonText')}</button>
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>
152151
</stencil-route-link>
153152
</div>
154153
</div>
@@ -169,6 +168,9 @@ export class AppHome {
169168
<img src="/assets/graphic-google-googleplaystore.png" alt="Download link on Google Play Store" />
170169
</a>
171170
</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>
172174
</div>
173175
</div>
174176
<div class="content-panel loudcloud">
@@ -177,8 +179,8 @@ export class AppHome {
177179
<h3>{translate('home.work.experts')}</h3>
178180
<h2>{translate('home.work.mobileTechnology.title')}</h2>
179181
<p>{translate('home.work.mobileTechnology.text')}</p>
180-
<stencil-route-link url="/services" class="align-self-center">
181-
<button class="btn button">{translate('home.work.buttonText')}</button>
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>
182184
</stencil-route-link>
183185
</div>
184186
</div>
@@ -199,6 +201,9 @@ export class AppHome {
199201
<img src="/assets/graphic-google-googleplaystore.png" alt="download on play store" />
200202
</a>
201203
</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>
202207
</div>
203208
</div>
204209
<div class="content-panel voyage">
@@ -207,8 +212,8 @@ export class AppHome {
207212
<h3>{translate('home.work.experts')}</h3>
208213
<h2>{translate('home.work.digitalExperience.title')}</h2>
209214
<p>{translate('home.work.digitalExperience.text')}</p>
210-
<stencil-route-link url="/services" class="align-self-center">
211-
<button class="btn button">{translate('home.work.buttonText')}</button>
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>
212217
</stencil-route-link>
213218
</div>
214219
</div>
@@ -229,6 +234,9 @@ export class AppHome {
229234
<img src="/assets/graphic-google-googleplaystore.png" alt="download on play store" />
230235
</a>
231236
</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>
232240
</div>
233241
</div>
234242
<div class="content-panel last-panel" />

0 commit comments

Comments
 (0)