App médico com IA

import React from 'react';

const App = () => {
  return (
    <div className="App bg-gradient-to-b from-blue-50 to-blue-100 min-h-screen">
      <header className="bg-blue-600 text-white py-4">
        <div className="container mx-auto px-4">
          <h1 className="text-2xl font-semibold">Consulta Médica Inteligente</h1>
        </div>
      </header>

      <main className="container mx-auto px-4 py-6">
        <section className="mb-8 bg-white p-6 rounded-lg shadow-md">
          <h2 className="text-xl font-bold text-blue-800 mb-4">Descreva seus sintomas</h2>
          <textarea
            className="w-full p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            rows="4"
            placeholder="Ex: Dor de cabeça, febre, tosse..."
          ></textarea>
        </section>

        <section className="mb-8 bg-white p-6 rounded-lg shadow-md">
          <h2 className="text-xl font-bold text-blue-800 mb-4">Sugestões de Diagnóstico</h2>
          <div className="space-y-3">
            <div className="p-4 bg-blue-50 rounded-md hover:bg-blue-100 cursor-pointer">
              <h3 className="font-medium text-blue-700">Gripe</h3>
              <p className="text-sm text-gray-600">Febre, dor de cabeça, tosse.</p>
            </div>
            <div className="p-4 bg-blue-50 rounded-md hover:bg-blue-100 cursor-pointer">
              <h3 className="font-medium text-blue-700">Resfriado</h3>
              <p className="text-sm text-gray-600">Tosse, dor de garganta, coriza.</p>
            </div>
          </div>
        </section>

        <section className="bg-white p-6 rounded-lg shadow-md">
          <h2 className="text-xl font-bold text-blue-800 mb-4">Informações Adicionais</h2>
          <p className="text-gray-700 mb-4">Verifique abaixo mais informações sobre como cuidar da sua saúde:</p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-blue-50 p-4 rounded-md hover:bg-blue-100 cursor-pointer">
              <h3 className="font-medium text-blue-700">Dicas de Prevenção</h3>
              <p className="text-sm text-gray-600">Lave as mãos frequentemente.</p>
            </div>
            <div className="bg-blue-50 p-4 rounded-md hover:bg-blue-100 cursor-pointer">
              <h3 className="font-medium text-blue-700">Alimentação Saudável</h3>
              <p className="text-sm text-gray-600">Mantenha uma dieta balanceada.</p>
            </div>
          </div>
        </section>
      </main>

      <footer className="bg-blue-600 text-white py-4 mt-8">
        <div className="container mx-auto px-4 text-center">
          <p className="text-sm">© 2025 Consulta Médica Inteligente. Todos os direitos reservados.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;