project setup with core files including configuration, package management, and basic structure. Added .gitignore, README, and various TypeScript types for CMS components. Implemented initial components and layouts for the application.

src/pages/[locale]/products/index.astro

@@ -0,0 +1,64 @@
+---
+// Locale-basierte Produktseite
+import Layout from "../../../layouts/Layout.astro";
+import Product from "../../../components/Product.astro";
+import { getProducts } from "../../../lib/graphql/queries.js";
+import { i18n } from "../../../lib/i18n/i18n.js";
+import type { Product as ProductType } from "../../../lib/types/product.js";
+
+const locale = Astro.params.locale || "de";
+i18n.setLocale(locale);
+
+let products: ProductType[] = [];
+try {
+  products = await getProducts(4);
+} catch (error) {
+  // Verbindungsfehler weniger störend behandeln
+  const isConnectionError =
+    error instanceof Error &&
+    (error.name === "ConnectionError" ||
+      error.message.includes("GraphQL-Server nicht erreichbar") ||
+      error.message.includes("ECONNREFUSED"));
+
+  if (isConnectionError) {
+    // In Development: Warnung ausgeben
+    if (import.meta.env.DEV) {
+      console.warn(
+        "GraphQL-Server nicht erreichbar. Verwende leere Produktliste."
+      );
+      console.warn("Starte den Server mit: npm run mock:server");
+    }
+  } else {
+    console.error("Fehler beim Laden der Produkte:", error);
+  }
+  products = [];
+}
+
+const title = locale === "en" ? "Products" : "Produkte";
+---
+
+<Layout title={title} locale={locale}>
+  <main class="max-w-7xl mx-auto px-8 py-8">
+    <h1 class="text-4xl font-bold mb-8 text-gray-900">
+      {locale === "en" ? "Products" : "Produkte"}
+    </h1>
+
+    {
+      products.length === 0 ? (
+        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+          <p class="text-yellow-800">
+            {locale === "en"
+              ? "No products available. Make sure the GraphQL server is running."
+              : "Keine Produkte verfügbar. Stelle sicher, dass der GraphQL-Server läuft."}
+          </p>
+        </div>
+      ) : (
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+          {products.map((product) => (
+            <Product product={product} />
+          ))}
+        </div>
+      )
+    }
+  </main>
+</Layout>