Merge pull request #34 from willwearing/feat/landing-page-docs-seo

feat: agent-first landing page, docs, SEO

Author: willwearing

apps/web/next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  transpilePackages: ["@graspful/shared"],
+  transpilePackages: ["@niche-audio-prep/shared"],
 };
 
 export default nextConfig;

apps/web/package.json

@@ -1,51 +1,34 @@
 {
-  "name": "@graspful/web",
+  "name": "@niche-audio-prep/web",
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3001 --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint",
-    "test": "bun x vitest run",
-    "test:watch": "bun x vitest",
-    "test:e2e": "bun x playwright test",
-    "test:e2e:list": "bun x playwright test --list"
+    "lint": "eslint"
   },
   "dependencies": {
     "@base-ui/react": "^1.2.0",
-    "@supabase/ssr": "^0.9.0",
-    "@supabase/supabase-js": "^2.99.0",
-    "@xyflow/react": "^12.10.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.577.0",
     "next": "16.1.6",
-    "posthog-js": "^1.360.0",
-    "posthog-node": "^5.28.0",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "recharts": "^3.8.0",
     "shadcn": "^4.0.2",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.58.2",
     "@tailwindcss/postcss": "^4",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@vitejs/plugin-react": "^5.1.4",
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
-    "fake-indexeddb": "^6.2.5",
-    "jsdom": "^28.1.0",
     "tailwindcss": "^4",
-    "typescript": "^5",
-    "vitest": "^4.0.18"
+    "typescript": "^5"
   },
   "ignoreScripts": [
     "sharp",

apps/web/public/llms.txt

@@ -2,12 +2,21 @@
 
 > Graspful is the fastest way to create adaptive learning courses. Define a course as YAML, import it via CLI or MCP, and get a live product with a landing page, knowledge graph, spaced repetition, and billing — in minutes.
 
+## Links
+
+- Website: https://graspful.com
+- AI Agents: https://graspful.com/agents
+- Documentation: https://graspful.com/docs
+- Quickstart: https://graspful.com/docs/quickstart
+- Pricing: https://graspful.com/pricing
+- Sign Up: https://graspful.com/sign-up
+
 ## Getting Started
 
-- [CLI Quickstart](https://graspful.com/docs/cli-quickstart): Install and create your first course
-- [Course YAML Schema](https://graspful.com/docs/course-yaml-schema): Full reference for course YAML format
-- [Brand YAML Schema](https://graspful.com/docs/brand-yaml-schema): Landing page, theme, pricing, SEO
-- [Content Authoring Guide](https://graspful.com/docs/adding-a-course): Step-by-step course creation workflow
+- [Quickstart](https://graspful.com/docs/quickstart): Install and create your first course
+- [Course YAML Schema](https://graspful.com/docs/course-schema): Full reference for course YAML format
+- [Brand YAML Schema](https://graspful.com/docs/brand-schema): Landing page, theme, pricing, SEO
+- [MCP Server](https://graspful.com/docs/mcp): Set up MCP for Claude Code, Cursor, Codex
 
 ## Agent Instructions
 

apps/web/src/__tests__/components/lesson-flow.test.tsx

@@ -135,7 +135,7 @@ describe("LessonFlow", () => {
     fireEvent.click(screen.getByRole("button", { name: /continue/i }));
     fireEvent.click(screen.getByRole("button", { name: /continue/i }));
 
-    fireEvent.click(screen.getByRole("button", { name: "Heat" }));
+    fireEvent.click(screen.getByRole("radio", { name: "Heat" }));
     fireEvent.click(screen.getByRole("button", { name: /submit answer/i }));
     await waitFor(() => {
       expect(screen.getByText("Practice complete")).toBeTruthy();
@@ -154,7 +154,7 @@ describe("LessonFlow", () => {
     // KP1: instruction -> worked example -> practice -> answer -> continue
     fireEvent.click(screen.getByRole("button", { name: /continue/i }));
     fireEvent.click(screen.getByRole("button", { name: /continue/i }));
-    fireEvent.click(screen.getByRole("button", { name: "Heat" }));
+    fireEvent.click(screen.getByRole("radio", { name: "Heat" }));
     fireEvent.click(screen.getByRole("button", { name: /submit answer/i }));
     await waitFor(() => {
       expect(screen.getByText("Practice complete")).toBeTruthy();
@@ -164,7 +164,7 @@ describe("LessonFlow", () => {
     // KP2: instruction -> worked example -> practice -> answer
     fireEvent.click(screen.getByRole("button", { name: /continue/i }));
     fireEvent.click(screen.getByRole("button", { name: /continue/i }));
-    fireEvent.click(screen.getByRole("button", { name: /all surfaces igniting in a room/i }));
+    fireEvent.click(screen.getByRole("radio", { name: /all surfaces igniting in a room/i }));
     fireEvent.click(screen.getByRole("button", { name: /submit answer/i }));
     await waitFor(() => {
       expect(screen.getByRole("button", { name: /complete lesson/i })).toBeTruthy();
@@ -182,7 +182,7 @@ describe("LessonFlow", () => {
     // KP1: instruction -> worked example -> practice -> answer -> continue
     fireEvent.click(screen.getByRole("button", { name: /continue/i }));
     fireEvent.click(screen.getByRole("button", { name: /continue/i }));
-    fireEvent.click(screen.getByRole("button", { name: "Heat" }));
+    fireEvent.click(screen.getByRole("radio", { name: "Heat" }));
     fireEvent.click(screen.getByRole("button", { name: /submit answer/i }));
     await waitFor(() => {
       expect(screen.getByText("Practice complete")).toBeTruthy();
@@ -192,7 +192,7 @@ describe("LessonFlow", () => {
     // KP2: instruction -> worked example -> practice -> answer -> complete
     fireEvent.click(screen.getByRole("button", { name: /continue/i }));
     fireEvent.click(screen.getByRole("button", { name: /continue/i }));
-    fireEvent.click(screen.getByRole("button", { name: /all surfaces igniting in a room/i }));
+    fireEvent.click(screen.getByRole("radio", { name: /all surfaces igniting in a room/i }));
     fireEvent.click(screen.getByRole("button", { name: /submit answer/i }));
     await waitFor(() => {
       expect(screen.getByRole("button", { name: /complete lesson/i })).toBeTruthy();

apps/web/src/app/(app)/academy/[academyId]/diagnostic/page.tsx

@@ -37,7 +37,7 @@ export default async function AcademyDiagnosticPage({
   let startData: any = null;
   let errorMessage: string | null = null;
   try {
-    startData = await apiFetch<any>(`${basePath}/diagnostic/start`);
+    startData = await apiFetch<any>(`${basePath}/diagnostic/start`, { method: 'POST' });
   } catch (err) {
     if (err instanceof ApiError && err.statusCode === 400) {
       errorMessage = "This academy doesn't have diagnostic content yet. Check back soon.";

apps/web/src/app/(app)/academy/[academyId]/page.tsx

@@ -153,13 +153,15 @@ export default async function AcademyPage({
       ) : null}
 
       {/* Knowledge graph */}
-      <div className="mb-8">
-        <KnowledgeGraphSection
-          orgSlug={brand.orgSlug}
-          courseId={courses[0]?.id ?? ""}
-          academyId={academyId}
-        />
-      </div>
+      {courses[0]?.id && (
+        <div className="mb-8">
+          <KnowledgeGraphSection
+            orgSlug={brand.orgSlug}
+            courseId={courses[0].id}
+            academyId={academyId}
+          />
+        </div>
+      )}
 
       <h2 className="mb-4 text-xl font-semibold text-foreground">Courses</h2>
 
@@ -179,7 +181,6 @@ export default async function AcademyPage({
                 href={getCourseBrowseHref(course.id)}
                 name={course.name}
                 description={course.description}
-                orgId={course.orgId}
                 completionPercent={courseProfile?.completionPercent ?? 0}
                 totalConcepts={courseProfile?.totalConcepts ?? 0}
                 mastered={courseProfile?.mastered ?? 0}

apps/web/src/app/(app)/dashboard/page.tsx

@@ -262,7 +262,6 @@ export default async function DashboardPage() {
                 courseId={course.id}
                 name={course.name}
                 description={course.description}
-                orgId={course.orgId}
                 completionPercent={profile?.completionPercent ?? 0}
                 totalConcepts={profile?.totalConcepts ?? 0}
                 mastered={profile?.mastered ?? 0}

apps/web/src/app/(app)/diagnostic/[courseId]/page.tsx

@@ -38,7 +38,7 @@ export default async function DiagnosticPage({
   let startData: any = null;
   let errorMessage: string | null = null;
   try {
-    startData = await apiFetch<any>(`${basePath}/diagnostic/start`);
+    startData = await apiFetch<any>(`${basePath}/diagnostic/start`, { method: 'POST' });
   } catch (err) {
     if (err instanceof ApiError && err.statusCode === 400) {
       errorMessage = "This course doesn't have diagnostic content yet. Check back soon.";

apps/web/src/app/(app)/study/[courseId]/loading.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 export default function StudyLoading() {
   return (
-    <div className="mx-auto max-w-4xl px-4 py-8 md:px-8 flex items-center justify-center py-12">
+    <div className="mx-auto max-w-4xl px-4 md:px-8 flex items-center justify-center py-12">
       <Skeleton className="h-6 w-48" />
     </div>
   );

apps/web/src/app/(app)/study/[courseId]/quiz/page.tsx

@@ -22,10 +22,15 @@ export default async function QuizPage({
   const brand = await resolvePageBrand();
   const orgSlug = brand.orgSlug;
 
-  const quizData = await apiFetch<any>(
-    `/orgs/${orgSlug}/courses/${courseId}/quizzes/generate`,
-    { method: "POST" }
-  );
+  let quizData: any;
+  try {
+    quizData = await apiFetch<any>(
+      `/orgs/${orgSlug}/courses/${courseId}/quizzes/generate`,
+      { method: "POST" }
+    );
+  } catch {
+    redirect(`/study/${courseId}`);
+  }
 
   return (
     <div className="mx-auto max-w-3xl px-4 py-8 md:px-8">