Skip to content

Commit 35a25e1

Browse files
devguru99devguru99
authored
Merge pull request #7 from devguru99/dev
Modified Hero section and added banner
2 parents 13d7668 + 2adb942 commit 35a25e1

File tree

6 files changed

+184
-98
lines changed

6 files changed

+184
-98
lines changed

‎public/home_banner.png‎

562 KB
Loading

‎src/components/Hero.tsx‎

Lines changed: 99 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -113,97 +113,8 @@ export default function Hero(props: HeroProps) {
113113
 in Recovery
114114
</Typography>
115115
</motion.div>
116-
117-
<Typography
118-
sx={{
119-
textAlign: 'center',
120-
color: 'text.secondary',
121-
width: '100%',
122-
}}
123-
>
124-
Recovering after an ICU stay can be overwhelming, but we&apos;re here to make it simple and seamless. Our virtual care service is designed to bridge the gap in your recovery,&nbsp;
125-
<Typography
126-
component="span"
127-
sx={{
128-
color: '#183871',
129-
fontWeight: 700,
130-
}}
131-
>
132-
offering expert support that prevents readmissions and ensures peace of mind.
133-
</Typography>
134-
From personalized recovery plans and medication reconciliation to guiding follow-up care and empowering you with education, we&apos;re redefining post-ICU care. With us, you&apos;re not just a patient -&nbsp;
135-
<Typography
136-
component="span"
137-
sx={{
138-
color: '#183871',
139-
fontWeight: 700,
140-
}}
141-
>
142-
you&apos;re a partner in building a healthier, stronger future.&nbsp;
143-
</Typography>
144-
Let us help you recover&nbsp;
145-
<Typography
146-
component="span"
147-
sx={{
148-
color: '#183871',
149-
fontWeight: 700,
150-
}}
151-
>
152-
smarter, safer, and stress-free.
153-
</Typography>
154-
</Typography>
155-
<Stack
156-
direction={{ xs: 'column', sm: 'row' }}
157-
spacing={1}
158-
useFlexGap
159-
sx={{ pt: 2, width: { xs: '100%', sm: '500px' } }}
160-
>
161-
<InputLabel htmlFor="name-hero" sx={visuallyHidden}>
162-
Name
163-
</InputLabel>
164-
<TextField
165-
id="name-hero"
166-
hiddenLabel
167-
size="small"
168-
variant="outlined"
169-
aria-label="Enter your Name"
170-
placeholder="Your Name"
171-
fullWidth
172-
slotProps={{
173-
htmlInput: {
174-
autoComplete: 'off',
175-
'aria-label': 'Enter your Name',
176-
},
177-
}}
178-
/>
179-
<InputLabel htmlFor="email-hero" sx={visuallyHidden}>
180-
Email
181-
</InputLabel>
182-
<TextField
183-
id="email-hero"
184-
hiddenLabel
185-
size="small"
186-
variant="outlined"
187-
aria-label="Enter your email address"
188-
placeholder="Your email address"
189-
fullWidth
190-
slotProps={{
191-
htmlInput: {
192-
autoComplete: 'off',
193-
'aria-label': 'Enter your email address',
194-
},
195-
}}
196-
/>
197-
<Button
198-
variant="contained"
199-
color="primary"
200-
size="small"
201-
sx={{ minWidth: 'fit-content' }}
202-
>
203-
Get Started Today
204-
</Button>
205-
</Stack>
206116
</Stack>
117+
207118
<motion.div
208119
initial={{ opacity: 0, y: 30 }}
209120
whileInView={{ opacity: 1, y: 0 }}
@@ -214,10 +125,16 @@ export default function Hero(props: HeroProps) {
214125
ease: [0.215, 0.61, 0.355, 1]
215126
}}
216127
>
217-
<StyledBox id="video">
128+
<StyledBox id="video"
129+
sx={{
130+
marginTop: '20px !important',
131+
marginBottom: '20px',
132+
}}
133+
>
218134
{loading ? <Skeleton variant="rectangular"
219135
width={1150}
220-
height={698}>
136+
height={698}
137+
>
221138
<video
222139
src="/hero1.mp4"
223140
autoPlay
@@ -245,6 +162,96 @@ export default function Hero(props: HeroProps) {
245162

246163
</StyledBox>
247164
</motion.div>
165+
166+
<Stack
167+
spacing={2}
168+
useFlexGap
169+
sx={{ alignItems: 'center', width: { xs: '100%', sm: '70%' } }}
170+
>
171+
<Typography
172+
sx={{
173+
textAlign: 'center',
174+
color: 'text.secondary',
175+
width: '100%',
176+
}}
177+
>
178+
Recovering after an ICU stay can be overwhelming, but we&apos;re here to make it simple and seamless. Our virtual care bridges the gap with personalized&nbsp;
179+
<Typography
180+
component="span"
181+
sx={{
182+
color: '#183871',
183+
fontWeight: 700,
184+
}}
185+
>
186+
recovery plans, medication reconciliation, and expert follow-up support&nbsp;
187+
</Typography>
188+
to prevent readmissions and guide you toward lasting health -&nbsp;
189+
190+
<Typography
191+
component="span"
192+
sx={{
193+
color: '#183871',
194+
fontWeight: 700,
195+
}}
196+
>
197+
all from the comfort of your own home.&nbsp;
198+
</Typography>
199+
</Typography>
200+
201+
<Stack
202+
direction={{ xs: 'column', sm: 'row' }}
203+
spacing={1}
204+
useFlexGap
205+
sx={{ pt: 2, width: { xs: '100%', sm: '500px' } }}
206+
>
207+
<InputLabel htmlFor="name-hero" sx={visuallyHidden}>
208+
Name
209+
</InputLabel>
210+
<TextField
211+
id="name-hero"
212+
hiddenLabel
213+
size="small"
214+
variant="outlined"
215+
aria-label="Enter your Name"
216+
placeholder="Your Name"
217+
fullWidth
218+
slotProps={{
219+
htmlInput: {
220+
autoComplete: 'off',
221+
'aria-label': 'Enter your Name',
222+
},
223+
}}
224+
/>
225+
<InputLabel htmlFor="email-hero" sx={visuallyHidden}>
226+
Email
227+
</InputLabel>
228+
<TextField
229+
id="email-hero"
230+
hiddenLabel
231+
size="small"
232+
variant="outlined"
233+
aria-label="Enter your email address"
234+
placeholder="Your email address"
235+
fullWidth
236+
slotProps={{
237+
htmlInput: {
238+
autoComplete: 'off',
239+
'aria-label': 'Enter your email address',
240+
},
241+
}}
242+
/>
243+
<Button
244+
variant="contained"
245+
color="primary"
246+
size="small"
247+
sx={{ minWidth: 'fit-content' }}
248+
>
249+
Get Started Today
250+
</Button>
251+
</Stack>
252+
253+
</Stack>
254+
248255
</Container>
249256
</Box>
250257
);

‎src/components/Homepage/Banner.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React from 'react';
2+
import { Box, Typography, Button, Container } from '@mui/material';
3+
import { motion } from 'framer-motion';
4+
import { ChevronRight } from '@mui/icons-material';
5+
6+
const backgroundImage = '/home_banner.png';
7+
8+
export default function Banner () {
9+
return (
10+
11+
<Box
12+
sx={{
13+
display: 'flex',
14+
backgroundImage: `url(${backgroundImage})`,
15+
backgroundSize: 'cover',
16+
color: '#fff',
17+
height: 300,
18+
}}
19+
>
20+
<Container id="features"
21+
sx={{
22+
pt: { xs: 4, sm: 12 },
23+
pb: { xs: 8, sm: 16 },
24+
position: 'relative',
25+
display: 'flex',
26+
flexDirection: 'column',
27+
justifyContent: 'center',
28+
WebkitAlignItems: 'flex-start',
29+
gap: { xs: 3, sm: 6 },
30+
}}
31+
>
32+
<motion.div
33+
initial={{ opacity: 0, y: 30 }}
34+
whileInView={{ opacity: 1, y: 0 }}
35+
viewport={{ once: true }}
36+
transition={{
37+
duration: 1,
38+
delay: 0.1,
39+
ease: [0.215, 0.61, 0.355, 1]
40+
}}
41+
>
42+
<Typography
43+
component="h2"
44+
variant="h3"
45+
gutterBottom
46+
sx={{ color: 'text.primary', fontWeight: 700 , display: 'flex', flexDirection:'row', flexWrap: 'wrap', alignItems: 'center', textAlign: 'center' }}
47+
>
48+
Let&apos;s Take&nbsp;
49+
<Typography
50+
component="span"
51+
variant="h3"
52+
sx={(theme) => ({
53+
fontSize: 'inherit',
54+
background: 'linear-gradient(30deg, #183871, #88D8FF)',
55+
WebkitBackgroundClip: 'text',
56+
WebkitTextFillColor: 'transparent',
57+
...theme.applyStyles('dark', {
58+
background: 'linear-gradient(30deg, #183871, #88D8FF)',
59+
}),
60+
fontWeight: 700,
61+
})}
62+
>
63+
This Journey&nbsp;
64+
</Typography>
65+
Together
66+
</Typography>
67+
<Button variant="contained"
68+
sx={{
69+
padding: '10px 20px', // Increases padding for larger button size
70+
fontSize: '1rem', // Larger font size
71+
borderRadius: '8px' // Rounded corners, adjust as needed
72+
}}
73+
>
74+
Get Started Today
75+
<ChevronRight />
76+
</Button>
77+
</motion.div>
78+
</Container>
79+
</Box>
80+
);
81+
};

‎src/pages/Homepage/Homepage.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Hero from '@/components/Hero';
44
import Different from '@/components/Homepage/Different';
55
import Expect from '@/components/Homepage/Expect';
66
import Future from '@/components/Homepage/Future';
7+
import Banner from '@/components/Homepage/Banner';
78

89

910
export default function HomePage() {
@@ -14,6 +15,7 @@ export default function HomePage() {
1415
<Different />
1516
<Expect />
1617
<Future />
18+
<Banner />
1719
</div>
1820
</>
1921

‎src/routes/index.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,17 @@ import TerrainIcon from '@mui/icons-material/Terrain';
77
import asyncComponentLoader from '@/utils/loader';
88

99
import { Pages, Routes } from './types';
10-
const VITE_BASE_PATH = '';
1110

1211
const routes: Routes = {
1312
[Pages.Homepage]: {
1413
component: asyncComponentLoader(() => import('@/pages/Homepage')),
15-
path: `${VITE_BASE_PATH}`,
14+
path: '/',
1615
title: 'Home',
1716
icon: HomeIcon,
1817
},
1918
[Pages.NotFound]: {
2019
component: asyncComponentLoader(() => import('@/pages/NotFound')),
21-
path: `${VITE_BASE_PATH}/*`,
20+
path: '/*',
2221
},
2322
};
2423

‎vite.config.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,8 @@ import * as path from 'path';
22
import react from '@vitejs/plugin-react';
33
import { defineConfig } from 'vite';
44
import { VitePWA } from 'vite-plugin-pwa';
5-
import dotenv from 'dotenv';
65
import manifest from './manifest.json';
76

8-
// Load environment variables
9-
dotenv.config();
107
const VITE_BASE_PATH = '';
118
// https://vitejs.dev/config/
129
export default defineConfig({

0 commit comments

Comments
 (0)