import { ActionButtons } from '@/components/shared/action-buttons';
import { Container } from '@/components/shared/container';
import { GradientGlow } from '@/components/shared/gradient-glow';
import { SectionHeading } from '@/components/shared/section-heading';

export function CtaSection() {
  return (
    <section className="relative overflow-hidden">
      <GradientGlow className="left-1/2 top-1/2 h-[300px] w-[600px] -translate-x-1/2 -translate-y-1/2 opacity-25" />
      <Container className="relative py-28">
        <SectionHeading
          align="center"
          title="Ship your first project in minutes."
          description="Import a repository or start from a template. No credit card required to deploy your first preview."
          className="[&>h2]:text-4xl sm:[&>h2]:text-5xl"
        />
        <ActionButtons
          className="mt-9"
          primary={{ label: 'Start Deploying', href: '#' }}
          secondary={{ label: 'Talk to Sales', href: '#' }}
        />
      </Container>
    </section>
  );
}