import Image from 'next/image';
import clsx from 'clsx';
import { Container } from './Container';
import terraformLogo from '../images/terraform.svg';

export function Hero() {
  return (
    <>
      <div className="bg-black pt-16 pb-16">
        <Container className="flex flex-col justify-center md:flex-row md:justify-around md:items-end">
          <Image
            src={terraformLogo}
            width="1500"
            height="1500"
            alt=""
            priority
            className={clsx(
              "h-32 w-32",
              terraformLogo.src.endsWith(".svg") ? "invert" : "rounded-full"
            )}
          />
          <div className="self-center">
            <h1 className="text-center font-display text-5xl font-medium tracking-tight text-white sm:text-7xl leading-10">
              Terraform školení
            </h1>
            <p className="mt-6 max-w-xl text-xl tracking-tight text-slate-100">
                  Školí: Vojtěch Mareš - DevOps konzultant, lektor a mentor
            </p>
          </div>
        </Container>
      </div>
    </>
  );
}