# CRUSH.md - Healthy Oil Project Guide

## Development Commands
- `npm run dev` - Start development server on port 3000
- `npm run build` - Build for production (`tsc -b && vite build`)
- `npm run lint` - Run ESLint on entire codebase
- `npm run preview` - Preview production build on port 3000

## Code Style Guidelines

### File Naming & Structure
- Components: lowercase filenames (header.tsx, hero1.tsx, oil_info.tsx)
- UI components: `/src/components/ui/` directory
- Use function declarations for components, not arrow functions

### Import Conventions
```typescript
// Chakra UI imports (named, grouped)
import { Box, Flex, Image } from '@chakra-ui/react';

// TanStack Router imports
import { createRouter, createRootRoute, createRoute } from '@tanstack/react-router';
import { Outlet, Link } from '@tanstack/react-router';

// Local imports (default preferred)
import Header from './components/header';
```

### Component Pattern
```typescript
function ComponentName() {
    return (
        <Box>
            {/* JSX content */}
        </Box>
    );
}

export default ComponentName;
```

### Routing Pattern
```typescript
// Create routes in src/router.tsx
const route = createRoute({
  getParentRoute: () => rootRoute,
  path: '/example',
  component: ExampleComponent,
});

// Use <Outlet /> for nested routes
// Use <Link to="/example"> for navigation
```

### TypeScript & Configuration
- Strict mode enabled with `noUnusedLocals`, `noUnusedParameters`
- Path aliases available: `@/*` → `./src/*`
- Use Chakra UI props for responsive design
- Framer Motion for animations (`motion()` wrapper pattern)
- TanStack Router for navigation and routing

### Styling Approach
- Primary: Chakra UI props and components
- External: colors.tsx for color system, fonts.css for typography
- Responsive: `useBreakpointValue()` hook for breakpoints