Ask your question

Type anything you want to learn about, explore, or create.

Ask your question

setValue(e.target.value)}
                placeholder="Ask your question..."
                className="flex-1 resize-none bg-transparent outline-none text-gray-700 text-base min-h-[64px] max-h-40"
                aria-label="Ask your question"
              />

<div className="mt-4 flex justify-center gap-2">
              <button type="button" onClick={() => setValue('Give me a quick summary of the French Revolution')} className="text-sm px-3 py-1 rounded-md bg-gray-100 border border-gray-200 text-gray-700">Try: French Revolution</button>
              <button type="button" onClick={() => setValue('Write a punchy 2-line rap about coding')} className="text-sm px-3 py-1 rounded-md bg-gray-100 border border-gray-200 text-gray-700">Try: Rap</button>
              <button type="button" onClick={() => setValue('Explain how a DCT transmission works for motorcycles')} className="text-sm px-3 py-1 rounded-md bg-gray-100 border border-gray-200 text-gray-700">Try: Motorbikes</button>
            </div>
          </form>
        </main>

{/* Footer / example conversation area */}
        <footer className="px-6 py-6 border-t border-gray-100">
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 rounded-md bg-gray-100 flex items-center justify-center text-gray-600 font-medium">U</div>
            <div className="flex-1 text-sm text-gray-600">Your conversation will appear here after you ask a question.</div>
            <div className="text-xs text-gray-400">Press Enter to send</div>
          </div>
        </footer>
      </div>
    </div>
    </body>
    </html>
  );
}