feat(marketing): add About and Brand pages

[jackwatters45]

Summary

• Create /about route - simple blog-style page about LaxDB
• Create /brand route - brand guidelines page
• Add About link to navbar (desktop and mobile)

Test plan

• Visit http://localhost:3002/about
• Visit http://localhost:3002/brand
• Test responsive layout on mobile
• Toggle dark/light mode

🤖 Generated with Claude Code

[github-actions]

Code Review

Summary

This PR adds a comprehensive About page to the marketing site with hero section, mission statement, league coverage details, and call-to-action. The page follows the existing design system with fade animations, decorative elements, and responsive layouts.

Title Convention

✅ Title follows conventional commit format: feat(marketing): add About page (lowercase with proper scope)

Feedback

Strengths:

• Excellent component decomposition with focused, reusable functions (AboutHero, MissionSection, DataSection, etc.)
• Proper accessibility with ARIA labels (aria-label, aria-labelledby) and semantic HTML
• Consistent with existing design patterns (using FadeContainer, FadeDiv, FadeSpan from shared components)
• Good TypeScript typing with proper React component props
• Responsive design with Tailwind breakpoints (sm:, md:, xl:)
• Mobile menu properly handles both click and keyboard events (onClick, onKeyDown)
• SEO-friendly with proper meta tags in route head function

Potential Issues:

• Navbar mobile menu accessibility: The <li> element has click/keyboard handlers but is missing role="button" and tabIndex={0} to make it keyboard-navigable. Screen readers may not identify it as interactive.
• Hardcoded statistics: Values like "20+", "5,000+", "10,000+" are static. Consider if these should be dynamic or documented as estimates to avoid them becoming outdated.
• Generated route file: routeTree.gen.ts includes as any type assertion (line 56), though this appears to be auto-generated code from TanStack Router, so it's acceptable.

Code Quality:

• Clean separation of concerns with each section as its own component
• Proper use of TypeScript interfaces for component props
• No any types in authored code (only in generated file)
• Consistent formatting and naming conventions

Suggestions

1. Improve mobile menu accessibility (navbar.tsx:18-32):

   <li
     role="button"
     tabIndex={0}
     onClick={() => {
       setOpen(false);
     }}
     onKeyDown={(e) => {
       if (e.key === "Enter" || e.key === " ") {
         setOpen(false);
       }
     }}
   >
     <Link className="hover:underline" to="/about">
       About
     </Link>
   </li>

2. Consider extracting stats to constants (about.tsx:261-264):

   const LAXDB_STATS = {
     yearsOfData: "20+",
     playersTracked: "5,000+",
     gamesRecorded: "10,000+",
     leaguesCovered: "5"
   } as const;

   This makes it easier to update values in one place if they become outdated.

3. League data could be extracted (about.tsx:289-293):

   const LEAGUES = [
     { league: "PLL", description: "Premier Lacrosse League - Field lacrosse's top outdoor league" },
     { league: "NLL", description: "National Lacrosse League - Professional box lacrosse" },
     // ...
   ] as const;

   This would make the component more maintainable and testable.

Overall

Strong implementation that adheres to project standards. The code is well-structured, accessible, and maintains consistency with the existing codebase. The only critical suggestion is improving keyboard navigation for the mobile menu. The hardcoded statistics and league data are minor concerns that can be addressed in future iterations if needed.

Recommendation: Approve with minor suggestions

---

Auto-generated review by Claude

[github-actions]

Code Review

Summary

This PR adds an About page to the marketing site with content explaining LaxDB's mission, data coverage, and philosophy. It includes navigation updates to add the About link in both desktop and mobile views.

Title Convention

✅ Title follows conventional commit format correctly: feat(marketing): add About page (lowercase description, proper scope)

Feedback

Positive:

• Clean, simple prose-based content layout appropriate for an About page
• Proper SEO metadata included (title and description in head)
• Accessibility handled correctly in mobile nav with both onClick and onKeyDown handlers
• Internal navigation links to /wiki and /graph help with discoverability
• Follows TanStack Router file-based routing conventions

Inconsistency with PR Description:

• The PR summary mentions "FadeContainer animations" and "decorative vertical lines and diagonal stripe dividers" from the homepage design system, but the actual implementation uses basic prose styling (prose prose-neutral dark:prose-invert)
• The actual page is much simpler than described - no animations, no decorative elements
• This suggests either the PR description is outdated or the implementation was simplified

Minor Issues:

• Line 56 in routeTree.gen.ts has as any which violates the project's "Type safety is non-negotiable" rule from CLAUDE.md, but this is an auto-generated file so it's acceptable
• The navbar mobile menu items have repetitive event handlers across all list items - could be abstracted to reduce code duplication (though this is pre-existing pattern)

Suggestions

1. Align PR description with implementation: Update the PR body to match what was actually implemented (simple prose layout) or enhance the page to include the mentioned animations and design elements

2. Consider adding contact information: The page mentions "reach out" but doesn't provide a contact method or link

3. Test coverage: No tests included - consider adding basic route rendering test (though this may not be standard practice for marketing pages in this repo)

4. Consistency check: Verify the About page styling matches other marketing pages in dark mode

Overall

Good implementation of a straightforward About page. The code quality is solid with proper accessibility and SEO considerations. Main concern is the mismatch between the PR description and actual implementation - the description suggests a more elaborate design that wasn't delivered. Otherwise, this is ready to merge pending clarification on the intended design approach.

---

Auto-generated review by Claude

[github-actions]

 ## 🚀 Preview Deployed

 Your changes have been deployed to a preview environment:

 **🌐 Docs:** https://laxdb-docs-pr-126.jack-watters.workers.dev
 **🌐 Marketing:** https://laxdb-marketing-pr-126.jack-watters.workers.dev
 **🌐 Website:** https://laxdb-web-pr-126.jack-watters.workers.dev

 Built from commit 448e177

 ---
 <sub>🤖 This comment updates automatically with each push.</sub>

[github-actions]

Code Review

Summary

This PR adds an About page to the marketing site with navigation links in both desktop and mobile views. The page provides background on LaxDB's mission, data coverage, and open data philosophy using a prose-styled article layout.

Title Convention

✅ Title follows conventional commit format correctly: feat(marketing): add About page (lowercase, proper scope).

Feedback

• Navbar accessibility: Mobile menu item has good keyboard support with onKeyDown handling for Enter/Space keys
• SEO metadata: Proper meta tags included in route definition for title and description
• Consistent styling: Uses same prose classes as other content pages (prose prose-neutral dark:prose-invert)
• Internal linking: Good use of Link components to wiki and graph pages
• Generated file: routeTree.gen.ts is auto-generated (noted in file header), which is expected for TanStack Router

Suggestions

• Discrepancy between PR description and implementation: PR body mentions "FadeContainer animations", "decorative vertical lines", and "diagonal stripe dividers", but the diff shows a simple prose article without these elements. The actual implementation is more minimal than described.
• Missing animation: PR mentions following homepage design system with FadeContainer animations, but no animation components are visible in the diff
• Consider extracting content: For future maintainability, consider using MDX or a content management approach if the about page will need frequent updates
• Missing test verification: PR checklist mentions verifying animations, but no animations are present in the code

Overall

Clean, straightforward implementation of a static about page. The code quality is good with proper TypeScript types, accessibility considerations, and SEO metadata. However, there's a mismatch between the PR description (which describes a more elaborate page with animations and decorative elements) and the actual implementation (which is a simple prose article). The simpler implementation is perfectly functional, but the PR description should be updated to match what was actually built, or the implementation should be enhanced to match the description.

Recommendation: Approve with minor note to align PR description with actual implementation.

---

Auto-generated review by Claude

[github-actions]

Code Review

Summary

This PR adds an About page to the marketing package, along with a bonus Brand guidelines page. The About page provides context on LaxDB's mission, features, and open data philosophy. Navigation has been updated to include the About link in both desktop and mobile menus.

Title Convention

✅ Title follows conventional commit format correctly: feat(marketing): add About page - lowercase description with proper scope.

Feedback

• Strong content quality: The About page copy is well-written, clear, and effectively communicates LaxDB's purpose and mission
• Good UX patterns: The navbar implementation properly handles both desktop and mobile navigation with appropriate keyboard accessibility (onKeyDown handler for Enter/Space keys)
• Proper TanStack Router usage: File-based routing is used correctly with appropriate metadata (title, description) in the head function
• Consistent styling: Uses the same prose styling pattern as other marketing pages
• Type safety maintained: No any, !, or as Type violations (except in the auto-generated routeTree.gen.ts which is acceptable)

Suggestions

• Minor: Brand page scope creep: The PR title mentions "add About page" but also includes a /brand route. Consider either updating the PR description to mention both pages or moving the Brand page to a separate PR for cleaner git history. This is a minor point - having both is reasonable for this small addition.
• Accessibility consideration: The mobile menu <li> elements have keyboard handlers but are missing role="button" and tabIndex={0} attributes. While functional, adding these would make the accessibility semantics more explicit.
• Optional: Extract shared layout: Both about.tsx and brand.tsx use identical wrapper structure (main with same classes, article with prose classes). Could be extracted to a shared component if more similar pages are planned.

Overall

✅ Approved - This is clean, well-structured code that follows the project's conventions. The About page content is excellent and the implementation is solid. The navbar integration is done properly with good accessibility patterns. The auto-generated route tree updates are as expected. No blocking issues or security concerns.

---

Auto-generated review by Claude

[github-actions]

Code Review

Summary

This PR adds two new marketing pages (About and Brand) with redirect routes and navbar navigation. The About page describes LaxDB's mission to collect and preserve professional lacrosse statistics, while the Brand page provides guidelines for using the LaxDB name and logo.

Title Convention

✅ Title follows conventional commit format correctly: feat(marketing): add About and Brand pages (lowercase description with proper file name capitalization)

Feedback

• Clean redirect pattern: The route files use TanStack Router's beforeLoad with 301 redirects to the content system, which is a good approach for maintaining clean URLs while using the existing content infrastructure
• Accessibility improvement: The mobile menu navigation includes proper keyboard event handling (onKeyDown for Enter/Space keys) on the About link, which matches the existing pattern for other menu items
• Generated file included: The routeTree.gen.ts file is auto-generated by TanStack Router (as indicated by the header comments), which is expected and appropriate to include in the PR
• Content quality: Both MDX files are well-written, concise, and clearly communicate their purpose. The About page effectively links to other parts of the site (/wiki, /graph)
• Consistent styling: The navbar links use the same className patterns (text-foreground hover:underline) as existing navigation items

Suggestions

• Mobile menu consistency: The desktop About link was added, but verify that other existing desktop links also have the same keyboard accessibility pattern in the mobile menu. If not, this could be addressed in a follow-up PR for consistency
• MDX frontmatter: The published date is set to 2025-01-24. Consider whether this should be the actual merge date or if it's intentionally static
• Testing: The test plan in the PR description is thorough. Make sure to verify the 301 redirect behavior and that the content renders correctly at both /about and /content/about

Overall

This is a solid, straightforward PR that follows existing patterns well. The code is clean, properly typed, and integrates cleanly with the existing TanStack Router setup. The redirect approach is elegant and maintains URL flexibility. No security concerns, no type safety issues, and the implementation follows the project's architecture conventions.

Recommendation: Approve ✅

---

Auto-generated review by Claude

[github-actions]

Code Review

Summary

This PR adds two new static content pages to the marketing site: an About page describing LaxDB's mission and a Brand Guidelines page. Both pages use MDX content with TanStack Router, and the About page is added to the navigation menu.

Title Convention

✓ Title follows conventional commit format correctly: lowercase type feat, scope (marketing), and lowercase description. Good.

Feedback

• Consistent route patterns: Both about.tsx and brand.tsx follow the same structure as existing marketing routes, properly using TanStack Router's createFileRoute with loaders, components, and head metadata.
• Accessibility in navbar: The mobile menu's About link includes proper keyboard handling (onKeyDown for Enter/Space keys) and click handling, matching the pattern of other menu items.
• MDX frontmatter: Both MDX files have appropriate metadata (title, published date, description) that's used by the loader and SEO meta tags.
• Error handling: Both routes properly use notFound() when the content can't be found in the collection.
• SEO metadata: Each route includes appropriate page title and description meta tags in the head() function.
• Generated file: routeTree.gen.ts is auto-generated by TanStack Router and correctly reflects the new routes.

Suggestions

• Brand page visibility: The Brand page is created but not linked anywhere in the navigation. Consider adding it to the footer or making it discoverable from the About page.
• Content depth: The brand guidelines are quite minimal (logo, name, colors, usage). Consider whether this warrants its own page or if it could be a section within the About page, especially since it's not linked in navigation.
• Published dates: Both pages use 2025-01-24 as the published date. If this is a static date for tracking purposes, that's fine. If it should reflect actual publish time, consider whether these should be dynamic.
• Styling consistency: Both pages use identical layout and styling (max-w-screen-sm px-4 py-16 md:py-32 and prose-blog prose). If more static pages are planned, consider extracting a shared StaticPageLayout component to reduce duplication.

Overall

This is a clean, well-structured PR that follows project conventions and existing patterns. The code is type-safe, accessible, and properly integrated with the routing system. The only question is whether the Brand page should be made discoverable through navigation or merged with the About page content.

---

Auto-generated review by Claude

[github-actions]

Code Review

Summary

This PR adds two new static content pages to the marketing site: an About page describing LaxDB's mission and a Brand Guidelines page. The implementation uses MDX content with TanStack Router routes and updates the navbar to include an About link.

Title Convention

✅ Title follows conventional commit format correctly: feat(marketing): add About and Brand pages - lowercase description with proper scope.

Feedback

• Strong MDX content structure: The new pages collection in content-collections.ts properly mirrors the existing posts collection pattern with appropriate transforms (remarkGfm, rehypeSlug, rehypeAutolinkHeadings, rehypePrettyCode)
• Consistent routing pattern: Both route files (about.tsx, brand.tsx) follow identical structure with proper loader error handling via notFound(), SEO meta tags, and component composition
• Good accessibility: Mobile navbar menu includes proper keyboard navigation (onKeyDown for Enter/Space keys) alongside click handlers
• Type safety maintained: No use of any, !, or type assertions - aligns with project's strict type safety requirements
• Auto-generated routeTree: The routeTree.gen.ts changes are properly generated by TanStack Router

Suggestions

• DRY opportunity: The about.tsx and brand.tsx files share 95% identical code. Consider extracting a shared page component:

  // packages/marketing/src/components/page-layout.tsx
  function PageLayout({ slug }: { slug: string }) {
    const page = allPages.find((p) => p.slug === slug);
    if (!page) throw notFound();
    return (
      <main className="mx-auto max-w-screen-sm px-4 py-16 md:py-32">
        <article>
          <h1 className="font-serif text-2xl text-blog-fg italic">{page.title}</h1>
          <MDXContent code={page.mdx} className="prose-blog prose mt-8 max-w-none" />
        </article>
      </main>
    );
  }

  Then routes become:

  export const Route = createFileRoute("/about")({
    loader: () => allPages.find((p) => p.slug === "about") ?? throw notFound(),
    component: () => <PageLayout slug="about" />,
    head: () => ({ meta: [...] }),
  });

• Content refinement: The brand page content is minimal. Consider adding:
  • Logo download links (SVG, PNG variants)
  • Color hex codes for the neutral palette
  • Specific usage examples or restrictions
• Missing test in test plan: The PR body mentions testing dark/light mode toggle but doesn't verify the MDX content actually renders correctly (headings, paragraphs, links)

Overall

Clean, well-structured implementation that follows project conventions. The code is type-safe, accessible, and properly integrated with existing patterns. The only significant opportunity is reducing duplication between the two route files. The content provides good foundational information, though the brand page could be more comprehensive. Recommend merging with optional follow-up for DRY refactoring.

---

Auto-generated review by Claude