new era

frontend/src/pages/ChatPage.jsx

@@ -3,7 +3,7 @@ import { useApp } from "../store";
 import { listChats } from "../api";
 import Sidebar from "../components/Sidebar";
 import ChatView from "../components/ChatView";
-import { Flame, MessageSquarePlus } from "lucide-react";
+import { Flame, Paperclip, Layers, Zap } from "lucide-react";
 
 export default function ChatPage() {
   const { state, dispatch } = useApp();
@@ -12,9 +12,7 @@ export default function ChatPage() {
     try {
       const chats = await listChats(state.token);
       dispatch({ type: "SET_CHATS", chats });
-    } catch {
-      /* ignore */
-    }
+    } catch { /* ignore */ }
   }, [state.token, dispatch]);
 
   useEffect(() => {
@@ -24,7 +22,6 @@ export default function ChatPage() {
   return (
     <div className="h-full flex">
       <Sidebar onRefresh={loadChats} />
-
       <main className="flex-1 flex flex-col min-w-0">
         {state.activeChatId ? (
           <ChatView key={state.activeChatId} chatId={state.activeChatId} />
@@ -39,20 +36,52 @@ export default function ChatPage() {
 function EmptyState() {
   return (
     <div className="flex-1 flex items-center justify-center p-8">
-      <div className="text-center animate-fade-in">
+      <div className="text-center animate-fade-in max-w-lg">
         <div className="inline-flex items-center justify-center w-24 h-24 rounded-3xl bg-gradient-to-br from-anton-accent/20 to-transparent border border-anton-accent/20 mb-6">
           <Flame size={44} className="text-anton-accent" />
         </div>
         <h2 className="text-2xl font-bold text-white mb-2">Son of Anton</h2>
-        <p className="text-anton-muted max-w-md">
+        <p className="text-anton-muted mb-6">
           Avatar of All Elements of Code. Create a new chat to begin — but bring
           real questions, not that first-result-of-Google garbage.
         </p>
-        <div className="mt-4 flex items-center justify-center gap-2 text-xs text-anton-muted">
-          <span>📎 Supports images, videos, PDFs, and documents</span>
-        </div>
-        <div className="mt-1 flex items-center justify-center gap-2 text-xs text-anton-muted">
-          <span>⚡ Multiple chats can stream in parallel</span>
+
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-left">
+          <div className="bg-anton-surface border border-anton-border rounded-xl p-4">
+            <div className="flex items-center gap-2 mb-2">
+              <div className="w-8 h-8 rounded-lg bg-blue-500/20 flex items-center justify-center">
+                <Paperclip size={16} className="text-blue-400" />
+              </div>
+              <span className="text-sm font-medium text-white">File Upload</span>
+            </div>
+            <p className="text-xs text-anton-muted leading-relaxed">
+              Drop images, videos, PDFs, or code files directly into chat. AI describes and analyzes them.
+            </p>
+          </div>
+
+          <div className="bg-anton-surface border border-anton-border rounded-xl p-4">
+            <div className="flex items-center gap-2 mb-2">
+              <div className="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center">
+                <Layers size={16} className="text-purple-400" />
+              </div>
+              <span className="text-sm font-medium text-white">Parallel Chats</span>
+            </div>
+            <p className="text-xs text-anton-muted leading-relaxed">
+              Run multiple conversations simultaneously. Switch between them while they stream.
+            </p>
+          </div>
+
+          <div className="bg-anton-surface border border-anton-border rounded-xl p-4">
+            <div className="flex items-center gap-2 mb-2">
+              <div className="w-8 h-8 rounded-lg bg-green-500/20 flex items-center justify-center">
+                <Zap size={16} className="text-green-400" />
+              </div>
+              <span className="text-sm font-medium text-white">Full Code</span>
+            </div>
+            <p className="text-xs text-anton-muted leading-relaxed">
+              Production-ready code with syntax highlighting, download buttons, and ZIP export.
+            </p>
+          </div>
         </div>
       </div>
     </div>