first commit

components/MenuItemRow.tsx

@@ -13,48 +13,56 @@ export default function MenuItemRow({ item, lang, currency, index, isLast }: Pro
 
   return (
     <div
-      className={`menu-item-row flex items-center gap-3.5 py-3.5 rounded-xl px-2 -mx-2 ${
-        !isLast ? 'border-b border-dashed border-beige' : ''
+      className={`menu-item-row flex items-start gap-4 py-4 rounded-xl px-2 -mx-2 transition-colors ${
+        !isLast ? 'border-b border-[rgba(61,43,31,0.06)]' : ''
       }`}
       style={{ '--item-index': index } as React.CSSProperties}
     >
-      {/* Emoji circle with gradient */}
+      {/* Image or Emoji circle */}
       <div
-        className="w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0 text-[1.2rem]"
+        className="w-16 h-16 rounded-full flex items-center justify-center flex-shrink-0 text-3xl overflow-hidden shadow-sm mt-0.5"
         style={{
-          background:
-            'linear-gradient(135deg, #F0E8D8 0%, #E8DCC8 100%)',
-          border: '1px solid rgba(212,200,176,0.80)',
-          boxShadow: 'inset 0 1px 2px rgba(255,255,255,0.8)',
+          background: '#FDFCF8',
+          border: '1px solid rgba(212,200,176,0.30)',
         }}
       >
-        {item.emoji || '✨'}
+        {item.image ? (
+          <img src={item.image} alt={item.name[l]} className="w-full h-full object-cover" />
+        ) : (
+          item.emoji || '✨'
+        )}
       </div>
 
-      {/* Text */}
-      <div className="flex-1 min-w-0">
-        <p
-          className="font-display text-coffee font-semibold leading-snug"
-          style={{ fontSize: '0.9rem' }}
-        >
-          {item.name[l]}
-        </p>
+      {/* Text Content */}
+      <div className="flex-1 min-w-0 pt-0.5">
+        <div className="flex justify-between items-start gap-2">
+          <h3
+            className="font-display text-coffee font-semibold leading-tight mb-1"
+            style={{ fontSize: '1.05rem' }}
+          >
+            {item.name[l]}
+          </h3>
+          
+          {/* Price */}
+          {item.price !== undefined && (
+            <span 
+              className="flex-shrink-0 font-medium text-coffee mt-0.5"
+              style={{ fontSize: '1rem' }}
+            >
+              {item.price} {currency}
+            </span>
+          )}
+        </div>
+        
         {item.description && (
           <p
-            className="font-body text-muted leading-relaxed mt-0.5 line-clamp-2"
-            style={{ fontSize: '0.72rem' }}
+            className="font-body text-muted leading-relaxed line-clamp-2"
+            style={{ fontSize: '0.85rem' }}
           >
             {item.description[l]}
           </p>
         )}
       </div>
-
-      {/* Price pill */}
-      {item.price !== undefined && (
-        <span className="price-pill flex-shrink-0">
-          {currency}{item.price}
-        </span>
-      )}
     </div>
   )
 }