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.

server/api/products/index.get.ts

@@ -0,0 +1,29 @@
+/**
+ * GET /api/products
+ *
+ * Returns a list of all active products available for purchase.
+ * Products are sorted by category and name.
+ */
+
+import { eq } from 'drizzle-orm'
+import { products } from '../../database/schema'
+
+export default defineEventHandler(async (event) => {
+  const db = useDatabase()
+
+  try {
+    // Fetch all active products
+    const allProducts = await db.query.products.findMany({
+      where: eq(products.active, true),
+      orderBy: (products, { asc }) => [asc(products.category), asc(products.name)],
+    })
+
+    return allProducts
+  } catch (error) {
+    console.error('Error fetching products:', error)
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Failed to fetch products',
+    })
+  }
+})