import Card from '../../components/Card/Card';
import Button from '../../components/Button/Button';

import './CreditsPage.css';

function CreditsPage() {
  return (
    <Card className="credits-page">
      <div className="credits-page__header">
        <h1 className="credits-page__title">Credits</h1>
        <p className="credits-page__subtitle">
          Thanks to the people, projects, and communities that made this application possible.
        </p>
      </div>

      <dl className="specs">
        <div className="spec">
          <dt>Developer</dt>
          <dd>Lucas</dd>
        </div>

        <div className="spec">
          <dt>Framework</dt>
          <dd>React + TypeScript</dd>
        </div>

        <div className="spec">
          <dt>Desktop Runtime</dt>
          <dd>Tauri</dd>
        </div>

        <div className="spec">
          <dt>Special Thanks</dt>
          <dd></dd>
        </div>
      </dl>

      <div className="credits-page__actions">
        <Button variant="primary">Support the Project</Button>
      </div>
    </Card>
  );
}

export default CreditsPage;