Create src/app/page.tsx

src/app/page.tsx

@@ -0,0 +1,35 @@
+// src/app/page.tsx (Página principal do seu e-commerce)
+
+import { useGetProducts } from '@/hooks/useGetProducts';
+import { ProductCard } from '@/components/ProductCard';
+
+export default function Home() {
+  // 1. Chamamos o "Garçom Inteligente" (TanStack Query)
+  const { data: products, isLoading, isError, error } = useGetProducts();
+
+  // 2. ⚡ [PERFORMANCE/INP]: Tratamento de estados da UI (early returns)
+  if (isLoading) {
+    // Exibimos um skeleton loading ou um spinner enquanto espera.
+    // Isso é crucial para o LCP (Largest Contentful Paint).
+    return <p className="text-center mt-8 text-lg text-gray-500">Carregando produtos...</p>;
+  }
+
+  if (isError) {
+    // Tratamento de erro robusto. O erro é pego pelo Zod ou pela rede.
+    // Exibe a mensagem de erro para debug, mas em produção, exiba algo amigável.
+    return <p className="text-center mt-8 text-lg text-red-600">Erro ao carregar os produtos: {error.message}</p>;
+  }
+
+  // 3. Renderiza a lista de produtos (Vitrine)
+  return (
+    <main className="container mx-auto p-4">
+      <h1 className="text-3xl font-bold mb-6">Nossos Produtos</h1>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {products?.map((product) => (
+          // O key é importante para performance do React.
+          <ProductCard key={product.id} product={product} />
+        ))}
+      </div>
+    </main>
+  );
+}