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.

app/components/Product/ProductCard.vue

@@ -96,7 +96,7 @@ const formattedPrice = computed(() => {
         </div>
 
         <!-- CTA Button -->
-        <NuxtLink :to="productId ? `/produkte/${productId}` : '#'"
+        <NuxtLink :to="productId ? `/products/${productId}` : '#'"
           class="group/btn relative overflow-hidden rounded-xl bg-gradient-button bg-size-300 bg-left px-6 py-3 font-bold text-white shadow-lg transition-all duration-300 hover:bg-right hover:shadow-2xl active:scale-95">
           <span class="relative z-10">Details</span>
           <div