Skip to content

Commit 3dd8529

Browse files
devguru99devguru99
committed
header link and about page founder and approach component
1 parent 35a25e1 commit 3dd8529

File tree

14 files changed

+512
-25
lines changed

14 files changed

+512
-25
lines changed

‎public/about_approach_1.png‎

13.1 KB
Loading

‎public/about_approach_2.png‎

15.9 KB
Loading

‎public/about_approach_3.png‎

16.6 KB
Loading

‎public/about_founder.png‎

414 KB
Loading

‎src/components/About/Approach.tsx‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
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+
const tiers = [
13+
{
14+
title: 'Virtual Care',
15+
icon: '/about_approach_1.png',
16+
description: 'Accessible from anywhere, so transportation isn\'t a barrier.',
17+
},
18+
{
19+
title: 'Collaboration',
20+
icon: '/about_approach_2.png',
21+
description: 'We work closely with your primary care doctor to ensure seamless, coordinated care.',
22+
},
23+
{
24+
title: 'Compassion',
25+
icon: '/about_approach_3.png',
26+
description: 'Your health and well-being are always our top priorities.',
27+
},
28+
];
29+
30+
export default function Approach() {
31+
return (
32+
<Container
33+
id="approach"
34+
sx={{
35+
pt: { xs: 4, sm: 12 },
36+
pb: { xs: 8, sm: 16 },
37+
position: 'relative',
38+
display: 'flex',
39+
flexDirection: 'column',
40+
alignItems: 'center',
41+
gap: { xs: 3, sm: 6 },
42+
}}
43+
>
44+
<Box
45+
sx={{
46+
width: { sm: '100%', md: '60%' },
47+
textAlign: { sm: 'left', md: 'center' },
48+
}}
49+
>
50+
<motion.div
51+
initial={{ opacity: 0, y: 30 }}
52+
whileInView={{ opacity: 1, y: 0 }}
53+
viewport={{ once: true }}
54+
transition={{
55+
duration: 1,
56+
delay: 0.1,
57+
ease: [0.215, 0.61, 0.355, 1]
58+
}}
59+
>
60+
<Typography
61+
component="h2"
62+
variant="h3"
63+
gutterBottom
64+
sx={{ color: 'text.primary', fontWeight: 700 }}
65+
>
66+
Our&nbsp;
67+
<Typography
68+
component="span"
69+
variant="h3"
70+
sx={(theme) => ({
71+
fontSize: 'inherit',
72+
background: 'linear-gradient(30deg, #183871, #88D8FF)',
73+
WebkitBackgroundClip: 'text',
74+
WebkitTextFillColor: 'transparent',
75+
...theme.applyStyles('dark', {
76+
background: 'linear-gradient(30deg, #183871, #88D8FF)', // Same gradient for dark mode
77+
}),
78+
fontWeight: 700,
79+
})}
80+
>
81+
Approach
82+
</Typography>
83+
</Typography>
84+
</motion.div>
85+
</Box>
86+
<motion.div
87+
initial={{ opacity: 0, y: 30 }}
88+
whileInView={{ opacity: 1, y: 0 }}
89+
viewport={{ once: true }}
90+
transition={{
91+
duration: 1,
92+
delay: 0.1,
93+
ease: [0.215, 0.61, 0.355, 1]
94+
}}
95+
>
96+
<Grid
97+
container
98+
spacing={3}
99+
sx={{ alignItems: 'center', justifyContent: 'center', width: '100%' }}
100+
>
101+
{tiers.map((tier) => (
102+
<Grid
103+
size={{ xs: 12, sm: 12 , md: 4 }}
104+
key={tier.title}
105+
>
106+
<Card
107+
sx={[
108+
{
109+
p: 4,
110+
display: 'flex',
111+
flexDirection: 'column',
112+
gap: 4,
113+
background: 'white',
114+
border: '1px solid #95DDFF',
115+
},
116+
tier.title === 'Professional' &&
117+
((theme) => ({
118+
border: 'none',
119+
background:
120+
'radial-gradient(circle at 50% 0%, hsl(220, 20%, 35%), hsl(220, 30%, 6%))',
121+
boxShadow: `0 8px 12px hsla(220, 20%, 42%, 0.2)`,
122+
...theme.applyStyles('dark', {
123+
background:
124+
'radial-gradient(circle at 50% 0%, hsl(240, 1.90%, 10.40%), hsl(220, 30%, 16%))',
125+
boxShadow: `0 8px 12px hsla(0, 0%, 0%, 0.8)`,
126+
}),
127+
})),
128+
]}
129+
>
130+
<CardContent>
131+
<Box
132+
sx={[
133+
{
134+
mb: 1,
135+
display: 'flex',
136+
justifyContent: 'center',
137+
alignItems: 'center',
138+
gap: 2,
139+
},
140+
tier.title === 'Professional'
141+
? { color: 'grey.100' }
142+
: { color: '' },
143+
]}
144+
>
145+
<Box
146+
component="img"
147+
src={tier.icon}
148+
alt={tier.title}
149+
sx={{
150+
width: 150,
151+
height: 150,
152+
}}
153+
/>
154+
</Box>
155+
<Box
156+
sx={
157+
{
158+
mb: 1,
159+
display: 'flex',
160+
justifyContent: 'center',
161+
alignItems: 'center',
162+
color: '#183871',
163+
gap: 2,
164+
}
165+
}
166+
>
167+
<Typography component="h3" variant="h4">
168+
{tier.title}
169+
</Typography>
170+
</Box>
171+
<Box
172+
sx={{ py: 1, display: 'flex', gap: 1.5, alignItems: 'center' }}
173+
>
174+
<Typography
175+
sx={{
176+
textAlign: 'left',
177+
color: 'text.secondary',
178+
fontSize: '1rem',
179+
width: '100%',
180+
height: '3rem',
181+
}}
182+
>
183+
{tier.description}
184+
</Typography>
185+
</Box>
186+
</CardContent>
187+
<CardActions>
188+
</CardActions>
189+
</Card>
190+
</Grid>
191+
))}
192+
</Grid>
193+
</motion.div>
194+
</Container>
195+
);
196+
}

0 commit comments

Comments
 (0)