style: overhaul UI to a modern sidebar layout with strategic green/cream mix

frontend/src/App.tsx

@@ -53,112 +53,134 @@ const App: React.FC = () => {
     };
 
     return (
-        <div className="min-h-screen bg-[#004D3C] bg-gradient-to-br from-[#004D3C] via-[#007055] to-[#004D3C] flex flex-col items-center justify-center p-4">
-            {/* Background Decorative Elements */}
-            <div className="fixed top-[-10%] left-[-10%] w-[40%] h-[40%] bg-[#F9F7C9]/10 rounded-full blur-[120px] pointer-events-none"></div>
-            <div className="fixed bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-[#D4AF37]/10 rounded-full blur-[120px] pointer-events-none"></div>
+        <div className="min-h-screen bg-[#002B22] flex flex-col items-center justify-center p-0 sm:p-6 font-outfit text-white overflow-hidden relative">
+            {/* Dynamic Background Elements */}
+            <div className="absolute top-[-20%] left-[-10%] w-[60%] h-[60%] bg-[#007055]/20 rounded-full blur-[150px] animate-pulse pointer-events-none"></div>
+            <div className="absolute bottom-[-20%] right-[-10%] w-[60%] h-[60%] bg-[#FDFBD4]/5 rounded-full blur-[150px] pointer-events-none"></div>
 
-            <div className="w-full max-w-4xl h-[90vh] glass-container flex flex-col relative z-10 border border-white/10 shadow-2xl overflow-hidden rounded-3xl backdrop-blur-xl bg-white/5">
-                {/* Header */}
-                <header className="p-6 border-b border-white/10 flex items-center justify-between bg-[#004D3C]/40">
-                    <div className="flex items-center gap-4">
-                        <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-[#D4AF37]/50 p-1 bg-white/10">
-                            <img src="/assets/logo.png" alt="CLCC Logo" className="w-full h-full object-contain" />
+            <div className="w-full max-w-5xl h-screen sm:h-[92vh] flex flex-col sm:flex-row relative z-10 bg-black/20 backdrop-blur-2xl sm:rounded-[2.5rem] overflow-hidden border border-white/5 shadow-[0_32px_64px_-12px_rgba(0,0,0,0.5)]">
+
+                {/* Modern Sidebar-style Header (Desktop) / Top Header (Mobile) */}
+                <aside className="w-full sm:w-80 bg-[#00362B]/80 p-8 flex flex-col items-center sm:items-start space-y-8 border-b sm:border-b-0 sm:border-r border-white/5 shrink-0">
+                    <div className="relative group">
+                        <div className="absolute -inset-1 bg-gradient-to-tr from-[#FDFBD4] to-[#007055] rounded-3xl blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
+                        <div className="relative w-24 h-24 sm:w-32 sm:h-32 rounded-[2rem] overflow-hidden border border-white/10 shadow-2xl transform transition-transform group-hover:scale-105 duration-500">
+                            <img src="/assets/logo.jpg" alt="CLCC Logo" className="w-full h-full object-cover" />
                         </div>
-                        <div>
-                            <h1 className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white via-[#F9F7C9] to-[#D4AF37]">
-                                Theo AI
-                            </h1>
-                            <p className="text-xs text-[#F9F7C9]/60 tracking-wider uppercase font-medium">
-                                by TechDisciples CLCC
-                            </p>
+                    </div>
+                    <div className="text-center sm:text-left space-y-2">
+                        <h1 className="text-4xl font-black tracking-tighter bg-clip-text text-transparent bg-gradient-to-br from-white via-[#FDFBD4] to-[#007055]">
+                            Theo AI
+                        </h1>
+                        <div className="inline-flex items-center px-3 py-1 bg-[#FDFBD4]/10 rounded-full border border-[#FDFBD4]/20">
+                            <span className="text-[10px] font-bold text-[#FDFBD4] uppercase tracking-widest">
+                                TechDisciples CLCC
+                            </span>
                         </div>
                     </div>
-                </header>
+                    <div className="hidden sm:block flex-1 w-full pt-8">
+                        <p className="text-[#FDFBD4]/40 text-xs leading-relaxed font-light italic">
+                            "Thy word is a lamp unto my feet, and a light unto my path."
+                            <span className="block mt-2 font-bold not-italic opacity-100">— Psalm 119:105</span>
+                        </p>
+                    </div>
+                </aside>
 
-                {/* Chat Area */}
-                <div className="flex-1 overflow-y-auto p-6 space-y-6 scrollbar-hide">
-                    {messages.length === 0 && (
-                        <div className="flex flex-col items-center justify-center h-full text-center space-y-4 max-w-md mx-auto">
-                            <div className="w-20 h-20 bg-[#F9F7C9]/10 rounded-full flex items-center justify-center mb-2 animate-pulse border border-[#F9F7C9]/20">
-                                <Bot size={40} className="text-[#F9F7C9]" />
+                {/* Main Interaction Area */}
+                <main className="flex-1 flex flex-col min-w-0 bg-transparent relative">
+                    {/* Chat Messages */}
+                    <div className="flex-1 overflow-y-auto p-4 sm:p-10 space-y-8 scroll-smooth scrollbar-hide">
+                        {messages.length === 0 && (
+                            <div className="h-full flex flex-col items-center justify-center space-y-6 text-center animate-in fade-in zoom-in duration-700">
+                                <div className="w-16 h-16 bg-[#FDFBD4]/5 rounded-2xl flex items-center justify-center border border-[#FDFBD4]/10 shadow-inner">
+                                    <Bot size={32} className="text-[#FDFBD4]" />
+                                </div>
+                                <div className="space-y-2 max-w-sm">
+                                    <h2 className="text-2xl font-bold text-white">Shalom, Beloved</h2>
+                                    <p className="text-white/40 text-sm leading-relaxed">
+                                        I am centered in Christ to provide you with scriptural guidance and faithful encouragement.
+                                    </p>
+                                </div>
                             </div>
-                            <h2 className="text-xl font-semibold text-white">Shalom! I am Theo</h2>
-                            <p className="text-white/70 leading-relaxed italic">
-                                "Thy word is a lamp unto my feet, and a light unto my path." — Psalm 119:105
-                            </p>
-                            <p className="text-white/50 text-sm">
-                                How can I offer you Biblical guidance or Christian encouragement today?
-                            </p>
-                        </div>
-                    )}
+                        )}
 
-                    {messages.map((msg, index) => (
-                        <div key={index} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-in fade-in slide-in-from-bottom-2 duration-300`}>
-                            <div className={`max-w-[85%] flex gap-3 ${msg.role === 'user' ? 'flex-row-reverse' : 'flex-row'}`}>
-                                <div className={`w-8 h-8 rounded-full flex-shrink-0 flex items-center justify-center ${msg.role === 'user' ? 'bg-[#D4AF37]/20 text-[#D4AF37]' : 'bg-[#F9F7C9]/20 text-[#F9F7C9]'
-                                    } border border-white/10`}>
-                                    {msg.role === 'user' ? <User size={16} /> : <Bot size={16} />}
-                                </div>
-                                <div className={`p-4 rounded-2xl ${msg.role === 'user'
-                                    ? 'bg-[#007055]/40 text-white rounded-tr-none border border-[#007055]/30 shadow-lg'
-                                    : 'bg-white/5 text-white/90 rounded-tl-none border border-white/10 backdrop-blur-md shadow-inner'
-                                    }`}>
-                                    <div className="markdown-content prose prose-invert prose-sm max-w-none prose-p:leading-relaxed">
-                                        <ReactMarkdown>{msg.content}</ReactMarkdown>
+                        {messages.map((msg, index) => (
+                            <div key={index}
+                                className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-in fade-in slide-in-from-bottom-6 duration-500 fill-mode-both`}
+                                style={{ animationDelay: `${index * 50}ms` }}
+                            >
+                                <div className={`group flex flex-col max-w-[90%] sm:max-w-[80%] ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
+                                    <div className={`flex items-center gap-2 mb-2 px-2 ${msg.role === 'user' ? 'flex-row-reverse' : 'flex-row'}`}>
+                                        <div className={`text-[10px] font-bold uppercase tracking-widest ${msg.role === 'user' ? 'text-[#007055]' : 'text-[#FDFBD4]/60'}`}>
+                                            {msg.role === 'user' ? 'You' : 'Theo'}
+                                        </div>
+                                    </div>
+                                    <div className={`relative p-5 sm:p-6 rounded-[2rem] text-sm leading-relaxed shadow-xl transition-all duration-300 ${msg.role === 'user'
+                                            ? 'bg-gradient-to-br from-[#007055] to-[#004D3C] text-white rounded-tr-none border border-white/5'
+                                            : 'bg-white/5 backdrop-blur-md text-white/90 rounded-tl-none border border-white/5 hover:bg-white/10'
+                                        }`}>
+                                        <div className={`markdown-content prose prose-invert prose-sm max-w-none 
+                                            prose-p:leading-relaxed prose-headings:text-[#FDFBD4] prose-strong:text-[#FDFBD4]
+                                            ${msg.role === 'assistant' ? 'selection:bg-[#FDFBD4]/30' : 'selection:bg-white/20'}
+                                        `}>
+                                            <ReactMarkdown>{msg.content}</ReactMarkdown>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                    ))}
+                        ))}
 
-                    {isLoading && (
-                        <div className="flex justify-start animate-in fade-in duration-300">
-                            <div className="flex gap-3">
-                                <div className="w-8 h-8 rounded-full bg-[#F9F7C9]/20 text-[#F9F7C9] border border-white/10 flex items-center justify-center">
-                                    <Loader2 size={16} className="animate-spin" />
-                                </div>
-                                <div className="bg-white/5 p-4 rounded-2xl rounded-tl-none border border-white/10 backdrop-blur-md">
-                                    <div className="flex gap-1.5 px-2">
-                                        <div className="w-2 h-2 bg-[#F9F7C9]/60 rounded-full animate-bounce delay-0"></div>
-                                        <div className="w-2 h-2 bg-[#F9F7C9]/60 rounded-full animate-bounce delay-150"></div>
-                                        <div className="w-2 h-2 bg-[#F9F7C9]/60 rounded-full animate-bounce delay-300"></div>
+                        {isLoading && (
+                            <div className="flex justify-start animate-in fade-in duration-300">
+                                <div className="bg-white/5 p-4 rounded-3xl border border-white/5 flex items-center gap-3">
+                                    <div className="flex gap-1.5">
+                                        <div className="w-1.5 h-1.5 bg-[#FDFBD4] rounded-full animate-bounce"></div>
+                                        <div className="w-1.5 h-1.5 bg-[#FDFBD4]/60 rounded-full animate-bounce [animation-delay:0.2s]"></div>
+                                        <div className="w-1.5 h-1.5 bg-[#FDFBD4]/30 rounded-full animate-bounce [animation-delay:0.4s]"></div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                    )}
-                    <div ref={chatEndRef} />
-                </div>
+                        )}
+                        <div ref={chatEndRef} />
+                    </div>
 
-                {/* Input Area */}
-                <div className="p-6 border-t border-white/10 bg-[#004D3C]/20">
-                    <div className="relative group">
-                        <input
-                            type="text"
-                            value={input}
-                            onChange={(e) => setInput(e.target.value)}
-                            onKeyPress={(e) => e.key === 'Enter' && handleSend()}
-                            placeholder="Seek guidance or ask a question..."
-                            className="w-full bg-white/5 border border-white/10 rounded-xl py-4 pl-4 pr-14 focus:outline-none focus:border-[#F9F7C9]/50 focus:ring-1 focus:ring-[#F9F7C9]/30 transition-all text-white placeholder:text-white/20"
-                            disabled={isLoading}
-                        />
-                        <button
-                            onClick={handleSend}
-                            disabled={isLoading || !input.trim()}
-                            className={`absolute right-2 top-2 bottom-2 w-10 rounded-lg flex items-center justify-center transition-all ${input.trim() ? 'bg-[#007055] text-white hover:bg-[#008A69] shadow-lg hover:shadow-[#007055]/40' : 'bg-white/5 text-white/20'
-                                }`}
-                        >
-                            <Send size={18} />
-                        </button>
+                    {/* Sophisticated Input Box */}
+                    <div className="p-6 sm:p-10">
+                        <div className="relative group max-w-3xl mx-auto">
+                            <div className="absolute -inset-0.5 bg-gradient-to-r from-[#007055] via-[#FDFBD4]/20 to-[#004D3C] rounded-3xl blur opacity-20 group-focus-within:opacity-40 transition duration-500"></div>
+                            <div className="relative flex items-center bg-[#00362B]/60 backdrop-blur-xl border border-white/10 rounded-3xl p-2 transition-all duration-300 group-focus-within:border-[#FDFBD4]/30 group-focus-within:bg-[#00362B]/80 shadow-2xl">
+                                <input
+                                    type="text"
+                                    value={input}
+                                    onChange={(e) => setInput(e.target.value)}
+                                    onKeyPress={(e) => e.key === 'Enter' && handleSend()}
+                                    placeholder="Type your spiritual inquiry here..."
+                                    className="flex-1 bg-transparent py-4 px-6 focus:outline-none text-white placeholder:text-white/20"
+                                    disabled={isLoading}
+                                />
+                                <button
+                                    onClick={handleSend}
+                                    disabled={isLoading || !input.trim()}
+                                    className={`p-4 rounded-2xl transition-all duration-500 ${input.trim()
+                                            ? 'bg-[#FDFBD4] text-[#002B22] shadow-[0_0_20px_rgba(253,251,212,0.3)] hover:scale-105 active:scale-95'
+                                            : 'bg-white/5 text-white/20 shadow-none'
+                                        }`}
+                                >
+                                    <Send size={20} className={isLoading ? 'animate-pulse' : ''} />
+                                </button>
+                            </div>
+                            <div className="flex justify-center mt-4">
+                                <p className="text-[9px] uppercase tracking-[0.4em] text-white/20 font-black">
+                                    Faith-based Intelligence • CLCC
+                                </p>
+                            </div>
+                        </div>
                     </div>
-                    <p className="text-[10px] text-center mt-3 text-[#F9F7C9]/30 uppercase tracking-[0.2em] font-medium">
-                        Scriptural Wisdom & Pastoral Support
-                    </p>
-                </div>
+                </main>
             </div>
         </div>
     );
+    );
 };
 
 export default App;