76 lines
2.7 KiB
TypeScript
76 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { t } from "@/content/locales";
|
|
|
|
interface StartScreenProps {
|
|
onStart: () => void;
|
|
}
|
|
|
|
export default function StartScreen({ onStart }: StartScreenProps) {
|
|
return (
|
|
<div className="fixed inset-0 z-[110] flex items-center justify-center bg-[#050505] overflow-hidden">
|
|
{/* Hintergrund-Deko */}
|
|
<div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_center,_#eab308_0%,_transparent_70%)]" />
|
|
|
|
<div className="max-w-2xl w-full mx-4 relative z-10 text-center space-y-8 p-10 border border-yellow-500/20 bg-black/60 backdrop-blur-md rounded-2xl shadow-[0_0_100px_rgba(234,179,8,0.1)]">
|
|
<div className="space-y-2">
|
|
<h1 className="font-starjedi text-6xl text-white">
|
|
{t.UI.GAME_TITLE}
|
|
</h1>
|
|
<p className="text-yellow-500/60 font-mono tracking-[0.3em] uppercase text-xs">
|
|
{t.START_SCREEN.SUBTITLE}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4 text-gray-400 font-light leading-relaxed">
|
|
<p>
|
|
{t.START_SCREEN.INTRO_TEXT}
|
|
<span className="text-white font-medium">
|
|
{" "}
|
|
{t.START_SCREEN.MISSION_HIGHLIGHT}
|
|
</span>
|
|
</p>
|
|
<ul className="text-sm space-y-2 inline-block text-left border-l-2 border-yellow-500/30 pl-6">
|
|
<li>
|
|
•{" "}
|
|
<strong className="text-yellow-500/80">
|
|
{t.START_SCREEN.FEATURE_NAV_TITLE}
|
|
</strong>{" "}
|
|
{t.START_SCREEN.FEATURE_NAV_DESC}
|
|
</li>
|
|
<li>
|
|
•{" "}
|
|
<strong className="text-yellow-500/80">
|
|
{t.START_SCREEN.FEATURE_RISK_TITLE}
|
|
</strong>{" "}
|
|
{t.START_SCREEN.FEATURE_RISK_DESC}
|
|
</li>
|
|
<li>
|
|
•{" "}
|
|
<strong className="text-yellow-500/80">
|
|
{t.START_SCREEN.FEATURE_COMBAT_TITLE}
|
|
</strong>{" "}
|
|
{t.START_SCREEN.FEATURE_COMBAT_DESC}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="pt-6">
|
|
<button
|
|
onClick={onStart}
|
|
className="group relative px-12 py-5 bg-yellow-500 text-black font-black uppercase tracking-[0.2em] transition-all hover:scale-105 hover:shadow-[0_0_40px_rgba(234,179,8,0.4)] overflow-hidden"
|
|
>
|
|
<span className="relative z-10">{t.UI.START_BUTTON}</span>
|
|
<div className="absolute inset-0 bg-white opacity-0 group-hover:opacity-20 transition-opacity" />
|
|
</button>
|
|
|
|
<p className="mt-4 text-[10px] text-gray-600 uppercase tracking-widest">
|
|
{t.START_SCREEN.FOOTER_ENGINE}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|