Create index.js

pages/index.js

@@ -0,0 +1,52 @@
+import Head from "next/head";
+import Header from "../components/Header";
+import Card from "../components/Card";
+import IdeaForm from "../components/IdeaForm";
+import ActivityPack from "../components/ActivityPack";
+import { useState } from "react";
+
+export default function Home() {
+  const [showForm, setShowForm] = useState(false);
+  const [pack, setPack] = useState(null);
+
+  function handleCardClick() {
+    setShowForm(true);
+    window.scrollTo({ top: 300, behavior: "smooth" });
+  }
+
+  async function handleGenerate(payload) {
+    const simulated = {
+      activity_name: "Simulated Role Play",
+      objective: payload.message,
+      why: "Auto-selected based on inputs",
+      scenario: `Context: ${payload.context}`,
+      character_sketches: [{ role: "Rep", description: "Field rep" }, { role: "Manager", description: "Sr manager" }],
+      trainer_notes: ["Step 1: ...", "Step 2: ..."],
+      debrief_questions: ["What happened?", "What will you try next?"]
+    };
+    await new Promise(r=>setTimeout(r,700));
+    setPack(simulated);
+    setShowForm(false);
+  }
+
+  return (
+    <div>
+      <Head>
+        <title>L&amp;D Studio AI</title>
+      </Head>
+      <Header />
+      <main className="p-4 max-w-md mx-auto">
+        <div className="space-y-3">
+          <Card title="Idea Generator" subtitle="Discover activities and exercises" icon="💡" onClick={handleCardClick}/>
+          <Card title="Learning Journey Builder" subtitle="Plan and structure a learning journey" icon="📘" onClick={()=>{}}/>
+          <Card title="Content Inspiration Hub" subtitle="Find resources to enhance content" icon="🔎" onClick={()=>{}}/>
+          <Card title="Strategist Mode" subtitle="Guide for organizations" icon="🧭" onClick={()=>{}}/>
+        </div>
+
+        {showForm && <div className="mt-4 card"><IdeaForm onSubmit={handleGenerate}/></div>}
+
+        {pack && <ActivityPack data={pack} />}
+      </main>
+    </div>
+  );
+}