-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathTierForgePage.jsx
More file actions
75 lines (68 loc) · 2.82 KB
/
TierForgePage.jsx
File metadata and controls
75 lines (68 loc) · 2.82 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
import React, { Suspense, lazy } from 'react';
import { Link } from 'react-router-dom';
import { ArrowLeftIcon } from '@phosphor-icons/react';
import Seo from '../../components/Seo';
import BreadcrumbTitle from '../../components/BreadcrumbTitle';
import GenerativeArt from '../../components/GenerativeArt';
import Loading from '../../components/Loading';
const TierForge = lazy(() => import('../../app/apps/TierForge/TierForge'));
function TierForgePage() {
const appName = 'Tier Forge';
return (
<div className="min-h-screen bg-[#050505] text-white selection:bg-emerald-500/30 font-sans">
<Seo
title="Tier Forge | Fezcodex"
description="Protocol for hierarchical data classification and visual ranking generation."
keywords={[
'Fezcodex',
'Tier List',
'Ranker',
'Tier List Maker',
'Visual Ranking',
]}
/>
<div className="mx-auto max-w-7xl px-6 py-24 md:px-12">
<header className="mb-24">
<Link
to="/apps"
className="group mb-12 inline-flex items-center gap-2 text-xs font-mono text-gray-500 hover:text-white transition-colors uppercase tracking-[0.3em]"
>
<ArrowLeftIcon
weight="bold"
className="transition-transform group-hover:-translate-x-1"
/>
<span>Applications</span>
</Link>
<div className="flex flex-col md:flex-row md:items-end justify-between gap-12">
<div className="space-y-4">
<BreadcrumbTitle
title="Tier Forge"
slug="tf"
variant="brutalist"
/>
<p className="text-xl text-gray-400 max-w-2xl font-light leading-relaxed">
Hierarchical classification protocol. Construct and visualize
ranked data sets with drag-and-drop precision.
</p>
</div>
</div>
</header>
<div className="border border-white/10 bg-white/[0.02] p-4 md:p-8 rounded-sm overflow-hidden min-h-[600px] relative">
<div className="absolute inset-0 opacity-[0.03] pointer-events-none grayscale z-0">
<GenerativeArt seed={appName} className="w-full h-full" />
</div>
<div className="relative z-10">
<Suspense fallback={<Loading />}>
<TierForge />
</Suspense>
</div>
</div>
<footer className="mt-32 pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-6 text-gray-600 font-mono text-[10px] uppercase tracking-[0.3em]">
<span>Fezcodex_Rank_Protocol_v1.0.0</span>
<span className="text-gray-800">SYSTEM_READY // AWAITING_INPUT</span>
</footer>
</div>
</div>
);
}
export default TierForgePage;