Sync from GitHub: 348f87ee32be977289a37d8330e6a2ca58fee0c9

frontend/src/App.jsx

@@ -205,7 +205,13 @@ function App() {
                 </span>
               </div>
 
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              <div className={`grid gap-4 ${
+                previewImages.length === 1 
+                  ? 'grid-cols-1 max-w-2xl mx-auto' 
+                  : previewImages.length === 2 
+                    ? 'grid-cols-1 md:grid-cols-2' 
+                    : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'
+              }`}>
                 {previewImages.map((preview, idx) => (
                   <ImagePreview
                     key={preview.key}
@@ -322,7 +328,7 @@ function App() {
 
         {/* Footer */}
         <div className="mt-12 text-center text-white/80 text-sm">
-          <p>Powered by AI • Secure Processing • Fast & Accurate</p>
+          <p>By Team DevBytes ⚡</p>
         </div>
       </div>
     </div>

frontend/src/components/ImagePreview.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Slider } from 'lucide-react';
+import { SlidersHorizontal } from 'lucide-react';
 
 const ImagePreview = ({ imageData, fileName, onResolutionChange }) => {
   const [resolution, setResolution] = useState(100);
@@ -71,20 +71,22 @@ const ImagePreview = ({ imageData, fileName, onResolutionChange }) => {
       <div className="space-y-2">
         <div className="flex items-center justify-between">
           <label className="text-sm font-medium text-gray-700 flex items-center gap-2">
-            <Slider className="w-4 h-4" />
+            <SlidersHorizontal className="w-4 h-4" />
             Resolution
           </label>
           <span className="text-sm font-bold text-primary-600">{resolution}%</span>
         </div>
         
         <input
-          type="range"
-          min="10"
-          max="100"
-          value={resolution}
-          onChange={handleResolutionChange}
-          className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
+            type="range"
+            min="10"
+            max="100"
+            value={resolution}
+            onChange={handleResolutionChange}
+            className="w-full h-2 rounded-lg cursor-pointer"
+            style={{ accentColor: '#2563eb' }} // Tailwind blue-600
         />
+
         
         <div className="flex justify-between text-xs text-gray-500">
           <span>Low Quality</span>