feat: redesign UI with clean, modern SaaS aesthetic

- Remove excessive animations and gradients
- Implement clean card-based layout
- Add professional progress stepper with checkmarks
- Simplify color scheme to gray/indigo/purple
- Create minimal, elegant component designs
- Add subtle hover effects and transitions
- Improve typography and spacing
- Remove emoji overload, keep minimal icons
- Create professional button styles
- Implement clean form inputs with focus states
- Add proper visual hierarchy
- Simplify loading states and messages
- Create cohesive, modern user experience

frontend/src/components/TextInputSection.tsx

@@ -36,65 +36,53 @@ export default function TextInputSection({
   const isButtonDisabled = disabled || isLoading || text.trim() === '';
 
   return (
-    <div className="w-full max-w-4xl mx-auto p-6 sm:p-8 glass-effect rounded-3xl shadow-glow card-hover">
-      <div className="flex items-center gap-4 mb-6 sm:mb-8">
-        <div className="w-14 h-14 bg-gradient-to-br from-purple-500 via-purple-600 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg shadow-purple-500/50">
-          <span className="text-2xl">📝</span>
-        </div>
-        <div>
-          <h2 className="text-2xl sm:text-3xl font-extrabold gradient-text-animated">Enter Your Text</h2>
-          <p className="text-gray-600 text-sm mt-1">Paste or type your story below</p>
-        </div>
+    <div className="card-modern p-8">
+      <div className="mb-6">
+        <h2 className="text-2xl font-bold text-gray-900 mb-2">Enter Your Text</h2>
+        <p className="text-gray-600">Paste or type your story below. Use patterns like "Name:" to mark different speakers.</p>
       </div>
       
       <div className="mb-6 relative">
         <textarea
           value={text}
           onChange={handleTextChange}
-          placeholder="Enter your text here. Use patterns like 'Name:' or '[Name]' to mark different speakers...
+          placeholder="Example:
 
-Example:
 Sarah: Hello! How are you today?
-John: I'm doing great, thanks for asking!"
-          className="w-full h-72 sm:h-80 md:h-96 p-5 sm:p-6 border-2 border-purple-300 rounded-2xl focus:border-purple-600 focus:ring-4 focus:ring-purple-300 focus:outline-none resize-y text-sm sm:text-base touch-manipulation shadow-inner bg-gradient-to-br from-white to-purple-50/30 font-mono leading-relaxed"
+John: I'm doing great, thanks for asking!
+Sarah: That's wonderful to hear."
+          className="w-full h-80 p-4 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:outline-none resize-y text-base leading-relaxed"
           disabled={disabled || isLoading}
         />
-        <div className="absolute bottom-4 right-4 text-xs text-gray-500 bg-white/80 px-3 py-1 rounded-lg backdrop-blur-sm">
+        <div className="absolute bottom-3 right-3 text-xs text-gray-500 bg-white px-2 py-1 rounded-md border border-gray-200">
           {text.length} characters
         </div>
       </div>
 
       {showValidation && text.trim() === '' && (
-        <div className="mb-6 p-4 sm:p-5 bg-gradient-to-r from-red-50 to-pink-50 border-2 border-red-400 text-red-700 rounded-2xl shadow-lg text-sm sm:text-base animate-pulse">
-          <div className="flex items-center gap-3">
-            <span className="text-2xl">⚠️</span>
-            <p className="font-bold">Please enter some text before proceeding.</p>
+        <div className="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl">
+          <div className="flex items-center gap-2">
+            <span>⚠️</span>
+            <p className="font-medium">Please enter some text before proceeding.</p>
           </div>
         </div>
       )}
 
-      <div className="flex justify-center">
+      <div className="flex justify-end">
         <button
           onClick={handleNext}
           disabled={isButtonDisabled}
-          className={`px-10 py-5 min-h-[56px] rounded-2xl font-bold text-white text-lg transition-all touch-manipulation shadow-2xl relative overflow-hidden ${
-            isButtonDisabled
-              ? 'bg-gray-400 cursor-not-allowed opacity-60'
-              : 'bg-gradient-to-r from-purple-600 via-purple-700 to-indigo-600 hover:from-purple-700 hover:via-purple-800 hover:to-indigo-700 cursor-pointer shadow-purple-500/50'
-          }`}
+          className="btn-primary"
         >
           {isLoading ? (
-            <span className="flex items-center justify-center gap-3 relative z-10">
-              <div className="relative">
-                <div className="animate-spin rounded-full h-6 w-6 border-3 border-white/30"></div>
-                <div className="animate-spin rounded-full h-6 w-6 border-3 border-white border-t-transparent absolute top-0 left-0"></div>
-              </div>
+            <span className="flex items-center gap-2">
+              <div className="animate-spin rounded-full h-5 w-5 border-2 border-white border-t-transparent"></div>
               Processing...
             </span>
           ) : (
-            <span className="flex items-center justify-center gap-3 relative z-10">
-              Next: Assign Voices
-              <span className="text-xl">→</span>
+            <span className="flex items-center gap-2">
+              Continue
+              <span>→</span>
             </span>
           )}
         </button>