神経疾患リスト数

import React from 'react';

const App = () => {
  return (
    <div className="App bg-gray-100 min-h-screen">
      <header className="bg-blue-600 text-white p-6">
        <h1 className="text-3xl font-bold">rainFacts.org</h1>
        <p className="text-lg">Neurological Diseases & Disorders A-Z</p>
      </header>
      <main className="p-6">
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">About Neurological Diseases</h2>
          <p className="text-gray-700">Neurological diseases and disorders encompass a wide range of conditions that affect the brain, spinal cord, and nerves. These conditions can have a significant impact on a person's quality of life and require specialized care and treatment.</p>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">List of Neurological Diseases</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i)).map((letter) => (
              <div key={letter} className="bg-white p-6 rounded-lg shadow-md">
                <h3 className="text-xl font-semibold mb-2">{letter}</h3>
                <ul className="list-disc list-inside">
                  {Array.from({ length: 5 }, (_, i) => `Disease ${letter}${i + 1}`).map((disease) => (
                    <li key={disease} className="text-gray-700">{disease}</li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Statistics</h2>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <p className="text-gray-700">There are <span className="font-bold">130</span> neurological diseases and disorders listed on rainFacts.org.</p>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Resources</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {Array.from({ length: 3 }, (_, i) => (
              <div key={i} className="bg-white p-6 rounded-lg shadow-md">
                <h3 className="text-xl font-semibold mb-2">Resource {i + 1}</h3>
                <p className="text-gray-700">Detailed information and support for neurological diseases.</p>
              </div>
            ))}
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Latest Research</h2>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <p className="text-gray-700">Stay updated with the latest research and advancements in the field of neurology.</p>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Support Groups</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {Array.from({ length: 3 }, (_, i) => (
              <div key={i} className="bg-white p-6 rounded-lg shadow-md">
                <h3 className="text-xl font-semibold mb-2">Support Group {i + 1}</h3>
                <p className="text-gray-700">Join a community of individuals facing similar challenges.</p>
              </div>
            ))}
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Contact Us</h2>
          <div className="bg-white p-6 rounded-lg shadow-md">
            <p className="text-gray-700">If you have any questions or need further information, please feel free to contact us.</p>
          </div>
        </section>
      </main>
      <footer className="bg-blue-600 text-white p-6">
        <p className="text-center">© 2025 rainFacts.org. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;