Skip to content

Commit 1289d00

Browse files
devguru99devguru99
committed
completed contact page ui
1 parent a3644e5 commit 1289d00

File tree

9 files changed

+128
-19
lines changed

9 files changed

+128
-19
lines changed

‎public/social_facebook.png‎

949 Bytes
Loading

‎public/social_instagram.png‎

2.48 KB
Loading

‎public/social_linkedin.png‎

1016 Bytes
Loading

‎public/social_twitter.png‎

804 Bytes
Loading

‎public/submit_vector.png‎

350 Bytes
Loading

‎src/components/Contact/Form.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Box, Typography, Button, Container, Card, CardActions, TextField } from '@mui/material';
2+
import { Box, Typography, Button, Container, Card, CardActions } from '@mui/material';
33
import { motion } from 'framer-motion';
44
import FormLabel from '@mui/material/FormLabel';
55
import Grid from '@mui/material/Grid2';
@@ -21,7 +21,7 @@ export default function Form () {
2121
display: 'flex',
2222
backgroundImage: `url(${backgroundImage})`,
2323
backgroundSize: 'cover',
24-
height: { xs: '100%', sm: 750 },
24+
height: { xs: '100%', sm: '100%' },
2525
}}
2626
>
2727
<Container id="contactform"
@@ -304,7 +304,15 @@ export default function Form () {
304304
</motion.div>
305305
<CardActions sx={{ justifyContent: 'flex-end' }}>
306306
<Button color="primary" variant="contained" size="small">
307-
Submit
307+
Submit&nbsp;
308+
<Box
309+
component="img"
310+
src='/submit_vector.png'
311+
sx={{
312+
width: 20,
313+
height: 20,
314+
}}
315+
/>
308316
</Button>
309317
</CardActions>
310318
</Card>

‎src/components/Contact/Social.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import Container from '@mui/material/Container';
4+
import Stack from '@mui/material/Stack';
5+
import Typography from '@mui/material/Typography';
6+
import { motion } from 'framer-motion';
7+
8+
9+
export default function Social() {
10+
return (
11+
<Box
12+
id="social"
13+
sx={{
14+
pt: { xs: 4, sm: 12 },
15+
pb: { xs: 8, sm: 16 },
16+
}}
17+
>
18+
<Container
19+
sx={{
20+
position: 'relative',
21+
display: 'flex',
22+
flexDirection: 'column',
23+
alignItems: 'left',
24+
gap: { xs: 3, sm: 6 },
25+
}}
26+
>
27+
<Box
28+
sx={{
29+
width: { sm: '100%', md: '100%' },
30+
textAlign: { sm: 'left', md: 'center' },
31+
}}
32+
>
33+
<motion.div
34+
initial={{ opacity: 0, y: 30 }}
35+
whileInView={{ opacity: 1, y: 0 }}
36+
viewport={{ once: true }}
37+
transition={{
38+
duration: 1,
39+
delay: 0.1,
40+
ease: [0.215, 0.61, 0.355, 1]
41+
}}
42+
>
43+
<Typography
44+
variant="h4"
45+
sx={{ color: 'text.secondary', textAlign: 'left', mb: { xs: 2, sm: 1 }, marginTop: '1rem' }}
46+
>
47+
Connect with Us on Social Media
48+
</Typography>
49+
<Stack
50+
direction={{ xs: 'column', sm: 'row' }}
51+
spacing={1}
52+
useFlexGap
53+
sx={{ pt: 2, width: { xs: '100%', sm: '100%' }, alignItems: 'center', justifyContent: 'space-between' }}
54+
>
55+
<Typography
56+
variant="body1"
57+
sx={{ color: 'text.secondary', textAlign: 'left', mb: { xs: 2, sm: 0 } }}
58+
>
59+
Stay informed and engaged with helpful resources, tips, and updates. Follow us on social media:
60+
</Typography>
61+
<Stack
62+
direction={{ xs: 'row', sm: 'row' }}
63+
spacing={1}
64+
useFlexGap
65+
sx={{ width: { xs: '100%', sm: 'auto' } }}
66+
>
67+
<Box
68+
component="img"
69+
src='/social_facebook.png'
70+
sx={{
71+
width: 35,
72+
height: 35,
73+
}}
74+
/>
75+
<Box
76+
component="img"
77+
src='/social_twitter.png'
78+
sx={{
79+
width: 35,
80+
height: 35,
81+
}}
82+
/>
83+
<Box
84+
component="img"
85+
src='/social_instagram.png'
86+
sx={{
87+
width: 35,
88+
height: 35,
89+
}}
90+
/>
91+
<Box
92+
component="img"
93+
src='/social_linkedin.png'
94+
sx={{
95+
width: 35,
96+
height: 35,
97+
}}
98+
/>
99+
</Stack>
100+
</Stack>
101+
<Typography
102+
variant="body1"
103+
sx={{ color: 'text.secondary', textAlign: 'left', mt: { xs: 2, sm: 4 } }}
104+
>
105+
We understand that post-ICU recovery is challenging, and we&apos;re here to make it easier. Don&apos;t hesitate to reach out—we&apos;re here for you every step of the way.
106+
</Typography>
107+
</motion.div>
108+
</Box>
109+
110+
</Container>
111+
</Box>
112+
);
113+
}

‎src/components/Contact/Top.tsx‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -59,24 +59,10 @@ export default function Top() {
5959
alignItems: 'center',
6060
fontSize: 'clamp(3rem, 10vw, 3.5rem)',
6161
justifyContent: 'center',
62+
textAlign: 'center',
6263
}}
6364
>
64-
Contact Us - We&apos;re Here to&nbsp;
65-
<Typography
66-
variant="inherit"
67-
sx={(theme) => ({
68-
fontSize: 'inherit',
69-
background: 'linear-gradient(30deg, #183871, #88D8FF)',
70-
WebkitBackgroundClip: 'text',
71-
WebkitTextFillColor: 'transparent',
72-
...theme.applyStyles('dark', {
73-
background: 'linear-gradient(30deg, #183871, #88D8FF)', // Same gradient for dark mode
74-
}),
75-
})}
76-
>
77-
Support
78-
</Typography>
79-
&nbsp;Your Recovery
65+
Contact Us - We&apos;re Here to&nbsp;Support&nbsp;Your Recovery
8066
</Typography>
8167
</motion.div>
8268
</Stack>

‎src/pages/Contact/Contact.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22

33
import Form from '@/components/Contact/Form';
44
import Top from '@/components/Contact/Top';
5+
import Social from '@/components/Contact/Social';
56

67

78
export default function Contact() {
@@ -10,6 +11,7 @@ export default function Contact() {
1011
<Top />
1112
<div>
1213
<Form />
14+
<Social />
1315
</div>
1416
</>
1517

0 commit comments

Comments
 (0)