Redesign not-found and error states with clean black/white text

Replace red alert boxes, icons, borders, and buttons with simple
centered text for product/collection not-found, load-failure, and
empty states.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

components/shopify/collection-detail.tsx

@@ -9,7 +9,7 @@ const CollectionDetail: React.FC = () => {
   const params = useParams();
   const handle = params?.handle as string;
 
-  const { collection, loading, error, refetch } = useCollectionProducts(handle);
+  const { collection, loading, error } = useCollectionProducts(handle);
 
   // Format title from handle
   const formattedTitle = handle
@@ -42,26 +42,14 @@ const CollectionDetail: React.FC = () => {
   if (error) {
     return (
       <div className="pt-4 pb-16">
-        <div className="container mx-auto px-4 text-center">
-          <h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
-            {formattedTitle}
+        <div className="container mx-auto px-4 py-32 text-center">
+          <h2 className="text-2xl font-medium tracking-tight text-gray-900 font-heading mb-3">
+            Collection Not Found
           </h2>
-
-          <div className="bg-red-50 border border-red-200 rounded-md p-8 max-w-md mx-auto">
-            <i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i>
-            <h3 className="text-lg font-medium text-red-800 mb-2">
-              Failed to Load Collection
-            </h3>
-            <p className="text-red-600 mb-4">
-              {error}
-            </p>
-            <button
-              onClick={() => refetch()}
-              className="bg-red-600 text-white px-6 py-2 rounded-md hover:bg-red-700 transition-colors"
-            >
-              Try Again
-            </button>
-          </div>
+          <p className="text-gray-500 max-w-md mx-auto">
+            The collection you are looking for does not exist or is no longer
+            available.
+          </p>
         </div>
       </div>
     );
@@ -78,16 +66,13 @@ const CollectionDetail: React.FC = () => {
         </h2>
 
         {products.length === 0 ? (
-          <div className="text-center py-12">
-            <div className="bg-gray-50 border border-gray-200 rounded-md p-8 max-w-md mx-auto">
-              <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
-              <h3 className="text-lg font-medium text-gray-600 mb-2">
-                No Products in Collection
-              </h3>
-              <p className="text-gray-500">
-                This collection doesn&apos;t have any products yet.
-              </p>
-            </div>
+          <div className="text-center py-20">
+            <h3 className="text-lg font-medium text-gray-900 mb-2">
+              No Products in Collection
+            </h3>
+            <p className="text-gray-500">
+              This collection doesn&apos;t have any products yet.
+            </p>
           </div>
         ) : (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">

components/shopify/collections.tsx

@@ -5,7 +5,7 @@ import { useCollections } from '@/hooks/use-shopify-collections';
 import CollectionCard from './collection-card';
 
 const Collections: React.FC = () => {
-  const { collections, loading, error, refetch } = useCollections(20);
+  const { collections, loading, error } = useCollections(20);
 
   if (loading) {
     return (
@@ -32,26 +32,14 @@ const Collections: React.FC = () => {
   if (error) {
     return (
       <div className="py-16">
-        <div className="container mx-auto px-4 text-center">
-          <h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
-            Our Collections
+        <div className="container mx-auto px-4 py-24 text-center">
+          <h2 className="text-2xl font-medium tracking-tight text-gray-900 font-heading mb-3">
+            Collections Unavailable
           </h2>
-
-          <div className="bg-red-50 border border-red-200 rounded-md p-8 max-w-md mx-auto">
-            <i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i>
-            <h3 className="text-lg font-medium text-red-800 mb-2">
-              Failed to Load Collections
-            </h3>
-            <p className="text-red-600 mb-4">
-              {error}
-            </p>
-            <button
-              onClick={() => refetch()}
-              className="bg-red-600 text-white px-6 py-2 rounded-md hover:bg-red-700 transition-colors"
-            >
-              Try Again
-            </button>
-          </div>
+          <p className="text-gray-500 max-w-md mx-auto">
+            We couldn&apos;t load any collections right now. Please try again
+            later.
+          </p>
         </div>
       </div>
     );
@@ -65,9 +53,8 @@ const Collections: React.FC = () => {
             Our Collections
           </h2>
 
-          <div className="bg-gray-50 border border-gray-200 rounded-md p-8 max-w-md mx-auto">
-            <i className="ri-folder-line text-4xl text-gray-400 mb-4"></i>
-            <h3 className="text-lg font-medium text-gray-600 mb-2">
+          <div className="max-w-md mx-auto py-12">
+            <h3 className="text-lg font-medium text-gray-900 mb-2">
               No Collections Found
             </h3>
             <p className="text-gray-500">

components/shopify/product-detail/index.tsx

@@ -8,9 +8,6 @@ import { useShopifyCart } from '@/hooks/use-shopify-cart';
 import ProductDetailGallery from './product-detail-gallery';
 import ProductDetailInfo from './product-detail-info';
 import ProductRecommendations from '../product-recommendations';
-import { Button } from '@/components/ui/button';
-import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
-import { RiErrorWarningLine } from '@remixicon/react';
 import {
   Breadcrumb,
   BreadcrumbList,
@@ -128,22 +125,14 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ handle: handleProp }) =>
 
   if (error || !product) {
     return (
-      <div className="container mx-auto px-4 py-8 text-center">
-        <Alert variant="destructive" className="max-w-md mx-auto p-8">
-          <RiErrorWarningLine size={36} />
-          <AlertTitle className="text-lg font-medium">
-            Product Not Found
-          </AlertTitle>
-          <AlertDescription className="mb-4">
-            {error || 'The requested product could not be found.'}
-          </AlertDescription>
-          <Button
-            onClick={() => window.history.back()}
-            variant="destructive"
-          >
-            Go Back
-          </Button>
-        </Alert>
+      <div className="container mx-auto px-4 py-32 text-center">
+        <h2 className="text-2xl font-medium tracking-tight text-gray-900 font-heading mb-3">
+          Product Not Found
+        </h2>
+        <p className="text-gray-500 max-w-md mx-auto">
+          The product you are looking for does not exist or is no longer
+          available.
+        </p>
       </div>
     );
   }

components/shopify/products.tsx

@@ -142,26 +142,14 @@ const Products: React.FC<ProductsProps> = ({
   if (error) {
     return (
       <div className="py-16">
-        <div className="container mx-auto px-4 text-center">
-          <h2 className="text-4xl font-medium tracking-tight mb-8 text-gray-900 font-heading">
-            {title}
+        <div className="container mx-auto px-4 py-24 text-center">
+          <h2 className="text-2xl font-medium tracking-tight text-gray-900 font-heading mb-3">
+            Products Unavailable
           </h2>
-          
-          <div className="bg-red-50 border border-red-200 rounded-md p-8 max-w-md mx-auto">
-            <i className="ri-error-warning-line text-4xl text-red-500 mb-4 block"></i>
-            <h3 className="text-lg font-medium text-red-800 mb-2">
-              Failed to Load Products
-            </h3>
-            <p className="text-red-600 mb-4">
-              {error}
-            </p>
-            <Button
-              onClick={() => fetchProducts()}
-              variant="destructive"
-            >
-              Try Again
-            </Button>
-          </div>
+          <p className="text-gray-500 max-w-md mx-auto">
+            We couldn&apos;t load any products right now. Please try again
+            later.
+          </p>
         </div>
       </div>
     );
@@ -175,9 +163,8 @@ const Products: React.FC<ProductsProps> = ({
             {title}
           </h2>
           
-          <div className="bg-gray-50 border border-gray-200 rounded-md p-8 max-w-md mx-auto">
-            <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
-            <h3 className="text-lg font-medium text-gray-600 mb-2">
+          <div className="max-w-md mx-auto py-12">
+            <h3 className="text-lg font-medium text-gray-900 mb-2">
               No Products Found
             </h3>
             <p className="text-gray-500">