challenge brief update

src/app/page.tsx

@@ -1,19 +1,53 @@
-export default function Home() {
+import { readFile } from "fs/promises";
+import Image from "next/image";
+import path from "path";
+
+function parseBrief(raw: string): { title: string; paragraphs: string[] } {
+  const lines = raw.trimEnd().split("\n");
+  const title = (lines[0] ?? "").trim();
+  const body = lines.slice(1).join("\n").trim();
+  const paragraphs = body
+    .split(/\n\s*\n/)
+    .map((p) => p.replace(/\n/g, " ").trim())
+    .filter(Boolean);
+  return { title, paragraphs };
+}
+
+export default async function Home() {
+  const briefPath = path.join(process.cwd(), "Brief.md");
+  const raw = await readFile(briefPath, "utf-8");
+  const { title, paragraphs } = parseBrief(raw);
+
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center px-6 py-16">
-      <div className="max-w-2xl space-y-8 text-center">
-        <h1 className="font-heading text-5xl tracking-tight text-white sm:text-6xl">
-          Folder Game Challenge
-        </h1>
+    <main className="min-h-screen px-6 py-16">
+      <div className="mx-auto max-w-3xl space-y-10">
+        <header className="space-y-6 text-center">
+          <Image
+            src="/logo.png"
+            alt=""
+            width={611}
+            height={689}
+            className="mx-auto h-auto max-h-36 w-auto sm:max-h-44"
+            priority
+          />
+          <h1 className="font-heading text-5xl tracking-tight text-white sm:text-6xl">
+            {title}
+          </h1>
+        </header>
+
         <div className="space-y-6 text-lg leading-relaxed text-zinc-300 sm:text-xl">
-          <p>
-            You have 2 hours to create an interactive game that uses some
-            education around file management, using / navigating software etc.
-          </p>
-          <p>
-            The goal is the user will progress through levels completing
-            challenges based in real knowledge learning.
-          </p>
+          {paragraphs.map((text, i) => (
+            <p
+              key={i}
+              className={
+                i === paragraphs.length - 1 && text.toLowerCase().includes("npm install")
+                  ? "rounded-lg border border-purple-400/20 bg-black/25 px-4 py-3 text-base text-zinc-300 sm:text-lg"
+                  : undefined
+              }
+            >
+              {text}
+            </p>
+          ))}
         </div>
       </div>
     </main>