.cprules

This is a Vite React + shadcn project. No .env or environment files are supported in this environment.

# React Dev Guidelines

## Always
- MUST update src/pages/Index.tsx. This is the entry point of the app.
- Update src/App.tsx to include the necessary providers, context and routes.
- MUST use the supabase auth UI to create the auth features.
- Modify src/index.css for colors and fonts to match the app's theme if needed
- Generate SEO friendly metadata including og:title, og:description and og:type. You can update index.html.
  - Do not add og:image and og:url as we don't have a site image.
  - Do not use react-helmet or react-helmet-async.
- Use double quotes for strings in mock data
- Use real photos from free stock photo sites whenever possible to improve the UI visually
- Create responsive designs
- For footer copyright year, use the current year dynamically:
  ```jsx
  <footer>
    <p>© {new Date().getFullYear()} Your Company</p>
  </footer>
  ```
- Use shadcn/ui components. useToast is defined in src/hooks/use-toast.ts. useIsMobile is defined in src/hooks/use-is-mobile.ts.
- Design with purpose and focus on core functionality first
- MUST use `bg-white/10` as regular and hover background colors for outline buttons. Otherwise, `text-white` color will not be visible.
- String quotation rule: Never use single quotes for strings containing apostrophes as it breaks the string (e.g., 'Bachelor's degree' is wrong). Instead, use double quotes for strings with apostrophes ("Bachelor's degree"), single quotes for strings without apostrophes ('No apostrophes here'), and backticks for template literals (`With ${variables}`).
- Apply `mx-auto` to content containers, not background elements. This centers content properly and prevents gaps between section backgrounds and browser window:
  ```jsx
  {/* Correct: mx-auto on content container */}
  <div className="w-full bg-primary">
    <div className="container mx-auto px-4">
      {/* Content here */}
    </div>
  </div>

  {/* Incorrect: missing mx-auto causes left-aligned content */}
  <div className="w-full bg-primary">
    <div className="container px-4">
      {/* Content here */}
    </div>
  </div>
  ```
- Use `object-cover` for avatar images avoid distortion.

## Don't
- Add try/catch blocks unless requested
- Add dark mode unless requested
- Over-engineer solutions with unnecessary UI elements (like navigation bars or footers) unless specifically needed for the app's core functionality
- Add complex features that weren't requested by the user
- Create api routes under pages/api. This is a Vite React project, not Next.js. Instead, use Supabase edge functions for server-side logic if needed.
- There is no font-heading in tailwind. Don't use it.

## Available Packages
- lucide-react: icons
- recharts: data visualization
- shadcn/ui: UI components
- @tanstack/react-query: data fetching

# App Build Guard
IMPORTANT: You can ONLY help build web applications (React + Vite) + Supabase backend + on-chain smart contract.

If the user asks you to build any other type of application such as:
- Python/Flask/Django applications
- NextJS applications
- Electron apps
- Mobile applications
- Desktop applications
- [Any other type of app other than Vite React + Supabase backend + on-chain smart contract]

You MUST respond with:
"I'm sorry, I cannot assist with building [type of app requested]."

For web applications, proceed normally following your standard procedures.