Skip to content

Commit a3644e5

Browse files
devguru99devguru99
committed
completed about page top and form component
1 parent fb41c40 commit a3644e5

File tree

15 files changed

+480
-27
lines changed

15 files changed

+480
-27
lines changed

‎public/contact_chat.png‎

8.05 KB
Loading

‎public/contact_form.png‎

809 KB
Loading

‎public/contact_mail.png‎

8.53 KB
Loading

‎public/contact_phone.png‎

7.96 KB
Loading

‎src/components/About/Founder.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -74,16 +74,6 @@ export default function Founder(props: FounderProps) {
7474
useFlexGap
7575
sx={{ alignItems: 'center', width: '100%' }}
7676
>
77-
<motion.div
78-
initial={{ opacity: 0, y: 30 }}
79-
whileInView={{ opacity: 1, y: 0 }}
80-
viewport={{ once: true }}
81-
transition={{
82-
duration: 1,
83-
delay: 0.1,
84-
ease: [0.215, 0.61, 0.355, 1]
85-
}}
86-
>
8777
<Card
8878
sx={[
8979
{
@@ -172,7 +162,17 @@ export default function Founder(props: FounderProps) {
172162
</Typography>
173163
</Typography>
174164
</motion.div>
175-
<CardActions sx={{paddingTop:'2rem'}}>
165+
<CardActions sx={{ paddingTop: '2rem' }}>
166+
<motion.div
167+
initial={{ opacity: 0, y: 30 }}
168+
whileInView={{ opacity: 1, y: 0 }}
169+
viewport={{ once: true }}
170+
transition={{
171+
duration: 1,
172+
delay: 0.1,
173+
ease: [0.215, 0.61, 0.355, 1]
174+
}}
175+
>
176176
<Typography
177177
sx={{
178178
textAlign: 'left',
@@ -220,12 +220,12 @@ export default function Founder(props: FounderProps) {
220220
<FiberManualRecordIcon fontSize="inherit"/> 3 Years of Fellowship: Rutgers New Jersey Medical School <br />
221221
<FiberManualRecordIcon fontSize="inherit"/> Co-author: <i>Rapid Response Events in the Critically Ill</i>
222222
</Typography>
223+
</motion.div>
223224
</CardActions>
224225
</CardContent>
225226
</Box>
226227

227228
</Card>
228-
</motion.div>
229229
</Stack>
230230
</Container>
231231
</Box>

‎src/components/About/Reason.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import { Box, Typography, Button, Container } from '@mui/material';
33
import { motion } from 'framer-motion';
4-
import { ChevronRight } from '@mui/icons-material';
54

65
const backgroundImage = '/about_banner.png';
76

‎src/components/Contact/Form.tsx‎

Lines changed: 317 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,317 @@
1+
import React from 'react';
2+
import { Box, Typography, Button, Container, Card, CardActions, TextField } from '@mui/material';
3+
import { motion } from 'framer-motion';
4+
import FormLabel from '@mui/material/FormLabel';
5+
import Grid from '@mui/material/Grid2';
6+
import OutlinedInput from '@mui/material/OutlinedInput';
7+
import { styled } from '@mui/system';
8+
9+
const FormGrid = styled(Grid)(() => ({
10+
display: 'flex',
11+
flexDirection: 'column',
12+
}));
13+
14+
const backgroundImage = '/contact_form.png';
15+
16+
export default function Form () {
17+
return (
18+
19+
<Box
20+
sx={{
21+
display: 'flex',
22+
backgroundImage: `url(${backgroundImage})`,
23+
backgroundSize: 'cover',
24+
height: { xs: '100%', sm: 750 },
25+
}}
26+
>
27+
<Container id="contactform"
28+
sx={{
29+
pt: { xs: 4, sm: 12 },
30+
pb: { xs: 8, sm: 16 },
31+
position: 'relative',
32+
display: 'flex',
33+
flexDirection: 'column',
34+
alignItems: 'center',
35+
gap: { xs: 3, sm: 6 },
36+
}}
37+
>
38+
<Box
39+
sx={{
40+
display: 'flex',
41+
width: 'inherit',
42+
flexDirection: { xs: 'column', md: 'row' },
43+
gap: 2,
44+
alignItems: {xs: 'center'},
45+
}}
46+
>
47+
<Box
48+
sx={{
49+
display: 'flex',
50+
width: { xs: '100%', md: '50%' },
51+
height: 'var(--items-image-height)',
52+
flexDirection: 'column',
53+
justifyContent: 'center',
54+
alignItems: 'flex-start',
55+
textAlign: 'center',
56+
gap: 1,
57+
}}
58+
>
59+
<Box
60+
component="img"
61+
src='/contact_phone.png'
62+
sx={{
63+
width: 40,
64+
height: 40,
65+
}}
66+
/>
67+
<motion.div
68+
initial={{ opacity: 0, y: 30 }}
69+
whileInView={{ opacity: 1, y: 0 }}
70+
viewport={{ once: true }}
71+
transition={{
72+
duration: 1,
73+
delay: 0.1,
74+
ease: [0.215, 0.61, 0.355, 1]
75+
}}
76+
>
77+
<Typography
78+
sx={{
79+
textAlign: 'left',
80+
width: '100%',
81+
fontWeight: 'bold',
82+
}}
83+
>
84+
Phone:
85+
</Typography>
86+
</motion.div>
87+
<motion.div
88+
initial={{ opacity: 0, y: 30 }}
89+
whileInView={{ opacity: 1, y: 0 }}
90+
viewport={{ once: true }}
91+
transition={{
92+
duration: 1,
93+
delay: 0.1,
94+
ease: [0.215, 0.61, 0.355, 1]
95+
}}
96+
>
97+
<Typography
98+
sx={{
99+
textAlign: 'left',
100+
width: '100%',
101+
}}
102+
>
103+
Call us at +1 (732) 724-9644 for any immediate questions or assistance. Our team is available during business hours to provide you with the support you need.
104+
</Typography>
105+
</motion.div>
106+
<Box
107+
component="img"
108+
src='/contact_mail.png'
109+
sx={{
110+
width: 40,
111+
height: 40,
112+
}}
113+
/>
114+
<motion.div
115+
initial={{ opacity: 0, y: 30 }}
116+
whileInView={{ opacity: 1, y: 0 }}
117+
viewport={{ once: true }}
118+
transition={{
119+
duration: 1,
120+
delay: 0.1,
121+
ease: [0.215, 0.61, 0.355, 1]
122+
}}
123+
>
124+
<Typography
125+
sx={{
126+
textAlign: 'left',
127+
width: '100%',
128+
fontWeight: 'bold',
129+
}}
130+
>
131+
Email:
132+
</Typography>
133+
</motion.div>
134+
<motion.div
135+
initial={{ opacity: 0, y: 30 }}
136+
whileInView={{ opacity: 1, y: 0 }}
137+
viewport={{ once: true }}
138+
transition={{
139+
duration: 1,
140+
delay: 0.1,
141+
ease: [0.215, 0.61, 0.355, 1]
142+
}}
143+
>
144+
<Typography
145+
sx={{
146+
textAlign: 'left',
147+
width: '100%',
148+
}}
149+
>
150+
For general inquiries or to learn more about our services, email us at [email protected]. We typically respond right away!
151+
</Typography>
152+
</motion.div>
153+
<Box
154+
component="img"
155+
src='/contact_chat.png'
156+
sx={{
157+
width: 40,
158+
height: 40,
159+
}}
160+
/>
161+
<motion.div
162+
initial={{ opacity: 0, y: 30 }}
163+
whileInView={{ opacity: 1, y: 0 }}
164+
viewport={{ once: true }}
165+
transition={{
166+
duration: 1,
167+
delay: 0.1,
168+
ease: [0.215, 0.61, 0.355, 1]
169+
}}
170+
>
171+
<Typography
172+
sx={{
173+
textAlign: 'left',
174+
width: '100%',
175+
fontWeight: 'bold',
176+
}}
177+
>
178+
Book an Appointment
179+
</Typography>
180+
</motion.div>
181+
<motion.div
182+
initial={{ opacity: 0, y: 30 }}
183+
whileInView={{ opacity: 1, y: 0 }}
184+
viewport={{ once: true }}
185+
transition={{
186+
duration: 1,
187+
delay: 0.1,
188+
ease: [0.215, 0.61, 0.355, 1]
189+
}}
190+
>
191+
<Typography
192+
sx={{
193+
textAlign: 'left',
194+
width: '100%',
195+
}}
196+
>
197+
Ready to take the next step in your recovery? <br />You can easily book a virtual consultation with one of our experts.
198+
</Typography>
199+
</motion.div>
200+
<Button color="primary" variant="contained" size="small"
201+
sx={{
202+
marginTop: '1rem',
203+
}}
204+
>
205+
Book Now
206+
</Button>
207+
</Box>
208+
<Box
209+
sx={{
210+
display: 'flex',
211+
width: { xs: '100%', md: '50%' },
212+
height: 'var(--items-image-height)',
213+
}}
214+
>
215+
<Card
216+
variant="outlined"
217+
sx={{
218+
height: '100%',
219+
width: '100%',
220+
display: 'flex',
221+
flexDirection: 'column',
222+
border: 'none',
223+
backgroundColor: 'white',
224+
justifyContent: 'center',
225+
padding: 3.5,
226+
}}
227+
>
228+
<Typography
229+
variant="h4"
230+
sx={{ textAlign: 'center', mb: { xs: 2, sm: 1 }, marginTop: '1rem' }}
231+
>
232+
Send Us a Message
233+
</Typography>
234+
<Typography
235+
sx={{
236+
textAlign: 'center',
237+
width: '100%',
238+
marginBottom: '1rem',
239+
}}
240+
>
241+
If you prefer, you can fill out the form below, and one of our team members will get back to you promptly.
242+
</Typography>
243+
<motion.div
244+
initial={{ opacity: 0, y: 30 }}
245+
whileInView={{ opacity: 1, y: 0 }}
246+
viewport={{ once: true }}
247+
transition={{
248+
duration: 1,
249+
delay: 0.1,
250+
ease: [0.215, 0.61, 0.355, 1]
251+
}}
252+
>
253+
<Grid container spacing={3}>
254+
<FormGrid size={{ xs: 12, md: 6 }}>
255+
<FormLabel htmlFor="name" required>
256+
Name
257+
</FormLabel>
258+
<OutlinedInput
259+
id="name"
260+
name="name"
261+
aria-label="Enter your full name"
262+
type="text"
263+
placeholder="John Doe"
264+
autoComplete="name"
265+
required
266+
size="small"
267+
sx={{ backgroundColor: 'white'}}
268+
/>
269+
</FormGrid>
270+
271+
<FormGrid size={{ xs: 12, md: 6 }}>
272+
<FormLabel htmlFor="email" required>
273+
Email
274+
</FormLabel>
275+
<OutlinedInput
276+
id="email"
277+
name="email"
278+
type="email"
279+
aria-label="Enter your email address"
280+
placeholder="[email protected]"
281+
autoComplete="email"
282+
required
283+
size="small"
284+
sx={{ backgroundColor: 'white'}}
285+
/>
286+
</FormGrid>
287+
288+
<FormGrid size={{ xs: 12 }}>
289+
<FormLabel htmlFor="message" required>
290+
Message
291+
</FormLabel>
292+
<OutlinedInput
293+
id="standard-multiline-static"
294+
name="message"
295+
placeholder="Write your message here..."
296+
autoComplete="off"
297+
required
298+
multiline
299+
rows={8}
300+
sx={{ height: 200 , backgroundColor: 'white'}}
301+
/>
302+
</FormGrid>
303+
</Grid>
304+
</motion.div>
305+
<CardActions sx={{ justifyContent: 'flex-end' }}>
306+
<Button color="primary" variant="contained" size="small">
307+
Submit
308+
</Button>
309+
</CardActions>
310+
</Card>
311+
</Box>
312+
</Box>
313+
</Container>
314+
</Box>
315+
316+
);
317+
};

0 commit comments

Comments
 (0)