chore: add new features

frontend-prep/src/pages/User/Accueil.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import ProductCard from "../../components/ProductCard";
 import Navbar from "../../components/Navbar";
-import { getAllProducts, getProductsByCategory } from "../../api/api";
+import { getAllProducts, getProductsByCategory, getMediaUrl } from "../../api/api";
 import type { Product } from "../../api/api";
 import "./UserAccueil.css";
 
@@ -85,7 +85,7 @@ function UserAccueil() {
             (mediaItem) => mediaItem && mediaItem.type === "video",
         );
 
-        return videoMedia?.url ? `${videoMedia.url}` : undefined;
+        return videoMedia?.url ? getMediaUrl(videoMedia.url) : undefined;
     };
     const getProductImage = (product: Product): string => {
         // Pas de media ? Image placeholder
@@ -99,7 +99,7 @@ function UserAccueil() {
 
             // Vérifier si c'est un objet avec type "image" et url
             if (mediaItem && mediaItem.type === "image" && mediaItem.url) {
-                return `${mediaItem.url}`;
+                return getMediaUrl(mediaItem.url);
             }
         }
 
@@ -107,10 +107,21 @@ function UserAccueil() {
         return "https://via.placeholder.com/400x400/1a1a1a/ffffff?text=No+Image";
     };
 
+    const grosSemiStyle =
+        selectedCategory === "gros&semi"
+            ? {
+                  backgroundImage: `url('/logo-gros-semi.png')`,
+                  backgroundRepeat: "no-repeat",
+                  backgroundPosition: "center center",
+                  backgroundSize: "contain",
+                  backgroundAttachment: "local",
+              }
+            : {};
+
     return (
         <>
             <Navbar />
-            <div className="user-page-container">
+            <div className="user-page-container" style={grosSemiStyle}>
                 <div className="category-filter">
                     {categories.map((category) => (
                         <button
@@ -136,18 +147,6 @@ function UserAccueil() {
                     </div>
                 )}
 
-                {error && (
-                    <div className="error-container">
-                        <p className="error-message">{error}</p>
-                    </div>
-                )}
-
-                {!loading && !error && products.length === 0 && (
-                    <div className="empty-container">
-                        <p>Aucun produit disponible dans cette catégorie.</p>
-                    </div>
-                )}
-
                 {!loading && !error && products.length > 0 && (
                     <div className="products-grid">
                         {products.map((product) => (
@@ -159,7 +158,7 @@ function UserAccueil() {
                                     id={product.id}
                                     name={product.name}
                                     price={getProductPrice(product)}
-                                    unit="g"
+                                    unit={product.unit || "g"}
                                     image={getProductImage(product)}
                                     stock={product.stock}
                                     category={product.category}
@@ -171,6 +170,11 @@ function UserAccueil() {
                         ))}
                     </div>
                 )}
+                {selectedCategory === "gros&semi" && (
+                    <div className="coming-soon-overlay">
+                        <span className="coming-soon-text">Prochainement</span>
+                    </div>
+                )}
             </div>
         </>
     );