blob: 7cd0f4360591d2f105e8b9f545aef5809f5ac949 (
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
|
import { Link } from 'react-router';
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-4">
<Link
to="/login"
className="text-slate-300 hover:text-white 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-4 py-2 rounded-md text-sm font-medium transition-colors"
>
Create Account
</Link>
</div>
</div>
</div>
</nav>
{/* Hero Section with Banner */}
<section className="relative py-32 lg:py-40 overflow-hidden">
{/* Background Image */}
<div className="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-20"
style={{backgroundImage: "url('https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')"}}></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-5xl md:text-6xl font-bold text-white mb-6 leading-tight">
Welcome to <span className="text-violet-400">Mirage!</span>
</h1>
<p className="text-xl text-slate-300 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-16 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-3xl md:text-4xl font-bold text-white mb-6">
I'm New Around Here, What is this?
</h2>
<p className="text-lg text-slate-300 leading-relaxed">
<span className="font-semibold text-violet-300">Mirage</span> is a Rhythm Game Score Tracker. That means we...
</p>
</div>
</div>
</section>
{/* Track Your Scores Section */}
<section className="py-16 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-3xl md:text-4xl font-bold text-white mb-6">
<span className="text-violet-400">Track</span> Your Scores.
</h2>
<p className="text-lg text-slate-300 leading-relaxed">
Mirage supports a bunch of your favourite games, and integrates with many existing services to
make sure no score is lost to the void. Furthermore, it's backed by an Open-Source API, so your
scores are always available!
</p>
</div>
</div>
</section>
{/* Analyse Your Scores Section */}
<section className="py-16 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-3xl md:text-4xl font-bold text-white mb-6">
<span className="text-purple-400">Analyse</span> Your Scores.
</h2>
<p className="text-lg text-slate-300 leading-relaxed">
Mirage analyses your scores for you, breaking them down into all the statistics you'll ever need.
No more spreadsheets!
</p>
</div>
</div>
</section>
{/* Provide Cool Features Section */}
<section className="py-16 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-3xl md:text-4xl font-bold text-white mb-6">
Provide <span className="text-violet-400">Cool Features</span>.
</h2>
<p className="text-lg text-slate-300 leading-relaxed">
Mirage implements the features rhythm gamers already talk about. Break your scores down
into sessions, showcase your best metrics on your profile, study your progress on folders - it's all
there, and done for you!
</p>
</div>
</div>
</section>
{/* Call to Action Section */}
<section className="py-20 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-3xl md:text-4xl font-bold text-white 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="bg-violet-600 hover:bg-violet-700 text-white px-8 py-3 rounded-md text-lg font-medium transition-colors min-w-[200px] shadow-lg shadow-violet-600/25"
>
Create Account
</Link>
<Link
to="/login"
className="border border-slate-600 hover:border-violet-500 text-slate-300 hover:text-white px-8 py-3 rounded-md text-lg font-medium transition-colors min-w-[200px]"
>
Log In
</Link>
</div>
</div>
</div>
</section>
{/* Footer */}
<footer className="border-t border-slate-800 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;
|
