Skip to content

Commit abf51f7

Browse files
hrx01-devhrx01-dev
committed
Enhanced the sponsor page
1 parent c5e3673 commit abf51f7

2 files changed

Lines changed: 149 additions & 40 deletions

File tree

‎src/pages/our-sponsors/Sponsors.css‎

Lines changed: 132 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,12 @@
1616

1717
.TitleText {
1818
margin-top: 1rem;
19-
background: linear-gradient(
20-
90deg,
21-
#4f46e5 0%,
22-
#7c3aed 25%,
23-
#4f46e5 52%,
24-
#059669 74%,
25-
#16a34a 100%
26-
);
19+
background: linear-gradient(90deg,
20+
#4f46e5 0%,
21+
#7c3aed 25%,
22+
#4f46e5 52%,
23+
#059669 74%,
24+
#16a34a 100%);
2725
display: inline-block;
2826
background-size: 100% 100%;
2927
background-position: center;
@@ -82,12 +80,13 @@
8280
background-color: #e0e7ff;
8381
color: #4f46e5;
8482
border-radius: 9999px;
85-
font-size: 0.75rem;
86-
font-weight: 600;
87-
padding: 2px 8px;
88-
min-width: 24px;
83+
font-size: 0.9rem;
84+
font-weight: 700;
85+
padding: 4px 10px;
86+
min-width: 28px;
8987
text-align: center;
90-
transition: all 0.2s ease;
88+
transition: all 0.18s ease;
89+
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
9190
}
9291

9392
.tab-button.active .tab-badge {
@@ -101,6 +100,7 @@
101100
margin: 0 auto 2rem;
102101
padding: 0.42rem;
103102
width: fit-content;
103+
max-width: 100%;
104104
border: 1px solid #e5e7eb;
105105
border-radius: 14px;
106106
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
@@ -111,11 +111,9 @@
111111

112112
[data-theme="dark"] .sponsor-page .tabs {
113113
border-color: var(--dark-border);
114-
background: linear-gradient(
115-
180deg,
116-
color-mix(in srgb, var(--dark-card-bg) 90%, white 10%) 0%,
117-
var(--dark-card-bg) 100%
118-
);
114+
background: linear-gradient(180deg,
115+
color-mix(in srgb, var(--dark-card-bg) 90%, white 10%) 0%,
116+
var(--dark-card-bg) 100%);
119117
box-shadow:
120118
0 12px 26px rgba(0, 0, 0, 0.28),
121119
inset 0 1px 0 rgba(255, 255, 255, 0.05);
@@ -173,7 +171,12 @@
173171

174172
.sponsor-page .tab-badge {
175173
background-color: #e2e8f0;
176-
color: #334155;
174+
color: #1f2937;
175+
font-weight: 700;
176+
font-size: 0.9rem;
177+
padding: 4px 10px;
178+
min-width: 28px;
179+
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
177180
}
178181

179182
.sponsor-page .tab-button.active .tab-badge {
@@ -182,8 +185,13 @@
182185
}
183186

184187
[data-theme="dark"] .sponsor-page .tab-badge {
185-
background-color: rgba(148, 163, 184, 0.25);
186-
color: #e2e8f0;
188+
background-color: rgba(148, 163, 184, 0.38);
189+
color: #f8fafc;
190+
font-weight: 700;
191+
font-size: 0.9rem;
192+
padding: 4px 10px;
193+
min-width: 28px;
194+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
187195
}
188196

189197
.no-sponsors {
@@ -375,12 +383,10 @@
375383
left: -100%;
376384
width: 300%;
377385
height: 100%;
378-
background: linear-gradient(
379-
90deg,
380-
transparent,
381-
rgba(255, 255, 255, 0.4),
382-
transparent
383-
);
386+
background: linear-gradient(90deg,
387+
transparent,
388+
rgba(255, 255, 255, 0.4),
389+
transparent);
384390
transition: 0.5s;
385391
z-index: 1;
386392
}
@@ -413,6 +419,38 @@
413419
padding: 0;
414420
}
415421

422+
[data-theme="dark"] .sponsor-page .sponsor-card.empty-card {
423+
background: linear-gradient(135deg,
424+
color-mix(in srgb, var(--dark-card-bg) 88%, rgba(99, 102, 241, 0.02) 12%) 0%,
425+
var(--dark-card-bg) 100%);
426+
border: 1px dashed rgba(148, 163, 184, 0.14);
427+
color: var(--dark-text-primary);
428+
box-shadow:
429+
0 6px 18px rgba(0, 0, 0, 0.6),
430+
0 2px 4px rgba(0, 0, 0, 0.35);
431+
}
432+
433+
[data-theme="dark"] .sponsor-page .sponsor-card.empty-card::before {
434+
background: linear-gradient(90deg,
435+
transparent,
436+
rgba(255, 255, 255, 0.03),
437+
transparent);
438+
}
439+
440+
[data-theme="dark"] .sponsor-page .sponsor-card.empty-card:hover {
441+
box-shadow:
442+
0 14px 30px -8px rgba(0, 0, 0, 0.6),
443+
0 10px 12px -6px rgba(0, 0, 0, 0.35);
444+
}
445+
446+
[data-theme="dark"] .sponsor-page .sponsor-card.empty-card h3 {
447+
color: var(--dark-text-primary);
448+
}
449+
450+
[data-theme="dark"] .sponsor-page .sponsor-card.empty-card .join-icon {
451+
color: var(--ifm-color-primary);
452+
}
453+
416454
.sponsor-page .scanner-popup {
417455
position: fixed;
418456
top: 0;
@@ -445,6 +483,62 @@
445483
margin-top: 2rem;
446484
}
447485

486+
.sponsors-section h2,
487+
.sponsors-section h3,
488+
.sponsors-section .past-heading,
489+
.sponsors-section .section-title,
490+
.sponsors-section .past-title {
491+
text-align: center;
492+
margin: 1.25rem 0;
493+
}
494+
495+
/* Ensure the heart icon beside the title stays aligned */
496+
.sponsors-section .past-heading {
497+
display: flex;
498+
align-items: center;
499+
justify-content: center;
500+
gap: 0.5rem;
501+
padding: 0.72rem 1.25rem;
502+
min-height: 46px;
503+
margin: 1.25rem auto;
504+
width: 100%;
505+
border: 1px solid #e5e7eb;
506+
border-radius: 14px;
507+
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
508+
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.05);
509+
}
510+
511+
[data-theme="dark"] .sponsors-section .past-heading {
512+
border-color: var(--dark-border);
513+
background: linear-gradient(180deg,
514+
color-mix(in srgb, var(--dark-card-bg) 90%, white 10%) 0%,
515+
var(--dark-card-bg) 100%);
516+
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
517+
}
518+
519+
.sponsors-section .past-heading .past-heart {
520+
display: inline-flex;
521+
align-items: center;
522+
justify-content: center;
523+
}
524+
525+
/* Match tab label font styling */
526+
.sponsors-section .past-title {
527+
font-size: 1.25rem;
528+
font-weight: 700;
529+
line-height: 1;
530+
font-family: inherit;
531+
}
532+
533+
/* Color matches tabs: dark text in light mode, white in dark mode */
534+
.sponsors-section .past-heading {
535+
color: #475569;
536+
}
537+
538+
[data-theme="dark"] .sponsors-section .past-heading {
539+
color: #ffffff;
540+
}
541+
448542
.support-links {
449543
margin-top: 5rem;
450544
display: flex;
@@ -456,7 +550,8 @@
456550
.scanner-button {
457551
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
458552
color: white;
459-
padding: 12px 28px 12px 28px; /* Fixed padding to prevent jumping */
553+
padding: 12px 28px 12px 28px;
554+
/* Fixed padding to prevent jumping */
460555
border-radius: 8px;
461556
cursor: pointer;
462557
border: none;
@@ -485,17 +580,15 @@
485580
left: -100%;
486581
width: 100%;
487582
height: 100%;
488-
background: linear-gradient(
489-
90deg,
490-
transparent,
491-
rgba(255, 255, 255, 0.2),
492-
transparent
493-
);
583+
background: linear-gradient(90deg,
584+
transparent,
585+
rgba(255, 255, 255, 0.2),
586+
transparent);
494587
transition: 0.5s;
495588
z-index: 1;
496589
}
497590

498-
.scanner-button > * {
591+
.scanner-button>* {
499592
position: relative;
500593
z-index: 2;
501594
}
@@ -597,8 +690,8 @@
597690
font-size: clamp(0.72rem, 1.4vw, 0.86rem);
598691
font-weight: 500;
599692
letter-spacing: 0.01em;
600-
line-height: 1.25;
601-
white-space: normal;
693+
width: fit-content;
694+
max-width: 100%;
602695
overflow: visible;
603696
text-overflow: clip;
604697
overflow-wrap: anywhere;
@@ -634,7 +727,7 @@
634727
max-width: 100%;
635728
}
636729

637-
.sponsor-page .sponsors-list > * {
730+
.sponsor-page .sponsors-list>* {
638731
min-width: 0;
639732
}
640733

@@ -905,4 +998,4 @@
905998
.sponsor-page {
906999
padding-top: calc(var(--ifm-navbar-height, 60px) + 1rem);
9071000
}
908-
}
1001+
}

‎src/pages/our-sponsors/index.tsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,23 @@ const OurSponsors: React.FC = () => {
174174
{pastSponsors.length > 0 && (
175175
<>
176176
<h3 className="mt-12 mb-4 text-xl font-semibold text-gray-800">
177-
Past Sponsors
177+
<span className="past-heading">
178+
<span className="past-title">Past Sponsors</span>
179+
<span className="past-heart" aria-hidden="true">
180+
<svg
181+
stroke="currentColor"
182+
fill="currentColor"
183+
strokeWidth="0"
184+
viewBox="0 0 512 512"
185+
height="1em"
186+
width="1em"
187+
xmlns="http://www.w3.org/2000/svg"
188+
>
189+
<path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" />
190+
</svg>
191+
</span>
192+
<span className="tab-badge">34</span>
193+
</span>
178194
</h3>
179195
<div className="sponsors-list">
180196
{pastSponsors.map((sponsor) => (

0 commit comments

Comments
 (0)