style: redesign UI with green/cream theme and fix logo path

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Send, User, Bot, Loader2, Search, Info } from 'lucide-react';
+import { Send, User, Bot, Loader2 } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import axios from 'axios';
 
@@ -53,45 +53,41 @@ const App: React.FC = () => {
     };
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-[#1a1c2c] via-[#4a192c] to-[#1a1c2c] flex flex-col items-center justify-center p-4">
+        <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-purple-600/20 rounded-full blur-[120px] pointer-events-none"></div>
-            <div className="fixed bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-pink-600/20 rounded-full blur-[120px] pointer-events-none"></div>
+            <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="w-full max-w-4xl h-[90vh] glass-container flex flex-col relative z-10">
+            <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">
+                <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-pink-500/50 p-1 bg-white/5">
-                            <img src="/assests/logo.png" alt="CLCC Logo" className="w-full h-full object-contain" />
+                        <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>
                         <div>
-                            <h1 className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-pink-300">
+                            <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-white/50 tracking-wider uppercase">
+                            <p className="text-xs text-[#F9F7C9]/60 tracking-wider uppercase font-medium">
                                 by TechDisciples CLCC
                             </p>
                         </div>
                     </div>
-                    <div className="flex gap-2 text-white/40">
-                        <Search size={18} className="cursor-help hover:text-white transition-colors" title="Web Search Fallback Enabled" />
-                        <Info size={18} className="cursor-help hover:text-white transition-colors" title="Biblical Guidance Assistant" />
-                    </div>
                 </header>
 
                 {/* 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-pink-500/10 rounded-full flex items-center justify-center mb-2 animate-pulse">
-                                <Bot size={40} className="text-pink-400" />
+                            <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]" />
                             </div>
                             <h2 className="text-xl font-semibold text-white">Shalom! I am Theo</h2>
-                            <p className="text-white/60 leading-relaxed italic">
+                            <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/40 text-sm">
+                            <p className="text-white/50 text-sm">
                                 How can I offer you Biblical guidance or Christian encouragement today?
                             </p>
                         </div>
@@ -100,15 +96,15 @@ const App: React.FC = () => {
                     {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-purple-500/20 text-purple-400' : 'bg-pink-500/20 text-pink-400'
+                                <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-purple-600/30 text-white rounded-tr-none border border-purple-500/20'
-                                    : 'bg-white/5 text-white/90 rounded-tl-none border border-white/10 backdrop-blur-md'
+                                    ? '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">
+                                    <div className="markdown-content prose prose-invert prose-sm max-w-none prose-p:leading-relaxed">
                                         <ReactMarkdown>{msg.content}</ReactMarkdown>
                                     </div>
                                 </div>
@@ -119,14 +115,14 @@ const App: React.FC = () => {
                     {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-pink-500/20 text-pink-400 border border-white/10 flex items-center justify-center">
+                                <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-pink-400/60 rounded-full animate-bounce delay-0"></div>
-                                        <div className="w-2 h-2 bg-pink-400/60 rounded-full animate-bounce delay-150"></div>
-                                        <div className="w-2 h-2 bg-pink-400/60 rounded-full animate-bounce delay-300"></div>
+                                        <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>
                                     </div>
                                 </div>
                             </div>
@@ -136,7 +132,7 @@ const App: React.FC = () => {
                 </div>
 
                 {/* Input Area */}
-                <div className="p-6 border-t border-white/10">
+                <div className="p-6 border-t border-white/10 bg-[#004D3C]/20">
                     <div className="relative group">
                         <input
                             type="text"
@@ -144,19 +140,19 @@ const App: React.FC = () => {
                             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-pink-500/50 focus:ring-1 focus:ring-pink-500/50 transition-all text-white placeholder:text-white/20"
+                            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-pink-600 text-white hover:bg-pink-500' : 'bg-white/5 text-white/20'
+                            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>
                     </div>
-                    <p className="text-[10px] text-center mt-3 text-white/20 uppercase tracking-[0.2em]">
+                    <p className="text-[10px] text-center mt-3 text-[#F9F7C9]/30 uppercase tracking-[0.2em] font-medium">
                         Scriptural Wisdom & Pastoral Support
                     </p>
                 </div>