Adjust banner and price badge appearance for better visual appeal

Modify image editor to use diagonal banners and circular price badges, improving UI aesthetics.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/VEZwUqa

client/src/pages/image-editor.tsx

@@ -130,33 +130,36 @@ export default function ImageEditor() {
       transformations.push(`e_${filters.effect}`);
     }
 
-    // Ribbon overlay (simple rectangle in corner - NO rotation)
+    // Ribbon overlay (small diagonal banner in corner)
     if (ribbon.enabled) {
       const ribbonColor = ribbon.color === "red" ? "FF0000" : "FFC107";
       // URL encode the text to handle accents and special characters
       const ribbonText = encodeURIComponent(ribbon.text);
       
+      // Diagonal banner - minimal size
+      const isNorthWest = ribbon.position === "north_west";
+      const rotation = isNorthWest ? "-45" : "45";
+      
       transformations.push(
-        // Simple rectangle with padding, positioned in corner
+        // Minimal padding - just text with small background
-        `l_text:Arial_50_bold:  ${ribbonText}  ,co_white,b_rgb:${ribbonColor}`,
+        `l_text:Arial_28_bold: ${ribbonText} ,co_white,b_rgb:${ribbonColor}`,
-        `fl_layer_apply,g_${ribbon.position},x_0,y_0`
+        `a_${rotation}`,
+        `fl_layer_apply,g_${ribbon.position},x_10,y_10`
       );
     }
 
-    // Price badge overlay (starburst/éclaté effect with centered price)
+    // Price badge overlay (circular background with centered price)
     if (priceBadge.enabled && priceBadge.price) {
       const badgeColor = priceBadge.color === "red" ? "DC2626" : "FFC107";
       // URL encode the price text
       const priceText = encodeURIComponent(`€${priceBadge.price}`);
       
-      // Create burst/éclaté effect using starburst character
+      // Create circular badge with equal padding to ensure circle shape
       transformations.push(
-        // Large starburst background (éclaté shape)
+        // Price with equal padding on all sides for perfect circle
-        `l_text:Arial_180_bold:✦,co_rgb:${badgeColor}`,
+        `l_text:Arial_38_bold:    ${priceText}    ,co_white,b_rgb:${badgeColor}`,
-        `fl_layer_apply,g_${priceBadge.position},x_30,y_30`,
+        `r_max`,  // Maximum rounding for circular effect
-        // Price text centered on top
+        `fl_layer_apply,g_${priceBadge.position},x_20,y_20`
-        `l_text:Arial_44_bold:${priceText},co_white`,
-        `fl_layer_apply,g_${priceBadge.position},x_30,y_30`
       );
     }