Generate a SaaS landing page hero section with a product visual

Generate a hero section component for a Next.js App Router marketing page, built with Tailwind CSS and shadcn/ui primitives.

Content:
- Eyebrow/badge text: Now with team workspaces
- Headline: Ship customer support that actually reads the docs — large, tight leading, should read as one confident sentence, not a pile of slogans.
- Subheadline: Connect your help center once. Every reply cites the real answer. — one sentence, muted color, smaller than the headline.
- Primary CTA button: Start free trial, plus a secondary ghost or text-link CTA: Watch a 2-min demo.
- A visual on the right on desktop, below the text on mobile: a mock chat widget showing an AI reply with a citation chip underneath it. Build it as an actual styled mock (cards, a stat row, a chat bubble, whatever fits the description), not a grey placeholder box.

Layout:
- Two-column on desktop, stacked with the visual below the text on mobile.
- Generous vertical padding on desktop, with a constrained max-width container.
- A subtle background treatment behind the whole section — a soft gradient or a faint grid pattern, not a flat white or black background.

Constraints:
- Server component — no client-side state unless the visual mock genuinely needs interactivity.
- Use next/image, with a placeholder src, for any images.
- Ship it as a self-contained Hero component with typed props for all of the text content above, so it's reusable with different copy.