import React from "react";

const Beitraege = () => {
    return (
      <section className="max-w-4xl mx-auto px-4 py-16">
        <h1 className="text-3xl font-bold text-frog-600 mb-6">Mitgliedsbeiträge</h1>
        <p className="text-gray-700 mb-6">Gültig ab: <strong>01.01.2024</strong></p>
  
        <div className="bg-white shadow rounded-lg overflow-hidden">
          <table className="w-full table-auto">
            <thead className="bg-frog-100 text-frog-800">
              <tr>
                <th className="text-left px-4 py-3 font-semibold">Beitragsgruppe</th>
                <th className="text-right px-4 py-3 font-semibold">Jahresbeitrag</th>
              </tr>
            </thead>
            <tbody className="text-gray-800">
              <tr className="border-t">
                <td className="px-4 py-3">
                  Kinder / Jugendliche / Schüler über 18 Jahre / Studenten / Rentner / Arbeitslose (auf Antrag)
                </td>
                <td className="px-4 py-3 text-right">64,00 €</td>
              </tr>
              <tr className="border-t">
                <td className="px-4 py-3">
                  Rentnerehepaar / arbeitsloses Ehepaar (auf Antrag) / 2 Geschwister unter 18 J. ohne Eltern
                </td>
                <td className="px-4 py-3 text-right">99,00 €</td>
              </tr>
              <tr className="border-t">
                <td className="px-4 py-3">
                  Erwachsener ab 18 Jahre / 3 und mehr Geschwister unter 18 J. ohne Eltern
                </td>
                <td className="px-4 py-3 text-right">112,00 €</td>
              </tr>
              <tr className="border-t">
                <td className="px-4 py-3">
                  Ehepaar ohne Kinder / 1 Elternteil mit beliebig vielen Kindern unter 18 J.
                </td>
                <td className="px-4 py-3 text-right">162,00 €</td>
              </tr>
              <tr className="border-t">
                <td className="px-4 py-3">
                  Ehepaar mit beliebig vielen Kindern
                </td>
                <td className="px-4 py-3 text-right">168,00 €</td>
              </tr>
            </tbody>
          </table>
        </div>
  
        <p className="text-sm text-gray-500 mt-6">
          Hinweis: Vergünstigungen gelten nur auf Antrag und ggf. mit Nachweis.
        </p>
      </section>
    );
  };
  
  export default Beitraege;
  