Skip to content

Commit 64e75ac

Browse files
Rugved-proRugved-pro
committed
Improved the UI of the home page
1 parent ea218f9 commit 64e75ac

File tree

2 files changed

+137
-57
lines changed

2 files changed

+137
-57
lines changed

‎src/pages/Header.css‎

Lines changed: 85 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,98 @@
1-
/* Dashboard-style header to match dark theme */
1+
/* 🌌 Enhanced Dashboard Header (Dark Theme) */
22
.dashboard-header {
3-
background-color: #0b3c5f;
4-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
5-
padding: 2rem 1rem;
3+
background: linear-gradient(145deg, #0b3c5f 0%, #072b44 100%);
4+
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
5+
padding: 3rem 1rem 2.5rem;
66
text-align: center;
77
color: #ffffff;
8+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
9+
position: relative;
10+
overflow: hidden;
811
}
912

10-
.header-content {
11-
max-width: 900px;
12-
margin: 0 auto;
13+
/* ✨ Subtle animated gradient sweep */
14+
.dashboard-header::after {
15+
content: "";
16+
position: absolute;
17+
top: 0;
18+
left: -50%;
19+
width: 200%;
20+
height: 100%;
21+
background: radial-gradient(circle at 30% 20%, rgba(0, 217, 255, 0.15), transparent 60%);
22+
animation: sweep 10s ease-in-out infinite alternate;
23+
z-index: 0;
1324
}
1425

26+
/* 🖋️ Typewriter Title */
1527
.dashboard-title {
16-
font-size: 2.5rem;
17-
margin-bottom: 0.5rem;
18-
background: linear-gradient(90deg, #00d9ff, #1a5c66);
28+
display: inline-block;
29+
font-size: 3rem;
30+
font-weight: 700;
31+
margin-bottom: 0.6rem;
32+
background: linear-gradient(90deg, #4ec9df, #24b8c9, #1a5c66);
1933
-webkit-background-clip: text;
2034
-webkit-text-fill-color: transparent;
35+
letter-spacing: 1px;
36+
overflow: hidden;
37+
white-space: nowrap;
38+
border-right: 3px solid #f9fdfd00;
39+
animation:
40+
typing 3.5s steps(18) 0.5s 1 normal both,
41+
blink 0.75s step-end infinite,
42+
fadeInUp 1s ease both;
2143
}
2244

45+
/* 💬 Subtitle */
2346
.dashboard-subtitle {
24-
font-size: 1.1rem;
25-
color: #c8d6e5;
26-
}
47+
font-size: 1.2rem;
48+
color: #b8cce3;
49+
max-width: 600px;
50+
margin: 0 auto;
51+
line-height: 1.5;
52+
opacity: 0.9;
53+
animation: fadeInUp 1.5s ease both;
54+
}
55+
56+
/* 🌈 Keyframes */
57+
@keyframes typing {
58+
from {
59+
width: 0;
60+
}
61+
to {
62+
width: 15ch; /* Adjust depending on your title length */
63+
}
64+
}
65+
66+
@keyframes blink {
67+
50% {
68+
border-color: transparent;
69+
}
70+
}
71+
72+
@keyframes sweep {
73+
from {
74+
transform: translateX(-10%);
75+
}
76+
to {
77+
transform: translateX(10%);
78+
}
79+
}
80+
81+
@keyframes fadeInUp {
82+
from {
83+
opacity: 0;
84+
transform: translateY(10px);
85+
}
86+
to {
87+
opacity: 1;
88+
transform: translateY(0);
89+
}
90+
}
91+
92+
/* 🧱 Container */
93+
.header-content {
94+
position: relative;
95+
z-index: 1;
96+
max-width: 900px;
97+
margin: 0 auto;
98+
}

‎src/styles.css‎

Lines changed: 52 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/* ...existing code... */
2+
13
/* Light/Dark theme variables */
24
:root {
35
--bg: #ffffff;
@@ -127,7 +129,6 @@ a:hover {
127129
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.25);
128130
}
129131

130-
131132
.navbar ul {
132133
list-style: none;
133134
display: flex;
@@ -259,7 +260,7 @@ a:hover {
259260
/* Layout */
260261
.grid {
261262
display: grid;
262-
gap: 1rem;
263+
gap: 1.25rem; /* MODIFIED: Increased spacing */
263264
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
264265
margin-top: 1rem;
265266
}
@@ -287,21 +288,34 @@ a:hover {
287288
background: var(--bg-alt);
288289
border: 1px solid var(--border);
289290
border-radius: var(--radius);
290-
padding: 1rem;
291+
padding: 1.25rem; /* MODIFIED: Increased padding */
291292
display: flex;
292293
flex-direction: column;
293294
gap: 0.5rem;
294295
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
295296
}
296297

298+
/* NEW: Style for card description text */
299+
.card p {
300+
font-size: 0.9rem;
301+
color: #cbd5e1; /* Assumes dark theme, adjust as needed */
302+
line-height: 1.5;
303+
margin: 0 0 1rem 0;
304+
}
305+
297306
.home-page .card {
298307
background: rgba(26, 92, 102, 0.2);
299308
border: 2px solid rgba(0, 217, 255, 0.5);
309+
/* MODIFIED: Added transitions for hover */
310+
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
311+
will-change: transform;
300312
}
301313

302-
.home-page .card:hover h3 {
303-
transform: translateY(-7px);
304-
color: rgb(0, 143, 165);
314+
/* MODIFIED: Enhanced hover effect */
315+
.home-page .card:hover {
316+
transform: translateY(-6px);
317+
border-color: rgba(0, 217, 255, 0.9);
318+
box-shadow: 0 10px 25px rgba(0, 217, 255, 0.1);
305319
}
306320

307321
.card h3 {
@@ -310,6 +324,11 @@ a:hover {
310324
transition: transform 1.5s ease;
311325
}
312326

327+
.home-page .card:hover h3 {
328+
transform: translateY(-7px);
329+
color: #00d9ff; /* MODIFIED: Brighter color */
330+
}
331+
313332
.card-footer {
314333
margin-top: auto;
315334
font-size: 0.85rem;
@@ -325,38 +344,36 @@ a:hover {
325344
text-decoration: none;
326345
font-weight: 500;
327346
font-size: 0.9rem;
328-
transition: background 0.3s ease;
347+
transition: all 0.3s ease; /* MODIFIED: Changed to 'all' */
329348
}
330349

331350
.card-link-button:hover {
332-
background: #215b6a;
351+
background: linear-gradient(45deg, rgb(10, 176, 255), rgb(10, 104, 115)); /* MODIFIED: Brighter gradient */
333352
text-decoration: none;
353+
transform: scale(1.05); /* MODIFIED: Added pop */
354+
box-shadow: 0 4px 15px rgba(0, 166, 255, 0.25); /* MODIFIED: Added glow */
355+
}
356+
357+
/* NEW: Added active state for click */
358+
.card-link-button:active {
359+
transform: scale(0.98);
360+
box-shadow: none;
334361
}
335362

336363
.chart-placeholder {
337-
background: repeating-linear-gradient(45deg,
338-
var(--bg),
339-
var(--bg) 10px,
340-
var(--bg-alt) 10px,
341-
var(--bg-alt) 20px);
364+
background: repeating-linear-gradient(
365+
45deg,
366+
var(--bg),
367+
var(--bg) 10px,
368+
var(--bg-alt) 10px,
369+
var(--bg-alt) 20px
370+
);
342371
border: 1px dashed var(--border);
343372
padding: 2rem;
344373
text-align: center;
345374
border-radius: var(--radius);
346375
}
347376

348-
349-
.home-page .card {
350-
background: rgba(26, 92, 102, 0.2);
351-
border: 2px solid rgba(0, 217, 255, 0.5);
352-
}
353-
354-
.home-page .card:hover h3 {
355-
transform: translateY(-7px);
356-
color: rgb(0, 143, 165);
357-
}
358-
359-
360377
/* Buttons & inputs */
361378
button,
362379
input,
@@ -476,7 +493,7 @@ blockquote {
476493
pointer-events: none;
477494
}
478495

479-
.bg-layer+.bg-layer {
496+
.bg-layer + .bg-layer {
480497
opacity: 0;
481498
}
482499

@@ -509,7 +526,6 @@ blockquote {
509526
background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 50%, #4facfe 100%) !important;
510527
}
511528

512-
513529
/* Weather Animations: Sun, Clouds, Rain, Snow, Fog, Storm */
514530
.sun-wrap {
515531
position: absolute;
@@ -527,13 +543,11 @@ blockquote {
527543
height: 72px;
528544
border-radius: 50%;
529545
background: radial-gradient(circle at 30% 30%, #fff8b0, #ffd36b 40%, rgba(255, 183, 77, 0.95) 60%);
530-
box-shadow: 0 0 40px 12px rgba(255, 200, 80, 0.12),
531-
0 0 80px 36px rgba(255, 183, 77, 0.06);
546+
box-shadow: 0 0 40px 12px rgba(255, 200, 80, 0.12), 0 0 80px 36px rgba(255, 183, 77, 0.06);
532547
animation: sun-pulse 6s ease-in-out infinite, sun-bob 10s ease-in-out infinite;
533548
}
534549

535550
@keyframes sun-pulse {
536-
537551
0%,
538552
100% {
539553
transform: scale(1);
@@ -547,7 +561,6 @@ blockquote {
547561
}
548562

549563
@keyframes sun-bob {
550-
551564
0%,
552565
100% {
553566
transform: translateY(0);
@@ -674,7 +687,6 @@ blockquote {
674687
}
675688

676689
@keyframes lightning-flash {
677-
678690
0%,
679691
85%,
680692
100% {
@@ -725,7 +737,6 @@ blockquote {
725737
}
726738
}
727739

728-
729740
/**Pagination **/
730741

731742
.pagination {
@@ -757,7 +768,6 @@ blockquote {
757768
cursor: not-allowed;
758769
}
759770

760-
761771
.hero-section {
762772
position: relative;
763773
height: 54vh;
@@ -797,6 +807,7 @@ blockquote {
797807
color: #fafafa;
798808
font-style: italic;
799809
}
810+
800811
@media (max-width: 768px) {
801812
.hero-title {
802813
font-size: 2.2rem;
@@ -815,27 +826,22 @@ blockquote {
815826
}
816827
}
817828

818-
819829
.fav-icon {
820830
cursor: pointer;
821-
padding: 6px;
831+
padding: 6px;
822832
border-radius: 50%;
823833
display: flex;
824834
align-items: center;
825835
justify-content: center;
826836
background-color: rgb(242, 215, 220);
827837
transition: all 0.25s ease;
828-
box-shadow:
829-
0 4px 6px rgba(16, 11, 11, 0.1),
830-
0 0 10px rgba(242, 215, 220, 0.4);
838+
box-shadow: 0 4px 6px rgba(16, 11, 11, 0.1), 0 0 10px rgba(242, 215, 220, 0.4);
831839
}
832840

833841
.fav-icon:hover {
834842
background-color: rgb(246, 215, 220);
835843
transform: scale(1.1);
836-
box-shadow:
837-
0 6px 8px rgba(16, 11, 11, 0.15),
838-
0 0 15px rgba(242, 215, 220, 0.5);
844+
box-shadow: 0 6px 8px rgba(16, 11, 11, 0.15), 0 0 15px rgba(242, 215, 220, 0.5);
839845
}
840846

841847
.fav-icon:active {
@@ -867,7 +873,6 @@ blockquote {
867873
animation: fadeSlideIn 0.2s ease;
868874
}
869875

870-
871876
.favourites-dropdown select {
872877
width: 100%;
873878
border: none;
@@ -884,9 +889,10 @@ blockquote {
884889
.favourites-dropdown select:hover {
885890
background: #f0f0f0;
886891
}
892+
887893
.favourites-option {
888894
background: #4a90e2;
889-
color: #ffffff;
895+
color: #ffffff;
890896
transition: background 0.3s ease;
891897
cursor: pointer;
892898
}
@@ -1057,3 +1063,5 @@ blockquote {
10571063
opacity: 0.7;
10581064
cursor: default;
10591065
}
1066+
1067+
/* ...existing code... */

0 commit comments

Comments
 (0)