enhance the clint order design cards

tarunkumarkale · Aug 12, 2024 · 61b348f · 61b348f
1 parent f068660
commit 61b348f
Showing 1 changed file with 18 additions and 10 deletions.
diff --git a/src/Pages/AllOrderProducts.jsx b/src/Pages/AllOrderProducts.jsx
@@ -6,27 +6,35 @@ const AllOrderProducts = () => {
 
   return (
     <div className="container mx-auto p-4">
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+      {/* Heading */}
+      <h2 className="text-3xl font-extrabold text-center mb-10 text-gray-800">Client Orders</h2>
+
+      {/* Orders Grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
         {orders.map((order, index) => (
           <div
             key={index}
-            className="bg-white shadow-lg rounded-lg overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-xl"
+            className="bg-white shadow-lg rounded-xl overflow-hidden transform transition-all duration-500 hover:scale-105 hover:shadow-2xl"
           >
+            {/* Product Image */}
             <img
               src={order.imageURL}
               alt={order.bicyclename}
               className="w-full h-48 object-cover"
             />
-            <div className="p-4">
-              <h3 className="text-lg font-semibold mb-2">{order.name}</h3>
-              <p className="text-gray-700 mb-2">
-                <span className="font-medium">Bicycle:</span> {order.bicyclename}
+
+            {/* Order Details */}
+            <div className="p-6 bg-gradient-to-r from-gray-100 to-gray-50 text-center">
+              <h3 className="text-xl font-bold text-purple-700 mb-3 uppercase"><span className='text-black'>Client Name :</span>  {order.name}</h3>
+
+              <p className="text-md font-medium text-blue-700 mb-2">
+                <span className="font-bold  text-lg ">Bicycle:</span> {order.bicyclename}
               </p>
-              <p className="text-gray-700 mb-2">
-                <span className="font-medium">Type:</span> {order.bicycletype}
+              <p className="text-md font-medium text-green-700 mb-2">
+                <span className="font-bold text-lg  ">Type:</span> {order.bicycletype}
               </p>
-              <p className="text-gray-800 font-semibold">
-                <span className="font-medium">Price:</span> ${order.price}
+              <p className="text-lg font-semibold text-red-700">
+                <span className="font-bold text-lg ">Price:</span> ${order.price}
               </p>
             </div>
           </div>