---
import Icon from './Icon.astro';

interface Props {
  title: string;
  text?: string;
}
const { title, text } = Astro.props;
---
<section class="bg-navy bg-linear-to-br from-navy to-navy-light">
  <div class="container-px py-16 text-center">
    <h2 class="mx-auto max-w-2xl text-3xl font-bold text-white sm:text-4xl">{title}</h2>
    {text && <p class="mx-auto mt-4 max-w-xl text-slate-300">{text}</p>}
    <div class="mt-8 flex flex-wrap justify-center gap-3">
      <a href="/employers" class="btn-primary">For Employers <Icon name="arrow-right" class="h-4 w-4" /></a>
      <a href="/jobseekers" class="btn-ghost">For Jobseekers</a>
      <a href="/contact" class="btn-secondary">Contact us</a>
    </div>
  </div>
</section>