feat: add some styles to the product page

src/components/singleitemcard/SingleItemCard.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable @next/next/no-img-element */
 import { useState } from "react";
 
 const SingleItemCard = ({
@@ -10,50 +9,55 @@ const SingleItemCard = ({
     phone,
     email,
 }) => {
-    const [mainImage, setMainImage] = useState(images[0]); // Initialize main image with the first image
+    const [mainImage, setMainImage] = useState(images[0]);
 
     const handleClickImage = (image) => {
         setMainImage(image);
     };
 
     return (
-        <div className='md:flex md:flex-row md:justify-center md:items-start  md:mb-4 md:m-4 h-full sm:flex-col-reverse sm:mb-4 sm:items-center sm:m-4'>
-            <div className='md:w-1/2 sm:w-full flex flex-col justify-center items-center mr-8'>
-                <div className='rounded-xl h-[400px] w-full align-middle justify-center '>
+        <div className='flex flex-col md:flex-row justify-center items-center mb-8 mx-4 md:mx-auto max-w-4xl mt-10'>
+            <div className='md:w-1/2 md:mr-8 mb-4 md:mb-0'>
+                <div className='rounded-xl overflow-hidden h-[400px] w-full'>
                     <img
                         src={mainImage}
                         alt={title}
-                        className='cover w-full h-full rounded-xl'
+                        className='object-cover w-full h-full rounded-xl'
                     />
                 </div>
-                <div className='flex w-full  '>
+                <div className='flex mt-2'>
                     {images.map((image, index) => (
-                        <div
-                            key={index}
-                            className='mr-2 ml-2 mt-2 w-1/3 rounded-xl'
-                        >
+                        <div key={index} className='mr-2 w-1/3 cursor-pointer'>
                             <img
                                 src={image}
                                 alt={title}
                                 onClick={() => handleClickImage(image)}
                                 className={`${
                                     image === mainImage
-                                        ? "active "
+                                        ? "border-2 border-green-500"
                                         : "opacity-70"
-                                } cover w-full h-full rounded-xl`}
+                                } object-cover w-full h-20 rounded-md`}
                             />
                         </div>
                     ))}
                 </div>
             </div>
-            <div className='md:w-1/2 py-4 sm:w-full'>
-                <h1 className='text-4xl mb-4'>{title}</h1>
+            <div className='md:w-1/2 py-4'>
+                <h1 className='text-4xl mb-4 font-bold'>{title}</h1>
                 <p className='mb-4'>{description}</p>
-                <div className='ml-0 text-2xl px-3 py-2'>{location}</div>
+                <div className='text-xl bg-gray-100 rounded-md'>
+                    <span className='font-bold'>Location: </span> {location}
+                </div>
                 <div className='mt-4'>
-                    <p>Name : {name}</p>
-                    <p>Phone : {phone}</p>
-                    <p>Email: {email}</p>
+                    <p className='text-lg'>
+                        <span className='font-bold'>Name:</span> {name}
+                    </p>
+                    <p className='text-lg'>
+                        <span className='font-bold'>Phone:</span> {phone}
+                    </p>
+                    <p className='text-lg'>
+                        <span className='font-bold'>Email:</span> {email}
+                    </p>
                 </div>
             </div>
         </div>