Skip to content

Commit 6c49e5f

Browse files
Ifaz-IkramIfaz-Ikram
committed
style: Enhance Customer Portal loading and hero section with improved colors, gradients, and animations for better user experience
1 parent f673a06 commit 6c49e5f

File tree

1 file changed

+85
-19
lines changed

1 file changed

+85
-19
lines changed

‎src/pages/CustomerPortal.js‎

Lines changed: 85 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -196,8 +196,8 @@ const CustomerPortal = () => {
196196
return (
197197
<Container className="customer-portal-loading">
198198
<div className="text-center">
199-
<Spinner animation="border" variant="primary" />
200-
<p className="mt-3">Loading booking portal...</p>
199+
<Spinner animation="border" style={{ color: '#1976d2', width: '3rem', height: '3rem' }} />
200+
<p className="mt-3" style={{ color: '#1976d2', fontSize: '1.1rem' }}>Loading booking portal...</p>
201201
</div>
202202
</Container>
203203
);
@@ -206,15 +206,27 @@ const CustomerPortal = () => {
206206
return (
207207
<div className="customer-portal">
208208
{/* Hero Section */}
209-
<div className="hero-section">
209+
<div className="hero-section" style={{
210+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
211+
padding: '4rem 0',
212+
marginBottom: '3rem',
213+
borderRadius: '0 0 2rem 2rem',
214+
boxShadow: '0 10px 30px rgba(0,0,0,0.2)'
215+
}}>
210216
<Container>
211217
<Row className="justify-content-center">
212218
<Col lg={10} xl={8}>
213-
<div className="hero-content text-center">
214-
<h1 className="display-4 mb-3">
219+
<div className="hero-content text-center" style={{ color: 'white' }}>
220+
<h1 className="display-4 mb-3" style={{
221+
fontWeight: '700',
222+
textShadow: '2px 2px 4px rgba(0,0,0,0.3)'
223+
}}>
215224
Welcome to SkyNest Hotels, {user?.full_name || user?.username}!
216225
</h1>
217-
<p className="lead mb-4">
226+
<p className="lead mb-4" style={{
227+
fontSize: '1.3rem',
228+
textShadow: '1px 1px 2px rgba(0,0,0,0.2)'
229+
}}>
218230
Book your perfect stay with us. Choose your preferred room type and we'll automatically reserve the best available room for you.
219231
</p>
220232
</div>
@@ -236,12 +248,22 @@ const CustomerPortal = () => {
236248
</Alert>
237249
)}
238250

239-
<Card className="booking-card shadow">
240-
<Card.Body className="p-4 p-md-5">
241-
<h2 className="mb-4 text-center">
251+
<Card className="booking-card shadow" style={{
252+
border: 'none',
253+
borderRadius: '1rem',
254+
overflow: 'hidden'
255+
}}>
256+
<div style={{
257+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
258+
padding: '2rem',
259+
color: 'white'
260+
}}>
261+
<h2 className="mb-0 text-center" style={{ fontWeight: '600' }}>
242262
<FaCalendarAlt className="me-2" />
243263
Book Your Stay
244264
</h2>
265+
</div>
266+
<Card.Body className="p-4 p-md-5">
245267

246268
<Form onSubmit={handleSubmit}>
247269
<Row>
@@ -395,11 +417,25 @@ const CustomerPortal = () => {
395417
{/* Submit Button */}
396418
<Col xs={12} className="text-center">
397419
<Button
398-
variant="primary"
399420
size="lg"
400421
type="submit"
401422
disabled={submitting}
402423
className="px-5"
424+
style={{
425+
background: 'linear-gradient(135deg, #1a237e 0%, #0d47a1 100%)',
426+
border: 'none',
427+
boxShadow: '0 4px 15px rgba(26, 35, 126, 0.4)',
428+
transition: 'all 0.3s ease',
429+
fontWeight: '600'
430+
}}
431+
onMouseEnter={(e) => {
432+
e.currentTarget.style.transform = 'translateY(-2px)';
433+
e.currentTarget.style.boxShadow = '0 6px 20px rgba(25, 118, 210, 0.5)';
434+
}}
435+
onMouseLeave={(e) => {
436+
e.currentTarget.style.transform = 'translateY(0)';
437+
e.currentTarget.style.boxShadow = '0 4px 15px rgba(26, 35, 126, 0.4)';
438+
}}
403439
>
404440
{submitting ? (
405441
<>
@@ -422,24 +458,54 @@ const CustomerPortal = () => {
422458
{/* Features Section */}
423459
<Row className="mt-5 features-section">
424460
<Col md={4} className="text-center mb-4 mb-md-0">
425-
<div className="feature-icon mb-3">
426-
<FaCheckCircle size={40} className="text-success" />
461+
<div className="feature-icon mb-3" style={{
462+
width: '80px',
463+
height: '80px',
464+
margin: '0 auto',
465+
display: 'flex',
466+
alignItems: 'center',
467+
justifyContent: 'center',
468+
background: 'linear-gradient(135deg, rgba(26, 35, 126, 0.1) 0%, rgba(13, 71, 161, 0.1) 100%)',
469+
borderRadius: '50%',
470+
border: '2px solid #1976d2'
471+
}}>
472+
<FaCheckCircle size={40} style={{ color: '#1976d2' }} />
427473
</div>
428-
<h5>Instant Confirmation</h5>
474+
<h5 style={{ color: '#1a237e', fontWeight: '600' }}>Instant Confirmation</h5>
429475
<p className="text-muted">Automatic room assignment and confirmation</p>
430476
</Col>
431477
<Col md={4} className="text-center mb-4 mb-md-0">
432-
<div className="feature-icon mb-3">
433-
<FaBed size={40} className="text-primary" />
478+
<div className="feature-icon mb-3" style={{
479+
width: '80px',
480+
height: '80px',
481+
margin: '0 auto',
482+
display: 'flex',
483+
alignItems: 'center',
484+
justifyContent: 'center',
485+
background: 'linear-gradient(135deg, rgba(26, 35, 126, 0.1) 0%, rgba(13, 71, 161, 0.1) 100%)',
486+
borderRadius: '50%',
487+
border: '2px solid #1976d2'
488+
}}>
489+
<FaBed size={40} style={{ color: '#1976d2' }} />
434490
</div>
435-
<h5>Best Available Room</h5>
491+
<h5 style={{ color: '#1a237e', fontWeight: '600' }}>Best Available Room</h5>
436492
<p className="text-muted">We select the perfect room for you</p>
437493
</Col>
438494
<Col md={4} className="text-center">
439-
<div className="feature-icon mb-3">
440-
<FaMapMarkerAlt size={40} className="text-info" />
495+
<div className="feature-icon mb-3" style={{
496+
width: '80px',
497+
height: '80px',
498+
margin: '0 auto',
499+
display: 'flex',
500+
alignItems: 'center',
501+
justifyContent: 'center',
502+
background: 'linear-gradient(135deg, rgba(26, 35, 126, 0.1) 0%, rgba(13, 71, 161, 0.1) 100%)',
503+
borderRadius: '50%',
504+
border: '2px solid #1976d2'
505+
}}>
506+
<FaMapMarkerAlt size={40} style={{ color: '#1976d2' }} />
441507
</div>
442-
<h5>Prime Locations</h5>
508+
<h5 style={{ color: '#1a237e', fontWeight: '600' }}>Prime Locations</h5>
443509
<p className="text-muted">Three beautiful branches to choose from</p>
444510
</Col>
445511
</Row>

0 commit comments

Comments
 (0)