feat(ui): 更新车间和产品页面UI设计并添加新图片资源

更新多个页面的UI设计，包括产品卡片、车间详情页和列表页，采用现代化卡片设计和动画效果
添加新的车间图片资源并更新相关页面的图片引用路径
优化响应式布局和交互体验，增强视觉吸引力

app/[locale]/product/page.tsx

@@ -89,17 +89,55 @@ export default async function Page({
               prefetch={false}
               className="block bg-white border border-gray-100 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-300"
             >
-              <div className="aspect-square flex items-center justify-center p-6">
-                <img
-                  src={product.images?.[0] || "/placeholder.svg"}
-                  alt={product.title}
-                  className="max-w-full max-h-full object-contain hover:scale-105 transition-transform duration-300"
-                />
-              </div>
-              <div className="p-6 text-center">
-                <h3 className="text-lg font-medium text-gray-800 mb-4">{product.title}</h3>
-                <div className="inline-block text-red-600 font-medium hover:underline">
-                  {t("learnMore")} &gt;
+              <div
+                className="relative flex w-80 flex-col rounded-xl bg-gradient-to-br from-white to-gray-50 bg-clip-border text-gray-700 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1"
+              >
+                <div
+                  className="relative mx-4 -mt-6 h-40 overflow-hidden rounded-xl bg-clip-border shadow-lg group"
+                >
+                  <div
+                    className="absolute inset-0 bg-gradient-to-r from-blue-600 via-blue-500 to-indigo-600 opacity-90"
+                  ></div>
+                  <div
+                    className="absolute inset-0 bg-[linear-gradient(to_right,rgba(255,255,255,0.1)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.1)_1px,transparent_1px)] bg-[size:20px_20px] animate-pulse"
+                  ></div>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <img className="w-20 h-20" src={product.images[0]} alt="" />
+                  </div>
+                </div>
+                <div className="p-6">
+                  <h5
+                    className="mb-2 block font-sans text-xl font-semibold leading-snug tracking-normal text-gray-900 antialiased group-hover:text-blue-600 transition-colors duration-300"
+                  >
+                    {product.title}
+                  </h5>
+                  <p
+                    className="block font-sans text-base font-light leading-relaxed text-gray-700 antialiased"
+                  >
+                    {product.detail}
+                  </p>
+                </div>
+                <div className="p-6 pt-0">
+                  <button
+                    className="group relative w-full inline-flex items-center justify-center px-6 py-3 font-bold text-white rounded-lg bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 shadow-lg shadow-blue-500/30 hover:shadow-blue-500/40 transition-all duration-300 hover:-translate-y-0.5"
+                  >
+                    <span className="relative flex items-center gap-2">
+                      Read More
+                      <svg
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        fill="none"
+                        className="w-5 h-5 transform transition-transform group-hover:translate-x-1"
+                      >
+                        <path
+                          d="M17 8l4 4m0 0l-4 4m4-4H3"
+                          stroke-width="2"
+                          stroke-linejoin="round"
+                          stroke-linecap="round"
+                        ></path>
+                      </svg>
+                    </span>
+                  </button>
                 </div>
               </div>
             </I18nLink>