export default function AboutHeroSection({ data }: { data: any }) {
  return (
    <section className="relative overflow-hidden bg-slate-900">
      <div className="absolute inset-0 bg-[url('/storage/advanced-fields/header/about-us-header.jpg')] bg-cover bg-center" />
      <div className="absolute inset-0 bg-slate-900/50" />
      <div className="relative mx-auto flex min-h-[180px] w-full max-w-6xl items-center px-4 py-12 sm:min-h-[220px] sm:px-6 md:min-h-[260px] md:py-16">
        <h1 className="mx-auto text-center text-3xl font-semibold text-white md:text-4xl">{data.main_title}</h1>
      </div>
    </section>
  );
}