App médico com transcrição automática

import React from 'react';

function App() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-blue-100 p-8">
      <header className="text-center">
        <h1 className="text-4xl font-bold text-blue-900 mb-4">Bem-vindo ao MedTranscritor</h1>
        <p className="text-lg text-blue-700">Revolutionize sua experiência médica com transcrição automática e sugestões de diagnósticos.</p>
      </header>

      <section className="mt-10 grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white p-6 rounded-lg shadow-lg">
          <h2 className="text-2xl font-semibold text-blue-800">Como Funciona?</h2>
          <p className="mt-2 text-blue-600">Descreva seus sintomas e nosso sistema fará o resto, desde a transcrição até a sugestão de possíveis diagnósticos.</p>
        </div>
        <div className="bg-white p-6 rounded-lg shadow-lg">
          <h2 className="text-2xl font-semibold text-blue-800">Benefícios</h2>
          <ul className="mt-2 list-disc pl-5 text-blue-600">
            <li>Eficiência no atendimento</li>
            <li>Precisão na transcrição</li>
            <li>Sugestões de diagnósticos informadas</li>
          </ul>
        </div>
      </section>

      <section className="mt-10">
        <h2 className="text-3xl font-bold text-blue-900 text-center">Comece Agora</h2>
        <div className="mt-6 bg-white rounded-lg shadow-lg p-6 max-w-2xl mx-auto">
          <textarea className="w-full p-4 h-40 border border-blue-200 rounded-lg focus:outline-none focus:border-blue-500" placeholder="Descreva seus sintomas aqui..."></textarea>
          <button className="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300">Transcrever</button>
        </div>
      </section>

      <footer className="mt-20 text-center text-blue-600">
        <p>© 2025 MedTranscritor. Todos os direitos reservados.</p>
      </footer>
    </div>
  );
}

export default App;