rthomas98 htl-marcom .cursorrules file for JavaScript

# Workspace AI Rules for Hebert Thomas Law Project

## Whats been done:

- Added in the User Management and Role Management
- Added in the Permission Management
- Added in the Blog Management

## Project Structure
1. All React components must be `.jsx` files (not `.tsx`)
2. Components should be organized in subdirectories based on pages they belong to
3. Directory structure for components:
   ```
   resources/js/
   ├── Components/
   │   ├── Common/           # Shared components
   │   ├── Home/            # Home page components
   │   ├── About/           # About page components
   │   └── [PageName]/      # Other page-specific components
   ├── images/              # All images must be stored locally
   └── Layouts/             # Layout components
   ```

## Styling and Design
1. Colors:
   - Primary Dark: `cod-gray` (#141414)
   - Primary Light: `gallery` (#F0F0F0)
   - Accent: `pippin` (#FFE8E5)
   - Use color variants defined in tailwind.config.js

2. Typography:
   - Headings: Heebo font (`font-heading`)
     - Weights: 400, 500, 600, 700
   - Body: Poppins font (`font-sans`)
     - Weights: 300, 400, 500, 600, 700

3. Components:
   - Use @relume_io/relume-ui components
   - Convert all Relume components to .jsx format
   - Follow Delto.com design patterns for layout and spacing

## UI/UX Guidelines
1. Icons:
   - Use Lucide icons exclusively (https://lucide.dev/)
   - Import icons individually to minimize bundle size
   ```jsx
   import { IconName } from 'lucide-react'
   ```

2. Animations:
   - Use Motion.dev for all animations
   - Keep animations subtle and professional
   - Ensure animations enhance UX without being distracting

3. Component Library:
   - Primary: @relume_io/relume-ui
   - Styling: @relume_io/relume-tailwind
   - Convert all template code to JSX format


## Filament
- Installed Filament
- Remember to not change the styles of the filament components unless I ask that includes sidebar, navbar, etc.
- Please use Filament built in feature before trying anything else.
- Please use use JSONB instead of JSON for PostgreSQL compatibility

## Best Practices
1. Image Handling:
   - All images must be stored in resources/js/images/
   - Use appropriate image formats (WebP preferred)
   - Implement lazy loading for images
   - Optimize images for web use

2. Component Structure:
   ```jsx
   import React from 'react'
   import { IconName } from 'lucide-react'
   import { motion } from 'framer-motion'
   
   export default function ComponentName({ props }) {
     return (
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         className="font-sans"
       >
         {/* Component content */}
       </motion.div>
     )
   }
   ```

3. Responsive Design:
   - Mobile-first approach
   - Use Tailwind breakpoints consistently
   - Test on multiple device sizes

## Development Rules
1. File Naming:
   - Use PascalCase for component files
   - Use kebab-case for image files
   - Use camelCase for utility files

2. Code Organization:
   - Group related components in page-specific folders
   - Keep components small and focused
   - Extract reusable logic into custom hooks

3. Performance:
   - Implement code splitting where appropriate
   - Optimize bundle size
   - Use React.lazy() for route-based code splitting

## Brand Guidelines
1. Visual Style:
   - Clean, modern, and professional
   - Consistent with Delto.com aesthetic
   - Emphasis on whitespace and typography
   - Subtle animations for interactions

2. Content:
   - Professional legal tone
   - Clear hierarchy of information
   - Accessible language
   - Strong calls-to-action

## Fixing Errors
- If you see an error, please fix it.
- If you see a warning, please fix it.
- If you see a suggestion, please fix it.
- If you see a suggestion, please fix it.
- Please do not cghange something that is already working when I ask you to fix it.