# Project Context: Acme Corporate Website

## Tech Stack
- Frontend: Next.js 14 (App Router), React 18, TypeScript
- Styling: Tailwind CSS, Shadcn UI components
- State & Data: React Query, Zustand (for global UI state)
- Database/CMS: Supabase (PostgreSQL), Sanity CMS

## Core Commands
- Install dependencies: `npm install`
- Start dev server: `npm run dev` (Runs on http://localhost:3000)
- Build for production: `npm run build`
- Run linting: `npm run lint`
- Run type check: `npm run type-check`
- Execute tests: `npm test` or `npm run test:watch`

## Coding Guidelines & Standards

### Architecture & Directory Structure
- All page routes live inside `src/app/` using the App Router convention.
- Shared global UI components live in `src/components/ui/`.
- Feature-specific components live in `src/components/features/[feature-name]/`.
- Business logic and hooks live in `src/hooks/` and API calls in `src/lib/api/`.

### Code Style Preferences
- **TypeScript:** Strict mode is enabled. Never use `any`. Always explicitly type function parameters and return values.
- **Components:** Prefer functional components with arrow functions. Use named exports instead of default exports (except for Next.js page/layout files).
- **Styling:** Use utility classes from Tailwind CSS. Avoid arbitrary values; stick to the defined Tailwind theme config. Use the `cn()` utility function for merging conditional classes.
- **State Management:** Keep state as local as possible. Do not lift state to Zustand unless it is shared globally across multiple distinct pages.

### Error Handling & Data Fetching
- Wrap all async API operations in robust try/catch blocks.
- Use Next.js `loading.tsx` and `error.tsx` file conventions for route-level fallback states.
- For client-side fetching, use `react-query` hooks with proper cache invalidation keys.

## Current Focus & Active Goals
- Migrating old components from the `legacy/` folder into `src/components/features/`.
- Prioritizing performance: Ensure all new landing page components utilize Next.js Server Components by default. Only add `'use client'` when interactivity is strictly required.
