Improve ribbon overlay to create a corner banner effect

Refactor ribbon overlay in ImageEditor to implement a rotated corner banner with adjustable positioning, rotation, and offset, using Cloudinary's text layer and transformation features.

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/dE5lg1s

client/src/pages/image-editor.tsx

@@ -130,16 +130,24 @@ export default function ImageEditor() {
       transformations.push(`e_${filters.effect}`);
     }
 
-    // Ribbon overlay (rectangle in corner)
+    // Ribbon overlay (corner banner/triangle like in the example image)
     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);
       
+      // Create corner banner effect
+      // Position determines rotation and offset
+      const isTopLeft = ribbon.position === "north_west";
+      const rotation = isTopLeft ? "-45" : "45";
+      const offsetX = isTopLeft ? "60" : "-60";
+      const offsetY = isTopLeft ? "60" : "-60";
+      
       transformations.push(
-        // Create rectangle ribbon with padding, positioned in corner
-        `l_text:Arial_40_bold:  ${ribbonText}  ,co_white,b_rgb:${ribbonColor}`,
-        `fl_layer_apply,g_${ribbon.position},x_10,y_10`
+        // Long rectangle banner with padding, rotated 45 degrees
+        `l_text:Arial_32_bold:       ${ribbonText}       ,co_white,b_rgb:${ribbonColor}`,
+        `a_${rotation}`,
+        `fl_layer_apply,g_${ribbon.position},x_${offsetX},y_${offsetY}`
       );
     }