import React from 'react';

const Credits: React.FC = () => {
  return (
    <div className="credits-container">
      <section id="credits" className="credits-section">
        <h1 className="title">Credits</h1>

        <h2 className="subtitle">Icons</h2>
        <p className="paragraph">
          This project utilizes the following icon resources:
        </p>
        <a
          href="https://fontawesome.com/v4/license/"
          className="credit-btn"
          target="_blank"
          rel="noopener noreferrer"
        >
          fontawesome
        </a>
        <h2 className="subtitle">Fonts</h2>
        <p className="paragraph">
          The fonts used in this project are provided by:
        </p>
        <a
          href="https://github.com/itfoundry/Poppins"
          className="credit-btn"
          target="_blank"
          rel="noopener noreferrer"
        >
          Poppins
        </a>
        <a
          href="https://openfontlicense.org"
          className="credit-btn"
          target="_blank"
          rel="noopener noreferrer"
        >
          Inconsolata, Merriweather, Noto Sans, Noto Serif, Playfair Display, Bangers, Caveat, Frederika the Great, Sofadi One, Zilla Slab Highlight
        </a>
        <a
          href="http://www.apache.org/licenses/LICENSE-2.0"
          className="credit-btn"
          target="_blank"
          rel="noopener noreferrer"
        >
          Roboto, Rock Salt
        </a>
        <a
          href="https://ubuntu.com/legal/font-licence"
          className="credit-btn"
          target="_blank"
          rel="noopener noreferrer"
        >
          Ubuntu
        </a>
      </section>
    </div>
  );
};

export default Credits;