Skip to content

Redesigned Hero of Main page #447

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 14, 2025
Merged

Redesigned Hero of Main page #447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 34 additions & 24 deletions src/components/FloatingContributors/FloatingContributors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,22 +25,22 @@
}

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

/* Header embedded version - larger size */
Expand All @@ -50,26 +50,36 @@
border-radius: 28px;
}

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

/* Light theme support - using website theme colors */
[data-theme='light'] .floating-contributors-card {
background: rgba(255, 255, 255, 0.98);
color: #1a202c;
border-color: rgba(0, 0, 0, 0.1);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
background: linear-gradient(
135deg,
#fff7e1 0%, /* pastel yellow */
#fde2e4 30%, /* peachy pink */
#e3d5ff 65%, /* soft lavender */
#d0e1ff 100% /* light sky blue */
);
color: #1a202c; /* dark text */
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 1rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
transition: background 0.3s ease, box-shadow 0.3s ease;
}


[data-theme='dark'] .floating-contributors-card {
background: linear-gradient(
135deg,
#1a1a2e 0%, /* dark navy */
#2e2e3e 30%, /* muted purple/gray */
#3a3a4f 65%, /* desaturated indigo */
#2b2b3b 100% /* deep midnight blue */
);
color: #e0e0e0; /* light text for contrast */
border: 1px solid rgba(255, 255, 255, 0.1); /* subtle border */
border-radius: 1rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); /* stronger shadow for depth */
transition: background 0.3s ease, box-shadow 0.3s ease;
}

.floating-contributors-card::before {
Expand Down
140 changes: 105 additions & 35 deletions src/components/header/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,22 @@
transform-style: preserve-3d;
overflow: hidden;
padding: 3rem auto;
background-color: var(--ifm-background-color);
background-color: #fff;;
color: #000;
transition: background 0.4s ease, color 0.4s ease;
}

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

.chh__header {
display: flex;
flex-direction: row;
position: relative;
gap: 2rem;
margin-left: 1rem;
}

.chh__header-content {
Expand All @@ -30,41 +32,52 @@ html.theme-dark .chh__header--body {
flex-direction: column;
margin-right: 2rem;
}

.chh__header-content h1 {
[data-theme='light'] .chh__header-content h1 {
font-weight: 700;
font-size: 62px;
line-height: 75px;
font-size: 56px;
line-height: 65px;
letter-spacing: -0.04em;
background: linear-gradient(
30deg,
rgba(206, 86, 174, 0.972) 0%,
rgb(253 29 29 / 100%) 50%,
rgb(252 176 69 / 100%) 100%
90deg,
#e44d26 0%, /* orange */
#f16529 30%, /* lighter orange */
#d16ba5 60%, /* pink */
#6a5acd 100% /* purple */
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: background 0.3s ease-in-out;
}

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



.chh__header-content p {
font-family: var(--font-family);
font-weight: 400;
font-size: 22px;
font-size: 20px;
text-align: justify;
line-height: 30px;
margin-top: 1.5rem;
color: #000; /* Light mode text */
color: #333; /* Light mode text */
transition: color 0.3s ease-in-out;
}

Expand All @@ -83,47 +96,103 @@ html.theme-dark .chh__header-content p {
margin: 2rem 0 1rem;
display: flex;
flex-direction: row;
gap: 1rem;
}

.chh__header-content__input--link {
text-decoration: none;
font-size: 20px;
line-height: 28px;
font-weight: 600;
color: black;
}

.chh__header-content__input--link:hover {
text-decoration: none;
color:#121212;
}

.chh__header-content__input button {
flex: 0.6;
width: 100%;
min-height: 50px;
font-weight: 400;
font-size: 20px;
line-height: 28px;
border: 2px solid #ff4820;
padding: 0 0.8rem;
flex: 1;
min-height: 56px;
font-weight: 600;
font-size: 18px;
border: none;
cursor: pointer;
outline: none;
border-radius: 5px;
margin: 0 1rem 0 0;
background: linear-gradient(90deg, #07ab8a5f 0%, transparent 100%);
border-radius: 12px;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
z-index: 1;
}

html.theme-dark .chh__header-content__input button {
background: rgba(255, 255, 255, 0.05);
border-color: #4fe3c5;
color: #fff;
.chh__header-content__input button::after {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 200%;
height: 100%;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 255, 255, 0.08) 30%,
transparent 60%
);
transform: skewX(-20deg);
transition: left 0.8s ease-in-out;
pointer-events: none;
}

.chh__header-content__input button:last-child {
background: transparent;
.chh__header-content__input button:hover::after {
left: 100%;
}

.chh__header-content__input button:hover {
background: linear-gradient(90deg, #f0a90fd0 0%, transparent 100%);
transform: scale(1.03); /* very subtle lift */
}

.chh__header-content__input button:first-child {
background: linear-gradient(135deg, #fda085 0%, #f6d365 100%);
}

.chh__header-content__input button:first-child:hover {
background: linear-gradient(135deg, #f76b1c 0%, #fca65f 100%);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

[data-theme='dark'] .chh__header-content__input button:first-child {
background: linear-gradient(135deg, #9b4d89 0%, #6b3a9c 100%);
}

[data-theme='dark'] .chh__header-content__input button:first-child:hover {
background: linear-gradient(135deg, #b45ea5 0%, #8050c4 100%);
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.chh__header-content__input button:last-child {
background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}

.chh__header-content__input button:last-child:hover {
background: linear-gradient(135deg, #ae8dca 0%, #b3a7cb 100%);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

[data-theme='dark'] .chh__header-content__input button:last-child {
background: linear-gradient(135deg, #2c2c36 0%, #3d3d4f 100%);
color: #e0e0e0;
}

[data-theme='dark'] .chh__header-content__input button:last-child:hover {
background: linear-gradient(135deg, #3d3d4f 0%, #50506b 100%);
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.chh__header-image {
Expand All @@ -136,6 +205,7 @@ html.theme-dark .chh__header-content__input button {
padding: 0.3rem;
border-radius: 10% 40%;
min-height: 400px;

}

.chh__header-image img {
Expand Down
Loading