Skip to content

Commit 133dcdd

Browse files
devguru99devguru99
committed
completed faq page ui
1 parent 1289d00 commit 133dcdd

File tree

12 files changed

+541
-100
lines changed

12 files changed

+541
-100
lines changed

‎public/banner.png‎

200 KB
Loading

‎public/faq_top.png‎

117 KB
Loading

‎src/components/About/Founder.tsx‎

Lines changed: 28 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -122,46 +122,35 @@ export default function Founder(props: FounderProps) {
122122
]}
123123
>
124124
<CardContent sx={{ flex: '1 0 auto' }}>
125-
<motion.div
126-
initial={{ opacity: 0, y: 30 }}
127-
whileInView={{ opacity: 1, y: 0 }}
128-
viewport={{ once: true }}
129-
transition={{
130-
duration: 1,
131-
delay: 0.1,
132-
ease: [0.215, 0.61, 0.355, 1]
133-
}}
125+
<Typography
126+
variant="h1"
127+
sx={{
128+
display: 'flex',
129+
flexDirection: { xs: 'column', sm: 'row' },
130+
flexWrap: 'wrap',
131+
alignItems: 'center',
132+
fontSize: 'clamp(3rem, 10vw, 3.5rem)',
133+
justifyContent: 'flex-start',
134+
textAlign: 'center',
135+
paddingTop: '1rem',
136+
}}
137+
>
138+
Meet the Founder of&nbsp;
139+
<Typography
140+
variant="inherit"
141+
sx={(theme) => ({
142+
fontSize: 'inherit',
143+
background: 'linear-gradient(30deg, #183871, #88D8FF)',
144+
WebkitBackgroundClip: 'text',
145+
WebkitTextFillColor: 'transparent',
146+
...theme.applyStyles('dark', {
147+
background: 'linear-gradient(30deg, #183871, #88D8FF)', // Same gradient for dark mode
148+
}),
149+
})}
134150
>
135-
<Typography
136-
variant="h1"
137-
sx={{
138-
display: 'flex',
139-
flexDirection: { xs: 'column', sm: 'row' },
140-
flexWrap: 'wrap',
141-
alignItems: 'center',
142-
fontSize: 'clamp(3rem, 10vw, 3.5rem)',
143-
justifyContent: 'flex-start',
144-
textAlign: 'center',
145-
paddingTop: '1rem',
146-
}}
147-
>
148-
Meet the Founder of&nbsp;
149-
<Typography
150-
variant="inherit"
151-
sx={(theme) => ({
152-
fontSize: 'inherit',
153-
background: 'linear-gradient(30deg, #183871, #88D8FF)',
154-
WebkitBackgroundClip: 'text',
155-
WebkitTextFillColor: 'transparent',
156-
...theme.applyStyles('dark', {
157-
background: 'linear-gradient(30deg, #183871, #88D8FF)', // Same gradient for dark mode
158-
}),
159-
})}
160-
>
161-
CareBeyondICU
162-
</Typography>
163-
</Typography>
164-
</motion.div>
151+
CareBeyondICU
152+
</Typography>
153+
</Typography>
165154
<CardActions sx={{ paddingTop: '2rem' }}>
166155
<motion.div
167156
initial={{ opacity: 0, y: 30 }}

‎src/components/AppAppBar.tsx‎

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
1414
import Sitemark from './SitemarkIcon';
1515
import { NavLink } from 'react-router-dom';
1616
import NavButton from '@/components/NavButton';
17+
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
18+
import Menu from '@mui/material/Menu';
19+
import { ExpandLess } from '@mui/icons-material';
20+
import { Collapse } from '@mui/material';
1721

1822
const StyledToolbar = styled(Toolbar)(({ theme }) => ({
1923
display: 'flex',
@@ -36,6 +40,21 @@ export default function AppAppBar() {
3640
setOpen(newOpen);
3741
};
3842

43+
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
44+
const openMenu = Boolean(anchorEl);
45+
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
46+
setAnchorEl(event.currentTarget);
47+
};
48+
const handleClose = () => {
49+
setAnchorEl(null);
50+
};
51+
52+
const [submenuOpen, setSubmenuOpen] = React.useState(false);
53+
54+
const handleToggleSubmenu = () => {
55+
setSubmenuOpen((prev) => !prev);
56+
};
57+
3958
return (
4059
<AppBar
4160
position="fixed"
@@ -56,9 +75,29 @@ export default function AppAppBar() {
5675
<NavButton to="/services">Services</NavButton>
5776
<NavButton to="/about">About</NavButton>
5877
<NavButton to="/blogs">Blog</NavButton>
59-
<Button variant="text" color="info" size="small" sx={{ minWidth: 0 }}>
78+
<Button variant="text" color="info" size="small" sx={{ minWidth: 0 }}
79+
id="demo-customized-button"
80+
aria-controls={openMenu ? 'basic-menu' : undefined}
81+
aria-haspopup="true"
82+
aria-expanded={openMenu ? 'true' : undefined}
83+
disableElevation
84+
onClick={handleClick}
85+
endIcon={openMenu ? <ExpandLess /> : <ExpandMoreIcon />}
86+
>
6087
Pages
6188
</Button>
89+
<Menu
90+
id="basic-menu"
91+
anchorEl={anchorEl}
92+
open={openMenu}
93+
onClose={handleClose}
94+
MenuListProps={{
95+
'aria-labelledby': 'basic-button',
96+
}}
97+
>
98+
<MenuItem component={NavLink} to="/story" onClick={handleClose}>Testimonials & Success Stories</MenuItem>
99+
<MenuItem component={NavLink} to="/faq" onClick={handleClose}>FAQ</MenuItem>
100+
</Menu>
62101
<NavButton to="/contact" sx={{ minWidth: 0 }}>Contact</NavButton>
63102
</Box>
64103
</Box>
@@ -103,7 +142,20 @@ export default function AppAppBar() {
103142
<MenuItem component={NavLink} to="/services">Services</MenuItem>
104143
<MenuItem component={NavLink} to="/about">About</MenuItem>
105144
<MenuItem component={NavLink} to="/blogs">Blog</MenuItem>
106-
<MenuItem>Pages</MenuItem>
145+
<Box>
146+
<MenuItem onClick={handleToggleSubmenu} sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
147+
Pages
148+
{submenuOpen ? <ExpandLess /> : <ExpandMoreIcon />}
149+
</MenuItem>
150+
<Collapse in={submenuOpen} timeout="auto" unmountOnExit>
151+
<MenuItem component={NavLink} to="/story" onClick={handleClose} sx={{ pl: 4 }}>
152+
Testimonials & Success Stories
153+
</MenuItem>
154+
<MenuItem component={NavLink} to="/faq" onClick={handleClose} sx={{ pl: 4 }}>
155+
FAQ
156+
</MenuItem>
157+
</Collapse>
158+
</Box>
107159
<MenuItem component={NavLink} to="/contact">Contact</MenuItem>
108160
<Divider sx={{ my: 3 }} />
109161
<MenuItem>

‎src/components/Contact/Form.tsx‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -240,16 +240,6 @@ export default function Form () {
240240
>
241241
If you prefer, you can fill out the form below, and one of our team members will get back to you promptly.
242242
</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-
>
253243
<Grid container spacing={3}>
254244
<FormGrid size={{ xs: 12, md: 6 }}>
255245
<FormLabel htmlFor="name" required>
@@ -301,7 +291,6 @@ export default function Form () {
301291
/>
302292
</FormGrid>
303293
</Grid>
304-
</motion.div>
305294
<CardActions sx={{ justifyContent: 'flex-end' }}>
306295
<Button color="primary" variant="contained" size="small">
307296
Submit&nbsp;

‎src/components/Contact/Top.tsx‎

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -40,31 +40,20 @@ export default function Top() {
4040
useFlexGap
4141
sx={{ alignItems: 'center', width: { xs: '100%', sm: '70%' } }}
4242
>
43-
<motion.div
44-
initial={{ opacity: 0, y: 30 }}
45-
whileInView={{ opacity: 1, y: 0 }}
46-
viewport={{ once: true }}
47-
transition={{
48-
duration: 1,
49-
delay: 0.1,
50-
ease: [0.215, 0.61, 0.355, 1]
43+
<Typography
44+
variant="h1"
45+
sx={{
46+
display: 'flex',
47+
flexDirection: { xs: 'column', sm: 'row' },
48+
flexWrap: 'wrap',
49+
alignItems: 'center',
50+
fontSize: 'clamp(3rem, 10vw, 3.5rem)',
51+
justifyContent: 'center',
52+
textAlign: 'center',
5153
}}
5254
>
53-
<Typography
54-
variant="h1"
55-
sx={{
56-
display: 'flex',
57-
flexDirection: { xs: 'column', sm: 'row' },
58-
flexWrap: 'wrap',
59-
alignItems: 'center',
60-
fontSize: 'clamp(3rem, 10vw, 3.5rem)',
61-
justifyContent: 'center',
62-
textAlign: 'center',
63-
}}
64-
>
65-
Contact Us - We&apos;re Here to&nbsp;Support&nbsp;Your Recovery
66-
</Typography>
67-
</motion.div>
55+
Contact Us - We&apos;re Here to&nbsp;Support&nbsp;Your Recovery
56+
</Typography>
6857
</Stack>
6958

7059

‎src/components/Faq/Banner.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React from 'react';
2+
import { Box, Typography, Button, Container } from '@mui/material';
3+
import { motion } from 'framer-motion';
4+
5+
const backgroundImage = '/banner.png';
6+
7+
export default function Banner () {
8+
return (
9+
10+
<Box
11+
sx={{
12+
display: 'flex',
13+
backgroundImage: `url(${backgroundImage})`,
14+
backgroundSize: 'cover',
15+
color: '#fff',
16+
height: 300,
17+
}}
18+
>
19+
<Container id="faq-banner"
20+
sx={{
21+
pt: { xs: 4, sm: 12 },
22+
pb: { xs: 8, sm: 16 },
23+
position: 'relative',
24+
display: 'flex',
25+
flexDirection: 'column',
26+
justifyContent: 'center',
27+
WebkitAlignItems: 'flex-start',
28+
gap: { xs: 3, sm: 6 },
29+
}}
30+
>
31+
<motion.div
32+
initial={{ opacity: 0, y: 30 }}
33+
whileInView={{ opacity: 1, y: 0 }}
34+
viewport={{ once: true }}
35+
transition={{
36+
duration: 1,
37+
delay: 0.1,
38+
ease: [0.215, 0.61, 0.355, 1]
39+
}}
40+
>
41+
<Typography
42+
component="h2"
43+
variant="h3"
44+
gutterBottom
45+
sx={{ color: 'text.primary', fontWeight: 700 , display: 'flex', flexDirection:'row', flexWrap: 'wrap', alignItems: 'center', textAlign: 'center' }}
46+
>
47+
Still Have Questions?
48+
</Typography>
49+
<Typography
50+
sx={{
51+
textAlign: 'left',
52+
color: 'text.secondary',
53+
width: '70%',
54+
}}
55+
>
56+
If you have a question that isn&apos;t answered here, don&apos;t hesitate to reach out to us. Our team is always ready to help and guide you through your recovery process.
57+
</Typography>
58+
<Button
59+
variant="contained"
60+
color="primary"
61+
size="small"
62+
sx={{ flexShrink: 0, mr: 2, mt: 2 }}
63+
>
64+
Book a Consultation Now
65+
</Button>
66+
<Button
67+
variant="contained"
68+
color="primary"
69+
size="small"
70+
sx={{ flexShrink: 0, mt: 2 }}
71+
>
72+
Contact Us
73+
</Button>
74+
</motion.div>
75+
</Container>
76+
</Box>
77+
);
78+
};

0 commit comments

Comments
 (0)