Ajasra
6772e0cf37
WebP reduces UI payload; JPEG keeps portrait saves compatible.\nFinish ends the visit without prompting another portrait.
33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Check } from "lucide-react";
|
|
import { MascotGuide } from "@/components/MascotGuide";
|
|
import { useI18n } from "@/lib/i18n";
|
|
|
|
export const FinishedScreen: React.FC = () => {
|
|
const { t } = useI18n();
|
|
|
|
return (
|
|
<div className="relative flex-1 flex flex-col items-center justify-center gap-5 p-6 text-center select-none">
|
|
<div className="w-16 h-16 rounded-full bg-emerald-500/15 border-2 border-emerald-400/70 text-emerald-300 flex items-center justify-center shadow-[0_0_28px_rgba(52,211,153,0.2)]">
|
|
<Check size={34} className="stroke-[3]" />
|
|
</div>
|
|
|
|
<div className="max-w-sm space-y-3">
|
|
<h1 className="text-2xl sm:text-3xl font-black text-amber-100 drop-shadow-[0_3px_8px_rgba(0,0,0,0.9)]">
|
|
{t({ en: "Thanks for visiting!", zh: "感谢到访！" })}
|
|
</h1>
|
|
<p className="text-base leading-relaxed font-semibold text-amber-100/90">
|
|
{t({
|
|
en: "Your portrait is ready to take with you. You can close this page now.",
|
|
zh: "您的万圣武道照已准备好带回家，现在可以关闭此页面。",
|
|
})}
|
|
</p>
|
|
</div>
|
|
|
|
<MascotGuide pose="bow" size="sm" animate={false} />
|
|
</div>
|
|
);
|
|
};
|