Shadcn Secondary Hero Block One

This secondary hero starts with the visual proof, not the headline. The React source renders ChatIllustration first, then places the Tailark AI pill, the AI-driven insights, seamless execution. headline, a short paragraph, and a Get Started button underneath it. That order makes the block useful for a Next.js landing page where the visitor already knows the product category and needs a focused feature introduction.

The illustration is more than a static card. It is a client component that waits briefly, switches from a typing loader to a streamed response, and exposes source chips for Tailark and Google. In a production shadcn UI blocks page, the placeholder prompt and source list should be replaced with real product language, but the interaction pattern is a good fit for AI assistants, research tools, and workflow automation pages.

Layout Notes

The section uses a bg-linear-to-b wrapper, a max-w-5xl container, and centered copy in a max-w-2xl column. Tailwind CSS responsive type classes move the heading from text-4xl through md:text-5xl and lg:text-6xl, so the hero layout stays compact on an inner page while still feeling substantial on desktop.

Use This Variant When

Use this secondary hero for a SaaS page that needs to demonstrate an AI workflow before asking for action. It works best when the chat card can show a real answer, a recognizable data source, or a concrete output from the product. If the page is about pricing, docs, or a static policy, choose a quieter hero layout instead.

Customization Checklist

• Replace the Latin-style chat message with a realistic user request.
• Update the streamed response and source chips to match your product.
• Keep the badge short; it should label the feature area, not repeat the headline.
• Point the shadcn Button link at the next step for the inner page.

Related Shadcn UI Blocks

• Secondary Hero Blocks
• Hero Section Blocks

Preview Shadcn Secondary Hero Block One