detail page updated , add subcategory zustand

components/cards/innerProductcard.tsx

@@ -21,7 +21,7 @@ export default function InnerProductcard({ data }: { data: any }) {
 
   return (
     <Link
-      href={`/${route.lang}/${route.carType}/${data.name}`}
+      href={`/${route.lang}/${route.carType}/${data.id}`}
       onClick={() => {
         setDetail(data);
         setInitialCar(carInfo);

components/errorState.tsx

@@ -0,0 +1,43 @@
+import Text from "./lib_components/text";
+
+interface ErrorStateProps {
+  message?: string;
+  onRetry?: () => void;
+}
+
+export const ErrorState = ({ message, onRetry }: ErrorStateProps) => {
+  return (
+    <div className="col-span-full flex flex-col items-center justify-center py-20 px-4">
+      <div className="w-24 h-24 mb-6 rounded-full bg-red-100 flex items-center justify-center">
+        <svg
+          className="w-12 h-12 text-red-500"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
+          />
+        </svg>
+      </div>
+      <h3 className="text-2xl font-bold text-[#0c1239] mb-2">
+        <Text txt="errorTitle" />
+      </h3>
+      {message && (
+        <p className="text-gray-500 text-center max-w-md mb-4">{message}</p>
+      )}
+      {onRetry && (
+        <button
+          onClick={onRetry}
+          className="bg-secondary p-3 px-6 rounded-lg border-2 border-secondary text-white
+            hover:cursor-pointer hover:bg-white hover:text-secondary transition-all"
+        >
+          <Text txt="retry" />
+        </button>
+      )}
+    </div>
+  );
+};