fix(front)

frontend/src/components/CardItem.jsx

@@ -1,79 +1,87 @@
-import  { useState } from 'react';
+import { useState } from "react";
+import Arrow from "../components/Arrow";
 
 export default function CardItem({ item, onAddToCart }) {
   // Начальный вес — 100 грамм (0.100 кг)
-  const [weight, setWeight] = useState(0.100);
+  const [weight, setWeight] = useState(0.1);
 
   // Увеличение веса с шагом 100 грамм
   const handleIncrement = () => {
-    setWeight((prev) => parseFloat((prev + 0.100).toFixed(3)));
+    setWeight((prev) => parseFloat((prev + 0.1).toFixed(3)));
   };
 
   // Уменьшение веса (не позволяет опуститься ниже минимальных 100 грамм)
   const handleDecrement = () => {
-    setWeight((prev) => (prev > 0.100 ? parseFloat((prev - 0.100).toFixed(3)) : 0.100));
+    setWeight((prev) =>
+      prev > 0.1 ? parseFloat((prev - 0.1).toFixed(3)) : 0.1,
+    );
   };
 
   return (
-    <div className="flex flex-col text-white w-full max-w-[360px] bg-slate-900/40 p-4 rounded-lg border border-slate-800 hover:border-slate-700 transition-all">
+    <div className="flex flex-col text-white w-full">
-      
+      <div className="w-full rounded-md overflow-hidden bg-slate-800/60 flex flex-col h-100 items-center justify-center border border-slate-700/50 select-none">
-      {/* Заглушка для изображения товара */}
+        <svg
-      <div className="w-full aspect-[4/5] rounded-md overflow-hidden bg-slate-800/60 flex flex-col items-center justify-center border border-slate-700/50 select-none">
+          className="w-12 h-12 text-slate-600 mb-2"
-        <svg className="w-12 h-12 text-slate-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          fill="none"
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 002-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1.5}
+            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 002-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+          />
         </svg>
         <span className="text-xs text-slate-500 font-medium uppercase tracking-wider">
           Изображение товара
         </span>
       </div>
-      
+
       {/* Блок с информацией о товаре */}
-      <div className="mt-4 flex justify-between items-start grow">
+      <div className="mt-8 flex justify-between items-start grow">
-        <div>
+        <div className="font-bold text-xl">{item.name}</div>
-          <h3 className="font-bold text-lg tracking-wide">{item.name}</h3>
-          {item.origin && <p className="text-slate-500 text-sm mt-0.5">{item.origin}</p>}
-        </div>
         <div className="text-right">
-          <span className="font-bold text-lg">
+          <span className="font-medium text-lg">
-            {Number(item.price || 0).toLocaleString('ru-RU')} ₽
+            {Number(item.price || 0).toLocaleString("ru-RU")} ₽
           </span>
-          <span className="text-slate-400 text-sm"> / {item.unit || 'кг'}</span>
+          <span className="text-white text-xl"> / {item.unit || "кг"}</span>
         </div>
       </div>
+      <div className="mt-8 lg:mt-2 items-start ">
+        <span className="text-white text-lg font-medium lg:font-light">
+          {item.city || "Архангельск"}
+        </span>
+      </div>
 
-      {/* Инпут управления весом и кнопка добавления */}
+      <div className="mt-9 flex items-center justify-between gap-4">
-      <div className="mt-6 flex items-center justify-between gap-4">
-        
         {/* Шаговый переключатель веса */}
-        <div className="flex items-center bg-amber-500/10 border border-amber-500/30 rounded-full px-2 py-1 text-amber-500">
+        <div className="flex items-center bg-gold rounded-md px-2 py-2 text-white">
-          <button 
+          <button
-            onClick={handleDecrement}
-            className="w-8 h-8 flex items-center justify-center font-bold text-lg hover:text-amber-400 cursor-pointer select-none"
-          >
-            -
-          </button>
-          <span className="mx-2 font-mono text-sm min-w-[50px] text-center">
-            {weight.toFixed(3)}
-          </span>
-          <button 
             onClick={handleIncrement}
-            className="w-8 h-8 flex items-center justify-center font-bold text-lg hover:text-amber-400 cursor-pointer select-none"
+            className="w-3 h-3 flex items-center justify-center font-medium text-xl cursor-pointer select-none"
           >
             +
           </button>
+          <span className="mx-2 font-mono text-sm min-w-12.5 text-center">
+            {weight.toFixed(3)}
+          </span>
+          <button
+            onClick={handleDecrement}
+            className="w-3 h-3 flex items-center justify-center font-medium text-xl cursor-pointer select-none"
+          >
+            -
+          </button>
         </div>
 
         {/* Кнопка действия "В корзину" */}
-        <button 
+        <button
           onClick={() => onAddToCart(item, weight)}
-          className="group flex items-center gap-2 text-sm font-medium tracking-wide text-slate-300 hover:text-amber-400 transition-colors cursor-pointer"
+          className="group flex items-center gap-4.5 text-base font-bold text-white cursor-pointer"
         >
           <span>В корзину</span>
-          <svg className="w-5 h-5 stroke-current transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24">
+          <Arrow />
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
-          </svg>
         </button>
-
       </div>
     </div>
   );

frontend/src/pages/Shop.jsx

@@ -40,7 +40,7 @@ export default function Shop() {
 
   return (
     <PageLayout>
-      <main className="px-6 md:px-16 grow w-full">
+      <main className="px-6 md:px-16 grow w-full ">
         <h1 className="text-2xl text-white text-medium md:mt-10">
           Ассортимент
         </h1>
@@ -49,9 +49,11 @@ export default function Shop() {
           activeCategory={activeCategory}
           onSelectCategory={setActiveCategory}
         />
-        {filteredItems.map((item) => (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-4">
-          <CardItem key={item.id} item={item} onAddToCart={handleAddToCart} />
+          {filteredItems.map((item) => (
-        ))}
+            <CardItem key={item.id} item={item} onAddToCart={handleAddToCart} />
+          ))}
+        </div>
       </main>
     </PageLayout>
   );