Hero Section

Heroes

About

Modern hero section with dark mode support and CTA buttons for analytics products.

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

Code

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

Usage.tsx

import { Component } from "@/components/ui/hero-section-2";

export default function DemoOne() {
  return (
    <Component
      title="Scale your business with"
      highlightedText="smart analytics"
      description="Transform your data into actionable insights. Our AI-powered platform helps you make better decisions, increase revenue, and grow faster."
      primaryButtonText="Start Free Trial"
      secondaryButtonText="Watch Demo"
    />
  );
}