GunjanDhawan @GunjanDhawan

export default function HorrorPuzzleGame() {

return (

<div className="min-h-screen bg-black text-white flex flex-col items-center justify-center p-6">

<h1 className="text-5xl font-bold mb-4 tracking-wide">The Forgotten Hall</h1>

<p className="text-gray-300 max-w-xl text-center mb-8">

You wake up inside a haunted mansion. Solve puzzles, collect clues, and escape before the shadow finds you.

</p>

<div className="bg-zinc-900 border border-zinc-700 rounded-3xl p-6 w-full max-w-2xl shadow-2xl">

<h2 className="text-2xl font-semibold mb-4">Puzzle 1: The Locked Door</h2>

<p className="mb-4 text-gray-300">

A note on the wall reads:

</p>

<div className="bg-black border border-zinc-700 rounded-xl p-4 mb-6 text-green-400 font-mono">

“I speak without a mouth and hear without ears. I have no body, but I come alive with wind.”

</div>

<input

type="text"

placeholder="Enter your answer..."

className="w-full p-3 rounded-xl bg-zinc-800 border border-zinc-600 mb-4"

/>

<button className="bg-red-700 hover:bg-red-600 transition px-6 py-3 rounded-2xl font-semibold">

Unlock Door

</button>

</div>

<div className="mt-10 text-sm text-gray-500 text-center max-w-lg">

Tip: Expand the game by adding inventory items, jumpscares, sound effects, hidden rooms, and multiple endings.

</div>

</div>

)

}