import Translation from "next-translate/Trans"

import { Link } from "./design/Link"
import { TextSpecial } from "./design/TextSpecial"

export const About: React.FC = () => {
  return (
    <section className="text-center mt-6">
      <h1 className="text-4xl">{"<Form />"}</h1>
      <h2 className="text-xl dark:text-gray-300 text-gray-600 mt-4">
        npm install --save{" "}
        <Link
          href="https://www.npmjs.com/package/react-component-form"
          target="_blank"
          rel="noopener noreferrer"
        >
          react-component-form
        </Link>
      </h2>

      <p className="max-w-lg mt-6 text-base" data-cy="main-description">
        <Translation
          i18nKey="common:about"
          components={[<TextSpecial key="special" />]}
        />
      </p>
    </section>
  )
}