feat: unify catalog and improve detail pages

src/components/product/ProductTabs.tsx

@@ -119,8 +119,8 @@ export function ProductTabs({
   const activeLabel = TABS.find((t) => t.id === active)?.label ?? "";
 
   return (
-    <div className="mt-10">
-      <div className="flex items-center gap-8 border-b border-border">
+    <section className="mt-10 overflow-hidden rounded-2xl border border-border bg-surface">
+      <div className="flex flex-wrap items-center gap-x-7 border-b border-border px-5 pt-5 md:gap-x-10 md:px-7">
         {TABS.map((tab) => (
           <button
             key={tab.id}
@@ -138,7 +138,7 @@ export function ProductTabs({
         ))}
       </div>
 
-      <div className="pt-8">
+      <div className="p-5 md:p-7">
         <h2 className="mb-5 flex items-center gap-2 text-lg font-bold">
           <span className="h-2 w-2 shrink-0 rounded-full bg-red" aria-hidden />
           {activeLabel}
@@ -148,13 +148,27 @@ export function ProductTabs({
           (technicalInfo.length === 0 ? (
             <EmptyState message="هنوز مشخصات فنی‌ای برای این محصول ثبت نشده است." />
           ) : (
-            <div className="grid gap-3 sm:grid-cols-2">
-              {technicalInfo.map((field) => (
-                <div key={field.label} className="rounded-xl bg-background p-4">
-                  <p className="mb-1 text-sm font-bold">{field.label} :</p>
-                  <p className="text-sm text-muted">{field.value}</p>
-                </div>
-              ))}
+            <div className="overflow-hidden rounded-xl border border-border">
+              <table className="w-full border-collapse text-right text-sm">
+                <tbody>
+                  {technicalInfo.map((field, index) => (
+                    <tr
+                      key={`${field.label}-${index}`}
+                      className="border-b border-border last:border-b-0 odd:bg-background/60"
+                    >
+                      <th
+                        scope="row"
+                        className="w-[30%] px-4 py-3.5 align-top font-bold text-foreground md:w-[22%] md:px-5"
+                      >
+                        {field.label}
+                      </th>
+                      <td className="px-4 py-3.5 leading-7 text-muted md:px-5">
+                        {field.value}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
             </div>
           ))}
 
@@ -170,6 +184,6 @@ export function ProductTabs({
 
         {active === "comments" && <CommentsPanel entityId={entityId} initialComments={initialComments} />}
       </div>
-    </div>
+    </section>
   );
 }