AI Marketing Hero Section

A modern, animated hero section component featuring a sophisticated light rays background effect and interactive dashboard preview. Built with React and Tailwind CSS, this component showcases an AI-powered marketing platform with elegant typography, gradient CTA buttons, and a comprehensive analytics dashboard with real-time metrics cards. Includes animated WebGL light beams, smooth hover effects, and a responsive 4-column stats grid displaying key performance indicators like user growth, order volume, sales figures, and pending items. Perfect for SaaS landing pages, marketing platforms, or any application requiring a premium, data-driven presentation with stunning visual effects. Key Features: Animated light rays background with Canvas rendering Responsive metric cards with trend indicators Interactive chart visualization Modern gradient design with subtle blur effects Fully responsive layout Smooth animations and hover states Clean typography with light font weights Professional color scheme with purple/slate accents

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

import { AlterHeroClone } from "@/components/ui/ai-marketing-hero-section";

export default function DemoOne() {
  return <AlterHeroClone />;
}