detail page connected to backend , modal form for one product connected to backend

components/pages/products/slug/features.tsx

@@ -1,27 +1,41 @@
 export function Features({ features }: { features: string[] }) {
+  if (!features || features.length === 0) {
+    return null;
+  }
+
   return (
-    <table className="w-full rounded-xl overflow-hidden">
-      <thead>
-        <tr className="border-b border-gray-700 bg-black">
-          <th className="px-4 py-4 md:px-6 text-left text-sm md:text-base font-semibold text-white">
-            Feature
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        {features.map((feature, index) => (
-          <tr
-            key={index}
-            className={` border-gray-700 transition-colors hover:bg-opacity-80 ${
-              index % 2 === 0 ? "bg-[#323232]" : "bg-black/20"
-            }`}
-          >
-            <td className="px-4 py-4 md:px-6 text-sm md:text-base text-white font-medium">
-              {feature}
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
+    <div className="mt-12">
+      <h2 className="text-2xl md:text-3xl font-bold text-white mb-6">
+        Xususiyatlar
+      </h2>
+      <div className="rounded-xl overflow-hidden border border-gray-800 shadow-xl">
+        <table className="w-full">
+          <thead>
+            <tr className="bg-linear-to-r from-gray-900 to-black border-b border-gray-800">
+              <th className="px-4 py-4 md:px-6 text-left text-sm md:text-base font-semibold text-white">
+                Xususiyat
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {features.map((feature, index) => (
+              <tr
+                key={index}
+                className={`border-b border-gray-800 last:border-b-0 transition-colors hover:bg-red-900/10 ${
+                  index % 2 === 0 ? "bg-[#252525]" : "bg-[#1e1e1e]"
+                }`}
+              >
+                <td className="px-4 py-4 md:px-6 text-sm md:text-base text-gray-300">
+                  <div className="flex items-start gap-3">
+                    <span className="text-red-700 mt-1">•</span>
+                    <span>{feature}</span>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
   );
-}
+}