blob: e3b789855bdd723cd107bc0ca85c3a4ed15816a4 (
plain) (
blame)
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
170
|
import { Link } from "react-router";
import sakuraMirageImage from "../assets/games/mirage.webp";
const Landing = () => {
return (
<div className="min-h-screen bg-slate-950 text-slate-100">
{/* Navigation */}
<nav className="border-b border-slate-800 bg-slate-950/95 backdrop-blur-sm sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center space-x-3">
<div className="w-8 h-8 bg-violet-600 rounded-md flex items-center justify-center">
<span className="text-white font-bold text-sm">M</span>
</div>
<span className="text-white font-semibold text-lg">Mirage</span>
</div>
<div className="flex items-center space-x-2 sm:space-x-4">
<Link
to="/login"
className="text-slate-300 hover:text-white px-2 sm:px-3 py-2 rounded-md text-sm font-medium transition-colors"
>
Log In
</Link>
<Link
to="/register"
className="bg-violet-600 hover:bg-violet-700 text-white px-3 sm:px-4 py-2 rounded-md text-sm font-medium transition-colors"
>
Create Account
</Link>
</div>
</div>
</div>
</nav>
<section className="relative py-12 sm:py-18 lg:py-24 overflow-hidden">
{/* Background Image */}
<div
className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-30"
style={{
backgroundImage: `url(${sakuraMirageImage})`,
backgroundPosition: "center top",
}}
></div>
{/* Overlay */}
<div className="absolute inset-0 bg-slate-950/60"></div>
{/* Content */}
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="max-w-4xl">
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4 sm:mb-6 leading-tight">
Welcome to <span className="text-violet-400">Mirage!</span>
</h1>
<p className="text-lg sm:text-xl text-slate-300 mb-6 sm:mb-8 leading-relaxed">
Looks like you're not logged in. If you've got an account,{" "}
<Link
to="/login"
className="text-violet-400 hover:text-violet-300 underline"
>
Login!
</Link>
</p>
</div>
</div>
</section>
{/* Introduction Section */}
<section className="py-6 sm:py-8 border-t border-slate-800">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="max-w-4xl">
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-4 sm:mb-6">
What is this?
</h2>
<p className="text-base sm:text-lg text-slate-300 leading-relaxed">
<span className="font-semibold text-violet-300">Mirage</span> is a
flexible Rhythm Game Score Tracker that works without relying on
predefined seeds. It offers a lightweight alternative that can act
as a holdover for tracking scores when chart metadata isn't
readily available.
</p>
</div>
</div>
</section>
{/* Track Your Scores Section */}
<section className="py-6 sm:py-8 border-t border-slate-800">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="max-w-4xl">
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-4 sm:mb-6">
<span className="text-violet-400">Track</span> Your Scores
</h2>
<p className="text-base sm:text-lg text-slate-300 leading-relaxed">
Mirage lets you import scores from the games you play for
safe-keeping, so you can prevent losing them to the void should
anything ever happen.
</p>
</div>
</div>
</section>
{/* Add your own games */}
<section className="py-6 sm:py-8 border-t border-slate-800">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="max-w-4xl">
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-4 sm:mb-6">
<span className="text-purple-400">Add</span> Your Own Games
</h2>
<p className="text-base sm:text-lg text-slate-300 leading-relaxed">
While not as robust as other seed-based systems. Mirage makes it
easy for you to track and keep score for any game, no matter how
niche it is.
</p>
</div>
</div>
</section>
{/* Join with others */}
<section className="py-6 sm:py-8 border-t border-slate-800">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="max-w-4xl">
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-4 sm:mb-6">
Mirage <span className="text-violet-400">Together</span>
</h2>
<p className="text-base sm:text-lg text-slate-300 leading-relaxed">
Mirage is easily self-hostable and can be used locally for a single person or hosted so you can track scores with your friends. Everything is open-source.
</p>
</div>
</div>
</section>
{/* Call to Action Section */}
<section className="py-8 sm:py-12 border-t border-slate-800 bg-slate-900">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center max-w-2xl mx-auto">
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white mb-6 sm:mb-8">
Ready to Start <span className="text-violet-400">Tracking?</span>
</h2>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Link
to="/register"
className="w-full sm:w-auto bg-violet-600 hover:bg-violet-700 text-white px-6 sm:px-8 py-3 rounded-md text-base sm:text-lg font-medium transition-colors min-w-[200px] shadow-lg shadow-violet-600/25 text-center"
>
Create Account
</Link>
<Link
to="/login"
className="w-full sm:w-auto border border-slate-600 hover:border-violet-500 text-slate-300 hover:text-white px-6 sm:px-8 py-3 rounded-md text-base sm:text-lg font-medium transition-colors min-w-[200px] text-center"
>
Log In
</Link>
</div>
</div>
</div>
</section>
{/* Footer */}
<footer className="border-t border-slate-800 py-8 sm:py-12 bg-slate-950">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center text-slate-400">
<a className="hover:underline" href="">
GitHub
</a>
</div>
</div>
</footer>
</div>
);
};
export default Landing;
|
