Skip to content

Commit f9c7f5a

Browse files
jackson-harris-iiijackson-harris-iii
authored
Merge pull request #3136 from near/jh/minor-ui-3125
fix: add Explore wallets button for signed out users and modify hero …
2 parents d2fc909 + 4fca856 commit f9c7f5a

File tree

13 files changed

+811
-229
lines changed

13 files changed

+811
-229
lines changed

‎packages/frontend/src/components/common/FormButton.js

Lines changed: 98 additions & 102 deletions
Large diffs are not rendered by default.

‎packages/frontend/src/components/landing/GuestLanding.js

Lines changed: 591 additions & 18 deletions
Large diffs are not rendered by default.

‎packages/frontend/src/components/landing/GuestLanding.styles.js

Lines changed: 106 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@ import styled from 'styled-components';
33
import PlusIcon from '../../images/plus-icon.png';
44

55
export const StyledContainer = styled.div`
6-
6+
background-image: url(${PlusIcon});
7+
background-size: 75px 75px;
78
&&& {
8-
margin: 35px auto 100px auto;
9-
max-width: 1224px;
10-
position: relative;
9+
margin: 32px auto 32px auto;
10+
11+
max-width: 100%;
12+
display: flex;
13+
align-items: center;
1114
1215
@media (max-width: 1352px) {
13-
padding: 0 64px;
16+
padding: 0 24px;
1417
}
1518
1619
@media (max-width: 991px) {
@@ -23,6 +26,10 @@ export const StyledContainer = styled.div`
2326
margin-top: -13px;
2427
}
2528
29+
@media (max-width: 900px) {
30+
min-height: 390px;
31+
}
32+
2633
svg {
2734
opacity: 0.4;
2835
position: absolute;
@@ -57,17 +64,17 @@ export const StyledContainer = styled.div`
5764
margin: 0;
5865
letter-spacing: -1.08px;
5966
line-height: 100%;
60-
@media(max-width: 768px) {
67+
@media (max-width: 768px) {
6168
font-size: 60px;
6269
}
6370
}
64-
71+
6572
h2 {
66-
@media(max-width: 768px) {
73+
@media (max-width: 768px) {
6774
font-size: 45px;
6875
}
69-
70-
@media(max-width: 576px) {
76+
77+
@media (max-width: 576px) {
7178
font-size: 40px;
7279
}
7380
}
@@ -166,9 +173,9 @@ export const StyledContainer = styled.div`
166173
export const Section = styled.div`
167174
width: 100%;
168175
position: relative;
169-
background-color: #F2F1EA;
176+
background-color: #f2f1ea;
170177
padding: 100px 0 60px 0;
171-
@media(max-width: 768px) {
178+
@media (max-width: 768px) {
172179
padding: 50px 30px;
173180
}
174181
h2 {
@@ -178,14 +185,14 @@ export const Section = styled.div`
178185
font-weight: 500;
179186
line-height: 130%;
180187
padding-bottom: 42px;
181-
@media(max-width: 576px) {
188+
@media (max-width: 576px) {
182189
font-size: 40px;
183190
}
184191
}
185192
h3 {
186193
color: #000000;
187194
padding-bottom: 120px;
188-
@media(max-width: 768px) {
195+
@media (max-width: 768px) {
189196
padding-bottom: 50px;
190197
font-size: 20px;
191198
}
@@ -197,30 +204,26 @@ export const Section = styled.div`
197204
`;
198205

199206
export const MainContainer = styled.div`
200-
background-image: url(${PlusIcon});
201-
background-size: 100px 95px;
202-
min-height: 680px;
207+
min-height: 500px;
203208
display: flex;
204209
width: 100%;
205210
-webkit-box-align: center;
206211
align-items: center;
207212
background-repeat: repeat;
208213
background-position: center top;
209-
@media(max-width: 768px) {
210-
margin-bottom: 20px;
211-
}
214+
margin: 72px auto 72px auto;
212215
`;
213216

214217
export const MainSection = styled.div`
215218
padding: 1rem;
216219
max-width: 675px;
217220
margin: 0 auto;
218-
background-color: #FFFFFF;
221+
background-color: #ffffff;
219222
display: flex;
220223
-webkit-box-align: center;
221224
align-items: center;
222225
min-height: 260px;
223-
@media(max-width: 768px) {
226+
@media (max-width: 768px) {
224227
flex-wrap: wrap;
225228
}
226229
`;
@@ -247,52 +250,52 @@ export const DefaultContainer = styled.div`
247250
`;
248251

249252
export const FlexBox = styled.div`
250-
display: flex;
251-
justify-content: space-between;
252-
align-items: center;
253-
padding-bottom: 120px;
254-
@media(max-width: 768px) {
255-
flex-wrap: wrap;
256-
row-gap: 50px;
257-
padding-bottom: 50px;
258-
}
253+
display: flex;
254+
justify-content: space-between;
255+
align-items: center;
256+
padding-bottom: 120px;
257+
@media (max-width: 768px) {
258+
flex-wrap: wrap;
259+
row-gap: 50px;
260+
padding-bottom: 50px;
261+
}
259262
`;
260263

261264
export const FlexItem = styled.div`
262265
width: 100%;
263-
h4 {
264-
margin: 0;
265-
font-size: 24px;
266-
font-style: normal;
267-
font-weight: 600;
268-
line-height: 150%;
269-
padding-bottom: 32px;
270-
}
271-
p {
272-
margin: 0;
273-
font-size: 16px;
274-
font-style: normal;
275-
font-weight: 450;
276-
line-height: 150%;
277-
letter-spacing: 0.32px;
278-
color: #000000;
279-
max-width: ${(props) => props.accountFound ? '430px' : '100%'};
280-
padding-bottom: 48px;
281-
@media(max-width: 768px) {
282-
max-width: 100%;
283-
}
284-
}
266+
h4 {
267+
margin: 0;
268+
font-size: 24px;
269+
font-style: normal;
270+
font-weight: 600;
271+
line-height: 150%;
272+
padding-bottom: 32px;
273+
}
274+
p {
275+
margin: 0;
276+
font-size: 16px;
277+
font-style: normal;
278+
font-weight: 450;
279+
line-height: 150%;
280+
letter-spacing: 0.32px;
281+
color: #000000;
282+
max-width: ${(props) => (props.accountFound ? '430px' : '100%')};
283+
padding-bottom: 48px;
284+
@media (max-width: 768px) {
285+
max-width: 100%;
286+
}
287+
}
285288
`;
286289

287290
export const InfoSection = styled.div`
288-
display: flex;
289-
align-items: end;
290-
justify-content: space-between;
291-
padding-bottom: 60px;
292-
@media(max-width: 768px) {
293-
flex-wrap: wrap;
294-
row-gap: 50px;
295-
}
291+
display: flex;
292+
align-items: end;
293+
justify-content: space-between;
294+
padding-bottom: 60px;
295+
@media (max-width: 768px) {
296+
flex-wrap: wrap;
297+
row-gap: 50px;
298+
}
296299
`;
297300

298301
export const SecondaryTitle = styled.h4`
@@ -318,11 +321,11 @@ export const FormButtonContainer = styled.div`
318321
text-align: right;
319322
min-width: 500px;
320323
321-
@media(max-width: 1352px) {
324+
@media (max-width: 1352px) {
322325
min-width: 300px;
323326
}
324327
325-
@media(max-width: 768px) {
328+
@media (max-width: 768px) {
326329
min-width: 100%;
327330
}
328331
`;
@@ -335,39 +338,39 @@ export const CardsSection = styled.div`
335338
export const CardContainer = styled.div`
336339
display: grid;
337340
grid-template-columns: repeat(3, 1fr);
338-
grid-auto-rows: minmax(100px, auto);
339-
gap: 24px;
341+
grid-auto-rows: minmax(100px, auto);
342+
gap: 24px;
340343
min-width: 300px;
341344
@media (max-width: 600px) {
342345
grid-template-columns: 1fr;
343346
}
344347
`;
345348

346349
export const SingleCard = styled.a`
347-
border: 1px solid #1B1B18;
348-
transition: all .4s;
349-
border-radius: 8px;
350-
padding: 32px;
351-
cursor: pointer;
352-
outline: none;
353-
&:hover {
354-
background-color: #E3E3E0;
350+
border: 1px solid #1b1b18;
351+
transition: all 0.4s;
352+
border-radius: 8px;
353+
padding: 32px;
354+
cursor: pointer;
355+
outline: none;
356+
&:hover {
357+
background-color: #e3e3e0;
355358
text-decoration: none;
356-
}
359+
}
357360
img {
358361
width: 52px;
359362
padding-bottom: 32px;
360363
}
361-
h3 {
362-
margin: 0;
363-
padding: 0;
364-
font-size: 20px;
365-
font-style: normal;
366-
font-weight: 500;
367-
line-height: 130%;
368-
letter-spacing: 0.3px;
369-
padding-bottom: 24px;
370-
}
364+
h3 {
365+
margin: 0;
366+
padding: 0;
367+
font-size: 20px;
368+
font-style: normal;
369+
font-weight: 500;
370+
line-height: 130%;
371+
letter-spacing: 0.3px;
372+
padding-bottom: 24px;
373+
}
371374
p {
372375
margin: 0;
373376
padding: 0;
@@ -381,9 +384,9 @@ export const SingleCard = styled.a`
381384
`;
382385
export const TransferSection = styled.div`
383386
background-color: #000000;
384-
color: #FFFFFF;
387+
color: #ffffff;
385388
padding: 80px 0;
386-
@media(max-width: 768px) {
389+
@media (max-width: 768px) {
387390
padding: 50px 30px;
388391
}
389392
`;
@@ -392,31 +395,31 @@ export const TransferSectionWrapper = styled.div`
392395
display: flex;
393396
justify-content: space-between;
394397
align-items: end;
395-
@media(max-width: 768px) {
398+
@media (max-width: 768px) {
396399
flex-wrap: wrap;
397400
row-gap: 50px;
398401
}
399402
h4 {
400-
margin: 0;
401-
font-size: 24px;
402-
font-style: normal;
403-
font-weight: 500;
404-
line-height: 130%;
405-
padding-bottom: 32px;
406-
color: #FFFFFF;
403+
margin: 0;
404+
font-size: 24px;
405+
font-style: normal;
406+
font-weight: 500;
407+
line-height: 130%;
408+
padding-bottom: 32px;
409+
color: #ffffff;
407410
}
408411
p {
409-
margin: 0;
410-
font-size: 16px;
411-
font-style: normal;
412-
font-weight: 450;
413-
line-height: 150%;
414-
letter-spacing: 0.32px;
412+
margin: 0;
413+
font-size: 16px;
414+
font-style: normal;
415+
font-weight: 450;
416+
line-height: 150%;
417+
letter-spacing: 0.32px;
415418
}
416419
`;
417420

418421
export const MainSectionButtons = styled.div`
419-
display: flex;
420-
justify-content: space-between;
421-
gap: 24px;
422+
display: flex;
423+
justify-content: space-between;
424+
gap: 24px;
422425
`;

‎packages/frontend/src/translations/en.global.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -283,6 +283,7 @@
283283
"enable": "Enable",
284284
"enabling": "Enabling",
285285
"exploreNEAR": "Explore NEAR",
286+
"exploreWallets": "Explore Wallets",
286287
"findMyAccount": "Find My Account",
287288
"finish": "Finish",
288289
"fundWith": "Fund with",
@@ -2027,4 +2028,4 @@
20272028
"title": "Your account is now active!"
20282029
}
20292030
}
2030-
}
2031+
}

‎packages/frontend/src/translations/it.global.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -225,6 +225,7 @@
225225
"enable": "Abilita",
226226
"enabling": "Abilitando",
227227
"exploreNEAR": "Esplora NEAR",
228+
"exploreWallets": "Esplora Wallets",
228229
"findMyAccount": "Trova il mio Account",
229230
"finish": "Completo",
230231
"fundWith": "Deposita con",

‎packages/frontend/src/translations/kr.global.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -283,6 +283,7 @@
283283
"enable": "활성화",
284284
"enabling": "활성화 중",
285285
"exploreNEAR": "NEAR 탐색",
286+
"exploreWallets": "Wallets 탐색",
286287
"findMyAccount": "계정 찾기",
287288
"finish": "완료",
288289
"fundWith": "Fund with",
@@ -1901,7 +1902,7 @@
19011902
"removeDesc": "이메일과 SMS 복구 방법, 이전 복구 구문, NEAR CLI에서 생성된 Full 액세스 키",
19021903
"removeKeys": "키 제거",
19031904
"title": "Full 액세스 키 비워내기",
1904-
"verifyPassphrase": {
1905+
"verifyPassphrase": {
19051906
"desc": "복구 구문을 입력하여 다음 계정의 Full 액세스 키를 삭제하십시오: <b>${accountId}</b>",
19061907
"keyMessages": {
19071908
"doesNotExist": "입력된 시드 문구에 부합하는 ${accountId}의 Full 액세스 키가 존재하지 않습니다.",
@@ -1983,4 +1984,4 @@
19831984
"title": "이제 계정이 활성화되었습니다!"
19841985
}
19851986
}
1986-
}
1987+
}

0 commit comments

Comments
 (0)