Route Groups for Layout Organization

// Folder structure with route groups:
// app/
//   (marketing)/
//     layout.tsx    <- Marketing layout (hero, CTA)
//     page.tsx      <- / (home)
//     about/page.tsx <- /about
//     pricing/page.tsx <- /pricing
//   (dashboard)/
//     layout.tsx    <- Dashboard layout (sidebar, nav)
//     dashboard/page.tsx <- /dashboard
//     settings/page.tsx  <- /settings
//   (auth)/
//     layout.tsx    <- Minimal auth layout
//     login/page.tsx <- /login
//     register/page.tsx <- /register

// app/(marketing)/layout.tsx
import type { ReactNode } from 'react';
import Link from 'next/link';

export default function MarketingLayout({ children }: { children: ReactNode }) {
  return (
    <div className="min-h-screen">
      <header className="border-b border-white/10 px-6 py-4">
        <nav className="max-w-6xl mx-auto flex items-center justify-between">
          <Link href="/" className="text-xl font-bold text-white">Brand</Link>
          <div className="flex gap-6 text-gray-400">
            <Link href="/about" className="hover:text-white transition-colors">About</Link>
            <Link href="/pricing" className="hover:text-white transition-colors">Pricing</Link>
            <Link
              href="/login"
              className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-500"
            >
              Sign In
            </Link>
          </div>
        </nav>
      </header>
      <main>{children}</main>
      <footer className="border-t border-white/10 px-6 py-8 text-center text-gray-500">
        &copy; 2024 Brand. All rights reserved.
      </footer>
    </div>
  );
}

// app/(dashboard)/layout.tsx
// import type { ReactNode } from 'react';
// const navItems = [
//   { href: '/dashboard', label: 'Overview', icon: 'Home' },
//   { href: '/settings', label: 'Settings', icon: 'Cog' },
// ];
// export default function DashboardLayout({ children }: { children: ReactNode }) {
//   return (
//     <div className="flex min-h-screen">
//       <aside className="w-64 bg-[#111] border-r border-white/10 p-4">
//         <nav className="space-y-1">
//           {navItems.map(item => (
//             <Link key={item.href} href={item.href}
//               className="block px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/5">
//               {item.label}
//             </Link>
//           ))}
//         </nav>
//       </aside>
//       <main className="flex-1 p-6">{children}</main>
//     </div>
//   );
// }