components/header.tsx

import Image from "next/image";

import HeaderImage from "@/assets/images/header.svg";
import HeaderImageMesh from "@/assets/images/header-mesh.png";

export const Header = () => {
  return (
    <header
      className="relative bg-cover bg-fixed bg-black z-[1]"
      // style={{
      //   backgroundImage: `url(${HeaderImageMesh.src})`,
      // }}
    >
      <div className="flex items-start px-6 mx-auto max-w-7xl relative pt-24 pb-20">
        <div className="w-full lg:w-1/2 relative z-10">
          <h1 className="font-bold text-5xl lg:text-7xl text-white text-center lg:text-left">
            Fast Stable Diffusion XL <br />
            on TPU v5e ⚡
          </h1>
          <p className="text-sm text-white mt-3 text-center lg:text-left">
            Powered by{" "}
            <a
              href="https://huggingface.co"
              className="text-transparent bg-clip-text bg-gradient-to-r from-[#EFA596] to-[#ED94EB]"
            >
              HuggingFace.co
            </a>
          </p>
        </div>
        <Image
          src={HeaderImage}
          alt="Hugging Face header"
          className="absolute w-full -right-10 bottom-0 max-w-lg lg:max-w-4xl z-[-1]"
        />
      </div>
      <div className="absolute bottom-0 w-full h-full left-0 bg-gradient-to-b from-transparent to-black z-[1]" />
    </header>
  );
};