Email Capture Section

Heroes

About

Email Capture Section – Lead generation form. Converts visitors into leads with a clean email input and call-to-action button. Perfect for product demos, newsletters, and onboarding pages. Accounts Payable Hero is a fully reusable, production-ready hero section component with advanced animations and theme support.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Email Capture Section to your project and fits it to your theme.

Code

How Email Capture Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { AccountsPayableHero } from "@/components/ui/email-capture-section"
import { useState } from "react"

export default function AccountsPayableHeroDemo() {
  const [submitted, setSubmitted] = useState(false)

  const handleSubmit = (email: string) => {
    console.log("Email submitted:", email)
    setSubmitted(true)
    setTimeout(() => setSubmitted(false), 3000)
  }

  const handleDemo = () => {
    console.log("Demo clicked")
  }

  return (
    <div className="w-full">
      {submitted && (
        <div className="fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-full shadow-lg animate-in fade-in slide-in-from-top-2 duration-300 z-50">
          ✓ Email received! Check your inbox for next steps.
        </div>
      )}

      <AccountsPayableHero
        heading="Get started with Acctual's accounts payable today"
        subheading="Streamline your payment processes with intelligent automation"
        inputPlaceholder="Enter your work email"
        buttonText="See a demo"
        poweredByText="Designed by Ravi Katiyar"
        stickyNoteText="Everything's looking great! Thanks!"
        onSubmit={handleSubmit}
        onDemoClick={handleDemo}
      />
    </div>
  )
}