Categories working

src/components/category-slider.tsx

@@ -15,27 +15,30 @@ export function ChocolateCategories() {
   const [currentImage, setCurrentImage] = useState(categories[0].image);
 
   return (
-    <section className='flex flex-col md:flex-row items-center "bg-[#f9f6f5] py-12 px-4 sm:px-6 lg:px-8"'>
-      {/* Left Side: Categories */}
-      <ul className='space-y-4 text-[#5a352a] font-serif text-5xl flex flex-col justify-center w-1/2 bg-white text-left pl-10'>
-        {categories.map((category) => (
-          <li
-            key={category.name}
-            onMouseEnter={() => setCurrentImage(category.image)}
-            className='hover:text-[#c19a6b] cursor-pointer'
-          >
-            {category.name}
-          </li>
-        ))}
-      </ul>
+    <section className='flex flex-col md:flex-row bg-[#f9f6f5] py-12 px-4 sm:px-6 lg:px-8'>
+      <div className='w-full md:w-1/2 bg-white h-auto'>
+        <ul className='m-8 space-y-10 text-[#5a352a] font-serif text-5xl justify-center text-left'>
+          {categories.map((category) => (
+            <li
+              key={category.name}
+              onMouseEnter={() => setCurrentImage(category.image)}
+              className='hover:text-[#c19a6b] cursor-pointer'
+            >
+              {category.name}
+            </li>
+          ))}
+        </ul>
+      </div>
 
       {/* Right Side: Image */}
-      <div className='w-full md:w-1/2'>
+      <div className='w-full md:w-1/2 h-full'>
         <Image
           src={currentImage}
           alt='Chocolate Category'
-          width={500}
-          height={300}
+          layout='responsive'
+          width={300}
+          height={500}
+          className='w-full h-auto'
         />
       </div>
     </section>