export const Hero = () => {
  return (
    <section className="relative overflow-hidden py-20 md:py-32">
      <div className="absolute inset-0 -z-10 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
      <div className="container px-4 md:px-6">
        <div className="flex flex-col items-center space-y-4 text-center">
          <div className="space-y-2">
            <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl lg:text-7xl">Albert Jeffers Studios</h1>
            <p className="font-bold tracking-tighter sm:text-2xl md:text-3xl lg:text-4xl">Visual Artist & Painter</p>
            <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
              Exploring the intersection of color, emotion, and form through contemporary painting
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};
