54 lines
2.4 KiB
TypeScript
54 lines
2.4 KiB
TypeScript
export function AboutPanel() {
|
|
return (
|
|
<div className="max-w-2xl space-y-6">
|
|
<div>
|
|
<h2 className="font-bold text-slate-100 text-xl tracking-tight">About Idlegame</h2>
|
|
<p className="text-slate-400 text-sm">A text-fantasy RPG incremental experience.</p>
|
|
</div>
|
|
|
|
<div className="space-y-6 text-slate-300">
|
|
<section className="space-y-2">
|
|
<h3 className="font-semibold text-slate-200 text-sm tracking-wide uppercase">
|
|
How to Play
|
|
</h3>
|
|
<p className="text-sm leading-relaxed text-slate-400">
|
|
Idlegame is driven by actions and choices. Select actions from the{' '}
|
|
<strong className="text-amber-400">Play</strong> screen to execute them. Some actions
|
|
are timed and can be queued. Once completed, they reward you with resources, unlock new
|
|
deeds, or advance the chronicle.
|
|
</p>
|
|
</section>
|
|
|
|
<section className="space-y-2">
|
|
<h3 className="font-semibold text-slate-200 text-sm tracking-wide uppercase">
|
|
The Chronicle
|
|
</h3>
|
|
<p className="text-sm leading-relaxed text-slate-400">
|
|
As you perform actions, you will unlock narrative points of interest. Head to the{' '}
|
|
<strong className="text-amber-400">Story</strong> tab to make crucial choices and read
|
|
the history of your journey.
|
|
</p>
|
|
</section>
|
|
|
|
<section className="space-y-2">
|
|
<h3 className="font-semibold text-slate-200 text-sm tracking-wide uppercase">
|
|
Technical Specs
|
|
</h3>
|
|
<div className="rounded-xl border border-slate-800 bg-slate-900/40 p-4">
|
|
<dl className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
|
|
<dt className="text-slate-500">Version</dt>
|
|
<dd className="font-mono text-slate-300">0.1.0 (M1 Milestone)</dd>
|
|
<dt className="text-slate-500">Engine</dt>
|
|
<dd className="text-slate-300">Pure TypeScript State Machine</dd>
|
|
<dt className="text-slate-500">Framework</dt>
|
|
<dd className="text-slate-300">React + Zustand + Tailwind CSS</dd>
|
|
<dt className="text-slate-500">Target Platform</dt>
|
|
<dd className="text-slate-300">Responsive Web & PWA</dd>
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|