Organize app using Next.js route groups

app/(dev)/components-preview/page.tsx

@@ -5,7 +5,7 @@ import RuleCard from "../components/cards/RuleCard";
 import Chip from "../components/controls/Chip";
 import MultiSelect from "../components/controls/MultiSelect";
 import Image from "next/image";
-import { getAssetPath } from "../../lib/assetUtils";
+import { getAssetPath } from "../../../lib/assetUtils";
 
 interface ChipData {
   id: string;

app/(marketing)/blog/[slug]/page.tsx

@@ -5,16 +5,16 @@ import {
   getBlogPostBySlug,
   getAllBlogPosts as getAllPosts,
   type BlogPost,
-} from "../../../lib/content";
-import { logger } from "../../../lib/logger";
-import ContentBanner from "../../components/sections/ContentBanner";
-import AskOrganizer from "../../components/sections/AskOrganizer";
-import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
+} from "../../../../lib/content";
+import { logger } from "../../../../lib/logger";
+import ContentBanner from "../../../components/sections/ContentBanner";
+import AskOrganizer from "../../../components/sections/AskOrganizer";
+import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import "../blog.css";
 
 // Code split RelatedArticles - blog-specific, below the fold
 const RelatedArticles = dynamic(
-  () => import("../../components/sections/RelatedArticles"),
+  () => import("../../../components/sections/RelatedArticles"),
   {
     loading: () => (
       <section className="py-[var(--spacing-scale-032)] min-h-[400px]" />

app/(marketing)/blog/page.tsx

@@ -1,5 +1,5 @@
-import { getAllBlogPosts } from "../../lib/content";
-import ContentThumbnailTemplate from "../components/content/ContentThumbnailTemplate";
+import { getAllBlogPosts } from "../../../lib/content";
+import ContentThumbnailTemplate from "../../../components/content/ContentThumbnailTemplate";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {

app/(marketing)/learn/page.tsx

@@ -1,9 +1,9 @@
-import messages from "../../messages/en/index";
-import { getTranslation } from "../../lib/i18n/getTranslation";
-import ContentThumbnailTemplate from "../components/content/ContentThumbnailTemplate";
-import ContentLockup from "../components/type/ContentLockup";
-import AskOrganizer from "../components/sections/AskOrganizer";
-import { getAllBlogPosts } from "../../lib/content";
+import messages from "../../../messages/en/index";
+import { getTranslation } from "../../../lib/i18n/getTranslation";
+import ContentThumbnailTemplate from "../../../components/content/ContentThumbnailTemplate";
+import ContentLockup from "../../../components/type/ContentLockup";
+import AskOrganizer from "../../../components/sections/AskOrganizer";
+import { getAllBlogPosts } from "../../../lib/content";
 
 export default function LearnPage() {
   // Get real blog posts from the content system

app/(marketing)/page.tsx

@@ -1,39 +1,39 @@
 import dynamic from "next/dynamic";
-import messages from "../messages/en/index";
-import { getTranslation } from "../lib/i18n/getTranslation";
-import HeroBanner from "./components/sections/HeroBanner";
-import AskOrganizer from "./components/sections/AskOrganizer";
+import messages from "../../messages/en/index";
+import { getTranslation } from "../../lib/i18n/getTranslation";
+import HeroBanner from "../components/sections/HeroBanner";
+import AskOrganizer from "../components/sections/AskOrganizer";
 
 // Code split below-the-fold components to reduce initial bundle size
-const LogoWall = dynamic(() => import("./components/sections/LogoWall"), {
+const LogoWall = dynamic(() => import("../components/sections/LogoWall"), {
   loading: () => (
     <section className="py-[var(--spacing-scale-032)] min-h-[200px]" />
   ),
   ssr: true,
 });
 
-const NumberedCards = dynamic(() => import("./components/sections/NumberedCards"), {
+const NumberedCards = dynamic(() => import("../components/sections/NumberedCards"), {
   loading: () => (
     <section className="py-[var(--spacing-scale-032)] min-h-[300px]" />
   ),
   ssr: true,
 });
 
-const RuleStack = dynamic(() => import("./components/sections/RuleStack"), {
+const RuleStack = dynamic(() => import("../components/sections/RuleStack"), {
   loading: () => (
     <section className="py-[var(--spacing-scale-032)] min-h-[400px]" />
   ),
   ssr: true,
 });
 
-const FeatureGrid = dynamic(() => import("./components/sections/FeatureGrid"), {
+const FeatureGrid = dynamic(() => import("../components/sections/FeatureGrid"), {
   loading: () => (
     <section className="py-[var(--spacing-scale-032)] min-h-[500px]" />
   ),
   ssr: true,
 });
 
-const QuoteBlock = dynamic(() => import("./components/sections/QuoteBlock"), {
+const QuoteBlock = dynamic(() => import("../components/sections/QuoteBlock"), {
   loading: () => (
     <section className="py-[var(--spacing-scale-032)] min-h-[300px]" />
   ),

tests/pages/blog.test.jsx

@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { screen, waitFor } from "@testing-library/react";
 import { renderWithProviders as render } from "../utils/test-utils";
 import React from "react";
-import BlogPostPage from "../../app/blog/[slug]/page";
+import BlogPostPage from "../../app/(marketing)/blog/[slug]/page";
 
 // Mock Next.js components
 vi.mock("next/navigation", () => ({

tests/pages/home.test.jsx

@@ -4,7 +4,7 @@ import {
   screen,
   waitFor,
 } from "../utils/test-utils";
-import Page from "../../app/page";
+import Page from "../../app/(marketing)/page";
 
 describe("Page", () => {
   test("renders all main sections", async () => {

tests/pages/page-flow.test.jsx

@@ -7,7 +7,7 @@ import {
 import userEvent from "@testing-library/user-event";
 import { vi, describe, test, expect, afterEach } from "vitest";
 import React from "react";
-import Page from "../../app/page";
+import Page from "../../app/(marketing)/page";
 
 // Mock next/dynamic to return components synchronously in tests
 vi.mock("next/dynamic", () => {

tests/pages/user-journey.test.jsx

@@ -7,7 +7,7 @@ import {
 import userEvent from "@testing-library/user-event";
 import { vi, describe, test, expect, afterEach } from "vitest";
 import React from "react";
-import Page from "../../app/page";
+import Page from "../../app/(marketing)/page";
 
 // Mock next/dynamic to return components synchronously in tests
 vi.mock("next/dynamic", () => {