Update app/(public)/page.tsx

app/(public)/page.tsx

@@ -1,22 +1,99 @@
+'use client';
+
 import { AskAi } from "@/components/space/ask-ai";
 import { redirect } from "next/navigation";
+import Editor from '@monaco-editor/react';
+import { useState, useEffect } from 'react';
+
 export default function Home() {
+  // Monaco Editor के लिए state
+  const [editorCode, setEditorCode] = useState('');
+  const [editorLanguage, setEditorLanguage] = useState('javascript');
+  const [showEditor, setShowEditor] = useState(false);
+
+  // Global event listener for code extraction
+  useEffect(() => {
+    const handleCodeGenerated = (event: any) => {
+      if (event.detail && event.detail.code) {
+        const { code, language } = event.detail;
+        setEditorCode(code);
+        setEditorLanguage(language || 'javascript');
+        setShowEditor(true);
+      }
+    };
+
+    // Listen for custom events from AskAi component
+    window.addEventListener('codeGenerated', handleCodeGenerated);
+    
+    return () => {
+      window.removeEventListener('codeGenerated', handleCodeGenerated);
+    };
+  }, []);
+
+  // Original redirect logic
   redirect("/projects/new");
+  
   return (
     <>
       <header className="container mx-auto pt-20 px-6 relative flex flex-col items-center justify-center text-center">
         <div className="rounded-full border border-neutral-100/10 bg-neutral-100/5 text-xs text-neutral-300 px-3 py-1 max-w-max mx-auto mb-2">
-          ✨ DeepSite Public Beta
+          ✨ DeepSite with Groq AI
         </div>
         <h1 className="text-8xl font-semibold text-white font-mono max-w-4xl">
           Code your website with AI in seconds
         </h1>
         <p className="text-2xl text-neutral-300/80 mt-4 text-center max-w-2xl">
-          Vibe Coding has never been so easy.
+          Powered by Groq LLM with Monaco Editor
         </p>
         <div className="mt-14 max-w-2xl w-full mx-auto">
           <AskAi />
         </div>
+
+        {/* Monaco Editor Section - Shows when code is generated */}
+        {showEditor && editorCode && (
+          <div className="mt-8 max-w-4xl w-full mx-auto">
+            <div className="border border-neutral-700 rounded-lg overflow-hidden bg-neutral-900">
+              <div className="px-4 py-2 bg-neutral-800 flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium text-neutral-300">
+                    Generated Code ({editorLanguage})
+                  </span>
+                </div>
+                <div className="flex gap-2">
+                  <button 
+                    onClick={() => navigator.clipboard.writeText(editorCode)}
+                    className="text-xs px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                  >
+                    Copy Code
+                  </button>
+                  <button 
+                    onClick={() => setShowEditor(false)}
+                    className="text-xs px-3 py-1 bg-neutral-600 text-white rounded hover:bg-neutral-700 transition-colors"
+                  >
+                    Hide
+                  </button>
+                </div>
+              </div>
+              <Editor
+                height="400px"
+                language={editorLanguage}
+                theme="vs-dark"
+                value={editorCode}
+                onChange={(value) => setEditorCode(value || '')}
+                options={{
+                  minimap: { enabled: false },
+                  fontSize: 14,
+                  lineNumbers: 'on',
+                  automaticLayout: true,
+                  wordWrap: 'on',
+                  scrollBeyondLastLine: false,
+                  renderWhitespace: 'selection'
+                }}
+              />
+            </div>
+          </div>
+        )}
+
         <div className="absolute inset-0 pointer-events-none -z-[1]">
           <div className="w-full h-full bg-gradient-to-r from-purple-500 to-pink-500 opacity-10 blur-3xl rounded-full" />
           <div className="w-2/3 h-3/4 bg-gradient-to-r from-blue-500 to-teal-500 opacity-24 blur-3xl absolute -top-20 right-10 transform rotate-12" />
@@ -24,6 +101,7 @@ export default function Home() {
           <div className="w-48 h-48 bg-gradient-to-r from-cyan-500 to-indigo-500 opacity-20 blur-3xl absolute top-1/3 right-1/3 rounded-lg transform -rotate-15" />
         </div>
       </header>
+      
       <div id="community" className="h-screen flex items-center justify-center">
         <h1 className="text-7xl font-extrabold text-white font-mono">
           Community Driven