Add product detail and listing pages with API integration

- Created a new product detail page to display individual product information, including images, descriptions, and pricing.
- Implemented a product listing page to showcase all available products using the ProductCard and ProductGrid components.
- Added API endpoints for fetching product data, ensuring only active products are returned.
- Introduced a database seed script to populate the database with initial mock product data for development and testing.
- Updated settings to include new database seeding command and adjusted routing for product links.

.claude/settings.local.json

@@ -61,7 +61,8 @@
       "WebFetch(domain:cidaas.github.io)",
       "Bash(node check-user.mjs:*)",
       "Bash(xargs kill:*)",
-      "mcp__playwright__browser_resize"
+      "mcp__playwright__browser_resize",
+      "Bash(pnpm db:seed:*)"
     ],
     "deny": [],
     "ask": []