Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 13, 2024. It is now read-only.

Commit e68f43e

Browse files
Hubert KosterHubert Koster
Hubert Koster
authored and
Hubert Koster
committed
chore: applying fixes for the homepage
1 parent 2e6b28d commit e68f43e

21 files changed

+353
-328
lines changed

‎src/components/Footer/Footer.module.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,14 @@
2020
gap: rem(1);
2121
.FooterContent {
2222
font-family: 'Ubuntu', sans-serif;
23+
font-size: rem(3.2);
2324
color: var(--ifm-color-white);
2425
@media screen and (max-width: 992px) {
2526
font-size: rem(2);
2627
}
2728
}
2829
.FooterBodyContent {
29-
color: var(--ifm-color-secondary-darkest);
30+
color: var(--ifm-color-white);
3031
font-weight: 400;
3132
@media screen and (max-width: 992px) {
3233
font-size: rem(1.5);
@@ -43,6 +44,7 @@
4344
border: 2px solid var(--ifm-color-secondary-darkest);
4445
padding: rem(0.5);
4546
border-radius: rem(1);
47+
font-size: rem(1.4);
4648
font-weight: bold;
4749
}
4850
}

‎src/components/Footer/index.tsx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,35 @@ import styles from './Footer.module.scss';
44

55
const Footer = () => {
66
return (
7-
<div className={styles.FooterContainer} data-testid='footer-text'>
8-
<div className={styles.FooterBody}>
9-
<Text type='subtitle-1' as={'h1'} bold className={styles.FooterContent}>
10-
Get Connected
7+
<footer className={styles.FooterContainer} data-testid='footer-text'>
8+
<section className={styles.FooterBody}>
9+
<Text type='subtitle-1' as='h2' align='center' className={styles.FooterContent}>
10+
Get connected
1111
</Text>
12-
<Text type='paragraph-1' align='center' as={'h2'} className={styles.FooterBodyContent}>
12+
<p className={styles.FooterBodyContent}>
1313
Discuss ideas and share solutions with developers worldwide.
14-
</Text>
14+
</p>
1515
<a
1616
data-testid='community-link'
1717
style={{ textDecoration: 'none' }}
1818
href='https://binary.vanillacommunity.com/'
1919
>
2020
<button className={styles.communityButton}>Join Our Community</button>
2121
</a>
22-
</div>
23-
<div className={styles.FooterBody}>
24-
<Text type='subtitle-1' bold className={styles.FooterContent}>
25-
{"We're here to help"}
22+
</section>
23+
<section className={styles.FooterBody}>
24+
<Text type='subtitle-1' as='h2' align='center' className={styles.FooterContent}>
25+
We&apos;re here to help
2626
</Text>
2727
<Text type='paragraph-1' align='center' className={styles.FooterBodyContent}>
2828
Email us at{' '}
2929
<a className={styles.Email} href={'mailto:[email protected]'}>
3030
[email protected]
31-
</a>{' '}
32-
if you have any questions.
31+
</a>
32+
<p>if you have any questions.</p>
3333
</Text>
34-
</div>
35-
</div>
34+
</section>
35+
</footer>
3636
);
3737
};
3838
export default Footer;

‎src/features/Home/ApiFeatures/ApiFeatures.module.scss

Lines changed: 40 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,57 @@
11
@use 'src/styles/utility' as *;
22
.FeaturesContainer {
33
display: flex;
4-
flex-direction: column;
54
width: 100%;
65
align-items: center;
76
justify-content: center;
7+
flex-wrap: wrap;
8+
gap: rem(2);
89

9-
.FeaturesDescription {
10-
display: flex;
11-
flex-wrap: wrap;
12-
justify-content: space-evenly;
13-
width: 90%;
14-
align-items: center;
10+
> img {
11+
padding: 0 rem(2);
12+
}
1513

16-
.ApiFeaturesImage {
17-
aspect-ratio: 4 / 2.5;
18-
background-image: url(/img/api-featutes.png);
19-
background-repeat: no-repeat;
20-
background-size: contain;
21-
display: inline-block;
22-
width: rem(60);
23-
margin-top: rem(5);
24-
}
14+
.ApiFeaturesImage {
15+
display: inline-block;
16+
width: rem(60);
17+
}
18+
19+
.FeatureText {
20+
width: rem(48.6);
21+
padding: 0 rem(1);
22+
box-sizing: border-box;
23+
display: flex;
24+
flex-direction: column;
25+
gap: rem(2);
2526

26-
.FeatureText {
27-
width: rem(48.6);
28-
padding: 0 rem(1);
29-
box-sizing: border-box;
27+
header {
3028
display: flex;
3129
flex-direction: column;
3230
gap: rem(2);
33-
@media (min-width: 425px) {
34-
margin-left: rem(4);
35-
}
36-
.FeatureParagraph {
37-
font-weight: 500;
38-
line-height: rem(3);
39-
}
40-
.FeatureList {
41-
margin-left: rem(-2);
42-
font-weight: 500;
31+
}
32+
33+
@media (min-width: 425px) {
34+
margin-left: rem(4);
35+
}
36+
.FeatureParagraph {
37+
font-weight: 500;
38+
line-height: rem(3);
39+
}
40+
.FeatureList {
41+
margin-left: rem(-2);
42+
font-weight: 500;
4343

44-
.FeatureOptions {
45-
align-items: center;
46-
list-style-type: none;
47-
display: flex;
48-
flex-direction: row;
49-
gap: rem(0.4);
50-
margin: rem(1.6) 0;
44+
.FeatureOptions {
45+
align-items: center;
46+
list-style-type: none;
47+
display: flex;
48+
flex-direction: row;
49+
gap: rem(0.4);
50+
margin: rem(1.6) 0;
5151

52-
.FeatureContent {
53-
margin-bottom: 0;
54-
margin-left: rem(1);
55-
}
52+
.FeatureContent {
53+
margin-bottom: 0;
54+
margin-left: rem(1);
5655
}
5756
}
5857
}

‎src/features/Home/ApiFeatures/ApiFeatures.tsx

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { Text } from '@deriv/ui';
33
import styles from './ApiFeatures.module.scss';
44
export const ApiFeatures = () => {
55
return (
6-
<div className={styles.FeaturesContainer} data-testid='api-features'>
7-
<div className={styles.FeaturesDescription}>
8-
<div className={styles.FeatureText}>
6+
<article className={styles.FeaturesContainer} data-testid='api-features'>
7+
<section className={styles.FeatureText}>
8+
<header>
99
<Text type='heading-2' as={'h2'} bold aria-level={1}>
1010
Deriv API features
1111
</Text>
@@ -16,6 +16,8 @@ export const ApiFeatures = () => {
1616
<Text type='paragraph-1' className={styles.FeatureParagraph} role={'note'}>
1717
{"With our API, you'll be able to:"}
1818
</Text>
19+
</header>
20+
<section>
1921
<ul className={styles.FeatureList}>
2022
<li className={styles.FeatureOptions}>
2123
<img src='/img/checklist-icon-grey.svg'></img>
@@ -42,9 +44,13 @@ export const ApiFeatures = () => {
4244
<div className={styles.FeatureContent}>{"View user's historical transactions"}</div>
4345
</li>
4446
</ul>
45-
</div>
46-
<div className={styles.ApiFeaturesImage} data-testid='api-features-img' />
47-
</div>
48-
</div>
47+
</section>
48+
</section>
49+
<img
50+
src='/img/api-featutes.png'
51+
className={styles.ApiFeaturesImage}
52+
data-testid='api-features-img'
53+
/>
54+
</article>
4955
);
5056
};

‎src/features/Home/Benefits/Benefits.module.scss

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,16 @@
1212
width: 100%;
1313
flex-wrap: nowrap;
1414
margin-bottom: rem(6.4);
15+
gap: rem(3);
1516
display: flex;
1617
justify-content: space-evenly;
18+
padding: 0 rem(1);
1719

1820
@media screen and (max-width: 992px) {
1921
margin-top: rem(3);
22+
}
23+
24+
@media screen and (max-width: 425px) {
2025
flex-direction: column;
2126
}
2227
}
@@ -57,21 +62,33 @@
5762
.InformationContainer {
5863
display: flex;
5964
width: 100%;
60-
justify-content: space-evenly;
65+
justify-content: center;
6166
align-items: center;
62-
gap: rem(4);
67+
gap: rem(6);
68+
@media screen and (max-width: 992px) {
69+
> img {
70+
width: 100%;
71+
}
72+
}
6373
&:first-child {
6474
flex-direction: row-reverse;
6575
}
66-
div {
76+
.InformationContent {
6777
width: rem(46.8);
78+
> h1 {
79+
margin-bottom: rem(0.8);
80+
}
81+
> p {
82+
line-height: rem(3.6);
83+
font-size: rem(2.4);
84+
}
6885
}
6986
@media screen and (max-width: 992px) {
7087
flex-direction: column;
7188
&:first-child {
7289
flex-direction: column-reverse;
7390
}
74-
div {
91+
.InformationContent {
7592
width: 100%;
7693
}
7794
}

0 commit comments

Comments
 (0)