adding new styles

src/pages/ProductDetail/index.jsx

@@ -38,18 +38,22 @@ const ProductPage = ({
   const navigate = useNavigate();
   const { productId } = useParams();
   const { t } = useTranslation();
+
   const {
     data: productResponse,
     error: productError,
     isLoading: productLoading,
   } = useGetProductByIdQuery(productId);
+
   const {
     data: similarProductsResponse,
     error: similarProductsError,
     isLoading: similarProductsLoading,
   } = useGetRelatedProductsQuery(productId);
+
   const product = productResponse?.data;
   const similarProducts = similarProductsResponse?.data;
+
   const [stockErrorModalVisible, setStockErrorModalVisible] = useState(false);
   const [addFavorite] = useAddFavoriteMutation();
   const [removeFavorite] = useRemoveFavoriteMutation();
@@ -183,7 +187,6 @@ const ProductPage = ({
       10
     );
 
-    // Sadece miktar değiştiyse ve 0'dan büyükse güncelle (0 ise Remove triggerlanır)
     if (pendingQuantity === serverQty || pendingQuantity <= 0) {
       return;
     }
@@ -197,7 +200,6 @@ const ProductPage = ({
         }).unwrap();
       } catch (error) {
         console.error("Failed to update cart item:", error);
-        // Hata durumunda geri al
         setLocalQuantity(serverQty);
         setPendingQuantity(serverQty);
       } finally {
@@ -225,12 +227,74 @@ const ProductPage = ({
 
   if (!product) return <div>Can not find product</div>;
 
-  const imageUrl = product.media?.[0]?.thumbnail || "";
   const categoryName = product.categories?.[0]?.name || "Category";
   const categoryId = product.categories?.[0]?.id;
+
   const handleCategoryClick = (categoryId) => {
     navigate(`/category/${categoryId}`);
   };
+
+  // ── Cart + favorite butonları (desktop purchase card + mobile bar'da ortak) ──
+  const CartButtons = () => (
+    <div className={styles.Btn}>
+      {showFavoriteButton && (
+        <button
+          className={styles.favoriteButton}
+          onClick={handleToggleFavorite}
+        >
+          {localIsFavorite ? <IoMdHeart /> : <IoMdHeartEmpty />}
+        </button>
+      )}
+
+      {showAddToCart && (
+        <>
+          {localQuantity > 0 ? (
+            <div className={styles.quantityControls}>
+              <button
+                onClick={handleQuantityDecrease}
+                className={styles.quantityBtn}
+              >
+                <svg
+                  viewBox="0 0 9 11"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M1.41422 6.86246C0.633166 6.08141 0.633165 4.81508 1.41421 4.03403L4.61487 0.833374C5.8748 -0.426555 8.02908 0.465776 8.02908 2.24759V8.6489C8.02908 10.4307 5.8748 11.323 4.61487 10.0631L1.41422 6.86246Z"
+                    fill="white"
+                  />
+                </svg>
+              </button>
+              <span>{localQuantity}</span>
+              <button
+                onClick={handleQuantityIncrease}
+                className={styles.quantityBtn}
+              >
+                <svg
+                  viewBox="0 0 9 11"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6.64389 4.03427C7.42494 4.81532 7.42494 6.08165 6.64389 6.8627L3.44324 10.0634C2.18331 11.3233 0.0290222 10.431 0.0290226 8.64914V2.24783C0.0290226 0.466021 2.18331 -0.426312 3.44324 0.833617L6.64389 4.03427Z"
+                    fill="white"
+                  />
+                </svg>
+              </button>
+            </div>
+          ) : (
+            <button
+              className={styles.addToCartButton}
+              onClick={handleAddToCart}
+            >
+              <FaShoppingCart />
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  );
+
   return (
     <div className={styles.container}>
       {/* Breadcrumb */}
@@ -242,8 +306,10 @@ const ProductPage = ({
         <span>{product?.name || "Product"}</span>
       </div>
 
-      {/* Product Details */}
+      {/* ── 3 kolon ana section ── */}
       <div className={styles.productSection}>
+
+        {/* KOLON 1: Resim */}
         <div className={styles.productImage}>
           <ImageCarousel
             images={product.media}
@@ -252,13 +318,12 @@ const ProductPage = ({
             isDetailView={true}
           />
         </div>
+
+        {/* KOLON 2: İsim + Meta + Description */}
         <div className={styles.productInfo}>
           <h1 className={styles.productTitle}>{product.name}</h1>
-          <p
-            className={styles.productDescription}
-            dangerouslySetInnerHTML={{ __html: product.description }}
-          ></p>
 
+          {/* Meta tablo */}
           <div className={styles.productMeta}>
             <div className={styles.metaItem}>
               <span className={styles.metaLabel}>
@@ -266,12 +331,14 @@ const ProductPage = ({
               </span>
               <span className={styles.metaValue}>{product.id}</span>
             </div>
+
             {product.barcode && (
               <div className={styles.metaItem}>
                 <span className={styles.metaLabel}>{t("product.barCode")}</span>
                 <span className={styles.metaValue}>{product.barcode}</span>
               </div>
             )}
+
             {product.brand?.name && (
               <div className={styles.metaItem}>
                 <span className={styles.metaLabel}>{t("order.brand")}</span>
@@ -288,145 +355,73 @@ const ProductPage = ({
               </div>
             )}
           </div>
-          <div className={styles.productActions}>
-            <div className={styles.priceContainer}>
-              <span className={styles.price}>{product.price_amount} m.</span>
 
-              {product.old_price_amount && (
-                <span className={styles.oldPrice}>
-                  {product.old_price_amount} m.
+          {/* Description card */}
+          {product.description && (
+            <div className={styles.descriptionCard}>
+              <div className={styles.descriptionHeader}>
+                <div className={styles.descriptionIcon}>
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                    />
+                  </svg>
+                </div>
+                <p className={styles.descriptionTitle}>
+                  {t("product.description")}
+                </p>
+              </div>
+              <div
+                className={styles.productDescription}
+                dangerouslySetInnerHTML={{ __html: product.description }}
+              />
+            </div>
+          )}
+        </div>
+
+        {/* KOLON 3: Satın alma kartı (sadece desktop/tablet) */}
+        <div className={styles.purchaseCol}>
+          <div className={styles.purchaseCard}>
+            {/* Fiyat */}
+            <div className={styles.priceRow}>
+              <span className={styles.priceLabel}>{t("product.price")}:</span>
+              <div className={styles.priceRight}>
+                <span className={styles.price}>
+                  {product.price_amount} m.
                 </span>
-              )}
+                {product.old_price_amount && (
+                  <span className={styles.oldPrice}>
+                    {product.old_price_amount} m.
+                  </span>
+                )}
+              </div>
             </div>
-            <div className={styles.Btn}>
-              {showFavoriteButton && (
-                <button
-                  className={styles.favoriteButton}
-                  onClick={handleToggleFavorite}
-                >
-                  {localIsFavorite ? <IoMdHeart /> : <IoMdHeartEmpty />}
-                </button>
-              )}
 
-              {showAddToCart && (
-                <>
-                  {localQuantity > 0 ? (
-                    <div className={styles.quantityControls}>
-                      <button
-                        onClick={handleQuantityDecrease}
-                        className={styles.quantityBtn}
-                      >
-                        <svg
-                          viewBox="0 0 9 11"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M1.41422 6.86246C0.633166 6.08141 0.633165 4.81508 1.41421 4.03403L4.61487 0.833374C5.8748 -0.426555 8.02908 0.465776 8.02908 2.24759V8.6489C8.02908 10.4307 5.8748 11.323 4.61487 10.0631L1.41422 6.86246Z"
-                            fill="white"
-                          ></path>
-                        </svg>
-                      </button>
-                      <span>{localQuantity}</span>
-                      <button
-                        onClick={handleQuantityIncrease}
-                        className={styles.quantityBtn}
-                      >
-                        <svg
-                          viewBox="0 0 9 11"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6.64389 4.03427C7.42494 4.81532 7.42494 6.08165 6.64389 6.8627L3.44324 10.0634C2.18331 11.3233 0.0290222 10.431 0.0290226 8.64914V2.24783C0.0290226 0.466021 2.18331 -0.426312 3.44324 0.833617L6.64389 4.03427Z"
-                            fill="white"
-                          ></path>
-                        </svg>
-                      </button>
-                    </div>
-                  ) : (
-                    <button
-                      className={styles.addToCartButton}
-                      onClick={handleAddToCart}
-                    >
-                      <FaShoppingCart />
-                    </button>
-                  )}
-                </>
-              )}
-            </div>
-          </div>
-          <div
-            className={styles.productActionsMobile}
-            style={{ position: "sticky", bottom: "59px" }}
-          >
-            <div className={styles.priceContainer}>
-              {" "}
-              <span className={styles.price}>{product.price_amount} m.</span>
-              <span className={styles.oldPrice}>
-                {product.old_price_amount} m.
-              </span>
-            </div>
-            <div className={styles.Btn}>
-              {showFavoriteButton && (
-                <button
-                  className={styles.favoriteButton}
-                  onClick={handleToggleFavorite}
-                >
-                  {localIsFavorite ? <IoMdHeart /> : <IoMdHeartEmpty />}
-                </button>
-              )}
-
-              {showAddToCart && (
-                <>
-                  {localQuantity > 0 ? (
-                    <div className={styles.quantityControls}>
-                      <button
-                        onClick={handleQuantityDecrease}
-                        className={styles.quantityBtn}
-                      >
-                        <svg
-                          viewBox="0 0 9 11"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M1.41422 6.86246C0.633166 6.08141 0.633165 4.81508 1.41421 4.03403L4.61487 0.833374C5.8748 -0.426555 8.02908 0.465776 8.02908 2.24759V8.6489C8.02908 10.4307 5.8748 11.323 4.61487 10.0631L1.41422 6.86246Z"
-                            fill="white"
-                          ></path>
-                        </svg>
-                      </button>
-                      <span>{localQuantity}</span>
-                      <button
-                        onClick={handleQuantityIncrease}
-                        className={styles.quantityBtn}
-                      >
-                        <svg
-                          viewBox="0 0 9 11"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M6.64389 4.03427C7.42494 4.81532 7.42494 6.08165 6.64389 6.8627L3.44324 10.0634C2.18331 11.3233 0.0290222 10.431 0.0290226 8.64914V2.24783C0.0290226 0.466021 2.18331 -0.426312 3.44324 0.833617L6.64389 4.03427Z"
-                            fill="white"
-                          ></path>
-                        </svg>
-                      </button>
-                    </div>
-                  ) : (
-                    <button
-                      className={styles.addToCartButton}
-                      onClick={handleAddToCart}
-                    >
-                      <FaShoppingCart />
-                    </button>
-                  )}
-                </>
-              )}
-            </div>
+            {/* Butonlar */}
+            <CartButtons />
           </div>
         </div>
       </div>
+
+      {/* ── Mobile sticky bar ── */}
+      <div className={styles.productActionsMobile}>
+        <div className={styles.mobilePriceContainer}>
+          <span className={styles.price}>{product.price_amount} m.</span>
+          {product.old_price_amount && (
+            <span className={styles.oldPrice}>
+              {product.old_price_amount} m.
+            </span>
+          )}
+        </div>
+        <div className={styles.mobileBtnContainer}>
+          <CartButtons />
+        </div>
+      </div>
+
+      {/* Reviews */}
       <ReviewSection
         productId={productId}
         existingReviews={product.reviews_resources}
@@ -452,6 +447,7 @@ const ProductPage = ({
         </div>
       </div>
 
+      {/* Stock modal */}
       <Modal
         title={t("common.warning")}
         open={stockErrorModalVisible}
@@ -479,4 +475,4 @@ const ProductPage = ({
   );
 };
 
-export default ProductPage;
+export default ProductPage;