feat: modernize UI with gradient design, glass morphism, and enhanced visual appeal

- Add purple/indigo gradient background throughout app
- Implement glass morphism effects on all cards
- Add gradient buttons with smooth hover animations
- Integrate emoji icons for better visual communication
- Enhance typography with improved font stack
- Add loading spinners and smooth transitions
- Improve color scheme with modern purple/indigo palette
- Add glowing shadows and depth effects
- Maintain responsive design and touch-friendly interactions

frontend/src/components/TextInputSection.tsx

@@ -36,35 +36,50 @@ export default function TextInputSection({
   const isButtonDisabled = disabled || isLoading || text.trim() === '';
 
   return (
-    <div className="w-full max-w-4xl mx-auto p-4 sm:p-6">
-      <h2 className="text-xl sm:text-2xl font-bold mb-3 sm:mb-4">Enter Your Text</h2>
+    <div className="w-full max-w-4xl mx-auto p-4 sm:p-6 glass-effect rounded-2xl shadow-glow">
+      <div className="flex items-center gap-3 mb-4 sm:mb-6">
+        <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
+          <span className="text-xl">📝</span>
+        </div>
+        <h2 className="text-xl sm:text-2xl font-bold gradient-text">Enter Your Text</h2>
+      </div>
       
       <div className="mb-4">
         <textarea
           value={text}
           onChange={handleTextChange}
           placeholder="Enter your text here. Use patterns like 'Name:' or '[Name]' to mark different speakers..."
-          className="w-full h-64 sm:h-80 md:h-96 p-3 sm:p-4 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none resize-y text-sm sm:text-base touch-manipulation"
+          className="w-full h-64 sm:h-80 md:h-96 p-4 sm:p-5 border-2 border-purple-200 rounded-xl focus:border-purple-500 focus:ring-4 focus:ring-purple-200 focus:outline-none resize-y text-sm sm:text-base touch-manipulation shadow-sm"
           disabled={disabled || isLoading}
         />
       </div>
 
       {showValidation && text.trim() === '' && (
-        <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded text-sm sm:text-base">
-          Please enter some text before proceeding.
+        <div className="mb-4 p-3 sm:p-4 bg-red-50 border-2 border-red-300 text-red-700 rounded-xl shadow-sm text-sm sm:text-base">
+          <span className="font-semibold">⚠️</span> Please enter some text before proceeding.
         </div>
       )}
 
       <button
         onClick={handleNext}
         disabled={isButtonDisabled}
-        className={`w-full sm:w-auto px-6 py-3 min-h-[44px] rounded-lg font-semibold text-white transition-colors touch-manipulation ${
+        className={`w-full sm:w-auto px-8 py-4 min-h-[44px] rounded-xl font-semibold text-white transition-all touch-manipulation shadow-lg ${
           isButtonDisabled
-            ? 'bg-gray-400 cursor-not-allowed'
-            : 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800 cursor-pointer'
+            ? 'bg-gray-400 cursor-not-allowed opacity-60'
+            : 'bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 cursor-pointer'
         }`}
       >
-        {isLoading ? 'Processing...' : 'Next: Assign voices'}
+        {isLoading ? (
+          <span className="flex items-center justify-center gap-2">
+            <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
+            Processing...
+          </span>
+        ) : (
+          <span className="flex items-center justify-center gap-2">
+            Next: Assign voices
+            <span>→</span>
+          </span>
+        )}
       </button>
     </div>
   );