Skip to content

Commit fb41c40

Browse files
devguru99devguru99
committed
completed about page
1 parent 92a536a commit fb41c40

File tree

12 files changed

+593
-19
lines changed

12 files changed

+593
-19
lines changed

‎public/about_banner.png‎

330 KB
Loading

‎public/about_mission_1.png‎

251 KB
Loading

‎public/about_mission_2.png‎

188 KB
Loading

‎public/about_recovery.png‎

190 KB
Loading

‎src/components/About/Contact.tsx‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import Card from '@mui/material/Card';
4+
import Container from '@mui/material/Container';
5+
import Grid from '@mui/material/Grid2';
6+
import Stack from '@mui/material/Stack';
7+
import Typography from '@mui/material/Typography';
8+
import Phone from '@mui/icons-material/Phone';
9+
import Email from '@mui/icons-material/Email';
10+
import Chat from '@mui/icons-material/Chat';
11+
import { motion } from 'framer-motion';
12+
13+
const items = [
14+
{
15+
icon: <Phone />,
16+
title: 'Phone Number',
17+
description:
18+
'Call Us 24h: +1 (732) 724-9644',
19+
},
20+
{
21+
icon: <Email />,
22+
title: 'Email',
23+
description:
24+
'Email Us at: [email protected]',
25+
},
26+
{
27+
icon: <Chat />,
28+
title: 'Form',
29+
description:
30+
'Fill out our Contact Form to get started.',
31+
},
32+
];
33+
34+
export default function Contact() {
35+
return (
36+
<Box
37+
id="contact"
38+
sx={{
39+
pt: { xs: 4, sm: 12 },
40+
pb: { xs: 8, sm: 16 },
41+
}}
42+
>
43+
<Container
44+
sx={{
45+
position: 'relative',
46+
display: 'flex',
47+
flexDirection: 'column',
48+
alignItems: 'center',
49+
gap: { xs: 3, sm: 6 },
50+
}}
51+
>
52+
<Box
53+
sx={{
54+
width: { sm: '100%', md: '60%' },
55+
textAlign: { sm: 'left', md: 'center' },
56+
}}
57+
>
58+
<motion.div
59+
initial={{ opacity: 0, y: 30 }}
60+
whileInView={{ opacity: 1, y: 0 }}
61+
viewport={{ once: true }}
62+
transition={{
63+
duration: 1,
64+
delay: 0.1,
65+
ease: [0.215, 0.61, 0.355, 1]
66+
}}
67+
>
68+
<Typography
69+
component="h2"
70+
variant="h3"
71+
gutterBottom
72+
sx={{ color: 'text.primary', fontWeight: 700 }}
73+
>
74+
Let&apos;s make your recovery&nbsp;
75+
<Typography
76+
component="span"
77+
variant="h3"
78+
sx={(theme) => ({
79+
fontSize: 'inherit',
80+
background: 'linear-gradient(30deg, #183871, #88D8FF)',
81+
WebkitBackgroundClip: 'text',
82+
WebkitTextFillColor: 'transparent',
83+
...theme.applyStyles('dark', {
84+
background: 'linear-gradient(30deg, #183871, #88D8FF)', // Same gradient for dark mode
85+
}),
86+
fontWeight: 700,
87+
})}
88+
>
89+
Easier, Together
90+
</Typography>
91+
</Typography>
92+
<Typography
93+
variant="h4"
94+
sx={{ color: 'text.secondary', mb: { xs: 2, sm: 1 } }}
95+
>
96+
Contact Us Today
97+
</Typography>
98+
</motion.div>
99+
</Box>
100+
<Grid container spacing={2} sx={{width: 'fill-available'}}>
101+
{items.map((item, index) => (
102+
<Grid size={{ xs: 12, sm: 6, md: 4 }} key={index}>
103+
<Stack
104+
direction="column"
105+
component={Card}
106+
spacing={1}
107+
useFlexGap
108+
sx={{
109+
color: 'inherit',
110+
background: 'white',
111+
p: 3,
112+
height: '100%',
113+
border: '1px solid #95DDFF',
114+
}}
115+
>
116+
<Box sx={{ opacity: '50%' }}>{item.icon}</Box>
117+
<div>
118+
<Typography gutterBottom sx={{ fontWeight: 'medium' }}>
119+
{item.title}
120+
</Typography>
121+
<Typography variant="body2">
122+
{item.description}
123+
</Typography>
124+
</div>
125+
</Stack>
126+
</Grid>
127+
))}
128+
</Grid>
129+
</Container>
130+
</Box>
131+
);
132+
}

‎src/components/About/Founder.tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
11
import * as React from 'react';
22
import Box from '@mui/material/Box';
3-
import Button from '@mui/material/Button';
43
import Container from '@mui/material/Container';
5-
import InputLabel from '@mui/material/InputLabel';
6-
import Link from '@mui/material/Link';
74
import Stack from '@mui/material/Stack';
8-
import TextField from '@mui/material/TextField';
95
import Typography from '@mui/material/Typography';
106
import Card from '@mui/material/Card';
117
import CardActions from '@mui/material/CardActions';
128
import CardContent from '@mui/material/CardContent';
139
import CardMedia from '@mui/material/CardMedia';
1410
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
1511

16-
import { visuallyHidden } from '@mui/utils';
1712
import { styled } from '@mui/material/styles';
1813

1914
// @third-party
@@ -99,18 +94,29 @@ export default function Founder(props: FounderProps) {
9994
padding: '0px',
10095
borderRadius: '20px',
10196
overflow: 'hidden',
97+
boxShadow: '0 0 12px 8px hsla(100, 25%, 80%, 0.2)',
10298
},
10399
]}
104100
>
105-
<CardMedia
101+
{loading ? (
102+
<Skeleton
103+
variant="rectangular"
104+
width="auto"
105+
height={700}
106+
animation="wave"
107+
/>
108+
):(
109+
<CardMedia
106110
component="img"
107-
sx={{
108-
width: { xs: '100%', md: 'auto' },
109-
height: { xs: 'auto', md: '700px' },
110-
}}
111+
sx={{
112+
width: { xs: '100%', md: 'auto' },
113+
height: { xs: 'auto', md: 'auto' },
114+
}}
111115
image="/about_founder.png"
112116
alt="Founder"
117+
loading="lazy"
113118
/>
119+
)}
114120
<Box
115121
sx={[
116122
{
@@ -121,7 +127,7 @@ export default function Founder(props: FounderProps) {
121127
justifyContent: 'flex-start',
122128
alignItems: 'center',
123129
gap: 2,
124-
padding: { xs: 2, md: 5 },
130+
padding: { xs: 4, md: 5 },
125131
},
126132
]}
127133
>

‎src/components/About/Mission.tsx‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import Card from '@mui/material/Card';
4+
import CardActions from '@mui/material/CardActions';
5+
import CardContent from '@mui/material/CardContent';
6+
import Container from '@mui/material/Container';
7+
import Grid from '@mui/material/Grid2';
8+
import Typography from '@mui/material/Typography';
9+
import { motion } from 'framer-motion';
10+
11+
12+
export default function Mission() {
13+
return (
14+
<Container
15+
id="mission"
16+
sx={{
17+
pt: { xs: 4, sm: 12 },
18+
pb: { xs: 8, sm: 16 },
19+
position: 'relative',
20+
display: 'flex',
21+
flexDirection: 'column',
22+
alignItems: 'center',
23+
gap: { xs: 3, sm: 6 },
24+
}}
25+
>
26+
<motion.div
27+
initial={{ opacity: 0, y: 30 }}
28+
whileInView={{ opacity: 1, y: 0 }}
29+
viewport={{ once: true }}
30+
transition={{
31+
duration: 1,
32+
delay: 0.1,
33+
ease: [0.215, 0.61, 0.355, 1]
34+
}}
35+
>
36+
<Grid
37+
container
38+
spacing={3}
39+
sx={{ alignItems: 'center', justifyContent: 'center', width: '100%' }}
40+
>
41+
<Grid
42+
size={{ xs: 12, sm: 12 , md: 4 }}
43+
>
44+
<motion.div
45+
initial={{ opacity: 0, y: 30 }}
46+
whileInView={{ opacity: 1, y: 0 }}
47+
viewport={{ once: true }}
48+
transition={{
49+
duration: 1,
50+
delay: 0.1,
51+
ease: [0.215, 0.61, 0.355, 1]
52+
}}
53+
>
54+
<Box
55+
component="img"
56+
src='/about_mission_1.png'
57+
sx={{
58+
width: {xs: '100%', md:'auto'},
59+
height: {xs: 'auto', md:'auto'},
60+
transition: 'transform 0.3s ease-in-out',
61+
'&:hover': {
62+
transform: 'scale(1.05)',
63+
},
64+
}}
65+
alt='mission_1'
66+
/>
67+
</motion.div>
68+
</Grid>
69+
<Grid
70+
size={{ xs: 12, sm: 12 , md: 4 }}
71+
>
72+
<Card
73+
sx={[
74+
{
75+
p: 4,
76+
display: 'flex',
77+
flexDirection: 'column',
78+
gap: 4,
79+
background: 'white',
80+
border: '1px solid #95DDFF',
81+
height: '435.6px'
82+
},
83+
]}
84+
>
85+
<CardContent>
86+
<Box
87+
sx={[
88+
{
89+
mt: 3,
90+
display: 'flex',
91+
justifyContent: 'center',
92+
alignItems: 'center',
93+
gap: 2,
94+
},
95+
]}
96+
>
97+
<motion.div
98+
initial={{ opacity: 0, y: 30 }}
99+
whileInView={{ opacity: 1, y: 0 }}
100+
viewport={{ once: true }}
101+
transition={{
102+
duration: 1,
103+
delay: 0.1,
104+
ease: [0.215, 0.61, 0.355, 1]
105+
}}
106+
>
107+
<Typography
108+
component="h2"
109+
variant="h3"
110+
gutterBottom
111+
sx={{ color: 'text.primary', fontWeight: 700 }}
112+
>
113+
Our&nbsp;
114+
<Typography
115+
component="span"
116+
variant="h3"
117+
sx={(theme) => ({
118+
fontSize: 'inherit',
119+
background: 'linear-gradient(30deg, #183871, #88D8FF)',
120+
WebkitBackgroundClip: 'text',
121+
WebkitTextFillColor: 'transparent',
122+
...theme.applyStyles('dark', {
123+
background: 'linear-gradient(30deg, #183871, #88D8FF)', // Same gradient for dark mode
124+
}),
125+
fontWeight: 700,
126+
})}
127+
>
128+
Mission
129+
</Typography>
130+
</Typography>
131+
</motion.div>
132+
</Box>
133+
<Box
134+
sx={
135+
{
136+
mt: 5,
137+
display: 'flex',
138+
justifyContent: 'center',
139+
alignItems: 'center',
140+
color: '#183871',
141+
gap: 2,
142+
}
143+
}
144+
>
145+
<Typography component="h3" variant="h4">
146+
To improve the lives of ICU survivors by making recovery easier, reducing readmissions, and empowering patients to take control of their health.
147+
</Typography>
148+
</Box>
149+
</CardContent>
150+
<CardActions>
151+
</CardActions>
152+
</Card>
153+
</Grid>
154+
<Grid
155+
size={{ xs: 12, sm: 12 , md: 4 }}
156+
>
157+
<motion.div
158+
initial={{ opacity: 0, y: 30 }}
159+
whileInView={{ opacity: 1, y: 0 }}
160+
viewport={{ once: true }}
161+
transition={{
162+
duration: 1,
163+
delay: 0.1,
164+
ease: [0.215, 0.61, 0.355, 1]
165+
}}
166+
>
167+
<Box
168+
component="img"
169+
src='/about_mission_2.png'
170+
sx={{
171+
width: {xs: '100%', md:'auto'},
172+
height: {xs: 'auto', md:'auto'},
173+
transition: 'transform 0.3s ease-in-out',
174+
'&:hover': {
175+
transform: 'scale(1.05)',
176+
},
177+
}}
178+
alt='mission_2'
179+
/>
180+
</motion.div>
181+
</Grid>
182+
</Grid>
183+
</motion.div>
184+
</Container>
185+
);
186+
}

0 commit comments

Comments
 (0)