Skip to content

Commit 2d33c43

Browse files
Samridha0305Samridha0305
committed
Redesigned Hero of Main page
1 parent 4beb093 commit 2d33c43

File tree

2 files changed

+139
-59
lines changed

2 files changed

+139
-59
lines changed

‎src/components/FloatingContributors/FloatingContributors.css‎

Lines changed: 34 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,22 @@
2525
}
2626

2727
.floating-contributors-card {
28-
background: rgba(15, 23, 42, 0.95);
28+
background: linear-gradient(135deg, #fdfcfb 0%, #e0d4fc 40%, #c7d2fe 100%);
2929
backdrop-filter: blur(20px);
3030
-webkit-backdrop-filter: blur(20px);
31-
border: 1px solid rgba(148, 163, 184, 0.2);
31+
border: 1px solid rgba(255, 255, 255, 0.6);
3232
border-radius: 24px;
3333
padding: 24px;
3434
box-shadow:
35-
0 20px 40px rgba(0, 0, 0, 0.3),
36-
0 0 0 1px rgba(255, 255, 255, 0.05),
37-
inset 0 1px 0 rgba(255, 255, 255, 0.1);
35+
0 20px 40px rgba(0, 0, 0, 0.12),
36+
inset 0 1px 0 rgba(255, 255, 255, 0.6);
3837
pointer-events: auto;
3938
position: relative;
4039
overflow: hidden;
41-
color: white;
40+
color: #1a202c;
4241
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
4342
min-width: 400px;
43+
transition: all 0.4s ease;
4444
}
4545

4646
/* Header embedded version - larger size */
@@ -50,26 +50,36 @@
5050
border-radius: 28px;
5151
}
5252

53-
/* Dark theme support - using website theme colors */
54-
[data-theme='dark'] .floating-contributors-card {
55-
background: rgba(26, 26, 26, 0.95);
56-
border-color: rgba(45, 45, 45, 0.8);
57-
color: #ffffff;
58-
box-shadow:
59-
0 25px 50px rgba(0, 0, 0, 0.4),
60-
0 0 0 1px rgba(255, 255, 255, 0.08),
61-
inset 0 1px 0 rgba(255, 255, 255, 0.12);
62-
}
6353

64-
/* Light theme support - using website theme colors */
6554
[data-theme='light'] .floating-contributors-card {
66-
background: rgba(255, 255, 255, 0.98);
67-
color: #1a202c;
68-
border-color: rgba(0, 0, 0, 0.1);
69-
box-shadow:
70-
0 25px 50px rgba(0, 0, 0, 0.08),
71-
0 0 0 1px rgba(0, 0, 0, 0.05),
72-
inset 0 1px 0 rgba(255, 255, 255, 0.9);
55+
background: linear-gradient(
56+
135deg,
57+
#fff7e1 0%, /* pastel yellow */
58+
#fde2e4 30%, /* peachy pink */
59+
#e3d5ff 65%, /* soft lavender */
60+
#d0e1ff 100% /* light sky blue */
61+
);
62+
color: #1a202c; /* dark text */
63+
border: 1px solid rgba(255, 255, 255, 0.6);
64+
border-radius: 1rem;
65+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
66+
transition: background 0.3s ease, box-shadow 0.3s ease;
67+
}
68+
69+
70+
[data-theme='dark'] .floating-contributors-card {
71+
background: linear-gradient(
72+
135deg,
73+
#1a1a2e 0%, /* dark navy */
74+
#2e2e3e 30%, /* muted purple/gray */
75+
#3a3a4f 65%, /* desaturated indigo */
76+
#2b2b3b 100% /* deep midnight blue */
77+
);
78+
color: #e0e0e0; /* light text for contrast */
79+
border: 1px solid rgba(255, 255, 255, 0.1); /* subtle border */
80+
border-radius: 1rem;
81+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); /* stronger shadow for depth */
82+
transition: background 0.3s ease, box-shadow 0.3s ease;
7383
}
7484

7585
.floating-contributors-card::before {

‎src/components/header/header.css‎

Lines changed: 105 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,22 @@
55
transform-style: preserve-3d;
66
overflow: hidden;
77
padding: 3rem auto;
8-
background-color: var(--ifm-background-color);
8+
background-color: #fff;;
99
color: #000;
1010
transition: background 0.4s ease, color 0.4s ease;
1111
}
1212

13-
html.theme-dark .chh__header--body {
14-
background: linear-gradient(to right, #121212, #1e1e1e);
13+
[data-theme='dark'] .chh__header--body {
14+
background: linear-gradient(to right, #222121, #1d1b1b);
1515
color: #fff;
1616
}
1717

1818
.chh__header {
1919
display: flex;
2020
flex-direction: row;
2121
position: relative;
22+
gap: 2rem;
23+
margin-left: 1rem;
2224
}
2325

2426
.chh__header-content {
@@ -30,41 +32,52 @@ html.theme-dark .chh__header--body {
3032
flex-direction: column;
3133
margin-right: 2rem;
3234
}
33-
34-
.chh__header-content h1 {
35+
[data-theme='light'] .chh__header-content h1 {
3536
font-weight: 700;
36-
font-size: 62px;
37-
line-height: 75px;
37+
font-size: 56px;
38+
line-height: 65px;
3839
letter-spacing: -0.04em;
3940
background: linear-gradient(
40-
30deg,
41-
rgba(206, 86, 174, 0.972) 0%,
42-
rgb(253 29 29 / 100%) 50%,
43-
rgb(252 176 69 / 100%) 100%
41+
90deg,
42+
#e44d26 0%, /* orange */
43+
#f16529 30%, /* lighter orange */
44+
#d16ba5 60%, /* pink */
45+
#6a5acd 100% /* purple */
4446
);
4547
background-clip: text;
48+
-webkit-background-clip: text;
4649
-webkit-text-fill-color: transparent;
4750
transition: background 0.3s ease-in-out;
4851
}
4952

50-
html.theme-dark .chh__header-content h1 {
53+
[data-theme='dark'] .chh__header-content h1 {
54+
font-weight: 700;
55+
font-size: 56px;
56+
line-height: 65px;
57+
letter-spacing: -0.04em;
5158
background: linear-gradient(
52-
45deg,
53-
rgba(255, 255, 255, 0.9),
54-
rgba(180, 180, 255, 0.9)
59+
135deg,
60+
#a1c4fd 0%, /* soft sky blue (pops gently) */
61+
#c2e9fb 25%, /* pastel cyan */
62+
#d4a5f9 60%, /* muted lavender */
63+
#fbc2eb 100% /* soft rose pink */
5564
);
65+
background-clip: text;
5666
-webkit-background-clip: text;
5767
-webkit-text-fill-color: transparent;
68+
transition: background 0.3s ease-in-out;
5869
}
5970

71+
72+
6073
.chh__header-content p {
6174
font-family: var(--font-family);
6275
font-weight: 400;
63-
font-size: 22px;
76+
font-size: 20px;
6477
text-align: justify;
6578
line-height: 30px;
6679
margin-top: 1.5rem;
67-
color: #000; /* Light mode text */
80+
color: #333; /* Light mode text */
6881
transition: color 0.3s ease-in-out;
6982
}
7083

@@ -83,47 +96,103 @@ html.theme-dark .chh__header-content p {
8396
margin: 2rem 0 1rem;
8497
display: flex;
8598
flex-direction: row;
99+
gap: 1rem;
86100
}
87101

88102
.chh__header-content__input--link {
89103
text-decoration: none;
90104
font-size: 20px;
91105
line-height: 28px;
92106
font-weight: 600;
107+
color: black;
93108
}
94109

95110
.chh__header-content__input--link:hover {
96111
text-decoration: none;
112+
color:#121212;
97113
}
98114

99115
.chh__header-content__input button {
100-
flex: 0.6;
101-
width: 100%;
102-
min-height: 50px;
103-
font-weight: 400;
104-
font-size: 20px;
105-
line-height: 28px;
106-
border: 2px solid #ff4820;
107-
padding: 0 0.8rem;
116+
flex: 1;
117+
min-height: 56px;
118+
font-weight: 600;
119+
font-size: 18px;
120+
border: none;
108121
cursor: pointer;
109122
outline: none;
110-
border-radius: 5px;
111-
margin: 0 1rem 0 0;
112-
background: linear-gradient(90deg, #07ab8a5f 0%, transparent 100%);
123+
border-radius: 12px;
124+
transition: all 0.3s ease;
125+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
126+
position: relative;
127+
overflow: hidden;
128+
z-index: 1;
113129
}
114130

115-
html.theme-dark .chh__header-content__input button {
116-
background: rgba(255, 255, 255, 0.05);
117-
border-color: #4fe3c5;
118-
color: #fff;
131+
.chh__header-content__input button::after {
132+
content: "";
133+
position: absolute;
134+
top: 0;
135+
left: -120%;
136+
width: 200%;
137+
height: 100%;
138+
background: linear-gradient(
139+
120deg,
140+
rgba(255, 255, 255, 0.15) 0%,
141+
rgba(255, 255, 255, 0.08) 30%,
142+
transparent 60%
143+
);
144+
transform: skewX(-20deg);
145+
transition: left 0.8s ease-in-out;
146+
pointer-events: none;
119147
}
120148

121-
.chh__header-content__input button:last-child {
122-
background: transparent;
149+
.chh__header-content__input button:hover::after {
150+
left: 100%;
123151
}
124152

125153
.chh__header-content__input button:hover {
126-
background: linear-gradient(90deg, #f0a90fd0 0%, transparent 100%);
154+
transform: scale(1.03); /* very subtle lift */
155+
}
156+
157+
.chh__header-content__input button:first-child {
158+
background: linear-gradient(135deg, #fda085 0%, #f6d365 100%);
159+
}
160+
161+
.chh__header-content__input button:first-child:hover {
162+
background: linear-gradient(135deg, #f76b1c 0%, #fca65f 100%);
163+
transform: translateY(-2px);
164+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
165+
}
166+
167+
[data-theme='dark'] .chh__header-content__input button:first-child {
168+
background: linear-gradient(135deg, #9b4d89 0%, #6b3a9c 100%);
169+
}
170+
171+
[data-theme='dark'] .chh__header-content__input button:first-child:hover {
172+
background: linear-gradient(135deg, #b45ea5 0%, #8050c4 100%);
173+
transform: translateY(-2px) scale(1.02);
174+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
175+
}
176+
177+
.chh__header-content__input button:last-child {
178+
background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
179+
}
180+
181+
.chh__header-content__input button:last-child:hover {
182+
background: linear-gradient(135deg, #ae8dca 0%, #b3a7cb 100%);
183+
transform: translateY(-2px);
184+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
185+
}
186+
187+
[data-theme='dark'] .chh__header-content__input button:last-child {
188+
background: linear-gradient(135deg, #2c2c36 0%, #3d3d4f 100%);
189+
color: #e0e0e0;
190+
}
191+
192+
[data-theme='dark'] .chh__header-content__input button:last-child:hover {
193+
background: linear-gradient(135deg, #3d3d4f 0%, #50506b 100%);
194+
transform: translateY(-2px) scale(1.02);
195+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
127196
}
128197

129198
.chh__header-image {
@@ -136,6 +205,7 @@ html.theme-dark .chh__header-content__input button {
136205
padding: 0.3rem;
137206
border-radius: 10% 40%;
138207
min-height: 400px;
208+
139209
}
140210

141211
.chh__header-image img {

0 commit comments

Comments
 (0)