Redesign UI with premium interactive glassmorphic dark theme

frontend/src/components/Layout.jsx

@@ -1,41 +1,59 @@
 import { useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import Sidebar from './Sidebar';
-import { Menu } from 'lucide-react';
-import { motion } from 'framer-motion';
+import { Menu, Zap } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
 
 export default function Layout({ children }) {
     const [sidebarOpen, setSidebarOpen] = useState(false);
+    const location = useLocation();
 
     return (
-        <div className="flex min-h-screen">
+        <div className="relative flex min-h-screen z-10">
             <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
 
-            <main className="flex-1 min-h-screen">
+            <main className="flex-1 min-h-screen flex flex-col">
                 {/* Top bar */}
-                <header className="flex items-center gap-4 px-4 sm:px-8 py-4 lg:py-6">
+                <header className="flex items-center gap-4 px-4 sm:px-8 py-4 lg:py-5">
                     <button
                         onClick={() => setSidebarOpen(true)}
-                        className="lg:hidden p-2 hover:bg-white/5 rounded-xl transition-colors"
+                        className="lg:hidden p-2.5 hover:bg-white/5 rounded-xl transition-all border border-white/[0.06] active:scale-95"
                     >
-                        <Menu size={22} />
+                        <Menu size={20} />
                     </button>
+
                     <div className="flex-1" />
-                    <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20">
-                        <span className="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" />
-                        <span className="text-xs font-semibold text-emerald-400">Online</span>
+
+                    {/* Status badge */}
+                    <div className="flex items-center gap-3">
+                        <div className="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-xl bg-white/[0.03] border border-white/[0.06] text-xs text-slate-400">
+                            <Zap size={12} className="text-amber-400" />
+                            <span>Models Loaded</span>
+                        </div>
+                        <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20">
+                            <span className="relative flex h-2 w-2">
+                                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
+                                <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
+                            </span>
+                            <span className="text-xs font-semibold text-emerald-400">Online</span>
+                        </div>
                     </div>
                 </header>
 
                 {/* Content */}
-                <motion.div
-                    key={location.pathname}
-                    initial={{ opacity: 0, y: 12 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.35 }}
-                    className="px-4 sm:px-8 pb-8"
-                >
-                    {children}
-                </motion.div>
+                <div className="flex-1 px-4 sm:px-8 pb-8">
+                    <AnimatePresence mode="wait">
+                        <motion.div
+                            key={location.pathname}
+                            initial={{ opacity: 0, y: 16, filter: 'blur(4px)' }}
+                            animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
+                            exit={{ opacity: 0, y: -8, filter: 'blur(4px)' }}
+                            transition={{ duration: 0.35, ease: [0.4, 0, 0.2, 1] }}
+                        >
+                            {children}
+                        </motion.div>
+                    </AnimatePresence>
+                </div>
             </main>
         </div>
     );

frontend/src/components/Sidebar.jsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
-import { NavLink, useLocation } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
     LayoutDashboard, User, PenTool, Languages, Smile, Brain,
-    Target, PieChart, Braces, ShoppingCart, Menu, X
+    Target, PieChart, Braces, ShoppingCart, X, Sparkles
 } from 'lucide-react';
 
 const navItems = [
@@ -29,7 +29,7 @@ export default function Sidebar({ isOpen, onClose }) {
                         initial={{ opacity: 0 }}
                         animate={{ opacity: 1 }}
                         exit={{ opacity: 0 }}
-                        className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden"
+                        className="fixed inset-0 bg-black/70 backdrop-blur-md z-40 lg:hidden"
                         onClick={onClose}
                     />
                 )}
@@ -38,49 +38,72 @@ export default function Sidebar({ isOpen, onClose }) {
             {/* Sidebar */}
             <aside className={`
         fixed top-0 left-0 h-screen w-[280px] z-50
-        bg-[#0a0f1c] border-r border-white/8
-        flex flex-col p-6 gap-6
+        bg-[#060a15]/95 backdrop-blur-xl
+        border-r border-white/[0.06]
+        flex flex-col py-6 px-4 gap-4
         transition-transform duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]
         lg:translate-x-0 lg:static
-        ${isOpen ? 'translate-x-0 shadow-2xl' : '-translate-x-full'}
+        ${isOpen ? 'translate-x-0 shadow-[4px_0_40px_rgba(0,0,0,0.5)]' : '-translate-x-full'}
       `}>
                 {/* Brand */}
-                <div className="flex items-center gap-3 px-2">
-                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-400 to-purple-500 grid place-items-center font-extrabold text-white text-sm">
-                        AI
+                <div className="flex items-center gap-3 px-3 mb-2">
+                    <div className="relative">
+                        <div className="w-11 h-11 rounded-2xl bg-gradient-to-br from-cyan-500 via-blue-500 to-purple-600 grid place-items-center font-black text-white text-sm shadow-lg shadow-cyan-500/20">
+                            AI
+                        </div>
+                        <div className="absolute -top-0.5 -right-0.5 w-3 h-3 bg-emerald-400 rounded-full border-2 border-[#060a15] animate-pulse" />
                     </div>
-                    <span className="text-lg font-bold tracking-tight">Quantum Hub</span>
-                    <button onClick={onClose} className="lg:hidden ml-auto p-1 hover:bg-white/5 rounded-lg">
-                        <X size={20} />
+                    <div className="flex flex-col">
+                        <span className="text-base font-bold tracking-tight">Quantum Hub</span>
+                        <span className="text-[10px] text-cyan-500/80 font-semibold uppercase tracking-widest">AI Platform</span>
+                    </div>
+                    <button onClick={onClose} className="lg:hidden ml-auto p-1.5 hover:bg-white/5 rounded-xl transition-colors">
+                        <X size={18} />
                     </button>
                 </div>
 
+                {/* Divider */}
+                <div className="h-px bg-gradient-to-r from-transparent via-white/10 to-transparent mx-2" />
+
+                {/* Label */}
+                <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 px-4 mt-1">Services</p>
+
                 {/* Nav */}
-                <nav className="flex flex-col gap-1 flex-1 overflow-y-auto">
+                <nav className="flex flex-col gap-0.5 flex-1 overflow-y-auto px-1">
                     {navItems.map(({ path, label, icon: Icon }) => (
                         <NavLink
                             key={path}
                             to={path}
                             onClick={onClose}
                             className={({ isActive }) => `
-                flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium
-                transition-all duration-200
+                flex items-center gap-3 px-4 py-2.5 rounded-xl text-[13px] font-medium
+                transition-all duration-200 group relative
                 ${isActive
-                                    ? 'bg-cyan-500/10 text-cyan-400'
-                                    : 'text-slate-400 hover:bg-white/5 hover:text-slate-200'
+                                    ? 'bg-gradient-to-r from-cyan-500/10 to-purple-500/5 text-cyan-400 shadow-sm shadow-cyan-500/5'
+                                    : 'text-slate-400 hover:bg-white/[0.04] hover:text-slate-200'
                                 }
               `}
                         >
-                            <Icon size={18} />
-                            <span>{label}</span>
+                            {({ isActive }) => (
+                                <>
+                                    {isActive && (
+                                        <div className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-5 bg-gradient-to-b from-cyan-400 to-purple-500 rounded-full" />
+                                    )}
+                                    <Icon size={16} className={`transition-transform duration-200 ${isActive ? '' : 'group-hover:scale-110'}`} />
+                                    <span>{label}</span>
+                                </>
+                            )}
                         </NavLink>
                     ))}
                 </nav>
 
                 {/* Footer */}
-                <div className="px-3 py-3 rounded-xl bg-white/3 border border-white/5 text-center">
-                    <p className="text-xs text-slate-500">Powered by</p>
-                    <p className="text-xs font-semibold gradient-text">Quantum AI Engine</p>
+                <div className="mx-2 p-4 rounded-2xl bg-gradient-to-br from-cyan-500/[0.07] to-purple-500/[0.04] border border-white/[0.05]">
+                    <div className="flex items-center gap-2 mb-1">
+                        <Sparkles size={14} className="text-cyan-400" />
+                        <p className="text-[11px] font-bold text-cyan-400">Pro Features</p>
+                    </div>
+                    <p className="text-[11px] text-slate-500 leading-relaxed">9 AI engines ready to process your data.</p>
                 </div>
             </aside>
         </>

frontend/src/components/UI.jsx

@@ -1,11 +1,23 @@
 import { motion } from 'framer-motion';
-import { Loader2 } from 'lucide-react';
+import { Loader2, AlertTriangle, CloudUpload, CheckCircle2 } from 'lucide-react';
+import { useState } from 'react';
 
-export function PageHeader({ title, subtitle }) {
+export function PageHeader({ title, subtitle, icon: Icon }) {
     return (
         <div className="mb-8">
-            <h1 className="text-2xl sm:text-3xl font-bold tracking-tight">{title}</h1>
-            {subtitle && <p className="text-slate-400 mt-1 text-sm sm:text-base">{subtitle}</p>}
+            <motion.div
+                initial={{ opacity: 0, x: -12 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ duration: 0.4 }}
+            >
+                {Icon && (
+                    <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-cyan-500/20 to-purple-500/10 border border-white/[0.06] grid place-items-center mb-4">
+                        <Icon size={22} className="text-cyan-400" />
+                    </div>
+                )}
+                <h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight">{title}</h1>
+                {subtitle && <p className="text-slate-400 mt-2 text-sm sm:text-base leading-relaxed max-w-xl">{subtitle}</p>}
+            </motion.div>
         </div>
     );
 }
@@ -13,9 +25,10 @@ export function PageHeader({ title, subtitle }) {
 export function ResultBox({ children, className = '' }) {
     return (
         <motion.div
-            initial={{ opacity: 0, y: 16 }}
-            animate={{ opacity: 1, y: 0 }}
-            className={`mt-6 p-5 sm:p-6 rounded-2xl bg-gradient-to-br from-cyan-500/5 to-purple-500/5 border border-cyan-500/10 ${className}`}
+            initial={{ opacity: 0, y: 20, scale: 0.98 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            transition={{ duration: 0.5, ease: [0.4, 0, 0.2, 1] }}
+            className={`mt-6 p-6 sm:p-7 rounded-2xl bg-gradient-to-br from-cyan-500/[0.06] to-purple-500/[0.04] border border-cyan-500/10 backdrop-blur-sm ${className}`}
         >
             {children}
         </motion.div>
@@ -26,44 +39,100 @@ export function ErrorBox({ message }) {
     if (!message) return null;
     return (
         <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="mt-4 p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm"
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="mt-4 p-4 rounded-2xl bg-red-500/[0.08] border border-red-500/20 text-red-400 text-sm flex items-start gap-3"
         >
-            ⚠️ {message}
+            <AlertTriangle size={18} className="mt-0.5 flex-shrink-0" />
+            <span>{message}</span>
         </motion.div>
     );
 }
 
 export function SubmitButton({ loading, children, onClick, type = 'submit' }) {
     return (
-        <button
+        <motion.button
             type={type}
             onClick={onClick}
             disabled={loading}
-            className="btn-quantum w-full py-3.5 px-6 text-base font-bold rounded-xl flex items-center justify-center gap-2 disabled:opacity-60"
+            whileTap={{ scale: 0.97 }}
+            className="btn-quantum w-full py-4 px-6 text-base font-bold rounded-2xl flex items-center justify-center gap-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
         >
-            {loading ? <Loader2 className="animate-spin" size={20} /> : null}
-            {loading ? 'Processing...' : children}
-        </button>
+            {loading ? (
+                <>
+                    <Loader2 className="animate-spin" size={20} />
+                    <span>Processing...</span>
+                </>
+            ) : children}
+        </motion.button>
     );
 }
 
 export function UploadZone({ accept, name, onChange, label, sublabel }) {
+    const [fileName, setFileName] = useState('');
+    const [isDragging, setIsDragging] = useState(false);
+
+    const handleChange = (e) => {
+        if (e.target.files[0]) {
+            setFileName(e.target.files[0].name);
+        }
+        onChange?.(e);
+    };
+
     return (
-        <label className="block cursor-pointer">
-            <div className="border-2 border-dashed border-white/10 rounded-2xl p-8 text-center hover:border-cyan-500/30 hover:bg-cyan-500/3 transition-all">
-                <div className="text-3xl mb-3 gradient-text">☁️</div>
-                <p className="font-semibold text-sm">{label || 'Click to upload'}</p>
-                <p className="text-xs text-slate-500 mt-1">{sublabel || 'Drag and drop supported'}</p>
-            </div>
+        <label
+            className="block cursor-pointer"
+            onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
+            onDragLeave={() => setIsDragging(false)}
+            onDrop={() => setIsDragging(false)}
+        >
+            <motion.div
+                whileHover={{ scale: 1.01 }}
+                className={`
+          border-2 border-dashed rounded-2xl p-10 text-center
+          transition-all duration-300
+          ${isDragging
+                        ? 'border-cyan-400/50 bg-cyan-500/[0.06] shadow-lg shadow-cyan-500/5'
+                        : fileName
+                            ? 'border-emerald-500/30 bg-emerald-500/[0.04]'
+                            : 'border-white/[0.08] hover:border-cyan-500/20 hover:bg-white/[0.02]'
+                    }
+        `}
+            >
+                {fileName ? (
+                    <div className="flex flex-col items-center gap-2">
+                        <CheckCircle2 size={32} className="text-emerald-400" />
+                        <p className="text-sm font-semibold text-emerald-400">{fileName}</p>
+                        <p className="text-xs text-slate-500">Click to change file</p>
+                    </div>
+                ) : (
+                    <div className="flex flex-col items-center gap-3">
+                        <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-purple-500/5 border border-white/[0.06] grid place-items-center">
+                            <CloudUpload size={24} className="text-cyan-400" />
+                        </div>
+                        <div>
+                            <p className="font-semibold text-sm text-slate-200">{label || 'Click to upload'}</p>
+                            <p className="text-xs text-slate-500 mt-1">{sublabel || 'Drag and drop supported'}</p>
+                        </div>
+                    </div>
+                )}
+            </motion.div>
             <input
                 type="file"
                 accept={accept}
                 name={name}
-                onChange={onChange}
+                onChange={handleChange}
                 className="hidden"
             />
         </label>
     );
 }
+
+export function SectionLabel({ children }) {
+    return (
+        <p className="text-[11px] font-bold uppercase tracking-[0.15em] text-purple-400 mb-3 flex items-center gap-2">
+            <span className="w-1.5 h-1.5 rounded-full bg-purple-400 animate-pulse" />
+            {children}
+        </p>
+    );
+}

frontend/src/index.css

@@ -2,30 +2,83 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
 
+/* ===== DESIGN SYSTEM ===== */
 :root {
-  --bg-deep: #050a14;
-  --sidebar-bg: #0a0f1c;
-  --card-bg: rgba(15, 23, 42, 0.6);
-  --glass-border: rgba(255, 255, 255, 0.08);
-  --accent-cyan: #00d4ff;
+  --bg-deep: #030712;
+  --bg-surface: #0a0f1e;
+  --card-bg: rgba(15, 23, 42, 0.5);
+  --glass-border: rgba(255, 255, 255, 0.06);
+  --glass-border-hover: rgba(255, 255, 255, 0.12);
+  --accent-cyan: #06b6d4;
   --accent-purple: #a855f7;
-  --text-primary: #f0f2f5;
+  --accent-blue: #3b82f6;
+  --accent-pink: #ec4899;
+  --text-primary: #f1f5f9;
   --text-secondary: #64748b;
+  --text-muted: #475569;
+  --glow-cyan: rgba(6, 182, 212, 0.15);
+  --glow-purple: rgba(168, 85, 247, 0.15);
 }
 
 * {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   background: var(--bg-deep);
   color: var(--text-primary);
   overflow-x: hidden;
+  min-height: 100vh;
+}
+
+/* ===== ANIMATED BACKGROUND ===== */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background:
+    radial-gradient(ellipse 600px 400px at 15% 20%, rgba(6, 182, 212, 0.08) 0%, transparent 70%),
+    radial-gradient(ellipse 500px 500px at 85% 80%, rgba(168, 85, 247, 0.06) 0%, transparent 70%),
+    radial-gradient(ellipse 400px 300px at 50% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 70%);
+  pointer-events: none;
+  z-index: 0;
+  animation: bgPulse 8s ease-in-out infinite alternate;
+}
+
+@keyframes bgPulse {
+  0% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+  }
 }
 
-/* Custom scrollbar */
+/* Noise texture overlay */
+body::after {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
+  opacity: 0.4;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ===== SCROLLBAR ===== */
 ::-webkit-scrollbar {
-  width: 6px;
+  width: 5px;
 }
 
 ::-webkit-scrollbar-track {
@@ -33,75 +86,199 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.15);
 }
 
-/* Glass Card */
+/* ===== GLASS CARD ===== */
 .glass-card {
+  position: relative;
   background: var(--card-bg);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(24px) saturate(1.2);
+  -webkit-backdrop-filter: blur(24px) saturate(1.2);
   border: 1px solid var(--glass-border);
-  border-radius: 20px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 24px;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+.glass-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
 }
 
 .glass-card:hover {
-  border-color: rgba(255, 255, 255, 0.15);
+  border-color: var(--glass-border-hover);
+  box-shadow: 0 8px 40px -12px rgba(0, 0, 0, 0.4), 0 0 20px var(--glow-cyan);
 }
 
-/* Gradient text */
+/* ===== GRADIENT TEXT ===== */
 .gradient-text {
-  background: linear-gradient(135deg, #00d4ff, #a855f7);
+  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
-/* Quantum button */
+.gradient-text-warm {
+  background: linear-gradient(135deg, #f97316, #ec4899);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ===== QUANTUM BUTTON ===== */
 .btn-quantum {
-  background: linear-gradient(135deg, #00d4ff 0%, #a855f7 100%);
+  position: relative;
+  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
   color: white;
   border: none;
-  border-radius: 14px;
+  border-radius: 16px;
   font-weight: 700;
   cursor: pointer;
-  transition: all 0.3s;
-  box-shadow: 0 8px 25px -8px rgba(0, 212, 255, 0.4);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 20px -4px rgba(6, 182, 212, 0.4);
+  overflow: hidden;
+  z-index: 1;
+}
+
+.btn-quantum::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-cyan) 100%);
+  opacity: 0;
+  transition: opacity 0.4s;
+  z-index: -1;
+}
+
+.btn-quantum:hover::before {
+  opacity: 1;
 }
 
 .btn-quantum:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 12px 35px -8px rgba(0, 212, 255, 0.5);
+  transform: translateY(-3px);
+  box-shadow: 0 12px 40px -8px rgba(6, 182, 212, 0.5), 0 0 20px rgba(168, 85, 247, 0.2);
 }
 
 .btn-quantum:active {
-  transform: translateY(0);
+  transform: translateY(-1px);
 }
 
-/* Custom input styles */
+/* ===== INPUTS ===== */
 .quantum-input {
   width: 100%;
   background: rgba(0, 0, 0, 0.3);
   border: 1px solid var(--glass-border);
-  border-radius: 14px;
-  padding: 14px 18px;
+  border-radius: 16px;
+  padding: 16px 20px;
   color: var(--text-primary);
-  font-size: 1rem;
-  transition: all 0.3s;
+  font-size: 0.95rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   outline: none;
 }
 
 .quantum-input:focus {
   border-color: var(--accent-cyan);
-  box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.1);
+  box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.1), 0 0 20px rgba(6, 182, 212, 0.05);
+  background: rgba(0, 0, 0, 0.4);
 }
 
 .quantum-input::placeholder {
-  color: var(--text-secondary);
+  color: var(--text-muted);
+}
+
+/* Select dropdown */
+select.quantum-input {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 12px center;
+  background-repeat: no-repeat;
+  background-size: 20px;
+  padding-right: 40px;
+}
+
+select.quantum-input option {
+  background: #0f172a;
+  color: white;
+}
+
+/* ===== FLOATING ORB ANIMATION ===== */
+@keyframes float {
+
+  0%,
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+
+  50% {
+    transform: translateY(-20px) rotate(3deg);
+  }
+}
+
+@keyframes glow {
+
+  0%,
+  100% {
+    opacity: 0.5;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+.animate-glow {
+  animation: glow 3s ease-in-out infinite;
+}
+
+/* Shimmer loading effect */
+.shimmer {
+  background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.05) 50%, transparent 75%);
+  background-size: 200% 100%;
+  animation: shimmer 2s infinite;
+}
+
+/* ===== STAT COUNTER ===== */
+.stat-glow {
+  position: relative;
+}
+
+.stat-glow::after {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: 20px;
+  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
+  opacity: 0;
+  z-index: -1;
+  transition: opacity 0.3s;
+  filter: blur(8px);
+}
+
+.stat-glow:hover::after {
+  opacity: 0.3;
 }

frontend/src/pages/AssociationRules.jsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import axios from 'axios';
 import { ShoppingCart } from 'lucide-react';
-import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone } from '../components/UI';
+import { motion } from 'framer-motion';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone, SectionLabel } from '../components/UI';
 
 export default function AssociationRules() {
     const [file, setFile] = useState(null);
@@ -17,14 +18,12 @@ export default function AssociationRules() {
         e.preventDefault();
         if (!file) return setError('Please upload a file');
         setLoading(true); setError(''); setResult(null);
-
         const fd = new FormData();
         fd.append('file', file);
         fd.append('metric', metric);
         fd.append('min_support', minSupport);
         fd.append('min_threshold', minThreshold);
         fd.append('has_header', hasHeader);
-
         try {
             const res = await axios.post('/api/apriori', fd);
             setResult(res.data);
@@ -35,31 +34,30 @@ export default function AssociationRules() {
 
     return (
         <div className="max-w-4xl mx-auto">
-            <PageHeader title="Association Rules" subtitle="Discover hidden relationships in transactional datasets using Apriori." />
+            <PageHeader icon={ShoppingCart} title="Association Rules" subtitle="Discover hidden relationships in transactional datasets using the Apriori algorithm." />
 
-            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-6">
                 <UploadZone accept=".csv,.xlsx" onChange={(e) => setFile(e.target.files[0])} label="Upload Transaction Data" sublabel=".CSV or .XLSX (each row = transaction)" />
-                {file && <p className="text-sm text-cyan-400 text-center font-medium">📊 {file.name}</p>}
 
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                     <div>
-                        <label className="block text-sm font-semibold text-slate-300 mb-2">Metric</label>
+                        <label className="block text-sm font-semibold text-slate-300 mb-2.5">Metric</label>
                         <select value={metric} onChange={(e) => setMetric(e.target.value)} className="quantum-input">
                             <option value="lift">Lift</option>
                             <option value="confidence">Confidence</option>
                         </select>
                     </div>
                     <div>
-                        <label className="block text-sm font-semibold text-slate-300 mb-2">Min Support</label>
+                        <label className="block text-sm font-semibold text-slate-300 mb-2.5">Min Support</label>
                         <input type="number" value={minSupport} onChange={(e) => setMinSupport(e.target.value)} step="0.01" min="0.01" max="1" className="quantum-input" />
                     </div>
                     <div>
-                        <label className="block text-sm font-semibold text-slate-300 mb-2">Min Threshold</label>
+                        <label className="block text-sm font-semibold text-slate-300 mb-2.5">Min Threshold</label>
                         <input type="number" value={minThreshold} onChange={(e) => setMinThreshold(e.target.value)} step="0.1" min="0.1" className="quantum-input" />
                     </div>
                     <div className="flex items-end">
-                        <label className="flex items-center gap-3 cursor-pointer text-sm text-slate-300">
-                            <input type="checkbox" checked={hasHeader} onChange={(e) => setHasHeader(e.target.checked)} className="w-4 h-4 rounded" />
+                        <label className="flex items-center gap-3 cursor-pointer text-sm text-slate-300 bg-white/[0.02] border border-white/[0.05] rounded-2xl px-4 py-3 w-full hover:bg-white/[0.04] transition-colors">
+                            <input type="checkbox" checked={hasHeader} onChange={(e) => setHasHeader(e.target.checked)} className="w-4 h-4 rounded accent-cyan-500" />
                             File has header row
                         </label>
                     </div>
@@ -74,37 +72,41 @@ export default function AssociationRules() {
 
             {result && (
                 <ResultBox>
-                    <p className="text-xs font-bold uppercase tracking-widest text-purple-400 mb-4">
-                        Mining Results: {result.count} rules discovered
-                    </p>
-                    <div className="overflow-x-auto -mx-2">
+                    <SectionLabel>Mining Results: {result.count} rules discovered</SectionLabel>
+                    <div className="overflow-x-auto -mx-2 rounded-2xl border border-white/[0.05]">
                         <table className="w-full text-sm">
                             <thead>
-                                <tr className="text-left text-xs uppercase tracking-wider text-slate-500 border-b border-white/10">
-                                    <th className="p-3">Antecedents (If)</th>
-                                    <th className="p-3">Consequents (Then)</th>
-                                    <th className="p-3">Support</th>
-                                    <th className="p-3">Confidence</th>
-                                    <th className="p-3">Lift</th>
+                                <tr className="text-left text-[11px] uppercase tracking-wider text-slate-500 bg-white/[0.02]">
+                                    <th className="p-4">Antecedents</th>
+                                    <th className="p-4">Consequents</th>
+                                    <th className="p-4">Support</th>
+                                    <th className="p-4">Confidence</th>
+                                    <th className="p-4">Lift</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 {result.rules?.map((rule, i) => (
-                                    <tr key={i} className="border-b border-white/5 hover:bg-white/3">
-                                        <td className="p-3">
-                                            <span className="px-2 py-0.5 rounded text-xs font-semibold bg-blue-500/20 text-blue-400">
+                                    <motion.tr
+                                        key={i}
+                                        initial={{ opacity: 0 }}
+                                        animate={{ opacity: 1 }}
+                                        transition={{ delay: i * 0.05 }}
+                                        className="border-t border-white/[0.04] hover:bg-white/[0.02] transition-colors"
+                                    >
+                                        <td className="p-4">
+                                            <span className="px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-500/15 text-blue-400">
                                                 {rule.antecedents.join(', ')}
                                             </span>
                                         </td>
-                                        <td className="p-3">
-                                            <span className="px-2 py-0.5 rounded text-xs font-semibold bg-purple-500/20 text-purple-400">
+                                        <td className="p-4">
+                                            <span className="px-2.5 py-1 rounded-lg text-xs font-semibold bg-purple-500/15 text-purple-400">
                                                 {rule.consequents.join(', ')}
                                             </span>
                                         </td>
-                                        <td className="p-3 text-slate-300">{rule.support.toFixed(4)}</td>
-                                        <td className="p-3 text-slate-300">{rule.confidence.toFixed(4)}</td>
-                                        <td className="p-3 text-slate-300">{rule.lift.toFixed(4)}</td>
-                                    </tr>
+                                        <td className="p-4 text-slate-300 font-mono text-xs">{rule.support.toFixed(4)}</td>
+                                        <td className="p-4 text-slate-300 font-mono text-xs">{rule.confidence.toFixed(4)}</td>
+                                        <td className="p-4 text-cyan-400 font-mono text-xs font-bold">{rule.lift.toFixed(4)}</td>
+                                    </motion.tr>
                                 ))}
                             </tbody>
                         </table>

frontend/src/pages/CognitiveQA.jsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import axios from 'axios';
-import { Brain, Volume2 } from 'lucide-react';
-import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone } from '../components/UI';
+import { Brain, Volume2, MessageSquare } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone, SectionLabel } from '../components/UI';
 
 export default function CognitiveQA() {
     const [tab, setTab] = useState('text');
@@ -15,7 +16,6 @@ export default function CognitiveQA() {
     const handleSubmit = async (e) => {
         e.preventDefault();
         setLoading(true); setError(''); setResult(null);
-
         try {
             let res;
             if (tab === 'text') {
@@ -41,11 +41,11 @@ export default function CognitiveQA() {
 
     return (
         <div className="max-w-3xl mx-auto">
-            <PageHeader title="Cognitive QA" subtitle="Knowledge extraction engine with vocal synthesis output." />
+            <PageHeader icon={Brain} title="Cognitive QA" subtitle="Knowledge extraction engine with vocal synthesis output using DistilBERT." />
 
-            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-6">
                 <div>
-                    <label className="block text-sm font-semibold text-slate-300 mb-2">Context Repository</label>
+                    <label className="block text-sm font-semibold text-slate-300 mb-2.5">Context Repository</label>
                     <textarea
                         value={context}
                         onChange={(e) => setContext(e.target.value)}
@@ -55,30 +55,35 @@ export default function CognitiveQA() {
                     />
                 </div>
 
-                <div className="flex gap-2 border-b border-white/10 pb-3">
+                <div className="flex gap-1 p-1 rounded-2xl bg-white/[0.03] border border-white/[0.05]">
                     {['text', 'voice'].map(t => (
                         <button
                             key={t}
                             type="button"
                             onClick={() => setTab(t)}
-                            className={`px-4 py-2 rounded-xl text-sm font-semibold transition-all ${tab === t ? 'bg-cyan-500/10 text-cyan-400' : 'text-slate-400 hover:bg-white/5'
+                            className={`flex-1 px-4 py-2.5 rounded-xl text-sm font-semibold transition-all ${tab === t
+                                    ? 'bg-gradient-to-r from-cyan-500/15 to-purple-500/10 text-cyan-400 shadow-sm'
+                                    : 'text-slate-500 hover:text-slate-300'
                                 }`}
                         >
-                            {t === 'text' ? 'Type Question' : 'Voice Question'}
+                            {t === 'text' ? '⌨️ Type Question' : '🎙 Voice Question'}
                         </button>
                     ))}
                 </div>
 
                 {tab === 'text' ? (
                     <div>
-                        <label className="block text-sm font-semibold text-slate-300 mb-2">Query</label>
-                        <input
-                            type="text"
-                            value={question}
-                            onChange={(e) => setQuestion(e.target.value)}
-                            placeholder="Ask a question about the context..."
-                            className="quantum-input"
-                        />
+                        <label className="block text-sm font-semibold text-slate-300 mb-2.5">Query Expression</label>
+                        <div className="relative">
+                            <MessageSquare size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-cyan-500/60" />
+                            <input
+                                type="text"
+                                value={question}
+                                onChange={(e) => setQuestion(e.target.value)}
+                                placeholder="Ask a question about the context..."
+                                className="quantum-input pl-11"
+                            />
+                        </div>
                     </div>
                 ) : (
                     <UploadZone accept="audio/*" onChange={(e) => setFile(e.target.files[0])} label="Record Your Query" sublabel="Upload audio for voice-to-voice QA" />
@@ -93,35 +98,46 @@ export default function CognitiveQA() {
 
             {result && (
                 <ResultBox>
-                    <p className="text-xs font-bold uppercase tracking-widest text-purple-400 mb-4">Reasoning Output</p>
+                    <SectionLabel>Reasoning Output</SectionLabel>
 
-                    <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 p-5 rounded-xl bg-black/20 border-l-4 border-cyan-400">
+                    <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 p-5 rounded-2xl bg-black/20 border-l-4 border-cyan-400">
                         <div className="flex-1">
-                            <span className="text-xs font-bold text-cyan-400 uppercase">Extracted Answer</span>
-                            <p className="text-xl font-bold text-slate-100 mt-1">{result.answer}</p>
+                            <span className="text-[10px] font-bold text-cyan-400 uppercase tracking-widest">Extracted Answer</span>
+                            <motion.p
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                transition={{ delay: 0.2 }}
+                                className="text-lg sm:text-xl font-bold text-slate-100 mt-2 leading-relaxed"
+                            >
+                                {result.answer}
+                            </motion.p>
                         </div>
                         {result.audio_url && (
-                            <button
+                            <motion.button
                                 type="button"
                                 onClick={playAudio}
-                                className="w-14 h-14 rounded-full bg-gradient-to-br from-cyan-500 to-purple-500 grid place-items-center text-white hover:scale-110 transition-transform flex-shrink-0"
+                                whileHover={{ scale: 1.1 }}
+                                whileTap={{ scale: 0.95 }}
+                                className="w-14 h-14 rounded-full bg-gradient-to-br from-cyan-500 to-purple-600 grid place-items-center text-white shadow-lg shadow-cyan-500/20 flex-shrink-0"
                             >
                                 <Volume2 size={22} />
-                            </button>
+                            </motion.button>
                         )}
                     </div>
 
                     {result.score > 0 && (
-                        <div className="mt-4">
-                            <div className="h-2 bg-white/5 rounded-full overflow-hidden">
-                                <div
-                                    className="h-full bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full transition-all duration-1000"
-                                    style={{ width: `${result.score}%` }}
+                        <div className="mt-5">
+                            <div className="h-2 bg-white/[0.04] rounded-full overflow-hidden">
+                                <motion.div
+                                    initial={{ width: 0 }}
+                                    animate={{ width: `${result.score}%` }}
+                                    transition={{ duration: 1.2, ease: [0.4, 0, 0.2, 1] }}
+                                    className="h-full bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full shadow-sm shadow-cyan-500/30"
                                 />
                             </div>
-                            <div className="flex justify-between text-sm text-slate-400 mt-1">
-                                <span>Confidence</span>
-                                <span>{result.score}%</span>
+                            <div className="flex justify-between text-xs text-slate-500 mt-1.5 font-medium">
+                                <span>Confidence Score</span>
+                                <span className="text-cyan-400">{result.score}%</span>
                             </div>
                         </div>
                     )}

frontend/src/pages/Dashboard.jsx

@@ -2,37 +2,77 @@ import { Link } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import {
     User, PenTool, Languages, Smile, Brain,
-    Target, PieChart, Braces, ShoppingCart
+    Target, PieChart, Braces, ShoppingCart,
+    ArrowRight, Sparkles, Activity
 } from 'lucide-react';
-import { PageHeader } from '../components/UI';
 
 const services = [
-    { path: '/gender', label: 'Gender Discovery', desc: 'Vision Transformer for high-precision gender classification.', icon: User, color: 'from-pink-500 to-rose-500' },
-    { path: '/textgen', label: 'Text Synthesis', desc: 'Creative language generation powered by GPT-2 architecture.', icon: PenTool, color: 'from-cyan-500 to-blue-500' },
-    { path: '/translate', label: 'Neural Translate', desc: 'Advanced English-to-Urdu translation using sequence models.', icon: Languages, color: 'from-emerald-500 to-teal-500' },
-    { path: '/sentiment', label: 'Empathy Engine', desc: 'Analyze emotional valence in text and vocal inputs.', icon: Smile, color: 'from-amber-500 to-orange-500' },
-    { path: '/qa', label: 'Cognitive QA', desc: 'Extract precise knowledge from context with DistilBERT.', icon: Brain, color: 'from-violet-500 to-purple-500' },
-    { path: '/zsl', label: 'Zero-Shot Lab', desc: 'BART-based classification for any unseen categories.', icon: Target, color: 'from-red-500 to-pink-500' },
-    { path: '/clustering', label: 'Data Clusters', desc: 'Automated pattern discovery using K-Means clustering.', icon: PieChart, color: 'from-sky-500 to-indigo-500' },
-    { path: '/dbscan', label: 'DBSCAN Lab', desc: 'Density-based clustering for complex patterns and outliers.', icon: Braces, color: 'from-lime-500 to-emerald-500' },
-    { path: '/apriori', label: 'Market Analytics', desc: 'Generate association rules from transactional data.', icon: ShoppingCart, color: 'from-fuchsia-500 to-violet-500' },
+    { path: '/gender', label: 'Gender Discovery', desc: 'Vision Transformer for high-precision gender classification from facial images.', icon: User, gradient: 'from-pink-500 to-rose-500', glow: 'shadow-pink-500/20' },
+    { path: '/textgen', label: 'Text Synthesis', desc: 'Creative language generation powered by GPT-2 neural architecture.', icon: PenTool, gradient: 'from-cyan-500 to-blue-500', glow: 'shadow-cyan-500/20' },
+    { path: '/translate', label: 'Neural Translate', desc: 'Advanced English → Urdu translation using sequence-to-sequence models.', icon: Languages, gradient: 'from-emerald-500 to-teal-500', glow: 'shadow-emerald-500/20' },
+    { path: '/sentiment', label: 'Empathy Engine', desc: 'Analyze emotional valence and sentiment in text and vocal inputs.', icon: Smile, gradient: 'from-amber-500 to-orange-500', glow: 'shadow-amber-500/20' },
+    { path: '/qa', label: 'Cognitive QA', desc: 'Extract precise answers from context documents with DistilBERT.', icon: Brain, gradient: 'from-violet-500 to-purple-500', glow: 'shadow-violet-500/20' },
+    { path: '/zsl', label: 'Zero-Shot Lab', desc: 'BART-based classification for any unseen categories without training.', icon: Target, gradient: 'from-red-500 to-pink-500', glow: 'shadow-red-500/20' },
+    { path: '/clustering', label: 'Data Clusters', desc: 'Automated pattern discovery using K-Means unsupervised clustering.', icon: PieChart, gradient: 'from-sky-500 to-indigo-500', glow: 'shadow-sky-500/20' },
+    { path: '/dbscan', label: 'DBSCAN Lab', desc: 'Density-based spatial clustering for complex patterns and outliers.', icon: Braces, gradient: 'from-lime-500 to-emerald-500', glow: 'shadow-lime-500/20' },
+    { path: '/apriori', label: 'Market Analytics', desc: 'Generate association rules from transactional data with Apriori algorithm.', icon: ShoppingCart, gradient: 'from-fuchsia-500 to-violet-500', glow: 'shadow-fuchsia-500/20' },
+];
+
+const stats = [
+    { label: 'AI Models', value: '9', icon: Sparkles, color: 'text-cyan-400' },
+    { label: 'NLP Engines', value: '5', icon: Brain, color: 'text-purple-400' },
+    { label: 'ML Pipelines', value: '3', icon: Activity, color: 'text-emerald-400' },
 ];
 
 const container = {
     hidden: {},
-    show: { transition: { staggerChildren: 0.06 } }
+    show: { transition: { staggerChildren: 0.05, delayChildren: 0.15 } }
 };
 
 const item = {
-    hidden: { opacity: 0, y: 20 },
-    show: { opacity: 1, y: 0, transition: { duration: 0.4 } }
+    hidden: { opacity: 0, y: 24, scale: 0.96 },
+    show: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.45, ease: [0.4, 0, 0.2, 1] } }
 };
 
 export default function Dashboard() {
     return (
         <div>
-            <PageHeader title="Quantum Analytics" subtitle="Select a specialized AI engine to begin processing." />
+            {/* Hero Section */}
+            <motion.div
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="mb-10"
+            >
+                <div className="flex items-center gap-3 mb-3">
+                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-500 to-purple-600 grid place-items-center">
+                        <Sparkles size={18} className="text-white" />
+                    </div>
+                    <div>
+                        <h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight">Quantum Analytics</h1>
+                    </div>
+                </div>
+                <p className="text-slate-400 text-sm sm:text-base max-w-lg leading-relaxed">
+                    Select a specialized AI engine to begin processing. Each service is powered by state-of-the-art deep learning models.
+                </p>
+            </motion.div>
+
+            {/* Stats Bar */}
+            <motion.div
+                initial={{ opacity: 0, y: 12 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.1 }}
+                className="grid grid-cols-3 gap-3 sm:gap-4 mb-8"
+            >
+                {stats.map((s, i) => (
+                    <div key={i} className="glass-card stat-glow p-4 sm:p-5 text-center group cursor-default">
+                        <s.icon size={20} className={`${s.color} mx-auto mb-2 group-hover:scale-110 transition-transform`} />
+                        <p className="text-xl sm:text-2xl font-black">{s.value}</p>
+                        <p className="text-[11px] text-slate-500 font-medium uppercase tracking-wider mt-1">{s.label}</p>
+                    </div>
+                ))}
+            </motion.div>
 
+            {/* Service Cards Grid */}
             <motion.div
                 variants={container}
                 initial="hidden"
@@ -43,18 +83,26 @@ export default function Dashboard() {
                     <motion.div key={s.path} variants={item}>
                         <Link
                             to={s.path}
-                            className="glass-card p-6 flex flex-col gap-4 group hover:translate-y-[-6px] block"
+                            className="glass-card p-6 flex flex-col gap-4 group block hover:translate-y-[-6px] transition-all duration-300"
                         >
-                            <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${s.color} grid place-items-center opacity-80 group-hover:opacity-100 transition-all group-hover:scale-110`}>
-                                <s.icon size={22} className="text-white" />
+                            {/* Icon */}
+                            <div className="flex items-center justify-between">
+                                <div className={`w-12 h-12 rounded-2xl bg-gradient-to-br ${s.gradient} grid place-items-center shadow-lg ${s.glow} opacity-90 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300`}>
+                                    <s.icon size={20} className="text-white" />
+                                </div>
+                                <ArrowRight size={16} className="text-slate-600 group-hover:text-cyan-400 group-hover:translate-x-1 transition-all duration-300" />
                             </div>
-                            <div>
-                                <h3 className="text-lg font-bold mb-1">{s.label}</h3>
-                                <p className="text-sm text-slate-400 leading-relaxed">{s.desc}</p>
+
+                            {/* Content */}
+                            <div className="flex-1">
+                                <h3 className="text-base font-bold mb-1.5 group-hover:text-cyan-300 transition-colors">{s.label}</h3>
+                                <p className="text-[13px] text-slate-500 leading-relaxed">{s.desc}</p>
                             </div>
-                            <div className="mt-auto pt-2">
-                                <span className="text-xs font-bold uppercase tracking-widest text-cyan-400 group-hover:underline">
-                                    Launch Engine →
+
+                            {/* Footer */}
+                            <div className="pt-3 border-t border-white/[0.05]">
+                                <span className="text-[11px] font-bold uppercase tracking-[0.15em] text-cyan-500/70 group-hover:text-cyan-400 transition-colors">
+                                    Launch Engine
                                 </span>
                             </div>
                         </Link>

frontend/src/pages/DataClusters.jsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import axios from 'axios';
 import { PieChart } from 'lucide-react';
-import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone } from '../components/UI';
+import { motion } from 'framer-motion';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone, SectionLabel } from '../components/UI';
 
 export default function DataClusters() {
     const [file, setFile] = useState(null);
@@ -14,11 +15,9 @@ export default function DataClusters() {
         e.preventDefault();
         if (!file) return setError('Please upload a file');
         setLoading(true); setError(''); setResult(null);
-
         const fd = new FormData();
         fd.append('file', file);
         fd.append('clusters', clusters);
-
         try {
             const res = await axios.post('/api/clustering', fd);
             setResult(res.data);
@@ -29,23 +28,14 @@ export default function DataClusters() {
 
     return (
         <div className="max-w-3xl mx-auto">
-            <PageHeader title="Data Clusters" subtitle="Unsupervised grouping of multivariate datasets using K-Means." />
+            <PageHeader icon={PieChart} title="Data Clusters" subtitle="Unsupervised grouping of multivariate datasets using K-Means algorithm." />
 
-            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-6">
                 <UploadZone accept=".csv,.xlsx" onChange={(e) => setFile(e.target.files[0])} label="Upload Data Structure" sublabel=".CSV or .XLSX datasets" />
-                {file && <p className="text-sm text-cyan-400 text-center font-medium">📊 {file.name}</p>}
-
                 <div>
-                    <label className="block text-sm font-semibold text-slate-300 mb-2">Cluster Centroids (K)</label>
-                    <input
-                        type="number"
-                        value={clusters}
-                        onChange={(e) => setClusters(e.target.value)}
-                        min="2" max="10"
-                        className="quantum-input w-32"
-                    />
+                    <label className="block text-sm font-semibold text-slate-300 mb-2.5">Cluster Centroids (K)</label>
+                    <input type="number" value={clusters} onChange={(e) => setClusters(e.target.value)} min="2" max="10" className="quantum-input w-32" />
                 </div>
-
                 <SubmitButton loading={loading}>
                     <PieChart size={18} /> Map Clusters
                 </SubmitButton>
@@ -55,17 +45,19 @@ export default function DataClusters() {
 
             {result && (
                 <ResultBox>
-                    <p className="text-xs font-bold uppercase tracking-widest text-purple-400 mb-4">Clustering Visualization</p>
-                    <div className="bg-white p-4 rounded-2xl">
+                    <SectionLabel>Clustering Visualization</SectionLabel>
+                    <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} className="bg-white p-4 rounded-2xl">
                         <img src={`data:image/png;base64,${result.plot}`} alt="Cluster Plot" className="w-full rounded-xl" />
-                    </div>
+                    </motion.div>
                     {result.cluster_info && (
                         <div className="mt-5 grid grid-cols-2 sm:grid-cols-3 gap-3">
-                            {Object.entries(result.cluster_info).map(([k, v]) => (
-                                <div key={k} className="p-3 rounded-xl bg-white/3 border-l-3 border-purple-500">
-                                    <span className="text-xs font-bold text-purple-400 uppercase">Cluster {k}</span>
-                                    <p className="text-lg font-extrabold mt-1">{v} Entities</p>
-                                </div>
+                            {Object.entries(result.cluster_info).map(([k, v], i) => (
+                                <motion.div key={k} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.1 }}
+                                    className="stat-glow p-4 rounded-2xl bg-white/[0.02] border border-white/[0.05]">
+                                    <span className="text-[10px] font-bold text-purple-400 uppercase tracking-widest">Cluster {k}</span>
+                                    <p className="text-xl font-black mt-1">{v}</p>
+                                    <span className="text-[11px] text-slate-500">Entities</span>
+                                </motion.div>
                             ))}
                         </div>
                     )}

frontend/src/pages/DbscanLab.jsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import axios from 'axios';
 import { Braces } from 'lucide-react';
-import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone } from '../components/UI';
+import { motion } from 'framer-motion';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone, SectionLabel } from '../components/UI';
 
 export default function DbscanLab() {
     const [file, setFile] = useState(null);
@@ -15,12 +16,10 @@ export default function DbscanLab() {
         e.preventDefault();
         if (!file) return setError('Please upload a file');
         setLoading(true); setError(''); setResult(null);
-
         const fd = new FormData();
         fd.append('file', file);
         fd.append('eps', eps);
         fd.append('min_samples', minSamples);
-
         try {
             const res = await axios.post('/api/dbscan', fd);
             setResult(res.data);
@@ -31,23 +30,20 @@ export default function DbscanLab() {
 
     return (
         <div className="max-w-3xl mx-auto">
-            <PageHeader title="DBSCAN Lab" subtitle="Density-based clustering to identify complex patterns and outliers." />
+            <PageHeader icon={Braces} title="DBSCAN Lab" subtitle="Density-based spatial clustering to identify complex patterns and outliers." />
 
-            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-6">
                 <UploadZone accept=".csv,.xlsx" onChange={(e) => setFile(e.target.files[0])} label="Upload Data Structure" sublabel=".CSV or .XLSX datasets" />
-                {file && <p className="text-sm text-cyan-400 text-center font-medium">📊 {file.name}</p>}
-
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                     <div>
-                        <label className="block text-sm font-semibold text-slate-300 mb-2">Epsilon (eps)</label>
+                        <label className="block text-sm font-semibold text-slate-300 mb-2.5">Epsilon (eps)</label>
                         <input type="number" value={eps} onChange={(e) => setEps(e.target.value)} step="0.01" min="0.01" className="quantum-input" />
                     </div>
                     <div>
-                        <label className="block text-sm font-semibold text-slate-300 mb-2">Min Samples</label>
+                        <label className="block text-sm font-semibold text-slate-300 mb-2.5">Min Samples</label>
                         <input type="number" value={minSamples} onChange={(e) => setMinSamples(e.target.value)} min="1" className="quantum-input" />
                     </div>
                 </div>
-
                 <SubmitButton loading={loading}>
                     <Braces size={18} /> Run DBSCAN
                 </SubmitButton>
@@ -57,17 +53,19 @@ export default function DbscanLab() {
 
             {result && (
                 <ResultBox>
-                    <p className="text-xs font-bold uppercase tracking-widest text-purple-400 mb-4">DBSCAN Visualization</p>
-                    <div className="bg-white p-4 rounded-2xl">
+                    <SectionLabel>DBSCAN Visualization</SectionLabel>
+                    <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} className="bg-white p-4 rounded-2xl">
                         <img src={`data:image/png;base64,${result.plot}`} alt="DBSCAN Plot" className="w-full rounded-xl" />
-                    </div>
+                    </motion.div>
                     {result.cluster_info && (
                         <div className="mt-5 grid grid-cols-2 sm:grid-cols-3 gap-3">
-                            {Object.entries(result.cluster_info).map(([k, v]) => (
-                                <div key={k} className="p-3 rounded-xl bg-white/3 border-l-3 border-purple-500">
-                                    <span className="text-xs font-bold text-purple-400 uppercase">{k === '-1' ? 'Noise' : `Cluster ${k}`}</span>
-                                    <p className="text-lg font-extrabold mt-1">{v} Entities</p>
-                                </div>
+                            {Object.entries(result.cluster_info).map(([k, v], i) => (
+                                <motion.div key={k} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.1 }}
+                                    className="stat-glow p-4 rounded-2xl bg-white/[0.02] border border-white/[0.05]">
+                                    <span className="text-[10px] font-bold text-purple-400 uppercase tracking-widest">{k === '-1' ? 'Noise Points' : `Cluster ${k}`}</span>
+                                    <p className="text-xl font-black mt-1">{v}</p>
+                                    <span className="text-[11px] text-slate-500">Entities</span>
+                                </motion.div>
                             ))}
                         </div>
                     )}

frontend/src/pages/EmpathyEngine.jsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import axios from 'axios';
-import { Smile, Frown, Meh, Mic } from 'lucide-react';
-import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone } from '../components/UI';
+import { Smile, Frown, Meh, Mic, HeartPulse } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone, SectionLabel } from '../components/UI';
 
 export default function EmpathyEngine() {
     const [tab, setTab] = useState('text');
@@ -14,7 +15,6 @@ export default function EmpathyEngine() {
     const handleSubmit = async (e) => {
         e.preventDefault();
         setLoading(true); setError(''); setResult(null);
-
         try {
             let res;
             if (tab === 'text') {
@@ -30,43 +30,38 @@ export default function EmpathyEngine() {
         } finally { setLoading(false); }
     };
 
-    const sentimentIcon = (label) => {
+    const sentimentConfig = (label) => {
         const l = (label || '').toLowerCase();
-        if (l === 'positive') return <Smile size={48} className="text-emerald-400" />;
-        if (l === 'negative') return <Frown size={48} className="text-red-400" />;
-        return <Meh size={48} className="text-cyan-400" />;
-    };
-
-    const sentimentColor = (label) => {
-        const l = (label || '').toLowerCase();
-        if (l === 'positive') return 'text-emerald-400';
-        if (l === 'negative') return 'text-red-400';
-        return 'text-cyan-400';
+        if (l === 'positive') return { icon: Smile, color: 'text-emerald-400', bg: 'bg-emerald-500/10', border: 'border-emerald-500/20' };
+        if (l === 'negative') return { icon: Frown, color: 'text-red-400', bg: 'bg-red-500/10', border: 'border-red-500/20' };
+        return { icon: Meh, color: 'text-cyan-400', bg: 'bg-cyan-500/10', border: 'border-cyan-500/20' };
     };
 
     return (
         <div className="max-w-2xl mx-auto">
-            <PageHeader title="Empathy Engine" subtitle="Contextual sentiment analysis for text and vocal recordings." />
+            <PageHeader icon={HeartPulse} title="Empathy Engine" subtitle="Contextual sentiment analysis for text and vocal recordings." />
 
-            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-6">
                 {/* Tabs */}
-                <div className="flex gap-2 border-b border-white/10 pb-3">
+                <div className="flex gap-1 p-1 rounded-2xl bg-white/[0.03] border border-white/[0.05]">
                     {['text', 'voice'].map(t => (
                         <button
                             key={t}
                             type="button"
                             onClick={() => setTab(t)}
-                            className={`px-4 py-2 rounded-xl text-sm font-semibold transition-all ${tab === t ? 'bg-cyan-500/10 text-cyan-400' : 'text-slate-400 hover:bg-white/5'
+                            className={`flex-1 px-4 py-2.5 rounded-xl text-sm font-semibold transition-all ${tab === t
+                                    ? 'bg-gradient-to-r from-cyan-500/15 to-purple-500/10 text-cyan-400 shadow-sm'
+                                    : 'text-slate-500 hover:text-slate-300'
                                 }`}
                         >
-                            {t === 'text' ? 'Text Analysis' : 'Vocal Analysis'}
+                            {t === 'text' ? '📝 Text Analysis' : '🎙 Vocal Analysis'}
                         </button>
                     ))}
                 </div>
 
                 {tab === 'text' ? (
                     <div>
-                        <label className="block text-sm font-semibold text-slate-300 mb-2">Input Text</label>
+                        <label className="block text-sm font-semibold text-slate-300 mb-2.5">Input Text</label>
                         <textarea
                             value={text}
                             onChange={(e) => setText(e.target.value)}
@@ -75,40 +70,64 @@ export default function EmpathyEngine() {
                         />
                     </div>
                 ) : (
-                    <div>
-                        <UploadZone accept="audio/*" onChange={(e) => setFile(e.target.files[0])} label="Upload Voice Recording" sublabel="WAV or MP3 format" />
-                        {file && <p className="text-sm text-cyan-400 text-center mt-2 font-medium">🎙 {file.name}</p>}
-                    </div>
+                    <UploadZone accept="audio/*" onChange={(e) => setFile(e.target.files[0])} label="Upload Voice Recording" sublabel="WAV or MP3 format" />
                 )}
 
                 <SubmitButton loading={loading}>
-                    <Mic size={18} /> Analyze Sentiment
+                    <HeartPulse size={18} /> Analyze Sentiment
                 </SubmitButton>
             </form>
 
             <ErrorBox message={error} />
 
-            {result && (
-                <ResultBox>
-                    <p className="text-xs font-bold uppercase tracking-widest text-purple-400 mb-4">Engine Output</p>
-                    {result.transcript && (
-                        <div className="mb-4 p-3 rounded-xl bg-black/20 text-sm">
-                            <span className="text-xs font-bold text-cyan-400 uppercase">Transcription</span>
-                            <p className="mt-1 text-slate-300">"{result.transcript}"</p>
-                        </div>
-                    )}
-                    <div className="flex items-center gap-6 p-4 rounded-xl bg-white/3">
-                        <div className="flex-1">
-                            <span className="text-sm text-slate-400">Detected Sentiment</span>
-                            <p className={`text-3xl font-extrabold capitalize ${sentimentColor(result.result)}`}>
-                                {result.result}
-                            </p>
-                            <span className="text-sm text-slate-500">{result.score}% confidence</span>
+            {result && (() => {
+                const cfg = sentimentConfig(result.result);
+                const Icon = cfg.icon;
+                return (
+                    <ResultBox>
+                        <SectionLabel>Engine Output</SectionLabel>
+
+                        {result.transcript && (
+                            <div className="mb-5 p-4 rounded-2xl bg-black/20 border border-white/[0.05]">
+                                <span className="text-[10px] font-bold text-cyan-400 uppercase tracking-widest">Transcription</span>
+                                <p className="mt-1.5 text-slate-300 text-sm leading-relaxed">"{result.transcript}"</p>
+                            </div>
+                        )}
+
+                        <div className={`flex items-center gap-6 p-5 rounded-2xl ${cfg.bg} border ${cfg.border}`}>
+                            <div className="flex-1">
+                                <span className="text-xs text-slate-400 font-medium">Detected Sentiment</span>
+                                <motion.p
+                                    initial={{ scale: 0.5 }}
+                                    animate={{ scale: 1 }}
+                                    transition={{ type: 'spring', stiffness: 200 }}
+                                    className={`text-3xl font-black capitalize ${cfg.color}`}
+                                >
+                                    {result.result}
+                                </motion.p>
+                                <div className="mt-2 flex items-center gap-2">
+                                    <div className="h-1.5 flex-1 bg-black/20 rounded-full overflow-hidden">
+                                        <motion.div
+                                            initial={{ width: 0 }}
+                                            animate={{ width: `${result.score}%` }}
+                                            transition={{ duration: 1, delay: 0.3 }}
+                                            className="h-full bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full"
+                                        />
+                                    </div>
+                                    <span className="text-xs text-slate-400 font-semibold">{result.score}%</span>
+                                </div>
+                            </div>
+                            <motion.div
+                                initial={{ rotate: -20, scale: 0 }}
+                                animate={{ rotate: 0, scale: 1 }}
+                                transition={{ type: 'spring', delay: 0.2 }}
+                            >
+                                <Icon size={52} className={cfg.color} />
+                            </motion.div>
                         </div>
-                        {sentimentIcon(result.result)}
-                    </div>
-                </ResultBox>
-            )}
+                    </ResultBox>
+                );
+            })()}
         </div>
     );
 }

frontend/src/pages/GenderDiscovery.jsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import axios from 'axios';
-import { Upload } from 'lucide-react';
-import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone } from '../components/UI';
+import { Upload, User, Scan } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton, UploadZone, SectionLabel } from '../components/UI';
 
 export default function GenderDiscovery() {
     const [file, setFile] = useState(null);
@@ -22,10 +23,8 @@ export default function GenderDiscovery() {
         e.preventDefault();
         if (!file) return setError('Please select an image');
         setLoading(true); setError(''); setResult('');
-
         const fd = new FormData();
         fd.append('image', file);
-
         try {
             const res = await axios.post('/api/gender', fd);
             setResult(res.data.result);
@@ -36,21 +35,29 @@ export default function GenderDiscovery() {
 
     return (
         <div className="max-w-2xl mx-auto">
-            <PageHeader title="Gender Discovery" subtitle="Upload a visual specimen for neural gender classification." />
-
-            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
-                <UploadZone accept="image/*" name="image" onChange={handleFile} label="Upload Image" sublabel="PNG, JPG or WEBP (max 10MB)" />
+            <PageHeader icon={User} title="Gender Discovery" subtitle="Upload a visual specimen for neural gender classification using Vision Transformer." />
 
-                {preview && (
-                    <div className="rounded-2xl overflow-hidden border border-white/10">
-                        <img src={preview} alt="Preview" className="w-full h-56 object-cover" />
-                    </div>
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-6">
+                {!preview ? (
+                    <UploadZone accept="image/*" name="image" onChange={handleFile} label="Upload Image" sublabel="PNG, JPG or WEBP (max 10MB)" />
+                ) : (
+                    <motion.div
+                        initial={{ opacity: 0, scale: 0.95 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        className="relative rounded-2xl overflow-hidden border border-white/10 group"
+                    >
+                        <img src={preview} alt="Preview" className="w-full h-60 object-cover" />
+                        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-4">
+                            <label className="text-xs text-white/80 cursor-pointer hover:text-white font-medium">
+                                Click to change →
+                                <input type="file" accept="image/*" onChange={handleFile} className="hidden" />
+                            </label>
+                        </div>
+                    </motion.div>
                 )}
 
-                {file && <p className="text-sm text-cyan-400 text-center font-medium">📎 {file.name}</p>}
-
                 <SubmitButton loading={loading}>
-                    <Upload size={18} /> Run Discovery Engine
+                    <Scan size={18} /> Run Discovery Engine
                 </SubmitButton>
             </form>
 
@@ -58,11 +65,21 @@ export default function GenderDiscovery() {
 
             {result && (
                 <ResultBox>
-                    <p className="text-xs font-bold uppercase tracking-widest text-purple-400 mb-2">Engine Output</p>
-                    <div className="flex justify-between items-center">
-                        <span className="text-slate-400">Detected Gender</span>
-                        <span className="text-3xl font-extrabold">{result}</span>
+                    <SectionLabel>Engine Output</SectionLabel>
+                    <div className="flex items-center justify-between p-5 rounded-2xl bg-white/[0.02] border border-white/[0.05]">
+                        <span className="text-sm text-slate-400 font-medium">Detected Gender</span>
+                        <motion.span
+                            initial={{ scale: 0.5, opacity: 0 }}
+                            animate={{ scale: 1, opacity: 1 }}
+                            transition={{ type: 'spring', stiffness: 200 }}
+                            className="text-3xl font-black gradient-text"
+                        >
+                            {result}
+                        </motion.span>
                     </div>
+                    <p className="text-xs text-slate-500 mt-3 flex items-center gap-1.5">
+                        <Scan size={12} /> Vision model identifies facial features for classification
+                    </p>
                 </ResultBox>
             )}
         </div>

frontend/src/pages/NeuralTranslate.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import axios from 'axios';
-import { Languages, Copy, Check } from 'lucide-react';
-import { PageHeader, ResultBox, ErrorBox, SubmitButton } from '../components/UI';
+import { Languages, Copy, Check, ArrowRight } from 'lucide-react';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton, SectionLabel } from '../components/UI';
 
 export default function NeuralTranslate() {
     const [text, setText] = useState('');
@@ -30,20 +30,24 @@ export default function NeuralTranslate() {
 
     return (
         <div className="max-w-2xl mx-auto">
-            <PageHeader title="Neural Translate" subtitle="Advanced English-to-Urdu translation using sequence models." />
+            <PageHeader icon={Languages} title="Neural Translate" subtitle="Advanced English → Urdu translation using sequence-to-sequence models." />
 
-            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-6">
                 <div>
-                    <label className="block text-sm font-semibold text-slate-300 mb-2">English Text</label>
+                    <div className="flex items-center gap-2 mb-2.5">
+                        <span className="text-xs font-bold bg-blue-500/10 text-blue-400 px-2 py-0.5 rounded-lg">English</span>
+                        <ArrowRight size={14} className="text-slate-600" />
+                        <span className="text-xs font-bold bg-emerald-500/10 text-emerald-400 px-2 py-0.5 rounded-lg">Urdu</span>
+                    </div>
                     <textarea
                         value={text}
                         onChange={(e) => setText(e.target.value)}
                         placeholder="Type or paste English text here..."
-                        className="quantum-input min-h-[140px] resize-y"
+                        className="quantum-input min-h-[150px] resize-y"
                     />
                 </div>
                 <SubmitButton loading={loading}>
-                    <Languages size={18} /> Translate to Urdu
+                    <Languages size={18} /> Translate
                 </SubmitButton>
             </form>
 
@@ -51,14 +55,17 @@ export default function NeuralTranslate() {
 
             {result && (
                 <ResultBox>
-                    <div className="flex items-center justify-between mb-3">
-                        <p className="text-xs font-bold uppercase tracking-widest text-purple-400">Urdu Translation</p>
-                        <button onClick={copyText} className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-white transition-colors bg-white/5 px-3 py-1.5 rounded-lg">
-                            {copied ? <Check size={14} /> : <Copy size={14} />}
+                    <div className="flex items-center justify-between mb-4">
+                        <SectionLabel>Urdu Translation</SectionLabel>
+                        <button
+                            onClick={copyText}
+                            className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-xl bg-white/[0.04] border border-white/[0.06] text-slate-400 hover:text-white hover:border-white/10 transition-all"
+                        >
+                            {copied ? <Check size={13} className="text-emerald-400" /> : <Copy size={13} />}
                             {copied ? 'Copied!' : 'Copy'}
                         </button>
                     </div>
-                    <p className="text-xl text-slate-200 leading-relaxed text-right font-medium" dir="rtl">{result}</p>
+                    <p className="text-xl text-slate-200 leading-loose font-medium text-right" dir="rtl">{result}</p>
                 </ResultBox>
             )}
         </div>

frontend/src/pages/TextSynthesis.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import axios from 'axios';
-import { PenTool, Copy, Check } from 'lucide-react';
-import { PageHeader, ResultBox, ErrorBox, SubmitButton } from '../components/UI';
+import { PenTool, Copy, Check, Wand2 } from 'lucide-react';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton, SectionLabel } from '../components/UI';
 
 export default function TextSynthesis() {
     const [prompt, setPrompt] = useState('');
@@ -30,20 +30,20 @@ export default function TextSynthesis() {
 
     return (
         <div className="max-w-2xl mx-auto">
-            <PageHeader title="Text Synthesis" subtitle="Creative language generation powered by GPT-2 architecture." />
+            <PageHeader icon={PenTool} title="Text Synthesis" subtitle="Creative language generation powered by GPT-2 neural architecture." />
 
-            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-6">
                 <div>
-                    <label className="block text-sm font-semibold text-slate-300 mb-2">Synthesis Prompt</label>
+                    <label className="block text-sm font-semibold text-slate-300 mb-2.5">Synthesis Prompt</label>
                     <textarea
                         value={prompt}
                         onChange={(e) => setPrompt(e.target.value)}
                         placeholder="Enter a seed sentence for the AI to expand upon..."
-                        className="quantum-input min-h-[140px] resize-y"
+                        className="quantum-input min-h-[150px] resize-y"
                     />
                 </div>
                 <SubmitButton loading={loading}>
-                    <PenTool size={18} /> Synthesize Text
+                    <Wand2 size={18} /> Synthesize Text
                 </SubmitButton>
             </form>
 
@@ -51,14 +51,17 @@ export default function TextSynthesis() {
 
             {result && (
                 <ResultBox>
-                    <div className="flex items-center justify-between mb-3">
-                        <p className="text-xs font-bold uppercase tracking-widest text-purple-400">Generated Output</p>
-                        <button onClick={copyText} className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-white transition-colors bg-white/5 px-3 py-1.5 rounded-lg">
-                            {copied ? <Check size={14} /> : <Copy size={14} />}
+                    <div className="flex items-center justify-between mb-4">
+                        <SectionLabel>Generated Output</SectionLabel>
+                        <button
+                            onClick={copyText}
+                            className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-xl bg-white/[0.04] border border-white/[0.06] text-slate-400 hover:text-white hover:border-white/10 transition-all"
+                        >
+                            {copied ? <Check size={13} className="text-emerald-400" /> : <Copy size={13} />}
                             {copied ? 'Copied!' : 'Copy'}
                         </button>
                     </div>
-                    <p className="text-slate-200 leading-relaxed">{result}</p>
+                    <p className="text-slate-200 leading-relaxed text-[15px]">{result}</p>
                 </ResultBox>
             )}
         </div>

frontend/src/pages/ZeroShotLab.jsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import axios from 'axios';
-import { Target } from 'lucide-react';
-import { PageHeader, ResultBox, ErrorBox, SubmitButton } from '../components/UI';
+import { Target, BarChart3 } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { PageHeader, ResultBox, ErrorBox, SubmitButton, SectionLabel } from '../components/UI';
 
 export default function ZeroShotLab() {
     const [text, setText] = useState('');
@@ -22,13 +23,21 @@ export default function ZeroShotLab() {
         } finally { setLoading(false); }
     };
 
+    const barColors = [
+        'from-cyan-500 to-blue-500',
+        'from-purple-500 to-pink-500',
+        'from-emerald-500 to-teal-500',
+        'from-amber-500 to-orange-500',
+        'from-red-500 to-rose-500',
+    ];
+
     return (
         <div className="max-w-2xl mx-auto">
-            <PageHeader title="Zero-Shot Lab" subtitle="BART-based classification for any unseen categories." />
+            <PageHeader icon={Target} title="Zero-Shot Lab" subtitle="BART-based classification for any unseen categories without fine-tuning." />
 
-            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-5">
+            <form onSubmit={handleSubmit} className="glass-card p-6 sm:p-8 space-y-6">
                 <div>
-                    <label className="block text-sm font-semibold text-slate-300 mb-2">Input Text</label>
+                    <label className="block text-sm font-semibold text-slate-300 mb-2.5">Input Text</label>
                     <textarea
                         value={text}
                         onChange={(e) => setText(e.target.value)}
@@ -38,7 +47,7 @@ export default function ZeroShotLab() {
                     />
                 </div>
                 <div>
-                    <label className="block text-sm font-semibold text-slate-300 mb-2">Candidate Labels</label>
+                    <label className="block text-sm font-semibold text-slate-300 mb-2.5">Candidate Labels</label>
                     <input
                         type="text"
                         value={labels}
@@ -47,7 +56,7 @@ export default function ZeroShotLab() {
                         className="quantum-input"
                         required
                     />
-                    <p className="text-xs text-slate-500 mt-1">Separate labels with commas</p>
+                    <p className="text-xs text-slate-500 mt-1.5">Separate labels with commas</p>
                 </div>
                 <SubmitButton loading={loading}>
                     <Target size={18} /> Classify Text
@@ -58,24 +67,41 @@ export default function ZeroShotLab() {
 
             {result && (
                 <ResultBox>
-                    <p className="text-xs font-bold uppercase tracking-widest text-purple-400 mb-4">Classification Results</p>
-                    <div className="mb-4 p-4 rounded-xl bg-black/20 text-center">
-                        <span className="text-sm text-slate-400">Best Match</span>
-                        <p className="text-2xl font-extrabold text-cyan-400 mt-1">{result.best_label}</p>
+                    <SectionLabel>Classification Results</SectionLabel>
+
+                    <div className="mb-5 p-5 rounded-2xl bg-gradient-to-br from-cyan-500/[0.08] to-purple-500/[0.04] border border-cyan-500/10 text-center">
+                        <span className="text-xs text-slate-400 font-medium">Best Match</span>
+                        <motion.p
+                            initial={{ scale: 0.5 }}
+                            animate={{ scale: 1 }}
+                            transition={{ type: 'spring', stiffness: 200 }}
+                            className="text-2xl font-black gradient-text mt-1"
+                        >
+                            {result.best_label}
+                        </motion.p>
                         <span className="text-sm text-slate-500">{result.best_score}% confidence</span>
                     </div>
-                    <div className="space-y-2">
+
+                    <div className="space-y-3">
                         {result.results?.map((r, i) => (
-                            <div key={i} className="flex items-center gap-3">
-                                <span className="text-sm text-slate-300 w-28 truncate capitalize">{r.label}</span>
-                                <div className="flex-1 h-2 bg-white/5 rounded-full overflow-hidden">
-                                    <div
-                                        className="h-full bg-gradient-to-r from-cyan-500 to-purple-500 rounded-full transition-all duration-700"
-                                        style={{ width: `${r.score}%` }}
+                            <motion.div
+                                key={i}
+                                initial={{ opacity: 0, x: -20 }}
+                                animate={{ opacity: 1, x: 0 }}
+                                transition={{ delay: i * 0.1 }}
+                                className="flex items-center gap-3"
+                            >
+                                <span className="text-sm text-slate-300 w-28 truncate capitalize font-medium">{r.label}</span>
+                                <div className="flex-1 h-3 bg-white/[0.04] rounded-full overflow-hidden">
+                                    <motion.div
+                                        initial={{ width: 0 }}
+                                        animate={{ width: `${r.score}%` }}
+                                        transition={{ duration: 0.8, delay: 0.3 + i * 0.1 }}
+                                        className={`h-full bg-gradient-to-r ${barColors[i % barColors.length]} rounded-full`}
                                     />
                                 </div>
-                                <span className="text-xs text-slate-400 w-12 text-right">{r.score}%</span>
-                            </div>
+                                <span className="text-xs text-slate-400 w-14 text-right font-semibold">{r.score}%</span>
+                            </motion.div>
                         ))}
                     </div>
                 </ResultBox>