Affordance

export function InviteCard() {
  return (
    <form className='w-96 rounded-2xl border bg-background p-6'>
      <h2 className='font-semibold'>Invite your team</h2>
      <p className='mt-1 text-sm text-muted-foreground'>
        Teammates can edit every project.{' '}
        {/* Links inside text stay underlined. */}
        <a
          href='/docs/roles'
          className='text-blue-600 underline underline-offset-2'
        >
          Learn about roles
        </a>
      </p>
      {/* A visible border says "type here". */}
      <input
        type='email'
        aria-label='Email address'
        placeholder='name@company.com'
        className='mt-4 h-10 w-full rounded-lg border bg-background px-3 text-sm'
      />
      <div className='mt-4 flex justify-end gap-2'>
        {/* Secondary: a border still reads as a button. */}
        <button
          type='button'
          className='h-10 cursor-pointer rounded-lg border px-4 text-sm font-medium hover:bg-muted'
        >
          Copy invite link
        </button>
        {/* Primary: a solid fill and a soft shadow look pressable. */}
        <button
          type='submit'
          className='h-10 cursor-pointer rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground shadow-md active:translate-y-px active:shadow-sm'
        >
          Send invite
        </button>
      </div>
    </form>
  );
}