Skip to content

Commit e60eadc

Browse files
JE1999JE1999
authored
imp(design): better responsiveness and image sizes (#43)
* feat(design): improvement in landing page design the responsiveness was improved and the button was adapted to the design of the library * fix(button): open mailto link fix button to open "mailto" link * chore(images): image update updating images in the gallery
1 parent e0ec59c commit e60eadc

File tree

10 files changed

+217
-160
lines changed

10 files changed

+217
-160
lines changed

‎app/components/benefits/index.tsx‎

Lines changed: 68 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -17,65 +17,77 @@ export default function Index({ data }: { data: Benefits }) {
1717
</Typography>
1818
<div className={styles.content_info}>
1919
<GridContainer alignItems="center">
20-
<GridItem lg={6}>
21-
<Image
22-
src="/benefits/layer1.svg"
23-
alt="imagen"
24-
className={styles.image}
25-
width={680}
26-
height={510}
27-
/>
20+
<GridItem lg={12} md={12}>
21+
<div className={styles.items}>
22+
<Image
23+
src="/benefits/layer1.svg"
24+
alt="imagen"
25+
className={styles.image}
26+
width={680}
27+
height={510}
28+
/>
29+
<div>
30+
<Typography gutterBottom variant="h2">
31+
{data.subTitleOne}
32+
</Typography>
33+
<Typography variant="body2">{data.descriptionOne}</Typography>
34+
</div>
35+
</div>
2836
</GridItem>
29-
<GridItem lg={6}>
30-
<Typography gutterBottom variant="h2">
31-
{data.subTitleOne}
32-
</Typography>
33-
<Typography variant="body2">{data.descriptionOne}</Typography>
37+
<GridItem lg={12} md={12}>
38+
<div className={styles.items_reverse}>
39+
<div>
40+
<Typography gutterBottom variant="h2">
41+
{data.subTitleTwo}
42+
</Typography>
43+
<Typography variant="body2">{data.descriptionTwo}</Typography>
44+
</div>
45+
<Image
46+
src="/benefits/layer2.svg"
47+
alt="imagen"
48+
className={styles.image}
49+
width={680}
50+
height={510}
51+
/>
52+
</div>
3453
</GridItem>
35-
<GridItem lg={6}>
36-
<Typography gutterBottom variant="h2">
37-
{data.subTitleTwo}
38-
</Typography>
39-
<Typography variant="body2">{data.descriptionTwo}</Typography>
54+
<GridItem lg={12} md={12}>
55+
<div className={styles.items}>
56+
<Image
57+
src="/benefits/layer3.svg"
58+
alt="imagen"
59+
className={styles.image}
60+
width={680}
61+
height={510}
62+
/>
63+
<div>
64+
<Typography gutterBottom variant="h2">
65+
{data.subTitleThree}
66+
</Typography>
67+
<Typography variant="body2">
68+
{data.descriptionThree}
69+
</Typography>
70+
</div>
71+
</div>
4072
</GridItem>
41-
<GridItem lg={6}>
42-
<Image
43-
src="/benefits/layer2.svg"
44-
alt="imagen"
45-
className={styles.image}
46-
width={680}
47-
height={510}
48-
/>
49-
</GridItem>
50-
<GridItem lg={6}>
51-
<Image
52-
src="/benefits/layer3.svg"
53-
alt="imagen"
54-
className={styles.image}
55-
width={680}
56-
height={510}
57-
/>
58-
</GridItem>
59-
<GridItem lg={6}>
60-
<Typography gutterBottom variant="h2">
61-
{data.subTitleThree}
62-
</Typography>
63-
<Typography variant="body2">{data.descriptionThree}</Typography>
64-
</GridItem>
65-
<GridItem lg={6}>
66-
<Typography gutterBottom variant="h2">
67-
{data.subTitleFour}
68-
</Typography>
69-
<Typography variant="body2">{data.descriptionFour}</Typography>
70-
</GridItem>
71-
<GridItem lg={6}>
72-
<Image
73-
src="/benefits/layer4.svg"
74-
alt="imagen"
75-
className={styles.image}
76-
width={680}
77-
height={510}
78-
/>
73+
<GridItem lg={12} md={12}>
74+
<div className={styles.items_reverse}>
75+
<div>
76+
<Typography gutterBottom variant="h2">
77+
{data.subTitleFour}
78+
</Typography>
79+
<Typography variant="body2">
80+
{data.descriptionFour}
81+
</Typography>
82+
</div>
83+
<Image
84+
src="/benefits/layer4.svg"
85+
alt="imagen"
86+
className={styles.image}
87+
width={680}
88+
height={510}
89+
/>
90+
</div>
7991
</GridItem>
8092
</GridContainer>
8193
</div>

‎app/components/benefits/styles.module.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,37 @@
88
background-position: center;
99
}
1010

11+
.items,
12+
.items_reverse {
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
gap: 30px;
17+
}
18+
1119
.image {
1220
width: 500px;
1321
}
1422

23+
@media only screen and (max-width: 800px) {
24+
.items {
25+
display: block;
26+
text-align: center;
27+
}
28+
29+
.items_reverse {
30+
text-align: center;
31+
display: inline-flex;
32+
flex-direction: column-reverse;
33+
}
34+
}
35+
1536
@media only screen and (max-width: 1200px) {
37+
.items,
38+
.items_reverse {
39+
margin: 80px 0;
40+
}
41+
1642
.image {
1743
width: 300px;
1844
height: auto;

‎app/components/hero/styles.module.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
}
2020

2121
@media only screen and (max-width: 800px) {
22+
.content {
23+
display: block;
24+
min-height: auto;
25+
}
2226
.image {
2327
display: none;
2428
}

‎app/components/navbar/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default function Index({ data }: { data: Navbar }) {
3434
<AppsIcon
3535
fontSize="large"
3636
color="primary"
37-
sx={{ marginRight: '24px' }}
37+
sx={{ marginRight: '24px', display: 'none' }}
3838
/>
3939
<Button notFullWidth variant="outlined" onClick={handleClick}>
4040
{data?.button.label}

‎app/components/online-services/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { OnlineServices } from '@/app/types';
1313

1414
export default function Index({ data }: { data: OnlineServices }) {
1515
const handleClick = () => {
16-
window.location.href = data.button.href;
16+
window.location.href = `mailto:${data.button.href}`;
1717
};
1818

1919
return (

‎app/favicon.ico‎

-118 Bytes
Binary file not shown.

‎app/globals.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
@media only screen and (max-width: 450px) {
22
h1 {
3-
font-size: 50px !important;
3+
font-size: 40px !important;
4+
line-height: 70px !important;
5+
font-weight: bold !important;
6+
}
7+
8+
h2 {
9+
font-size: 35px !important;
10+
line-height: 50px !important;
411
}
512
}

‎app/theme/index.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,14 @@ export const theme = createTheme({
5656
},
5757

5858
components: {
59+
MuiButton: {
60+
defaultProps: {
61+
sx: {
62+
borderRadius: '60px',
63+
height: '40px',
64+
},
65+
},
66+
},
5967
MuiCard: {
6068
styleOverrides: {
6169
root: {

0 commit comments

Comments
 (0)