"use client";

import React from "react";

export default function About() {
  return (
    <main className="flex items-center justify-center">
      <div className="max-w-2xl pt-5 sm:pt-10 lg:pt-20">
        <div className="text-center">
          <h1 className="text-balance text-5xl font-semibold tracking-tight text-gray-900 sm:text-7xl">
            Über das Projekt
          </h1>
          <p className="mt-8 text-pretty text-lg font-medium text-gray-500 sm:text-xl/8">
            Entwickler: Jean Jacques Avril
          </p>
          <p className="mt-2 text-pretty text-lg font-medium text-gray-500 sm:text-xl/8">
            Webseite:{" "}
            <a
              href="https://jeanavril.com"
              className="text-indigo-600 hover:underline"
            >
              jeanavril.com
            </a>
          </p>
          <p className="mt-2 text-pretty text-lg font-medium text-gray-500 sm:text-xl/8">
            Technologien: Next.js, Go, Docker, Deno, Dart
          </p>
          <p className="mt-8 text-pretty text-lg font-medium text-gray-500 sm:text-xl/8">
            Mit ActaTempus können Sie Ihre Arbeitszeiten mühelos erfassen und
            Einblicke in Ihre Arbeitsgewohnheiten gewinnen. Beginnen Sie noch
            heute und steigern Sie Ihre Produktivität.
          </p>
          <div className="mt-10 flex items-center justify-center gap-x-6">
            <a
              href="/register"
              className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
            >
              Registrieren
            </a>
            <a href="#" className="text-sm/6 font-semibold text-gray-900">
              Mehr erfahren <span aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      </div>
    </main>
  );
}
