Skip to content

Commit 36eae7c

Browse files
navillanuevanavillanueva
authored
Merge pull request #3341 from ava-labs/federiconardelli7/validator-stat-page-header
apply the header+hero style to stats/validators page
2 parents 75b9ad2 + 9832896 commit 36eae7c

File tree

1 file changed

+107
-87
lines changed

1 file changed

+107
-87
lines changed

‎app/(home)/stats/validators/page.tsx‎

Lines changed: 107 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -427,104 +427,124 @@ export default function ValidatorStatsPage() {
427427
return (
428428
<div className="min-h-screen bg-white dark:bg-neutral-950 pt-8">
429429
<main className="container mx-auto px-6 py-10 pb-24 space-y-8">
430-
<div className="mb-10">
431-
<div className="flex items-start justify-between gap-4 mb-3">
432-
<div>
433-
<h1 className="text-4xl sm:text-4xl font-semibold tracking-tight text-black dark:text-white">
434-
Validator Stats
435-
</h1>
436-
<p className="text-base text-neutral-600 dark:text-neutral-400 max-w-2xl leading-relaxed mt-2">
437-
Validator statistics and version tracking across Avalanche networks
438-
</p>
430+
{/* Hero Section */}
431+
<div className="relative overflow-hidden rounded-2xl p-8 sm:p-12 mb-10">
432+
{/* Multi-layer gradient background */}
433+
<div className="absolute inset-0 bg-black" />
434+
<div
435+
className="absolute inset-0 opacity-60"
436+
style={{
437+
background: 'linear-gradient(140deg, #E84142 0%, transparent 70%)'
438+
}}
439+
/>
440+
<div
441+
className="absolute inset-0 opacity-40"
442+
style={{
443+
background: 'linear-gradient(to top left, #3752AC 0%, transparent 50%)'
444+
}}
445+
/>
446+
<div
447+
className="absolute inset-0 opacity-30"
448+
style={{
449+
background: 'radial-gradient(circle at 50% 50%, #E84142 0%, #3752AC 30%, transparent 70%)'
450+
}}
451+
/>
452+
453+
{/* Content */}
454+
<div className="relative z-10 space-y-8">
455+
<div className="flex items-start justify-between gap-4">
456+
<div>
457+
<h1 className="text-4xl sm:text-4xl font-semibold tracking-tight text-white">
458+
Validator Stats
459+
</h1>
460+
<p className="text-base text-white/80 max-w-2xl leading-relaxed mt-2">
461+
Validator statistics and version tracking across Avalanche networks
462+
</p>
463+
</div>
439464
</div>
440-
</div>
441-
</div>
442465

443-
{/* Aggregated Stats Cards */}
444-
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-4">
445-
<Card className="border border-[#e1e2ea] dark:border-neutral-800 bg-[#fcfcfd] dark:bg-neutral-900 transition-all hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-sm py-0 h-full flex flex-col lg:col-span-3">
446-
<div className="p-6 text-center flex flex-col justify-center flex-1">
447-
<p className="mb-2 text-sm font-medium text-neutral-500 dark:text-neutral-400">
448-
Total Chains
449-
</p>
450-
<p className="text-4xl font-semibold tracking-tight text-black dark:text-white">
451-
{aggregatedStats.totalSubnets}
452-
</p>
453-
<p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
454-
{aggregatedStats.l1Count} L1s / {aggregatedStats.subnetCount} Subnets
455-
</p>
456-
</div>
457-
</Card>
466+
{/* Separator */}
467+
<div className="border-t border-white/20" />
458468

459-
<Card className="border border-[#e1e2ea] dark:border-neutral-800 bg-[#fcfcfd] dark:bg-neutral-900 transition-all hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-sm py-0 h-full flex flex-col lg:col-span-3">
460-
<div className="p-6 text-center flex flex-col justify-center flex-1">
461-
<p className="mb-2 text-sm font-medium text-neutral-500 dark:text-neutral-400">
462-
Total Validators
463-
</p>
464-
<p className="text-4xl font-semibold tracking-tight text-black dark:text-white">
465-
{formatNumber(aggregatedStats.totalNodes)}
466-
</p>
467-
<p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
468-
{upToDatePercentage.toFixed(1)}% up to date
469-
</p>
470-
</div>
471-
</Card>
469+
{/* Aggregated Stats Cards */}
470+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-4">
471+
<div className="backdrop-blur-sm bg-white/10 border border-white/20 rounded-xl p-6 text-center flex flex-col justify-center h-full lg:col-span-3 transition-all hover:bg-white/15">
472+
<p className="mb-2 text-sm font-medium text-white/70">
473+
Total Chains
474+
</p>
475+
<p className="text-4xl font-semibold tracking-tight text-white">
476+
{aggregatedStats.totalSubnets}
477+
</p>
478+
<p className="mt-1 text-xs text-white/70">
479+
{aggregatedStats.l1Count} L1s / {aggregatedStats.subnetCount} Subnets
480+
</p>
481+
</div>
472482

473-
<Card className="border border-[#e1e2ea] dark:border-neutral-800 bg-[#fcfcfd] dark:bg-neutral-900 transition-all hover:border-neutral-300 dark:hover:border-neutral-700 hover:shadow-sm py-0 h-full flex flex-col lg:col-span-6">
474-
<div className="p-6 text-center flex flex-col justify-center flex-1">
475-
<p className="mb-4 text-sm font-medium text-neutral-500 dark:text-neutral-400">
476-
Total Version Breakdown
477-
</p>
478-
<div className="space-y-2">
479-
{/* Horizontal Bar Chart */}
480-
<div className="flex h-6 w-full rounded overflow-hidden bg-neutral-100 dark:bg-neutral-800">
481-
{Object.entries(totalVersionBreakdown)
482-
.sort(([v1], [v2]) => compareVersions(v2, v1))
483-
.map(([version, data], index) => {
484-
const percentage = aggregatedStats.totalNodes > 0
485-
? (data.nodes / aggregatedStats.totalNodes) * 100
486-
: 0;
487-
return (
488-
<div
489-
key={version}
490-
className={`h-full transition-all ${getVersionColor(index)}`}
491-
style={{ width: `${percentage}%` }}
492-
title={`${version}: ${data.nodes} nodes (${percentage.toFixed(1)}%)`}
493-
/>
494-
);
495-
})}
496-
</div>
497-
{/* Version Labels */}
498-
<div className="flex flex-wrap gap-x-2 gap-y-1 text-xs justify-center">
499-
{Object.entries(totalVersionBreakdown)
500-
.sort(([v1], [v2]) => compareVersions(v2, v1))
501-
.slice(0, 5) // Show top 5 versions
502-
.map(([version, data], index) => {
503-
return (
504-
<div
505-
key={version}
506-
className="flex items-center gap-1"
507-
>
483+
<div className="backdrop-blur-sm bg-white/10 border border-white/20 rounded-xl p-6 text-center flex flex-col justify-center h-full lg:col-span-3 transition-all hover:bg-white/15">
484+
<p className="mb-2 text-sm font-medium text-white/70">
485+
Total Validators
486+
</p>
487+
<p className="text-4xl font-semibold tracking-tight text-white">
488+
{formatNumber(aggregatedStats.totalNodes)}
489+
</p>
490+
<p className="mt-1 text-xs text-white/70">
491+
{upToDatePercentage.toFixed(1)}% up to date
492+
</p>
493+
</div>
494+
495+
<div className="backdrop-blur-sm bg-white/10 border border-white/20 rounded-xl p-6 text-center flex flex-col justify-center h-full lg:col-span-6 transition-all hover:bg-white/15">
496+
<p className="mb-4 text-sm font-medium text-white/70">
497+
Total Version Breakdown
498+
</p>
499+
<div className="space-y-2">
500+
{/* Horizontal Bar Chart */}
501+
<div className="flex h-6 w-full rounded overflow-hidden bg-white/20">
502+
{Object.entries(totalVersionBreakdown)
503+
.sort(([v1], [v2]) => compareVersions(v2, v1))
504+
.map(([version, data], index) => {
505+
const percentage = aggregatedStats.totalNodes > 0
506+
? (data.nodes / aggregatedStats.totalNodes) * 100
507+
: 0;
508+
return (
508509
<div
509-
className={`h-2 w-2 rounded-full flex-shrink-0 ${getVersionColor(index)}`}
510+
key={version}
511+
className={`h-full transition-all ${getVersionColor(index)}`}
512+
style={{ width: `${percentage}%` }}
513+
title={`${version}: ${data.nodes} nodes (${percentage.toFixed(1)}%)`}
510514
/>
511-
<span className="font-mono text-black dark:text-white">
512-
{version}
513-
</span>
514-
<span className="text-neutral-500 dark:text-neutral-500">
515-
({data.nodes})
516-
</span>
517-
</div>
518-
);
519-
})}
515+
);
516+
})}
517+
</div>
518+
{/* Version Labels */}
519+
<div className="flex flex-wrap gap-x-2 gap-y-1 text-xs justify-center">
520+
{Object.entries(totalVersionBreakdown)
521+
.sort(([v1], [v2]) => compareVersions(v2, v1))
522+
.slice(0, 5) // Show top 5 versions
523+
.map(([version, data], index) => {
524+
return (
525+
<div
526+
key={version}
527+
className="flex items-center gap-1"
528+
>
529+
<div
530+
className={`h-2 w-2 rounded-full flex-shrink-0 ${getVersionColor(index)}`}
531+
/>
532+
<span className="font-mono text-white">
533+
{version}
534+
</span>
535+
<span className="text-white/70">
536+
({data.nodes})
537+
</span>
538+
</div>
539+
);
540+
})}
541+
</div>
520542
</div>
521543
</div>
522544
</div>
523-
</Card>
545+
</div>
524546
</div>
525547

526-
<div className="border-t border-neutral-200 dark:border-neutral-800 my-8"></div>
527-
528548
{/* Search */}
529549
<div className="flex items-center gap-4 justify-between">
530550
<div className="relative flex-1 max-w-sm">

0 commit comments

Comments
 (0)