Repository navigation
Expand file tree
/
Copy pathpage.tsx
More file actions
169 lines (164 loc) · 6.41 KB
/
Copy pathpage.tsx
File metadata and controls
169 lines (164 loc) · 6.41 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
import { Button } from '@/components/ui/button';
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import {
LineChart,
GitCompareArrows,
Code2,
ListChecks,
GitCompare,
GitBranch,
Info,
} from 'lucide-react';
import Link from 'next/link';
import Image from 'next/image';
export default function Home() {
const features = [
{
title: 'Benchmark Trends',
description:
'Visualize memory benchmark trends over time for selected configurations.',
icon: LineChart,
href: '/trends',
cta: 'View Trends',
},
{
title: 'Binary Comparison',
description:
'Compare memory usage across different binary configurations and build flags.',
icon: GitCompare,
href: '/build-comparison',
cta: 'Compare Binaries',
},
{
title: 'Version Comparison',
description:
'Analyze memory differences between Python versions and release candidates.',
icon: GitBranch,
href: '/version-comparison',
cta: 'Compare Versions',
},
{
title: 'Inspect Run Results',
description:
'Analyze memory metrics for specific runs and compare with previous results.',
icon: GitCompareArrows,
href: '/diff',
cta: 'Inspect Results',
},
{
title: 'Binary Configurations',
description:
'View details of available binary compilation flag configurations.',
icon: ListChecks,
href: '/binaries',
cta: 'View Configurations',
},
{
title: 'About',
description:
'Learn about the project, how it works, and get help from maintainers.',
icon: Info,
href: '/about',
cta: 'Learn More',
},
];
return (
<div className="flex flex-col items-center justify-center text-center py-12">
<Code2 className="h-24 w-24 text-primary mb-6" />
<h1 className="text-5xl font-bold font-headline mb-4">
CPython Memory Insights
</h1>
<p className="text-xl text-muted-foreground mb-4 max-w-2xl">
Analyze memory behavior trends, compare builds and commits, and
investigate performance regressions in the CPython project.
</p>
{/* Powered by Memray - anime style! */}
<div className="relative mb-12 group">
<div className="absolute inset-0 bg-gradient-to-r from-pink-500/20 via-purple-500/20 to-cyan-500/20 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-all duration-500 group-hover:scale-110"></div>
<Link
href="https://bloomberg.github.io/memray/"
target="_blank"
rel="noopener noreferrer"
className="relative inline-flex items-center gap-3 px-5 py-2.5 rounded-full border-2 border-transparent bg-background/80 backdrop-blur-sm group-hover:border-primary/50 transition-all duration-500 group-hover:scale-110 group-hover:rotate-1 hover:shadow-2xl hover:shadow-primary/20"
>
<span className="text-base text-muted-foreground group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-pink-500 group-hover:to-cyan-500 transition-all duration-500 font-bold tracking-wider uppercase">
Powered by
</span>
<div className="relative">
<div className="absolute inset-0 bg-gradient-to-r from-pink-500 to-cyan-500 rounded blur-md opacity-0 group-hover:opacity-75 transition-all duration-500 group-hover:animate-pulse"></div>
<Image
src="/memray-logo.png"
alt="Memray"
width={130}
height={40}
style={{ height: 'auto' }}
className="relative opacity-80 group-hover:opacity-100 transition-all duration-500 group-hover:drop-shadow-[0_0_20px_rgba(236,72,153,0.5)]"
/>
</div>
</Link>
</div>
<div className="w-full max-w-6xl">
{/* First row - 3 cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
{features.slice(0, 3).map((feature) => (
<Card
key={feature.title}
className="flex flex-col shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group"
>
<CardHeader className="items-center">
<feature.icon className="h-12 w-12 text-primary mb-3 group-hover:scale-110 transition-transform duration-300" />
<CardTitle className="font-headline text-2xl group-hover:text-primary transition-colors duration-300">
{feature.title}
</CardTitle>
</CardHeader>
<CardContent className="flex-grow flex flex-col items-center text-center">
<CardDescription className="mb-6 flex-grow">
{feature.description}
</CardDescription>
<Button
asChild
className="w-full bg-primary hover:bg-primary/90 text-primary-foreground"
>
<Link href={feature.href}>{feature.cta}</Link>
</Button>
</CardContent>
</Card>
))}
</div>
{/* Second row - 3 cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{features.slice(3).map((feature) => (
<Card
key={feature.title}
className="flex flex-col shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group"
>
<CardHeader className="items-center">
<feature.icon className="h-12 w-12 text-primary mb-3 group-hover:scale-110 transition-transform duration-300" />
<CardTitle className="font-headline text-2xl group-hover:text-primary transition-colors duration-300">
{feature.title}
</CardTitle>
</CardHeader>
<CardContent className="flex-grow flex flex-col items-center text-center">
<CardDescription className="mb-6 flex-grow">
{feature.description}
</CardDescription>
<Button
asChild
className="w-full bg-primary hover:bg-primary/90 text-primary-foreground"
>
<Link href={feature.href}>{feature.cta}</Link>
</Button>
</CardContent>
</Card>
))}
</div>
</div>
</div>
);
}